/* ============================================================================
   act2-3.css — mise en scène des actes II et III.
   ----------------------------------------------------------------------------
   Acte II, « Le laissez-passer » : deux couloirs côte à côte, allumés étape par
   étape par act2.js. Le couloir suivi (data-follow) est mis en avant ; les deux
   arrivent aux résultats, et la phrase .act2__both le dit quand ils sont arrivés.

   Acte III, « Les deux cartes » : les deux relevés, rapprochés par la variable
   --mix (0 = côte à côte, 1 = superposés rang par rang) qu'écrit act3.js. Un rang
   ne s'allume que si les deux relevés y citent la même page (.is-common) : aucun
   ici. La réserve (.act3__reserve) reste visible à l'écran en toutes circonstances.

   Trois replis, tous ici : sans JavaScript (.sg-nojs, les commandes disparaissent
   et tout s'affiche à l'état final), sous 768 px (les gestes deviennent des
   boutons, les colonnes s'empilent) et en mouvement réduit (états fixes).
   shell.css fournit la grille générique et les tokens de charte.
   ========================================================================= */

/* Note de specificite : shell.css pose .act p{max-width:62ch} (0,1,1). Les regles
   de largeur ci-dessous sont donc prefixees par .act2 / .act3 pour passer devant. */

/* ======================================================= ACTE II, couloirs */
.sg-js .act--2{--h:320vh;--h-m:260vh}

.act2__ctl{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:18px;padding:12px 14px;
  border:1px solid rgba(138,143,152,.24);background:rgba(3,5,10,.5);
}
.act2__ctl .sg-switch__txt{font-weight:600}
/* L'etat « sans session » n'est pas un refus : l'interrupteur passe au jaune de
   l'ecran d'attente, pas au rouge d'alerte de la coquille. */
.act2__ctl .sg-switch input:checked + .sg-switch__box{border-color:var(--crawl);background:rgba(255,201,60,.2)}
.act2__ctl .sg-switch input:checked + .sg-switch__box::after{background:var(--crawl)}

/* Les deux libellés d'état sont dans le HTML ; act2.js n'en montre qu'un, par
   l'attribut natif hidden (aucune phrase écrite en JavaScript). */
.act2 .act2__follow{font-family:var(--mono);font-size:.72rem;color:var(--holo);flex:1 1 22ch;min-width:0}

.act2 .act2__ctl-hint{font-family:var(--mono);font-size:.68rem;color:var(--imp);flex:1 1 26ch;min-width:0}
.act2__replay{flex:0 0 auto}

.act2__stage{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2vw,24px);margin-top:clamp(14px,2.4vh,24px);
}
.act2__lane{
  border:1px solid rgba(138,143,152,.22);border-top-width:2px;
  background:rgba(3,5,10,.52);padding:13px 15px 15px;
  transition:border-color .35s,background .35s,transform .35s var(--ease);
}
.act2__stage[data-follow="keep"] .act2__lane[data-lane="keep"],
.act2__stage[data-follow="wipe"] .act2__lane[data-lane="wipe"]{
  border-color:var(--holo);background:rgba(95,212,255,.07);transform:translateY(-2px);
}
.act2 .act2__lane-ttl{font-weight:700;font-size:.96rem;line-height:1.25;max-width:none}
.act2 .act2__lane-sub{font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--imp);margin-top:5px;max-width:none}

.act2__steps{list-style:none;display:grid;gap:13px;margin-top:14px}
.act2__step{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  opacity:.3;transition:opacity .45s var(--ease);
}
.act2__step.is-on{opacity:1}
.act2__step-txt{font-size:.84rem;line-height:1.45}
.act2__dot{
  position:relative;width:11px;height:11px;border-radius:50%;margin-top:.44em;
  border:1px solid var(--imp);background:transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.act2__step:not(:last-child) .act2__dot::after{
  content:'';position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);
  width:1px;height:calc(13px + 1.1em);background:rgba(138,143,152,.38);
}
.act2__step.is-on .act2__dot{border-color:var(--holo);background:var(--holo);box-shadow:0 0 12px rgba(95,212,255,.55)}
/* L'écran d'attente : jaune, et il clignote tant qu'on y est. */
.act2__step[data-step="wait"].is-on .act2__dot{border-color:var(--crawl);background:var(--crawl);box-shadow:0 0 12px rgba(255,201,60,.5)}
.act2__step[data-step="wait"].is-here .act2__dot{animation:a2-wait 1.15s infinite}
.act2__step[data-step="wait"].is-on .act2__step-txt{color:#f0e4bf}
@keyframes a2-wait{0%,100%{opacity:1}50%{opacity:.3}}

.act2 .act2__lane-end{
  margin-top:13px;padding-top:9px;border-top:1px solid rgba(138,143,152,.2);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--imp);max-width:none;
  opacity:.35;transition:opacity .5s var(--ease),color .5s;
}
.act2__lane.is-done .act2__lane-end{opacity:1;color:var(--holo)}

.act2 .act2__both{
  margin-top:clamp(14px,2.4vh,22px);font-size:clamp(1rem,1.5vw,1.14rem);max-width:66ch;
  padding-left:14px;border-left:2px solid var(--holo);
  opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.act2__both.is-on,.act--2[data-phase="2"] .act2__both{opacity:1;transform:none}
.act2 .act2__caveat{margin-top:12px;font-family:var(--mono);font-size:.7rem;line-height:1.55;color:var(--imp);max-width:70ch}

/* ======================================================= ACTE III, relevés */
.sg-js .act--3{--h:320vh;--h-m:260vh}

.act3{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-areas:'head head' 'intro stage' 'ctl stage' 'count stage' 'reserve stage';
  gap:clamp(10px,1.6vh,16px) clamp(20px,4vw,44px);align-items:start;
}
.act3 > .act__head{grid-area:head;margin-bottom:clamp(8px,1.4vh,16px)}
.act3__intro{grid-area:intro}
.act3__ctl{grid-area:ctl}
.act3__stage{grid-area:stage}
.act3 .act3__count{grid-area:count}
.act3 .act3__reserve{grid-area:reserve}

/* la commande */
.act3__ctl{border:1px solid rgba(138,143,152,.24);background:rgba(3,5,10,.5);padding:11px 14px 13px}
.act3__lbl{display:block;font-weight:600;font-size:.88rem;color:var(--holo)}
.act3__range{
  -webkit-appearance:none;appearance:none;display:block;
  width:100%;max-width:360px;height:26px;margin-top:8px;background:transparent;cursor:pointer;
}
.act3__range::-webkit-slider-runnable-track{height:2px;background:rgba(138,143,152,.45)}
.act3__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-8px;
  border:0;border-radius:50%;background:var(--holo);box-shadow:0 0 12px rgba(95,212,255,.55)}
.act3__range::-moz-range-track{height:2px;background:rgba(138,143,152,.45)}
.act3__range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--holo)}
.act3__range:focus-visible{outline:2px solid var(--holo);outline-offset:4px}
.act3 .act3__scale{display:flex;margin-top:3px;justify-content:space-between;max-width:360px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--imp)}
.act3__btns{display:none;gap:8px;margin-top:4px}
.act3__btns .sg-btn.is-on{border-color:var(--holo);color:var(--holo)}
.act3 .act3__hint{font-family:var(--mono);font-size:.68rem;line-height:1.5;color:var(--imp);margin-top:9px;max-width:46ch}

/* les deux relevés : --mix va de 0 (côte à côte) à 1 (superposés) */
.act3__stage{--mix:0;font-family:var(--mono)}
.act3 .act3__heads,.act3__row{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:calc(10px + (1 - var(--mix)) * clamp(18px,5vw,74px));
}
.act3 .act3__heads{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--imp);
  padding-bottom:7px;border-bottom:1px solid rgba(138,143,152,.22);max-width:none}
.act3__heads span[data-side="a"]{text-align:right}
/* la colonne du milieu doit mesurer exactement comme celle des lignes, sinon
   les deux en-tetes ne tombent pas sur leurs colonnes. */
.act3__heads span[data-side="mid"]{opacity:var(--mix);text-align:center;
  width:calc(14px + var(--mix) * 30px);overflow:hidden}

.act3__rows{list-style:none;margin-top:7px;display:grid;gap:3px}
.act3__row{transition:background .3s}
.act3__cell{
  display:flex;align-items:baseline;gap:7px;min-width:0;
  font-size:.76rem;line-height:1.9;padding:0 8px;
  background:rgba(8,12,19,.55);border:1px solid rgba(138,143,152,.14);
}
.act3__cell[data-side="a"]{justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.act3__cell b{font-weight:500;color:#dfe6ee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act3__n{font-style:normal;color:var(--imp);font-size:.68rem;flex:0 0 auto;opacity:calc(1 - var(--mix))}

.act3__mid{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;
  width:calc(14px + var(--mix) * 30px);overflow:hidden}
/* <em> porte un souligne dans la coquille : on le retire ici. */
.act3__rank{font-style:normal;border-bottom:0;font-size:.68rem;color:var(--holo);opacity:var(--mix)}
.act3__lamp{display:block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(138,143,152,.5);background:transparent;opacity:var(--mix);transition:background .3s,box-shadow .3s}
/* un rang ne s'allume que si les deux relevés y citent la même page */
.act3__row.is-common .act3__lamp{background:var(--holo);border-color:var(--holo);box-shadow:0 0 10px rgba(95,212,255,.7)}
.act3__row.is-common{background:rgba(95,212,255,.08)}

.act3 .act3__demo{margin-top:9px;font-size:.62rem;line-height:1.5;color:var(--imp);max-width:none}

.act3__count{display:flex;align-items:baseline;gap:9px;font-family:var(--mono);
  border-top:1px solid rgba(138,143,152,.22);padding-top:10px}
.act3__count-lbl{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--imp)}
.act3__count-val{font-family:var(--ttl);font-size:1.7rem;font-weight:800;color:#fff;line-height:1}
.act3__count-of{font-size:.68rem;color:var(--imp)}

.act3__reserve{
  font-family:var(--mono);font-size:.74rem;line-height:1.6;color:#b9c4cf;max-width:56ch;
  border:1px solid rgba(95,212,255,.26);border-left-width:3px;
  background:rgba(95,212,255,.05);padding:11px 13px;
}
.act3__reserve strong{color:var(--holo)}

/* ============================================================== 880 px */
@media (max-width:880px){
  .act3{grid-template-columns:1fr;
    grid-template-areas:'head' 'intro' 'ctl' 'stage' 'count' 'reserve'}
}

/* ====================================== 768 px : gestes simplifiés */
@media (max-width:767px){
  /* Acte II : les deux couloirs s'empilent, l'interrupteur reste un interrupteur. */
  .act2__stage{grid-template-columns:1fr}
  .act2__ctl{gap:8px 12px}
  .act2__follow,.act2__ctl-hint{flex:1 1 100%}
  .act2__lane{padding:11px 12px 13px}

  /* Acte III : le curseur laisse la place à deux boutons. */
  .act3__range,.act3__scale{display:none}
  .act3__btns{display:flex}
  .act3__cell{font-size:.68rem;line-height:1.8;padding:0 6px}
  .act3__heads{font-size:.52rem}
}

/* ========================================== sans JavaScript : état final */
/* Corrige a la source dans shell.css (.act__sticky passe en position:relative
   dans ces deux modes) : plus rien a rustiner ici. */
.sg-nojs .act2__ctl,.sg-nojs .act3__ctl{display:none}
.sg-nojs .act2__step,.sg-nojs .act2__lane-end{opacity:1}
.sg-nojs .act2__dot{border-color:var(--holo);background:var(--holo)}
.sg-nojs .act2__step[data-step="wait"] .act2__dot{border-color:var(--crawl);background:var(--crawl)}
.sg-nojs .act2__lane-end{color:var(--holo)}
.sg-nojs .act2__both{opacity:1;transform:none}
.sg-nojs .act3__stage{--mix:1}

/* ============================================== mouvement réduit : états fixes */
@media (prefers-reduced-motion:reduce){
  .act2__step,.act2__lane-end{opacity:1}
  .act2__step[data-step="wait"].is-here .act2__dot{animation:none}
  .act2__both{opacity:1;transform:none}
  .act2__lane{transform:none!important}
}


/* ====================================== chapeau d'acte (essai, acte II seul)
   Le premier paragraphe d'un acte est une entree en matiere, pas du corps de
   texte : type plus grand, mesure nettement plus large que les 62ch communs.
   Pas la pleine largeur pour autant -- a 1440 px une ligne ferait ~150
   caracteres et l'oeil perd sa ligne en revenant a gauche. 86ch tient le
   compromis : le bloc remplit l'espace sous le titre sans devenir penible. */
.act__chapo{
  max-width:86ch;
  font-size:clamp(1.02rem,1.35vw,1.22rem);
  line-height:1.62;
}
@media (max-width:900px){ .act__chapo{max-width:100%} }