/* Direction A « Scène » : une seule scène fixe (la galaxie vivante) et un seul acteur, ton bot, qui avance avec le défilement,
   parle dans une bulle et joue chaque écran. Les panneaux de texte sont posés dans la scène, à gauche ou à droite.
   Jetons de la galaxie (docs/design/galaxie/direction.md § 1). Gabarito pour les titres (choix de Ben du 10 octobre, après Clash Display), Figtree pour le texte, Unbounded pour le logo seul. */
@font-face{font-family:"Gabarito";src:url(fonts/Gabarito-Variable.latin.woff2?v=53992334) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/Figtree-Variable.latin.woff2?v=53992334) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Unbounded";src:url(fonts/Unbounded-Variable.latin.woff2?v=53992334) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --night:#0c0d12; --night-2:#13141b; --night-3:#1c1e28; --line:#2a2c39;
  --ink:#f5f3ff; --ink-2:#c3bfd8; --ink-3:#8f8ba8;
  --violet:#a98bff; --amber:#ffbf47; --ok:#7ce0a8; --claude:#ef8a5c; --gpt:#19c37d; --codex:#c3bfd8;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --titre:"Gabarito","Avenir Next",system-ui,sans-serif;
  --texte:"Figtree","Avenir Next",system-ui,sans-serif;
  --logo:"Unbounded","Avenir Next",ui-rounded,system-ui,sans-serif;
  --gouttiere:clamp(16px,6vw,96px);
  --sombre:0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;font-family:var(--texte);font-size:17px;line-height:1.55;color:var(--ink);overflow-x:hidden}
a{color:inherit}
button,input{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
b{font-weight:700}
.lie{white-space:nowrap}

/* ---------- la scène : fixe, plein cadre, une seule ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--night);pointer-events:none}
.scene .galaxie{position:absolute;inset:0}
.scene .joli-galaxy{background:var(--night)!important}
/* le voile : la nuit se resserre vers les bords ; il s'épaissit quand la scène est vide ou qu'on lit (--sombre) */
.voile{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 88% 45%,rgba(12,13,18,.5),transparent 70%),radial-gradient(110% 85% at 50% 42%,transparent 38%,rgba(12,13,18,.62) 100%)}
/* la nuit s'épaissit vers les bords, jamais sur lui : le trou suit sa position écran (--bx, --by) */
.voile::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--bx,50%) var(--by,50%),transparent calc(210px + var(--elan,0) * 140px),color-mix(in srgb,var(--night) 60%,transparent) calc(380px + var(--elan,0) * 140px),var(--night) calc(600px + var(--elan,0) * 140px));opacity:var(--sombre);transition:opacity 1.1s var(--ease-io)}
.scene .galaxie{filter:brightness(calc(1 + var(--elan,0) * .12))}
html[data-ecran="heros"]{--sombre:.5}
html[data-ecran="avant"]{--sombre:.4}
html[data-ecran="galaxie"]{--sombre:.25}
html[data-ecran="partout"]{--sombre:.4}
html[data-ecran="toi"]{--sombre:.2}
@media (max-width:760px){html[data-ecran="toi"]{--sombre:.45}}
html[data-ecran="questions"]{--sombre:.5}

/* ---------- la marque : « joli », le bot en point du i ; 28 px ---------- */
.marque{position:fixed;left:var(--gouttiere);top:clamp(18px,3vh,30px);z-index:5}
.logo{font-family:var(--logo);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:flex-end;text-decoration:none;color:var(--ink);user-select:none;-webkit-user-select:none}
.logo .g,.logo .l,.logo .i{display:inline-block}
.logo .i{position:relative}
.logo .ig{display:inline-block;clip-path:inset(var(--cut,0px) -2px 0 -2px)}
.logo .l{-webkit-mask:var(--carve,none);mask:var(--carve,none)}
.logo .dot{position:absolute;left:50%;top:-.32em;width:.82em;height:.765em;transform:translateX(calc(-50% + .147em));pointer-events:none}
/* l'arrivée : les lettres claquent (0, 120, 240 ms), le bot tombe (500 à 920 ms), un seul rebond (son saut), il cligne */
.logo.anime .g,.logo.anime .l,.logo.anime .i{opacity:0;animation:claque .22s var(--ease-out) forwards}
.logo.anime .l{animation-delay:.12s}
.logo.anime .i{animation-delay:.24s}
.logo.anime .dot{opacity:0;animation:tombe .42s cubic-bezier(.5,0,1,1) .5s forwards}
@keyframes claque{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
@keyframes tombe{from{opacity:0;transform:translate(calc(-50% + .147em),-1.4em)}20%{opacity:1}to{opacity:1;transform:translate(calc(-50% + .147em),0)}}

/* ---------- les écrans : un panneau de texte posé dans la scène, à gauche ou à droite, jamais centré ---------- */
main{position:relative;z-index:1}
.ecran{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding:clamp(80px,11vh,120px) var(--gouttiere)}
/* le tempo : court pour une idée, long pour la naissance du monde, les questions à leur taille */
.ecran.avant,.ecran.partout{min-height:85svh}
.ecran.galaxie{min-height:125svh}
.ecran.questions{min-height:auto;padding-block:160px 120px}
.panneau{position:relative;isolation:isolate;min-width:0;width:min(100%,520px);padding:12px 0}
.panneau.large{width:min(100%,52vw,680px)}
.panneau.etroit{width:min(100%,46vw,660px)}
.panneau.etroit h2{font-size:clamp(40px,4.2vw,62px)}
.panneau.tres-large{width:min(100%,800px)}
.panneau.gauche{justify-self:start}
.panneau.droite{justify-self:end}
.panneau.bas-gauche{justify-self:start;align-self:end;width:min(100%,920px)}
.panneau.bas-droite{justify-self:end;align-self:end}
.panneau.haut{justify-self:start;align-self:start;width:100%}
/* la nuit locale derrière le texte : un dégradé large et doux, jamais un bord, jamais une carte */
.panneau::before{content:"";position:absolute;z-index:-1;inset:-34% -44% -38% -46%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(12,13,18,.94) 0%,rgba(12,13,18,.8) 36%,rgba(12,13,18,.42) 64%,rgba(12,13,18,.1) 86%,rgba(12,13,18,0) 100%)}
.panneau.droite::before,.panneau.bas-droite::before,.panneau.gauche::before{inset:-45% -40% -45% -40%;max-width:1100px;background:linear-gradient(to left,rgba(12,13,18,.94) 0%,rgba(12,13,18,.86) 50%,rgba(12,13,18,.35) 78%,transparent 100%);-webkit-mask:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent);mask:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent)}
.panneau.gauche::before{inset:-45% -22% -45% -40%;background:linear-gradient(to right,rgba(12,13,18,.94) 0%,rgba(12,13,18,.86) 50%,rgba(12,13,18,.35) 78%,transparent 100%)}
.panneau.bas-gauche::before{inset:-22% -40% -70% -50%;background:radial-gradient(ellipse 50% 50% at 50% 56%,rgba(12,13,18,.95) 0%,rgba(12,13,18,.82) 34%,rgba(12,13,18,.4) 62%,rgba(12,13,18,.1) 86%,rgba(12,13,18,0) 100%)}

h1,h2{font-family:var(--titre);font-weight:700;margin:0;text-wrap:balance;letter-spacing:-.02em;word-spacing:.04em}
h1{font-size:clamp(52px,10.5vw,148px);line-height:.94;letter-spacing:-.025em;word-spacing:.05em;font-weight:800}
/* le titre du héros : chaque mot sort de l'orbite quand la métamorphose se termine */
h1 .mot{display:inline-block;clip-path:inset(0 -.1em -.2em 0)}
.pret h1 .mot{clip-path:inset(0 -.1em 100% 0);transform:translateY(.35em)}
.pret.vu h1 .mot{clip-path:inset(0 -.1em -.2em 0);transform:none;transition:clip-path .7s var(--ease-out),transform .7s var(--ease-out)}
.pret.vu h1 .mot:nth-child(2){transition-delay:.12s}
h2{font-size:clamp(40px,4.8vw,68px);line-height:1}
h2.appel{font-weight:700}
h2 .doux{color:var(--ink-3)}
.moment{margin:0 0 18px;color:var(--violet);font-weight:600;font-size:clamp(17px,1.4vw,20px);font-variant-numeric:tabular-nums}
/* entre deux écrans, l'heure tourne avec le défilement et s'arrête pile : le texte reste celui de la page (lu par les lecteurs d'écran), l'horloge est dessinée par-dessus */
@property --h{syntax:"<integer>";inherits:false;initial-value:0}
@property --m{syntax:"<integer>";inherits:false;initial-value:0}
@supports (animation-timeline:view()) and (counter-reset:h calc(var(--h))){
  @media (prefers-reduced-motion:no-preference){
    html:not(.pose) .moment.heure{font-size:0;line-height:0}
    html:not(.pose) .moment.heure::before{font-size:clamp(17px,1.4vw,20px);line-height:1.55;counter-reset:h calc(var(--h)) m calc(var(--m));content:counter(h) " h " counter(m,decimal-leading-zero);
      animation:heure linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    html:not(.pose) .moment.heure[data-sans-minutes]::before{content:counter(h) " h"}
    html:not(.pose):not([lang="fr"]) .moment.heure::before,html:not(.pose):not([lang="fr"]) .moment.heure[data-sans-minutes]::before{content:counter(h) ":" counter(m,decimal-leading-zero)}
    @keyframes heure{from{--h:var(--h0);--m:var(--m0)}to{--h:var(--h1);--m:var(--m1)}}
  }
}
.lead{margin:22px 0 0;font-size:clamp(20px,1.85vw,27px);line-height:1.45;color:var(--ink);max-width:36ch;text-wrap:pretty}
.heros .lead,.toi .lead,.partout .lead{color:var(--ink-2)}
.heros .lead{max-width:44ch;margin-top:40px}
.heros .pilules{margin-top:44px}
.pilules{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.pilule{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;font-weight:700;font-size:17px;
  background:var(--night-3);color:var(--ink);transition:transform .16s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out)}
.pilule:active{transform:scale(.97)}
.pilule.encre{background:var(--ink);color:var(--night)}
.pilule.douce{background:rgba(245,243,255,.1);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pilule.encre:hover{background:#fbfaff}
  .pilule.douce:hover{color:var(--ink);background:rgba(245,243,255,.12)}
}

/* l'entrée d'un panneau : une transition posée, l'état final est l'état par défaut */
.pret .panneau > *{opacity:0;transform:translateY(22px)}
.pret.vu .panneau > *{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.pret.vu .panneau > :nth-child(2){transition-delay:.08s}
.pret.vu .panneau > :nth-child(3){transition-delay:.16s}
.pret.vu .panneau > :nth-child(4){transition-delay:.24s}
.pret.vu .panneau > :nth-child(5){transition-delay:.32s}

/* ---------- le calque : la bulle et l'île, posées sur la position écran de ton bot (le centre de la caméra). L'origine (0,0) est son centre ; --k suit sa taille (260 px = 1) ---------- */
.calque{position:fixed;left:0;top:0;width:0;height:0;z-index:2;pointer-events:none;--k:.8}
.calque .joue{position:absolute;left:0;top:0;width:0;height:0}
.calque .joue > *{opacity:0;transition:opacity .4s var(--ease-out)}
/* la bulle : encre sur nuit, coin 18, la queue vers le bot ; une réplique par écran, changée par fondu de 160 ms */
.calque .bulle{position:absolute;left:calc(var(--k) * 118px);bottom:calc(var(--k) * 62px);margin:0;width:max-content;max-width:min(320px,calc(100vw - 32px));
  background:var(--ink);color:var(--night);font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.35;padding:12px 17px;border-radius:18px;border-bottom-left-radius:6px;
  opacity:0;transform:translateY(4px);transition:opacity .16s var(--ease-out),transform .16s var(--ease-out)}
.calque .bulle.vue{opacity:1;transform:none}
.calque .bulle::after{content:"";position:absolute;left:-5px;bottom:9px;width:13px;height:13px;background:var(--ink);transform:rotate(45deg);border-radius:2px}
.calque.a-gauche .bulle{left:auto;right:calc(var(--k) * 118px);border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.calque.a-gauche .bulle::after{left:auto;right:-5px}
/* l'île : pilule noire qui se déplie en carte sombre ; boucle de 9 s. Posée à droite de ton bot (dessous, sur mobile) */
.calque .ile{position:absolute;left:calc(var(--k) * 150px);top:calc(var(--k) * 120px);width:380px;height:188px;color:var(--ink);
  background:radial-gradient(130% 120% at 18% 115%,color-mix(in oklab,var(--violet) 30%,var(--night-2)),var(--night-2) 66%);box-shadow:inset 0 1px 0 rgba(245,243,255,.09);
  clip-path:inset(0 calc(50% - 118px) calc(100% - 38px) calc(50% - 118px) round 19px);
  animation:ileForme 9s var(--ease-drawer) infinite;filter:drop-shadow(0 18px 36px rgba(18,14,40,.55))}
.calque[data-etat="avant"] .ile,.calque[data-etat="cafe"] .ile{opacity:1}
.calque[data-etat="cafe"] .bulle{bottom:calc(var(--k) * 84px)}
.ile-ligne{position:absolute;left:calc(50% - 110px);top:3px;height:32px;width:220px;display:flex;align-items:center;gap:8px}
.ile-bot{display:block;width:30px;height:30px;flex:none}
.ile-ligne b{font-size:13px;font-weight:700;white-space:nowrap}
.ile-ligne .un{animation:ileUn 9s linear infinite}
.ile-ligne .fini{position:absolute;left:38px;color:var(--ok);opacity:0;animation:ileFini 9s linear infinite}
.ile-corps{position:absolute;left:20px;right:20px;top:50px;opacity:0;transform:translateY(-6px);animation:ileCorps 9s var(--ease-out) infinite}
.ile-objet{margin:0;font-weight:700;font-size:15px;color:var(--ink)}
.ile-valider{position:relative;margin-top:14px;display:flex;align-items:center;gap:10px;height:44px}
.valider{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 8px;border-radius:999px;background:color-mix(in oklab,var(--amber) 18%,var(--night-3));color:#ffd88a;font-weight:700;font-size:15px}
.anneau{width:30px;height:30px;transform:rotate(-90deg)}
.anneau .fond{fill:none;stroke:rgba(245,243,255,.16);stroke-width:3}
.anneau .trait{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ileAnneau 9s linear infinite}
.tampon{display:inline-block;padding:5px 12px;border:2.5px solid #ffd88a;color:#ffd88a;border-radius:8px;font-weight:800;font-size:16px;letter-spacing:.04em;transform:rotate(-7deg);opacity:0;animation:ileTampon 9s var(--ease-out) infinite}
.part{position:relative;margin:12px 0 0;display:flex;gap:8px;font-size:14px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;opacity:0;animation:ilePart 9s linear infinite}
.part .annuler{color:var(--ink)}
.part i{position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--amber);transform-origin:left;animation:ileCompte 9s linear infinite}
.parti{position:absolute;left:0;top:70px;margin:0;font-weight:700;font-size:16px;color:var(--ok);opacity:0;animation:ileParti 9s linear infinite}
/* 0 à 0,8 s pilule ; 0,8 à 1,25 s déplié ; 1,8 à 2,5 s l'anneau se remplit (700 ms) ; 2,5 s tampon ; 2,8 à 6,3 s « Part dans 15 s » ; 6,4 s « Parti. » ; 7,6 s la pilule revient */
@keyframes ileForme{0%,8.9%{clip-path:inset(0 calc(50% - 118px) calc(100% - 38px) calc(50% - 118px) round 19px)}13.9%,84.4%{clip-path:inset(0 0 0 0 round 30px)}88.9%,100%{clip-path:inset(0 calc(50% - 118px) calc(100% - 38px) calc(50% - 118px) round 19px)}}
@keyframes ileCorps{0%,12%{opacity:0;transform:translateY(-6px)}15.5%,70%{opacity:1;transform:none}72.5%,100%{opacity:0}}
@keyframes ileUn{0%,70%{opacity:1}72%,100%{opacity:0}}
@keyframes ileFini{0%,70.5%{opacity:0}72.5%,98%{opacity:1}100%{opacity:0}}
@keyframes ileAnneau{0%,20%{stroke-dashoffset:100}27.8%,70%{stroke-dashoffset:0}72.5%,100%{stroke-dashoffset:100}}
@keyframes ileTampon{0%,27.8%{opacity:0;transform:rotate(-7deg) scale(1.5)}29.3%,70%{opacity:1;transform:rotate(-7deg) scale(1)}72.5%,100%{opacity:0}}
@keyframes ilePart{0%,30.5%{opacity:0}32%,69.5%{opacity:1}71%,100%{opacity:0}}
@keyframes ileCompte{0%,32%{transform:scaleX(1)}70%,100%{transform:scaleX(0)}}
@keyframes ileParti{0%,71%{opacity:0}73%,82%{opacity:1}84%,100%{opacity:0}}

/* ---------- partout : cinq mots, leur état ---------- */
.ou{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;max-width:none;color:var(--ink-2)}
.ou li{display:flex;align-items:center;font-weight:600;font-size:clamp(17px,1.35vw,20px);letter-spacing:0;line-height:1.3;white-space:nowrap}
.ou li + li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink-3);flex:none;margin:0 14px}
.ou b{font-weight:600}

/* ---------- toi : l'atelier (ton bot est l'acteur, à côté), puis « Garde ta place » ---------- */
.atelier[hidden]{display:none}
.atelier{margin-top:30px;display:grid;gap:14px;justify-items:start}
.choix{display:grid;gap:10px}
.rangee{display:flex;flex-wrap:wrap;gap:8px}
.rangee[data-choix="color"] button{border-radius:50%}
.rangee button{width:44px;height:44px;padding:0;border:0;border-radius:14px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;display:grid;place-items:center;
  transition:transform .16s var(--ease-out),background-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.rangee button:active{transform:scale(.94)}
.rangee button svg{width:36px;height:36px;display:block}
.rangee button[aria-pressed="true"]{background:color-mix(in oklab,var(--violet) 16%,transparent);box-shadow:inset 0 0 0 2px var(--violet)}
.rangee .sw{width:28px;height:28px;border-radius:50%;background:var(--c);margin:8px}
.rangee .sw.iri{background:conic-gradient(from 20deg,#a98bff,#6ea8ff,#5fd3a6,#ffbf47,#ff7fb6,#a98bff)}
.atelier [data-cest-moi]{margin-top:10px}
@media (hover:hover) and (pointer:fine){.rangee button:hover{background:rgba(245,243,255,.06)}}

.place{margin-top:30px;display:grid;gap:14px;max-width:520px}
.place[hidden]{display:none}
.compteur{margin:0 0 6px;font-size:clamp(20px,1.7vw,24px);font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.compteur b{color:var(--violet);font-family:var(--titre);font-weight:700;font-size:2em;line-height:.9;vertical-align:-.08em;margin:0 .04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.champ{display:grid;gap:6px}
.champ span{font-size:14px;font-weight:600;color:var(--ink-3)}
.champ input{height:54px;border-radius:999px;border:1px solid var(--line);background:var(--night-3);padding:0 20px;font-size:17px;color:var(--ink);width:100%;transition:border-color .2s var(--ease-out)}
.champ input:focus{border-color:var(--violet);outline:none}
.place[data-etat="erreur"] .champ input{border-color:#ff8a7a}
.piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.case{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500;color:var(--ink-2)}
.case input{position:absolute;opacity:0;width:1px;height:1px}
.case i{width:24px;height:24px;border-radius:8px;border:1px solid var(--line);background:var(--night-3);display:grid;place-items:center;flex:none;transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out)}
.case i::after{content:"";width:9px;height:5px;border:2px solid var(--night);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px);opacity:0}
.case input:checked + i{background:var(--ink);border-color:var(--ink)}
.case input:checked + i::after{opacity:1}
.case input:focus-visible + i{outline:2px solid var(--amber);outline-offset:3px}
.place .pilule{justify-self:start}
.retour{margin:0;min-height:1.5em;font-weight:600;color:var(--ok)}
.place[data-etat="erreur"] .retour{color:#ffb3a8}
.place[data-etat="note"] .champ,.place[data-etat="note"] .case,.place[data-etat="note"] .pilule{display:none}
.place[data-etat="ferme"] .compteur,.place[data-etat="ferme"] .champ,.place[data-etat="ferme"] .case,.place[data-etat="ferme"] .pilule,.place[data-etat="ferme"] .petit{display:none}
.place[data-etat="ferme"] .retour{font-size:clamp(19px,1.6vw,23px);color:var(--ink-2);font-weight:500;max-width:40ch}
.place[data-etat="note"] .retour{font-size:clamp(20px,1.7vw,24px);color:var(--ink)}
.petit{margin:0;font-size:14px;color:var(--ink-3);line-height:1.5}

/* ---------- les questions, franches ---------- */
.questions dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:44px 56px}
.questions dt{font-family:var(--titre);font-weight:600;font-size:clamp(24px,2vw,30px);letter-spacing:-.02em;line-height:1.1;margin:0}
.questions dd{margin:10px 0 0;color:var(--ink-2);font-size:18px;line-height:1.55;max-width:38ch;text-wrap:pretty}

/* ---------- les pages simples : mentions légales, confidentialité, 404 ; une colonne de lecture sous la marque ---------- */
.saut{position:absolute;left:-9999px;top:0;z-index:9;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--night);font-weight:700;text-decoration:none}
.saut:focus{left:var(--gouttiere);top:14px}
.page-simple{position:relative;z-index:1;min-height:70svh;padding:clamp(120px,18vh,180px) var(--gouttiere) 80px}
.page-simple .contenu{max-width:720px}
.page-simple h1{font-size:clamp(40px,5.4vw,76px);line-height:1;margin-bottom:28px}
.page-simple h2{font-size:clamp(24px,2.2vw,32px);line-height:1.1;margin:44px 0 10px;letter-spacing:-.02em}
.page-simple p,.page-simple li{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.page-simple p{margin:0 0 14px}
.page-simple ul{margin:0 0 14px;padding-left:22px}
.page-simple li{margin:0 0 8px}
.page-simple a{color:var(--ink);text-decoration-color:var(--ink-3);text-underline-offset:3px}
.page-simple .chapeau{font-size:clamp(20px,1.7vw,24px);color:var(--ink-2);margin:0 0 20px}
.page-simple .maj{font-size:15px;color:var(--ink-3)}
.page-simple .actions{margin-top:36px}
.page-404{min-height:100svh;display:grid;align-items:center}
.page-404 .contenu{display:grid;gap:22px;justify-items:start}
.page-404 .bot{width:160px;height:160px}
.page-404 .bot svg{width:100%;height:100%}
.page-404 .langues{display:flex;flex-wrap:wrap;gap:0 18px;margin:0;color:var(--ink-3);font-size:16px}
.pied-liens{display:grid;gap:10px;justify-items:end}
.pied .langues{display:flex;gap:0 14px;margin:0;font-size:15px}
.pied .langues a{color:var(--ink-3);text-decoration:none}
.pied .langues a[aria-current]{color:var(--ink);font-weight:700}
.pied .langues a:hover{color:var(--ink)}

/* ---------- le pied ---------- */
.pied{position:relative;z-index:1;padding:88px var(--gouttiere) 56px;overflow:hidden;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 32px;background:linear-gradient(to bottom,transparent,rgba(12,13,18,.9) 30%)}
.pied::before{content:"";position:absolute;left:-8%;right:-8%;top:0;height:140px;border-top:1px solid var(--line);border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none}
.signature{margin:0;font-family:var(--titre);font-weight:800;font-size:clamp(30px,3vw,44px);letter-spacing:-.02em;word-spacing:.04em}
.mentions{margin:0;display:flex;flex-wrap:wrap;gap:22px;font-size:15px;color:var(--ink-3)}
.mentions a{color:var(--ink-2);text-decoration:none}
.mentions a:hover{color:var(--ink)}

/* ---------- mobile recomposé : le bot en haut, la scène autour, les panneaux pleine largeur en bas ---------- */
@media (max-width:760px){
  :root{--gouttiere:18px}
  .ecran{align-items:end;padding:100px var(--gouttiere) 36px;min-height:100svh}
  .panneau,.panneau.large,.panneau.tres-large,.panneau.bas-gauche,.panneau.bas-droite{width:100%;justify-self:stretch;align-self:end}
  .panneau::before,.panneau.bas-gauche::before,.panneau.gauche::before,.panneau.droite::before,.panneau.bas-droite::before{inset:-40% -30% -50% -30%;background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(12,13,18,.9) 0%,rgba(12,13,18,.8) 40%,rgba(12,13,18,.42) 70%,rgba(12,13,18,.1) 88%,rgba(12,13,18,0) 100%)}
  h1{font-size:clamp(48px,13.5vw,60px)}
  h2{font-size:clamp(40px,11.5vw,54px)}
  .panneau.haut{align-self:end}
  .lead{font-size:18px;margin-top:18px}
  .pilules{margin-top:26px}
  .pilule{min-height:50px;padding:0 22px;font-size:16px}
  /* le calque sur mobile : la bulle au-dessus de lui, l'île dessous, Pierre à sa droite, les IA plus près */
  .calque .bulle,.calque.a-gauche .bulle{left:50%;right:auto;bottom:calc(var(--k) * 128px);transform:translate(-50%,4px);font-size:17px;padding:10px 14px;border-radius:16px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;max-width:300px;text-align:center}
  .calque .bulle.vue{transform:translate(-50%,0)}
  .calque .bulle::after,.calque.a-gauche .bulle::after{left:50%;right:auto;bottom:-5px;margin-left:-6px}
  .calque .ile{left:-179px;top:calc(var(--k) * 135px);width:358px;height:170px}
  /* 12 h 30 : Pierre est au-dessus de lui, la bulle passe dessous, la queue vers le haut */
  .calque[data-etat="pierre"] .bulle{bottom:auto;top:96px}
  .calque[data-etat="pierre"] .bulle::after{bottom:auto;top:-5px}
  .rangee{gap:8px}
  .rangee button{width:36px;height:36px}
  .questions dl{grid-template-columns:1fr;gap:26px}
  .ou{gap:4px 0}
  .ou li{font-size:17px}
  .ecran.questions .panneau::before{inset:-12% -30% -12% -30%;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(12,13,18,.97) 0%,rgba(12,13,18,.92) 55%,rgba(12,13,18,.4) 85%,rgba(12,13,18,0) 100%)}
  .ecran.galaxie{min-height:100svh}
  .ecran.questions{padding-block:100px 60px}
  .pied{padding-top:64px}
  .pied{flex-direction:column;align-items:flex-start}
  .pied-liens{justify-items:start}
}

/* ---------- réduire les animations : le bot posé à chaque écran, la galaxie en fondu, l'île en pas ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .logo.anime .g,.logo.anime .l,.logo.anime .i,.logo.anime .dot{opacity:1;animation:none;transform:none}
  .logo.anime .dot{transform:translateX(calc(-50% + .147em))}
  .pret .panneau > *{transform:none}
  .pret.vu .panneau > *{transition:opacity .5s var(--ease-out)}
  .ile,.ile *{animation-duration:9s;animation-timing-function:steps(1,end)}
  .ile{filter:none}
}

/* ---------- ?pose : tout est posé, chaque écran garde sa scène et son acteur (les captures) ---------- */
html.pose{scroll-behavior:auto}
html.pose .logo.anime .g,html.pose .logo.anime .l,html.pose .logo.anime .i,html.pose .logo.anime .dot{opacity:1;animation:none;transform:none}
html.pose .logo.anime .dot{transform:translateX(calc(-50% + .147em))}
html.pose .pret .panneau > *{opacity:1;transform:none;transition:none}
html.pose .scene{display:none}
html.pose .ecran{min-height:900px;height:900px;overflow:hidden;isolation:isolate}
html.pose .ecran.toi{height:auto}
html.pose .ecran[hidden],html.pose .pied[hidden]{display:none}
html.pose .scene-locale{position:absolute;inset:0;z-index:-1}
html.pose .scene-locale .galaxie{position:absolute;inset:0}
html.pose .scene-locale .voile{position:absolute;inset:0}
html.pose .calque{position:absolute;z-index:2}
html.pose .ile,html.pose .ile *{animation-play-state:paused;animation-delay:-2.7s}
html.pose .calque .joue > *{transition:none}
html.pose .calque .bulle{transition:none}
html.pose .voile::after{transition:none}
@media (max-width:760px){html.pose .ecran{min-height:844px;height:844px}}