/* Capucine — site vitrine. Refonte du 23 octobre 2026, revue du titulaire du 25 octobre.
   Papier, encre, abricot, stickers. Clair par défaut pour tout le monde ; sombre seulement sur choix.
   Pensé d'abord pour le téléphone, puis l'iPhone Duo (plié, ouvert), l'iPad et l'ordinateur.
   Animations à l'arrêt hors de l'écran (bloc [data-play] sans .playing) ;
   coupées avec « Réduire les animations ». */
@font-face { font-family: "Baloo 2"; src: url("/fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #FFFDF8; --bg-alt: #F8F1E3; --card: #FFFFFF; --card-2: #FBF6EC;
  --ink: #1D1A15; --ink-soft: #57524A; --ink-light: #8A8273;
  --line: rgb(29 26 21 / .10); --line-strong: rgb(29 26 21 / .18);
  --apricot: #F4A261; --apricot-soft: #FDE7D3; --apricot-text: #A34F22; --on-apricot: #1D1A15; --butter: #F9DD7E;
  --metal-a: #8F8B85; --metal-b: #E4E1DB; --metal-c: #B8B4AD;
  --elev: 0 1px 2px rgb(29 26 21 / .05), 0 10px 30px -12px rgb(29 26 21 / .16);
  --elev-lg: 0 2px 6px rgb(29 26 21 / .05), 0 30px 60px -24px rgb(29 26 21 / .28);
  --radius: 24px; --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); --max: 1160px;
  --display: "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.65, 0, .35, 1); --hero-glow: var(--apricot); --header-height: 63px;
  color-scheme: light;
}
:root.dark {
  --bg: #101827; --bg-alt: #16222F; --card: #1C2B3A; --card-2: #233447;
  --ink: #F4F1EA; --ink-soft: #C9D1DB; --ink-light: #9EADBE;
  --line: rgb(244 241 234 / .10); --line-strong: rgb(244 241 234 / .18);
  --apricot-soft: #29394A; --apricot-text: #F6B27A; --hero-glow: #6C8DAD;
  --metal-a: #354555; --metal-b: #8C9AA9; --metal-c: #607080;
  --elev: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px -12px rgb(0 0 0 / .7);
  --elev-lg: 0 2px 6px rgb(0 0 0 / .4), 0 30px 60px -24px rgb(0 0 0 / .85);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--apricot); outline-offset: 3px; border-radius: 10px; }
::selection { background: color-mix(in srgb, var(--apricot) 35%, transparent); }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 .45em; font-weight: 800; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(2.35rem, 8.6vw, 4.3rem); }
h2 { font-size: clamp(1.95rem, 6.4vw, 3.05rem); }
h3 { font-size: 1.24rem; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.lead { font-size: clamp(1.06rem, 3.6vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.note { font-size: .9rem; color: var(--ink-light); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; inset-inline-start: 12px; top: 8px; background: var(--card); padding: 8px 14px; border-radius: 12px; z-index: 99; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.skip:focus { clip-path: none; width: auto; height: auto; overflow: visible; }
.more { font-weight: 800; color: var(--apricot-text); text-decoration: none; display: inline-block; padding-block: 10px; margin-block: -10px; }
.more:hover { text-decoration: underline; }

/* ─── Logo : « capucine », la fleur sur le i (comme dans l'app) ─── */
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 700; letter-spacing: -0.012em; line-height: 1; white-space: nowrap; color: var(--ink); }
.wm-i { position: relative; display: inline-block; }
.wm-flower { position: absolute; left: 50%; top: -.035em; width: .38em; height: .38em; margin-left: -.19em; overflow: visible; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.js .wm-boot .wm-flower { animation: bloom 1.7s cubic-bezier(.2, .9, .25, 1) .35s backwards; }
@keyframes bloom { 0% { transform: scale(.1) rotate(-320deg); } 55% { transform: scale(1.14) rotate(-24deg); } 100% { transform: none; } }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; text-decoration: none; font-size: 1.68rem; padding: 6px 2px 2px; color: var(--ink); }
.brand-icon, .brand-pichu { width: 40px; height: 40px; flex: none; object-fit: contain; }
.brand-icon { border-radius: 10px; }
.brand-name { display: inline-flex; align-items: center; min-width: 0; }
@media (hover: hover) { .brand:hover .wm-flower { transform: rotate(144deg); } }

/* ─── En-tête ─── */
.top { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; min-height: 62px; }
.menu { display: none; gap: 2px; margin-inline-start: auto; align-items: center; }
.menu a { text-decoration: none; font-weight: 600; font-size: .94rem; color: var(--ink-soft); padding: 8px 12px; border-radius: 999px; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--ink); background: var(--line); }
.actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; flex: none; }
@media (min-width: 1180px) { .menu { display: flex; } .actions { margin-inline-start: 8px; } .menu-btn { display: none !important; } }
/* Téléphone : une seule ligne (icône, nom et Pichu d'un côté, boutons de l'autre). Sur deux lignes, l'en-tête collant
   montait à 101 px, 12 % de la hauteur d'un iPhone, pendant toute la lecture (revue du 30 octobre). */
@media (max-width: 420px) {
  .top .wrap { gap: 8px; }
  .top .brand { gap: 6px; font-size: 1.5rem; }
  .top .brand-icon, .top .brand-pichu { width: 34px; height: 34px; }
  .top .brand-icon { border-radius: 9px; }
  .top .actions { gap: 0; }
}
@media (max-width: 374px) {
  .top .brand { gap: 5px; font-size: 1.36rem; }
  .top .brand-icon, .top .brand-pichu { width: 30px; height: 30px; }
  .top .brand-icon { border-radius: 8px; }
}
@media (max-width: 349px) {
  .top .wrap { gap: 6px; padding-inline: 14px; }
  .top .icon-btn { width: 40px; height: 40px; }
}
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s; -webkit-tap-highlight-color: transparent; }
.icon-btn:hover { background: var(--line); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-icon { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.icon-btn:active .theme-icon { transform: rotate(-30deg) scale(.85); }
.i-sun { display: none; } .dark .i-sun { display: block; } .dark .i-moon { display: none; }
.menu-btn .i-close { display: none; }
.menu-open .menu-btn .i-close { display: block; } .menu-open .menu-btn .i-burger { display: none; }

/* Menu du téléphone : plein écran sous l'en-tête, gros libellés. */
.sheet { position: fixed; inset: calc(var(--header-height) + env(safe-area-inset-top)) 0 0; z-index: 39; background: var(--bg); overflow-y: auto; padding: 18px var(--gutter) calc(40px + env(safe-area-inset-bottom)); display: none; }
.menu-open .sheet { display: block; animation: sheetIn .32s cubic-bezier(.2, .8, .2, 1) both; }
.menu-open body { overflow: hidden; }
.sheet a { display: flex; align-items: center; justify-content: space-between; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.9rem; padding: 10px 0; border-bottom: 1px solid var(--line); animation: sheetItem .4s cubic-bezier(.2, .8, .2, 1) both; }
.sheet a::after { content: "›"; color: var(--ink-light); font-weight: 400; }
[dir="rtl"] .sheet a::after { content: "‹"; }
.sheet a:nth-child(2) { animation-delay: .03s } .sheet a:nth-child(3) { animation-delay: .06s } .sheet a:nth-child(4) { animation-delay: .09s } .sheet a:nth-child(5) { animation-delay: .12s }
@keyframes sheetIn { from { opacity: 0; } }
@keyframes sheetItem { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 980px) { .sheet { display: none !important; } }

/* ─── Boutons ─── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font-weight: 800; font-family: var(--display); font-size: 1.1rem; text-decoration: none; border: 2px solid var(--ink); transition: transform .15s ease, box-shadow .15s ease, background-color .2s; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; }
.btn-candy { background: var(--apricot); color: var(--on-apricot); border-color: #1D1A15; box-shadow: 3px 3px 0 #1D1A15; }
.dark .btn-candy { box-shadow: 3px 3px 0 #000; }
.btn-candy:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1D1A15; }
.btn-candy:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1D1A15; }
.btn svg { width: 20px; height: 20px; flex: none; }
.cta-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: 28px 0 12px; }

/* Badge au rendu officiel d'Apple : noir à liseré gris (blanc en mode sombre), logo et deux lignes. */
.store-badge { display: inline-flex; align-items: center; gap: 9px; height: 56px; padding: 0 20px 0 15px; border-radius: 13px; background: #000; color: #fff; border: 1.5px solid #A6A6A6; text-decoration: none; transition: transform .15s ease, box-shadow .2s; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 22px -10px rgb(0 0 0 / .45); }
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgb(0 0 0 / .5); }
.store-badge:active { transform: scale(.97); }
.store-badge svg { width: 27px; height: 27px; flex: none; margin-top: -3px; }
.sb-txt { display: flex; flex-direction: column; line-height: 1; text-align: start; }
.sb-top { font: 500 12px/1.1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: .01em; }
.sb-big { font: 600 23px/1.05 -apple-system, "SF Pro Display", system-ui, sans-serif; letter-spacing: -0.02em; margin-top: 1px; }
.dark .store-badge { background: #fff; color: #000; border-color: #fff; }

/* ─── Sections ─── */
section { padding: clamp(60px, 11vw, 116px) 0; }
.alt { background: var(--bg-alt); }
.head { margin-bottom: clamp(28px, 5vw, 48px); max-width: 760px; }

/* ─── Héros ─── */
.hero { padding: clamp(22px, 5vw, 64px) 0 clamp(52px, 8vw, 100px); position: relative; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -14% -14% auto auto; width: min(86vw, 780px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hero-glow) 24%, transparent), transparent); pointer-events: none; z-index: -1; }
.hero-grid { display: grid; gap: 22px; align-items: center; }
.hero-text .lead { margin-bottom: 0; }
.hero-cta .cta-row { margin-top: 6px; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "text visual" "cta visual"; column-gap: 60px; row-gap: 0; align-items: end; }
  .hero-text { grid-area: text; } .hero-cta { grid-area: cta; align-self: start; } .trio { grid-area: visual; align-self: center; }
  .hero-cta .cta-row { margin-top: 28px; }
}
.hero .more { font-size: 1rem; }

/* Modèle nominal en mm : iPhone 78 × 163,4 ; Duo 164,6 × 117,8 ; iPad 215,5 × 281,6.
   Même échelle pour les trois, dans une boîte de 380 × 300 ; léger chevauchement, ligne de base commune.
   Duo vérifié : https://www.apple.com/iphone-duo/specs/ (30 octobre 2026). */
.trio { position: relative; width: min(100%, 660px); margin-inline: auto; aspect-ratio: 380 / 300; direction: ltr; }
.trio > div { position: absolute; bottom: calc(18.4 / 300 * 100%); }
.t-iphone { width: calc(78 / 380 * 100%); left: 0; z-index: 3; }
.t-duo { width: calc(164.6 / 380 * 100%); left: calc(71 / 380 * 100%); z-index: 2; }
.t-ipad { width: calc(215.5 / 380 * 100%); left: calc(164.5 / 380 * 100%); }

/* ─── Appareils dessinés (cadre SVG au-dessus de la vraie capture) ─── */
.iphone, .ipad { position: relative; isolation: isolate; direction: ltr; }
.iphone { aspect-ratio: 78 / 163.4; }
.ipad { aspect-ratio: 215.5 / 281.6; }
.scr { position: absolute; overflow: hidden; background: #F6EEDC; isolation: isolate; }
.iphone > .scr { left: 3.7815%; top: 1.4228%; width: 92.437%; height: 97.154%; border-radius: 14.09% / 6.485%; }
.ipad > .scr { left: 2.646%; top: 2.361%; width: 94.161%; height: 95.556%; border-radius: 1.94% / 1.453%; }
.scr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scr::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 8; }
.frame .metal { fill: url(#cap-metal); }
.frame .bezel { fill: #0B0B0C; }
.frame .island { fill: #000; }
.frame .side rect { fill: var(--metal-a); }
.iphone::before, .ipad::before, .duo-floor { content: ""; position: absolute; left: 7%; right: 7%; bottom: -3.5%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgb(29 26 21 / .32), rgb(29 26 21 / 0)); z-index: -1; pointer-events: none; }
.dark .iphone::before, .dark .ipad::before, .dark .duo-floor { background: radial-gradient(closest-side, rgb(0 0 0 / .7), rgb(0 0 0 / 0)); }

/* Captures réelles : contrat JS .app-demo / .demo-page, déplacements WAAPI sans horloge CSS.
   Un écran sort pendant que le suivant entre ; ni fondu, ni flou entre les captures.
   Sans JS, seule la première capture reste visible. */
.scr.cycle > img { visibility: hidden; }
.scr.cycle > img:first-child { visibility: visible; }
.app-demo > .demo-page { animation: none; transition: none; opacity: 1; }
.app-demo > .demo-page:not(.demo-active):not(.demo-incoming) { visibility: hidden; }
.demo-cursor, .demo-focus { position: absolute; z-index: 7; pointer-events: none; }
.demo-cursor { width: clamp(8px, 5%, 18px); aspect-ratio: 1; border: 1.5px solid #1D1A15; border-radius: 50%; background: #F4A261; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85), 0 2px 7px rgb(0 0 0 / .25); }
.demo-focus { border: 1.5px solid #A34F22; border-radius: 12%; background: rgb(244 162 97 / .08); box-shadow: 0 0 0 1px rgb(255 255 255 / .85); }
.demo-focus[data-target="worn"] { border-radius: 8%; }

/* ─── Duo : --fold = 0 ouvert, 1 fermé, progression fournie par site.js. ───
   Le conteneur du volet conserve la 3D ; seuls ses deux visages sont découpés.
   Aucun overflow, masque ni opacité sur .duo-l / .duo-dev : cela aplatirait les faces.
   Les coins de la charnière droite s'arrondissent à la fin du pli, sous le dos arrondi.
   Flou progressif uniquement sur l'image du volet ; le cadre reste toujours net.
   Référence d'effet : https://github.com/chuspeeism/iphone-duo (30 octobre 2026).
   Bords et rayons illustratifs ; ils ne constituent pas des mesures Apple. */
.duo { --fold: 0; --fold-bend: sin(calc(var(--fold) * 180deg)); --bz: #0A0A0B; --rim: 1.4px solid var(--metal-c); position: relative; aspect-ratio: 164.6 / 117.8; perspective: 2400px; perspective-origin: 50% 45%; isolation: isolate; direction: ltr; }
.duo.is-closed { --fold: 1; }
.duo-dev { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateX(calc(var(--fold) * -25%)); }
.duo-r, .duo-l { position: absolute; top: 0; bottom: 0; width: 50%; }
.duo-r { --hinge: clamp(0, calc((var(--fold) - .4) * 10), 1); --corners: calc(var(--hinge) * 10.3%) 10.3% 10.3% calc(var(--hinge) * 10.3%) / calc(var(--hinge) * 7.2%) 7.2% 7.2% calc(var(--hinge) * 7.2%); left: 50%; background: var(--bz); border: var(--rim); border-left: 0; border-radius: var(--corners); overflow: hidden; clip-path: inset(0 round var(--corners)); transform: translateZ(-.3px); }
.duo-l { left: 0; transform-origin: 100% 50%; transform-style: preserve-3d; transform: rotateY(calc(var(--fold) * 180deg)); will-change: transform; }
.duo-face { position: absolute; inset: 0; overflow: hidden; background: var(--bz); border: var(--rim); border-radius: var(--corners); clip-path: inset(0 round var(--corners)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Le masque force aussi WebKit à composer les coins arrondis dans le plan de chaque face. */
.duo-r, .duo-face { -webkit-mask-image: linear-gradient(#fff, #fff); mask-image: linear-gradient(#fff, #fff); }
.duo-front { --corners: 10.3% 0 0 10.3% / 7.2% 0 0 7.2%; border-right: 0; transform: translateZ(.3px); opacity: clamp(0, calc((.5 - var(--fold)) * 10000), 1); }
/* Dos de la moitié gauche = écran extérieur : quatre coins arrondis comme le téléphone fermé. */
.duo-back { --corners: 10.3% / 7.2%; transform: rotateY(180deg) translateZ(.3px); opacity: clamp(0, calc((var(--fold) - .5) * 10000), 1); }
/* À 90°, le volet est de profil : bascule des faces sans fondu, y compris si WebKit laisse fuir un fond. */
.duo-scr { position: absolute; top: 2.89%; bottom: 2.89%; overflow: hidden; background: #F6EEDC; }
.duo-r .duo-scr { left: 0; right: 4.13%; border-radius: 0 7% 7% 0 / 0 5% 5% 0; }
.duo-front .duo-scr { left: 4.13%; right: 0; border-radius: 7% 0 0 7% / 5% 0 0 5%; }
.duo-in { position: absolute; top: 0; height: 100%; width: 200%; max-width: none; object-fit: cover; }
.duo-r .duo-in { right: 0; }
.duo-front .duo-in { left: 0; }
.duo-par { position: absolute; inset: 0; }
.duo-r .duo-par { transform: none; }
/* Contre-projection de l'image autour de la charnière : le volet tourne devant
   le contenu, au lieu d'écraser le screenshot avec lui. Le masque ne bouge pas. */
.duo-front .duo-in { transform-origin: 50% 50%; transform: scaleX(var(--duo-projection, 1)); }
/* Effet porté uniquement par le volet mobile gauche. Le masque est local au
   volet : le bord libre diffuse, la charnière conserve les détails. Sur le dos
   du même volet, le bord libre se retrouve à droite après rotation de la face.
   Deux niveaux gaussiens fixes, mélangés suivant l'angle ; pas de filtre sur
   le cadre ni sur la moitié droite. Référence vidéo étudiée le 30 octobre :
   empirical.health/blog/why-iphone-duo-fold-animation-works/ */
.duo-blur, .duo-blur-edge { position: absolute; inset: 0; pointer-events: none; }
.duo-blur { --blur-direction: 90deg; opacity: var(--fold-bend); mask-image: linear-gradient(var(--blur-direction), #000 0%, rgb(0 0 0 / .42) 25%, rgb(0 0 0 / .125) 50%, rgb(0 0 0 / .016) 75%, transparent 100%); -webkit-mask-image: linear-gradient(var(--blur-direction), #000 0%, rgb(0 0 0 / .42) 25%, rgb(0 0 0 / .125) 50%, rgb(0 0 0 / .016) 75%, transparent 100%); }
.duo-blur > .duo-blur-soft { filter: blur(3px); }
.duo-blur-edge { mask-image: linear-gradient(var(--blur-direction), #000 0%, rgb(0 0 0 / .65) 20%, transparent 55%); -webkit-mask-image: linear-gradient(var(--blur-direction), #000 0%, rgb(0 0 0 / .65) 20%, transparent 55%); }
.duo-blur-edge > img { filter: blur(9px); }
.duo-back .duo-blur { --blur-direction: 270deg; }
/* Pli de l'écran intérieur : discret, comme sur le vrai téléphone (revêtement qui l'atténue sans l'effacer). */
.duo-crease { position: absolute; top: 0; bottom: 0; width: 2.4%; pointer-events: none; }
.duo-r .duo-crease { left: 0; background: linear-gradient(90deg, rgb(0 0 0 / .07), rgb(255 255 255 / .07) 35%, rgb(255 255 255 / 0)); }
.duo-front .duo-crease { right: 0; background: linear-gradient(270deg, rgb(0 0 0 / .07), rgb(255 255 255 / .07) 35%, rgb(255 255 255 / 0)); }
.duo-fold, .duo-sheen, .duo-shade, .duo-cast { position: absolute; inset: 0; pointer-events: none; }
.duo-fold { background: linear-gradient(270deg, rgb(0 0 0 / .6), rgb(0 0 0 / .22) 26%, rgb(0 0 0 / 0) 62%); opacity: var(--fold); }
.duo-sheen { width: 55%; background: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .34) 50%, rgb(255 255 255 / 0)); transform: translateX(calc(-110% + var(--fold) * 350%)); }
.duo-shade { background: #000; opacity: calc(var(--fold) * .7); }
.duo-back .duo-shade { opacity: calc((1 - var(--fold)) * .6); }
.duo-cast { background: linear-gradient(90deg, rgb(0 0 0 / .55), rgb(0 0 0 / .12) 55%, rgb(0 0 0 / 0)); opacity: var(--fold); }
/* Les captures gardent leurs masques iOS, contenus dans les coins de l'écran. */
.duo-cover { position: absolute; left: 3.9%; right: 3.9%; top: 2.04%; bottom: 2.04%; overflow: hidden; border-radius: 7% / 5%; background: #000; }
.duo-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.duo-cover-shared img { position: absolute; top: 0; left: 0; width: auto; height: 100%; max-width: none; object-fit: contain; }
.duo-cover-shared img { transform-origin: 0 50%; transform: scaleX(var(--duo-projection, 1)); }
/* Les détails iOS proviennent de la capture ; ne pas ajouter un îlot par-dessus. */
.duo .duo-floor { left: 5%; right: 5%; bottom: -4.5%; height: 9%; transform-origin: 75% 50%; transform: scaleX(calc(1 - var(--fold) * .48)); }

/* ─── Comment ça marche : schéma légendé (photo portée → stickers de la cabine) ─── */
.how { position: relative; display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); grid-template-areas: "photo legend" "app app"; column-gap: 16px; row-gap: 30px; align-items: start; }
.how-photo { grid-area: photo; margin: 0; width: 100%; max-width: 380px; }
.how-cap { margin: 0 0 10px; font: 800 .95rem/1.2 var(--display); color: var(--ink-light); }
.how-pic { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--elev-lg); background: #EFE7DA; }
.how-pic img { width: 100%; height: auto; }
.how-dot { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--apricot); border: 3px solid #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .35); transform: scale(0); z-index: 2; }
.how.on .how-dot { transform: none; transition: transform .5s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .45s); }
.how-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: ring 2.6s ease-out infinite; animation-delay: calc(var(--i) * .45s + 1.2s); }
@keyframes ring { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.how-legend { grid-area: legend; position: relative; align-self: stretch; }
.how-tag { position: absolute; inset-inline: 0; top: var(--ty, 0); margin: 0; transform: translateY(-50%); opacity: 0; }
.how.on .how-tag { opacity: 1; transition: opacity .5s ease calc(var(--i) * .45s + .5s); }
.how-tag b { display: block; width: fit-content; font: 800 clamp(.95rem, 3.8vw, 1.16rem)/1.12 var(--display); color: var(--ink); }
.how-tag b, .how-tag span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.how-tag span { display: block; width: fit-content; margin-top: 2px; font-size: .8rem; font-weight: 700; color: var(--apricot-text); }
.how-app { grid-area: app; justify-self: center; width: min(250px, 64vw); text-align: center; }
.how-app .how-cap { text-align: center; }
.how-target { position: absolute; left: var(--x); top: var(--y); width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; border-radius: 50%; border: 2.5px solid var(--apricot); background: rgb(244 162 97 / .14); transform: scale(.3); opacity: 0; z-index: 7; pointer-events: none; }
.how.on .how-target { transform: none; opacity: 1; transition: transform .55s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .45s + 1s), opacity .3s ease calc(var(--i) * .45s + 1s); }
.how-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 9; }
.how-lines path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.how-lines path.to-app { stroke: var(--apricot-text); stroke-dasharray: 1 1; }
.how.on .how-lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) var(--d, 0s); }
.how-lines circle { fill: var(--ink); opacity: 0; }
.how.on .how-lines circle { opacity: 1; transition: opacity .3s ease var(--d, 0s); }
@media (min-width: 760px) {
  .how { grid-template-columns: minmax(0, 35fr) minmax(0, 22fr) minmax(0, 27fr); grid-template-areas: "photo legend app"; column-gap: clamp(22px, 3.5vw, 52px); align-items: end; }
  .how-app { width: 100%; max-width: 276px; justify-self: end; }
}
.how-steps { list-style: none; padding: 0; margin: clamp(36px, 6vw, 60px) 0 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .how-steps { grid-template-columns: repeat(3, 1fr); gap: 30px; } }
.how-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.how-steps p { margin: 5px 0 0; color: var(--ink-soft); }
.num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 800 1rem/1 var(--display); }

/* ─── Tout ce que fait Capucine : scènes animées en 2D ─── */
.feats { display: grid; gap: 40px 24px; }
@media (min-width: 700px) { .feats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat h3 { margin: 18px 0 6px; font-size: 1.32rem; }
.feat p { margin: 0; color: var(--ink-soft); }
.scene { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; background: var(--bg-alt); overflow: hidden; isolation: isolate; direction: ltr; }
.scene .stk { position: absolute; width: auto; max-width: none; filter: drop-shadow(0 5px 7px rgb(29 26 21 / .16)); }
/* Sombre : liseré blanc de sticker, sinon le jean, le pantalon noir et les mocassins se fondent dans le fond nuit. */
.dark .scene .stk { filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff) drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }

/* 1. Photo → sticker → dressing */
.sk-card { position: absolute; left: 8%; top: 12%; width: 46%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--elev-lg); animation: skCard 7s var(--ease) infinite; }
/* La carte photo s'efface quand le sticker part vers le dressing, puis revient avec la photo suivante. */
@keyframes skCard { 0%, 56% { opacity: 1; transform: none; } 66%, 86% { opacity: 0; transform: scale(.92); } 94%, 100% { opacity: 1; transform: none; } }
.sk-photo { width: 100%; height: 100%; object-fit: cover; animation: skPhoto 7s var(--ease) infinite; }
.sk-beam { position: absolute; left: 0; right: 0; top: 0; height: 24%; background: linear-gradient(to bottom, rgb(244 162 97 / 0), rgb(244 162 97 / .5) 84%, #fff 88%, rgb(255 255 255 / 0) 92%); transform: translateY(-100%); animation: skBeam 7s linear infinite; }
.sk-cut { position: absolute; left: 8%; top: 12%; width: 46%; aspect-ratio: 1; object-fit: contain; padding: 4%; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 8px 10px rgb(0 0 0 / .2)); opacity: 0; animation: skCut 7s var(--ease) infinite; }
.sk-shelf { position: absolute; right: 6%; top: 12%; width: 34%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7%; }
.sk-shelf > span { position: relative; min-width: 0; aspect-ratio: 1; border-radius: 14px; background: var(--card); box-shadow: var(--elev); }
/* Dans une case : centré et à la même échelle (sans cette précision, .scene .stk les sortait du flux, en haut à gauche). */
.scene .sk-shelf img { position: absolute; inset: 13%; width: 74%; height: 74%; max-width: none; object-fit: contain; }
.sk-shelf .sk-new { background: var(--apricot-soft); }
/* Case qui attend le nouveau sticker : un « + » en pointillé, qui s'efface quand le vêtement arrive. */
.sk-shelf .sk-new::before { content: "+"; position: absolute; inset: 9%; display: grid; place-items: center; border: 2px dashed var(--apricot); border-radius: 10px; font: 800 1.5rem/1 var(--display); color: var(--apricot-text); animation: skPlus 7s var(--ease) infinite; }
@keyframes skPlus { 0%, 58% { opacity: 1; } 63%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
.sk-new img { opacity: 0; animation: skNew 7s var(--ease) infinite; }
@keyframes skPhoto { 0%, 33% { opacity: 1; } 42%, 88% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes skBeam { 0%, 6% { transform: translateY(-100%); opacity: 1; } 36% { transform: translateY(420%); opacity: 1; } 38%, 100% { transform: translateY(420%); opacity: 0; } }
@keyframes skCut { 0%, 31% { opacity: 0; transform: scale(.94); } 40% { opacity: 1; transform: scale(1.05); } 46%, 54% { opacity: 1; transform: none; } 66% { opacity: 0; transform: translate(80%, -33%) scale(.3); } 100% { opacity: 0; transform: translate(80%, -33%) scale(.3); } }
@keyframes skNew { 0%, 60% { opacity: 0; transform: scale(.4); } 68% { opacity: 1; transform: scale(1.14); } 74%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(.8); } }

/* 2. La cabine : trois rangées qui défilent, le dé */
.cb-rows { position: absolute; inset: 8% 7% 8% 7%; display: grid; grid-template-rows: 1.1fr 1.25fr .75fr; gap: 3%; }
.cb-row { display: grid; grid-template-columns: 11% 1fr 11%; align-items: center; min-height: 0; }
.cb-arr { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--card); box-shadow: var(--elev); font: 700 1.2rem/1 var(--text); color: var(--ink-soft); font-style: normal; }
.cb-win { position: relative; height: 100%; overflow: hidden; }
.cb-strip { display: flex; height: 100%; width: 500%; animation: cbSlide 12s var(--ease) infinite; }
.cb-row:nth-child(2) .cb-strip { animation-delay: -1s; }
.cb-row:nth-child(3) .cb-strip { animation-delay: -2s; }
.cb-strip > span { width: 20%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* Chaque pièce dans une même boîte, centrée : même échelle pour un pull, un short ou des sandales. */
.scene .cb-strip .stk { position: static; width: 46%; height: 100%; max-width: none; object-fit: contain; }
.cb-dice { position: absolute; right: 4%; top: 4%; width: 11%; aspect-ratio: 1; animation: dice 6s ease-in-out infinite; filter: drop-shadow(2px 2px 0 #1D1A15); }
@keyframes cbSlide { 0%, 18% { transform: translateX(0); } 25%, 43% { transform: translateX(-20%); } 50%, 68% { transform: translateX(-40%); } 75%, 93% { transform: translateX(-60%); } 100% { transform: translateX(-80%); } }
@keyframes dice { 0%, 76%, 100% { transform: none; } 80% { transform: rotate(-24deg) scale(1.12); } 84% { transform: rotate(22deg) scale(1.12); } 88% { transform: rotate(-12deg); } 92% { transform: rotate(6deg); } }

/* 3. L'essayage : la tenue se pose sur la photo */
.tr-frame { position: absolute; left: 31%; top: 7%; width: 38%; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: #fff; border: 5px solid #fff; box-shadow: var(--elev-lg); }
.tr-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
.tr-after { position: absolute; inset: 0; overflow: hidden; transform: translateY(-100%); animation: trA 8s var(--ease) infinite; }
.tr-after > div { position: absolute; inset: 0; transform: translateY(100%); animation: trB 8s var(--ease) infinite; }
.tr-after::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #fff; box-shadow: 0 0 14px 5px rgb(244 162 97 / .9); opacity: 0; animation: trLine 8s linear infinite; }
.tr-pieces .stk { animation: trPiece 8s var(--ease) infinite; }
.tr-pieces .stk { width: 21%; height: 30%; object-fit: contain; }
.tr-pieces .stk:nth-child(1) { left: 6%; top: 14%; }
.tr-pieces .stk:nth-child(2) { left: 6%; top: 54%; animation-delay: -.25s; }
.tr-pieces .stk:nth-child(3) { right: 6%; top: 14%; animation-delay: -.5s; }
.tr-pieces .stk:nth-child(4) { right: 6%; top: 60%; height: 18%; animation-delay: -.75s; }
.tr-spark { position: absolute; left: 63%; top: 3%; width: 13%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--butter); color: #1D1A15; box-shadow: 2px 2px 0 #1D1A15; border: 2px solid #1D1A15; animation: trSpark 8s var(--ease) infinite; }
.tr-spark svg { width: 58%; height: 58%; }
@keyframes trA { 0%, 34% { transform: translateY(-100%); opacity: 1; } 58%, 90% { transform: none; opacity: 1; } 98%, 100% { transform: none; opacity: 0; } }
@keyframes trB { 0%, 34% { transform: translateY(100%); } 58%, 100% { transform: none; } }
@keyframes trLine { 0%, 34% { opacity: 0; } 36%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
/* Les pièces s'effacent sur place pendant que la tenue se pose (plus de vol vers la photo : une tache noire sur iPhone). */
@keyframes trPiece { 0% { opacity: 0; transform: translateY(8%); } 6%, 26% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: scale(.85); } }
@keyframes trSpark { 0%, 20% { transform: scale(1); } 26% { transform: scale(1.3) rotate(18deg); } 32%, 100% { transform: none; } }

/* 4. La tenue du jour selon la météo */
.td-sky { position: absolute; left: 7%; right: 7%; top: 7%; height: 36%; border-radius: 20px; overflow: hidden; border: 2.5px solid #1D1A15; box-shadow: 3px 3px 0 #1D1A15; }
.td-day, .td-rainy { position: absolute; inset: 0; }
.td-day { background: linear-gradient(180deg, #BFE0FA, #EAF5FD); }
.td-rainy { background: linear-gradient(180deg, #A9B6C8, #DCE2EA); opacity: 0; animation: tdRain 9s var(--ease) infinite; }
.td-sun { position: absolute; right: 9%; top: 14%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #F9DD7E; border: 2.5px solid #1D1A15; box-shadow: 0 0 0 7px rgb(249 221 126 / .45), 0 0 0 15px rgb(249 221 126 / .2); animation: tdSun 9s var(--ease) infinite; }
.td-cloud { position: absolute; right: 7%; top: 12%; width: 34%; aspect-ratio: 2; opacity: 0; animation: tdCloud 9s var(--ease) infinite; }
.td-cloud i { position: absolute; bottom: 22%; border-radius: 99px; background: #fff; border: 2.5px solid #1D1A15; }
.td-cloud i:nth-child(1) { left: 6%; width: 50%; height: 52%; }
.td-cloud i:nth-child(2) { left: 30%; width: 46%; height: 78%; bottom: 22%; }
.td-cloud i:nth-child(3) { left: 50%; width: 44%; height: 50%; }
.td-cloud::before, .td-cloud::after { content: ""; position: absolute; top: 86%; width: 3px; height: 26%; border-radius: 3px; background: #5D97DC; animation: drop .9s linear infinite; }
.td-cloud::before { left: 30%; } .td-cloud::after { left: 62%; animation-delay: -.45s; }
.td-temp { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); font: 800 clamp(1.8rem, 6vw, 2.6rem)/1 var(--display); color: #1D1A15; }
.td-temp.t2 { opacity: 0; animation: tdRain 9s var(--ease) infinite; }
.td-temp.t1 { animation: tdSun 9s var(--ease) infinite; }
/* Trois pièces dans trois boîtes égales, centrées : même échelle pour toutes. */
.td-fit { position: absolute; left: 8%; right: 8%; top: 50%; bottom: 7%; display: flex; align-items: center; gap: 5%; }
.scene .td-fit .stk { position: static; flex: 1 1 0; min-width: 0; width: 0; height: 88%; object-fit: contain; }
.scene .td-fit .c { height: 52%; }
.td-fit.f1 { animation: tdF1 9s var(--ease) infinite; }
.td-fit.f2 { opacity: 0; animation: tdF2 9s var(--ease) infinite; }
@keyframes tdRain { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tdSun { 0%, 42% { opacity: 1; transform: none; } 50%, 92% { opacity: 0; transform: translateY(18%); } 100% { opacity: 1; transform: none; } }
@keyframes tdCloud { 0%, 42% { opacity: 0; transform: translateX(30%); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-20%); } }
@keyframes tdF1 { 0%, 40% { opacity: 1; transform: none; } 47%, 93% { opacity: 0; transform: translateY(6%) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes tdF2 { 0%, 45% { opacity: 0; transform: translateY(6%) scale(.96); } 52%, 91% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(6%) scale(.96); } }
@keyframes drop { from { transform: translateY(-30%); opacity: 1; } to { transform: translateY(90%); opacity: 0; } }

/* 5. Les looks : des polaroïds qui s'empilent, le dernier se partage */
.lk { position: absolute; left: 35%; top: 10%; width: 30%; margin: 0; padding: 2%; padding-bottom: 6%; background: #fff; border-radius: 8px; box-shadow: var(--elev-lg); opacity: 0; animation: lkIn 9s var(--ease) infinite; }
.lk img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; }
.lk1 { --x: -66%; --r: -13deg; } .lk2 { --x: -22%; --r: -4deg; animation-delay: .3s; } .lk3 { --x: 22%; --r: 5deg; animation-delay: .6s; } .lk4 { --x: 66%; --r: 12deg; animation-delay: .9s; animation-name: lkLift; }
.lk-share { position: absolute; right: 7%; bottom: 9%; width: 12%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--apricot); color: #1D1A15; border: 2px solid #1D1A15; box-shadow: 2px 2px 0 #1D1A15; opacity: 0; animation: lkShare 9s var(--ease) infinite; }
.lk-share svg { width: 54%; height: 54%; }
@keyframes lkIn { 0% { opacity: 0; transform: translate(var(--x), 60%) rotate(0); } 7%, 88% { opacity: 1; transform: translate(var(--x), 0) rotate(var(--r)); } 96%, 100% { opacity: 0; transform: translate(var(--x), 0) rotate(var(--r)); } }
@keyframes lkLift { 0% { opacity: 0; transform: translate(var(--x), 60%) rotate(0); } 7%, 36% { opacity: 1; transform: translate(var(--x), 0) rotate(var(--r)); } 44%, 80% { opacity: 1; transform: translate(var(--x), -7%) rotate(3deg) scale(1.1); } 88% { opacity: 1; transform: translate(var(--x), 0) rotate(var(--r)); } 96%, 100% { opacity: 0; transform: translate(var(--x), 0) rotate(var(--r)); } }
@keyframes lkShare { 0%, 46% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.15); } 56%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: scale(.6); } }

/* 6. Pichu souffle des idées */
.pc-cat { position: absolute; left: 4%; bottom: 0; width: 44%; height: auto; animation: pcBob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.pc-bubbles { position: absolute; right: 6%; top: 12%; width: 54%; min-height: 46%; }
.pc-b { position: absolute; inset: 0 0 auto 0; margin: 0; background: var(--card); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 20px; padding: 12px 14px; font: 700 clamp(.9rem, 2.1vw, 1.04rem)/1.3 var(--display); box-shadow: 3px 3px 0 var(--ink); opacity: 0; animation: pcB 12s var(--ease) infinite; text-align: start; }
.pc-b::after { content: ""; position: absolute; left: 14%; bottom: -10px; width: 16px; height: 16px; background: var(--card); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); }
.pc-b.b2 { animation-delay: 4s; } .pc-b.b3 { animation-delay: 8s; }
@keyframes pcBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3%) rotate(-2deg); } }
@keyframes pcB { 0% { opacity: 0; transform: translateY(10px) scale(.92); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }

/* ─── Pensée pour chaque écran ─── */
.dv { --device-space: calc(100vw - 2 * var(--gutter)); --mm: min(1.5px, calc(var(--device-space) / 215.5)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 28px; }
@supports (container-type: inline-size) { .dv { container-type: inline-size; --device-space: 100cqw; } }
.dv-item { min-width: 0; }
/* Même facteur pixels/mm pour les trois appareils, sans réduction individuelle par flexbox. */
.dv-stage { --h: 281.6; display: flex; align-items: flex-end; justify-content: center; height: calc(var(--h) * var(--mm) + 28px); padding-bottom: 14px; }
.dv-stage > .iphone, .dv-stage > .ipad, .dv-stage > .duo { flex: none; }
.dv-phone .dv-stage { --h: 163.4; }
.dv-fold .dv-stage { --h: 117.8; }
.dv-phone .iphone { width: calc(78 * var(--mm)); }
.dv-pad .ipad { width: calc(215.5 * var(--mm)); }
.dv-fold .duo { width: calc(164.6 * var(--mm)); }
@media (min-width: 760px) and (max-width: 1099px) {
  .dv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-fold .dv-stage { --h: 163.4; }
  .dv-pad { grid-column: 1 / -1; }
  .dv-pad .dv-txt { max-width: 42ch; margin-inline: auto; text-align: center; }
}
@media (min-width: 1100px) {
  .dv { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; }
  .dv-item .dv-stage { --h: 281.6; }
}
.dv-txt { overflow-wrap: anywhere; }
.dv-txt h3 { font-size: 1.45rem; margin: 20px 0 6px; }
.dv-txt p { color: var(--ink-soft); margin: 0; }
.duo-toggle { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 800 1rem/1 var(--display); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.duo-toggle::before { content: ""; width: 16px; height: 12px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(90deg, transparent 46%, currentColor 46% 54%, transparent 54%); }
.duo-toggle:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.dv-sync { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 44px 0 0; color: var(--ink-soft); font-weight: 700; text-align: center; }
.dv-sync > svg { width: 22px; height: 22px; flex: none; color: var(--apricot-text); transform-box: fill-box; transform-origin: center; animation: syncTurn 8s var(--ease) infinite; animation-play-state: paused; }
.dv-sync.in > svg { animation-play-state: running; }
@keyframes syncTurn { 0%, 35% { transform: rotate(0); } 70%, 100% { transform: rotate(180deg); } }
/* Téléphone : la phrase passe sur deux lignes ; alignée à gauche, collée à son icône comme le reste de la page. */
@media (max-width: 560px) {
  .dv-sync { justify-content: flex-start; align-items: flex-start; text-align: start; }
  .dv-sync > svg { margin-top: 2px; }
}
/* Ancien geste de la feuille : remplacé par les déplacements des captures dans site.js. */
.finger { display: none; }

/* ─── Tes photos, en sécurité ─── */
.flow { display: grid; grid-template-columns: minmax(0, auto) minmax(18px, 1fr) minmax(0, auto) minmax(18px, 1fr) minmax(0, auto); grid-template-areas: "phone l1 server l2 backup" ". . l3 . ." ". . ai . ."; align-items: start; max-width: 820px; margin: 0 auto clamp(40px, 7vw, 68px); direction: ltr; --ico: clamp(54px, 13vw, 80px); }
[dir="rtl"] .fl-node, [dir="rtl"] .fl-link small { direction: rtl; }
.fl-node { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; max-width: 150px; }
.fl-ico { width: var(--ico); aspect-ratio: 1; display: grid; place-items: center; border-radius: 26%; background: var(--card); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); margin-bottom: 6px; }
.fl-ico svg { width: 46%; height: 46%; }
.fl-ico:has(> .provider-logo) { background: #FFFDF8; border-color: #607080; box-shadow: 3px 3px 0 var(--line-strong); }
.fl-ico > .provider-logo { width: min(64px, calc(var(--ico) - 16px)); height: min(48px, calc(var(--ico) - 16px)); object-fit: contain; }
.fl-server .provider-logo { border-radius: 22%; }
.fl-node b { font: 800 clamp(.82rem, 2.8vw, 1.04rem)/1.15 var(--display); overflow-wrap: anywhere; }
.fl-node small { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: clamp(.7rem, 2.3vw, .82rem); color: var(--ink-light); font-weight: 700; line-height: 1.25; }
.fl-node small .flag { width: 16px; height: 12px; }
.fl-phone { grid-area: phone; } .fl-server { grid-area: server; } .fl-backup { grid-area: backup; } .fl-ai { grid-area: ai; }
.fl-link { position: relative; height: var(--ico); overflow: clip; overflow-clip-margin: 12px; }
.fl-l1 { grid-area: l1; } .fl-l2 { grid-area: l2; }
.fl-l3 { grid-area: l3; height: clamp(40px, 9vw, 64px); width: 100%; margin: 6px 0; }
.fl-line { position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2.5px dashed var(--line-strong); }
.fl-l3 .fl-line { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2.5px dashed var(--line-strong); }
.fl-link small { position: absolute; left: 0; right: 0; top: calc(50% + 12px); text-align: center; font: 800 .7rem/1 var(--text); color: var(--apricot-text); letter-spacing: .04em; }
.fl-pkt { position: absolute; inset: 0 4px; transform: translateX(-100%); opacity: 0; animation: pktX 3s var(--ease) infinite; }
.fl-pkt::before, .fl-pkt > svg { content: ""; position: absolute; right: -11px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--apricot); }
.fl-pkt > svg { padding: 4px; color: #1D1A15; z-index: 1; }
.fl-l1 .fl-pkt::before { display: none; }
.fl-l2 .fl-pkt { animation-delay: .8s; }
.fl-l2 .fl-pkt.back { transform: translateX(100%); animation-name: pktXb; animation-delay: 2.3s; }
.fl-l2 .fl-pkt.back::before { right: auto; left: -11px; background: var(--butter); }
.fl-l3 .fl-pkt { inset: 0; transform: translateY(-100%); animation-name: pktY; animation-delay: 1.4s; }
.fl-l3 .fl-pkt::before { right: auto; left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -10px; background: var(--butter); border: 2px solid var(--ink); width: 20px; height: 20px; }
@keyframes pktX { 0% { transform: translateX(-100%); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateX(0); opacity: 1; } 62%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes pktXb { 0% { transform: translateX(100%); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateX(0); opacity: 1; } 62%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes pktY { 0% { transform: translateY(-80%); opacity: 0; } 8% { opacity: 1; } 55% { transform: none; opacity: 1; } 62%, 100% { transform: none; opacity: 0; } }
/* Téléphone : le schéma se lit de haut en bas (téléphone → serveur, qui se double d'un secours à droite et parle à l'IA en dessous). */
@media (max-width: 560px) {
  .flow { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); grid-template-areas: "phone . ." "l1 . ." "server l2 backup" "l3 . ." "ai . ."; justify-items: center; max-width: 380px; --ico: 60px; }
  .fl-node { max-width: none; width: 100%; }
  .fl-l1 { height: 58px; width: 100%; margin: 6px 0; overflow: visible; }
  .fl-l1 .fl-line { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2.5px dashed var(--line-strong); }
  .fl-l1 small { left: calc(50% + 20px); right: auto; top: 50%; transform: translateY(-50%); text-align: start; }
  .fl-l1 .fl-pkt { inset: 0; transform: translateY(-100%); animation-name: pktY; }
  .fl-l1 .fl-pkt > svg { right: auto; left: 50%; top: auto; bottom: -11px; margin: 0 0 0 -10px; }
  .fl-l2 { width: 100%; }
  .fl-l2 .fl-line { left: 0; right: 0; }
}
.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px 34px; }
@media (min-width: 680px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts li { padding: 24px 0 22px; border-top: 1px solid var(--line-strong); }
.facts svg { width: 28px; height: 28px; color: var(--apricot-text); margin-bottom: 12px; }
.facts h3 { font-size: 1.18rem; margin-bottom: 6px; }
.facts p { color: var(--ink-soft); margin: 0; font-size: .98rem; }
.facts-more { margin: 26px 0 0; }

/* ─── FAQ (ouverture animée par le script ; <details> natif sans JavaScript) ─── */
.faq-wrap { max-width: 880px; }
details { border-bottom: 1px solid var(--line-strong); }
details:first-child { border-top: 1px solid var(--line-strong); }
summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; -webkit-tap-highlight-color: transparent; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--apricot-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C46A33' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .45s var(--ease); }
details[open] summary::after, details.opening summary::after { transform: rotate(135deg); }
details.closing summary::after { transform: none; }
.faq-a { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 0 22px; color: var(--ink-soft); max-width: 70ch; }

/* ─── Sois parmi les premiers ─── */
.join { position: relative; overflow: hidden; isolation: isolate; padding: clamp(68px, 12vw, 128px) 0; background: radial-gradient(60% 70% at 85% 35%, color-mix(in srgb, var(--apricot) 26%, transparent), transparent 70%), radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--butter) 30%, transparent), transparent 70%), var(--bg); }
.join-grid { display: grid; gap: 48px; align-items: center; }
/* Un titre d'un seul long mot (kannada, tamoul…) ne doit pas élargir la colonne au-delà de l'écran. */
.join-grid > *, .hero-grid > * { min-width: 0; }
@media (min-width: 940px) { .join-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 60px; } }
.join h2 { font-size: clamp(2.3rem, 8vw, 3.8rem); }
.join .wl { max-width: 560px; }
.nl-card { margin-top: 30px; max-width: 580px; padding: 22px 22px 8px; border-radius: 26px; background: var(--card); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); scroll-margin-top: 90px; }
.nl-card h3 { margin: 0 0 6px; font: 800 clamp(1.3rem, 4vw, 1.6rem)/1.15 var(--display); }
.nl-card > p { margin: 0; color: var(--ink-soft); }
.nl-card .wl { margin-top: 16px; }
.join-steps { list-style: none; padding: 0; margin: 30px 0 6px; display: grid; gap: 18px; max-width: 560px; }
.join-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.join-steps b { display: block; font: 800 1.1rem/1.2 var(--display); margin-top: 5px; }
.join-steps p { margin: 3px 0 0; color: var(--ink-soft); font-size: .97rem; }
.join-steps li:nth-child(1) .num { background: var(--apricot); color: #1D1A15; }
/* Largeur bornée : Pichu (calé sur le bord du bloc) reste contre le téléphone sur tablette, au lieu de partir au bord de l'écran. */
.join-visual { position: relative; display: grid; place-items: center; padding-bottom: 20px; width: 100%; max-width: 470px; justify-self: center; }
.lock { width: min(280px, 70vw); container-type: inline-size; }
.ls-bg { position: absolute; inset: 0; background: radial-gradient(circle at 25% 15%, #FFE3C8, transparent 55%), radial-gradient(circle at 85% 90%, #F9DD7E, transparent 50%), linear-gradient(170deg, #F6B07A, #F08F55); overflow: hidden; }
.ls-bg .wm-flower { position: absolute; left: 34%; top: 46%; width: 120%; height: auto; aspect-ratio: 1; margin: 0; opacity: .22; animation: lsSpin 40s linear infinite; }
.ls-clock { position: absolute; top: 9%; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 2px 14px rgb(120 50 10 / .25); }
.ls-clock b { display: block; font: 700 clamp(3.2rem, 16vw, 4.6rem)/1 -apple-system, "SF Pro Rounded", ui-rounded, system-ui, sans-serif; letter-spacing: -.02em; }
.ls-date { display: block; font: 600 .9rem/1.2 -apple-system, system-ui, sans-serif; margin-bottom: 4px; }
.ls-stack { position: absolute; left: 4.5%; right: 4.5%; top: 40%; display: grid; gap: 8px; }
.ls-n { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 20px; background: rgb(255 255 255 / .88); color: #1D1A15; box-shadow: 0 10px 26px rgb(110 50 10 / .18); opacity: 0; animation: lsIn 9s var(--ease) infinite; text-align: start; }
.ls-n img { width: 36px; height: 36px; border-radius: 9px; }
.ls-n p { margin: 0; }
.ls-h { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; line-height: 1.3; }
.ls-h time { color: #7A7064; }
.ls-t { font-weight: 800; font-size: .84rem; line-height: 1.25; }
.ls-d { font-size: .78rem; line-height: 1.3; color: #3D372F; }
.ls-n.n1 { animation-delay: .4s; } .ls-n.n2 { animation-delay: 2.8s; }
/* Écran verrouillé à l'échelle du téléphone dessiné (unités de conteneur, calées sur 280 px de large) : rien ne déborde
   quand il rapetisse (téléphone couché). */
@supports (font-size: 1cqw) {
  .ls-clock b { font-size: 26cqw; } .ls-date { font-size: 5.1cqw; }
  .ls-stack { gap: 2.9cqw; }
  .ls-n { grid-template-columns: 12.9cqw 1fr; gap: 3.6cqw; padding: 3.6cqw 4.3cqw; border-radius: 7cqw; }
  .ls-n img { width: 12.9cqw; height: 12.9cqw; border-radius: 3.2cqw; }
  .ls-h { font-size: 4.1cqw; } .ls-t { font-size: 4.8cqw; } .ls-d { font-size: 4.45cqw; }
}
.join-pichu { position: absolute; width: 36%; max-width: 160px; bottom: 0; inset-inline-end: 2%; animation: pcBob 3s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes lsIn { 0% { opacity: 0; transform: translateY(-40%) scale(.96); } 6%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; transform: translateY(6%) scale(.98); } }
@keyframes lsSpin { to { transform: rotate(360deg); } }

/* ─── Liste d'attente (formulaire) ─── */
.wl { margin: 22px 0 10px; max-width: 520px; }
.wl-row { display: flex; gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px; box-shadow: var(--elev); transition: border-color .2s, box-shadow .2s; }
.wl-row:focus-within { border-color: var(--apricot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--apricot) 25%, transparent), var(--elev); }
.wl.err .wl-row { border-color: #D9534F; }
.wl input[type=email] { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 17px/1.2 var(--text); padding: 0 8px 0 16px; height: 46px; outline: none; }
.wl input::placeholder { color: var(--ink-light); }
.wl .btn { min-height: 46px; padding: 0 22px; font-size: 1.05rem; flex: none; box-shadow: 2px 2px 0 #1D1A15; }
.wl .btn:disabled { opacity: .7; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.wl-msg { min-height: 0; margin: 8px 6px 0; font-size: .92rem; font-weight: 600; color: #C2412D; }
.dark .wl-msg { color: #FF8A73; }
.wl-msg:empty { display: none; }
.wl-consent { margin: 8px 6px 0; font-size: .84rem; color: var(--ink-light); text-wrap: pretty; }
@media (max-width: 460px) {
  .wl-row { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 8px; }
  /* flex: none : en colonne, « flex: 1 » donnait la hauteur au contenu (20 px) au lieu des 48 px (revue du 31 octobre). */
  .wl input[type=email] { flex: none; height: 48px; padding: 0 12px; text-align: center; }
  .wl .btn { width: 100%; }
}
.wl-count { display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 4px; font-weight: 700; font-size: .95rem; color: var(--ink-soft); }
.wl-count .pulse { width: 9px; height: 9px; border-radius: 50%; background: #3E9B57; box-shadow: 0 0 0 0 rgb(62 155 87 / .6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgb(62 155 87 / 0); } 100% { box-shadow: 0 0 0 0 rgb(62 155 87 / 0); } }
.wl-done { margin: 22px 0 10px; max-width: 540px; padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--elev); text-align: start; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.wl-check { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #D6EED0; color: #1D1A15; font-weight: 900; font-size: 1.3rem; margin-bottom: 10px; }
.wl-done h3 { font-size: 1.45rem; margin-bottom: .3em; }
.wl-text { color: var(--ink-soft); }
.wl-share { margin-top: 14px; padding: 14px; border-radius: 18px; background: var(--apricot-soft); }
.wl-share-t { margin: 0 0 10px; font-size: .95rem; color: var(--ink-soft); }
.wl-share-t b { color: var(--ink); }
.wl-share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wl-share-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .9rem ui-monospace, Menlo, monospace; background: var(--card); padding: 11px 14px; border-radius: 12px; }
.wl-share-row .btn { min-height: 44px; padding: 0 18px; font-size: 1rem; box-shadow: 2px 2px 0 #1D1A15; }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(8px); } }

/* Bulle d'information (badge App Store avant la sortie, lien copié) */
/* Cachée hors de l'écran ET invisible : vide, elle laissait dépasser une petite pastille noire en bas (25 octobre). */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 45; max-width: min(92vw, 460px); transform: translate(-50%, calc(100% + 60px)); opacity: 0; visibility: hidden; background: var(--ink); color: var(--bg); padding: 14px 18px; border-radius: 18px; font-weight: 600; font-size: .98rem; line-height: 1.4; box-shadow: var(--elev-lg); transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .3s ease, visibility 0s linear .45s; text-align: center; }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.2, .9, .2, 1), opacity .2s ease, visibility 0s; }

/* ─── Pages légales ─── */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 { font-size: clamp(2rem, 7.5vw, 3.1rem); }
.legal h2 { font-size: clamp(1.4rem, 5vw, 1.75rem); margin-top: 1.7em; }
.legal p, .legal li { color: var(--ink-soft); }
.legal li { margin-bottom: 6px; }
.crumbs { font-size: .9rem; color: var(--ink-light); margin-bottom: 18px; }
.crumbs a { text-decoration: none; display: inline-block; padding-block: 4px; }
.crumbs a:hover { color: var(--ink); }
.legal-note { background: var(--apricot-soft); padding: 12px 16px; border-radius: 14px; font-size: .92rem; color: var(--ink-soft) !important; }

/* ─── Accueil sans langue ─── */
.gate { padding: 72px 20px; text-align: center; }
.gate-logo { font-size: clamp(3.2rem, 13vw, 4.6rem); margin: 0 0 18px; }
.gate .lead { margin: 0 auto 28px; }
.gate .langs { justify-content: center; max-width: 760px; margin: 0 auto; }

/* ─── Page introuvable ─── */
.nf { text-align: center; }
.nf img { margin: 0 auto; }
.nf .lead { margin: 0 auto 24px; }

/* ─── Pied de page ─── */
footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); font-size: .95rem; }
footer .cols { display: grid; gap: 32px; }
@media (min-width: 820px) { footer .cols { grid-template-columns: 1.3fr 1fr 1.4fr; } }
footer h2 { font-family: var(--text); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-light); margin-bottom: 12px; }
footer p { color: var(--ink-soft); }
footer .tagline { margin: 12px 0 14px; }
footer p > a { display: inline-block; padding-block: 3px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
footer ul a { display: inline-block; padding-block: 4px; }
footer ul.social { display: flex; gap: 10px; margin-top: 14px; }
footer ul.social a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); }
footer ul.social a:hover { border-color: var(--ink); background: var(--bg); text-decoration: none; }
footer ul.social svg { width: 19px; height: 19px; }
.follow-card { margin-top: 28px; }
.follow-card h3 { margin-bottom: 6px; }
.follow-card > p { color: var(--ink-soft); margin-bottom: 14px; }
.follow { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.follow a { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bg); color: var(--ink); text-decoration: none; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.follow a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.follow svg { width: 22px; height: 22px; flex: none; }
.follow span { display: grid; line-height: 1.15; }
.follow small { color: var(--ink-soft); font-size: .8rem; }
footer a { text-decoration: none; color: var(--ink-soft); }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .brand { font-size: 1.65rem; padding: 0; }
.langs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; }
.langs a[aria-current] { color: var(--ink); font-weight: 800; }
footer .langs a { display: inline-flex; align-items: center; gap: 7px; padding: 3px 0; }
.fine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .88rem; color: var(--ink-light); margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.made { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.made .flag { width: 20px; height: 15px; }

/* Suggestion de langue */
.suggest { position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; max-width: 520px; margin-inline: auto; display: none; gap: 12px; align-items: center; justify-content: space-between; background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--elev-lg); padding: 10px 10px 10px 18px; }
.suggest.on { display: flex; animation: sheetItem .4s cubic-bezier(.2, .8, .2, 1) both; }
.suggest a { font-weight: 800; color: var(--apricot-text); }
.suggest button { background: none; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; color: var(--ink); }

/* Choix de la langue */
.lang-btn img { width: 22px; height: auto; border-radius: 4px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }
.flag { display: inline-block; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); object-fit: cover; flex: none; }
.langpick { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(18 16 16 / .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: sheetIn .25s ease both; }
.lp-card { width: min(760px, 100%); max-height: min(86vh, 760px); max-height: min(86dvh, 760px); overflow: auto; background: var(--bg); border-radius: 28px; padding: 18px 18px 22px; box-shadow: var(--elev-lg); animation: pop .35s cubic-bezier(.2, 1.2, .4, 1) both; }
.lp-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; position: sticky; top: -18px; background: var(--bg); z-index: 1; }
.lp-head h2 { font-size: 1.4rem; margin: 0; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 4px; }
.lp-grid a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; text-decoration: none; font-weight: 600; color: var(--ink-soft); transition: background-color .15s, color .15s; }
.lp-grid a:hover, .lp-grid a:focus-visible { background: var(--line); color: var(--ink); }
.lp-grid a[aria-current] { background: var(--apricot-soft); color: var(--ink); }
.lp-grid .flag { width: 26px; height: 19.5px; }
@media (max-width: 600px) {
  .langpick { place-items: end stretch; padding: 0; }
  .lp-card { border-radius: 26px 26px 0 0; max-height: 82vh; max-height: 82dvh; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .lp-grid { grid-template-columns: 1fr 1fr; }
}

/* Apparition au défilement (le contenu reste visible sans JavaScript). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
/* Animations à l'arrêt tant que leur bloc n'est pas à l'écran (le script ajoute .playing). */
.js [data-play]:not(.playing), .js [data-play]:not(.playing) * { animation-play-state: paused !important; }

/* Sans JavaScript : légendes empilées, points visibles. */
html:not(.js) .how-tag { position: static; transform: none; opacity: 1; margin-bottom: 12px; }
html:not(.js) .how-dot, html:not(.js) .how-target { transform: none; opacity: 1; }

/* ─── iPhone Duo ouvert et écrans pliables : un bloc par moitié, rien sur la pliure (revue du 31 octobre) ───
   Safari de l'iPhone Duo (iOS 27.1) ne donne pas la pliure aux pages : ni segments de fenêtre, ni posture (mesuré au
   simulateur, ouvert et fermé). Le script d'en-tête (FOLD_BOOT, build.mjs) pose donc .fold-v quand un iPhone offre une
   fenêtre de petite tablette couchée : Duo ouvert à plat, pliure verticale au milieu. Les pliables qui donnent leurs
   segments (Chrome) passent par la même classe, avec la vraie position de la charnière.
   Allée d'au moins 40 px autour de la pliure, comme l'app (zone « division » d'iOS : 20 pt de chaque côté).
   Chaque section s'ouvre comme un livre : titre sur la page de gauche, blocs ensuite rangés page par page. */
html.fold-v {
  --fold-a: 50vw; --fold-b: 50vw; --pp: 24px;
  --hinge: max(40px, calc(var(--fold-b) - var(--fold-a)));
  --seg: calc((var(--fold-a) + var(--fold-b) - var(--hinge)) / 2);
  --seg2: calc(100vw - var(--seg) - var(--hinge));
}
@media (horizontal-viewport-segments: 2) {
  html.fold-v { --fold-a: env(viewport-segment-right 0 0, 50vw); --fold-b: env(viewport-segment-left 1 0, 50vw); }
}
html.fold-v .wrap { max-width: none; padding-inline: 0; }
html.fold-v .top .wrap { padding-inline: var(--gutter); }
html.fold-v .menu { display: none; }
html.fold-v .menu-btn { display: inline-grid !important; }
html.fold-v.menu-open .sheet { display: block !important; padding-inline: var(--pp) calc(var(--seg2) + var(--hinge) + var(--pp)); }
html.fold-v :is(.head, .dv-sync, .facts-more, .flow, .legal, .nf, footer .fine) { max-width: var(--seg); margin-inline: 0; padding-inline: var(--pp); }
html.fold-v :is(.hero-grid, .join-grid, .invite-grid, .feats, .dv, .facts, .how-steps, footer .cols, .pv-wrap, .faq-wrap) { display: grid; grid-template-columns: var(--seg) var(--seg2); column-gap: var(--hinge); }
html.fold-v :is(.hero-grid, .join-grid, .invite-grid, .feats, .dv, .how-steps, footer .cols) > * { padding-inline: var(--pp); min-width: 0; }
html.fold-v .join-grid, html.fold-v .invite-grid { row-gap: 32px; }
/* Bordures au ras du texte : marges plutôt que retraits. */
html.fold-v .facts > li { margin-inline: var(--pp); }
/* Comment ça marche : photo et légendes sur la page de gauche, la cabine sur celle de droite. */
html.fold-v .how { grid-template-columns: calc(var(--seg) * .58) calc(var(--seg) * .42) var(--hinge) var(--seg2); grid-template-areas: "photo legend . app"; column-gap: 0; align-items: end; }
html.fold-v .how-photo { width: calc(100% - var(--pp)); margin-inline-start: var(--pp); }
html.fold-v .how-legend { padding-inline: 14px var(--pp); }
html.fold-v .how-app { justify-self: center; }
/* Écrans : iPhone et Duo côte à côte, l'iPad sur la page de gauche, chacun dans sa moitié. */
html.fold-v .dv { --device-space: calc(min(var(--seg), var(--seg2)) - 2 * var(--pp)); }
html.fold-v .dv-pad { grid-column: auto; }
html.fold-v .dv-pad .dv-txt { max-width: none; margin-inline: 0; text-align: start; }
html.fold-v .dv-sync { justify-content: flex-start; text-align: start; }
/* Tes photos : le titre à gauche, le trajet de la photo à droite ; les engagements sur deux pages. */
html.fold-v .pv-wrap > .facts { grid-column: 1 / -1; }
html.fold-v .flow { --ico: 64px; margin-block: 0 clamp(40px, 7vw, 68px); }
/* Questions : le titre à gauche, les questions à droite. */
html.fold-v .faq-wrap { align-items: start; }
html.fold-v .faq { padding-inline: var(--pp); min-width: 0; }
/* Pied de page : marque et informations à gauche, langues à droite. */
html.fold-v footer .cols { grid-template-rows: auto 1fr; align-items: start; }
html.fold-v footer .cols > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
/* Bulles du bas : sur la page de gauche, jamais à cheval. */
html.fold-v .suggest { max-width: calc(var(--seg) - 24px); margin-inline: 0; }
html.fold-v .toast { left: calc(var(--seg) / 2); max-width: calc(var(--seg) - 32px); }
/* Ouvert en livre (moitié haute, moitié basse) : rien ne tombe sur la pliure horizontale. */
@media (vertical-viewport-segments: 2) {
  .hero-grid { grid-template-rows: env(viewport-segment-height 0 0, auto) auto; row-gap: calc(env(viewport-segment-top 0 1, 0px) - env(viewport-segment-bottom 0 0, 0px)); }
}

/* « Réduire les animations » : tout s'arrête sur une image fixe et lisible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .sk-photo { opacity: 0; } .sk-cut, .sk-new img { opacity: 1; } .sk-shelf .sk-new::before { opacity: 0; }
  .tr-after, .tr-after > div { transform: none; }
  .lk { opacity: 1; transform: translate(var(--x), 0) rotate(var(--r)); }
  .pc-b.b1, .ls-n { opacity: 1; }
  .how-dot, .how-target { transform: none; opacity: 1; }
  .how-tag { opacity: 1; }
  .how-lines path { stroke-dashoffset: 0; }
  .how-lines circle { opacity: 1; }
  .fl-pkt { opacity: 0; }
}
/* ─── Invitation d'un ami (/i/CODE → /<langue>/invite/) ─── */
.invite { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 8vw, 96px) 0 clamp(56px, 9vw, 110px); background: radial-gradient(60% 60% at 85% 30%, color-mix(in srgb, var(--apricot) 24%, transparent), transparent 70%), radial-gradient(50% 60% at 8% 95%, color-mix(in srgb, var(--butter) 28%, transparent), transparent 70%), var(--bg); }
/* Sombre : halo bleu de l'en-tête. L'abricot et le beurre sur le fond nuit viraient au brun olive (demande « sombre sans brun »). */
.dark .join, .dark .invite { background: radial-gradient(60% 70% at 85% 35%, color-mix(in srgb, var(--hero-glow) 22%, transparent), transparent 70%), radial-gradient(50% 60% at 10% 90%, color-mix(in srgb, var(--hero-glow) 10%, transparent), transparent 70%), var(--bg); }
.invite-grid { display: grid; gap: 28px; align-items: center; }
.invite-grid > * { min-width: 0; }
@media (min-width: 900px) { .invite-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 60px; } }
.invite h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); }
.inv-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 26px; padding: 18px 20px; border: 2.5px dashed var(--apricot); border-radius: 22px; background: var(--apricot-soft); max-width: 520px; }
.inv-code[hidden], .inv-bad[hidden] { display: none; }
.inv-l { flex-basis: 100%; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--apricot-text); }
.inv-v { font: 800 clamp(2.1rem, 10vw, 2.9rem)/1 var(--display); letter-spacing: .16em; color: var(--ink); }
.inv-copy { margin-inline-start: auto; min-height: 46px; padding: 0 20px; font-size: 1rem; background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.inv-copy.done { background: #BFE6C8; color: #1D1A15; }
.inv-bad { margin: 22px 0; padding: 14px 18px; border-radius: 16px; background: var(--card); color: var(--ink-soft); max-width: 520px; box-shadow: var(--elev); }
.inv-h { font-size: clamp(1.3rem, 4.6vw, 1.65rem); margin: 38px 0 4px; }
.inv-wait p { color: var(--ink-soft); max-width: 560px; }
.invite-visual img { width: min(340px, 80%); margin-inline: auto; filter: drop-shadow(0 18px 24px rgb(0 0 0 / .12)); }
@media (max-width: 899px) { .invite-visual { order: -1; } .invite-visual img { width: 140px; margin-inline: 0; } }

/* ─── Téléphone couché et petits écrans en paysage (25 octobre) : rien de plus haut que l'écran ; le héros passe en
   deux colonnes (texte à gauche, appareils à droite) ; mêmes proportions réelles, à l'échelle de la hauteur. ─── */
@media (orientation: landscape) and (max-height: 600px) {
  .hero { padding-top: 14px; padding-bottom: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text visual" "cta visual"; column-gap: clamp(20px, 4vw, 40px); row-gap: 0; align-items: end; }
  .hero-text { grid-area: text; } .hero-cta { grid-area: cta; align-self: start; }
  .hero-cta .cta-row { margin-top: 16px; }
  .trio { grid-area: visual; align-self: center; width: min(100%, calc((100svh - 96px) * 380 / 300)); }
  .hero h1 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
  .hero .lead { font-size: 1rem; }
  section { padding-block: clamp(40px, 7vw, 72px); }
  .how-photo { max-width: calc((100svh - 110px) * 760 / 1140); }
  .how-app { max-width: calc((100svh - 120px) * 78 / 163.4 + 8px); }
  .dv { --mm: min(1.5px, calc(var(--device-space) / 215.5), max(.1px, calc((100svh - 150px) / 281.6))); }
  .join-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; }
  .lock { width: calc((100svh - 90px) * 78 / 163.4); }
}

@media print { .top, .sheet, .suggest, footer .langs, .trio, .walker { display: none; } body { background: #fff; color: #000; } }

/* ─── Bascule clair / sombre (reprise de Smoke Bar) ─── */
/* Sans View Transitions : couleurs qui glissent, seulement pendant le changement. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, box-shadow .45s ease !important;
}
/* Avec View Transitions : le nouveau thème se propage en vague depuis le bouton. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.wave::view-transition-new(root) {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M190.2 100.0 L192.2 102.4 L192.5 104.8 L191.9 107.2 L191.3 109.6 L191.6 112.1 L192.7 114.7 L193.9 117.4 L194.2 120.0 L192.7 122.3 L189.5 124.0 L185.4 125.3 L181.6 126.5 L179.0 128.0 L177.8 129.9 L177.4 132.1 L176.9 134.2 L175.5 136.0 L173.2 137.3 L170.7 138.4 L169.0 139.9 L168.8 142.2 L169.9 145.4 L171.7 149.3 L173.0 153.0 L173.1 156.1 L172.0 158.3 L170.1 159.9 L168.2 161.4 L167.0 163.6 L166.4 166.4 L165.8 169.3 L164.4 171.6 L161.9 172.5 L158.3 172.0 L154.2 170.6 L150.4 169.4 L147.5 169.1 L145.4 169.9 L143.8 171.5 L142.1 172.9 L139.9 173.5 L137.3 173.2 L134.6 172.6 L132.4 172.8 L130.9 174.5 L129.9 177.8 L129.0 182.0 L127.9 185.8 L126.2 188.4 L124.0 189.5 L121.5 189.6 L119.1 189.8 L116.8 190.8 L114.7 192.7 L112.5 194.7 L110.1 195.8 L107.5 195.0 L104.8 192.5 L102.3 189.0 L100.0 185.8 L97.8 183.8 L95.6 183.3 L93.4 183.6 L91.2 183.7 L89.1 182.9 L87.2 181.1 L85.3 179.1 L83.4 178.0 L81.2 178.4 L78.4 180.5 L75.3 183.4 L72.1 185.8 L69.2 186.9 L66.8 186.5 L64.7 185.2 L62.6 183.9 L60.2 183.4 L57.4 183.6 L54.4 184.0 L51.9 183.4 L50.2 181.3 L49.5 177.7 L49.6 173.4 L49.6 169.4 L49.0 166.5 L47.5 164.8 L45.6 163.7 L43.7 162.5 L42.4 160.7 L41.9 158.1 L41.6 155.4 L40.8 153.3 L38.7 152.4 L35.2 152.5 L31.0 152.9 L27.0 153.0 L24.0 152.2 L22.3 150.5 L21.4 148.2 L20.5 145.9 L18.8 144.1 L16.4 142.6 L13.8 141.1 L12.0 139.2 L11.9 136.5 L13.5 133.2 L16.1 129.7 L18.4 126.5 L19.6 123.8 L19.5 121.6 L18.5 119.6 L17.7 117.5 L17.8 115.2 L18.9 112.8 L20.2 110.5 L20.7 108.3 L19.6 106.3 L16.7 104.4 L13.1 102.3 L9.8 100.0 L7.8 97.6 L7.5 95.2 L8.1 92.8 L8.7 90.4 L8.4 87.9 L7.3 85.3 L6.1 82.6 L5.8 80.0 L7.3 77.7 L10.5 76.0 L14.6 74.7 L18.4 73.5 L21.0 72.0 L22.2 70.1 L22.6 67.9 L23.1 65.8 L24.5 64.0 L26.8 62.7 L29.3 61.6 L31.0 60.1 L31.2 57.8 L30.1 54.6 L28.3 50.7 L27.0 47.0 L26.9 43.9 L28.0 41.7 L29.9 40.1 L31.8 38.6 L33.0 36.4 L33.6 33.6 L34.2 30.7 L35.6 28.4 L38.1 27.5 L41.7 28.0 L45.8 29.4 L49.6 30.6 L52.5 30.9 L54.6 30.1 L56.2 28.5 L57.9 27.1 L60.1 26.5 L62.7 26.8 L65.4 27.4 L67.6 27.2 L69.1 25.5 L70.1 22.2 L71.0 18.0 L72.1 14.2 L73.8 11.6 L76.0 10.5 L78.5 10.4 L80.9 10.2 L83.2 9.2 L85.3 7.3 L87.5 5.3 L89.9 4.2 L92.5 5.0 L95.2 7.5 L97.7 11.0 L100.0 14.2 L102.2 16.2 L104.4 16.7 L106.6 16.4 L108.8 16.3 L110.9 17.1 L112.8 18.9 L114.7 20.9 L116.6 22.0 L118.8 21.6 L121.6 19.5 L124.7 16.6 L127.9 14.2 L130.8 13.1 L133.2 13.5 L135.3 14.8 L137.4 16.1 L139.8 16.6 L142.6 16.4 L145.6 16.0 L148.1 16.6 L149.8 18.7 L150.5 22.3 L150.4 26.6 L150.4 30.6 L151.0 33.5 L152.5 35.2 L154.4 36.3 L156.3 37.5 L157.6 39.3 L158.1 41.9 L158.4 44.6 L159.2 46.7 L161.3 47.6 L164.8 47.5 L169.0 47.1 L173.0 47.0 L176.0 47.8 L177.7 49.5 L178.6 51.8 L179.5 54.1 L181.2 55.9 L183.6 57.4 L186.2 58.9 L188.0 60.8 L188.1 63.5 L186.5 66.8 L183.9 70.3 L181.6 73.5 L180.4 76.2 L180.5 78.4 L181.5 80.4 L182.3 82.5 L182.2 84.8 L181.1 87.2 L179.8 89.5 L179.3 91.7 L180.4 93.7 L183.3 95.6 L186.9 97.7Z'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M190.2 100.0 L192.2 102.4 L192.5 104.8 L191.9 107.2 L191.3 109.6 L191.6 112.1 L192.7 114.7 L193.9 117.4 L194.2 120.0 L192.7 122.3 L189.5 124.0 L185.4 125.3 L181.6 126.5 L179.0 128.0 L177.8 129.9 L177.4 132.1 L176.9 134.2 L175.5 136.0 L173.2 137.3 L170.7 138.4 L169.0 139.9 L168.8 142.2 L169.9 145.4 L171.7 149.3 L173.0 153.0 L173.1 156.1 L172.0 158.3 L170.1 159.9 L168.2 161.4 L167.0 163.6 L166.4 166.4 L165.8 169.3 L164.4 171.6 L161.9 172.5 L158.3 172.0 L154.2 170.6 L150.4 169.4 L147.5 169.1 L145.4 169.9 L143.8 171.5 L142.1 172.9 L139.9 173.5 L137.3 173.2 L134.6 172.6 L132.4 172.8 L130.9 174.5 L129.9 177.8 L129.0 182.0 L127.9 185.8 L126.2 188.4 L124.0 189.5 L121.5 189.6 L119.1 189.8 L116.8 190.8 L114.7 192.7 L112.5 194.7 L110.1 195.8 L107.5 195.0 L104.8 192.5 L102.3 189.0 L100.0 185.8 L97.8 183.8 L95.6 183.3 L93.4 183.6 L91.2 183.7 L89.1 182.9 L87.2 181.1 L85.3 179.1 L83.4 178.0 L81.2 178.4 L78.4 180.5 L75.3 183.4 L72.1 185.8 L69.2 186.9 L66.8 186.5 L64.7 185.2 L62.6 183.9 L60.2 183.4 L57.4 183.6 L54.4 184.0 L51.9 183.4 L50.2 181.3 L49.5 177.7 L49.6 173.4 L49.6 169.4 L49.0 166.5 L47.5 164.8 L45.6 163.7 L43.7 162.5 L42.4 160.7 L41.9 158.1 L41.6 155.4 L40.8 153.3 L38.7 152.4 L35.2 152.5 L31.0 152.9 L27.0 153.0 L24.0 152.2 L22.3 150.5 L21.4 148.2 L20.5 145.9 L18.8 144.1 L16.4 142.6 L13.8 141.1 L12.0 139.2 L11.9 136.5 L13.5 133.2 L16.1 129.7 L18.4 126.5 L19.6 123.8 L19.5 121.6 L18.5 119.6 L17.7 117.5 L17.8 115.2 L18.9 112.8 L20.2 110.5 L20.7 108.3 L19.6 106.3 L16.7 104.4 L13.1 102.3 L9.8 100.0 L7.8 97.6 L7.5 95.2 L8.1 92.8 L8.7 90.4 L8.4 87.9 L7.3 85.3 L6.1 82.6 L5.8 80.0 L7.3 77.7 L10.5 76.0 L14.6 74.7 L18.4 73.5 L21.0 72.0 L22.2 70.1 L22.6 67.9 L23.1 65.8 L24.5 64.0 L26.8 62.7 L29.3 61.6 L31.0 60.1 L31.2 57.8 L30.1 54.6 L28.3 50.7 L27.0 47.0 L26.9 43.9 L28.0 41.7 L29.9 40.1 L31.8 38.6 L33.0 36.4 L33.6 33.6 L34.2 30.7 L35.6 28.4 L38.1 27.5 L41.7 28.0 L45.8 29.4 L49.6 30.6 L52.5 30.9 L54.6 30.1 L56.2 28.5 L57.9 27.1 L60.1 26.5 L62.7 26.8 L65.4 27.4 L67.6 27.2 L69.1 25.5 L70.1 22.2 L71.0 18.0 L72.1 14.2 L73.8 11.6 L76.0 10.5 L78.5 10.4 L80.9 10.2 L83.2 9.2 L85.3 7.3 L87.5 5.3 L89.9 4.2 L92.5 5.0 L95.2 7.5 L97.7 11.0 L100.0 14.2 L102.2 16.2 L104.4 16.7 L106.6 16.4 L108.8 16.3 L110.9 17.1 L112.8 18.9 L114.7 20.9 L116.6 22.0 L118.8 21.6 L121.6 19.5 L124.7 16.6 L127.9 14.2 L130.8 13.1 L133.2 13.5 L135.3 14.8 L137.4 16.1 L139.8 16.6 L142.6 16.4 L145.6 16.0 L148.1 16.6 L149.8 18.7 L150.5 22.3 L150.4 26.6 L150.4 30.6 L151.0 33.5 L152.5 35.2 L154.4 36.3 L156.3 37.5 L157.6 39.3 L158.1 41.9 L158.4 44.6 L159.2 46.7 L161.3 47.6 L164.8 47.5 L169.0 47.1 L173.0 47.0 L176.0 47.8 L177.7 49.5 L178.6 51.8 L179.5 54.1 L181.2 55.9 L183.6 57.4 L186.2 58.9 L188.0 60.8 L188.1 63.5 L186.5 66.8 L183.9 70.3 L181.6 73.5 L180.4 76.2 L180.5 78.4 L181.5 80.4 L182.3 82.5 L182.2 84.8 L181.1 87.2 L179.8 89.5 L179.3 91.7 L180.4 93.7 L183.3 95.6 L186.9 97.7Z'/%3E%3C/svg%3E") no-repeat;
  animation: wave .9s cubic-bezier(.65, 0, .35, 1) both;
}
.wave::view-transition-old(root) { animation: waveOld .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes wave {
  from { -webkit-mask-size: 0 0; mask-size: 0 0; -webkit-mask-position: var(--wave-x) var(--wave-y); mask-position: var(--wave-x) var(--wave-y); }
  to {
    -webkit-mask-size: calc(var(--wave-r) * 2) calc(var(--wave-r) * 2); mask-size: calc(var(--wave-r) * 2) calc(var(--wave-r) * 2);
    -webkit-mask-position: calc(var(--wave-x) - var(--wave-r)) calc(var(--wave-y) - var(--wave-r));
    mask-position: calc(var(--wave-x) - var(--wave-r)) calc(var(--wave-y) - var(--wave-r));
  }
}
/* L'ancien thème s'assombrit légèrement sous la vague, pour donner de la profondeur. */
@keyframes waveOld { to { filter: brightness(.9); } }

/* Pichu se balade (balade du bas, coucou sur le bord, perché sur une carte) */
.walker { position: fixed; left: 0; top: 0; z-index: 35; width: 96px; height: 96px; pointer-events: none; opacity: 0; will-change: transform; }
.walker.abs { position: absolute; }
.walker.on { opacity: 1; }
@media (max-width: 600px) { .walker { width: 80px; height: 80px; } }
@media (min-width: 900px) { .walker { width: 116px; height: 116px; } }
.w-body { width: 100%; height: 100%; transform-origin: 50% 92%; pointer-events: none; }
.walker.on .w-body { pointer-events: auto; cursor: pointer; }
.w-body img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .16)); user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.w-bubble { position: absolute; bottom: 96%; left: 50%; width: max-content; max-width: 210px; transform: translateX(-50%) scale(.6); transform-origin: 50% 100%; opacity: 0; pointer-events: none; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; padding: 8px 12px; font: 700 14px/1.3 var(--display); text-align: center; box-shadow: 3px 3px 0 var(--ink); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.w-bubble.on { opacity: 1; transform: translateX(-50%) scale(1); }
.w-bubble::after { content: ""; position: absolute; left: calc(50% + var(--ax, 0px)); bottom: -8px; width: 12px; height: 12px; background: var(--card); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.walker.peek .w-bubble { left: auto; right: 70%; transform-origin: 100% 100%; transform: scale(.6); }
.walker.peek .w-bubble.on { transform: scale(1); }
.walker.peek .w-bubble::after { left: auto; right: 14px; transform: rotate(45deg); }
.w-fx { position: absolute; bottom: 70%; font-size: 18px; font-weight: 900; pointer-events: none; animation: fxUp var(--d, 1.2s) ease-out both; }
@keyframes fxUp { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -90px) scale(1.15) rotate(12deg); } }
.lang-open body, .menu-open .walker { overflow: hidden; }
.menu-open .walker, .lang-open .walker { display: none; }

.wl-count[hidden], .langpick[hidden] { display: none !important; }