/* Mise en scène « 3 rideaux » (demande de Moun, 13/10/2026).
   html.rideaux (JS + mouvement autorisé) : une piste haute + une scène collante (position:fixed) ; le défilement natif
   fait DESCENDRE les rideaux l'un par-dessus l'autre (transform piloté par rideaux.js). Sans JS ou en mouvement réduit :
   les sections s'empilent normalement (même habillage « rideau », sans animation). */

/* ---------- indicateur 1/2/3 (dans la barre du haut) ---------- */
.trio{display:flex;gap:6px;margin:0 auto}
.trio a{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px 0 6px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:rgba(11,12,15,.55);font-size:12.5px;font-weight:500;color:var(--muted);white-space:nowrap;
  transition:color .25s var(--out),border-color .25s var(--out),background-color .25s var(--out)}
.trio__n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;border:1px solid var(--line-2);
  transition:background-color .25s var(--out),color .25s var(--out),border-color .25s var(--out)}
.trio a.fait .trio__n{border-color:var(--acc);color:var(--acc)}
.trio a[aria-current="step"]{color:var(--fg);border-color:color-mix(in srgb,var(--acc) 70%,transparent);background:color-mix(in srgb,var(--acc) 12%,rgba(11,12,15,.7))}
.trio a[aria-current="step"] .trio__n{background:var(--acc);border-color:var(--acc);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.trio a:hover{color:var(--fg);border-color:var(--acc)}}
@media (max-width:899.98px){
  .trio{gap:2px}
  .trio__t{display:none}
  .trio a{padding:0;width:40px;min-height:40px;justify-content:center;border-color:transparent;background:none}
  .trio a[aria-current="step"]{background:none;border-color:transparent}
}

/* ---------- invitation « Faites défiler » (poignée, comme sur landing-v2) ---------- */
.invite{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;width:190px;height:60px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-bottom:0;border-radius:110px 110px 0 0;background:linear-gradient(180deg,#191c22,#14161b);
  box-shadow:0 -2px 26px -16px var(--tk)}
.invite__chev{color:var(--tk);animation:chev 1.6s cubic-bezier(.77,0,.175,1) infinite}
.invite__t{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-stretch:75%;line-height:1.1}
.invite__s{font-size:9.5px;color:var(--muted);letter-spacing:.06em}
@keyframes chev{50%{transform:translateY(3px)}}
@media (hover:hover){.invite{transition:border-color .3s var(--out)}.invite:hover{border-color:var(--tk)}}

/* ---------- un rideau ---------- */
.rideau{--acc:var(--tk);--acc-rgb:254,44,85;position:relative;isolation:isolate;
  background-color:#111318;
  background-image:linear-gradient(180deg,rgba(var(--acc-rgb),.13),rgba(var(--acc-rgb),.03) 34%,transparent 60%,rgba(0,0,0,.25));
  box-shadow:0 30px 60px rgba(0,0,0,.62),0 8px 20px rgba(0,0,0,.45)}
.rideau[data-type="maps"]{--acc:var(--web);--acc-rgb:110,168,255}
.rideau[data-type="site"]{--acc:var(--pres);--acc-rgb:177,140,255}
/* plissé : bandes verticales très douces, plus marquées sur les côtés (là où il n'y a pas de texte) */
.rideau__tissu{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.30) 0,rgba(255,255,255,.045) 30px,rgba(0,0,0,.06) 58px,rgba(0,0,0,.30) 104px);
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.28) 24%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.28) 76%,#000);
          mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.28) 24%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.28) 76%,#000)}
/* ourlet : bande lestée en bas, liseré couleur + couture, et une poignée qui dépasse */
.ourlet{position:absolute;left:0;right:0;bottom:0;height:20px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.24),rgba(var(--acc-rgb),.08)),#0d0f13;
  border-top:2px solid var(--acc);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -10px 24px -14px rgba(var(--acc-rgb),.6)}
.ourlet::before{content:"";position:absolute;left:0;right:0;top:7px;border-top:1px dashed rgba(255,255,255,.2)}
.ourlet__poignee{position:absolute;left:50%;top:100%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;
  height:30px;padding:0 16px;border-radius:0 0 14px 14px;border:1px solid rgba(var(--acc-rgb),.7);border-top:0;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.18),#0d0f13 90%),#0d0f13;color:var(--fg);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-stretch:80%;white-space:nowrap;
  box-shadow:0 10px 20px rgba(0,0,0,.45)}
.ourlet__poignee svg{color:var(--acc)}

.rideau__corps{position:relative}
.rideau__grille{display:grid;gap:clamp(18px,3vw,56px);align-items:center;max-width:1240px;width:100%}
@media (min-width:960px){.rideau__grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.rideau__sur{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-stretch:108%;margin-bottom:12px}
.rideau__num{font-stretch:75%;color:var(--muted);letter-spacing:.06em}
.rideau__titre{font-size:clamp(2rem,1rem + 3.2vw,3.9rem);font-weight:700;font-stretch:66%;line-height:.94;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.rideau__sous{margin-top:14px;color:#cfcdc6;max-width:52ch;font-size:clamp(.98rem,.92rem + .3vw,1.1rem)}
.rideau .carte{background:rgba(20,22,27,.92)}
.rideau__media{display:grid;gap:10px}
.ecran{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid var(--line-2);box-shadow:0 24px 60px -24px rgba(var(--acc-rgb),.45)}
.ecran video{width:100%;height:100%;object-fit:cover}
.rideau__ex{font-size:13px;color:var(--dim-aa)}
.rideau[data-etape="magie"] .rideau__sous{display:none}
@media (max-width:959.98px){
  .rideau__media .vignettes,.rideau__media .faits{display:none}
  .rideau__media{grid-template-columns:minmax(0,1fr);max-width:520px}
  .rideau[data-etape="magie"] .rideau__media{display:none}
}
@media (max-width:959.98px) and (max-height:760px){.rideau__sous{display:none}}
@media (max-width:767.98px){html.rideaux .rideau__sous{display:none}.rideau .carte{padding:16px}}
@media (max-width:767.98px){.rideau__sous{font-size:.95rem;margin-top:10px}.rideau__sur{margin-bottom:8px}}

.voile{position:absolute;inset:0;background:#05060a;opacity:0;pointer-events:none;z-index:6}

/* ---------- mode scène (JS + mouvement autorisé) ---------- */
html.rideaux,html.rideaux body{overflow-anchor:none}
html.rideaux .piste{position:relative;height:calc(var(--pas,100vh) * 3.25 + 100vh)}
html.rideaux .scene{position:fixed;top:0;left:0;right:0;z-index:1;height:100vh;height:100dvh;overflow:hidden;contain:layout paint}
html.rideaux .fond,html.rideaux .rideau{position:absolute;inset:0;will-change:transform}
html.rideaux .fond{z-index:1;transform-origin:50% 0}
html.rideaux .rideau{z-index:calc(10 + var(--z,0));transform:translate3d(0,calc(-100% - 60px),0);transform-origin:50% 0}
html.rideaux .rideau[data-i="1"]{--z:1}html.rideaux .rideau[data-i="2"]{--z:2}html.rideaux .rideau[data-i="3"]{--z:3}
html.rideaux .rideau__corps{position:absolute;inset:0;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;
  padding:calc(var(--nav-h) + clamp(10px,3vh,40px)) 0 calc(20px + clamp(16px,4vh,48px))}
html.rideaux .rideau__grille{margin-block:auto}
html.rideaux .apres{position:relative;z-index:2;background:var(--bg);box-shadow:0 -30px 60px rgba(0,0,0,.55);border-top:1px solid var(--line)}

/* ---------- mode empilé (sans JS / mouvement réduit) ---------- */
html:not(.rideaux) .fond{position:relative;min-height:min(100vh,1000px)}
html:not(.rideaux) .rideau{margin-bottom:64px;scroll-margin-top:var(--nav-h)}
html:not(.rideaux) .rideau__corps{padding:calc(var(--nav-h) + 24px) 0 64px}
html:not(.rideaux) .voile{display:none}
html:not(.rideaux) .invite__chev{animation:none}

@media (prefers-reduced-motion:reduce){.invite__chev,.halo{animation:none!important}}
.detecte.secoue{animation:secoue .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes secoue{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.rideau[data-etape="magie"] .rideau__grille{align-items:start}