/* CosmoBloc — site vitrine v3 */
@font-face{font-family:"Outfit";src:url("fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DSEG7";src:url("fonts/DSEG7Classic-BoldItalic.woff2") format("woff2");font-weight:400;font-style:normal;font-display:block}

:root{
  color-scheme:dark;
  --vide:#05060f;      /* fond */
  --coque:#0b1226;     /* panneaux */
  --bord:#22345c;      /* bords des panneaux */
  --trait:#7eb8ff;     /* trait des dessins, chiffres allumés */
  --etoile:#eef2ff;    /* texte */
  --brume:#9aa7c8;     /* texte secondaire */
  --fond-txt:#7c89ad;  /* mentions */
  --plasma:#a99bff;    /* action principale */
  --signal:#ff6b6b;    /* repos, coût */
  --or:#e8c26e;        /* badge Fondateur */
  --cout:#dfa494;      /* ce que coûte un abonnement : terre cuite éteinte, pas une alarme */
  --sans:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --seg:"DSEG7",ui-monospace,monospace;
  --doux:cubic-bezier(.22,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--vide);color:var(--etoile);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:750;letter-spacing:-.035em;text-wrap:balance}
:focus-visible{outline:2px solid var(--trait);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

#ciel{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main{position:relative;z-index:2}
.pied{position:relative;z-index:1}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
section{padding-block:clamp(96px,11vw,170px)}
h2{font-size:clamp(36px,4.6vw,62px);line-height:1.02}
.chapo{font-size:clamp(17px,1.35vw,20px);color:var(--brume);max-width:46ch;line-height:1.55;margin-top:18px}
/* étiquettes d'interface : uniquement là où l'appli les a */
.ui{font:500 11px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brume)}

/* ---------------------------------------------------------------- navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav.solide{background:rgba(5,6,15,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(34,52,92,.6)}
.marque img{height:58px;width:auto}   /* 23-10 logo atome : l orbite prend de la hauteur, le mot garde sa taille */
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{color:var(--brume);text-decoration:none;font-size:15px;transition:color .2s}
.nav ul a:hover{color:var(--etoile)}
/* sélecteur de langue : l'écusson brodé de l'autre langue (comme dans l'appli) */
/* l'écusson affiché est celui de la langue de la page ; un clic ouvre la liste des 5 autres (<details>, voir site.js) */
.langues{position:relative;flex:none}
.langue{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 4px;border-radius:999px;cursor:pointer;list-style:none;transition:background .2s}
.langue::-webkit-details-marker{display:none}
.langue img{width:32px;height:32px;border-radius:50%;transition:filter .2s}
.langue i{width:7px;height:7px;margin:0 6px 3px 2px;border-right:1.6px solid var(--brume);border-bottom:1.6px solid var(--brume);transform:rotate(45deg);transition:transform .2s}
.langue:hover{background:rgba(126,184,255,.08)}
.langue:hover img{filter:brightness(1.12)}
.langue:focus-visible{outline:2px solid var(--trait);outline-offset:2px}
.langues[open] .langue{background:rgba(126,184,255,.1)}
.langues[open] .langue i{transform:translateY(3px) rotate(225deg)}
.langue-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:230px;margin:0;padding:6px;list-style:none;
  background:var(--coque);border:1px solid var(--bord);border-radius:16px;box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 40px -20px rgba(126,184,255,.35)}
.langue-menu a{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 12px 6px 8px;border-radius:10px;color:var(--etoile);text-decoration:none;font-size:15px;white-space:nowrap}
.langue-menu a:hover,.langue-menu a:focus-visible{background:rgba(126,184,255,.12);outline:none}
.langue-menu a:focus-visible{box-shadow:inset 0 0 0 2px var(--trait)}
.langue-menu img{width:28px;height:28px;border-radius:50%;flex:none}
/* .nav ul (liens de l'en-tête) ne s'applique pas à la liste des langues, ni son masquage sur téléphone */
.nav .langue-menu{display:block;gap:0;margin:0}
.nav .langue-menu a{color:var(--etoile);font-size:15px}
.langues:not([open]) .langue-menu{display:none}

/* ---------------------------------------------------------------- boutons */
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 22px;border-radius:14px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .15s,background .2s,border-color .2s}
.btn:active{transform:scale(.98)}
.btn-play{background:var(--etoile);color:var(--vide);padding-left:18px}
.btn-play svg{width:22px;height:22px}
.btn-play>span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.btn-play small{font-size:11px;font-weight:500;opacity:.7}
.btn-play[aria-disabled="true"]{cursor:default}
.btn-ghost{border:1px solid var(--bord);color:var(--etoile)}
.btn-ghost:hover{border-color:var(--trait)}

/* ---------------------------------------------------------------- héros */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:92px 48px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 50% 45% at 78% 52%,rgba(126,184,255,.10),transparent 70%),radial-gradient(ellipse 40% 40% at 12% 20%,rgba(169,155,255,.07),transparent 70%)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(40px,7vw,110px);align-items:center;width:100%}
.hero h1{font-size:clamp(52px,7.2vw,104px);line-height:.94;font-weight:800;letter-spacing:-.045em}
.hero .chapo{max-width:34ch;margin-top:26px}
.note{margin-top:18px;font-size:15px;color:var(--fond-txt)}
.hero-demo{position:relative}

/* ciel des séries */
.ciel-perso{height:62px;position:relative;margin:0 6px}
.ciel-perso svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ciel-perso .lien{stroke:var(--trait);stroke-width:1;stroke-opacity:.55;fill:none;transition:stroke-dashoffset .7s var(--doux)}
.ciel-perso .place{fill:rgba(238,242,255,.3);transition:fill .3s}
.ciel-perso .halo{fill:url(#halo-etoile);opacity:0;transition:opacity .5s}
.ciel-perso .coeur{fill:#fff;opacity:0;transition:opacity .3s}
.ciel-perso .allumee .halo{opacity:1}
.ciel-perso .allumee .coeur{opacity:1}
.ciel-perso .allumee .place{fill:transparent}
.etincelle{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 4px rgba(126,184,255,.8),0 0 30px 8px rgba(169,155,255,.35);pointer-events:none;z-index:5}
.ciel-lab{font-size:13px;color:var(--brume);margin:2px 6px 10px}

/* panneau de saisie, réplique de l'appli */
.panneau{position:relative;z-index:2;background:linear-gradient(180deg,#0d1531,#0a1124);border:1px solid var(--bord);border-radius:26px;padding:16px 16px 10px;box-shadow:0 50px 100px -50px rgba(126,184,255,.4),inset 0 1px 0 rgba(255,255,255,.04)}
.pan-tete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.pan-exos{display:flex;gap:6px}
.exo-mini{width:46px;height:46px;padding:5px;border-radius:12px;border:1px solid var(--bord);background:#080d1d;cursor:pointer;transition:border-color .2s,background .2s}
.exo-mini img{width:100%;height:100%;object-fit:contain;opacity:.55;transition:opacity .2s}
.exo-mini[aria-pressed="true"]{border-color:var(--trait);background:rgba(126,184,255,.08)}
.exo-mini[aria-pressed="true"] img,.exo-mini:hover img{opacity:1}
.pan-titre{display:flex;flex-direction:column;gap:3px;min-width:0}
.pan-titre strong{font-size:18px;font-weight:700;line-height:1.15;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pan-serie b{font-weight:500;color:var(--etoile)}

.figure{position:relative;display:block;width:100%;aspect-ratio:2/1;margin-top:12px;padding:0;border-radius:18px;border:1px solid rgba(126,184,255,.12);
  background:radial-gradient(ellipse 60% 70% at 50% 60%,rgba(126,184,255,.09),transparent 70%),#070b1a;cursor:pointer;overflow:hidden;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s,box-shadow .2s}
.figure .pose{position:absolute;left:5%;top:3%;width:90%;height:94%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 5px rgba(126,184,255,.4));transition:opacity .14s linear}
.figure .tension{opacity:0}
.figure.pousse{border-color:rgba(126,184,255,.5);box-shadow:inset 0 0 50px rgba(126,184,255,.12)}
.figure.pousse .tension{opacity:1}
.figure.pousse .relax{opacity:0}
.figure:hover{border-color:rgba(126,184,255,.3)}
.consigne{min-height:3em;margin:6px 4px 4px;font-size:14px;line-height:1.5;color:var(--brume);text-align:center;display:flex;align-items:center;justify-content:center}

.champs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}   /* minmax : « WIEDERHOLUNGEN » ne pousse plus la colonne hors du panneau */
.champ>.ui{max-width:100%;text-align:center;overflow-wrap:anywhere}
.champ{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 14px;border-radius:16px;border:1px solid #2a3f6b;background:rgba(8,13,29,.9);box-shadow:inset 0 0 26px rgba(126,184,255,.05)}
.champ.secoue{animation:secoue .4s}
@keyframes secoue{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.lcd-ligne{display:flex;align-items:center;gap:6px}
.pas{width:30px;height:30px;border-radius:50%;border:1px solid var(--bord);background:transparent;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .2s}
.pas:hover{border-color:var(--trait)}
.lcd{position:relative;display:inline-block;font:400 40px/1 var(--seg);color:var(--trait);white-space:pre}
.lcd .fantome{color:rgba(126,184,255,.07);transition:color .25s}
.lcd .val{position:absolute;right:0;top:0;text-shadow:0 0 12px rgba(126,184,255,.6);transition:opacity .25s}
.lcd.petit{font-size:22px}
.lcd.signal{color:var(--signal)}
.lcd.signal .fantome{color:rgba(255,107,107,.08)}
.lcd.signal .val{text-shadow:0 0 10px rgba(255,107,107,.55)}
/* 21-10 : afficheur de l'abonnement du calcul — bleu tant qu'il coûte moins que CosmoBloc, puis vire doucement au rouge
   (--lcd-rgb posé par site.js à chaque image, suit le chiffre qui défile) */
.lcd.teinte{--lcd-rgb:126 184 255;color:rgb(var(--lcd-rgb))}
.lcd.teinte .fantome{color:rgb(var(--lcd-rgb) / .08)}
.lcd.teinte .val{text-shadow:0 0 11px rgb(var(--lcd-rgb) / .58)}
.lcd.tic .val{animation:tic .25s}
@keyframes tic{0%{color:#fff;text-shadow:0 0 18px #fff}100%{}}
.panneau.test .lcd .fantome{color:rgba(126,184,255,.85)}
.panneau.test .lcd.signal .fantome{color:rgba(255,107,107,.85)}
.panneau.test .lcd .val{opacity:0}

.rpe{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:4px;margin-top:12px;padding:0 4px}
.rpe-val{display:flex;align-items:baseline;gap:4px}
.rpe-val small{font-size:12px;color:var(--brume)}
.rpe input{grid-column:1/-1;width:100%;margin:6px 0 0;height:22px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:77.8%}
.rpe input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--trait) var(--p),#22345c var(--p))}
.rpe input::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--trait) var(--p),#22345c var(--p))}
.rpe input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:var(--etoile);box-shadow:0 0 0 4px rgba(126,184,255,.2),0 0 14px rgba(126,184,255,.7)}
.rpe input::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--etoile);box-shadow:0 0 0 4px rgba(126,184,255,.2),0 0 14px rgba(126,184,255,.7)}
.graduation{grid-column:1/-1;display:flex;justify-content:space-between;font:500 10px var(--ui);color:var(--fond-txt)}
.graduation i{font-style:normal}

.valider{margin-top:12px;width:100%;height:52px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;border:1px solid rgba(126,184,255,.55);
  background:linear-gradient(180deg,rgba(126,184,255,.13),rgba(126,184,255,.04));font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s,box-shadow .2s,transform .12s}
.valider svg{width:21px;height:21px;color:var(--trait)}
.valider:hover{background:linear-gradient(180deg,rgba(126,184,255,.22),rgba(126,184,255,.07));box-shadow:0 0 30px -6px rgba(126,184,255,.6)}
.valider:active{transform:scale(.985)}
.pan-pied{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:30px;margin-top:6px;padding:0 4px}
.derniere{font-size:14px;font-style:italic;color:var(--brume)}
.puce-rpe{white-space:nowrap;font:500 11px var(--ui);font-style:normal;color:var(--plasma);border:1px solid rgba(169,155,255,.5);border-radius:6px;padding:1px 6px;margin-left:4px}
.repos{display:flex;align-items:center;gap:8px;margin-left:auto}
.repos>span:first-child{font:500 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}

.astro-hero{position:absolute;left:-190px;bottom:-30px;width:200px;z-index:1;pointer-events:none;--r:-6deg;transform:rotate(var(--r))}

/* ---------------------------------------------------------------- téléphone */
.tel{border-radius:44px;padding:9px;background:#0a0e1d;border:1px solid #2a3550;box-shadow:0 50px 100px -40px rgba(0,0,0,.85),0 0 90px -30px rgba(126,184,255,.3)}
.tel img{border-radius:35px;width:100%}

/* ---------------------------------------------------------------- visite */
.visite h2{max-width:16ch}
.visite-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(40px,7vw,110px);margin-top:20px}
.visite-etapes{border-left:1px solid var(--bord)}
.etape{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding-left:clamp(24px,3vw,40px);position:relative;opacity:.32;transition:opacity .45s}
.etape::before{content:"";position:absolute;left:-1px;top:50%;width:2px;height:0;transform:translateY(-50%);background:var(--trait);box-shadow:0 0 14px var(--trait);transition:height .5s var(--doux)}
.etape.actif{opacity:1}
.etape.actif::before{height:140px}
.etape h3{font-size:clamp(30px,3.4vw,46px);line-height:1.05}
.etape p{margin-top:16px;color:var(--brume);font-size:18px;max-width:40ch}
.tel-inline{display:none}
/* étape « aliments » : plus haute, son texte reste au milieu de l'écran pendant que l'orbite tourne (le défilement s'y attarde) */
.etape-aliments{min-height:165vh;justify-content:flex-start;padding-block:calc(50vh - 120px)}
.etape-aliments::before{display:none}
.etape-colle{position:sticky;top:calc(50vh - 120px)}
.etape-colle::before{content:"";position:absolute;left:calc(-1px - clamp(24px,3vw,40px));top:50%;width:2px;height:0;transform:translateY(-50%);background:var(--trait);box-shadow:0 0 14px var(--trait);transition:height .5s var(--doux)}
.etape-aliments.actif .etape-colle::before{height:140px}
.visite-colle{position:sticky;top:max(90px,calc(50vh - 380px));display:flex;justify-content:center}
.tel-visite{width:min(360px,calc((100vh - 150px) * .514))}
.tel-visite .defile{position:relative;aspect-ratio:946/1840;overflow:hidden;border-radius:35px}
.tel-visite .defile img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;transition:transform .8s var(--doux)}
/* orbite d'aliments autour du téléphone des recettes : placée par orbites() (site.js), tournée par le défilement ;
   devant le téléphone (z 2) sur la moitié basse de l'ellipse, derrière (z 0), plus petite et plus sombre, sur la moitié haute */
.tel-orbite{position:relative;isolation:isolate}
.tel-orbite>.tel{position:relative;z-index:1}
.orbite-ali{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.orbite-ali img{position:absolute;left:0;top:0;max-width:none;width:76px;height:76px;margin:-38px 0 0 -38px;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 6px 10px rgba(5,6,15,.6))}
.tel-orbite-inline{display:none}
/* médaillons de recettes : la photo dans un cadre rond à liseré fin, pour qu'on lise « recette » et pas « aliment détouré » */
.orbite-rec img{border-radius:50%;border:2px solid var(--trait);background:var(--coque);box-shadow:0 8px 18px rgba(5,6,15,.7),0 0 14px rgba(126,184,255,.25);filter:none;width:72px;height:72px;margin:-36px 0 0 -36px}

/* ---------------------------------------------------------------- rangs */
.rangs-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px)}
.rangs-texte{position:sticky;top:18vh;align-self:start}
.astro-rangs{width:190px;margin-top:40px;--r:5deg;transform:rotate(var(--r))}
.carte-rangs{position:relative;padding-block:10px}
.carte-rangs ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(34px,4.5vw,60px);position:relative;z-index:1}
.trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.trace path{fill:none;stroke-width:1.5;stroke-linejoin:round}
.trace-fond{stroke:rgba(126,184,255,.14)}
.trace-lumiere{stroke:var(--trait);filter:drop-shadow(0 0 4px rgba(126,184,255,.9))}
.trace-points circle{fill:rgba(238,242,255,.7)}
.rang{position:relative;height:100px}
.medaillon{position:absolute;left:var(--x);top:0;width:100px;height:100px;transform:translateX(-50%) scale(.86);filter:grayscale(1) brightness(.45);opacity:.6;transition:filter .7s,opacity .7s,transform .7s var(--doux)}
.medaillon img{width:100%;height:100%}
.rang-txt{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;opacity:.4;transition:opacity .7s}
.rang.d .rang-txt{left:calc(var(--x) + 66px)}
.rang.g .rang-txt{right:calc(100% - var(--x) + 66px);text-align:right;align-items:flex-end}
.rang-txt small{text-transform:none;letter-spacing:.06em}
.rang-txt b{font-size:clamp(18px,1.7vw,22px);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.rang.atteint .medaillon{filter:drop-shadow(0 0 18px rgba(126,184,255,.45));opacity:1;transform:translateX(-50%) scale(1)}
.rang.atteint .rang-txt{opacity:1}
.rang.ellipse{height:24px}
.rang.ellipse .medaillon{width:8px;height:8px;top:8px;border-radius:50%;background:var(--trait);filter:none}
.rang.ellipse .rang-txt{left:calc(var(--x) + 22px)}
.rang.mystere .medaillon{filter:none}
.mystere svg{width:100%;height:100%}
.mystere path{fill:rgba(126,184,255,.04);stroke:rgba(126,184,255,.6);stroke-width:1.5;stroke-dasharray:5 5}
.mystere text{font:800 40px var(--sans);fill:var(--trait)}

/* ---------------------------------------------------------------- confidentialité */
.confiance h2{max-width:17ch}
.registre{margin-top:56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:1px solid var(--bord);border-radius:28px;overflow:hidden;background:rgba(11,18,38,.55)}
.registre h3{font-size:20px;font-weight:650;letter-spacing:-.01em}
.reste{padding:clamp(24px,3.4vw,40px)}
.reste ul{list-style:none;margin:18px 0 0;padding:0}
.reste li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(34,52,92,.6);font-size:18px}
.reste li:last-child{border-bottom:0}
.reste li svg{width:20px;height:20px;flex:none;color:rgba(154,167,200,.35);transition:color .35s}
.registre.on .reste li svg{color:var(--trait)}
.sort{position:relative;padding:clamp(24px,3.4vw,40px);border-left:1px solid var(--bord);background:rgba(126,184,255,.035);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
/* astronaute au scanner : son faisceau descend vers le code-barres, il reste à droite, hors du texte */
.astro-scan{position:absolute;right:clamp(14px,2.6vw,36px);top:clamp(12px,1.8vw,26px);width:116px;z-index:1;pointer-events:none;--r:3deg;transform:rotate(var(--r))}
.code{margin:6px 0 0;padding:16px 18px 12px;background:var(--etoile);border-radius:10px;transition:opacity .4s,transform .4s var(--doux)}
.ean{width:210px;display:block;fill:#05060f}
.ean text{font:500 8.2px var(--ui);letter-spacing:.5px}
.code{position:relative;border:0;cursor:pointer;overflow:hidden;display:block}
.code::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--signal);box-shadow:0 0 10px 2px rgba(255,107,107,.7);opacity:0}
.code.scanne::after{animation:laser .9s ease-in-out}
@keyframes laser{0%{opacity:0;transform:translateY(-32px)}15%{opacity:1}50%{transform:translateY(26px)}85%{opacity:1}100%{opacity:0;transform:translateY(-32px)}}
.code:hover{transform:translateY(-2px)}
.registre.on .code{opacity:.16;transform:scale(.96)}
.envoi{font:500 13px/1.5 var(--ui);color:var(--fond-txt);min-height:3em;margin-top:-8px}
.envoi.ok{color:var(--trait)}
.envoi.ko{color:var(--signal)}
.sort-txt{font-size:17px;color:var(--brume);max-width:36ch;min-height:5.2em}
.registre.on .sort-txt{color:var(--etoile)}
/* mode avion : l'entrée de la section ; l'activer éteint tout ce qui « sort », le reste continue */
.avion{display:flex;align-items:center;gap:clamp(18px,3.2vw,40px);margin-top:48px;padding:clamp(18px,2.8vw,30px);border:1px solid var(--bord);border-radius:28px;background:rgba(11,18,38,.55);transition:border-color .4s,box-shadow .4s,background .4s}
.avion-zone.on .avion{border-color:rgba(126,184,255,.7);background:rgba(126,184,255,.06);box-shadow:0 0 0 1px rgba(126,184,255,.25),0 30px 90px -40px rgba(126,184,255,.65)}
.avion-txt h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.avion-txt p{margin-top:8px;color:var(--brume);max-width:58ch}
.bascule{flex:none;display:flex;align-items:center;gap:18px;padding:12px 14px 12px 12px;border-radius:999px;border:1px solid var(--bord);background:var(--coque);color:var(--etoile);cursor:pointer;font:inherit;text-align:left;transition:border-color .3s,box-shadow .3s}
.bascule:hover{border-color:rgba(126,184,255,.6)}
.bascule:focus-visible{outline:2px solid var(--trait);outline-offset:3px}
.bascule .icone{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(126,184,255,.08);color:var(--brume);transition:background .35s,color .35s}
.bascule .icone svg{width:32px;height:32px;transform:rotate(0);transition:transform .5s var(--doux)}
.bascule .lib{display:flex;flex-direction:column;gap:2px;min-width:9ch}
.bascule .lib b{font-size:20px;font-weight:650;line-height:1.2}
.bascule .etat{font:500 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--brume)}
.bascule .piste{width:86px;height:46px;border-radius:23px;background:#22345c;position:relative;transition:background .3s,box-shadow .3s}
.bascule .rond{position:absolute;left:4px;top:4px;width:38px;height:38px;border-radius:50%;background:var(--etoile);box-shadow:0 2px 8px rgba(5,6,15,.5);transition:transform .35s var(--doux)}
.bascule[aria-pressed="true"]{border-color:var(--trait);box-shadow:0 0 30px -8px rgba(126,184,255,.7)}
.bascule[aria-pressed="true"] .icone{background:var(--trait);color:var(--vide)}
.bascule[aria-pressed="true"] .icone svg{transform:rotate(45deg)}
.bascule[aria-pressed="true"] .etat{color:var(--trait)}
.bascule[aria-pressed="true"] .piste{background:var(--trait);box-shadow:0 0 16px rgba(126,184,255,.6)}
.bascule[aria-pressed="true"] .rond{transform:translateX(40px)}
.avion + .registre{margin-top:18px}
/* registre en mode avion : ce qui reste s'allume, ce qui sort s'éteint et son titre est barré */
.reste,.sort{transition:background .4s}
.registre.on .reste{background:rgba(126,184,255,.05)}
.registre.on .sort{background:rgba(5,6,15,.45)}
.registre.on .sort h3{color:var(--fond-txt);text-decoration:line-through;text-decoration-color:var(--signal);text-decoration-thickness:2px}

/* ---------------------------------------------------------------- prix */
.prix-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,90px);align-items:start}
.calcul{margin-top:48px;padding-top:30px;border-top:1px solid var(--bord)}
.calcul h3{font-size:24px;letter-spacing:-.02em}
.calcul>p{color:var(--brume);margin-top:6px}
/* 20-10-2026 — « Fais le calcul » en compteur : règle de 60 mois, deux afficheurs à segments, une case par prélèvement */
.regle{margin-top:22px;display:grid;gap:10px}
.regle-lab{font-size:15px;color:var(--brume)}
.regle-lab b{font:400 22px/1 var(--seg);color:var(--etoile);margin-right:4px;font-variant-numeric:tabular-nums}
.regle input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;--p:59.3%}
.regle input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--signal) 0 var(--p),rgba(34,52,92,.75) var(--p) 100%),repeating-linear-gradient(90deg,transparent 0 calc(100%/5 - 1px),rgba(238,242,255,.18) calc(100%/5 - 1px) calc(100%/5))}
.regle input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:rgba(34,52,92,.75)}
.regle input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--signal)}
.regle input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;background:var(--etoile);border:3px solid var(--vide);box-shadow:0 0 0 1px var(--bord),0 0 14px rgba(255,107,107,.45)}
.regle input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--etoile);border:3px solid var(--vide);box-shadow:0 0 0 1px var(--bord)}
.regle input[type=range]:focus-visible{outline:2px solid var(--trait);outline-offset:4px;border-radius:6px}
.regle .ans{margin-top:0}
.compteurs{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;margin-top:22px}
.cpt{min-width:0;padding:16px 16px 14px;border:1px solid var(--bord);border-radius:18px;background:rgba(11,18,38,.55);display:grid;gap:10px;align-content:start}
.cpt-cb{border-color:rgba(126,184,255,.32)}
.cpt-t{margin:0;font-size:14px;color:var(--brume)}
.cpt-v{margin:0;display:flex;align-items:baseline;gap:8px}
.cpt-v .lcd{font-size:clamp(28px,3.4vw,40px)}
.cpt-v{min-width:0}
.lcd-long .cpt-v .lcd{font-size:clamp(20px,2.3vw,30px)}
.lcd-long .cpt-dev{font-size:15px}
.cpt-dev{font-weight:700;font-size:18px;color:var(--brume)}
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cases{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.cases i{aspect-ratio:1;border-radius:3px;background:rgba(34,52,92,.55);transition:background-color .25s,box-shadow .25s}
.cases i.on{background:rgba(255,107,107,.78);box-shadow:0 0 6px rgba(255,107,107,.35)}
.cases-cb{grid-template-columns:repeat(4,minmax(0,1fr))}
.cases-cb i.on{background:var(--trait);box-shadow:0 0 10px rgba(126,184,255,.55)}
@media (max-width:640px){.compteurs{grid-template-columns:minmax(0,1fr)}.cases-cb{grid-template-columns:repeat(12,minmax(0,1fr))}}
/* la pile d'argent du calculateur (pièces de 2 € ou billets selon la monnaie) et le seul achat */
canvas.calc-pile{display:block;width:100%;height:280px}
@media (max-width:640px){canvas.calc-pile{height:260px}}
@media (prefers-reduced-motion:reduce){.cases i{transition:none}}
.ans{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.ans button{padding:8px 14px;border-radius:10px;border:1px solid var(--bord);background:transparent;color:var(--brume);font-size:15px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.ans button:hover{color:var(--etoile)}
.ans button[aria-pressed="true"]{color:var(--etoile);border-color:var(--trait);background:rgba(126,184,255,.08)}
.barres{display:grid;gap:14px;margin-top:24px}
.barre-l{display:grid;grid-template-columns:190px minmax(0,1fr) 112px;gap:14px;align-items:center}
.barre-l span{font-size:15px;color:var(--brume)}
.barre{height:10px;border-radius:5px;background:rgba(34,52,92,.55);overflow:hidden}
.barre i{display:block;height:100%;border-radius:5px;transition:width .6s var(--doux)}
.barre.abo i{background:var(--signal)}
.barre.cb i{background:var(--trait);box-shadow:0 0 10px var(--trait)}
.barre-l strong{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.eco{margin-top:20px;font-size:19px;color:var(--brume)}
.eco strong{color:var(--etoile);font-weight:800;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.02em;margin-right:4px}
.offre{position:relative;border:1px solid rgba(126,184,255,.35);border-radius:28px;padding:clamp(24px,3vw,36px);background:linear-gradient(180deg,#0d1531,#090f22);box-shadow:0 50px 110px -60px rgba(169,155,255,.55)}
/* astronaute pouce levé, posé sur le coin de la carte, à droite du prix */
.astro-pouce{position:absolute;right:22px;top:-84px;width:96px;pointer-events:none;--r:6deg;transform:rotate(var(--r))}
.offre-lab{color:var(--plasma);font-size:15px;font-weight:500}
.montant{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-top:4px;padding-right:96px}   /* place pour l'astronaute posé sur le coin ; « R$ 54,90 » est plus long que « 9,99 € » */
.montant strong{font-size:clamp(64px,7vw,92px);font-weight:800;letter-spacing:-.045em;line-height:1}
.montant span{color:var(--brume);font-size:18px}
.montant strong.long{font-size:clamp(52px,5.4vw,74px)}   /* « R$ 54,90 » : plus long, un cran plus petit */
.apres{color:var(--brume);margin-top:8px}
.taxe{color:var(--fond-txt);font-size:13px;margin-top:4px}   /* en-US : prix hors sales tax */
.fondateur{display:flex;align-items:flex-start;gap:16px;margin-top:22px;padding:16px;border-radius:16px;border:1px solid rgba(232,194,110,.3);background:rgba(232,194,110,.06);font-size:15px;color:var(--brume);line-height:1.45}
.fondateur[hidden]{display:none}
/* 20-10-2026 : la vraie médaille de l'appli, et ce que le badge donne */
.fondateur img{width:72px;height:72px;flex:none;border-radius:50%;box-shadow:0 0 26px rgba(232,194,110,.28)}
.fondateur > div{min-width:0}
.fondateur p{margin:0}
.fondateur b{color:var(--etoile);font-weight:600}
.fondateur ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.fondateur li{position:relative;padding-left:18px;font-size:14px}
.fondateur li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--or)}
@media (max-width:420px){.fondateur img{width:56px;height:56px}}
.inclus-h{margin-top:22px;font-size:15px;font-weight:600;color:var(--etoile)}
.inclus{list-style:none;margin:8px 0 24px;padding:0}
.inclus li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid rgba(34,52,92,.6)}
.inclus li::before{content:"";position:absolute;left:3px;top:17px;width:12px;height:6px;border-left:2px solid var(--trait);border-bottom:2px solid var(--trait);transform:rotate(-45deg)}
.btn-play.large{width:100%}
.fin{text-align:center;font-size:13px;color:var(--fond-txt);margin-top:12px}

/* ---------------------------------------------------------------- FAQ */
.faq-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,90px);align-items:start}
.faq-tete{position:sticky;top:120px}
.astro-idee{display:block;width:120px;margin:40px 0 0 10px;pointer-events:none;--r:-6deg;transform:rotate(var(--r))}
.faq-liste{border-top:1px solid var(--bord)}
.faq details{border-bottom:1px solid var(--bord)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 44px 22px 0;font-size:19px;font-weight:600;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:absolute;right:6px;top:50%;width:16px;height:16px;margin-top:-8px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:1px;background:var(--trait);transition:transform .3s var(--doux)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{color:var(--brume);padding:0 44px 24px 0;max-width:62ch}
.faq details[open] p{animation:ouvre .35s var(--doux)}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}}

/* ---------------------------------------------------------------- final + pied */
.final-grille{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center}
.astro-final{width:clamp(150px,18vw,230px);--r:-5deg;transform:rotate(var(--r))}
.final h2{font-size:clamp(40px,5.6vw,76px);line-height:1}
.rappel{margin-top:22px;font-size:17px;color:var(--etoile);max-width:46ch;padding-left:16px;border-left:2px solid var(--trait)}
.pied{border-top:1px solid rgba(34,52,92,.7);padding-top:40px;padding-bottom:max(50px,env(safe-area-inset-bottom,0px))}
.pied .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;gap:20px 36px}   /* pied centré, accueil et pages légales */
.pied-marque img{height:50px;width:auto}
.pied nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px}
.pied nav a{color:var(--brume);font-size:14px;text-decoration:none}
.pied nav a:hover{color:var(--etoile)}
.pied p{width:100%;font-size:13px;color:var(--fond-txt)}


/* ---------------------------------------------------------------- décor */
/* orbite autour du panneau, en écho à l'anneau du logo */
.orbite{position:absolute;left:-22%;width:144%;top:52%;height:auto;transform:translateY(-50%) rotate(-13deg);z-index:0;pointer-events:none;overflow:visible}
.orbite .lune{fill:#eef2ff;filter:drop-shadow(0 0 6px rgba(126,184,255,.9))}
/* galaxie derrière la carte des rangs, comme dans l'appli */
.galaxie{position:absolute;left:-14%;top:-4%;width:128%;height:108%;z-index:0;pointer-events:none;opacity:.35;transition:opacity .6s;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 45%,transparent 100%)}
/* planète : le pied de page se pose dessus */
.final{padding-top:clamp(150px,15vw,240px);padding-bottom:clamp(90px,10vw,160px)}   /* 21-10 (Chris : « descends un peu plus ») : le bloc glisse vers l horizon de la planète */
.pied.sur-planete{border-top:0;padding-top:60px}
.planete-cadre{position:absolute;left:0;right:0;top:-440px;bottom:0;overflow:hidden;pointer-events:none;z-index:-1}
/* 20-10-2026 — la vraie planète (image ChatGPT « Aube sur l'horizon », img/planete-pied.webp, 3:2) à la place du dégradé.
   L'horizon est à 52,9 % de la hauteur de l'image au centre : il tombe à --py du haut du cadre, comme l'ancien bord. */
.planete{--pw:max(100vw,1100px);--py:240px;position:absolute;left:50%;width:var(--pw);aspect-ratio:3/2;top:calc(var(--py) - var(--pw) * .3527);transform:translateX(-50%);
  background:url("img/planete-pied.webp") center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 88%,transparent 100%)}


/* ---------------------------------------------------------------- décollage : traversée en profondeur */
.decollage{height:360vh;padding:0;position:relative}
.dec-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.dec-scene>*{position:absolute;left:50%;top:50%;pointer-events:none}
.dec-planete,.dec-med,.dec-roc,.dec-astro,.dec-ligne,.dec-eclat{will-change:transform,opacity}
/* nébuleuse (decor-nebuleuse.webp) : un seul calque lointain, cover ; le cadre fixe estompe ses bords haut et bas,
   seule l'image bouge (échelle 1 → 1,4 et léger glissement, voir decollage()) */
.dec-neb{left:0;top:0;width:100%;height:100%;margin:0;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(transparent,#000 16%,#000 84%,transparent)}
.dec-neb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;will-change:transform}
/* planète = logo atome (decor-planete.webp, decollage-atome 23-10) : origine des transformations = trou du disque (50,76 % ; 49,56 %),
   rayon 4,51 % de la largeur ; l'image est plus grande qu'avant (le disque n'en occupe plus que 37 %) */
.dec-planete{--t:min(96vmin,900px);width:var(--t);height:var(--t);margin:calc(var(--t) * -.4956) 0 0 calc(var(--t) * -.5076);transform-origin:50.76% 49.56%;opacity:0}
.dec-planete img{width:100%;height:100%;filter:drop-shadow(0 0 40px rgba(126,184,255,.35))}
/* ombre propre : masquée par la forme du logo, la lumière reste fixe (en haut à gauche) */
.dec-ombre{position:absolute;inset:0;-webkit-mask:url("img/decor-planete.webp") center/100% 100% no-repeat;mask:url("img/decor-planete.webp") center/100% 100% no-repeat;overflow:hidden}
.dec-ombre i{position:absolute;inset:-30%;transform-origin:50% 50%;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 22%,rgba(5,6,15,0) 40%,rgba(5,6,15,.62) 74%,rgba(5,6,15,.85) 100%)}
.dec-champ{left:0;top:0;width:100%;height:100%}
/* plongée finale : un seul calque plein écran qui dessine le trou du disque à n'importe quelle taille,
   au lieu d'agrandir l'image 35 fois (ce qui faisait disparaître des éléments) */
.dec-trou{left:0;top:0;width:100%;height:100%;margin:0;opacity:0;--r:100px;
  background:
   radial-gradient(circle at 50% 50%,transparent 0 var(--r),#5f93e6 var(--r) calc(var(--r)*1.06),transparent calc(var(--r)*1.06) calc(var(--r)*2.16),#cfe2ff calc(var(--r)*2.16) calc(var(--r)*2.19),#2f6fd3 calc(var(--r)*2.19) calc(var(--r)*2.30),transparent calc(var(--r)*2.30)),
   radial-gradient(circle at 30% 22%,rgba(255,255,255,.16),rgba(5,6,15,0) 35%,rgba(5,6,15,.55) 100%),
   linear-gradient(100deg,#8fbaff,#d6e8ff 45%,#6fb2fb);
  /* le calque s'arrête au bord du disque (4,16 R) : l'espace autour reste visible pendant le passage */
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px) calc(var(--r)*4.10),transparent calc(var(--r)*4.18));mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px) calc(var(--r)*4.10),transparent calc(var(--r)*4.18))}
.dec-eclat{width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(238,242,255,.55),rgba(126,184,255,.25) 30%,rgba(169,155,255,.08) 60%,transparent)}
.dec-ligne .mot{display:inline-block}
.dec-med{width:120px;height:120px;margin:-60px 0 0 -60px;opacity:0}
/* rocs (roc-1 … roc-6) : même logique que les médaillons, étalés sur toute la traversée */
.dec-roc{width:150px;height:150px;margin:-75px 0 0 -75px;object-fit:contain;opacity:0}
/* astronaute en vol (decor-astro-vol.webp, 1278 × 1049) */
.dec-astro{width:300px;height:auto;margin:-123px 0 0 -150px;opacity:0}
.dec-ligne{width:min(92vw,15ch);transform:translate(-50%,-50%);margin:0;text-align:center;font-size:clamp(40px,7.4vw,112px);font-weight:800;line-height:1;letter-spacing:-.045em;text-wrap:balance;opacity:0;
  text-shadow:0 6px 50px rgba(5,6,15,.85),0 0 2px rgba(5,6,15,.6)}
@media (max-width:700px){ .decollage{height:300vh} .dec-med{width:84px;height:84px;margin:-42px 0 0 -42px} .dec-roc{width:96px;height:96px;margin:-48px 0 0 -48px} .dec-astro{width:190px;margin:-78px 0 0 -95px} }
/* téléphone étroit : le champ de charge (− 40.0 +) prend 199 px ; à côté, « RÉPÉTITIONS », « REPETICIONES » ou « WIEDERHOLUNGEN »
   ne tiennent plus. Les deux champs s'empilent. */
@media (max-width:420px){ .champs{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){
  .decollage{height:auto;padding-block:80px}
  .dec-scene{position:relative;height:auto;display:flex;flex-direction:column;align-items:center;gap:28px}
  .dec-scene>*{position:static;transform:none!important;opacity:1!important;margin:0}
  .visite-colle .orbite-ali{display:none}
  .bascule *,.avion,.reste,.sort{transition:none!important}
  .lien-histoire *{transition:none!important;animation:none!important}
  .abo-scene{height:auto}
  .abo-colle{position:static;height:auto;padding:0}
  .abo-cols{flex:none}
  .pile{flex:none;height:300px}
  .etape-aliments{min-height:78vh;padding-block:0;justify-content:center}
  .etape-colle{position:static}   /* le téléphone collant sert aux 4 étapes : sans défilement, l'anneau n'a pas d'étape à suivre */
  .dec-neb,.dec-med,.dec-roc,.dec-astro,.dec-champ,.dec-eclat,.dec-trou{display:none}
  .dec-planete{--t:260px;position:relative!important;left:auto;top:auto}   /* sans left/top à 50 % : centrée par la colonne, entière à l'écran */
  .dec-ligne{font-size:clamp(32px,5vw,64px)}
}

/* ---------------------------------------------------------------- pages de texte */
.doc{padding:130px 0 90px}
.doc .wrap{max-width:780px}
.doc h1{font-size:clamp(38px,6vw,64px);line-height:1;margin-bottom:14px;hyphens:auto;overflow-wrap:break-word}   /* « Datenschutzerklärung » à 360 px */
.doc .maj{font-size:14px;color:var(--fond-txt);margin:0 0 50px}
.doc h2{font-size:24px;font-weight:650;margin:46px 0 14px;letter-spacing:-.01em;line-height:1.2}
.doc p,.doc li{color:#c6cce4}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.doc a{color:var(--trait)}
.doc .encadre{border:1px solid rgba(126,184,255,.3);background:rgba(126,184,255,.05);border-radius:18px;padding:22px 24px;margin:0 0 10px}
.doc .encadre p{margin:0;color:var(--etoile)}
/* « pourquoi pas d'abonnement » : la rétrospective de Chris, colonne de lecture, ton plus chaleureux que les pages légales */
/* 21-10 : nouvelle mise en page du récit (Chris : « change-moi le visuel du texte ») — titre plus grand, grand numéro de chapitre
   en colonne à gauche (collant pendant la lecture), texte à droite ; citation qui sort de la colonne ; engagements en liste ;
   chute à côté de la dernière page du calendrier. Toujours neutre : blanc, brume, filets, et le bleu du trait par touches. */
.histoire .wrap{max-width:1040px}
.histoire h1{font-size:clamp(40px,7vw,92px);line-height:.98;letter-spacing:-.035em;margin-bottom:clamp(30px,5vw,60px);text-wrap:balance;hyphens:manual;max-width:14ch}
.chap{padding-block:0;display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:clamp(64px,9vw,120px)}
.chap-n{position:static;align-self:start;display:grid;gap:10px;margin:0}   /* 21-10 (Chris) : numéros fixes, ils ne suivent plus le défilement */
.chap-num{font:800 clamp(64px,8vw,112px)/.85 var(--sans);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(154,167,200,.55)}
.chap-lab{font:500 11px/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brume);padding-left:4px}
.chap-corps{max-width:60ch;padding-top:6px}
.chap-corps>p{font-size:clamp(18px,1.5vw,20px);line-height:1.72;color:#c6cce4}
.chap-corps>p+p{margin-top:18px}
.chap-corps>.lead{font-size:clamp(26px,3vw,38px);line-height:1.18;font-weight:700;letter-spacing:-.025em;color:var(--etoile);text-wrap:balance;margin-bottom:22px}
.cit{margin:clamp(44px,6vw,72px) 0 clamp(36px,5vw,56px) calc(-1 * min(16vw,170px));position:relative}
.cit p{font-size:clamp(38px,6.4vw,84px);line-height:.98;font-weight:800;letter-spacing:-.045em;color:var(--etoile);text-wrap:balance;max-width:13ch}
/* 21-10 : les guillemets sont dans le texte (« … », “…”, „…“ selon la langue) : plus de guillemet décoratif */
.doc .promesses{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(34,52,92,.8)}
.doc .promesses li{margin:0;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:20px 0;border-bottom:1px solid rgba(34,52,92,.8);font-size:clamp(17px,1.4vw,19px);line-height:1.62;color:#c6cce4}
.doc .promesses li::before{content:"";width:9px;height:9px;margin-top:.62em;border-radius:50%;background:var(--trait);box-shadow:0 0 12px rgba(126,184,255,.8)}
.chute{display:flex;align-items:center;justify-content:flex-start;gap:clamp(24px,4vw,48px);margin-top:clamp(48px,6vw,80px);padding-top:clamp(30px,4vw,44px);border-top:1px solid rgba(34,52,92,.7)}
.chute-txt{min-width:0}
.chute p{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--brume)}
.chute .fort{margin-top:10px;font-size:clamp(34px,5vw,64px);line-height:1.02;font-weight:800;letter-spacing:-.04em;color:var(--etoile);text-wrap:balance}
.chute .cal-fixe{order:-1}   /* la feuille avant la phrase ; même taille que le calendrier de l accueil (.cal) */
@media (max-width:760px){
  .chap{grid-template-columns:minmax(0,1fr);gap:14px}
  .chap-n{position:static;display:flex;align-items:baseline;gap:14px}
  .chap-num{font-size:56px}
  .cit{margin-left:0}
  .chute{flex-direction:column;align-items:flex-start}
}
.signature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-top:clamp(60px,8vw,96px)}   /* 21-10 : photo centrée */
.sig-nom{font-size:26px;font-weight:700;color:var(--etoile);line-height:1.1}
.sig-role{margin-top:6px;font:500 11px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brume)}
.portrait{width:160px;height:160px;flex:none;border-radius:50%;overflow:hidden;border:1px solid var(--bord);
  background:radial-gradient(circle at 50% 35%,rgba(169,155,255,.3),rgba(11,18,38,.95) 70%);box-shadow:0 0 60px -14px rgba(169,155,255,.55)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait img.attente{object-position:50% 6%}   /* l'astronaute tient la place de la photo de Chris */
.histoire .retour{margin-top:60px}
/* scène « abonnement contre achat » : collante, pilotée par le défilement (site.js) ; 60 prélèvements s'empilent à gauche */
.abo-scene{position:relative;height:340vh;margin:36px 0 10px;width:min(880px,calc(100vw - 40px))}   /* sort de la colonne de lecture */
.abo-colle{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;gap:14px;padding:92px 0 28px}
.abo-mois{font-size:15px;color:var(--brume)}
.abo-mois b{color:var(--etoile);font-weight:700;font-variant-numeric:tabular-nums}
.abo-barre{position:relative;height:6px;margin:10px 0 22px;border-radius:3px;background:rgba(34,52,92,.75)}
.abo-barre i{position:absolute;inset:0;border-radius:3px;background:rgba(238,242,255,.72);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.repere{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;background:var(--bord)}
.repere em{position:absolute;top:18px;right:0;font-size:11px;font-style:normal;color:var(--fond-txt);white-space:nowrap}
.abo-cols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,2.4vw,26px)}
.abo-col{min-height:0;display:flex;flex-direction:column;padding:16px;border:1px solid var(--bord);border-radius:20px;background:rgba(11,18,38,.55)}
.abo-t{font-weight:700;font-size:18px;line-height:1.2}
.abo-s{font-size:14px;color:var(--brume)}
.abo-s2{margin-top:6px;font-size:13px;line-height:1.35;color:var(--fond-txt)}
.abo-n{margin-top:4px;font-weight:800;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.gauche .abo-n{color:var(--cout)}
.droite .abo-n{color:var(--etoile)}
.pile{position:relative;flex:1;min-height:0;margin-top:12px;overflow:hidden}
.pile-cb{flex:1;min-height:0;margin-top:12px;display:flex;flex-direction:column-reverse;justify-content:flex-start}   /* l'achat posé au sol, comme la pile d'en face, les mises à jour au-dessus */
.tk{position:absolute;left:0;right:0;bottom:0;transform-origin:50% 100%;height:30px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 10px;border-radius:8px;
  font-size:12px;color:#d9c6c0;opacity:0;will-change:transform,opacity;border:1px solid rgba(223,164,148,.3);box-shadow:0 4px 10px rgba(5,6,15,.45)}
.tk b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk i{font-style:normal;font-size:10px;color:var(--brume);font-variant-numeric:tabular-nums}
/* sous les 3 du dessus, seule la tranche se voit : pas de texte qui se superpose */
.tk.tranche b,.tk.tranche i{visibility:hidden}
.tk{background:#131a2d}   /* opaque : on ne voit pas à travers la pile */
.tk.tranche{border-color:rgba(223,164,148,.42)}
.tk.achat{position:relative;background:#18213a;border-color:rgba(238,242,255,.3);color:var(--etoile);justify-content:flex-start}
/* mises à jour : même ticket que l'achat, plus discret, posé au-dessus, à des mois irréguliers */
.majs{display:flex;flex-direction:column-reverse;gap:6px;margin-bottom:6px}
.tk.mj{position:relative;bottom:auto;background:#10172a;border-color:rgba(238,242,255,.14);color:var(--brume);justify-content:flex-start;box-shadow:none}
/* 20-10-2026 — la scène dessinée : tour de pièces (canvas) contre une pièce et ses lunes */
canvas.tour{display:block;width:100%}
.droite .pile-cb{flex-direction:column;gap:8px}
canvas.cb-orbite{display:block;flex:1;min-height:0;width:100%}
/* légendes AU-DESSUS du dessin : les deux zones de dessin vont jusqu'au bas de leur carte, les deux piles partent du même sol */
.cb-leg{order:-1;margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--brume)}
.cb-leg span{padding:4px 9px;border-radius:999px;border:1px solid rgba(126,184,255,.28);background:rgba(126,184,255,.06);white-space:nowrap}
.cb-leg .leg-achat{color:var(--etoile)}
.cb-leg .leg-maj{opacity:0;transition:opacity .3s}
.cb-leg b{font-weight:700;color:var(--trait);margin-left:2px}
.abo-ecart{min-height:1.3em;font-weight:800;font-size:clamp(20px,2.8vw,30px);letter-spacing:-.02em;color:var(--etoile);opacity:0}
/* pages d'index (exercices, recettes, aliments) : du vrai contenu, lisible, léger */
.catalogue .wrap{max-width:1000px}
.catalogue h1{font-size:clamp(34px,5vw,56px)}
.catalogue .intro{max-width:66ch;font-size:18px;color:#c6cce4;margin-top:6px}
.liens-cat{margin-top:14px}
.liens-cat a,.catalogue .retour a{color:var(--trait)}
.sommaire{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
.sommaire a{padding:7px 12px;border-radius:999px;border:1px solid var(--bord);color:var(--etoile);text-decoration:none;font-size:14px;background:rgba(11,18,38,.55)}
.sommaire a:hover{border-color:var(--trait)}
.sommaire small,.catalogue h2 small{color:var(--fond-txt);font-weight:500}
.note-cat{font-size:14px;color:var(--fond-txt);margin-top:10px}
.plus-cat{font-size:15px;color:var(--fond-txt);margin-top:14px}
.catalogue section{scroll-margin-top:90px}
.catalogue h2{margin-top:56px;padding-bottom:10px;border-bottom:1px solid var(--bord)}
.exos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:2px 28px}
.exos li{padding:14px 0;border-bottom:1px solid rgba(34,52,92,.6)}
.exos h3{font-size:17px;font-weight:650;line-height:1.3}
.exos .meta{font:500 12px var(--ui);letter-spacing:.06em;color:var(--trait);margin-top:4px}
.exos p:not(.meta){font-size:15px;color:var(--brume);margin-top:6px;line-height:1.5}
.exos em{font-style:normal;color:var(--etoile)}
.tab-cadre{overflow-x:auto;margin-top:12px}
.tab{width:100%;border-collapse:collapse;font-size:15px}
.tab th,.tab td{padding:9px 10px;border-bottom:1px solid rgba(34,52,92,.6);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tab th[scope="row"],.tab thead th:first-child{text-align:left;white-space:normal;font-weight:500;color:var(--etoile);padding-left:0}
.tab thead th{font:500 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fond-txt)}
.tab td{color:var(--brume)}
.tab-ali td:nth-child(2){color:var(--fond-txt);font-size:13px}
.catalogue .retour{margin-top:60px}
/* lien vers les pages d'index, dans la visite */
.voir-cat{display:inline-flex;gap:8px;margin-top:14px;color:var(--trait);font-weight:600;text-decoration:none}
.voir-cat:hover{text-decoration:underline}
/* lien vers l'histoire, sous « Fais le calcul » */
/* 20-10-2026 — plus de pastille : un calendrier dont les 12 mois d'abonnement tombent, puis il reste « 9,99 € une fois » (site.js, [data-cal]).
   21-10 : feuilles ChatGPT « Calendriers cosmiques » détourées (img/calendrier-mois.webp, -fin.webp, 300×288, bande = 27 % du haut,
   trous de reliure et coin corné transparents) ; le texte reste écrit par le site, dans la langue de la page. */
.lien-histoire{display:flex;align-items:center;gap:20px;margin-top:40px;color:var(--etoile);text-decoration:none}   /* 21-10 : sous les questions de la FAQ */
.lien-histoire:focus-visible{outline:2px solid var(--trait);outline-offset:6px;border-radius:12px}
.cal-txt{min-width:0;font-size:clamp(16px,1.4vw,20px);font-weight:700;line-height:1.3;text-wrap:balance}
@media (min-width:600px){.cal-txt{white-space:nowrap}}   /* Chris : « sur une seule ligne » */
.cal-txt i{font-style:normal;color:var(--trait);display:inline-block;transition:transform .2s}
.lien-histoire:hover .cal-txt i{transform:translateX(4px)}
.cal{position:relative;flex:none;width:112px;aspect-ratio:300/288;perspective:500px}
.feuille{position:absolute;inset:0;background:url("img/calendrier-mois.webp") center/100% 100% no-repeat;color:#1b2236;display:grid;grid-template-rows:27% 1fr;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));transform-origin:50% 8%;backface-visibility:hidden}
.feuille.fin{background-image:url("img/calendrier-fin.webp")}
.feuille b{color:#fff;font:700 12px/1 'Outfit',sans-serif;letter-spacing:.14em;text-transform:uppercase;display:grid;place-items:center;padding-top:3px;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.5)}
.feuille span{display:grid;place-items:center;text-align:center;font:800 19px/1.15 'Outfit',sans-serif;letter-spacing:-.02em;padding:0 6px;font-variant-numeric:tabular-nums}
.feuille.fin b{letter-spacing:.04em;text-transform:none;font-size:13px}
.feuille.fin span{font-size:18px}
.feuille.fin small{display:block;font-weight:600;font-size:13px;color:#4a5578}
.feuille.tombe{animation:tombe .34s ease-in forwards}
@keyframes tombe{to{transform:rotateX(-100deg) translateY(28px);opacity:0}}
.feuille span.long{font-size:15px}
@media (max-width:700px){.cal{width:100px}.cal-txt{font-size:17px}.feuille span{font-size:16px}.feuille.fin span{font-size:14px}.feuille.fin small{font-size:11px}.feuille span.long{font-size:12.5px}}
.doc .base-legale{margin-top:40px;font-size:14px;color:var(--fond-txt)}
.doc .a-remplir{color:var(--or);font-family:var(--ui);font-size:.85em}

/* ---------------------------------------------------------------- tailles */
@media (max-width:1100px){
  .astro-hero{display:none}
}
@media (max-width:980px){
  .hero{padding-block:110px 70px;min-height:0}
  .hero-grille{grid-template-columns:minmax(0,1fr);gap:56px}
  .hero-demo{max-width:520px;width:100%}
  .visite-grille{grid-template-columns:minmax(0,1fr)}
  .visite-scene{display:none}
  .visite-etapes{border-left:0}
  .etape{min-height:0;opacity:1;padding:56px 0 0}
  .etape::before{display:none}
  .tel-inline{display:block;width:min(300px,76vw);margin-top:28px}
  .tel-orbite-inline{display:block;width:min(250px,62vw);margin:28px auto 0}   /* plus étroit et centré : l'anneau dépasse des deux côtés */
  .tel-orbite-inline .tel-inline{width:100%}
  .tel-orbite-inline .tel-inline{margin-top:0}
  .orbite-ali img{width:52px;height:52px;margin:-26px 0 0 -26px}
  .orbite-rec img{width:54px;height:54px;margin:-27px 0 0 -27px}
  .orbite-ali img:nth-child(n+9){display:none}
  .orbite-ali[data-vedette] img:nth-child(n+5){display:none}
  .etape-aliments{min-height:0;padding:56px 0 0}
  .etape-colle{position:static}
  .etape-colle::before{display:none}
  .rangs-grille,.prix-grille,.faq-grille{grid-template-columns:minmax(0,1fr)}
  .rangs-texte,.faq-tete{position:static}
  .offre{margin-top:36px}   /* place pour l'astronaute posé sur la carte */
  .faq-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
  .astro-idee{width:76px;margin:0 6px 0 0}
  .astro-rangs{display:none}
  .carte-rangs{margin-top:20px}
}
@media (max-width:860px){
  .nav ul{display:none}
  .nav .langues{margin-left:auto}
}
@media (max-width:700px){
  .planete{--pw:900px;--py:340px}   /* 20-10 : sur mobile, l'image recadrée au centre garde une courbe visible */
  .orbite{left:-12%;width:124%;top:48%}
  .pan-titre strong{white-space:normal;font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pan-pied{flex-wrap:wrap}
  .exo-mini{width:40px;height:40px}
  .registre{grid-template-columns:minmax(0,1fr)}
  .sort{border-left:0;border-top:1px solid var(--bord)}
  .avion{flex-direction:column;align-items:stretch}
  .avion-txt{order:-1}
  .bascule{justify-content:space-between}
  .barre-l{grid-template-columns:minmax(0,1fr) auto}
  .barre-l span{grid-column:1/-1}
  .final-grille{grid-template-columns:minmax(0,1fr)}
  .astro-final{width:150px}
  .astro-scan{width:78px}
  .portrait{width:112px;height:112px}
  .tab{font-size:13.5px}
  .tab th,.tab td{padding:8px 4px}
  .tab thead th{font-size:10px;letter-spacing:0;white-space:normal;hyphens:auto;overflow-wrap:anywhere;vertical-align:bottom}
  .tab td{font-size:13px}
  .tab th[scope="row"]{hyphens:auto;overflow-wrap:anywhere}
  .abo-scene{height:300vh}
  .abo-colle{padding:80px 0 20px;gap:10px}
  .abo-col{padding:10px;border-radius:14px}
  .abo-t{font-size:15px}
  .abo-s{font-size:12px}
  .tk{height:24px;font-size:10.5px;padding:0 7px;border-radius:6px}
  .abo-s2{font-size:11.5px}
  .signature{gap:16px}
  .astro-pouce{width:72px;top:-62px;right:16px}
  .montant{padding-right:72px}
  .montant strong{font-size:clamp(48px,15vw,64px)}
  .medaillon{width:78px;height:78px}
  .rang{height:78px}
  .rang.d .rang-txt{left:calc(var(--x) + 50px)}
  .rang.g .rang-txt{right:calc(100% - var(--x) + 50px)}
  .lcd{font-size:34px}
  .lcd.petit{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* 19-10-2026 — « Bientôt à ton poignet » : l'appli montre, mise à jour à venir incluse dans l'achat */
.montre-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.montre h2{max-width:14ch}
.montre-badge{display:inline-block;font:600 14px/1.2 var(--sans);color:var(--plasma);border:1px solid rgba(169,155,255,.45);border-radius:999px;padding:8px 16px;margin-bottom:20px}
.montre-points{list-style:none;margin:22px 0 0;padding:0}
.montre-points li{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid rgba(34,52,92,.6);font-size:18px;line-height:1.45}
.montre-points li:last-child{border-bottom:0}
.montre-points li svg{width:20px;height:20px;flex:none;margin-top:3px;color:var(--trait)}
.montre-note{color:var(--fond-txt);font-size:15px;margin-top:16px}
.montre-ecrans{width:100%;max-width:640px;height:auto;justify-self:center}
@media (max-width:980px){ .montre-grille{grid-template-columns:minmax(0,1fr)} }

/* 19-10-2026 (Chris : « le site n'a pas l'air très optimisé pour smartphone » → « trop long à faire défiler ») —
   sur téléphone : la visite devient un carrousel qu'on fait glisser (au lieu de 9 étapes empilées, ~6 écrans),
   la traversée passe de 3 à 2 écrans, marges entre sections et carte des rangs resserrées. Rien n'est retiré. */
@media (max-width:700px){
  section{padding-block:64px}
  .hero{padding-block:96px 48px}
  .decollage{height:200vh;padding:0}
  .visite-etapes{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:4px -20px 0;padding:0 20px 10px;scroll-padding-inline:20px;scrollbar-width:none}
  .visite-etapes::-webkit-scrollbar{display:none}
  /* chaque étape est une carte : la suivante dépasse comme une carte, pas comme du texte coupé */
  .etape,.etape-aliments{flex:0 0 86%;min-height:0;scroll-snap-align:start;justify-content:flex-start;overflow:hidden;
    padding:20px 18px 18px;background:rgba(11,18,38,.78);border:1px solid var(--bord);border-radius:22px}
  .visite-etapes .orbite-ali{display:none}   /* dans une carte étroite, les anneaux d'aliments et de recettes passaient sur le texte */
  .etape h3{font-size:26px}
  .etape p{font-size:16px;margin-top:10px}
  .tel-inline{width:min(220px,58vw);margin:18px auto 0}
  .tel-orbite-inline{width:min(200px,52vw);margin:18px auto 0}
  .carte-rangs ol{gap:20px}
  .medaillon{width:62px;height:62px}
  .rang{height:62px}
  .rang.d .rang-txt{left:calc(var(--x) + 42px)}
  .rang.g .rang-txt{right:calc(100% - var(--x) + 42px)}
}

/* 19-10-2026 (Chris : « améliore vraiment ») — tout ce qui se touche fait au moins 44 px sur un écran tactile
   (avant : liens du pied 22 px, « Aperçu des… » 27 px, − / + 30 px, curseur du ressenti 22 px, sommaire 38 px). */
@media (max-width:700px),(pointer:coarse){
  .marque,.pied-marque{display:inline-flex;align-items:center;min-height:44px}
  .langue{min-height:44px;padding-inline:6px}
  .exo-mini{width:44px;height:44px}
  .pas{width:44px;height:44px;font-size:22px}
  .rpe input{height:44px}
  .voir-cat{min-height:44px;align-items:center;margin-top:6px}
  .ans button{min-height:44px;padding:8px 14px}
  .pied nav{gap:0 18px}
  .pied nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  .sommaire a{display:inline-flex;align-items:center;min-height:44px}
  .liens-cat a,.retour a{display:inline-flex;align-items:center;min-height:44px}
  .faq summary{min-height:44px}
}
/* le carrousel de la visite : des points pour savoir où on en est et y sauter d'un toucher (téléphone seulement) */
.visite-points{display:none}
@media (max-width:700px){
  .visite-points{display:flex;justify-content:center;gap:2px;margin-top:6px}
  .visite-points button{width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
  .visite-points button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bord);transition:background .25s,transform .25s}
  .visite-points button[aria-current="true"]::before{background:var(--trait);transform:scale(1.25)}
}

@media (max-width:700px){ .final{padding-bottom:140px} }   /* 21-10 : sur mobile, le bouton reste au-dessus de la lueur de l horizon */

/* 21-10-2026 — easter egg : une étoile du haut de l'accueil est un bouton (site.js, [data-oeuf]).
   Au repos : une étoile comme les autres, un peu plus chaude, qui lance un petit éclat en croix toutes les 9 s. */
.oeuf{position:absolute;z-index:2;top:clamp(110px,16vh,170px);right:clamp(24px,9vw,140px);width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.oeuf::before{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#fff6e6;box-shadow:0 0 6px 1px rgba(255,236,210,.7)}
.oeuf::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;opacity:0;
  background:linear-gradient(90deg,transparent 46%,rgba(255,246,230,.9) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(255,246,230,.9) 50%,transparent 54%);
  animation:oeuf-eclat 9s ease-in-out infinite}
@keyframes oeuf-eclat{0%,88%,100%{opacity:0;transform:scale(.4) rotate(0)}93%{opacity:1;transform:scale(1) rotate(45deg)}}
.oeuf:hover::after,.oeuf:focus-visible::after{animation:none;opacity:1;transform:scale(1.15) rotate(45deg);transition:transform .3s}
.oeuf:focus-visible{outline:1px solid rgba(255,236,210,.6);outline-offset:4px}
.oeuf-vol{position:fixed;z-index:60;left:0;top:0;width:clamp(140px,18vw,240px);pointer-events:none;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));will-change:transform}
.oeuf-msg{position:fixed;z-index:61;left:50%;bottom:max(28px,env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;max-width:min(520px,calc(100vw - 32px));
  padding:14px 20px;border-radius:16px;border:1px solid var(--bord);background:rgba(11,18,38,.94);color:var(--etoile);font-size:16px;line-height:1.45;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.5);transition:opacity .35s,transform .35s var(--doux);pointer-events:none}
.oeuf-msg.vu{opacity:1;transform:translate(-50%,0)}
@media (max-width:700px){.oeuf{top:96px;right:22px}}
@media (prefers-reduced-motion:reduce){.oeuf::after{animation:none}.oeuf-msg{transition:none}}

/* 22-10-2026 — « Bientôt disponible sur iOS » : même forme que Google Play, contour seul, pas cliquable */
.btn-ios{border:1px solid var(--bord);color:var(--etoile);padding-left:18px;cursor:default}
.btn-ios svg{width:22px;height:22px}
.btn-ios>span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.btn-ios small{font-size:11px;font-weight:500;opacity:.7}
.btn-ios.large{width:100%;margin-top:10px}
/* 22-10-2026 — sans les boutons du héros, la note remontait sous l'astronaute : même largeur que le chapô */
.hero .note{max-width:44ch}

/* 22-10-2026 — Contact : le bouton prépare l'e-mail dans la messagerie du visiteur (mailto), rien ne passe par le site */
.contact{padding-bottom:0}
.contact-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,90px);align-items:start}
.contact-form{display:grid;gap:18px}
.contact .ch{display:grid;gap:8px}
.contact .ch>span{font-size:14px;color:var(--brume)}
.contact select,.contact textarea,.contact input{font:inherit;color:var(--etoile);background:var(--coque);border:1px solid var(--bord);border-radius:14px;padding:14px 16px;width:100%;transition:border-color .2s}
.contact select{height:56px;appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--trait) 50%),linear-gradient(135deg,var(--trait) 50%,transparent 50%);
  background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.contact textarea{resize:vertical;min-height:150px;line-height:1.5}
.contact textarea::placeholder{color:var(--fond-txt)}
.contact select:focus,.contact textarea:focus,.contact input:focus{outline:none;border-color:var(--trait)}
.contact .btn-play{width:100%;cursor:pointer;border:0}
.contact-note{font-size:13px;color:var(--fond-txt);margin:-6px 0 0}
.contact-adr{margin:6px 0 0;color:var(--brume);font-size:15px;overflow-wrap:anywhere}
.contact-adr a{color:var(--etoile)}
.copier{background:none;border:1px solid var(--bord);border-radius:10px;padding:3px 10px;margin-left:6px;font-size:13px;color:var(--brume);cursor:pointer}
.copier:hover{border-color:var(--trait);color:var(--etoile)}
@media (max-width:860px){.contact-grille{grid-template-columns:minmax(0,1fr)}}

/* 22-10-2026 — À venir : cartes de dos qui se retournent sur une esquisse au crayon (touches galactiques) */
.avenir{padding-bottom:0}
.av-defs{position:absolute;width:0;height:0;overflow:hidden}
.avenir-grille{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.avenir-carte{perspective:1200px;cursor:pointer}
.av-int{display:grid;height:100%;transform-style:preserve-3d;transition:transform .9s var(--doux)}
.av-int.cachee{transform:rotateY(180deg)}
.av-int.sans-trans{transition:none}
.av-face,.av-dos{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:18px}
.av-face{background:var(--coque);border:1px solid var(--bord);padding:20px 24px 24px;display:flex;flex-direction:column}
.av-dos{transform:rotateY(180deg);border:1px solid var(--bord);display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,rgba(169,155,255,.16),transparent 55%),radial-gradient(circle at 75% 80%,rgba(126,184,255,.12),transparent 50%),var(--coque)}
.av-dos svg{width:46%;max-width:150px;height:auto}
.croquis{display:block;width:180px;max-width:100%;height:auto;margin:0 0 4px -10px}
.avenir-etat{margin:8px 0 6px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--plasma)}
.avenir-carte h3{font-size:21px;line-height:1.25;margin:0}
.avenir-carte h3+p{color:var(--brume);font-size:16px;line-height:1.5;margin:10px 0 0}
.avenir-carte.etude .av-face{background:transparent;border-style:dashed}
.avenir-carte.etude .avenir-etat{color:var(--fond-txt)}
.avenir-carte.etude .croquis{opacity:.8}
.avenir-voir{margin-top:auto;padding-top:16px;font-size:15px;color:var(--trait);text-decoration:none}
.avenir-voir:hover{color:var(--etoile)}
@media (max-width:980px){.avenir-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.avenir-grille{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.av-int{transition:none}}
/* 22-10-2026 — Contact : nom + e-mail, bouton Envoyer (contact.php, repli mailto) */
.contact input{height:56px}
.ch-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.contact .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-etat{margin:-4px 0 0;font-size:15px;color:var(--trait)}
.contact-etat.non{color:var(--cout)}
.contact .btn-play[disabled]{opacity:.6;cursor:default}
@media (max-width:600px){.ch-duo{grid-template-columns:minmax(0,1fr)}}
/* 22-10-2026 — étoile secrète : le curseur la repère, la fenêtre donne le code lié au téléphone */
html.vise-etoile,html.vise-etoile *{cursor:pointer}
.etoile-sec{position:fixed;z-index:62;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 32px));
  transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s var(--doux);
  background:var(--coque);border:1px solid rgba(232,194,110,.45);border-radius:18px;padding:20px 20px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(232,194,110,.12)}
.etoile-sec.vu{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.es-x{position:absolute;top:8px;right:10px;width:34px;height:34px;border:0;background:none;color:var(--brume);font-size:24px;line-height:1;cursor:pointer}
.es-h{margin:0 30px 6px 0;font-weight:700;font-size:19px;color:var(--or)}
.es-t{margin:0 0 14px;color:var(--brume);font-size:15px;line-height:1.5}
.es-form{display:flex;gap:10px;align-items:flex-end}
.es-lab{flex:1;display:grid;gap:6px;font-size:13px;color:var(--brume)}
.es-lab input{height:46px;border-radius:12px;border:1px solid var(--bord);background:rgba(255,255,255,.04);color:var(--etoile);padding:0 12px;
  font:600 18px var(--ui);letter-spacing:.2em;text-transform:uppercase;width:100%}
.es-lab input:focus{outline:none;border-color:var(--or)}
.es-ok{height:46px;padding:0 14px;border-radius:12px;border:0;background:var(--etoile);color:var(--vide);font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap}
.es-err{margin:10px 0 0;color:var(--cout);font-size:14px}
.es-res p{margin:14px 0 0;color:var(--brume);font-size:14px}
.es-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.es-res .es-ligne{margin-top:6px}
.es-code{font:600 22px var(--ui);letter-spacing:.08em;color:var(--or)}
.es-cop{border:1px solid var(--bord);background:none;color:var(--brume);border-radius:10px;padding:4px 10px;font-size:13px;cursor:pointer}
.es-res .es-note{margin-top:8px;font-size:13px;color:var(--fond-txt)}
.es-c{margin:-2px 0 8px;font-size:14px;font-weight:600;color:var(--plasma);letter-spacing:.02em}
/* 22-10-2026 — cartes À venir : l'esquisse ChatGPT pleine largeur, fondue dans la carte */
.av-img{display:block;width:calc(100% + 48px);max-width:none;height:auto;margin:-20px -24px 6px;border-radius:17px 17px 0 0;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.avenir-carte.etude .av-img{opacity:.85}
/* 22-10-2026 — étoile secrète : elle éclot (halo, onde, éclat, poussière), puis la fenêtre grandit depuis elle */
.es-eclat{position:fixed;z-index:63;width:0;height:0;pointer-events:none}
.es-eclat>*{position:absolute;left:0;top:0}
.es-halo{width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,200,.95) 0,rgba(232,194,110,.45) 18%,rgba(169,155,255,.18) 42%,transparent 70%);
  animation:es-halo 1.3s var(--doux) forwards}
.es-onde{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1.5px solid rgba(255,228,178,.85);animation:es-onde 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.es-onde2{border-color:rgba(169,155,255,.7);animation-delay:.18s;opacity:0}
.es-branches{width:76px;height:76px;margin:-38px 0 0 -38px;fill:#fff3dc;opacity:.92;filter:drop-shadow(0 0 8px rgba(255,220,160,.9));animation:es-branches 1.2s var(--doux) forwards}
.es-grain{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#ffe9c4;box-shadow:0 0 6px rgba(255,220,160,.9);opacity:0;
  animation:es-grain 1.4s cubic-bezier(.15,.7,.3,1) forwards}
.es-grain.lav{background:#d9d0ff;box-shadow:0 0 6px rgba(169,155,255,.9)}
@keyframes es-halo{0%{transform:scale(.1);opacity:0}25%{opacity:1}100%{transform:scale(1.4);opacity:0}}
@keyframes es-onde{0%{transform:scale(.2);opacity:1}100%{transform:scale(7);opacity:0}}
@keyframes es-branches{0%{transform:scale(0) rotate(0);opacity:1}45%{transform:scale(1.1) rotate(40deg);opacity:.9}100%{transform:scale(.2) rotate(90deg);opacity:0}}
@keyframes es-grain{0%{transform:translate(0,0) scale(var(--s));opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
.etoile-sec{transform:translate(-50%,24px) scale(.6)}
.etoile-sec.vu{transform:translate(-50%,0) scale(1)}
/* 23-10-2026 — héros compact sur téléphone : la constellation et le bouton Valider tiennent ensemble à l'écran */
@media (max-width:700px){
  .ciel-perso{height:54px}
  .ciel-lab{margin:0 6px 8px}
  .panneau{padding:12px 12px 8px;border-radius:22px}
  .figure{aspect-ratio:2.4/1;margin-top:10px}
  .consigne{min-height:2.6em;margin:4px 2px 4px;font-size:13px;line-height:1.35}
  .champs{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px}
  .champ{padding:8px 4px 10px;gap:4px;border-radius:14px}
  .champ>.ui{font-size:10.5px}
  .champ .lcd{font-size:30px}
  .lcd-ligne{gap:4px}
  .pas{width:26px;height:26px;font-size:16px}
  .rpe{margin-top:8px}
  .rpe input{margin:2px 0 0}
  .valider{margin-top:8px;height:48px}
}
/* 23-10-2026 — À venir sur sa page ; sur téléphone, cartes compactes : l'esquisse à gauche, le texte à droite */
.page-avenir{padding-top:clamp(72px,8vw,110px);padding-bottom:clamp(60px,8vw,120px)}
.page-avenir .avenir{padding-top:clamp(40px,5vw,70px)}
.page-avenir h1{font-size:clamp(36px,4.6vw,62px);line-height:1.02;margin:0}
@media (max-width:600px){
  .avenir-grille{gap:12px;margin-top:28px}
  .av-face{display:grid;grid-template-columns:38% minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 12px 10px 10px}
  .av-face>.av-img,.av-face>.croquis{grid-row:1/span 3;width:100%;margin:0;border-radius:12px;-webkit-mask-image:none;mask-image:none;align-self:center}
  .av-face>.av-img{aspect-ratio:1/1;height:auto;object-fit:cover;object-position:center}
  .avenir-etat{margin:0 0 3px;font-size:11px}
  .avenir-carte h3{font-size:16.5px}
  .avenir-carte h3+p{font-size:14px;line-height:1.4;margin-top:4px}
  .av-dos svg{width:74px}
}
/* 23-10-2026 — téléphone : menu des liens de l'en-tête (trois traits) */
.menu-mob{display:none;position:relative;margin-left:auto;margin-right:6px}
.menu-mob summary{list-style:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;border-radius:12px}
.menu-mob summary::-webkit-details-marker{display:none}
.menu-mob summary i,.menu-mob summary i::before,.menu-mob summary i::after{display:block;width:20px;height:2px;border-radius:1px;background:var(--etoile);transition:transform .25s var(--doux),opacity .2s}
.menu-mob summary i{position:relative}
.menu-mob summary i::before,.menu-mob summary i::after{content:"";position:absolute;left:0}
.menu-mob summary i::before{top:-6px}
.menu-mob summary i::after{top:6px}
.menu-mob[open] summary i{background:transparent}
.menu-mob[open] summary i::before{transform:translateY(6px) rotate(45deg)}
.menu-mob[open] summary i::after{transform:translateY(-6px) rotate(-45deg)}
.menu-mob ul{position:absolute;right:-50px;top:52px;min-width:220px;margin:0;padding:8px;list-style:none;display:grid;gap:2px;
  background:rgba(11,18,38,.97);border:1px solid var(--bord);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.menu-mob ul a{display:block;padding:12px 14px;border-radius:10px;color:var(--etoile);text-decoration:none;font-size:16px}
.menu-mob ul a:active,.menu-mob ul a[aria-current]{background:rgba(126,184,255,.1)}
@media (max-width:860px){.menu-mob{display:block}}
/* 23-10-2026 — téléphone : les deux tuiles du calculateur côte à côte */
@media (max-width:640px){
  .compteurs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .cpt{padding:10px 8px 8px;gap:6px;border-radius:14px}
  .cpt-t{font-size:12px;line-height:1.3}
  .cpt-v{gap:4px}
  .cpt-v .lcd{font-size:22px}
  .lcd-long .cpt-v .lcd{font-size:17px}
  .cpt-dev,.lcd-long .cpt-dev{font-size:13px}
  canvas.calc-pile{height:200px}
}
/* le masquage « .nav ul » des liens sur téléphone ne s'applique pas à la liste du menu (même règle que .langue-menu) */
.nav .menu-mob ul{display:grid;gap:2px;margin:0}
.nav .menu-mob ul a{color:var(--etoile);font-size:16px}
.menu-mob:not([open]) ul{display:none}
/* 23-10-2026 — téléphone : les 5 durées (1 an … 5 ans) sur une seule rangée */
@media (max-width:640px){
  .ans{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .ans button{padding-left:0;padding-right:0;font-size:14px;white-space:nowrap}
}
/* 23-10-2026 — téléphone : la note « Un seul achat… » est partie (elle est dans Prix) ; le panneau remonte */
@media (max-width:700px){
  .hero{padding-block:84px 40px}
  .hero .chapo{margin-top:14px}
  .hero-grille{gap:24px}
}
@media (max-width:700px){ .ciel-perso{height:74px} }   /* 23-10 : la montée en escalier se lit mieux */
/* 23-10-2026 — téléphone : les cartes « Tout ton entraînement » ont toutes la même hauteur, le téléphone calé en bas */
@media (max-width:700px){
  .visite-etapes{align-items:stretch}
  .visite-etapes>.etape{display:flex;flex-direction:column}
  .visite-etapes>.etape>.tel-inline,.visite-etapes>.etape>.tel-orbite-inline{margin-top:auto;padding-top:18px}
  .visite-etapes>.etape-aliments>.etape-colle{flex:0 0 auto}
  .pas{width:32px;height:32px;font-size:17px}   /* boutons ± : touchables, et la tuile Charge tient à côté de Répétitions */
}
/* 23-10-2026 — FAQ : 5 questions + lien sur l'accueil, page complète rangée par thème */
.faq-tout{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;color:var(--trait);text-decoration:none;font-weight:600;font-size:17px}
.faq-tout:hover{color:var(--etoile)}
.page-faq{padding-top:clamp(72px,8vw,110px)}
.page-faq .faq{padding-top:clamp(40px,5vw,70px)}
.page-faq h1{font-size:clamp(36px,4.6vw,62px);line-height:1.02;margin:0 0 10px}
.page-faq .faq-liste{max-width:820px}
.faq-theme{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--plasma);margin:44px 0 6px}
.page-faq .lien-histoire{margin-top:48px}
/* 23-10-2026 — étoile secrète : la supernova (canvas plein écran, sous la fenêtre du code) */
.es-nova{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:61;pointer-events:none;mix-blend-mode:screen}   /* le noir de la nébuleuse devient transparent */

/* 23-10 — verso propre aux cartes en préparation ; l'indice de l'étoile secrète sur l'une d'elles */
.av-dos{grid-auto-flow:row;align-content:center;gap:14px;padding:20px}
.av-indice{max-width:30ch;margin:0;text-align:center;font-size:14.5px;line-height:1.5;color:#ffe4b2;font-style:italic}
@media (max-width:640px){.av-indice{font-size:12.5px;line-height:1.4}}

/* 23-10 — la fenêtre de l'étoile secrète en cadre : double filet doré, étoiles sur les bords, médaillon de la saison */
.etoile-sec{border:1px solid rgba(232,194,110,.6);border-radius:22px;padding:24px 26px 22px;text-align:center;
  background:radial-gradient(120% 70% at 50% 0%,rgba(232,194,110,.13),transparent 62%),
             radial-gradient(90% 60% at 50% 115%,rgba(169,155,255,.13),transparent 60%),linear-gradient(180deg,#0e1632,#080c1c);
  box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 50px rgba(232,194,110,.16)}
.etoile-sec::before{content:"";position:absolute;inset:6px;border:1px solid rgba(232,194,110,.22);border-radius:17px;pointer-events:none}
.etoile-sec.avec-med{padding-top:62px;margin-top:52px}
.es-med{position:absolute;left:50%;top:-52px;width:104px;height:104px;transform:translateX(-50%);border-radius:50%;background:#0b1226;
  box-shadow:0 0 0 1px rgba(232,194,110,.6),0 0 0 6px #0b1226,0 0 0 7px rgba(232,194,110,.28),0 0 44px rgba(232,194,110,.38)}
.es-med img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.es-coin{position:absolute;width:14px;height:14px;background:var(--or);opacity:.9;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 4px rgba(232,194,110,.8))}
.es-coin-g{left:-7px;top:50%;margin-top:-7px}
.es-coin-d{right:-7px;top:50%;margin-top:-7px}
.es-coin-b{left:50%;bottom:-7px;margin-left:-7px}
.etoile-sec .es-h{margin:0 0 4px;font-size:21px;letter-spacing:.01em}
.etoile-sec .es-c{margin:0 0 12px}
.etoile-sec .es-c::after{content:"";display:block;width:56px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,rgba(232,194,110,.7),transparent)}
.etoile-sec .es-form,.etoile-sec .es-err,.etoile-sec .es-res{text-align:left}
.etoile-sec .es-x{top:12px;right:14px}
@media (max-width:480px){.etoile-sec{padding-left:18px;padding-right:18px}.etoile-sec .es-h{font-size:19px}}

/* 22-10 (tribunal) — prix et date de sortie sous la phrase d'accroche, mis en avant par la typographie */
.hero-offre{margin:14px 0 0;font:600 15px/1.4 var(--ui);letter-spacing:.02em;color:var(--or)}
@media (max-width:640px){.hero-offre{font-size:14px;margin-top:10px}}

/* 23-10-2026 — préinscription « Préviens-moi à la sortie » (outils/preinscription.py) */
.preinscr{margin-top:34px;max-width:520px;padding:20px 22px;border:1px solid rgba(126,184,255,.28);border-radius:18px;background:rgba(10,14,30,.55);backdrop-filter:blur(6px)}
.preinscr h3{font-size:20px;margin:0 0 6px}
.preinscr p{margin:0 0 14px;color:rgba(232,236,244,.75);font-size:15px;line-height:1.5}
.preinscr-ligne{display:flex;gap:10px;flex-wrap:wrap}
.preinscr input[type=email]{flex:1 1 220px;min-width:0;padding:13px 14px;border-radius:12px;border:1px solid rgba(126,184,255,.35);background:rgba(2,3,8,.6);color:#fff;font:inherit;font-size:16px}
.preinscr input[type=email]:focus{outline:none;border-color:#7EB8FF;box-shadow:0 0 0 3px rgba(126,184,255,.18)}
.btn-preinscr{flex:0 0 auto;padding:13px 20px;border-radius:12px;border:1px solid rgba(126,184,255,.55);background:rgba(126,184,255,.14);color:#dcebff;font:inherit;font-weight:700;cursor:pointer}
.btn-preinscr:hover{background:rgba(126,184,255,.24)}
.btn-preinscr:disabled{opacity:.6;cursor:wait}
.preinscr-accord{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:13.5px;color:rgba(232,236,244,.7);cursor:pointer;line-height:1.45}
.preinscr-accord input{margin-top:2px;accent-color:#7EB8FF;width:16px;height:16px;flex:none}
.preinscr .pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.preinscr-etat{margin:12px 0 0!important;font-size:14.5px!important;color:#9fe3c4!important}
.preinscr-etat.non{color:#ffb4b4!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:520px){ .btn-preinscr{flex:1 1 100%} }

/* 23-10-2026 — taper un vrai code-barres (outils/scan-reel.py) */
.scan-reel{width:100%;max-width:420px;display:grid;gap:8px;margin-top:-4px}
.scan-reel label{font:500 14px/1.4 var(--ui);color:var(--brume)}
.scan-reel-ligne{display:flex;gap:8px}
.scan-reel input{flex:1;min-width:0;padding:11px 12px;border-radius:10px;border:1px solid rgba(126,184,255,.32);background:rgba(2,3,8,.55);color:#fff;font:500 16px var(--ui);letter-spacing:.06em}
.scan-reel input:focus{outline:none;border-color:#7EB8FF;box-shadow:0 0 0 3px rgba(126,184,255,.16)}
.scan-reel button{flex:none;padding:11px 14px;border-radius:10px;border:1px solid rgba(126,184,255,.5);background:rgba(126,184,255,.12);color:#dcebff;font:700 14px var(--ui);cursor:pointer}
.scan-reel button:disabled{opacity:.55;cursor:wait}
.registre.on .scan-reel{opacity:.4}
.scan-fiche{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:14px;border:1px solid rgba(126,184,255,.25);background:rgba(10,14,30,.6)}
.scan-fiche.vide{display:block;color:var(--brume);font-size:14px}
.scan-fiche img{width:72px;height:72px;object-fit:contain;border-radius:10px;background:#fff}
.scan-fiche b{display:block;font-size:16px;line-height:1.25;color:#fff}
.scan-fiche small{display:block;color:var(--brume);font-size:13px;margin-top:2px}
.scan-macros{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;text-align:center}
.scan-macros div{padding:8px 4px;border-radius:10px;background:rgba(126,184,255,.07)}
.scan-macros strong{display:block;font:700 17px var(--ui);color:#cfe3ff}
.scan-macros span{font-size:11.5px;color:var(--brume)}
.scan-macros .k strong{color:#fff}
@media (max-width:520px){ .scan-reel-ligne{flex-wrap:wrap} .scan-reel input{flex:1 1 100%;width:100%} .scan-reel button{flex:1 1 100%} }