/* Styles des pages produit (Pouch, Toplings, Hearthlight), sortis de
   styles.css le 17/10/2026 : 11 Ko compresses que les autres pages
   telechargeaient pour rien, sur une feuille qui bloque l'affichage.
   Charge apres styles.css par pouch.html (servie en /pouch), toplings.html et
   hearthlight.html.
   Toutes les regles sont limitees a .pd (le <main> des pages produit). */

/* ══════════════ Pages produit : Pouch, Toplings, Hearthlight ══════════════ */
/* Briques de product-kit.jsx. Chaque page pose ses teintes sur son <main> :
   --pd-a et --pd-b (accents), --pd-glow et --pd-glow-2 (halos du hero),
   --pd-shadow (ombre portee de l'icone et des fenetres). */
.pd {
  --pd-a: var(--ember); --pd-b: var(--ember-2); --pd-text: #b54a1c;
  --pd-glow: rgba(255,184,107,.24); --pd-glow-2: rgba(226,100,164,.12);
  --pd-shadow: rgba(201,120,40,.32);
}
.pd :is(h1, h2, h3, p, li, figcaption, summary) { overflow-wrap: break-word; }
/* Allemand, neerlandais, russe : des mots longs dans des cartes etroites. */
.pd:is(:lang(de), :lang(nl), :lang(ru)) :is(h2, h3, p, li) { hyphens: auto; }

.pd-hero { position: relative; z-index: 1; text-align: center; padding: 132px 0 0; overflow: hidden; }
.pd-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.pd-glow.g1 { width: 1300px; height: 1300px; left: 50%; top: 28%; transform: translate(-50%,-50%); background: radial-gradient(circle, var(--pd-glow), transparent 62%); }
.pd-glow.g2 { width: 900px; height: 900px; right: -320px; top: 46%; background: radial-gradient(circle, var(--pd-glow-2), transparent 62%); }
.pd-hero-inner { position: relative; max-width: 900px; }
.pd-icon { display: block; width: 112px; height: 112px; margin: 0 auto 22px; filter: drop-shadow(0 18px 28px var(--pd-shadow)); }
.pd-hero .kicker { justify-content: center; }
.pd-title {
  font-size: clamp(68px, 11.5vw, 148px); line-height: .9; margin: 0; letter-spacing: -.015em;
  background: linear-gradient(160deg, var(--pd-a) 10%, var(--pd-b) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.pd-tagline { font-size: clamp(25px, 3.6vw, 42px); line-height: 1.12; color: var(--ink); margin: 12px auto 0; max-width: 780px; text-wrap: balance; }
.pd-sub { color: var(--ink-soft); font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; max-width: 640px; margin: 20px auto 0; text-wrap: pretty; }
.pd-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.pd-note { margin: 14px auto 0; font-size: 13.5px; color: var(--ink-faint); max-width: 560px; }
.pd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; padding: 0; margin: 24px 0 0; }
.pd-chips li { font-size: 13px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-soft); background: rgba(255,250,241,.6); }

/* Boutons de telechargement : pastille encre, comme les badges des stores. */
.pd-store {
  display: inline-flex; align-items: center; gap: 12px; text-align: left;
  padding: 10px 22px 10px 16px; border-radius: 14px; min-height: 56px;
  background: var(--ink); color: var(--bg-card); border: 1px solid var(--ink);
  box-shadow: 0 14px 30px -14px rgba(42,28,20,.55);
  transition: transform .2s ease, box-shadow .25s ease, background .2s ease;
}
a.pd-store:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(42,28,20,.6); }
.pd-store-ico svg { width: 26px; height: 26px; display: block; }
.pd-store-txt { display: flex; flex-direction: column; line-height: 1.15; }
.pd-store-txt small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.pd-store-txt strong { font-size: 16.5px; font-weight: 700; letter-spacing: -.005em; }
.pd-store--ghost, .pd-store--soon { background: rgba(255,250,241,.7); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
a.pd-store--ghost:hover { border-color: var(--ink); box-shadow: none; }
.pd-store--soon { cursor: default; }
.pd-store--soon .pd-store-txt small { color: var(--pd-text); opacity: 1; font-weight: 700; }

/* Le visuel du hero : il deborde sous la ligne de flottaison, legerement
   couche, et se redresse au defilement quand le navigateur sait le faire. */
.pd-stage { position: relative; margin: 64px auto 0; max-width: 1180px; padding: 0 28px; perspective: 1800px; }
.pd-stage > * { transform-origin: 50% 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pd-stage > .pd-tilt { animation: pd-untilt linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  }
}
@keyframes pd-untilt { from { transform: rotateX(16deg) scale(.94); } to { transform: none; } }

/* Fenetre macOS */
.pd-window {
  position: relative; border-radius: 14px; overflow: hidden; background: #fbf7f1;
  border: 1px solid rgba(42,28,20,.14);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 50px 110px -40px rgba(60,32,12,.45), 0 18px 40px -24px rgba(60,32,12,.35);
}
.pd-window--dark { background: #1d1a1f; border-color: rgba(0,0,0,.4); }
.pd-window-bar { position: relative; display: flex; align-items: center; height: 30px; padding: 0 12px; background: linear-gradient(#f4eee6, #ebe3d8); border-bottom: 1px solid rgba(42,28,20,.08); }
.pd-window--dark .pd-window-bar { background: linear-gradient(#2c282e, #242026); border-bottom-color: rgba(0,0,0,.5); }
.pd-dots { display: inline-flex; gap: 7px; }
.pd-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.pd-dots i:nth-child(2) { background: #febc2e; }
.pd-dots i:nth-child(3) { background: #28c840; }
.pd-window-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.pd-window--dark .pd-window-title { color: rgba(255,255,255,.5); }
.pd-window-body > img, .pd-window-body > video, .pd-video { display: block; width: 100%; height: auto; }

/* Titres de section centres, quand la section l'est aussi. */
.pd-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.pd-head-center p { margin-left: auto; margin-right: auto; }

/* Grille de fonctions : 6 colonnes, des cartes de 2, 3, 4 ou 6 de large. */
.pd-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.pd-card {
  grid-column: span 2; position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 24px; padding: 28px 28px 26px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.pd-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(60,32,12,.45); }
.pd-card.w3 { grid-column: span 3; }
.pd-card.w4 { grid-column: span 4; }
.pd-card.w6 { grid-column: span 6; }
/* --pd-text : l'accent fonce, pour le petit texte (contraste AA sur la creme). */
.pd-card-tag { display: inline-block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--pd-text); margin-bottom: 10px; }
.pd-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.5vw, 33px); line-height: 1.05; margin: 0 0 10px; color: var(--ink); text-wrap: balance; }
.pd-card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.pd-card-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.pd-card-list li { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--pd-a) 10%, var(--bg-card)); color: color-mix(in oklab, var(--pd-a) 55%, var(--ink)); }
/* Le visuel occupe toute la place laissee par le texte : sur une meme
   rangee, les cartes finissent a la meme hauteur, sans vide en bas. Les
   captures s'y recadrent (object-fit), --op choisit le point a garder. */
.pd-card-media { margin: 22px -28px -26px; position: relative; flex: 1 1 auto; min-height: var(--mh, 210px); overflow: hidden; }
.pd-card.w3 .pd-card-media { --mh: 250px; }
.pd-card.w4 .pd-card-media { --mh: 290px; }
.pd-card.w6 .pd-card-media { --mh: 340px; }
.pd-card-media > img, .pd-card-media > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 0); }
.pd-card.tone-ink { background: #221a15; border-color: #221a15; }
.pd-card.tone-ink h3 { color: #fbf3e6; }
.pd-card.tone-ink p { color: rgba(251,243,230,.72); }
.pd-card.tone-warm { background: linear-gradient(160deg, color-mix(in oklab, var(--pd-a) 16%, var(--bg-card)), var(--bg-card) 70%); }

/* Galerie */
.pd-gallery { position: relative; }
.pd-gallery-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 28px;
  padding: 10px 28px 26px; margin: 0 -28px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.pd-gallery-track::-webkit-scrollbar { display: none; }
.pd-gallery-track:focus-visible { outline-offset: -3px; }
.pd-shot { flex: 0 0 min(820px, 84vw); margin: 0; scroll-snap-align: start; }
.pd-shot img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(60,32,12,.5); background: var(--bg-soft); }
.pd-shot figcaption { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); }
.pd-gallery-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.pd-gallery-nav button {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-card);
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s, transform .2s;
}
.pd-gallery-nav button:hover { border-color: var(--ink); transform: translateY(-1px); }
.pd-gallery-nav svg { width: 20px; height: 20px; }

/* FAQ : celle du site, centree */
.pd-faq { margin: 0 auto; }

/* Appel final */
.pd-cta {
  text-align: center; border: 1px solid var(--line); border-radius: 30px;
  padding: clamp(44px, 6vw, 80px) 28px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, var(--pd-glow), transparent 62%), var(--bg-card);
}
.pd-cta img { filter: drop-shadow(0 14px 24px var(--pd-shadow)); }
.pd-cta h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; margin: 16px auto 0; max-width: 760px; text-wrap: balance; }
.pd-cta p { color: var(--ink-soft); max-width: 560px; margin: 14px auto 0; }
.pd-cta-links { margin-top: 26px; font-size: 14px; color: var(--ink-faint); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pd-cta-links a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.pd-cta-links a:hover { color: var(--pd-text); }

/* Bandeau studio */
.pd-studio-block { padding-top: 0; }
.pd-studio {
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
  padding: 30px 34px; border-radius: 24px; border: 1px solid var(--line); background: rgba(255,250,241,.55);
}
.pd-studio-mark { width: 52px; height: 52px; object-fit: contain; }
.pd-studio .eyebrow { color: var(--gold); }
.pd-studio h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; margin: 6px 0 6px; }
.pd-studio p { margin: 0; color: var(--ink-soft); font-size: 15.5px; max-width: 620px; }
.pd-studio-act { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* Japonais, coreen, chinois : les polices de marque n'ont pas ces
   ecritures. Titres en sans-serif systeme, plus lisible qu'un serif de
   repli, et sans les reglages pense pour le latin. */
.pd:lang(ja) :is(.pd-title, .pd-tagline, h2, h3, .serif),
.pd:lang(ko) :is(.pd-title, .pd-tagline, h2, h3, .serif),
.pd:lang(zh) :is(.pd-title, .pd-tagline, h2, h3, .serif) {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "PingFang SC", "PingFang TC", "Apple SD Gothic Neo", "Noto Sans CJK JP", "Noto Sans CJK SC", "Malgun Gothic", "Microsoft YaHei", "Yu Gothic", var(--sans);
  font-weight: 700; letter-spacing: 0; line-height: 1.25;
}
.pd:lang(ja) .pd-title, .pd:lang(ko) .pd-title, .pd:lang(zh) .pd-title { font-family: var(--serif); font-weight: 400; line-height: .9; }
.pd:is(:lang(ja), :lang(ko), :lang(zh)) .sec-head h2 { font-size: clamp(28px, 4vw, 50px); }
.pd:is(:lang(ja), :lang(ko), :lang(zh)) .pd-tagline { font-size: clamp(21px, 3vw, 34px); }
.pd:is(:lang(ja), :lang(ko), :lang(zh)) .pd-card h3 { font-size: clamp(20px, 2vw, 26px); }
.pd:is(:lang(ja), :lang(ko), :lang(zh)) :is(.pd-cta h2, .pd-studio h2) { font-size: clamp(26px, 3.6vw, 44px); }

@media (max-width: 1000px) {
  .pd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-card, .pd-card.w3 { grid-column: span 1; }
  .pd-card.w4, .pd-card.w6 { grid-column: span 2; }
}
@media (max-width: 760px) {
  .pd-hero { padding-top: 112px; }
  .pd-stage { margin-top: 44px; padding: 0 16px; }
  .pd-bento { grid-template-columns: 1fr; }
  .pd-card, .pd-card.w3, .pd-card.w4, .pd-card.w6 { grid-column: span 1; }
  .pd-card-media { min-height: 0; flex: none; }
  .pd-card-media > img, .pd-card-media > video { position: static; height: auto; }
  .pd-card-media.fit-right > img { aspect-ratio: 4 / 3; object-fit: cover; }
  .pd-studio { grid-template-columns: 1fr; text-align: left; gap: 18px; padding: 26px 22px; }
  .pd-studio-act { justify-content: flex-start; }
  .pd-gallery-track { padding: 10px 20px 22px; margin: 0 -20px; scroll-padding: 0 20px; }
}

/* ═══════════════════════════ Page Pouch ═══════════════════════════ */
/* Teintes de l'app : abricot vers mandarine (icone, boutons), et le fond
   pastel peche et lavande de ses captures App Store. */
.pd-pouch {
  --pd-a: #f59a3e; --pd-b: #e2522a; --pd-text: #b5461b;
  --pd-glow: rgba(255,168,104,.30); --pd-glow-2: rgba(185,167,232,.26);
  --pd-shadow: rgba(240,110,40,.36);
}

/* ── Le bureau de demonstration ── */
.pdesk-wrap { max-width: 1080px; margin: 0 auto; }
.pdesk {
  position: relative; padding: 1.2%; border-radius: 26px;
  background: linear-gradient(160deg, #2b2621, #15110e 55%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 60px 120px -50px rgba(70,30,10,.55), 0 26px 60px -30px rgba(70,30,10,.45);
  user-select: none; -webkit-user-select: none;
}
.pdesk-notch { position: absolute; top: 1.2%; left: 50%; transform: translateX(-50%); width: 13%; height: 3.2%; background: #15110e; border-radius: 0 0 10px 10px; z-index: 6; }
.pdesk-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; container-type: inline-size;
  background:
    radial-gradient(60% 70% at 8% 0%, rgba(255,173,115,.75), transparent 60%),
    radial-gradient(55% 60% at 100% 100%, rgba(111,114,217,.55), transparent 60%),
    linear-gradient(135deg, #ffd7ba 0%, #f3b4c2 38%, #b9a7e8 72%, #8b90de 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", var(--sans);
  color: #1d1b22; text-align: left;
}
.pdesk-menubar {
  position: absolute; inset: 0 0 auto 0; height: 3.4cqw; display: flex; align-items: center; gap: 1.9cqw;
  padding: 0 1.8cqw; font-size: 1.32cqw; font-weight: 500; background: rgba(255,255,255,.26);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 4;
}
.pdesk-menubar .app { font-weight: 700; }
.pdesk-status { margin-left: auto; display: flex; align-items: center; gap: 1.4cqw; }
.pdesk-status .tray { width: 1.7cqw; height: 1.7cqw; }
.pdesk-status .bat { width: 2.3cqw; height: 1.1cqw; border: .15cqw solid currentColor; border-radius: .35cqw; position: relative; }
.pdesk-status .bat::after { content: ""; position: absolute; inset: .18cqw 30% .18cqw .18cqw; background: currentColor; border-radius: .15cqw; }
.pdesk-status b { font-weight: 600; }

/* Fenetre du Finder */
.pdesk-finder {
  position: absolute; left: 6.5cqw; top: 9cqw; width: 47cqw; height: 34cqw; border-radius: 1.5cqw; overflow: hidden;
  background: rgba(255,255,255,.94); box-shadow: 0 2.4cqw 5cqw -1.6cqw rgba(60,30,60,.38), 0 0 0 .1cqw rgba(0,0,0,.06);
  display: flex; flex-direction: column;
}
.pf-bar { display: flex; align-items: center; gap: 1.6cqw; height: 4.4cqw; padding: 0 1.6cqw; border-bottom: .1cqw solid rgba(0,0,0,.06); font-size: 1.35cqw; }
.pf-bar .pd-dots { gap: .7cqw; }
.pf-bar .pd-dots i { width: 1.1cqw; height: 1.1cqw; }
.pf-nav { color: #9a949c; letter-spacing: .3cqw; margin-left: 9cqw; font-weight: 600; }
.pf-body { flex: 1; display: grid; grid-template-columns: 10.5cqw 1fr; min-height: 0; }
.pf-side { background: #f3f1f3; padding: 1.4cqw 1.2cqw; display: flex; flex-direction: column; gap: 1.25cqw; }
.pf-side span { display: flex; align-items: center; gap: .8cqw; }
.pf-side i { width: 1.2cqw; height: 1.2cqw; border-radius: .3cqw; background: #6aa8ef; opacity: .75; }
.pf-side em { height: .7cqw; border-radius: .35cqw; background: #d9d4da; }
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); padding: 1.2cqw 1.4cqw; gap: .4cqw 1cqw; }
.pf-file { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55cqw; cursor: grab; touch-action: none; border-radius: 1cqw; transition: opacity .25s, background .2s; }
.pf-file:hover { background: rgba(80,140,230,.08); }
.pf-file.lifted { opacity: .38; }
.pf-ico { display: block; width: 6.6cqw; }
.pf-ico svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 .35cqw .5cqw rgba(0,0,0,.14)); }
.pf-name { font-size: 1.12cqw; line-height: 1.25; text-align: center; max-width: 11cqw; color: #2a2730; overflow-wrap: anywhere; }

/* Etagere de Pouch, verre depoli comme dans l'app */
.pshelf {
  position: absolute; right: 2cqw; top: 6.4cqw; width: 22.5cqw; padding: 1.1cqw 1.1cqw .8cqw;
  border-radius: 2.2cqw; background: rgba(255,250,246,.62); border: .1cqw solid rgba(255,255,255,.7);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 2cqw 5cqw -1.5cqw rgba(60,30,60,.35);
  transform: translateX(calc(100% + 4cqw)); transition: transform .55s cubic-bezier(.2,.8,.2,1); z-index: 3;
}
.pshelf.open { transform: none; }
.pshelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8cqw; }
.pshelf-card { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .45cqw; padding: .55cqw .4cqw .6cqw; border-radius: 1.2cqw; background: rgba(255,255,255,.55); }
.pshelf-card.fresh { animation: pshelf-pop .6s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 0 0 .18cqw #ff8a4c; }
@keyframes pshelf-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.pshelf-thumb { position: relative; width: 100%; aspect-ratio: 1 / .82; border-radius: .8cqw; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pshelf-thumb svg { width: 86%; height: auto; }
.pshelf-thumb.k-note { background: #fff; align-items: flex-start; justify-content: flex-start; }
.pshelf-note { font-size: .78cqw; line-height: 1.3; padding: .5cqw; color: #4a4450; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.pshelf-thumb.k-link { background: linear-gradient(160deg, #fff4ef, #ffe6dc); flex-direction: column; }
.pshelf-link { display: flex; flex-direction: column; align-items: center; gap: .3cqw; font-size: .8cqw; color: #8a6f66; }
.pshelf-link b { color: #f07a52; font-size: 1.8cqw; line-height: 1; }
.pshelf-badge { position: absolute; left: .4cqw; bottom: .4cqw; font-size: .7cqw; font-weight: 700; padding: .1cqw .45cqw; border-radius: .5cqw; background: rgba(255,255,255,.9); color: #5f5866; }
.pshelf-name { font-size: .92cqw; color: #2f2b33; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
.pshelf-foot { display: flex; align-items: center; justify-content: center; gap: .7cqw; margin-top: .9cqw; font-size: .95cqw; color: #6c6470; }
.pshelf-foot span { margin-right: auto; }
.pshelf-foot em { font-style: normal; padding: .3cqw .9cqw; border-radius: 99px; background: rgba(255,255,255,.75); }

/* La patte : son pied est juste derriere le bord droit, elle pivote autour. */
.pdesk-paw {
  position: absolute; width: 9.4cqw; height: 23.9cqw; left: 96.8cqw; top: 22cqw; z-index: 5; pointer-events: none;
  transform-origin: 50% 100%; transform: rotate(-60deg) translateY(var(--slide, 105%));
  transition: transform .42s cubic-bezier(.25,.9,.3,1.15);
}
.pdesk-paw .pouch-paw { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.18)); }
.pdesk-paw.is-out { --slide: 16%; animation: pdesk-knead 1.5s ease-in-out .45s infinite; }
.pdesk-paw.is-grab { --slide: 20%; transition-duration: .25s; }
.pdesk-paw.is-hidden { --slide: 108%; transition: transform .38s cubic-bezier(.5,0,.8,.4); }
@keyframes pdesk-knead {
  0%, 100% { transform: rotate(-60deg) translateY(var(--slide)); }
  50% { transform: rotate(-56deg) translateY(calc(var(--slide) - 4%)); }
}
.pdesk-bubble {
  position: absolute; left: 78cqw; top: 22.5cqw; z-index: 6; padding: .8cqw 1.5cqw; border-radius: 99px;
  font: 700 1.45cqw/1 ui-rounded, "SF Pro Rounded", -apple-system, var(--sans); color: #61453b; white-space: nowrap;
  background: #fffaf2; box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.14), 0 0 0 .1cqw rgba(255,255,255,.8) inset;
  animation: pdesk-pop .35s cubic-bezier(.2,1.5,.4,1);
}
@keyframes pdesk-pop { from { transform: scale(.5) translateY(1cqw); opacity: 0; } to { transform: none; opacity: 1; } }

/* Le fichier qu'on fait glisser et le pointeur */
.pdesk-ghost {
  position: absolute; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: .45cqw;
  transform: translate(-50%, -50%) rotate(-4deg); pointer-events: none;
  transition: left 1.25s cubic-bezier(.45,.05,.3,1), top 1.25s cubic-bezier(.45,.05,.3,1), opacity .3s;
}
.pdesk-ghost.live { transition: none; }
.pdesk-ghost .pf-ico { width: 6.4cqw; opacity: .92; }
.pdesk-ghost-name { font-size: 1.05cqw; color: #fff; background: #2f6fe4; padding: .2cqw .7cqw; border-radius: .5cqw; white-space: nowrap; }
.pdesk-cursor {
  position: absolute; z-index: 8; width: 1.5cqw; height: auto; pointer-events: none; opacity: 0;
  transform: translate(-12%, -6%); transition: left 1.25s cubic-bezier(.45,.05,.3,1), top 1.25s cubic-bezier(.45,.05,.3,1), opacity .35s, transform .15s;
}
.pdesk-cursor.on { opacity: 1; }
.pdesk-cursor.down { transform: translate(-12%, -6%) scale(.9); }
.pdesk-screen.is-dragging .pdesk-cursor { transition: none; }
.pdesk-hint { margin: 18px auto 0; font-size: 14px; color: var(--ink-faint); text-align: center; }

/* ── Le geste : trois etapes, puis le choix de la patte ── */
.psteps { list-style: none; margin: 0 0 70px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: none; }
.pstep { position: relative; padding: 28px 26px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--line); }
.pstep-n {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  font-weight: 800; color: #fff; background: linear-gradient(135deg, #ffb84c, #ff6b36); box-shadow: 0 8px 20px -8px rgba(255,107,54,.6);
}
.pstep h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 16px 0 8px; }
.pstep p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.ppick { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.ppick-copy h3 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 12px; line-height: 1.05; }
.ppick-copy > p { margin: 0 0 26px; color: var(--ink-soft); }
.ppick-shot { margin: 0; }
.ppick-shot img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(60,32,12,.5); border: 1px solid var(--line); }
.pcoats { display: flex; flex-direction: column; gap: 14px; }
.pcoats-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.pcoats-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pcoat {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; border-radius: 16px; cursor: pointer;
  background: rgba(255,250,241,.6); border: 1px solid var(--line); font: inherit; color: var(--ink-soft);
  transition: border-color .2s, background .2s, transform .2s;
}
.pcoat:hover { transform: translateY(-2px); border-color: var(--line-2); }
.pcoat.on { background: #fff; border-color: #ff8a4c; box-shadow: 0 0 0 2px rgba(255,138,76,.25); color: var(--ink); }
.pcoat-paw { display: block; width: 34px; height: 38px; overflow: hidden; }
.pcoat-paw .pouch-paw { width: 34px; height: auto; display: block; }
.pcoat-name { font-size: 11.5px; font-weight: 600; line-height: 1.15; text-align: center; }
.pcomp { margin-top: 18px; }
.pcomp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pcomp-item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 9px; border-radius: 16px; background: rgba(255,250,241,.6); border: 1px solid var(--line); }
.pcomp-item img { display: block; width: 100%; height: 64px; object-fit: contain; }
.pcomp-item figcaption { font-size: 11.5px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--ink-soft); }
.pcomp-random { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }
.pcomp-random strong { color: var(--ink); font-weight: 700; }

/* ── Extension Chrome ── */
.pchrome-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pchrome-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-soft); }
.pchrome-list li::before {
  content: "✓"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ffb84c, #ff6b36);
}
.pchrome-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.pchrome .pd-note { margin: 14px 0 0; max-width: none; }

/* ── Visuels des cartes sans capture ── */
.pd-pouch .pd-card-media { margin-top: 22px; }
.pd-pouch .pd-card-media img { border-top: 1px solid var(--line); }
.pd-card-media.fit-right { --op: 88% 50%; }
.pd-card.tone-ink .pd-card-media img { border-top: 0; }
.pd-card.tone-ink .pd-card-tag { color: #ffb070; }
.pviz-bright { position: relative; height: 100%; min-height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pviz-bright .sun { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, #fff6c9 0%, #ffd66b 30%, rgba(255,170,60,.35) 55%, transparent 70%); animation: pviz-glow 4s ease-in-out infinite; }
.pviz-bright b { position: relative; font-family: var(--serif); font-weight: 400; font-size: 88px; color: #a8491c; letter-spacing: -.02em; }
@keyframes pviz-glow { 50% { transform: scale(1.12); filter: brightness(1.1); } }
.pviz-clips { position: relative; height: 170px; margin: 0 22px; }
.pviz-clips .clip { position: absolute; left: 0; right: 0; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 28px -18px rgba(60,32,12,.5); font-size: 13px; color: var(--ink-soft); line-height: 1.35; overflow: hidden; }
.pviz-clips .c1 { top: 70px; transform: rotate(-1.5deg); height: 76px; }
.pviz-clips .c2 { top: 36px; transform: rotate(2deg) scale(.96); color: #c4613a; font-weight: 600; }
.pviz-clips .c3 { top: 6px; transform: rotate(-3deg) scale(.92); height: 44px; padding: 6px; }
.pviz-clips .img { display: block; height: 100%; border-radius: 9px; background: linear-gradient(180deg, #5b3c8f, #e9765b 60%, #f6b26b); }
.pviz-lib { padding: 0 22px 20px; }
.pviz-search { display: block; padding: 8px 14px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; }
.pviz-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pviz-thumbs img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* ── Raccourcis ── */
.pkeys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pkey { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--line); }
.pkey-caps { display: flex; gap: 6px; flex-wrap: wrap; }
.pkey kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: 9px; font: 600 16px/1 -apple-system, BlinkMacSystemFont, var(--sans); color: var(--ink);
  background: linear-gradient(#fffdf9, #f1e9dd); border: 1px solid rgba(42,28,20,.16);
  box-shadow: 0 2px 0 rgba(42,28,20,.14), 0 6px 14px -8px rgba(42,28,20,.35);
}
.pkey kbd.wide { font-size: 13.5px; padding: 0 12px; }
.pkey-t { font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
.pkey-n { font-size: 13px; color: var(--ink-faint); margin-top: -6px; }

/* ── Confidentialite : un aplat sombre, le seul de la page ── */
.pprivacy { border-radius: 30px; padding: clamp(36px, 5vw, 64px); background: radial-gradient(90% 120% at 100% 0%, rgba(255,120,60,.22), transparent 55%), #221a15; color: #f8efe2; }
.pprivacy-head { max-width: 640px; margin-bottom: 40px; }
.pprivacy .eyebrow { color: #ffb070; }
.pprivacy h2 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1; margin: 12px 0 0; color: #fff7ea; }
.pprivacy-head p { color: rgba(248,239,226,.75); font-size: 18px; margin: 14px 0 0; }
.pprivacy-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pprivacy-mk { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ffb84c, #ff6b36); color: #fff; font-weight: 800; font-size: 15px; }
.pprivacy-list h3 { font-size: 19px; margin: 14px 0 6px; color: #fff7ea; }
.pprivacy-list p { margin: 0; font-size: 15.5px; color: rgba(248,239,226,.72); }

/* ── Aide ── */
.phelp { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.phelp-start { padding: 30px 30px 28px; border-radius: 24px; background: var(--bg-card); border: 1px solid var(--line); }
.phelp-start h3.serif { font-size: 30px; margin: 0 0 14px; }
.phelp-start ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink-soft); font-size: 15.5px; }
.phelp-start ol li::marker { color: #e2522a; font-weight: 800; }
.phelp-contact { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.phelp-contact h3 { font-size: 17px; margin: 0 0 6px; }
.phelp-contact p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); }
.phelp .pd-faq { max-width: none; margin: 0; width: 100%; }
.phelp .faq-item summary { font-size: clamp(19px, 2vw, 24px); padding: 20px 4px; }

@media (max-width: 1000px) {
  .pkeys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ppick, .phelp { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .psteps, .pprivacy-list { grid-template-columns: 1fr; }
  .psteps { margin-bottom: 50px; }
  .pdesk { padding: 1.6%; border-radius: 16px; }
  .pdesk-screen { border-radius: 10px; }
  .pdesk-hint { font-size: 13px; }
  .pcoats-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .pcoat-name { font-size: 10.5px; }
}
@media (max-width: 480px) {
  .pkeys { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pdesk-paw, .pdesk-ghost, .pdesk-cursor, .pshelf { transition: none; }
  .pdesk-paw.is-out, .pviz-bright .sun { animation: none; }
}

.pd-cta-note { margin: 16px auto 0; font-size: 13.5px; color: var(--ink-faint); max-width: 560px; }
.pd-title--logo { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; line-height: 0; margin: 6px 0 0; padding: 0; }

/* ═══════════════════════════ Page Toplings ═══════════════════════════ */
/* La palette de toplings.com (lavande, violet, rose, ambre), posee sur le
   sable du site. */
.pd-toplings {
  --pd-a: #7c3aed; --pd-b: #ec4899; --pd-text: #6d28d9;
  --pd-glow: rgba(196,181,253,.42); --pd-glow-2: rgba(251,207,232,.45);
  --pd-shadow: rgba(76,29,149,.28);
}
.tlogo { display: block; width: min(500px, 84vw); height: auto; margin: 0 auto; filter: drop-shadow(0 18px 26px rgba(44,26,74,.22)); }
.pd-toplings .pd-tagline { margin-top: 16px; }

/* Le bureau vivant */
.tdesk-wrap { max-width: 1080px; margin: 0 auto; }
.tdesk {
  position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; container-type: inline-size;
  background: linear-gradient(160deg, #f4ecff 0%, #fbeef9 48%, #eaf2ff 100%);
  border: 1px solid rgba(124,58,237,.14);
  box-shadow: 0 60px 110px -55px rgba(76,29,149,.45), 0 24px 50px -30px rgba(76,29,149,.3);
  user-select: none; -webkit-user-select: none; text-align: left;
}
.tdesk-sky i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .7; }
.tdesk-sky i:nth-child(1) { width: 34%; height: 50%; left: -6%; top: -12%; background: #c4b5fd; }
.tdesk-sky i:nth-child(2) { width: 30%; height: 46%; right: 4%; top: 2%; background: #fbcfe8; }
.tdesk-sky i:nth-child(3) { width: 30%; height: 40%; left: 40%; bottom: -16%; background: #fde68a; opacity: .5; }
.twin {
  position: absolute; border-radius: 1.3cqw; background: #fff; overflow: hidden;
  box-shadow: 0 2cqw 4cqw -1.6cqw rgba(44,26,74,.32), 0 0 0 .1cqw rgba(44,26,74,.08);
}
.twin-notes { left: 6.5%; top: 26%; width: 43%; height: 52%; }
.twin-sketch { left: 55%; top: 40%; width: 37%; height: 45%; background: #f6f2ea; }
.twin-bar { display: flex; align-items: center; gap: 1.2cqw; height: 3.2cqw; padding: 0 1.3cqw; border-bottom: .1cqw solid rgba(0,0,0,.06); font: 600 1.15cqw/1 -apple-system, BlinkMacSystemFont, var(--sans); color: #5b4a7d; background: #fbfaff; }
.twin-bar .pd-dots { gap: .55cqw; }
.twin-bar .pd-dots i { width: .95cqw; height: .95cqw; }
.twin-body { padding: 2.2cqw 2.6cqw; font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; color: #3f3554; }
.twin-body strong { display: block; font-size: 1.9cqw; margin-bottom: 1.4cqw; }
.twin-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; font-size: 1.3cqw; }
.twin-body li span { display: inline-block; width: 6.4cqw; color: #8a7aa8; }
.twin-sketch .twin-body { padding: 2.4cqw; }
.twin-sketch svg { display: block; width: 100%; height: auto; border-radius: .6cqw; box-shadow: 0 .4cqw 1.2cqw -.6cqw rgba(0,0,0,.25); }
/* Toplings poses (sans JavaScript, ou moins d'animations) */
.tdesk-still { position: absolute; width: 6.2cqw; image-rendering: pixelated; filter: drop-shadow(0 .5cqw .5cqw rgba(76,29,149,.22)); }
.tdesk-still.s1 { left: 64%; top: calc(40% - 6.2cqw * .82); }
.tdesk-still.s2 { left: 34%; top: calc(26% - 6.2cqw); transform: scaleX(-1); }
.tdesk-still.s3 { left: 12%; top: calc(100% - 6.2cqw - 4px); }
.tdesk.pets-live .tdesk-still { display: none; }
.tpets { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tpet { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; touch-action: none; will-change: transform; transform-origin: 50% 14%; }
.tpet.held { cursor: grabbing; }
.tpet img { width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 5px 5px rgba(76,29,149,.22)); }

/* Sprite anime depuis sa planche de quatre images */
.tsprite { display: inline-block; flex: 0 0 auto; background-repeat: no-repeat; background-size: 400% 100%; background-position: 0 0; image-rendering: pixelated; }
.tsprite.walk, .tcard:hover .tsprite, .tcard:focus-within .tsprite { animation: tsprite-walk .62s steps(4) infinite; }
@keyframes tsprite-walk { from { background-position: 0% 0; } to { background-position: 133.333% 0; } }

/* Menagerie */
.tworlds { list-style: none; margin: -18px 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tworlds li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 99px; background: var(--bg-card); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.tworlds b { font-size: 12px; padding: 3px 8px; border-radius: 99px; background: #efe7ff; color: #6d28d9; }
.tmenagerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 14px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--line); transition: transform .25s, border-color .25s, box-shadow .25s; }
.tcard:hover { transform: translateY(-4px); border-color: rgba(124,58,237,.28); box-shadow: 0 20px 40px -28px rgba(76,29,149,.5); }
.tcard-name { font-weight: 700; font-size: 15px; color: var(--ink); text-align: center; }
.tcard-world { font-size: 12px; color: var(--ink-faint); }
.tmore { margin: 28px 0 0; text-align: center; }
.tmore a { font-weight: 700; color: #6d28d9; border-bottom: 1px solid rgba(109,40,217,.3); padding-bottom: 2px; }
.tmore a:hover { border-color: #6d28d9; }

/* Laboratoire */
.tlab { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tlab-card { padding: 30px 30px 28px; border-radius: 24px; background: var(--bg-card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.tlab-card h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; margin: 0 0 10px; }
.tlab-card > p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.tlab-photo, .tbreed { margin: 26px 0 0; padding: 22px; border-radius: 18px; background: linear-gradient(160deg, #f4ecff, #fbeef9); display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; flex: 1; }
.tpolaroid { background: #fff; padding: 8px 8px 10px; border-radius: 6px; box-shadow: 0 16px 30px -18px rgba(44,26,74,.6); transform: rotate(-3deg); width: 46%; max-width: 230px; text-align: center; }
.tpolaroid img { display: block; width: 100%; height: auto; border-radius: 3px; }
.tpolaroid span, .tpixel span, .tbreed-egg span, .tbreed-child span { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #5b4a7d; text-align: center; }
.tpixel img, .tbreed img { image-rendering: pixelated; display: block; margin: 0 auto; }
.tpixel img { width: 112px; height: 112px; }
.tlab-arrow { font-size: 24px; color: #a78bfa; font-weight: 700; }
.tlab-photo figcaption { flex-basis: 100%; text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
.tbreed-parents { display: flex; align-items: center; gap: 2px; }
.tbreed-parents img { width: 62px; height: 62px; }
.tbreed-parents img:last-child { transform: scaleX(-1); }
.tbreed-heart { color: #ec4899; font-size: 20px; animation: theart 1.6s ease-in-out infinite; }
@keyframes theart { 50% { transform: scale(1.25); } }
.tbreed-egg img { width: 50px; height: 50px; animation: tegg 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes tegg { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-8deg); } 86% { transform: rotate(7deg); } 93% { transform: rotate(-4deg); } }
.tbreed-child img { width: 70px; height: 70px; }
.tbreed-egg span, .tbreed-child span { max-width: 104px; }
.tbreed { gap: 8px; padding: 20px 14px; }
.tbreed .tlab-arrow { font-size: 20px; }
.tlab-note { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--ink-faint); }

/* Captures sombres de l'app (prairie, garde-robe) */
.pd-card.tone-night .pd-card-media { background: #15122f; }

/* Modes */
.tmodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tmode { padding: 0 22px 24px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; }
.tmode h3 { font-size: clamp(22px, 2.1vw, 27px); line-height: 1.08; margin: 0 0 8px; }
.tmode p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.tmode-scene { position: relative; height: 150px; margin: 0 -22px 18px; background: linear-gradient(160deg, #f4ecff, #fbeef9); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; }
.tmode.k-agents .tmode-scene { background: linear-gradient(160deg, #1f1b33, #2c2650); }
.tmode-bubble { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); max-width: 86%; padding: 8px 12px; border-radius: 14px; background: #fff; font-size: 12.5px; font-weight: 700; color: #4c1d95; text-align: center; line-height: 1.25; box-shadow: 0 10px 24px -14px rgba(44,26,74,.6); }
.tmode-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.tmode .pd-card-tag { color: var(--pd-text); }

/* Zero permission */
.tprivacy { margin-top: 18px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 30px 34px; border-radius: 24px; background: linear-gradient(135deg, #2a1f4d, #3b2470); color: #f4ecff; }
.tprivacy h3 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 8px; color: #fff; }
.tprivacy p { margin: 0; color: rgba(244,236,255,.78); font-size: 15.5px; }
.tprivacy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tprivacy li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; }
.tprivacy li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #a855f7, #ec4899); font-size: 12px; flex: 0 0 auto; }

@media (max-width: 1000px) {
  .tmenagerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tmodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlab, .tprivacy { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tdesk { border-radius: 16px; }
  .tmenagerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tcard .tsprite { width: 72px !important; height: 72px !important; }
  .tmodes { grid-template-columns: 1fr; }
  .tlab-card { padding: 24px 20px; }
  .tprivacy { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsprite.walk, .tcard:hover .tsprite, .tbreed-heart, .tbreed-egg img { animation: none; }
}

/* ═══════════════════════════ Page Hearthlight ═══════════════════════════ */
/* Les couleurs du jeu (src/art/palette.js) : or de lanterne, rouge du phare,
   prune de la nuit. Le titre prend une police pixel, comme dans le jeu. */
.pd-hearthlight {
  --pd-a: #f2b63d; --pd-b: #d9594c; --pd-text: #a8452f;
  --pd-glow: rgba(255,214,107,.34); --pd-glow-2: rgba(138,100,184,.20);
  --pd-shadow: rgba(42,31,51,.42);
}
.pd-hearthlight .pd-icon, .pd-hearthlight .pd-cta img, .hdemo-icon { image-rendering: pixelated; }
.pd-hearthlight .pd-title {
  font-family: "Pixelify Sans", var(--sans); font-weight: 700; letter-spacing: .01em;
  font-size: clamp(54px, 9.6vw, 124px); line-height: 1;
  background: linear-gradient(180deg, #ffd66b 0%, #f2a13a 52%, #d9594c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #3b2a2e) drop-shadow(0 16px 24px rgba(42,31,51,.25));
}
.pd:is(:lang(ja), :lang(ko), :lang(zh)).pd-hearthlight .pd-title { font-family: "Pixelify Sans", var(--sans); }

/* La bande-annonce */
.htrailer-wrap { max-width: 1080px; margin: 0 auto; }
.htrailer {
  position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #14121c;
  border: 1px solid rgba(59,42,46,.25);
  box-shadow: 0 60px 110px -55px rgba(42,31,51,.6), 0 24px 50px -30px rgba(42,31,51,.45);
}
.htrailer-poster { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.htrailer-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.htrailer-poster:hover img { transform: scale(1.035); }
.htrailer-poster:focus-visible { outline: 3px solid var(--pd-a); outline-offset: -3px; border-radius: 22px; }
.htrailer-play {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border-radius: 99px;
  background: rgba(36,27,46,.8); color: #fff3c4; border: 1px solid rgba(246,211,143,.4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap;
  transition: transform .25s, background .25s;
}
.htrailer-poster:hover .htrailer-play { transform: translateX(-50%) translateY(-3px); background: rgba(36,27,46,.9); }
.htrailer-btn { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffd66b, #e8883a); color: #3b2a2e; box-shadow: 0 0 0 6px rgba(255,214,107,.18); }
.htrailer-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.htrailer-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.htrailer-txt strong { font-family: "Pixelify Sans", var(--sans); font-size: 19px; font-weight: 700; }
.htrailer-txt small { font-size: 12.5px; color: rgba(255,243,196,.75); }
.htrailer video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* Les chiffres */
.hnums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hnum { padding: 26px 26px 24px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--line); }
.hnum b {
  display: block; font-family: "Pixelify Sans", var(--sans); font-weight: 700; font-size: clamp(44px, 5vw, 64px); line-height: 1;
  background: linear-gradient(180deg, #f2b63d, #d9594c); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hnum h3 { margin: 12px 0 6px; font-size: 17px; color: var(--ink); }
.hnum p { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* Sous le capot */
.pd-card.tone-plum { background: #241b2e; border-color: #241b2e; }
.pd-card.tone-plum h3 { color: #fff3c4; }
.pd-card.tone-plum p { color: rgba(255,243,196,.74); }
.pd-card.tone-plum .pd-card-tag { color: #f6c65b; }
.pd-card-media.h-icons { background: #1c1622; }
.pd-card-media.h-icons > img { object-fit: contain; padding: 14px 18px; image-rendering: pixelated; }
.pd-card-media.h-phones { --op: 0% 75%; background: #241b2e; }

/* Le jeu */
.hgame-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; margin-bottom: 50px; }
.hgame-head .sec-head { margin-bottom: 0; }
.hgame-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hgame-list li { display: flex; gap: 12px; align-items: baseline; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.hgame-list li::before { content: "✦"; color: #e0a526; font-size: 13px; }

/* Une demo, assumee */
.hdemo { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; padding: clamp(32px, 4.6vw, 56px); border-radius: 28px;
  background: radial-gradient(80% 120% at 100% 0%, rgba(242,182,61,.18), transparent 55%), #241b2e; color: #fff3c4; }
.hdemo-icon { width: 96px; height: 96px; border-radius: 22px; }
.hdemo .eyebrow { color: #f6c65b; }
.hdemo h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; margin: 10px 0 16px; color: #fff7e6; text-wrap: balance; }
.hdemo p { margin: 0 0 12px; color: rgba(255,243,196,.78); font-size: 16.5px; max-width: 760px; }

/* Essayer */
.htry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.htry-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 26px; border-radius: 22px; background: var(--bg-card); border: 1px solid var(--line); }
.htry-ico { display: inline-flex; width: 44px; height: 44px; border-radius: 14px; align-items: center; justify-content: center; background: #241b2e; color: #f6c65b; }
.htry-ico svg { width: 22px; height: 22px; }
.htry-card h3 { font-size: 27px; margin: 6px 0 0; line-height: 1.08; }
.htry-card p { margin: 0 0 8px; color: var(--ink-soft); font-size: 15.5px; flex: 1; }

@media (max-width: 1000px) {
  .hnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hgame-head { grid-template-columns: 1fr; gap: 26px; }
  .htry { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hnums { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hnum { padding: 18px 16px 16px; border-radius: 18px; }
  .hnum b { font-size: 38px; }
  .hnum h3 { font-size: 15px; margin-top: 8px; }
  .hnum p { font-size: 13.5px; }
  .hdemo { grid-template-columns: 1fr; gap: 20px; }
  .hdemo-icon { width: 72px; height: 72px; }
  .htrailer { border-radius: 16px; }
  .htrailer-play { padding: 8px 18px 8px 8px; gap: 10px; }
  .htrailer-btn { width: 42px; height: 42px; }
  .htrailer-txt strong { font-size: 16px; }
}
.pd-card-media.h-viz { display: flex; align-items: center; justify-content: center; min-height: 170px; padding: 6px 22px 18px; }
.hviz { width: 100%; max-width: 300px; height: auto; display: block; }