/* ═══════════════════════════════════════════════════════════════════════════
   Accueil Elite Prime (refonte 21/09/2026) : « Le Ring »
   Structure : architecte UX · visuel et mouvement : direction artistique ·
   textes : marketing. Charte noir / or, Orbitron + Exo 2.
   Anneau 3D à partir de 900 px, rail plat en dessous (même DOM).
   Performance (retour Rudolf 21/09, machine sans GPU) : aucun filter/backdrop-filter ;
   pendant la rotation seul le transform de l'anneau change (cartes : will-change:
   transform, scène : contain:layout paint) ; aucune opacité, ombre ou z-index animé
   sur les cartes ; halo or statique (pas d'animation) sur la carte de face seulement ;
   pas de masque de scène.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Polices locales (mêmes familles que le hub des jeux ; fichiers variables) */
@font-face{font-family:"Orbitron";font-weight:500 900;font-display:swap;src:url(assets/accueil/fonts/Orbitron.woff2) format("woff2")}
@font-face{font-family:"Exo 2";font-weight:100 900;font-display:swap;src:url(assets/accueil/fonts/Exo2.woff2) format("woff2")}

:root{
  --fosse:#050507; --laque:#0b0b10; --anthracite:#14141c; --trait:#2a2a36;
  --or:#e8c26a; --or-profond:#caa24a; --or-lumiere:#fff1c2; --or-ombre:#8a6a22;
  --blanc:#f5f5f8; --fumee:#c4c4d2; --retrait:#6f6f80; --glace:#7fd0ff; --argent:#c9ccd6;
  --cw:270px; --ch:390px; --r:415px; --tilt:-8deg;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-entree:cubic-bezier(.16,1,.3,1);
  --orb:Orbitron,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--fosse); color:var(--blanc);
  font-family:"Exo 2",system-ui,sans-serif; font-weight:400; font-size:16px; line-height:1.5;
  min-height:100vh; min-height:100dvh; overflow-x:hidden; position:relative;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--or-lumiere); outline-offset:4px; border-radius:4px}
.orb{font-family:var(--orb); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.wrap{max-width:1120px; margin:0 auto; padding:0 16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--or); color:#1a1400; padding:10px 14px; border-radius:8px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}

/* ── Nuit de stade : la photo est devinée, jamais lue ── */
.fond{position:absolute; left:0; right:0; top:0; height:100vh; height:100dvh; z-index:-2; background:url(assets/accueil/stade.webp) center 30%/cover no-repeat; opacity:.35}   /* absolu (pas fixe) : peint une fois dans la couche racine, pas de couche plein écran composée à chaque image */
.fond::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(232,194,106,.14), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, var(--fosse) 100%),
    linear-gradient(to bottom, rgba(5,5,7,.2), var(--fosse) 92%)}

/* ── En-tête sticky : JOUER toujours visible ── */
.tete{position:sticky; top:0; z-index:50; background:rgba(5,5,7,.94); border-bottom:1px solid var(--trait)}
.tete .wrap{display:flex; align-items:center; gap:12px; min-height:60px}
.logo{display:inline-flex; align-items:center; min-height:44px; font-family:var(--orb); font-weight:900; font-size:clamp(16px,2.4vw,20px); letter-spacing:.14em; text-decoration:none; white-space:nowrap; direction:ltr; unicode-bidi:isolate}
.logo span{color:var(--or); text-shadow:0 0 22px rgba(232,194,106,.35)}
.who{color:var(--fumee); font-size:14px; margin-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw}
.tete nav{margin-left:auto; display:flex; gap:8px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--trait);
  background:rgba(11,11,16,.7); color:var(--fumee); font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:border-color .2s, color .2s}
.btn:hover{border-color:var(--or); color:var(--blanc)}
.btn.jouer{font-family:var(--orb); font-weight:700; font-size:14px; letter-spacing:.1em; color:#1a1400; border:none; padding:0 22px;
  background:linear-gradient(135deg, var(--or-lumiere) -20%, var(--or) 40%, var(--or-profond)); box-shadow:0 8px 30px -10px rgba(232,194,106,.6)}
.btn.jouer:hover{color:#1a1400; opacity:.92}
@media (max-width:640px){ .who,.btn.discret{display:none} }

/* ── Bandeaux de compte : dans le flux, jamais fixes ── */
.notice{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:14px auto 0; padding:10px 14px; border-radius:12px; font-size:14px;
  background:#1a1508; border:1px solid var(--or-profond); color:var(--blanc)}
.notice.ok{background:#0e1a12; border-color:#3f8a55}
.notice .btn{min-height:40px; margin-left:auto}
.notice .fermer{min-width:44px; min-height:44px; padding:0; background:none; border:none; color:var(--retrait); font-size:20px; cursor:pointer}
.notice .fermer:hover{color:var(--blanc)}
.notice[hidden]{display:none}

/* ── Hero ── */
.hero{text-align:center; padding:26px 0 0}
.hero h1{font-family:var(--orb); font-weight:900; font-size:clamp(19px,3vw,30px); letter-spacing:.07em; text-transform:uppercase; line-height:1.15; margin:0 0 8px;
  opacity:0; animation:apparait .5s .3s ease forwards}
.hero h1 span{color:var(--or); text-shadow:0 0 30px rgba(232,194,106,.25)}
.hero p{margin:0 auto; max-width:72ch; font-size:17px; font-weight:300; color:var(--fumee); opacity:0; animation:apparait .5s .45s ease forwards}
.hero p b{font-weight:600; color:var(--blanc)}
@keyframes apparait{to{opacity:1}}

/* ── Scène 3D ── */
.scene{position:relative; height:62vh; min-height:480px; max-height:620px; margin:4px auto 0; max-width:1400px;
  perspective:1400px; perspective-origin:50% 40%; overflow:hidden; contain:layout paint; touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab}
/* Voiles fixes des bords (30 % de la scène chacun) : du noir de fond vers transparent, courbe creusée (noir jusqu'à la moitié,
   puis 92 / 78 / 60 / 35 %). Les voisines (à 50°) s'estompent sur leur moitié extérieure ; la carte qui entre ou sort (de profil,
   à 75°) naît et disparaît là où le voile est à ~75 % : son bord extérieur se replie derrière son bord intérieur, elle apparaît
   donc DANS l'emprise de la voisine, pas au-delà, d'où un voile plus large que les 22 % envisagés. Deux couches statiques. */
.scene::before,.scene::after{content:""; position:absolute; top:0; bottom:0; width:30%; z-index:4; pointer-events:none}
.scene::before{left:0; background:linear-gradient(to right, var(--fosse) 0%, var(--fosse) 52%, rgba(5,5,7,.92) 65%, rgba(5,5,7,.78) 75%, rgba(5,5,7,.6) 83%, rgba(5,5,7,.35) 91%, transparent 100%)}
.scene::after{right:0; background:linear-gradient(to left, var(--fosse) 0%, var(--fosse) 52%, rgba(5,5,7,.92) 65%, rgba(5,5,7,.78) 75%, rgba(5,5,7,.6) 83%, rgba(5,5,7,.35) 91%, transparent 100%)}
.scene.saisie{cursor:grabbing}
.scene:focus-visible{outline-offset:-3px}
.monde{position:absolute; left:50%; top:50%; width:var(--cw); height:var(--ch); margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  transform-style:preserve-3d; transform:translateZ(calc(var(--r) * -1)) translateY(-4%);
  opacity:0; animation:entree .9s var(--ease-entree) forwards}
/* Entrée finie (accueil.js, animationend) : sans cela l'animation d'opacité qui « remplit » force transform-style:flat (Chrome)
   et toute la scène se rend aplatie à 0,75 (carte de face 202 px au lieu de 270). */
.monde.posee{animation:none; opacity:1}
@keyframes entree{
  from{opacity:0; transform:translateZ(calc(var(--r) * -1)) translateY(-4%) rotateY(-15deg) scale(.96)}
  to{opacity:1; transform:translateZ(calc(var(--r) * -1)) translateY(-4%) rotateY(0) scale(1)}}
.anneau{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; transform:rotateX(var(--tilt)) rotateY(0deg)}
/* Sol : l'ellipse d'or sur laquelle les cartes sont posées. Hors de l'anneau qui tourne (un disque centré ne change pas d'aspect),
   texture réduite à 1,8 r (le dégradé est transparent au-delà), incliné comme l'anneau. */
.sol{position:absolute; left:50%; top:50%; width:calc(var(--r) * 1.8); height:calc(var(--r) * 1.8); margin:calc(var(--r) * -.9) 0 0 calc(var(--r) * -.9);
  transform:rotateX(var(--tilt)) rotateX(90deg) translateZ(calc(var(--ch) / -2 - 18px)); border-radius:50%;
  background:radial-gradient(circle, rgba(232,194,106,.18), rgba(232,194,106,.05) 58%, transparent 94%); pointer-events:none}

/* ── Cartes ── */
.carte{position:absolute; inset:0; display:block; text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-style:preserve-3d; will-change:transform}
.carte:focus-visible{outline:none}
.carte:focus-visible .face,.carte:focus-within .face{outline:2px solid var(--or-lumiere); outline-offset:4px}
/* Halo de la carte frontale : ombre statique, sans animation, qui n'existe que sur la carte de devant (une seule grande couche au lieu de onze) */
.carte::before{content:""; display:none; position:absolute; inset:-2px; border-radius:14px; pointer-events:none; transform:translateZ(0);
  /* halo diffus uniquement (pas de trait dur de 1 px : un trait fin transformé en 3D se crénelait en escalier) */
  box-shadow:0 0 6px 1px rgba(232,194,106,.55), 0 0 22px 4px rgba(232,194,106,.28), 0 30px 80px -20px rgba(232,194,106,.5)}
.carte.devant::before{display:block}
body.sans-halo .carte.devant::before{display:none}   /* réglage « Halo or : non » (console, Site vitrine) */
/* La face garde une échelle constante (pas de zoom au passage devant : la couche du texte n'est jamais re-rasterisée pendant la rotation) ;
   son transform ne bouge qu'au survol de la carte de face (bascule vers le curseur) ou à l'appui. */
.face{position:absolute; inset:0; border-radius:12px; overflow:hidden; isolation:isolate; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(160deg, var(--anthracite), var(--laque)); border:1px solid var(--trait);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transition:transform .6s var(--ease-out)}
.carte.devant .face{border-color:var(--or); box-shadow:inset 0 0 0 1px rgba(232,194,106,.35), 0 0 0 .5px rgba(232,194,106,.6)}   /* liseré or lissé : bordure + ombre demi-pixel, la face n'est pas mise à l'échelle */
.carte:active .face{--s:.98; transition-duration:.12s}

.visuel{position:absolute; left:0; right:0; top:0; height:56%; overflow:hidden; background:#000}
.visuel img{width:100%; height:100%; object-fit:cover; object-position:50% 12%; display:block;
  transform:scale(1); transition:transform .7s var(--ease-out)}
.carte.devant:hover .visuel img{transform:scale(1.05)}
.visuel::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, var(--laque) 100%); pointer-events:none}
.filigrane{position:absolute; right:-18px; top:10px; width:110px; height:auto; opacity:.10; pointer-events:none; z-index:2}

.texte{position:absolute; left:0; right:0; bottom:0; padding:0 18px 16px; z-index:3}
.carte.fiche .zone{position:absolute; inset:0; z-index:2}
.carte.fiche .texte{pointer-events:none}
.carte.fiche .texte .cta{pointer-events:auto}
.carte.fiche .zone:focus-visible{outline:none}
/* Carte-fiche (div + lien .zone) : en preserve-3d, la face inclinée au survol (--rx/--ry) passe pour moitié derrière le plan de la
   carte, et le navigateur donne alors le clic à la carte elle-même (un div sans lien) au lieu de la face : le lien et le bouton
   Suivre ne recevaient rien. La carte ne capte plus aucun pointeur, sa face (lien .zone, bouton Suivre, cœur) si. */
.carte.fiche{pointer-events:none}
.carte.fiche .face{pointer-events:auto}
/* ... et l'appui ne rétrécit pas la face de la carte-fiche : sinon le lien « Voir l'actualité » ou le bouton Suivre (17 px de haut)
   glissait de 6 px sous le pointeur entre l'enfoncement et le relâchement, et le clic tombait à côté. */
.carte.fiche.devant:active .face{--s:1}
.etiq{display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--or); margin-bottom:5px}
.etiq.jeu{color:var(--glace)} .etiq.soc{color:var(--argent)}
.texte h3{font-family:var(--orb); font-weight:700; font-size:17px; letter-spacing:.06em; line-height:1.2; margin:0 0 5px; text-transform:uppercase; color:var(--blanc)}
.carte.jeu h3{color:var(--or); font-size:16px}
.texte p{margin:0; font-size:13.5px; line-height:1.4; color:var(--fumee)}
.cta{display:inline-block; margin-top:9px; font-size:12.5px; font-weight:600; color:var(--or); letter-spacing:.04em; border-bottom:1px solid transparent; transition:border-color .2s}
.carte.devant:hover .cta{border-bottom-color:var(--or)}
/* Bouton « Suivre » (devenir fan) et état suivi (cœur + actualité) */
button.cta{background:none; border:none; border-bottom:1px solid transparent; padding:0; font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.04em; cursor:pointer; min-height:28px; text-decoration:none}
button.cta:hover,button.cta:focus-visible{border-bottom-color:var(--or)}
button.cta[disabled]{opacity:.6; cursor:wait}
a.cta{text-decoration:none}
.cta.suivi{color:var(--or-lumiere)}
.cta .coeur{color:#ff5a7a; font-size:15px; line-height:1; vertical-align:-1px; margin-right:2px}
.chip{display:inline-block; margin-top:9px; font-family:var(--orb); font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--or);
  border:1px solid rgba(232,194,106,.55); border-radius:999px; padding:6px 14px; transition:background .3s, color .3s, border-color .3s}
.carte.devant:hover .chip{background:linear-gradient(135deg, var(--or), var(--or-profond)); color:#1a1400; border-color:transparent}
.filet{display:block; width:40px; height:1px; background:linear-gradient(90deg, var(--or), transparent); margin-top:8px}

/* Athlète Karim : médaillon rond sur photo pré-floutée (karim-fond.webp, flou et assombrissement cuits dans l'image) */
.visuel.medaillon img.fond-flou{transform:scale(1.15)}
.visuel.medaillon .rond{position:absolute; left:50%; top:50%; width:140px; height:140px; margin:-70px 0 0 -70px; border-radius:50%; overflow:hidden;
  border:2px solid var(--or); box-shadow:0 0 30px rgba(232,194,106,.3); z-index:1}
.visuel.medaillon .rond img{transform:none; object-position:50% 20%}
.carte.devant:hover .visuel.medaillon img.fond-flou{transform:scale(1.2)}
.carte.devant:hover .visuel.medaillon .rond img{transform:scale(1.04)}
/* Athlète à venir : silhouette en trait or, rien d'inventé */
.visuel.attente{display:flex; align-items:flex-end; justify-content:center; background:radial-gradient(ellipse at 50% 80%, rgba(232,194,106,.12), transparent 65%), #000}
.visuel.attente svg{width:110px; height:auto; margin-bottom:-6px}
.visuel.attente em{position:absolute; top:14px; left:18px; font-style:normal; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--retrait)}

/* Athlètes de démonstration : icône de discipline (or) sur fond stylisé, mention discrète */
.visuel.demo{display:flex; align-items:flex-end; justify-content:center; background:#000}
.visuel.demo img{width:96px; height:auto; object-fit:contain; margin-bottom:6px; opacity:.92; transform:none; transition:none}
.visuel.demo em{position:absolute; top:14px; left:18px; right:18px; font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--retrait); z-index:1}
.visuel.demo.piste{background:
  repeating-linear-gradient(-30deg, transparent 0 26px, rgba(232,194,106,.16) 26px 27px, transparent 27px 54px, rgba(232,194,106,.08) 54px 55px),
  radial-gradient(ellipse at 50% 90%, rgba(232,194,106,.16), transparent 62%), linear-gradient(#0d0a08, #1c120a)}
.visuel.demo.fauteuil{background:
  radial-gradient(circle at 30% 30%, rgba(232,194,106,.12), transparent 30%), radial-gradient(circle at 75% 45%, rgba(232,194,106,.10), transparent 28%),
  linear-gradient(transparent 60%, rgba(232,194,106,.08) 61%, transparent 62%, transparent 74%, rgba(232,194,106,.06) 75%, transparent 76%), #0a0a10}
.visuel.demo.bassin{background:
  repeating-linear-gradient(90deg, transparent 0 46px, rgba(127,208,255,.14) 46px 47px),
  radial-gradient(ellipse at 50% 110%, rgba(127,208,255,.22), transparent 60%), linear-gradient(#050810, #0a1a2c)}
.carte.devant:hover .visuel.demo img{transform:translateY(-4px); transition:transform .5s var(--ease-out)}

/* Jeux : médaillon rond cerclé d'or sur fond propre à chaque jeu */
.visuel.jeu{display:flex; align-items:center; justify-content:center}
.visuel.jeu .medail{width:96px; height:96px; border-radius:50%; border:1px solid var(--or); background:radial-gradient(circle at 30% 25%, #1c1c26, #000);
  box-shadow:0 0 24px rgba(232,194,106,.25); display:flex; align-items:center; justify-content:center; z-index:1;
  transition:transform .6s var(--ease-out)}
.visuel.jeu .medail img{width:72px; height:72px; object-fit:contain; transition:none}
.carte.devant:hover .visuel.jeu .medail{transform:scale(1.08)}
.visuel.jeu.espace{background:url(assets/accueil/da-space.webp) center/cover, #000}
.visuel.jeu.espace .agences{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:8px; opacity:.35}
.visuel.jeu.espace .agences img{width:30px; height:30px; object-fit:contain}
.visuel.jeu.radar{background:
  radial-gradient(circle at 50% 50%, transparent 46px, rgba(232,194,106,.35) 47px, transparent 48px),
  radial-gradient(circle at 50% 50%, transparent 76px, rgba(232,194,106,.2) 77px, transparent 78px),
  repeating-linear-gradient(0deg, rgba(127,208,255,.08) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(90deg, rgba(127,208,255,.08) 0 1px, transparent 1px 22px), #07090f}
.visuel.jeu.damier{background:conic-gradient(var(--anthracite) 25%, var(--laque) 0 50%, var(--anthracite) 0 75%, var(--laque) 0) 0 0/52px 52px}
.visuel.jeu.belote{background:var(--laque)}
.visuel.jeu.belote .couleurs{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; justify-items:center;
  font-size:34px; color:var(--or); opacity:.12; pointer-events:none}
.visuel.jeu.belote .couleurs span:nth-child(odd){transform:translateY(-40px)} .visuel.jeu.belote .couleurs span:nth-child(even){transform:translateY(40px)}

/* Sociétés : cadre logo en attente + monogramme */
.visuel.soc{display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, rgba(232,194,106,.08), transparent 60%), #000}
.slot-logo{position:relative; width:160px; height:72px; border:1px dashed rgba(232,194,106,.55); border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--orb); font-weight:900; font-size:26px; letter-spacing:.12em; color:var(--blanc); z-index:1}
.logo-soc{width:118px; height:118px; object-fit:contain; z-index:1}
/* Cellule Hackeys : le logo n'est montré qu'à moitié, coupé net à la moitié exacte par le bord du panneau de texte (idée de Rudolf 21/09, née d'un rognage accidentel sur mobile) */
.visuel.soc.demi{display:block}
.visuel.soc.demi img.logo-soc{position:absolute; left:50%; bottom:0; height:200%; width:auto; max-width:92%; object-fit:contain; transform:translate(-50%,50%)}
.carte.devant:hover .visuel.soc.demi img.logo-soc{transform:translate(-50%,50%) scale(1.04)}
.visuel.soc.demi::after{background:none}
.visuel.soc small{position:absolute; bottom:12px; left:0; right:0; text-align:center; font:400 10px "Exo 2",sans-serif; letter-spacing:.1em; color:var(--retrait); text-transform:uppercase; z-index:1}
.slot-logo small{position:absolute; bottom:-18px; font:400 10px "Exo 2",sans-serif; letter-spacing:.1em; color:var(--retrait); text-transform:uppercase; white-space:nowrap}

/* ── Commandes ── */
.bouton{position:absolute; top:50%; z-index:5; width:44px; height:44px; margin-top:-22px; border-radius:50%; border:1px solid var(--trait);
  background:rgba(11,11,16,.75); color:var(--or); font:700 20px var(--orb); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s}
.bouton:hover{border-color:var(--or); background:rgba(11,11,16,.95)}
.bouton.prec{inset-inline-start:max(8px, calc(50% - 560px))} .bouton.suiv{inset-inline-end:max(8px, calc(50% - 560px))}
.pilote{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; margin-top:2px}
.points{display:flex; justify-content:center; flex-wrap:wrap; gap:0}
.points button{position:relative; width:44px; height:44px; padding:0; border:none; background:transparent; cursor:pointer}
.points button::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-5px 0 0 -5px; border-radius:50%; border:1px solid var(--retrait); background:transparent;
  transition:background .3s, transform .3s, border-color .3s}
.points button:hover::before{border-color:var(--or)}
.points button[aria-current="true"]::before{background:var(--or); border-color:var(--or); transform:scale(1.3)}
.points button.ath::before{border-color:var(--or-profond)} .points button.jeu::before{border-color:#4e7f99} .points button.soc::before{border-color:#7a7d88}
.lecture{flex:0 0 44px; width:44px; height:44px; border-radius:50%; border:1px solid var(--trait); background:transparent; color:var(--or); cursor:pointer; font-size:14px; display:inline-flex; align-items:center; justify-content:center}
.lecture:hover{border-color:var(--or)}
.lecture[aria-pressed="false"]{border-color:var(--or); background:#1a1508}
.legende{text-align:center; min-height:46px; margin-top:0; opacity:0; animation:apparait .5s .5s ease forwards}
.legende b{display:block; font-family:var(--orb); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; transition:opacity .26s; will-change:opacity}
.legende span{display:block; font-size:13px; color:var(--fumee); transition:opacity .26s; will-change:opacity}
.legende.change b,.legende.change span{opacity:0}   /* fondu de la légende (hors anneau) composé : aucune re-rasterisation des cartes */

/* ── Actions : JOUER + espaces ── */
section{padding:34px 0 0}
main section.wrap{padding-top:30px}   /* .wrap (classe) écrasait le padding de section : les titres se collaient au bloc précédent */
section h2{font-family:var(--orb); font-weight:700; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--or); margin:0 0 14px}
.actions{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:14px}
.act{display:flex; flex-direction:column; justify-content:flex-end; gap:4px; min-height:150px; padding:18px; border-radius:14px; border:1px solid var(--trait);
  background:linear-gradient(135deg, var(--anthracite), var(--laque)); text-decoration:none; transition:border-color .2s, transform .2s}
.act:hover{border-color:var(--or); transform:translateY(-2px)}
.act b{font-family:var(--orb); font-weight:700; font-size:16px; letter-spacing:.1em; text-transform:uppercase; color:var(--or)}
.act span{color:var(--fumee); font-size:14px}
.act.play{background:linear-gradient(135deg, #2a2210, var(--laque)); border-color:var(--or-profond); box-shadow:0 20px 60px -30px rgba(232,194,106,.5)}
.act.play b{font-size:30px; color:var(--or-lumiere); text-shadow:0 0 30px rgba(232,194,106,.35)}
@media (max-width:820px){ .actions{grid-template-columns:1fr 1fr} .act.play{grid-column:1/-1; min-height:120px} }
@media (max-width:420px){ .actions{grid-template-columns:1fr} .act{min-height:0} }

/* ── Visite guidée : sous le carrousel ── */
.visite{padding-top:26px}
.visite[hidden]{display:none}
.visite-corps{display:flex; align-items:center; gap:18px 26px; flex-wrap:wrap; padding:18px 20px; border-radius:14px; border:1px solid var(--trait); background:rgba(15,15,20,.85)}
.visite ul{list-style:none; margin:0; padding:0; flex:1 1 460px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px 18px}
.visite li{display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:2px solid var(--or-profond)}
.visite li b{font-family:var(--orb); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--or-lumiere)}
.visite li span{color:var(--fumee); font-size:13.5px; line-height:1.4}
.lancer-visite{flex:0 0 auto; margin-left:auto}
@media (max-width:700px){ .visite ul{grid-template-columns:1fr; flex-basis:100%} .lancer-visite{margin:0 auto} }

/* ── Comment ça marche ── */
.etapes{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.etape{border:1px solid var(--trait); border-radius:14px; padding:16px; background:rgba(15,15,20,.85)}
.etape b{display:block; color:var(--or-lumiere); font-size:15px; margin-bottom:4px}
.etape span{color:var(--fumee); font-size:14px}
.etape em{display:block; margin-top:10px; font-style:normal; font-family:var(--orb); font-size:22px; color:var(--or); letter-spacing:.1em}
@media (max-width:700px){ .etapes{grid-template-columns:1fr} }

/* ── Pied de page ── */
footer{margin-top:40px; padding:22px 0 calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--trait); color:var(--retrait); font-size:13px; text-align:center}
footer nav{display:flex; gap:6px 18px; justify-content:center; flex-wrap:wrap; margin-bottom:6px}
footer a, footer button{color:var(--fumee); background:none; border:none; font:inherit; text-decoration:none; min-height:44px; padding:0 4px; display:inline-flex; align-items:center; cursor:pointer}
footer a:hover, footer button:hover{color:var(--or)}

/* ══ Rail plat sous 900 px : même DOM, plus de perspective ══ */
@media (max-width:899px){
  :root{--cw:min(340px, 82vw); --ch:430px; --tilt:0deg}
  .scene{height:auto; min-height:0; max-height:none; perspective:none; padding:14px 0 12px}
  .monde{position:relative; left:auto; top:auto; margin:0 auto; transform:none; transform-style:flat; animation:apparait .6s ease forwards}
  .anneau{transform:none !important; transform-style:flat}
  .sol{display:none}
  .carte{backface-visibility:visible; -webkit-backface-visibility:visible; transform-style:flat}
  .carte.loin{opacity:0 !important; pointer-events:none; visibility:hidden}
  .face{transition:transform .6s var(--ease-out)}
  .carte.devant .face{--s:1} .carte::before{transform:none}
  .scene::before,.scene::after{width:4%}
  .bouton{width:48px; height:48px; margin-top:-24px}
  .bouton.prec{left:6px} .bouton.suiv{right:6px}
  .texte h3{font-size:16px} .carte.jeu h3{font-size:15px}
  .hero{padding-top:18px}
}
/* Téléphone en paysage : carte sur deux colonnes, visuel à gauche */
@media (max-width:899px) and (max-height:520px) and (orientation:landscape){
  :root{--cw:min(600px, 84vw); --ch:min(300px, 76vh)}
  .visuel{height:100%; right:auto; width:40%}
  .visuel::after{background:linear-gradient(90deg, transparent 50%, var(--laque) 100%)}
  .filigrane{right:auto; left:calc(40% - 60px)}
  .texte{left:40%; bottom:auto; top:50%; transform:translateY(-50%); padding:0 18px}
  .visuel.medaillon .rond{width:110px; height:110px; margin:-55px 0 0 -55px}
  .visuel.attente svg{width:80px}
  .hero{padding-top:10px} .hero p{display:none}
  .scene{padding:8px 0}
  .legende{min-height:0} .legende span{display:none}
}
@media (max-width:640px){ .points button{width:28px} }   /* jusqu'à 11 points + pause sur une ligne à 390 px (cibles 28 x 44 px) */
@media (max-width:400px){ .points button{width:26px} }
@media (max-width:400px){ :root{--cw:86vw; --ch:420px} }

/* ══ Le Ring en WebGL (accueil-webgl.js, PC >= 900 px, sans mouvement réduit) ══
   Le canvas three.js (aria-hidden) dessine l'anneau ; les cartes HTML restent dans le DOM, à plat et invisibles (opacité 0 :
   lecteurs d'écran et focus clavier les voient toujours, et leurs positions servent de gabarit à la rasterisation), sous le
   canvas, sans transform : rien n'est re-rasterisé pendant la rotation. Les voiles des bords (.scene::before/::after, z 4) et
   les boutons (z 5) restent au-dessus du canvas (z 1). Classe ring-gl posée par accueil.js dès l'attente du branchement. */
canvas.ring-gl{display:none}
.scene.ring-gl canvas.ring-gl{display:block; position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:0; touch-action:pan-y}
.scene.ring-gl canvas.ring-gl.pret{animation:ring-gl-entree .9s var(--ease-entree) forwards}
@keyframes ring-gl-entree{from{opacity:0} to{opacity:1}}
.scene.ring-gl .monde{opacity:0; animation:none; transform:none; transform-style:flat; pointer-events:none}
.scene.ring-gl .anneau{transform:none; transform-style:flat; will-change:auto}
.scene.ring-gl .carte{transform:none !important; visibility:visible !important; transform-style:flat; will-change:auto}
.scene.ring-gl .carte::before{display:none}
.scene.ring-gl .sol{display:none}
@media (prefers-reduced-motion:reduce){ .scene.ring-gl canvas.ring-gl.pret{animation:none; opacity:1} }

/* ══ Mouvement réduit ══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .monde{animation:none; opacity:1} .hero h1,.hero p,.legende{animation:none; opacity:1}
  .face,.visuel img,.visuel.jeu .medail,.act,.cta,.chip{transition-duration:.01s}
  .carte.devant:hover .face{--rx:0deg; --ry:0deg}
}

/* ═══════════════════════════════ Visite guidée (tuto existant, restylée) ═══ */
#tuto-overlay{display:none; position:fixed; inset:0; z-index:99999; background:rgba(4,4,12,.97); flex-direction:row}
#tuto-overlay.visible{display:flex}
#tuto-panel{width:340px; min-width:280px; display:flex; flex-direction:column; background:rgba(10,10,22,.98); border-right:1px solid #222; padding:32px 24px 24px}
#tuto-ep-logo{font-family:var(--orb); font-size:1.1rem; font-weight:900; letter-spacing:4px; color:var(--or); margin-bottom:24px; text-align:center}
#tuto-step-emoji{font-size:2.6rem; text-align:center; margin-bottom:10px; line-height:1}
#tuto-step-title{font-family:var(--orb); font-size:1rem; font-weight:700; color:var(--or); text-align:center; margin:0 0 16px; letter-spacing:.5px}
#tuto-step-text{font-size:.9rem; color:#ccc; line-height:1.65; flex:1; margin:0}
#tuto-progress-wrap{margin:24px 0 20px; display:flex; flex-direction:column; gap:6px}
#tuto-progress-label{font-size:.75rem; color:#666; text-align:center}
#tuto-progress-bar-bg{background:#1a1a2a; border-radius:4px; height:4px; overflow:hidden}
#tuto-progress-bar{background:linear-gradient(90deg, var(--or), var(--or-profond)); height:100%; border-radius:4px; transition:width .4s}
#tuto-controls{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#tuto-controls button{background:transparent; border:1px solid #333; border-radius:8px; color:#bbb; cursor:pointer; font:inherit; font-size:.82rem; padding:10px 8px; min-height:44px; transition:all .2s}
#tuto-controls button:hover{border-color:var(--or); color:var(--or); background:rgba(232,194,106,.05)}
#btn-tuto-auto.auto-active{border-color:#27ae60 !important; color:#2ecc71 !important; background:rgba(39,174,96,.1) !important}
#btn-tuto-stop{border-color:#c0392b !important; color:#e74c3c !important; grid-column:1 / -1}
#btn-tuto-stop:hover{background:rgba(192,57,43,.12) !important}
#tuto-iframe-area{flex:1; position:relative; overflow:hidden}
#tuto-iframe{width:100%; height:100%; border:none; display:none}
#tuto-hero{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; background:radial-gradient(ellipse at center, #12121b 0%, #04040c 100%)}
.tuto-hero-logo{font-family:var(--orb); font-size:clamp(2rem,6vw,5rem); font-weight:900; letter-spacing:10px; background:linear-gradient(135deg, var(--or-lumiere), var(--or), var(--or-profond));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:16px}
.tuto-hero-sub{font-size:1.1rem; color:#888; letter-spacing:3px; text-transform:uppercase; text-align:center; padding:0 16px}
.tuto-hero-roles{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:40px; padding:0 16px}
.tuto-hero-roles span{background:rgba(255,255,255,.04); border:1px solid #333; border-radius:50px; padding:8px 20px; font-size:.85rem; color:#888; letter-spacing:1px}
#tuto-loading{display:none; position:absolute; inset:0; background:rgba(4,4,12,.7); align-items:center; justify-content:center; font-size:.9rem; color:#777}
#tuto-loading.visible{display:flex}
#tuto-rotate-overlay{display:none; position:fixed; inset:0; z-index:999999; background:rgba(4,4,12,.97); align-items:center; justify-content:center; flex-direction:column; gap:20px; text-align:center; padding:40px}
#tuto-rotate-overlay.visible{display:flex}
#tuto-rotate-icon{font-size:5rem; animation:tutoRotateHint 2s ease-in-out infinite}
@keyframes tutoRotateHint{0%,100%{transform:rotate(0)} 50%{transform:rotate(90deg)}}
#tuto-rotate-msg{color:var(--or); font-size:1.3rem; font-weight:700; letter-spacing:1px}
#tuto-rotate-sub{color:#888; font-size:.9rem; line-height:1.5; max-width:300px}
#btn-tuto-rotate-skip{background:transparent; border:1px solid #555; border-radius:50px; color:#888; cursor:pointer; font:inherit; font-size:.85rem; padding:10px 28px; margin-top:8px; min-height:44px}
#btn-tuto-rotate-skip:hover{border-color:#aaa; color:#ccc}
#btn-tuto-home{position:fixed; top:calc(10px + env(safe-area-inset-top, 0px)); right:calc(10px + env(safe-area-inset-right, 0px)); z-index:100001;
  background:rgba(10,10,22,.92); border:1px solid var(--or); border-radius:50px; color:var(--or); font:700 .95rem "Exo 2",sans-serif; padding:9px 16px; min-height:44px; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,.6)}
#btn-tuto-home:hover{background:var(--or); color:#1a1400}
@media (max-width:820px) and (orientation:portrait){
  #tuto-overlay{flex-direction:column}
  #tuto-panel{width:100%; min-width:0; max-height:44vh; max-height:44dvh; border-right:none; border-bottom:1px solid #222; padding:14px 14px 10px; overflow:hidden}
  #tuto-ep-logo{margin-bottom:6px; font-size:.9rem} #tuto-step-emoji{font-size:1.6rem; margin-bottom:4px} #tuto-step-title{font-size:.95rem; margin:0 0 8px}
  #tuto-step-text{flex:1 1 auto; min-height:0; overflow-y:auto} #tuto-iframe-area{flex:1 1 auto; min-height:0}
}
@media (max-height:520px) and (orientation:landscape){
  #tuto-panel{width:300px; min-width:240px; padding:12px 14px 10px; overflow:hidden}
  #tuto-ep-logo{margin-bottom:6px; font-size:.9rem} #tuto-step-emoji{font-size:1.5rem; margin-bottom:4px} #tuto-step-title{font-size:.9rem; margin:0 0 6px}
  #tuto-step-text{flex:1 1 auto; min-height:0; overflow-y:auto; font-size:.85rem} #tuto-controls button{padding:7px 6px}
}

/* Fondu d'apparition du carrousel (Rudolf 22/09/2026) : sur la section entière (l'opacité animée sur .monde aplatit la 3D),
   1,1 s après la fin de l'intro caméra ; sans intro, dès le chargement. */
html.intro-en-cours .scene, html.intro-en-cours .legende, html.intro-en-cours .points{opacity:0}
.scene.fondu, .legende.fondu, .points.fondu{animation:ring-fondu 1.1s ease-out forwards}
@keyframes ring-fondu{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.scene.fondu,.legende.fondu,.points.fondu{animation:none; opacity:1}}

/* Pied de page mobile : Mon espace + Déconnexion (l'en-tête ne les montre plus sous 640 px) */
.pied-mobile{display:none}
@media (max-width:640px){
  .pied-mobile{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:14px 0 10px}
  .pied-mobile a,.pied-mobile button{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--trait); background:rgba(11,11,16,.7); color:var(--fumee); font:inherit; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer}
  .pied-mobile button{color:#f2b3b3; border-color:rgba(230,80,80,.45)}
}

/* Cellule de Pierre-Mickaël Hugues : panoramique lent (Rudolf, 22/09/2026). Sa photo est une bande verticale qui va de son
   visage jusqu'au sommet de la flamme olympique ; la fenêtre de la carte ne peut pas montrer les deux à la fois, alors elle
   remonte doucement quand la carte est de face, marque un temps sur la flamme, puis redescend sur lui. Arrêt au survol, et
   aucune animation si le visiteur a demandé moins de mouvement. */
.carte[data-cle="pmh"] .visuel img{object-position:50% 100%}
/* le mouvement commence dès que la carte approche du centre (classe posée par accueil.js), pour qu'il soit déjà lancé
   quand elle arrive de face ; les deux règles déclarent la MÊME animation, elle se poursuit sans repartir de zéro */
.carte.devant[data-cle="pmh"] .visuel img,
.carte.approche[data-cle="pmh"] .visuel img{animation:pano-pmh 12s ease-in-out infinite}
.carte.devant[data-cle="pmh"]:hover .visuel img{animation-play-state:paused}
@keyframes pano-pmh{
  0%,8%{object-position:50% 100%}
  46%,60%{object-position:50% 0%}
  92%,100%{object-position:50% 100%}
}
@media (prefers-reduced-motion: reduce){ .carte.devant[data-cle="pmh"] .visuel img, .carte.approche[data-cle="pmh"] .visuel img{animation:none} }

/* ── Cellule « La Marianne » (23/09/2026, demande de Rudolf) ──────────────────────────────────
   Une seule photo, la vraie, prise sur le site de la maison : Jimmy, la pizza sur la pelle, dans sa
   cuisine. Son visage et son restaurant tiennent dans la même image, donc pas de médaillon en plus.
   Cadrage haut (38 %) pour que le visage reste au-dessus du dégradé qui porte le texte. */
.visuel.marianne img{object-position:50% 38%}

/* Message de déconnexion (Rudolf, 24/09/2026) : même boîte et même largeur que la fenêtre de connexion,
   pour que le départ réponde à l'arrivée. Il s'efface tout seul, la page se recharge derrière. */
.voile-adieu{position:fixed;inset:0;z-index:9500;background:rgba(5,5,7,.86);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:adieu-entre .35s ease}
@keyframes adieu-entre{from{opacity:0}to{opacity:1}}
.boite-adieu{width:100%;max-width:400px;background:linear-gradient(135deg,#14141c,#0b0b10);
  border:1px solid var(--trait);border-radius:18px;padding:30px 26px;text-align:center}
.adieu-titre{font-family:var(--orb,Orbitron),sans-serif;font-weight:700;color:var(--or);letter-spacing:.06em;
  font-size:17px;margin-bottom:12px}
.adieu-txt{color:var(--fumee);font-size:14px;line-height:1.55;margin:0 0 14px}
.adieu-sous{color:var(--retrait);font-size:13px;margin:0;font-style:italic}
@media (prefers-reduced-motion:reduce){.voile-adieu{animation:none}}