/* ============================================================================
   zs-experience-n1-v1-20260902.css · L'EXPÉRIENCE N° 1 · la feuille
   ----------------------------------------------------------------------------
   La page /einstein/ devient une démonstration au scroll · la date entre,
   les axes s'allument par familles (l'or compte les nombres, le rose lit les
   astres, le cyan tire les arcanes), la carte de résonances se trace arc par
   arc, l'indice de convergence monte à son vrai chiffre, le verdict tombe.
   ⛔ Chaque effet PROUVE une chose que le texte dit déjà · aucun décor.
   ⛔ Sans JavaScript et sous prefers-reduced-motion · tout est visible,
     posé, immobile · la démonstration devient une planche.
   ============================================================================ */

#zsExp{position:relative;color:#FFF5E6;font-family:'Newsreader',Georgia,serif}
#zsExp *{box-sizing:border-box;-webkit-text-fill-color:currentColor}

/* ── l'état de base · la planche immobile (sans JS, reduced-motion, print) ── */
.exp-piste{position:relative}
.exp-colle{position:relative;padding:40px 20px}
.exp-etape{max-width:820px;margin:0 auto;padding:34px 0;text-align:center}

/* ── la chorégraphie · seulement quand le moteur la demande ──────────────── */
/* ⛔ le noyau global pose overflow-x:hidden sur html et body, et un scrollport
   caché tue position:sticky · clip clippe pareil SANS créer de scrollport.
   Le moteur n'arme la chorégraphie que si le navigateur porte clip. */
html.zsexp-vole,html.zsexp-vole body{overflow-x:clip!important}
html.zsexp-vole .exp-piste{height:420vh}
html.zsexp-vole .exp-colle{position:sticky;top:0;height:100vh;height:100dvh;
 padding:0 20px;overflow:hidden;display:block}
html.zsexp-vole .exp-etape{position:absolute;left:50%;top:50%;width:min(92vw,820px);
 transform:translate(-50%,-50%);padding:0;opacity:0;pointer-events:none;
 transition:opacity .45s ease}
html.zsexp-vole .exp-etape.exp-on{opacity:1;pointer-events:auto}
/* la carte reste en scène du deuxième au dernier temps · elle recule, elle ne part pas */
html.zsexp-vole .exp-e2.exp-fond{opacity:.26;pointer-events:none}

/* ── temps 1 · une seule ligne ───────────────────────────────────────────── */
.exp-kick{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.34em;
 color:#FFD480;text-transform:uppercase;margin-bottom:26px}
.exp-date{font-family:'Fraunces',Georgia,serif;font-weight:600;
 font-variation-settings:'opsz' 144,'SOFT' 30,'WONK' 1;
 font-size:clamp(30px,6.4vw,64px);line-height:1.12;letter-spacing:-.015em}
.exp-date i{font-style:normal;color:#FFD480;padding:0 .18em}
.exp-date .exp-l{opacity:1}
html.zsexp-vole .exp-date .exp-l{opacity:.06;transition:opacity .18s ease}
html.zsexp-vole .exp-date .exp-l.exp-tape{opacity:1}
.exp-cur{display:none}
html.zsexp-vole .exp-e1.exp-on .exp-cur{display:inline-block;width:.08em;height:.95em;
 background:#FFD480;vertical-align:-.12em;margin-left:.08em;animation:zsxCur 1.05s steps(1) infinite}
@keyframes zsxCur{50%{opacity:0}}
.exp-note{font-style:italic;color:rgba(255,245,230,.72);font-size:17px;margin-top:22px}

/* ── temps 2 · les familles et la carte ──────────────────────────────────── */
.exp-fam{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
 font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.24em;
 text-transform:uppercase;margin:14px 0 6px}
.exp-fam b{font-weight:400;opacity:.55;transition:opacity .4s}
.exp-fam b.exp-vive{opacity:1}
.exp-fam .f-or{color:#FFD480}.exp-fam .f-rose{color:#FF1F8B}.exp-fam .f-cyan{color:#B8E0FF}
.exp-carte{max-width:640px;margin:0 auto}
.exp-carte svg{width:100%;height:auto;display:block}
@media(max-height:760px){html.zsexp-vole .exp-carte{max-width:490px}}
@media(max-height:640px){html.zsexp-vole .exp-carte{max-width:420px}}

/* les nœuds · éteints puis allumés un à un, famille par famille */
html.zsexp-vole .cm-noeud{opacity:.10;transition:opacity .5s ease}
html.zsexp-vole .cm-noeud.zsx-on{opacity:1}
/* les arcs de résonance · tracés à leur longueur réelle */
html.zsexp-vole #zsExp svg > path{stroke-dasharray:var(--L,900);stroke-dashoffset:var(--L,900);
 transition:stroke-dashoffset .9s cubic-bezier(.5,0,.2,1)}
html.zsexp-vole #zsExp svg > path.zsx-trace{stroke-dashoffset:0}

/* l'orbe centrale · l'égg des 147 ans, révélé au survol ou au toucher */
.zsx-egg{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.26em;
 color:#FFD480;margin-top:12px;min-height:1.4em;opacity:0;transition:opacity .5s}
.zsx-egg.zsx-dit{opacity:1}
#zsExp .zsx-orbe-centre{cursor:pointer}

/* ── temps 3 · l'indice monte ────────────────────────────────────────────── */
.exp-indice{margin-top:8px}
.exp-chiffre{font-family:'Fraunces',Georgia,serif;font-weight:700;
 font-variation-settings:'opsz' 144;font-size:clamp(64px,13vw,128px);line-height:1;
 color:#FFD480}
.exp-sur{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;
 color:rgba(255,245,230,.65);text-transform:uppercase;margin-top:10px}
.exp-jauge{position:relative;height:2px;max-width:420px;margin:22px auto 0;
 background:rgba(255,245,230,.14)}
.exp-jauge > b{position:absolute;left:0;top:0;bottom:0;width:71%;
 background:linear-gradient(90deg,#FFD480,#FF1F8B);transform-origin:left center}
html.zsexp-vole .exp-jauge > b{transform:scaleX(var(--j,0));transition:transform .2s linear}

/* ── temps 4 · le verdict ────────────────────────────────────────────────── */
.exp-verdict{font-family:'Fraunces',Georgia,serif;font-weight:600;
 font-variation-settings:'opsz' 144,'SOFT' 30;font-size:clamp(26px,5vw,46px);line-height:1.25}
.exp-verdict em{font-style:normal;color:#FFD480}
.exp-apres{font-style:italic;color:rgba(255,245,230,.72);font-size:16.5px;margin-top:20px}
.exp-fleche{margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:16px;color:#FFD480;opacity:.8}
html.zsexp-vole .exp-e4.exp-on .exp-fleche{animation:zsxDescend 1.8s ease-in-out infinite}
@keyframes zsxDescend{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ── les gardes ──────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
 html.zsexp-vole .exp-piste{height:auto!important}
 html.zsexp-vole .exp-colle{position:relative!important;height:auto!important;overflow:visible!important;padding:40px 20px!important}
 html.zsexp-vole .exp-etape{position:relative!important;left:auto!important;top:auto!important;
  transform:none!important;opacity:1!important;pointer-events:auto!important;padding:34px 0!important;width:auto!important}
 html.zsexp-vole .cm-noeud{opacity:1!important;transition:none!important}
 html.zsexp-vole #zsExp svg > path{stroke-dashoffset:0!important;transition:none!important}
 html.zsexp-vole .exp-jauge > b{transform:scaleX(1)!important}
 html.zsexp-vole .exp-date .exp-l{opacity:1!important}
 .exp-cur,.exp-fleche{display:none!important;animation:none!important}
}
@media print{
 .exp-piste{height:auto!important}.exp-colle{position:relative!important;height:auto!important}
 .exp-etape{position:relative!important;transform:none!important;opacity:1!important}
 .cm-noeud{opacity:1!important}#zsExp svg > path{stroke-dashoffset:0!important}
 .exp-jauge > b{transform:scaleX(1)!important}.exp-cur,.exp-fleche{display:none!important}
}