/* ============================================================================
   acts.css — mise en scène propre à chaque acte.
   shell.css fournit la grille générique (.act, .act__bg, .act__sticky, .act__inner) ;
   ici on ne décrit que ce qui appartient à un acte : la jauge et le générique de
   l'acte 0, le sélecteur de vaisseaux et les issues de l'acte I, le cadre de
   rapport de l'acte VI. Les actes II à V n'ont pour l'instant aucun style propre.
   ========================================================================= */

/* ================================================================ ACTE 0 */
.sg-js .act--0{--h:300vh;--h-m:260vh}

.act0__canvas{position:sticky;top:0;height:100vh;width:100%;margin-bottom:-100vh;z-index:0;
  pointer-events:none;opacity:.9}

/* Les deux temps de l'acte 0 occupent la même place ; un seul est montré.
   Grille à une cellule, et pas `position:absolute;inset:0` : en absolu, le
   générique ne pèse rien et la hauteur du bloc reste celle de la jauge, donc
   tout ce que le générique a en plus déborde par le bas, hors de l'écran et
   hors de portée du filet des fenêtres peu hautes. Même correction qu'à
   l'acte IV, voir `act4-6.css`. */
.act0{position:relative;display:grid;align-items:center}
.act0 > .act0__stage{grid-area:1/1}
.act0__stage{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sg-js .act0__crawl-stage{opacity:0;pointer-events:none;transform:scale(.98)}
.sg-js body.sg-crawl .act0__crawl-stage{opacity:1;pointer-events:auto;transform:none}
.sg-js body.sg-crawl .act0__stage[data-stage="gate"]{opacity:0;pointer-events:none;transform:scale(1.03)}

.act0__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,4vw,52px);align-items:start}
.act0__left p{margin-bottom:12px}
.act0__pledge{
  font-family:var(--mono);font-size:.78rem;line-height:1.6;color:#b9c4cf;
  border:1px solid rgba(95,212,255,.26);border-left-width:3px;
  background:rgba(95,212,255,.05);padding:12px 14px;margin-top:18px;max-width:52ch;
}
.act0__pledge strong{color:var(--holo)}
.act0__actions{margin-top:18px}

/* la zone de mesure */
.act0__pad{
  position:relative;aspect-ratio:1/1;max-width:300px;margin:0 auto;
  display:grid;place-items:center;
  border:1px solid rgba(138,143,152,.28);border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(34,60,82,.42),rgba(5,7,12,.1) 70%);
  touch-action:none;cursor:crosshair;
}
.act0__pad.is-live{border-color:rgba(95,212,255,.5)}
.act0__pad.is-done{border-color:rgba(95,212,255,.8);box-shadow:0 0 40px rgba(95,212,255,.18)}
.act0__gauge{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.act0__gauge-bg{fill:none;stroke:rgba(138,143,152,.22);stroke-width:2}
.act0__gauge-fg{fill:none;stroke:var(--holo);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset .14s linear}
.act0__pct{font-family:var(--mono);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;color:#fff;line-height:1}
.act0__pct span{font-size:.4em;color:var(--imp);margin-left:.1em}
.act0__hint{position:absolute;bottom:14%;font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--imp);transition:opacity .3s}
.act0__pad.is-live .act0__hint{opacity:0}
.act0__pad.is-done .act0__hint{opacity:1;color:var(--holo)}

/* le journal des mesures */
.act0__log{margin-top:18px;border:1px solid rgba(138,143,152,.22);background:rgba(3,5,10,.6)}
.act0__log-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--imp);padding:7px 10px;border-bottom:1px solid rgba(138,143,152,.2)}
.act0__log-net{color:var(--holo)}
.act0__log-lines{list-style:none;font-family:var(--mono);font-size:.7rem;line-height:1.55;
  height:9.4em;overflow:hidden;padding:7px 10px;color:#9fb0bf;margin:0}
.act0__log-lines li{display:flex;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act0__log-lines li b{color:#dfe6ee;font-weight:500}
.act0__log-lines li em{border:0;color:var(--holo)}
.act0__log-lines li.is-warn b{color:var(--crawl)}

/* le générique, texte jaune en perspective fuyante */
.crawl{
  perspective:340px;perspective-origin:50% 0%;
  height:min(74vh,620px);overflow:hidden;
  mask-image:linear-gradient(to top,transparent 2%,#000 26%,#000 62%,transparent 94%);
  -webkit-mask-image:linear-gradient(to top,transparent 2%,#000 26%,#000 62%,transparent 94%);
}
.crawl__text{
  color:var(--crawl);text-align:justify;font-weight:700;letter-spacing:-.01em;
  font-variation-settings:'wdth' 112;
  width:min(640px,86%);margin:0 auto;
  transform-origin:50% 100%;
  transform:rotateX(58deg) translate3d(0,95%,0);
  animation:sg-crawl 27s linear forwards;
  animation-play-state:paused;
}
body.sg-crawl .crawl__text{animation-play-state:running}
body.sg-crawl-skip .crawl__text{animation:none;transform:rotateX(0deg);text-align:left}
body.sg-crawl-skip .crawl{perspective:none;height:auto;mask-image:none;-webkit-mask-image:none;overflow:visible}
/* LE DÉPART ET L'ARRIVÉE DU GÉNÉRIQUE, ET POURQUOI CES VALEURS-LÀ.
   Le texte monte dans un plan incliné, derrière un masque qui ne laisse voir
   qu'une bande au milieu du cadre. Le départ dit donc à quelle distance sous
   cette bande le texte commence, et il coûte des secondes d'écran vide.
   La version précédente partait de 120 % en 48 s : le titre n'entrait dans la
   bande qu'au bout de huit secondes, et les vingt dernières secondes se
   jouaient après la sortie du dernier paragraphe. Le visiteur, lui, repart au
   défilement bien avant — il ne voyait jamais le générique arriver.
   95 % fait entrer « Épisode II » dans la bande dès la première seconde et
   pose le titre vers la deuxième : on le voit arriver. −90 % est la hauteur à
   laquelle le dernier paragraphe vient de sortir par le haut, d'où les 27 s :
   plus une seconde d'écran vide au bout. La vitesse de lecture, elle, ne
   change pas — c'est la même qu'avant, à 7 % de hauteur de texte par seconde. */
@keyframes sg-crawl{
  from{transform:rotateX(58deg) translate3d(0,95%,0)}
  to  {transform:rotateX(58deg) translate3d(0,-90%,0)}
}
.crawl__text p{max-width:none;margin-bottom:1.1em;font-size:clamp(1rem,2.1vw,1.45rem);line-height:1.42}
.crawl__ep{text-align:center;font-family:var(--mono);font-weight:500;letter-spacing:.5em;text-transform:uppercase;
  font-size:clamp(.8rem,1.5vw,1rem)!important}
.crawl__ttl{text-align:center;font-size:clamp(1.9rem,6.4vw,3.6rem);line-height:.95;margin:0 0 1.2em;
  letter-spacing:-.04em;font-variation-settings:'wdth' 125}
.act0__crawl-actions{margin-top:10px;text-align:center}
/* générique abrégé ou arrivé au bout : le bouton « abréger » n'a plus d'objet */
body.sg-crawl-skip .act0__crawl-actions{visibility:hidden}

/* ================================================================ ACTE I */
.sg-js .act--1{--h:400vh;--h-m:330vh}

/* les trois plaques d'issue, superposées au fond, révélées par le verdict */
.act1__outcome-plates{position:sticky;top:0;height:100vh;margin-bottom:-100vh;z-index:0;overflow:hidden;pointer-events:none}
.act1__op{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;
  transition:opacity .9s var(--ease),transform 1.4s var(--ease);transform:scale(1.06)}
body[data-outcome="passed"]  .act1__op[data-outcome="passed"],
body[data-outcome="held"]    .act1__op[data-outcome="held"],
body[data-outcome="refused"] .act1__op[data-outcome="refused"]{opacity:.85;transform:scale(1)}
.act1__outcome-plates::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(5,7,12,.84),rgba(5,7,12,.5) 40%,rgba(5,7,12,.93))}

.act--1 .act__title{font-size:clamp(1.9rem,5.2vw,3.4rem)}
.act--1 .act__line{margin-top:6px}
.act--1 .act__head{margin-bottom:clamp(10px,1.6vh,18px)}
.act1__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:'text fleet' 'run reveal';gap:clamp(14px,2.2vw,30px) clamp(20px,4vw,48px);align-items:start}
.act1__text{grid-area:text}
.act1__fleet{grid-area:fleet}
.act1__run{grid-area:run}
.act1__side{grid-area:reveal;align-self:stretch}
.act1__pick-lbl{margin-top:12px;color:var(--holo);font-weight:600}

.act1__flag{margin-top:16px;border:1px solid rgba(138,143,152,.24);padding:11px 13px;background:rgba(3,5,10,.5)}
.act1__flag-note{font-family:var(--mono);font-size:.7rem;color:var(--imp);margin-top:7px;max-width:44ch}
.act1__flag-note.is-punch{color:var(--crawl)}

/* sélecteur à 4 vaisseaux */
.act1__fleet{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act1__ship{
  font:inherit;text-align:left;cursor:pointer;color:var(--ink);
  background:rgba(3,5,10,.55);border:1px solid rgba(138,143,152,.24);
  padding:12px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:'ic name' 'ic desc';
  gap:2px 10px;align-items:start;transition:border-color .2s,background .2s,transform .2s var(--ease);
}
.act1__ship:hover{border-color:rgba(95,212,255,.6);background:rgba(34,60,82,.4);transform:translateY(-2px)}
.act1__ship.is-sel{border-color:var(--holo);background:rgba(95,212,255,.1)}
.act1__ship-ic{grid-area:ic;width:30px;height:30px;color:var(--holo)}
.act1__ship-name{grid-area:name;font-weight:700;font-size:.92rem;line-height:1.2}
.act1__ship-desc{grid-area:desc;font-size:.74rem;color:var(--imp);line-height:1.4}
.act1__ship[data-outcome="refused"].is-sel{border-color:var(--alert);background:rgba(224,49,39,.12)}
.act1__ship[data-outcome="refused"].is-sel .act1__ship-ic{color:var(--alert)}

/* la piste de passage */
.act1__run{margin-top:4px;border-top:1px solid rgba(138,143,152,.22);padding-top:14px}
.act1__track{position:relative;height:52px;overflow:hidden;
  background:linear-gradient(to right,transparent,rgba(34,60,82,.3) 70%,rgba(34,60,82,.55));
  border:1px solid rgba(138,143,152,.18)}
.act1__wall{position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--imp);opacity:.6;
  box-shadow:-10px 0 24px rgba(138,143,152,.3)}
.act1__beam{position:absolute;right:16%;top:0;bottom:0;width:2px;background:var(--holo);opacity:0;
  box-shadow:0 0 18px 4px rgba(95,212,255,.5)}
.act1__flyer{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--holo);
  transition:left 1.05s var(--ease),transform .5s var(--ease),opacity .4s,color .4s}
.act1__flyer-ic{width:34px;height:34px}

.act1__run[data-state="flying"] .act1__flyer{left:calc(100% - 52px)}
.act1__run[data-state="flying"] .act1__beam{opacity:1;animation:sg-beam .9s var(--ease) .35s}
.act1__run[data-state="passed"] .act1__flyer{left:calc(100% + 12px);opacity:0}
.act1__run[data-state="held"] .act1__flyer{left:62%;color:var(--crawl)}
.act1__run[data-state="held"] .act1__flyer-ic{animation:sg-pulse 1.3s infinite}
.act1__run[data-state="refused"] .act1__flyer{left:34%;color:var(--alert);transform:translateY(-50%) rotate(-16deg)}
@keyframes sg-beam{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes sg-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* le verdict */
.act1__verdict{margin-top:14px;min-height:4.6em}
.act1__verdict-idle{font-family:var(--mono);font-size:.76rem;color:var(--imp)}
.act1__card{display:flex;gap:12px;align-items:flex-start;border-left:3px solid var(--imp);padding-left:12px;
  animation:sg-card-in .5s var(--ease)}
.act1__card .sg-icon{width:26px;height:26px;flex:0 0 auto;margin-top:2px}
.act1__card-ttl{font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.06rem;line-height:1.2;
  font-variation-settings:'wdth' 112}
.act1__card-line{font-size:.88rem;color:#b9c4cf;max-width:46ch}
.act1__card[data-outcome="passed"]{border-color:var(--holo)}
.act1__card[data-outcome="passed"] .act1__card-ttl,.act1__card[data-outcome="passed"] .sg-icon{color:var(--holo)}
.act1__card[data-outcome="held"]{border-color:var(--crawl)}
.act1__card[data-outcome="held"] .act1__card-ttl,.act1__card[data-outcome="held"] .sg-icon{color:var(--crawl)}
.act1__card[data-outcome="refused"]{border-color:var(--alert)}
.act1__card[data-outcome="refused"] .act1__card-ttl,.act1__card[data-outcome="refused"] .sg-icon{color:var(--alert)}
@keyframes sg-card-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* le relevé, en chasse fixe : ce que le navigateur dit de lui-même */
.act1__readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;margin-top:12px;
  background:rgba(138,143,152,.2);border:1px solid rgba(138,143,152,.2);font-family:var(--mono)}
.act1__readout > div{background:#06090f;padding:9px 11px}
.act1__readout > div:last-child{grid-column:1/-1}
.act1__readout dt{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--imp);margin-bottom:3px}
.act1__readout dd{font-size:.82rem;color:#dfe6ee}
.act1__readout dd.is-true{color:var(--alert)}
.act1__readout dd.is-false{color:var(--holo)}
.act1__run-actions{margin-top:12px}

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

/* ================================================= ACTES II à V (réduits) */
/* Rien de propre pour l'instant : ils héritent de .act / .act--narrow.
   Les gestes décrits dans .act__todo sont à construire. */

/* ================================================================ ACTE VI */
.act6__report{position:relative;margin-top:18px;max-width:640px}
.act6__frame{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);color:rgba(34,60,82,.55)}
.sg-uimg--ph.act6__frame{width:auto;height:auto}
.act6__report-in{position:relative;background:rgba(255,255,255,.72);border:1px solid rgba(34,60,82,.3);
  padding:clamp(18px,3vw,28px);color:#0c1218;backdrop-filter:blur(2px)}
.act6__report-in p{max-width:58ch}
.act6__cta{margin-top:18px}
.act--6 .act__todo{color:#46525e;border-left-color:rgba(34,60,82,.35)}

@media (max-width:880px){
  .act0__grid{grid-template-columns:1fr;gap:18px}
  .act0__pad{max-width:220px;margin:0}
  .act1__grid{grid-template-columns:1fr;grid-template-areas:'text' 'fleet' 'run' 'reveal'}
}
@media (max-width:767px){
  /* Les gestes complexes se réduisent à des boutons simples. */
  .act0__pad{max-width:180px;aspect-ratio:1/1}
  .act0__log-lines{height:6.3em}
  .act1__fleet{grid-template-columns:1fr}
  .act1__ship{padding:10px}
  .act1__ship-ic{width:24px;height:24px}
  .act1__track{height:46px}
  .act1__readout{grid-template-columns:1fr}
  .crawl{height:min(56vh,420px)}
}
@media (prefers-reduced-motion:reduce){
  /* Empilement statique : les deux temps de l'acte 0 cohabitent, le générique ne défile pas.
     La grille à une cellule est défaite, sans quoi les deux temps se peindraient l'un sur l'autre. */
  .act0{display:block}
  .sg-js .act0__crawl-stage{opacity:1;pointer-events:auto;transform:none;margin-top:28px}
  .sg-js body.sg-crawl .act0__stage[data-stage="gate"]{opacity:1;pointer-events:auto;transform:none}
  .crawl{perspective:none;height:auto;overflow:visible;mask-image:none;-webkit-mask-image:none}
  .crawl__text{transform:none;animation:none;text-align:left;width:100%}
  .act0__canvas{display:none}
  .act1__outcome-plates{position:absolute;height:100%;margin:0}
  .act1__flyer,.act1__beam{display:none}
  .act1__reveal{opacity:1;transform:none}
}