/* ─────────────────────────────────────────────────────────────────────────────
   Alfred — page d'accueil.
   Chargée par-dessus style.css, qui porte la palette. Rien ici n'est utilisé
   par les autres pages.

   Le principe de la page : un seul espace 3D traverse le premier acte. Le bloc
   d'agent tourne, la caméra descend vers les trois écrans, la vidéo prend le
   relais. Les textes ne défilent pas — ils sont accrochés à des points de la
   scène et projetés à l'écran, sinon ils se désynchronisent de ce qu'ils
   commentent.
   ───────────────────────────────────────────────────────────────────────────── */

/* style.css habille les pages classiques : `section { padding: 96px 0 }` et la
   bordure entre sections y sont justes, ici elles ne le sont pas. On les remet
   à zéro, et chaque bande reprend la main par sa propre classe. */
main section { padding: 0; }
main section + section { border-top: 0; }

/* ═══════════════════════════════════════════════════════════════════
   Le site d'Alfred — prototype complet, 10 sections.
   Le graphe 3D est au repos dans le héros et ne prend la caméra qu'en
   section 5, là où le visiteur veut enfin comprendre le mécanisme.
   Palette « lueur langflow » : indigo #421FCB → violet #AA1FCD → magenta #D31E47.
   Parti pris sombre unique — chaque couleur est peinte explicitement.
   ═══════════════════════════════════════════════════════════════════ */


*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--ink);color:var(--txt);font-family:var(--sans);
  font-size:16px;line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--violet);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--lav);outline-offset:3px;border-radius:6px}
.wrap{width:min(var(--page),calc(100% - 40px));margin-inline:auto}

h2{font-weight:500;font-size:clamp(26px,4.4vw,44px);line-height:1.05;letter-spacing:-.036em;margin:0 0 16px;text-wrap:balance}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--violet);margin:0 0 14px}
.lede{margin:0 0 16px;color:var(--txt-2);font-size:clamp(15px,1.5vw,17.5px);max-width:58ch}
.lede strong{color:var(--txt);font-weight:500}
.sec{padding:clamp(76px,13vh,150px) 0;position:relative;z-index:2}
.sec-head{margin-bottom:44px}

/* ── Scène 3D ───────────────────────────────────────────────────── */
/* Le fondu ne sert qu'à la sortie : la scène s'allume avant que quoi que ce
   soit en soit visible, donc à l'entrée il n'y a rien à fondre. */
#stage{
  position:fixed;inset:0;z-index:0;opacity:1;transition:opacity .3s ease;
  background:
    radial-gradient(90% 60% at 50% 10%,rgba(66,31,203,.2),transparent 62%),
    radial-gradient(70% 50% at 84% 76%,rgba(211,30,71,.1),transparent 66%),
    var(--ink);
}
#scene{display:block;width:100%;height:100%}
#vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 40%,rgba(7,6,13,.78) 100%)}
#fallback{display:none;position:absolute;inset:0}
#fallback canvas{width:100%;height:100%;display:block}
body.no-webgl #scene{display:none}
body.no-webgl #fallback{display:block}
/* Les sections posées sur fond opaque masquent la scène sans la détruire. */
.opaque{background:var(--ink)}

/* ── Barre ──────────────────────────────────────────────────────── */
/* Bandeau entièrement transparent : la scène passe dessous sans être coupée
   par un voile. En contrepartie le logo prend une ombre portée — sur les
   passages clairs de la scène, du blanc sur du blanc ne se lit plus. */
/* `header.nav` et non `.nav` : la feuille partagée pose un fond opaque et un
   flou sur ce même élément, avec une spécificité supérieure. Un simple `.nav`
   ne l'emporte pas, et le bandeau restait noir. */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;padding:20px 0;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{
  font-weight:600;font-size:clamp(21px,2.2vw,25px);letter-spacing:-.025em;
  text-shadow:0 2px 18px rgba(7,6,13,.75);
}
.logo i{color:var(--violet);font-style:normal}

/* Le bouton du bandeau est plus grand que celui du corps : sans fond derrière
   lui, il doit porter seul. */
.nav .cta{
  font-size:15px;font-weight:500;padding:12px 26px;
  box-shadow:0 8px 30px -8px rgba(170,31,205,.85),0 2px 18px rgba(7,6,13,.5);
}
.cta{font-size:13px;font-weight:500;padding:9px 18px;border-radius:999px;color:#fff;
  background:linear-gradient(120deg,var(--indigo),var(--violet) 65%,var(--magenta));
  box-shadow:0 6px 24px -8px rgba(170,31,205,.7);transition:transform .18s,box-shadow .18s;
  white-space:nowrap}
.cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px -8px rgba(170,31,205,.95)}
.cta-ghost{border:1px solid var(--line-2);color:var(--txt-2);background:none;box-shadow:none}
.cta-ghost:hover{background:rgba(255,255,255,.05);color:var(--txt)}

/* ── Héros ──────────────────────────────────────────────────────── */
/* Une composition plate : fond noir, graphe au canevas, titre par-dessus.
   Le tout est fixe et s'efface ensemble — si le texte défilait et le graphe
   non, on retomberait exactement dans le parallaxe qu'on refuse. */
/* Le héros occupe une hauteur d'écran et rien de plus : il n'est plus fixé,
   il défile et sort par le haut comme n'importe quelle section. */
#hero{height:100svh;min-height:560px;position:relative;z-index:2;overflow:hidden}

#heroFlat{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--ink);
}
#heroGraph{position:absolute;inset:0;width:100%;height:100%;display:block}
#heroFlat .hero-in{
  position:absolute;top:50%;
  left:max(20px,calc(50vw - 590px - 100px));
  transform:translateY(-50%);
  width:min(660px,46vw);pointer-events:auto;z-index:1;
}
@media (max-width:860px){
  #heroFlat .hero-in{
    left:20px;right:20px;width:auto;top:auto;bottom:clamp(56px,11vh,120px);
    transform:none;
  }
}

.hero-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--lav);margin:0 0 20px;opacity:.85}
.sub-punch{margin-top:-6px;font-size:clamp(14px,1.5vw,17px);color:var(--txt-3)}
.sub-punch b{color:var(--lav);font-weight:400}
h1{font-weight:200;font-size:clamp(32px,5.4vw,70px);line-height:1;letter-spacing:-.045em;
  margin:0 0 24px;text-wrap:balance}
h1 b{font-weight:600;background:linear-gradient(100deg,var(--lav),var(--pink) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{font-size:clamp(15px,1.6vw,19px);color:var(--txt-2);margin:0 0 24px;font-weight:300}
.sub b{color:var(--txt);font-weight:500}
.hero-btns{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:0}
.btn-lg{font-size:15px;font-weight:500;padding:13px 26px;border-radius:999px}

/* ── La bande du bloc (section des modèles) ─────────────────────── */
/* Une face par tour de bloc. Les sections ne portent que de la course : le
   texte vit dans un calque ancré à l'objet, sinon il défile pendant que le
   bloc, lui, ne bouge pas. */
/* La section ouvre directement sur la bande : le moindre texte au-dessus
   glisserait sur une scène immobile, et c'est exactement le parallaxe qu'on
   refuse partout ailleurs. Et surtout aucun fond — il masquerait le bloc. */
#modeles{position:relative;z-index:2;padding:0}
#modelesBand{position:relative}
.face{height:100svh;min-height:560px;pointer-events:none}

#blocLabel{
  position:fixed;top:0;left:0;z-index:5;
  opacity:0;visibility:hidden;transition:opacity .25s;
  will-change:transform;pointer-events:none;
}
#blocLabel .bl-in{
  display:grid;transform:translate(-50%,-50%);
  width:min(40ch,calc(100vw - 40px));text-align:center;
}
#blocLabel.left .bl-in{transform:translate(0,-50%);text-align:left;width:min(34ch,40vw)}
.fbox{grid-area:1/1;opacity:0;will-change:opacity;pointer-events:auto}

/* ── Problème + comparatif ──────────────────────────────────────── */
.bars{display:grid;gap:8px;margin-top:30px;max-width:640px}
.bar{display:grid;grid-template-columns:minmax(96px,150px) 1fr auto;gap:13px;align-items:center}
.bar-name{font-size:12.5px;color:var(--txt-3);text-align:right;line-height:1.25}
.bar.us .bar-name{color:var(--txt);font-weight:500}
.bar-track{height:19px;border-radius:5px;background:rgba(255,255,255,.035);
  overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1);
  background:linear-gradient(90deg,rgba(91,69,232,.5),rgba(170,31,205,.6))}
.bar.us .bar-fill{background:linear-gradient(90deg,var(--indigo),var(--violet) 60%,var(--magenta));
  box-shadow:0 0 20px -4px rgba(170,31,205,.9)}
.bar-score{font-family:var(--mono);font-size:12px;color:var(--txt-3);min-width:50px;
  font-variant-numeric:tabular-nums}
.bar.us .bar-score{color:var(--lav)}
.draft{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:#FFB86B;border:1px dashed rgba(255,184,107,.45);
  border-radius:5px;padding:3px 9px;margin-bottom:16px}

/* ── Vidéo ─────────────────────────────────────────────────────── */
/* La vidéo est un plan de la scène : la section ne sert qu'à donner de la
   course à la caméra, et le texte est un calque ancré comme les autres. */
#video{position:relative;z-index:2;min-height:110svh}

#videoLabel{
  position:fixed;top:0;left:0;z-index:5;
  opacity:0;visibility:hidden;transition:opacity .25s;
  will-change:transform;pointer-events:none;
}
#videoLabel .vl-in{
  transform:translate(-50%,-50%);
  width:min(42ch,calc(100vw - 40px));text-align:center;
}
#videoLabel .lede{max-width:none;margin-inline:auto}
#videoLabel h2{font-size:clamp(26px,4vw,44px)}
.vl-credit{
  margin:16px 0 0;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;color:var(--txt-3);
}

/* ── Mécanisme (le travelling) ──────────────────────────────────── */
#mecanisme{position:relative;z-index:2}
.chapter{height:100svh;min-height:540px;display:flex;align-items:flex-end;
  padding-bottom:clamp(70px,13vh,150px);pointer-events:none}
.card{max-width:38ch;opacity:0;transform:translateY(20px);will-change:opacity,transform}
.card .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lav);display:block;margin-bottom:14px}
.card h2{font-size:clamp(27px,4.6vw,48px)}
.card p{margin:0;font-size:clamp(15px,1.5vw,18px);color:var(--txt-2);line-height:1.6}
#rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .4s;pointer-events:none}
#rail.on{opacity:1}
#rail b{width:7px;height:7px;border-radius:50%;background:rgba(201,160,255,.22);
  transition:background .3s,transform .3s,box-shadow .3s}
#rail b.act{background:var(--lav);transform:scale(1.5);box-shadow:0 0 14px rgba(201,160,255,.85)}

/* Le titre est en flux, en haut de la section : il arrive par le bas quand on
   descend. Le reste de la hauteur donne sa course à la caméra, qui descend
   vers les maquettes pendant que le texte monte — les deux bougent, donc rien
   ne glisse par-dessus une image figée. */
#partout{position:relative;z-index:2;min-height:125svh}
/* Le titre tient la colonne de gauche ; les maquettes occupent la droite et
   sont calées sur lui à la même hauteur. Les deux montent ensemble.

   Il est posé bien plus à gauche que la marge habituelle de la page : c'est ce
   qui dégage la place des maquettes, et la respiration au-dessus de lui éloigne
   la section du héros. */
.screens-head{
  /* Le retrait se mesure PAR RAPPORT à la marge de la page, pas dans l'absolu :
     `50vw - 590px` est cette marge, et on s'en écarte de 48 px vers la gauche.
     Une valeur absolue collait le titre au bord sur un grand écran, où la marge
     vaut 370 px, alors qu'elle n'en vaut que 130 sur un portable.

     Le retrait est une MARGE, pas un padding : avec `box-sizing:border-box`,
     un padding gauche de ~190 px serait déduit de la largeur du bloc, et il ne
     resterait qu'une colonne d'un mot de large. */
  margin-left:max(20px, calc(50vw - 590px - 48px));
  padding:clamp(150px,34vh,360px) 0 0;
  width:min(34ch,36%);
}
.screens-head .lede{max-width:none}
@media (max-width:900px){
  /* En portrait, le titre passe au-dessus : il n'y a pas de place à côté. */
  .screens-head{margin-left:0;padding:clamp(110px,24vh,220px) 20px 0;width:auto}
  .screens-head .lede{max-width:46ch}
}

/* ── Les deux compléments de la section des modèles ─────────────── */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:14px}
.duo-card{border:1px solid var(--line);border-radius:14px;padding:19px 21px;background:var(--ink-2)}
.duo-card b{display:block;font-size:16px;font-weight:500;margin-bottom:8px}
.duo-card p{margin:0;font-size:14px;color:var(--txt-2);line-height:1.58}
.duo-card em{font-style:normal;color:var(--lav)}

/* ── Les médias ─────────────────────────────────────────────────── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.media{border:1px solid var(--line);border-radius:13px;padding:18px 19px;background:var(--ink-2);
  transition:border-color .25s,transform .25s}
.media:hover{border-color:var(--line-2);transform:translateY(-3px)}
.media b{display:block;font-size:17px;font-weight:500;margin-bottom:5px;letter-spacing:-.02em}
.media span{font-size:13px;color:var(--txt-3);line-height:1.5}

/* ── Le mur de noms ─────────────────────────────────────────────── */
.wallgroup + .wallgroup{margin-top:30px}
.wallgroup h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink);margin:0 0 13px;font-weight:400}
.wallnames{display:flex;flex-wrap:wrap;gap:7px}
.wallnames span{font-size:14px;color:var(--txt-2);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;background:var(--ink-2);
  opacity:0;transform:translateY(8px) scale(.97)}
.wallnames span.in{opacity:1;transform:none;
  transition:opacity .34s,transform .34s cubic-bezier(.22,1,.36,1)}

/* ── Les gains ──────────────────────────────────────────────────── */
.gains{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:12px;max-width:62ch}
.gains li{position:relative;padding-left:26px;font-size:clamp(15px,1.5vw,17px);color:var(--txt)}
.gains li::before{content:"+";position:absolute;left:0;top:-1px;color:var(--lav);
  font-family:var(--mono);font-size:16px}

/* ── Les trois surfaces ─────────────────────────────────────────── */
.surfaces{position:relative;margin-top:44px}
.surf{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);
  background:var(--ink-2);box-shadow:0 40px 110px -40px rgba(170,31,205,.55),0 18px 50px rgba(0,0,0,.5)}
.surf-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);font-style:normal}
.surf-url{flex:1;text-align:center;font-family:var(--mono);font-size:10px;color:var(--txt-3);
  background:rgba(0,0,0,.3);border-radius:999px;padding:3px 12px;max-width:260px;margin-inline:auto}
.surf-name{font-family:var(--mono);font-size:10px;color:var(--txt-3);letter-spacing:.08em}
.surf-body{display:grid;grid-template-columns:1fr 168px;min-height:206px}
.surf-canvas{position:relative;background:
  radial-gradient(70% 90% at 30% 20%,rgba(91,69,232,.16),transparent 62%),
  linear-gradient(rgba(190,170,255,.05) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(190,170,255,.05) 1px,transparent 1px) 0 0/22px 22px,#0a0812}
.mininode{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:9px;
  background:rgb(28,30,32);padding:7px 9px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.mininode::before{content:"";position:absolute;inset:-5px;border:1px solid rgba(255,255,255,.1);
  border-radius:13px;pointer-events:none}
.mininode b{display:block;font-size:10px;font-weight:500;color:#f4faf7;letter-spacing:-.01em;white-space:nowrap}
.mininode span{display:block;font-family:var(--mono);font-size:7.5px;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.mininode i{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--lav);transform:translateY(-50%);box-shadow:0 0 8px var(--lav)}
.mininode i.l{left:-4px}.mininode i.r{right:-4px}
.surf-chat{border-left:1px solid var(--line);padding:11px;display:flex;flex-direction:column;gap:8px;
  background:rgba(255,255,255,.015)}
.msg{font-size:10.5px;line-height:1.4;padding:7px 9px;border-radius:9px;max-width:96%}
.msg.me{background:linear-gradient(120deg,var(--indigo),var(--violet));color:#fff;align-self:flex-end}
.msg.it{background:rgba(255,255,255,.05);color:var(--txt-2);border:1px solid var(--line)}
.msg.run{border-color:rgba(201,160,255,.4);color:var(--lav);font-family:var(--mono);font-size:9.5px}

.phone{width:212px;border-radius:30px;padding:9px;border:1px solid var(--line-2);
  background:#0a0812;box-shadow:0 40px 110px -35px rgba(211,30,71,.6),0 18px 50px rgba(0,0,0,.6)}
.phone-in{border-radius:23px;overflow:hidden;background:var(--ink-2);position:relative;min-height:340px;
  display:flex;flex-direction:column}
.notch{height:22px;display:grid;place-items:center}
.notch span{width:66px;height:16px;border-radius:999px;background:#000}
.phone-chat{flex:1;padding:10px;display:flex;flex-direction:column;gap:7px}
.phone-bar{margin:0 10px 10px;border:1px solid var(--line);border-radius:999px;padding:7px 12px;
  font-size:10px;color:var(--txt-3);display:flex;justify-content:space-between;align-items:center}
.phone-bar b{color:var(--lav);font-weight:400;font-family:var(--mono);font-size:10px}

.surf-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--txt-3);margin:10px 0 0;text-align:center}
.stagger{display:grid;gap:26px}
@media (min-width:900px){
  .stagger{grid-template-columns:1fr;gap:0;min-height:620px;position:relative}
  .st{position:absolute;transition:transform .3s}
  .st-1{width:56%;left:0;top:0;z-index:3}
  .st-2{width:52%;right:0;top:120px;z-index:2}
  .st-3{left:38%;top:270px;z-index:4}
}
@media (max-width:899px){
  .st-3{justify-self:center}
  .surf-body{grid-template-columns:1fr}
  .surf-chat{border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap}
  .msg{max-width:none}
}

/* ── Usages ─────────────────────────────────────────────────────── */
.ucards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.uc{border:1px solid var(--line);border-radius:14px;padding:19px 20px;background:var(--ink-2);
  transition:border-color .25s,transform .25s}
.uc:hover{border-color:var(--line-2);transform:translateY(-3px)}
.uc b{display:block;font-size:16px;font-weight:500;margin-bottom:7px}
.uc p{margin:0;font-size:14px;color:var(--txt-2);line-height:1.55}
.uc .mini{display:flex;gap:5px;flex-wrap:wrap;margin-top:13px}
.uc .mini span{font-family:var(--mono);font-size:9.5px;color:var(--txt-3);
  border:1px solid var(--line);border-radius:4px;padding:2px 6px}

/* ── Prix ───────────────────────────────────────────────────────── */
.bill{border:1px solid var(--line);border-radius:15px;background:var(--ink-2);overflow:hidden;max-width:560px}
.bl{display:grid;grid-template-columns:1fr auto;gap:14px;padding:12px 17px;
  border-bottom:1px solid var(--line);align-items:baseline}
.bl:last-child{border-bottom:0;background:rgba(170,31,205,.07)}
.bl b{font-size:13.5px;font-weight:400;color:var(--txt-2);display:block}
.bl span{font-family:var(--mono);font-size:11px;color:var(--txt-3);display:block}
.bl em{font-family:var(--mono);font-style:normal;font-size:14px;color:var(--txt);
  font-variant-numeric:tabular-nums}
.bl:last-child em{color:var(--lav);font-weight:500}

/* ── Confiance ──────────────────────────────────────────────────── */
.trust{display:grid;gap:26px;max-width:60ch}
.trust div b{display:block;font-size:clamp(17px,2vw,21px);font-weight:500;margin-bottom:6px;letter-spacing:-.02em}
.trust div p{margin:0;font-size:15px;color:var(--txt-2)}

/* ── Câblage ────────────────────────────────────────────────────── */
.wire{position:relative;border-radius:18px;border:1px solid var(--line);
  background:radial-gradient(80% 100% at 50% 0%,rgba(91,69,232,.14),transparent 65%),var(--ink-2);
  padding:clamp(20px,4vw,40px);overflow:hidden}
.wgrid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(190,170,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(190,170,255,.055) 1px,transparent 1px);
  background-size:26px 26px}
.wstage{position:relative;min-height:330px}
#wsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wnode{position:absolute;width:clamp(126px,34%,178px);border:1px solid var(--line-2);
  border-radius:12px;background:rgba(18,16,31,.94);backdrop-filter:blur(8px);padding:12px 13px;
  user-select:none;transition:border-color .25s,box-shadow .25s}
.wnode.linked{border-color:rgba(201,160,255,.6);
  box-shadow:0 0 0 1px rgba(201,160,255,.2),0 12px 40px -14px rgba(170,31,205,.9)}
.wnode .kind{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-3);display:block;margin-bottom:5px}
.wnode .title{font-size:13.5px;font-weight:500;display:block}
.port{position:absolute;width:34px;height:34px;display:grid;place-items:center;cursor:grab;touch-action:none}
.port::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--ink);
  border:1.5px solid var(--lav);transition:transform .2s,background .2s,box-shadow .2s}
.port.hot::after{background:var(--lav);transform:scale(1.35);box-shadow:0 0 16px var(--lav)}
.port.out{right:-17px;top:50%;transform:translateY(-50%)}
.port.in{left:-17px;top:50%;transform:translateY(-50%)}
.whint{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--txt-3);text-align:center}
.whint.ok{color:var(--lav)}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:13px;overflow:hidden;max-width:820px}
.qa{background:var(--ink-2)}
.qa summary{padding:16px 19px;cursor:pointer;font-size:15px;font-weight:400;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--lav);font-size:16px;flex:none}
.qa[open] summary::after{content:"–"}
.qa p{margin:0;padding:0 19px 17px;font-size:14px;color:var(--txt-2);line-height:1.6;max-width:70ch}

/* Le pied de page est celui du site : on ne redéfinit ici que ce que la scène
   impose — un fond opaque, pour qu'elle ne transparaisse pas au travers. */
.site-foot{position:relative;z-index:2;background:var(--ink);padding-bottom:70px}

.reveal{opacity:0;transform:translateY(22px)}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}

@media (max-width:760px){
  .wrap{width:calc(100% - 28px)}
  .fam{grid-template-columns:1fr;gap:12px}
  #rail{right:12px}
  .titleswap{left:10px;bottom:10px}
  .bar{grid-template-columns:minmax(78px,110px) 1fr auto;gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.fam li{opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}
}