/* ============================================================================
   SKLD HEADER v2 — ergonomie façon réseau social (Twitch/X/Discord).
   Nav principale COURTE (rail) + cluster droit : recherche (loupe), chat,
   menu avatar déroulant (tout le perso dedans). Recherche = panneau type
   « palette de commande ». Palette DA : OLED + lime, ZÉRO orange/or.
   Complète skld-pillnav.css (chargé dans le bundle). transform/opacity only.
   ========================================================================== */
:root{ --hd-ease:cubic-bezier(.32,.72,0,1); }

/* ------------------------------------------------------------- ICON BUTTONS */
.hdr .hicon{
  display:inline-grid; place-items:center; width:40px; height:40px; flex:none;
  border-radius:12px; border:1px solid var(--line2, rgba(255,255,255,.08));
  background:rgba(230,238,232,.03); color:var(--dim, #8a94a0); cursor:pointer;
  transition:color .25s var(--hd-ease), border-color .25s, background .25s, transform .12s;
}
.hdr .hicon svg{ width:19px; height:19px; }
.hdr .hicon:hover{ color:var(--green); border-color:rgba(157,255,60,.4); background:rgba(157,255,60,.06); }
.hdr .hicon:active{ transform:scale(.94); }

/* ------------------------------------------------------------- AVATAR MENU */
.hmenu-wrap{ position:relative; }
.hmenu-btn{
  display:inline-flex; align-items:center; gap:5px; padding:3px 6px 3px 3px; cursor:pointer;
  border-radius:999px; border:1px solid var(--line2, rgba(255,255,255,.08));
  background:rgba(230,238,232,.03); transition:border-color .25s, background .25s, transform .12s;
}
.hmenu-btn:hover{ border-color:rgba(157,255,60,.4); background:rgba(157,255,60,.05); }
.hmenu-btn:active{ transform:scale(.97); }
.hmenu-btn .avatar{ width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line2, rgba(255,255,255,.1)); }
.hmenu-caret{ width:15px; height:15px; color:var(--muted, #5a636e);
  transition:transform .3s var(--hd-ease); }
.hmenu-btn[aria-expanded="true"] .hmenu-caret{ transform:rotate(180deg); color:var(--green); }

/* le panneau : double-bezel sombre, révélation douce */
.hmenu{
  position:absolute; top:calc(100% + 10px); right:0; width:248px; z-index:61;
  padding:6px; border-radius:16px;
  background:linear-gradient(180deg,#0e1218,#0a0d12);
  border:1px solid var(--line2, rgba(255,255,255,.09));
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  transform-origin:top right;
}
.hmenu[hidden]{ display:none; }
.hmenu.is-open{ animation:hmIn .34s var(--hd-ease) both; }
@keyframes hmIn{ from{ opacity:0; transform:translateY(-8px) scale(.97); } to{ opacity:1; transform:none; } }

.hmenu-id{ display:flex; align-items:center; gap:11px; padding:10px 11px; margin-bottom:4px;
  border-radius:12px; text-decoration:none; background:rgba(157,255,60,.05);
  border:1px solid rgba(157,255,60,.14); transition:border-color .2s, background .2s; }
.hmenu-id:hover{ background:rgba(157,255,60,.09); border-color:rgba(157,255,60,.3); }
.hmenu-id img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid rgba(157,255,60,.4); }
.hmenu-id__t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.hmenu-id__t b{ font-family:var(--head, system-ui); font-weight:700; font-size:14.5px; color:var(--cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hmenu-id__t small{ font-family:var(--mono, monospace); font-size:10.5px; letter-spacing:.06em; color:var(--green); }

.hmenu-sec{ padding:4px 0; }
.hmenu-sec + .hmenu-sec{ border-top:1px solid var(--line, rgba(255,255,255,.06)); }
.hmenu a, .hmenu-out{
  display:block; width:100%; text-align:left; box-sizing:border-box;
  padding:9px 12px; border-radius:9px; text-decoration:none; cursor:pointer;
  font-family:var(--head, system-ui); font-weight:600; font-size:13.5px; color:var(--dim, #8a94a0);
  background:none; border:0; transition:color .18s, background .18s, padding-left .18s var(--hd-ease);
}
.hmenu a:hover, .hmenu-out:hover{ color:var(--cream); background:rgba(230,238,232,.05); padding-left:16px; }
/* Les entrées du menu portent maintenant une icône : on passe en flex pour
   l'aligner sur la ligne de base du texte, et le décalage au survol se fait par
   `transform` plutôt que par `padding-left` — ce dernier recalculait la mise en
   page de tout le menu à chaque survol. */
.hmenu a{ display:flex; align-items:center; gap:10px; }
.hmenu a:hover{ padding-left:12px; transform:translateX(4px); }
.hmenu a .ico{ flex:none; opacity:.62; transition:opacity .18s, color .18s; }
.hmenu a:hover .ico{ opacity:1; color:var(--green); }
.hmenu-out{ color:#e88; }
.hmenu-out:hover{ color:#ffb4b4; background:rgba(255,120,120,.08); }
.hmenu-sec form{ margin:0; }

/* ------------------------------------------------------------- RECHERCHE */
.hsearch{ position:fixed; inset:0; z-index:80; display:flex; justify-content:center;
  align-items:flex-start; padding-top:12vh; background:rgba(4,6,8,.66);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hsearch[hidden]{ display:none; }
.hsearch.is-open{ animation:hsBg .25s ease both; }
@keyframes hsBg{ from{ opacity:0 } to{ opacity:1 } }
.hsearch__panel{ width:min(620px, 92vw); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#0f1319,#0b0e13); border:1px solid var(--line2, rgba(255,255,255,.1));
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  animation:hsIn .32s var(--hd-ease) both; }
@keyframes hsIn{ from{ opacity:0; transform:translateY(-14px) scale(.98); } to{ opacity:1; transform:none; } }
.hsearch__field{ display:flex; align-items:center; gap:12px; padding:16px 18px;
  border-bottom:1px solid var(--line, rgba(255,255,255,.07)); }
.hsearch__field svg{ width:20px; height:20px; color:var(--muted); flex:none; }
.hsearch__field input{ flex:1 1 auto; background:none; border:0; outline:none; color:var(--cream);
  font-family:var(--head, system-ui); font-size:17px; }
.hsearch__field input::placeholder{ color:var(--muted); }
.hsearch__field kbd{ font-family:var(--mono, monospace); font-size:10px; letter-spacing:.08em; color:var(--muted);
  border:1px solid var(--line2, rgba(255,255,255,.12)); border-radius:6px; padding:3px 6px; flex:none; }

.hsearch__results{ max-height:min(52vh, 460px); overflow-y:auto; padding:8px; }
.hsearch__hint{ color:var(--muted); font-size:13.5px; padding:14px 12px; margin:0; }
.hs-group{ font-family:var(--mono, monospace); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); padding:10px 12px 6px; }
.hs-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:11px;
  text-decoration:none; color:var(--cream); transition:background .16s; }
.hs-row:hover, .hs-row.is-cursor{ background:rgba(157,255,60,.08); }
.hs-row__av{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--line2, rgba(255,255,255,.1)); background:radial-gradient(circle at 32% 26%,#1c3f22,#0b1a0f);
  display:grid; place-items:center; font-family:var(--disp, system-ui); font-weight:800; font-size:14px; color:var(--cream); }
.hs-row__ic{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(157,255,60,.08); color:var(--green); }
.hs-row__t{ flex:1 1 auto; min-width:0; }
.hs-row__n{ font-family:var(--head, system-ui); font-weight:700; font-size:14.5px; color:var(--cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-row__s{ font-family:var(--mono, monospace); font-size:10.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.hs-row__add{ flex:none; font-family:var(--mono, monospace); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:#08130a; background:var(--green); border:0; border-radius:8px; padding:6px 10px; cursor:pointer;
  transition:filter .18s, transform .1s; }
.hs-row__add:hover{ filter:brightness(1.08); } .hs-row__add:active{ transform:scale(.95); }
.hs-empty{ color:var(--muted); font-size:13.5px; padding:16px 12px; }

/* ------------------------------------------------------------- MENU MOBILE */
.mnav__lbl{ display:block; font-family:var(--mono, monospace); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--green); opacity:.8; padding:16px 4px 4px; }
.mnav__out{ margin-top:12px; }
.mnav__out button{ width:100%; font-family:var(--mono, monospace); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:#e88; background:rgba(255,120,120,.08);
  border:1px solid rgba(255,120,120,.25); border-radius:12px; padding:12px; cursor:pointer; }

/* ------------------------------------------------------------- RESPONSIVE */
@media (max-width:900px){
  /* le chat et le menu avatar passent dans le tiroir : on garde loupe + burger */
  .hdr .hicon--chat, .hmenu-wrap{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hmenu.is-open, .hsearch.is-open, .hsearch__panel{ animation:none; }
  .hmenu-caret, .hdr .hicon, .hmenu-btn, .hmenu a{ transition:none; }
}

/* ============================================================================
   NAVIGATION EN ZONES — la barre ne liste plus des pages en vrac : elle expose
   des ZONES ("Compétition" = notre circuit, "Réseau" = la communauté), l'espace
   personnel restant sous l'avatar. Chaque en-tête de zone est un vrai lien, le
   panneau n'est qu'un raccourci -> la nav marche sans JavaScript.
   ========================================================================== */
.rail .zone{ position:relative; display:inline-flex; }
.rail .zone__top{ display:inline-flex; align-items:center; gap:5px; }
/* LA FLÈCHE EST UN BOUTON, hors du lien. Une cible de 13 px se rate : le bouton
   qui la porte fait 28 px, sans bouger la mise en page. */
.zone__car{ width:13px; height:13px; opacity:.55; display:block;
  transition:transform .3s var(--hd-ease), opacity .2s; }
.zone__car-btn{
  display:inline-grid; place-items:center; width:28px; height:28px; padding:0;
  margin-left:-4px; border:0; border-radius:50%; background:none; cursor:pointer;
  color:inherit; transition:background .2s var(--hd-ease);
}
.zone__car-btn:hover{ background:rgba(157,255,60,.1); }
.zone__car-btn:hover .zone__car{ opacity:1; }
.zone__car-btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.rail .zone.is-open .zone__car{ transform:rotate(180deg); opacity:1; }
/* La zone reste un bloc en ligne : le bouton doit s'aligner avec le libellé. */
.rail .zone{ display:inline-flex; align-items:center; }

.zone__panel{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-6px) scale(.98);
  width:290px; padding:8px; z-index:61; opacity:0; visibility:hidden; pointer-events:none;
  border-radius:16px; background:linear-gradient(180deg,#0e1218,#0a0d12);
  border:1px solid var(--line2, rgba(255,255,255,.09));
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  transition:opacity .22s var(--hd-ease), transform .28s var(--hd-ease), visibility .22s;
}
/* zone tampon : la souris peut descendre du titre vers le panneau sans le perdre */
.zone__panel::before{ content:''; position:absolute; left:0; right:0; top:-14px; height:14px; }
.rail .zone.is-open .zone__panel{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1); }

.zone__lbl{ display:block; font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted,#5a636e); padding:9px 12px 5px; }
.zone__lbl + a{ margin-top:0; }
.zone__panel a{
  display:block; padding:9px 12px; border-radius:10px; text-decoration:none;
  transition:background .18s, padding-left .18s var(--hd-ease);
}
.zone__panel a:hover, .zone__panel a:focus-visible{ background:rgba(157,255,60,.07); padding-left:16px; }
.zone__panel a b{ display:block; font-family:var(--head,system-ui); font-weight:700; font-size:13.5px;
  color:var(--cream,#f4fff0); letter-spacing:0; text-transform:none; }
.zone__panel a small{ display:block; font-family:var(--head,system-ui); font-size:11.5px;
  color:var(--muted,#5a636e); margin-top:2px; letter-spacing:0; text-transform:none; }
.zone__panel a:hover b{ color:var(--green,#9dff3c); }

@media (max-width:900px){ .rail .zone__panel{ display:none; } }
@media (prefers-reduced-motion:reduce){ .zone__panel, .zone__car{ transition:none; } }

/* FIX : .rail a{display:inline-flex;height:34px;padding:0 17px} (skld-pillnav.css)
   s'appliquait AUSSI aux liens du panneau -> hauteur figée à 34px, donc la
   description chevauchait le titre suivant. On rétablit un flux normal ici. */
.rail .zone__panel a{
  display:block !important; height:auto !important; min-height:0;
  padding:9px 12px !important; line-height:1.35; white-space:normal;
  font-size:inherit; letter-spacing:normal; text-transform:none; color:inherit;
}
.rail .zone__panel a:hover{ padding-left:16px !important; }
.rail .zone__panel a::after{ display:none !important; }   /* pas de point d'actif ici */
.rail .zone__lbl{ line-height:1.2; }

/* --- VEDETTE + ICÔNES : le menu ne liste plus des lignes de texte de poids égal.
   Ce qui se passe MAINTENANT est en haut et dominant ; chaque entrée porte une
   icône pour être repérée sans lire. --- */
.zone__panel--wide{ width:330px; }

.rail .zone__hero{
  display:block !important; height:auto !important; white-space:normal;
  padding:13px 14px !important; margin-bottom:6px; border-radius:13px;
  background:linear-gradient(150deg, rgba(157,255,60,.12), rgba(157,255,60,.03) 60%, transparent);
  border:1px solid rgba(157,255,60,.28);
  transition:border-color .2s, background .2s, transform .18s var(--hd-ease);
}
.rail .zone__hero:hover{ border-color:rgba(157,255,60,.55); transform:translateY(-1px);
  background:linear-gradient(150deg, rgba(157,255,60,.18), rgba(157,255,60,.05) 60%, transparent); }
.zone__hero-tag{ display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono,monospace); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green,#9dff3c); }
.zone__hero-tag i{ width:6px; height:6px; border-radius:50%; background:var(--green,#9dff3c);
  box-shadow:0 0 8px var(--green,#9dff3c); animation:zoneLive 1.6s steps(2) infinite; }
@keyframes zoneLive{ 0%,100%{opacity:1} 50%{opacity:.3} }
.zone__hero-n{ display:block; font-family:var(--disp,system-ui); font-weight:800; font-size:16px;
  color:var(--cream,#f4fff0); letter-spacing:-.01em; margin-top:5px; line-height:1.15; }
.zone__hero-m{ display:block; font-family:var(--head,system-ui); font-size:11.5px;
  color:var(--muted,#5a636e); margin-top:4px; }
.rail .zone__hero:hover .zone__hero-m{ color:var(--dim,#8a94a0); }

/* entrées : icône + texte alignés */
.rail .zone__panel a:not(.zone__hero){ display:flex !important; align-items:flex-start; gap:11px; }
.zone__ic{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--muted,#5a636e);
  transition:color .18s; }
.rail .zone__panel a:hover .zone__ic{ color:var(--green,#9dff3c); }
@media (prefers-reduced-motion:reduce){ .zone__hero-tag i{ animation:none; } }

/* GooeyNav (portage ReactBits déjà présent, réveillé sur .rail) : il pose sa
   propre pilule + un burst de particules au clic. On masque donc l'ancien
   indicateur pour ne pas en avoir deux qui glissent en même temps. */

/* ═══════════════════════════ LA CAPSULE DE POULS ═══════════════════════════
   Le tournoi en cours, sur TOUTES les pages. Cette donnée était déjà calculée
   côté serveur mais n'apparaissait qu'à l'intérieur du panneau déroulant
   « Tournois » : invisible sans survol, donc totalement invisible sur
   téléphone. Un libellé de menu est du mobilier ; un tournoi en direct avec son
   compteur d'équipes est une raison de cliquer maintenant.

   Sobriété tenue : encre sombre, liseré fin, lime réduit au point qui bat. Rien
   ne clignote — le point respire en OPACITÉ seule (aucun recalcul de mise en
   page, aucune texture à recomposer), et il s'arrête si le visiteur a demandé
   moins d'animations. */
/* LE POULS DOIT CÉDER LA PLACE, ET C'ÉTAIT UN VRAI BUG.

   Il était en `flex:none` entre deux blocs eux-mêmes en `flex-shrink:0` : rien
   dans l'en-tête ne pouvait rétrécir. Mesuré à 1100 px de large, l'en-tête
   occupait 1212 px — le bouton du salon dépassait de 39 px et LE MENU DU COMPTE
   ÉTAIT ENTIÈREMENT HORS ÉCRAN (1151→1212). Un joueur connecté sur un portable
   de 13 pouces perdait l'accès à son compte, à ses réglages et à sa
   déconnexion, sans rien pour le lui signaler.

   Le pouls est la seule chose ici qui puisse maigrir sans rien coûter : c'est
   une information, pas une commande. Il rétrécit donc, et son texte se tronque,
   avant que quoi que ce soit d'utilisable ne sorte de l'écran. */
.pouls{
  display:inline-flex; align-items:center; gap:9px;
  flex:0 1 auto; min-width:0; overflow:hidden;
  margin-left:14px; padding:7px 14px 7px 12px;
  border:1px solid var(--line2); border-radius:999px;
  background:rgba(230,238,232,.02);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; max-width:340px;
  transition:border-color .35s var(--hdr-ease), color .35s var(--hdr-ease);
}
.pouls:hover{ color:var(--cream); border-color:rgba(157,255,60,.34); }
.pouls__dot{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--muted);
}
.pouls.is-live .pouls__dot{
  background:var(--green);
  box-shadow:0 0 0 3px rgba(157,255,60,.14);
  animation:pouls-bat 2.4s ease-in-out infinite;
}
@keyframes pouls-bat{ 0%,100%{opacity:1} 50%{opacity:.42} }
.pouls__lbl{ flex:none; color:var(--muted); }
.pouls.is-live .pouls__lbl{ color:var(--green); }
.pouls__sep{ width:1px; height:11px; background:var(--line2); flex:none; }
.pouls__n{
  font-family:var(--head); font-size:11.5px; letter-spacing:.06em; color:var(--cream);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.pouls__c{ flex:none; color:var(--dim); }

/* Sous 1180px la capsule perdrait la place du rail : on garde le pouls (c'est
   le plus utile) et on laisse tomber le compteur, puis le libellé. */
@media (max-width:1180px){ .pouls__c{ display:none } }
@media (max-width:1040px){ .pouls__lbl,.pouls__sep{ display:none } }
/* La capsule s'efface AVANT la bascule mobile. Elle occupait 126 px à côté de la
   barre de navigation, qui n'avait plus que 411 px pour 553 px d'onglets : deux
   entrées passaient hors du champ, sans que rien ne l'indique. La capsule est un
   rappel utile, la navigation est essentielle — c'est elle qui garde la place.
   Seuil MESURÉ, pas deviné. À 1300 px la barre réclame 695 px et n'en a que 573
   tant que la capsule occupe sa place — il en manque 122, soit exactement sa
   largeur. La capsule ne revient donc qu'au-delà de 1450 px, là où il y a
   réellement la place pour les deux. */
@media (max-width:1450px){ .pouls{ display:none } }   /* remplacée par le ruban mobile */

@media (prefers-reduced-motion: reduce){
  .pouls.is-live .pouls__dot{ animation:none }
}
html.fx-off .pouls.is-live .pouls__dot{ animation:none }

/* Icônes Lucide dans les panneaux : elles portent leur propre trait, on ne leur
   impose que la taille et la couleur. */
.zone__panel .ico{ flex:none; color:var(--dim); transition:color .3s var(--hdr-ease); }
.zone__panel a:hover .ico{ color:var(--green); }

/* ═══════════════════════ BARRE BASSE MOBILE (≤900px) ═══════════════════════
   La navigation visible sur téléphone était de ZÉRO élément : tout vivait
   derrière le burger. Quatre destinations permanentes + le tiroir pour le
   reste, c'est la formule qui mesure le meilleur usage réel.

   Ni « Chat » ni « Amis » ici, volontairement : les rendre présents en
   permanence multiplie le volume de messages à relire, pour une personne seule
   à modérer. Les quatre destinations pointent vers du contenu produit par nous.

   État actif = TRAIT lime sur l'icône, jamais un aplat : le lime reste une
   ponctuation. */
.bbar{ display:none; }
@media (max-width:900px){
  .bbar{
    display:grid; grid-template-columns:repeat(4,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    background:rgba(5,7,5,.94); border-top:1px solid var(--line);
    backdrop-filter:blur(14px);
    transition:transform .32s var(--hdr-ease);
  }
  .bbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; height:56px; text-decoration:none; color:var(--dim);
    font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
    transition:color .25s var(--hdr-ease);
  }
  .bbar a .ico{ transition:color .25s var(--hdr-ease); }
  .bbar a:active{ color:var(--cream); }
  .bbar a.is-here{ color:var(--cream); }
  .bbar a.is-here .ico{ color:var(--green); }
  /* Le contenu ne doit pas finir sous la barre : les boutons d'action en bas de
     la fiche d'un tournoi étaient sinon recouverts. */
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* Escamotée à la descente pour rendre l'écran à la lecture. En `transform`
     seul : aucun recalcul de mise en page. */
  .bbar.is-down{ transform:translateY(100%); }
}
/* Jamais sur une surface de régie : ces pages sont capturées par OBS. */
body.is-broadcast .bbar{ display:none !important; }

/* ═══════════════════════ PIED DE PAGE = PLAN DU SITE ═══════════════════════
   Le header ne porte que quatre entrées, délibérément. Il faut donc un endroit
   où TOUT est atteignable d'un coup d'œil, sans survol et sans JavaScript.
   C'est aussi ce que lisent les moteurs pour découvrir les pages, et ce que
   cherche un visiteur qui ne trouve pas son chemin. */
.foot2{ border-top:1px solid var(--line); margin-top:70px; padding:44px 0 26px; }
.foot2__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px;
}
.foot2__brand img{ height:30px; width:auto; display:block; margin-bottom:9px;
  filter:drop-shadow(0 0 6px rgba(157,255,60,.22)); }
.foot2__wm{ font-family:var(--disp); font-size:17px; letter-spacing:.04em; color:var(--cream); }
.foot2__p{ margin:9px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted); max-width:34ch; }
.foot2__col{ display:flex; flex-direction:column; gap:8px; }
.foot2__t{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:3px;
}
.foot2__col a{
  font-size:13px; color:var(--muted); text-decoration:none; width:fit-content;
  transition:color .25s var(--hdr-ease);
}
.foot2__col a:hover{ color:var(--cream); }
.foot2__hint{ font-size:11.5px; color:var(--dim); line-height:1.5; }
.foot2__bas{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
}
.foot2__legal{ display:flex; gap:16px; }
.foot2__legal a{ font-family:var(--mono); font-size:11px; color:var(--dim); text-decoration:none; }
.foot2__legal a:hover{ color:var(--muted); }
.foot2__note{
  margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.05em;
  color:var(--dim); text-align:right;
}
@media (max-width:860px){
  .foot2__grid{ grid-template-columns:1fr 1fr; gap:26px }
  .foot2__brand{ grid-column:1 / -1 }
  .foot2__note{ margin-left:0; text-align:left }
}

/* ═════════════ RÉVÉLATION ÉCHELONNÉE DES PANNEAUX (ReactBits) ═════════════
   Le panneau apparaissait d'un bloc : tout le contenu surgit en même temps, ce
   qui donne une impression de bascule brutale même quand la durée est correcte.
   La technique — celle des bibliothèques de composants animés — consiste à
   décaler chaque enfant de quelques dizaines de millisecondes : l'œil suit la
   construction du panneau au lieu de la subir.

   RÈGLE D'ADMISSION QU'ON S'IMPOSE POUR TOUT EFFET DE NAVIGATION : n'animer que
   `transform`, `opacity` et `clip-path`. Rien d'autre. Une largeur, un `left`
   ou un `padding` animés forcent un recalcul de mise en page à chaque image —
   c'est exactement ce qui faisait ramer le site, et c'est la raison pour
   laquelle le module GooeyNav a été écarté après mesure.

   Six pas suffisent : au-delà, le dernier élément arrive trop tard et on
   attend. */
.rail .zone__panel > *{
  opacity:0; transform:translateY(7px);
  transition:opacity .3s var(--hd-ease), transform .38s var(--hd-ease);
}
.rail .zone.is-open .zone__panel > *{ opacity:1; transform:translateY(0); }
.rail .zone.is-open .zone__panel > *:nth-child(1){ transition-delay:.03s }
.rail .zone.is-open .zone__panel > *:nth-child(2){ transition-delay:.06s }
.rail .zone.is-open .zone__panel > *:nth-child(3){ transition-delay:.09s }
.rail .zone.is-open .zone__panel > *:nth-child(4){ transition-delay:.12s }
.rail .zone.is-open .zone__panel > *:nth-child(5){ transition-delay:.15s }
.rail .zone.is-open .zone__panel > *:nth-child(n+6){ transition-delay:.18s }

/* Un trait de lumière balaie l'arête haute du panneau à l'ouverture. Purement
   `transform` sur un pseudo-élément : rien à recalculer, et il ne se rejoue
   qu'à l'ouverture — jamais en boucle. */
.rail .zone__panel::after{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(157,255,60,.55), transparent);
  transform:scaleX(0); transform-origin:left center; opacity:0;
}
.rail .zone.is-open .zone__panel::after{
  animation:zone-sweep .62s var(--hd-ease) .05s both;
}
@keyframes zone-sweep{
  0%{ transform:scaleX(0); opacity:0 }
  35%{ opacity:1 }
  100%{ transform:scaleX(1); opacity:.35 }
}

/* Rien de tout ça pour qui a demandé moins d'animations : le panneau apparaît,
   point. L'accessibilité prime, et ça sert aussi les machines modestes. */
@media (prefers-reduced-motion: reduce){
  .rail .zone__panel > *{ transition:none; opacity:1; transform:none }
  .rail .zone.is-open .zone__panel::after{ animation:none }
}
html.fx-off .rail .zone__panel > *{ transition:none; opacity:1; transform:none }
html.fx-off .rail .zone.is-open .zone__panel::after{ animation:none }

/* ------------------------------------------------------- CHOIX DE LANGUE
   En pied de page : on le cherche quand on en a besoin, il n'encombre pas la
   navigation le reste du temps. Deux boutons plutôt qu'une liste déroulante —
   à deux langues, la liste demande deux gestes là où un seul suffit. */
.foot2__lang{ display:flex; gap:6px; margin-top:14px; }
.foot2__lang button{
  padding:6px 12px; cursor:pointer;
  border:1px solid var(--line2); border-radius:999px; background:transparent;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.foot2__lang button:hover{ color:var(--cream); border-color:rgba(157,255,60,.4); }
.foot2__lang button.is-on{
  color:var(--green); border-color:rgba(157,255,60,.55); background:rgba(157,255,60,.08);
}

/* ==========================================================================
   LE RAPPEL DE CARTE INCOMPLÈTE
   Il doit se voir sans crier : ce n'est pas une erreur, c'est une étape qui
   reste. D'où le liseré lime et la jauge, plutôt que du rouge — le rouge est
   réservé à ce qui a échoué.
   ========================================================================== */
.carte-rappel{
  position:relative; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; border:1px solid rgba(157,255,60,.28); border-radius:14px;
  background:rgba(157,255,60,.04); text-decoration:none; overflow:hidden;
  transition:border-color .3s cubic-bezier(.32,.72,0,1), background .3s cubic-bezier(.32,.72,0,1);
}
.carte-rappel:hover{ border-color:rgba(157,255,60,.5); background:rgba(157,255,60,.07) }
/* La jauge est un filet en HAUT du bandeau : elle montre l'avancement sans
   prendre de place, et elle donne envie de finir. */
.carte-rappel__j{ position:absolute; inset:0 0 auto 0; height:2px;
  background:rgba(157,255,60,.12) }
.carte-rappel__j i{ display:block; height:100%; background:var(--green);
  transition:width .6s cubic-bezier(.32,.72,0,1) }
.carte-rappel__t{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 320px }
.carte-rappel__t b{ font-family:var(--head); font-size:14px; color:var(--cream) }
.carte-rappel__t span{ font-size:12.5px; line-height:1.5; color:var(--muted) }
.carte-rappel__n{ font-size:13px; letter-spacing:.08em; color:var(--green); flex:none }
.carte-rappel__b{
  flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#06120a; background:var(--green);
  padding:9px 16px; border-radius:999px;
}
@media (max-width:620px){
  .carte-rappel{ gap:10px }
  .carte-rappel__b{ width:100%; text-align:center }
}