/* ASC 2027 · version 3 · « Le futur du jeu ».
   Une rubrique, une page. La mise en page éditoriale et le grattage du portrait viennent de Lando Norris,
   le monde en relief et l'interface des coins viennent d'Igloo. Deux familles de couleurs : la craie et l'encre.
   Une seule lumière, le vert du terrain, réservée à ce qui bouge sous la main. */
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-normal-latin.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/Archivo-normal-latin-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Instrument Serif";src:url(../fonts/Instrument-Serif-italic-latin.woff2) format("woff2");font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/Instrument-Serif-normal-latin.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrains-Mono-latin.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{
  --craie:#eceee9;--craie-2:#e2e5df;--blanc:#f7f8f5;--encre:#0b0d0c;--encre-2:#434945;--encre-3:#858b86;--trait:rgba(11,13,12,.13);
  --vert:#c6f432;--vert-sombre:#8fb61c;--nuit:#0d130f;
  --mono:"JetBrains Mono",ui-monospace,monospace;--titre:"Archivo","Arial Narrow",sans-serif;--serif:"Instrument Serif",Georgia,serif;
  --m:clamp(16px,2.6vw,40px);--courbe:cubic-bezier(.2,.75,.1,1);--courbe-2:cubic-bezier(.75,0,.15,1)
}
*{box-sizing:border-box}
html{background:var(--craie);color-scheme:light;scrollbar-width:thin;scrollbar-color:var(--encre) transparent}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;color:var(--encre);font:400 16px/1.55 var(--titre);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.fige{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
em{font-family:var(--serif);font-style:italic;font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:-.01em}
::selection{background:var(--vert);color:var(--encre)}
.cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){html.curseur-actif,html.curseur-actif a,html.curseur-actif button{cursor:none}}

/* ---------- Le fond vivant : des courbes de niveau, comme une carte du terrain ---------- */
.fond{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
main,.pied{position:relative}

/* ---------- Le curseur ---------- */
.curseur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;mix-blend-mode:normal}
.curseur-point{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--encre);transition:transform .3s var(--courbe),opacity .3s}
.curseur-anneau{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:1px solid rgba(11,13,12,.45);display:grid;place-items:center;transition:width .45s var(--courbe),height .45s var(--courbe),margin .45s var(--courbe),background .35s,border-color .35s}
.curseur-anneau span{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .25s;white-space:nowrap}
.curseur.lien .curseur-anneau{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--encre)}
.curseur.etiquette .curseur-anneau{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--vert);border-color:var(--vert)}
.curseur.etiquette .curseur-anneau span{opacity:1}
.curseur.etiquette .curseur-point,.curseur.lien .curseur-point{transform:scale(0)}
.curseur.clair .curseur-point{background:var(--blanc)}.curseur.clair .curseur-anneau{border-color:rgba(247,248,245,.6)}
@media (hover:none),(pointer:coarse){.curseur{display:none}}

/* ---------- L'interface des coins ---------- */
.ui{position:fixed;left:0;right:0;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:var(--m);pointer-events:none;transition:transform .6s var(--courbe),color .4s}
.ui>*{pointer-events:auto}
.ui.masque{transform:translateY(-140%)}
.ui-logo{display:flex;align-items:center;gap:14px;text-decoration:none;justify-self:start}
.ui-logo img{width:52px;height:auto;transition:transform .6s var(--courbe)}
.ui-logo:hover img{transform:rotate(-8deg) scale(1.06)}
.ui-logo span{font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.ui-heure{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);display:flex;gap:14px;align-items:center}
.ui-heure i{width:6px;height:6px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 3px rgba(198,244,50,.25);animation:pouls 2s infinite}
@keyframes pouls{50%{box-shadow:0 0 0 7px rgba(198,244,50,0)}}
.ui-droite{justify-self:end;display:flex;gap:8px;align-items:center}
.btn-son,.btn-menu{height:44px;border:0;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 18px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .35s,color .35s,transform .35s var(--courbe)}
.btn-son{background:rgba(247,248,245,.6);color:var(--encre);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(11,13,12,.08)}
.btn-menu{background:var(--encre);color:var(--blanc);padding:0 22px}
.btn-menu:hover{background:var(--vert);color:var(--encre)}
.btn-menu b{display:grid;gap:4px}.btn-menu b i{display:block;width:16px;height:1.5px;background:currentColor;transition:transform .45s var(--courbe)}
.menu-ouvert .btn-menu b i:first-child{transform:translateY(2.75px) rotate(45deg)}.menu-ouvert .btn-menu b i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
.ondes{display:flex;align-items:flex-end;gap:2px;height:12px}
.ondes i{display:block;width:2px;height:28%;background:currentColor;border-radius:1px}
.btn-son[aria-pressed=true] .ondes i{animation:onde 1s ease-in-out infinite}
.ondes i:nth-child(2){animation-delay:-.3s}.ondes i:nth-child(3){animation-delay:-.6s}.ondes i:nth-child(4){animation-delay:-.15s}
@keyframes onde{50%{height:100%}}
.ui-bas{position:fixed;z-index:40;left:var(--m);right:var(--m);bottom:var(--m);display:flex;justify-content:space-between;align-items:end;pointer-events:none;font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.ui-bas .barre{width:120px;height:1px;background:var(--trait);position:relative;overflow:hidden;margin-top:8px}
.ui-bas .barre i{position:absolute;inset:0;background:var(--encre);transform-origin:left;transform:scaleX(0)}

/* ---------- Le menu plein écran ---------- */
.menu{position:fixed;inset:0;z-index:45;background:var(--craie);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--courbe-2);display:grid;grid-template-columns:1.4fr 1fr;padding:calc(var(--m) + 90px) var(--m) var(--m);gap:var(--m);visibility:hidden}
.menu-ouvert .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu-liste{list-style:none;margin:0;padding:0;align-self:end;counter-reset:m}
.menu-liste li{overflow:hidden;border-top:1px solid var(--trait)}
.menu-liste a{position:relative;display:flex;align-items:baseline;gap:22px;text-decoration:none;padding:6px 0 2px;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(40px,6.4vh,84px);line-height:.98;letter-spacing:-.01em;transform:translateY(105%);transition:transform .9s var(--courbe),color .3s}
.menu-ouvert .menu-liste a{transform:none}
.menu-liste li:nth-child(2) a{transition-delay:.04s}.menu-liste li:nth-child(3) a{transition-delay:.08s}.menu-liste li:nth-child(4) a{transition-delay:.12s}.menu-liste li:nth-child(5) a{transition-delay:.16s}.menu-liste li:nth-child(6) a{transition-delay:.2s}.menu-liste li:nth-child(7) a{transition-delay:.24s}.menu-liste li:nth-child(8) a{transition-delay:.28s}
.menu-liste a small{font:500 11px var(--mono);letter-spacing:.12em;color:var(--encre-3);min-width:28px}
.menu-liste a:before{content:"";position:absolute;left:0;bottom:0;height:100%;width:100%;background:var(--vert);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--courbe);z-index:-1}
.menu-liste a:hover:before,.menu-liste a[aria-current=page]:before{transform:scaleX(1)}
.menu-cote{align-self:end;display:grid;gap:26px;font:500 11px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);opacity:0;transform:translateY(20px);transition:opacity .6s .3s,transform .8s .3s var(--courbe)}
.menu-ouvert .menu-cote{opacity:1;transform:none}
.menu-cote a{text-decoration:none;border-bottom:1px solid var(--trait)}
.menu-cote a:hover{border-color:var(--encre)}
.menu-apercu{font:400 clamp(26px,2.6vw,40px)/1.1 var(--serif);font-style:italic;text-transform:none;letter-spacing:-.01em;color:var(--encre);min-height:3.3em;max-width:420px}

/* ---------- Le rideau entre deux pages ---------- */
.rideau{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;grid-template-columns:repeat(6,1fr)}
.rideau i{background:var(--encre);transform:scaleY(0);transform-origin:bottom}
.rideau-nom{position:fixed;inset:0;z-index:91;display:grid;place-items:center;pointer-events:none;opacity:0}
.rideau-nom div{display:grid;justify-items:center;gap:16px;color:var(--blanc)}
.rideau-nom img{width:84px;filter:invert(1)}
.rideau-nom span{font:500 11px var(--mono);letter-spacing:.3em;text-transform:uppercase}
.rideau-nom span b{color:var(--vert);font-weight:500}

/* ---------- Les titres de page ---------- */
.tete{position:relative;min-height:100vh;display:grid;align-content:end;padding:calc(var(--m) + 110px) var(--m) calc(var(--m) + 60px)}
.tete-sur{display:flex;gap:28px;flex-wrap:wrap;margin:0 0 22px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.tete-sur b{font-weight:500;color:var(--encre)}
.geant{margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(64px,13.4vw,250px);line-height:.8;letter-spacing:-.025em}
.geant em{letter-spacing:-.03em}
.geant .ligne{display:block;overflow:hidden;padding-bottom:.04em}
.geant .ligne>span{display:inline-block}
.lettre{display:inline-block;will-change:transform}
.mot-l{display:inline-block;white-space:nowrap}
.tete-bas{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-top:36px}
.chapeau{max-width:520px;margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--encre-2)}
.chapeau strong{color:var(--encre);font-weight:600}
.defiler{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);display:flex;gap:12px;align-items:center}
.defiler i{width:1px;height:46px;background:var(--trait);position:relative;overflow:hidden}
.defiler i:after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--encre);animation:goutte 1.8s var(--courbe-2) infinite}
@keyframes goutte{to{top:100%}}

/* ---------- Les blocs de contenu ---------- */
.section{position:relative;padding:18vh var(--m)}
.sur{margin:0 0 20px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.grand{margin:0 0 24px;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(46px,7vw,128px);line-height:.86;letter-spacing:-.015em}
.corps{max-width:440px;margin:0;color:var(--encre-2);font-size:16px;line-height:1.62}
.corps+.corps{margin-top:14px}
.manifeste{margin:0;max-width:1500px;font:500 clamp(30px,4.3vw,76px)/1.04 var(--titre);font-stretch:78%;letter-spacing:-.018em}
.manifeste .mot{opacity:.13;transition:opacity .25s}
.manifeste em{font-size:1.06em}
.papier{background:var(--blanc);border-radius:30px 30px 0 0;box-shadow:0 -40px 90px rgba(11,13,12,.06)}
.nuit{background:var(--nuit);color:var(--blanc)}
.nuit .sur,.nuit .corps{color:#9aa39c}
.trait-haut{border-top:1px solid var(--trait)}

/* Les chiffres qui comptent */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--trait)}
.chiffre{padding:34px 22px 40px 0;border-right:1px solid var(--trait)}
.chiffre:last-child{border-right:0}
.chiffre b{display:block;font-weight:800;font-stretch:62%;font-size:clamp(70px,9vw,170px);line-height:.85;letter-spacing:-.03em}
.chiffre span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}

/* Le bandeau qui défile */
.bandeau{overflow:hidden;white-space:nowrap;border-block:1px solid var(--trait);padding:22px 0}
.bandeau-piste{display:inline-flex;gap:50px;animation:defile 40s linear infinite;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(28px,3.4vw,58px);line-height:1}
.bandeau-piste span{display:inline-flex;align-items:center;gap:50px}
.bandeau-piste span:after{content:"";width:12px;height:12px;border-radius:50%;background:var(--vert)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- La liste des rubriques (accueil) ---------- */
.rubriques{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.rubriques a{position:relative;display:grid;grid-template-columns:80px 1fr 1fr 60px;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid var(--trait);text-decoration:none;overflow:hidden}
.rubriques a:before{content:"";position:absolute;inset:0;background:var(--vert);transform:translateY(101%);transition:transform .7s var(--courbe);z-index:-1}
.rubriques a:hover:before{transform:none}
.r-num{font:500 11px var(--mono);letter-spacing:.12em;color:var(--encre-3)}
.r-titre{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(44px,6.6vw,118px);line-height:.88;letter-spacing:-.015em;transition:transform .7s var(--courbe)}
.rubriques a:hover .r-titre{transform:translateX(26px)}
.r-txt{max-width:340px;font-size:15px;color:var(--encre-2)}
.r-fleche{justify-self:end;width:54px;height:54px;border-radius:50%;border:1px solid var(--encre);display:grid;place-items:center;transition:transform .6s var(--courbe),background .3s}
.r-fleche svg{width:18px;transition:transform .6s var(--courbe)}
.rubriques a:hover .r-fleche{background:var(--encre);color:var(--vert);transform:rotate(-45deg)}
.apercu-flottant{position:fixed;left:0;top:0;z-index:30;width:280px;aspect-ratio:3/4;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .35s,transform .5s var(--courbe);background:var(--encre);box-shadow:0 30px 80px rgba(11,13,12,.25)}
.apercu-flottant.visible{opacity:1;transform:scale(1)}
.apercu-flottant img{width:100%;height:100%;object-fit:cover}
.apercu-flottant p{position:absolute;left:16px;right:16px;bottom:14px;margin:0;color:var(--blanc);font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase}

/* ---------- L'introduction de l'accueil : le compte à rebours, le film, le logo ---------- */
.intro{position:fixed;inset:0;z-index:80;background:var(--craie)}
.intro.finie{opacity:0;visibility:hidden;transition:opacity 1.1s var(--courbe),visibility 1.1s}
.in-coin{position:absolute;font:500 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.in-hg{top:var(--m);left:var(--m)}.in-hd{top:var(--m);right:var(--m);text-align:right}
.in-centre{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px}
.in-num{font:800 clamp(110px,19vw,300px)/.8 var(--titre);font-stretch:62%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.in-txt{font:500 11px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--encre-3)}
.in-barre{width:min(340px,70vw);height:1px;background:var(--trait);position:relative}
.in-barre i{position:absolute;inset:0;background:var(--encre);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.in-choix{position:absolute;left:0;right:0;bottom:calc(var(--m) + 10px);display:grid;justify-items:center;gap:14px;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s var(--courbe);pointer-events:none}
.in-choix.pret{opacity:1;transform:none;pointer-events:auto}
.in-entrer{border:0;border-radius:999px;padding:20px 56px;background:var(--encre);color:var(--blanc);font:800 14px var(--titre);font-stretch:80%;letter-spacing:.34em;text-transform:uppercase;cursor:pointer;display:grid;gap:3px;justify-items:center;transition:background .3s,color .3s,transform .5s var(--courbe)}
.in-entrer small{font:500 9.5px var(--mono);letter-spacing:.18em;opacity:.6}
.in-entrer:hover{background:var(--vert);color:var(--encre);transform:scale(1.04)}
.in-muet{border:0;background:none;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.in-film{position:absolute;inset:0;background:#000;opacity:0;visibility:hidden;transition:opacity .9s}
.in-film.joue{opacity:1;visibility:visible}
.in-film video{width:100%;height:100%;object-fit:cover}
.in-film .bandes:before,.in-film .bandes:after{content:"";position:absolute;left:0;right:0;height:7vh;background:#000;z-index:2}
.in-film .bandes:before{top:0}.in-film .bandes:after{bottom:0}
.in-passer{position:absolute;z-index:3;right:var(--m);bottom:calc(7vh + 18px);border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.2);backdrop-filter:blur(8px);color:#fff;border-radius:999px;padding:12px 20px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.in-passer:hover{background:#fff;color:#000}
.in-mention{position:absolute;z-index:3;left:calc(var(--m) - 4px);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;margin:0;color:rgba(255,255,255,.75);font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.in-sous-titre{position:absolute;z-index:3;left:0;right:0;bottom:calc(7vh + 22px);text-align:center;margin:0;color:#fff;font:400 clamp(20px,2vw,30px)/1.2 var(--serif);font-style:italic;opacity:0;transition:opacity .8s;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.in-sous-titre.vu{opacity:1}
.in-logo{position:absolute;inset:0;background:var(--blanc);display:grid;place-items:center;align-content:center;gap:34px;opacity:0;visibility:hidden}
.in-logo.joue{opacity:1;visibility:visible}
.in-logo svg{width:min(380px,58vw);height:auto;overflow:visible}
.in-logo .trace{fill:transparent;stroke:var(--encre);stroke-width:1.4;stroke-linejoin:round}
.in-logo .balayage{position:absolute;top:0;bottom:0;width:22vw;left:-30vw;background:linear-gradient(90deg,transparent,rgba(198,244,50,.55),transparent);mix-blend-mode:multiply;filter:blur(8px)}
.in-devise{margin:0;font:800 clamp(16px,1.5vw,22px) var(--titre);font-stretch:70%;letter-spacing:.42em;text-transform:uppercase;text-align:center}
.in-devise em{letter-spacing:.04em;font-size:1.15em}

/* ---------- Le premier écran de l'accueil : le dôme ---------- */
.dome{position:relative;height:420vh}
.dome-scene{position:sticky;top:0;height:100vh;overflow:hidden}
.dome-scene canvas{position:absolute;inset:0;width:100%;height:100%}
.dome-chap{position:absolute;inset:0;padding:calc(var(--m) + 110px) var(--m) calc(var(--m) + 70px);display:grid;pointer-events:none;opacity:0}
.dome-chap.c0{opacity:1;align-content:end}
.dome-titre{margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(56px,8.6vw,170px);line-height:.82;letter-spacing:-.025em;max-width:70vw}
.dome-titre .ligne{display:block;overflow:hidden}
.dome-titre .t2,.dome-titre .t4{padding-left:8vw}
.dome-signe{margin:26px 0 0;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);display:flex;gap:22px;flex-wrap:wrap}
.dome-chap .bloc{align-self:center;max-width:560px}
.dome-chap.droite .bloc{justify-self:end}
.dome-chap.centre .bloc{justify-self:center;text-align:center;align-self:start}
.carte-bloc{position:fixed;z-index:35;left:0;top:0;pointer-events:none;padding:14px 16px;border-radius:14px;background:rgba(247,248,245,.86);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(11,13,12,.14);opacity:0;transition:opacity .25s;min-width:220px}
.carte-bloc.visible{opacity:1}
.cb-sur{margin:0;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}
.cb-nom{margin:4px 0;font-weight:800;font-stretch:65%;text-transform:uppercase;font-size:26px;line-height:1}
.cb-club{margin:0;font-size:13px}

/* ---------- Le grattage : le blason du club cache le joueur, la main le révèle ---------- */
.grat{position:relative;aspect-ratio:3/4;border-radius:20px;overflow:hidden;background:var(--encre);isolation:isolate;touch-action:pan-y}
.grat-dessous{position:absolute;inset:0}
.grat-dessous img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--courbe)}
.grat.revele .grat-dessous img{transform:scale(1)}
.grat-dessous:after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(11,13,12,.22) 1px,transparent 1.3px) 0 0/4px 4px;mix-blend-mode:multiply;pointer-events:none}
.grat-voile,.grat-trace{position:absolute;inset:0;width:100%;height:100%}
.grat-voile{transition:opacity .9s var(--courbe)}
.grat.revele .grat-voile{opacity:0}
.grat-trace{mix-blend-mode:screen;pointer-events:none}
.grat-info{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:10px;color:var(--blanc);pointer-events:none;transition:color .5s}
.grat-info .gi-nom{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(26px,2.3vw,38px);line-height:.9;letter-spacing:-.01em}
.grat-info .gi-nom em{display:block;font-size:.6em;letter-spacing:0}
.grat-info .gi-rang{font:500 10.5px var(--mono);letter-spacing:.12em}
.grat-haut{position:absolute;left:16px;right:16px;top:14px;z-index:3;display:flex;justify-content:space-between;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(247,248,245,.72);pointer-events:none}
.grat-indice{position:absolute;inset:0;z-index:2;display:grid;place-items:end center;padding-bottom:9%;pointer-events:none;font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,248,245,.5);transition:opacity .4s}
.grat.touche .grat-indice{opacity:0}
.maillot{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2a312c,#0b0d0c 70%)}
.maillot svg{width:78%;height:auto}

/* ---------- La page des joueurs ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}
.filtres button{border:1px solid var(--trait);background:none;border-radius:999px;padding:11px 18px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filtres button[aria-pressed=true],.filtres button:hover{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.filtres button sup{color:var(--encre-3);margin-left:4px}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.carte-j{text-decoration:none;display:block}
.carte-j.cache-f{display:none}
.carte-j .cj-bas{display:flex;justify-content:space-between;gap:12px;padding:14px 2px 0;font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.carte-j .cj-bas b{color:var(--encre);font-weight:500}
.grille .carte-j:nth-child(4n+2){margin-top:60px}.grille .carte-j:nth-child(4n+3){margin-top:120px}.grille .carte-j:nth-child(4n+4){margin-top:30px}
.vue-liste{display:none}

/* ---------- La fiche d'un joueur ---------- */
.fiche{display:grid;grid-template-columns:minmax(300px,.9fr) 1.1fr;gap:clamp(24px,5vw,90px);padding:calc(var(--m) + 120px) var(--m) 12vh;align-items:start}
.fiche .grat{position:sticky;top:110px;border-radius:26px}
.fiche-nom{margin:0 0 30px;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(70px,10vw,200px);line-height:.8;letter-spacing:-.025em}
.fiche-nom em{display:block;font-size:.46em;letter-spacing:-.01em;margin-bottom:.08em}
.fiche-club{display:flex;gap:18px;align-items:center;padding:22px 0;border-block:1px solid var(--trait);margin-bottom:30px}
.fiche-club img{width:64px;height:64px;object-fit:contain}
.fiche-club b{display:block;font-weight:800;font-stretch:70%;text-transform:uppercase;font-size:clamp(24px,2.4vw,38px);line-height:1}
.fiche-club span{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.donnees{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid var(--trait)}
.donnees div{padding:18px 0;border-bottom:1px solid var(--trait)}
.donnees div:nth-child(odd){padding-right:20px}
.donnees dt{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}
.donnees dd{margin:6px 0 0;font-weight:700;font-stretch:80%;font-size:clamp(22px,2vw,30px);line-height:1.05;text-transform:uppercase}
.prochain{margin-top:34px;padding:26px;border-radius:20px;background:var(--encre);color:var(--blanc)}
.prochain p{margin:0}
.prochain .p-match{font-weight:800;font-stretch:65%;text-transform:uppercase;font-size:clamp(24px,2.2vw,34px);line-height:1;margin:10px 0}
.prochain .p-match i{font-family:var(--serif);font-weight:400;text-transform:none;color:var(--vert);padding:0 .25em}
.voisins{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--trait)}
.voisins a{padding:36px var(--m);text-decoration:none;display:grid;gap:6px;transition:background .4s}
.voisins a:hover{background:var(--vert)}
.voisins a+a{border-left:1px solid var(--trait);text-align:right}
.voisins span{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.voisins b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(34px,4vw,70px);line-height:.9}

/* ---------- Les deux mondes (expertises) ---------- */
.mondes{display:flex;gap:14px;height:86vh;padding:0 var(--m)}
.monde{position:relative;flex:1;border-radius:26px;overflow:hidden;padding:34px;display:flex;flex-direction:column;justify-content:space-between;transition:flex 1s var(--courbe);text-decoration:none}
.monde:hover{flex:1.9}
.monde.terrain{background:var(--encre);color:var(--blanc)}
.monde.terrain:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(198,244,50,.06) 0 70px,transparent 70px 140px);pointer-events:none}
.monde.hors{background:var(--blanc);color:var(--encre);box-shadow:inset 0 0 0 1px var(--trait)}
.monde-titre{position:relative;margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(64px,8.4vw,170px);line-height:.82;letter-spacing:-.02em}
.monde-titre em{display:block}
.monde.terrain .monde-titre em{color:var(--vert)}
.monde ul{position:relative;list-style:none;margin:0;padding:0;columns:2;column-gap:26px;font:500 11px/2.1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.services{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.services li{border-bottom:1px solid var(--trait)}
.services li > button{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:70px 1fr 160px 40px;gap:20px;align-items:center;padding:26px 0;cursor:pointer}
.services .s-num{font:500 11px var(--mono);letter-spacing:.12em;color:var(--encre-3)}
.services .s-titre{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(32px,4vw,68px);line-height:.9;transition:transform .6s var(--courbe)}
.services button:hover .s-titre{transform:translateX(16px)}
.services .s-cote{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.services .s-plus{justify-self:end;width:34px;height:34px;border-radius:50%;border:1px solid var(--encre);position:relative;transition:transform .5s var(--courbe),background .3s}
.services .s-plus:before,.services .s-plus:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor}
.services .s-plus:after{transform:rotate(90deg);transition:transform .5s var(--courbe)}
.services li.ouvert .s-plus{background:var(--vert);border-color:var(--vert);transform:rotate(180deg)}
.services li.ouvert .s-plus:after{transform:rotate(0)}
.services .s-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--courbe)}
.services li.ouvert .s-detail{grid-template-rows:1fr}
.services .s-detail>div{overflow:hidden}
.services .s-detail p{margin:0 0 28px 90px;max-width:620px;color:var(--encre-2);font-size:17px;line-height:1.6}

/* ---------- Le mental ---------- */
.souffle{display:grid;place-items:center;min-height:100vh;padding:var(--m);text-align:center;position:relative}
.souffle-rond{position:relative;width:min(56vh,74vw);aspect-ratio:1;display:grid;place-items:center}
.souffle-rond i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--encre);opacity:.2}
.souffle-rond i:nth-child(2){inset:12%;opacity:.12}.souffle-rond i:nth-child(3){inset:24%;opacity:.08}
.souffle-coeur{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e4ff8a,var(--vert) 45%,var(--vert-sombre));transform:scale(.45);box-shadow:0 0 120px rgba(198,244,50,.45)}
.souffle-txt{position:relative;z-index:2;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(34px,4.4vw,72px);line-height:.9}
.souffle-txt small{display:block;margin-top:10px;font:500 11px var(--mono);letter-spacing:.16em}
.situations{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.situation{position:relative;padding:28px;border-radius:22px;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--trait);min-height:420px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .5s,color .5s,transform .7s var(--courbe)}
.situation:hover{background:var(--encre);color:var(--blanc);transform:translateY(-10px)}
.situation b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(34px,3.2vw,56px);line-height:.88}
.situation p{margin:0;font-size:15px;line-height:1.55;opacity:.8}
.situation .mono{color:var(--encre-3)}
.situation:hover .mono{color:var(--vert)}

/* ---------- L'équipe ---------- */
.membres{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.membre{position:relative;min-height:62vh;border-radius:26px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:var(--blanc);box-shadow:inset 0 0 0 1px var(--trait)}
.membre.agent{background:var(--encre);color:var(--blanc)}
.membre-mono{position:absolute;right:-.06em;top:-.16em;font-weight:900;font-stretch:62%;font-size:clamp(220px,26vw,460px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px currentColor;opacity:.18;pointer-events:none;transition:transform 1.2s var(--courbe),opacity .6s}
.membre:hover .membre-mono{transform:translate(-4%,6%) scale(1.06);opacity:.32}
.membre-nom{position:relative;margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(50px,6vw,108px);line-height:.84;letter-spacing:-.02em}
.membre-nom em{display:block;font-size:.5em}
.membre-role{position:relative;display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.membre-role p{margin:0;font:500 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.8;max-width:300px}
.badge{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--vert);color:var(--encre);font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:transform .4s var(--courbe)}
.badge:hover{transform:scale(1.05)}
.badge.discret{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:.75}
.membre.large{grid-column:span 2;min-height:46vh}

/* ---------- Le pôle jeunes ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--trait)}
.etape{padding:34px 30px 40px 0;border-right:1px solid var(--trait)}
.etape+.etape{padding-left:30px}
.etape:last-child{border-right:0}
.etape b{display:block;font-weight:800;font-stretch:62%;font-size:clamp(90px,10vw,180px);line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.2px var(--encre)}
.etape h3{margin:24px 0 12px;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(32px,3vw,52px);line-height:.9}
.etape p{margin:0;max-width:340px;color:var(--encre-2);font-size:15.5px;line-height:1.6}

/* ---------- Le contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,110px);padding:0 var(--m) 14vh}
.contact-direct a{display:block;text-decoration:none;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(34px,4.6vw,84px);line-height:.92;letter-spacing:-.015em;padding:14px 0;border-bottom:1px solid var(--trait);transition:color .3s,padding .6s var(--courbe)}
.contact-direct a:hover{padding-left:16px}
.contact-direct a span{display:block;font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--encre-3);margin-bottom:6px}
.form{display:grid;gap:4px}
.champ{position:relative;border-bottom:1px solid var(--trait);padding-top:22px}
.champ label{position:absolute;left:0;top:28px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);transition:transform .4s var(--courbe),color .3s;transform-origin:left;pointer-events:none}
.champ input,.champ textarea,.champ select{all:unset;box-sizing:border-box;width:100%;padding:10px 0 14px;font:600 22px/1.3 var(--titre);font-stretch:85%}
.champ textarea{min-height:120px;resize:vertical}
.champ:focus-within{border-color:var(--encre)}
.champ:focus-within label,.champ.plein label{transform:translateY(-22px) scale(.86);color:var(--encre)}
.profils{display:flex;flex-wrap:wrap;gap:8px;padding:24px 0 10px}
.profils label{position:relative}
.profils input{position:absolute;opacity:0}
.profils span{display:block;padding:11px 18px;border-radius:999px;border:1px solid var(--trait);font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
.profils input:checked+span{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.profils input:focus-visible+span{outline:2px solid var(--vert);outline-offset:2px}
.envoyer{justify-self:start;margin-top:30px;border:0;border-radius:999px;padding:22px 40px;background:var(--encre);color:var(--blanc);font:800 14px var(--titre);font-stretch:80%;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s,transform .5s var(--courbe)}
.envoyer:hover{background:var(--vert);color:var(--encre);transform:scale(1.04)}
.form-retour{min-height:24px;margin:10px 0 0;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* ---------- Le pied de page commun ---------- */
.pied{background:var(--encre);color:var(--blanc);padding:16vh var(--m) var(--m);overflow:hidden}
.pied-titre{margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(70px,15vw,290px);line-height:.8;letter-spacing:-.03em}
.pied-titre em{color:var(--vert)}
.pied-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:14vh;padding-top:30px;border-top:1px solid rgba(247,248,245,.14);font:500 11px/2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pied-grille p{margin:0 0 8px;color:#7f8781}
.pied-grille a{display:block;text-decoration:none;width:max-content}
.pied-grille a:hover{color:var(--vert)}
.pied-bas{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:60px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6f7771}
.note-ia{max-width:760px;text-transform:none;letter-spacing:.02em;line-height:1.6}

/* ---------- Les apparitions ---------- */
.monte{opacity:0;transform:translateY(46px)}
.js-pret .monte.vu{opacity:1;transform:none;transition:opacity 1s var(--courbe),transform 1.2s var(--courbe)}

/* ---------- Téléphone ---------- */
@media (max-width:900px){
  .ui{grid-template-columns:auto 1fr}.ui-heure{display:none}.ui-logo span{display:none}
  .btn-son span:last-child{display:none}.btn-son{padding:0 14px}
  .menu{grid-template-columns:1fr;padding-top:120px}.menu-cote .menu-apercu{display:none}
  .tete-bas{grid-template-columns:1fr}.defiler{display:none}
  .chiffres{grid-template-columns:1fr 1fr}.chiffre:nth-child(2){border-right:0}.chiffre{border-bottom:1px solid var(--trait)}
  .rubriques a{grid-template-columns:34px 1fr 44px;gap:12px}.r-txt{display:none}.r-fleche{width:44px;height:44px}
  .apercu-flottant{display:none}
  .grille{grid-template-columns:1fr 1fr;gap:12px}.grille .carte-j{margin-top:0!important}.grille .carte-j:nth-child(even){transform:translateY(40px)}
  .grat-info .gi-nom{font-size:22px}
  .fiche{grid-template-columns:1fr;padding-top:110px}.fiche .grat{position:relative;top:0}
  .mondes{flex-direction:column;height:auto}.monde{min-height:70vh}.monde:hover{flex:1}
  .services li > button{grid-template-columns:40px 1fr 34px}.services .s-cote{display:none}.services .s-detail p{margin-left:0}
  .situations{grid-template-columns:1fr 1fr}.situation{min-height:300px}
  .membres{grid-template-columns:1fr}.membre.large{grid-column:auto}
  .etapes{grid-template-columns:1fr}.etape,.etape+.etape{padding:30px 0;border-right:0;border-bottom:1px solid var(--trait)}
  .contact{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
  .dome-titre{max-width:none}.dome-titre .t2,.dome-titre .t4{padding-left:0}
  .ui-bas{display:none}
}
@media (max-width:520px){.situations{grid-template-columns:1fr}.grille{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.monte{opacity:1;transform:none}}
.arrive .rideau i{transform:scaleY(1)}.arrive .rideau-nom{opacity:1}
.geant.moyen{font-size:clamp(54px,9.4vw,178px)}
@media (max-width:900px){.grille .grat-haut span:last-child{display:none}.carte-j .cj-bas span:last-child{display:none}}

/* L'emblème façon grands studios */
.in-logo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.in-nom{position:absolute;left:0;right:0;bottom:8vh;display:grid;justify-items:center;gap:14px;z-index:2;opacity:0;transform:translateY(16px);transition:opacity 1.2s,transform 1.4s var(--courbe)}
.in-nom.vu{opacity:1;transform:none}
.in-marque{margin:0;font:800 clamp(30px,4.6vw,78px) var(--titre);font-stretch:68%;letter-spacing:.2em;line-height:1;text-align:center;text-transform:uppercase;color:var(--encre);text-shadow:0 2px 30px rgba(255,255,255,.8)}
.in-nom .in-devise{color:var(--encre-2)}

/* La carte du joueur en couleur : le fond prend la couleur de son club, la lumière suit la main */
.carte-couleur{--mx:.5;--my:.35;background:radial-gradient(130% 85% at 50% 18%,color-mix(in srgb,var(--club) 62%,#fff 38%) 0%,var(--club) 42%,color-mix(in srgb,var(--club) 35%,#050605) 100%);overflow:hidden}
.carte-couleur:after{display:none}
.carte-couleur .gd-num{position:absolute;left:-.04em;top:-.12em;font-weight:900;font-stretch:62%;font-size:min(62cqw,300px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);pointer-events:none}
.grat{container-type:inline-size}
.carte-couleur .gd-photo{position:absolute;left:50%;bottom:0;width:100%;height:auto;max-width:none;object-fit:contain;transform:translate(calc(-50% + (var(--mx) - .5) * -14px),calc((var(--my) - .5) * -8px)) scale(1.06);transition:transform 1.4s var(--courbe);filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.grat.revele .carte-couleur .gd-photo{transform:translate(calc(-50% + (var(--mx) - .5) * -14px),calc((var(--my) - .5) * -8px)) scale(1)}
.carte-couleur .gd-photo:not(.detoure){bottom:4%;width:104%}
.carte-couleur .gd-nom{position:absolute;left:0;right:0;bottom:-.08em;text-align:center;font-weight:900;font-stretch:62%;font-size:min(30cqw,150px);line-height:.8;letter-spacing:-.03em;color:rgba(255,255,255,.12);mix-blend-mode:overlay;pointer-events:none}
.carte-couleur .gd-lumiere{position:absolute;inset:0;background:radial-gradient(60% 45% at calc(var(--mx) * 100%) calc(var(--my) * 100%),rgba(255,255,255,.35),transparent 70%),linear-gradient(180deg,transparent 55%,rgba(5,6,5,.55));mix-blend-mode:soft-light;pointer-events:none}
.carte-couleur .maillot{background:transparent}
.apercu-flottant{container-type:inline-size}

.grat-indice span{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:rgba(11,13,12,.55);backdrop-filter:blur(6px);color:#f7f8f5;animation:indice 2.4s var(--courbe) infinite}
.grat-indice span:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 0 rgba(198,244,50,.6);animation:pouls 1.6s infinite}
@keyframes indice{50%{transform:translateY(-4px)}}

.rideau-gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:89;pointer-events:none}

/* Les chocs des ouvertures : un éclair, et un mot géant qui frappe sur l'impact */
.in-eclair{position:absolute;inset:0;z-index:6;background:#fff;pointer-events:none;animation:eclair .8s ease-out forwards}
.in-eclair.vert{background:radial-gradient(circle at 50% 50%,#fff 0%,rgba(198,244,50,.85) 40%,rgba(198,244,50,0) 75%)}
@keyframes eclair{0%{opacity:.95}100%{opacity:0}}
.in-mot{position:absolute;z-index:7;left:0;right:0;top:50%;margin:0;transform-origin:center;translate:0 -50%;text-align:center;font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(80px,17vw,300px);line-height:.8;letter-spacing:-.03em;color:#fff;mix-blend-mode:difference;pointer-events:none}
.in-film video{will-change:transform}

/* Les cartes penchent vers la main, et un reflet irisé passe dessus */
.grat{transform:perspective(1000px) rotateX(calc((var(--my, .5) - .5) * -9deg)) rotateY(calc((var(--mx, .5) - .5) * 11deg));transition:transform .5s var(--courbe),box-shadow .5s;transform-style:preserve-3d;box-shadow:0 20px 50px rgba(11,13,12,.12)}
.grat:hover{box-shadow:0 40px 90px rgba(11,13,12,.28)}
.grat:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(70% 50% at calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%),rgba(255,255,255,.22),transparent 60%),conic-gradient(from calc(var(--mx, .5) * 360deg) at 50% 50%,rgba(198,244,50,.0),rgba(198,244,50,.16),rgba(120,200,255,.12),rgba(255,120,220,.1),rgba(198,244,50,.0));mix-blend-mode:overlay;opacity:0;transition:opacity .4s}
.grat:hover:after{opacity:1}
.fiche .grat{transform:none}

/* Le défilé des joueurs sur l'accueil : la rangée glisse sur le côté pendant qu'on descend */
.defile{position:relative;height:300vh}
.defile-scene{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;align-content:center;gap:4vh}
.defile-tete{padding:0 var(--m);display:flex;justify-content:space-between;align-items:end;gap:20px}
.defile-piste{display:flex;gap:18px;padding:0 var(--m);will-change:transform}
.defile-piste a{flex:0 0 clamp(220px,22vw,340px);text-decoration:none}
.defile-piste .grat{aspect-ratio:3/4}
.defile-piste .dp-bas{display:flex;justify-content:space-between;padding:12px 2px 0;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.defile-piste .dp-bas b{color:var(--encre);font-weight:500}
.defile-compteur{font:800 clamp(60px,8vw,140px)/.8 var(--titre);font-stretch:62%;letter-spacing:-.03em}
.defile-compteur small{font:500 11px var(--mono);letter-spacing:.12em;color:var(--encre-3);margin-left:8px}
@media (max-width:900px){.defile{height:auto}.defile-scene{position:relative;height:auto;padding:12vh 0}.defile-piste{overflow-x:auto;scroll-snap-type:x mandatory}.defile-piste a{scroll-snap-align:start;flex-basis:70vw}}

.carte-couleur .gd-action{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1) translate(calc((var(--mx) - .5) * -10px),calc((var(--my) - .5) * -8px));transition:transform 1.6s var(--courbe);filter:contrast(1.06) saturate(1.1)}
.grat.revele .carte-couleur .gd-action{transform:scale(1.02) translate(calc((var(--mx) - .5) * -10px),calc((var(--my) - .5) * -8px))}
.carte-couleur:has(.gd-action) .gd-num{z-index:1;-webkit-text-stroke:1.5px rgba(255,255,255,.35);mix-blend-mode:overlay}
.carte-couleur:has(.gd-action) .gd-lumiere{background:radial-gradient(60% 45% at calc(var(--mx) * 100%) calc(var(--my) * 100%),rgba(255,255,255,.25),transparent 70%),linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--club) 70%,#000) 100%);mix-blend-mode:normal;opacity:.85}

.recu{display:grid;gap:10px;align-content:start}
.recu svg{width:110px;height:110px;margin-bottom:14px}
.recu circle{fill:none;stroke:var(--encre);stroke-width:2;stroke-dasharray:340;stroke-dashoffset:340;animation:trace 1.1s var(--courbe) forwards}
.recu path{fill:none;stroke:var(--vert-sombre);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:trace .7s .6s var(--courbe) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.envoyer[disabled]{opacity:.6;cursor:progress}

/* Le tiroir d'explication */
.explicable{cursor:pointer;position:relative}
.explicable:focus-visible{outline:2px solid var(--vert);outline-offset:4px}
li.explicable:after,.situation.explicable:after,.etape.explicable:after{content:"+";position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:500 15px var(--mono);background:var(--vert);color:var(--encre);transition:transform .5s var(--courbe)}
li.explicable:hover:after,.situation.explicable:hover:after,.etape.explicable:hover:after{transform:rotate(90deg) scale(1.1)}
.monde ul li.explicable{padding-right:34px}
.monde ul li.explicable:after{top:4px;right:0;width:20px;height:20px;font-size:12px}
.monde ul li.explicable:hover{color:var(--vert)}
.monde.hors ul li.explicable:hover{color:var(--vert-sombre)}
.tiroir{position:fixed;inset:0;z-index:70}
.tiroir-fond{position:absolute;inset:0;background:rgba(11,13,12,.35);backdrop-filter:blur(6px);opacity:0;transition:opacity .6s}
.tiroir.ouvert .tiroir-fond{opacity:1}
.tiroir-panneau{position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--craie);box-shadow:-40px 0 90px rgba(11,13,12,.2);transform:translateX(102%);transition:transform .8s var(--courbe-2);overflow-y:auto;overscroll-behavior:contain}
.tiroir-panneau:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--vert),transparent)}
.tiroir.ouvert .tiroir-panneau{transform:none}
.tiroir-corps{padding:clamp(70px,9vh,110px) clamp(24px,4vw,56px) 60px}
.tiroir-fermer{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;border:0;background:var(--encre);cursor:pointer;display:grid;place-items:center}
.tiroir-fermer i{position:absolute;width:18px;height:1.5px;background:var(--blanc);transform:rotate(45deg)}.tiroir-fermer i+i{transform:rotate(-45deg)}
.tiroir-fermer:hover{background:var(--vert)}.tiroir-fermer:hover i{background:var(--encre)}
.tiroir-titre{margin:0 0 26px;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(44px,5.4vw,80px);line-height:.88;letter-spacing:-.015em}
.tiroir-tech{margin:0;font-size:17px;line-height:1.65;color:var(--encre-2)}
.tiroir-clair{margin-top:28px;padding:22px 24px;border-radius:18px;background:var(--encre);color:var(--blanc)}
.tiroir-clair span{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vert)}
.tiroir-clair p{margin:8px 0 0;font:400 clamp(22px,2vw,28px)/1.25 var(--serif);font-style:italic}
.tiroir-points{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
.tiroir-points li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--trait);font-size:16px}
.tiroir-points b{font:500 11px var(--mono);letter-spacing:.1em;color:var(--encre-3);padding-top:4px}

/* La respiration guidée en particules */
.souffle2{position:relative;height:100vh;min-height:640px;display:grid;grid-template-rows:auto 1fr auto;padding:calc(var(--m) + 70px) var(--m) var(--m);overflow:hidden}
.souffle2 canvas{position:absolute;inset:0;width:100%;height:100%}
.s2-haut,.s2-centre,.s2-bas{position:relative;z-index:1}
.s2-choix{display:flex;flex-wrap:wrap;gap:8px}
.s2-choix button{border:1px solid var(--trait);background:rgba(247,248,245,.6);backdrop-filter:blur(8px);border-radius:999px;padding:11px 18px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
.s2-choix button small{opacity:.55;margin-left:6px}
.s2-choix button[aria-pressed=true]{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.s2-centre{align-self:center;justify-self:center;text-align:center;pointer-events:none}
.s2-phase{margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(46px,6vw,104px);line-height:.85;letter-spacing:-.02em}
.s2-sec{margin:12px 0 0;font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2)}
.s2-bas{display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:end;padding-top:20px}
.s2-bas b{display:block;font-weight:800;font-stretch:62%;font-size:clamp(44px,4.4vw,74px);line-height:.85;margin-top:6px}
.s2-bas small{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)}
/* Les huit leviers, chacun avec sa petite animation */
.leviers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.levier{position:relative;min-height:300px;padding:26px;border-radius:22px;background:var(--craie);box-shadow:inset 0 0 0 1px var(--trait);display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;transition:background .5s,color .5s,transform .7s var(--courbe)}
.levier:hover{background:var(--encre);color:var(--blanc);transform:translateY(-8px)}
.levier .mono{position:absolute;top:22px;left:26px;color:var(--encre-3)}
.levier b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(30px,2.6vw,46px);line-height:.9}
.levier p{margin:0;font-size:15px;opacity:.75}
.lv-anim{position:absolute;top:24px;right:24px;width:86px;height:86px;border-radius:50%;opacity:.9}
.lv-a{background:radial-gradient(circle,var(--vert) 0 6px,transparent 7px),repeating-radial-gradient(circle,transparent 0 10px,rgba(11,13,12,.15) 10px 11px);animation:lvA 3s linear infinite}
.lv-r{background:radial-gradient(circle,var(--vert) 0 40%,transparent 41%);animation:lvR 5s ease-in-out infinite}
.lv-v{border:1px dashed currentColor;animation:lvV 6s linear infinite}
.lv-v:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--vert)}
.lv-o{background:conic-gradient(var(--vert) 0 25%,transparent 0 50%,var(--vert) 0 75%,transparent 0);animation:lvV 4s steps(4) infinite;opacity:.6}
.lv-e{background:radial-gradient(circle,var(--vert) 0 30%,transparent 31%);animation:lvE 1.1s ease-in-out infinite}
.lv-c{background:linear-gradient(to top,var(--vert) 0 var(--h,30%),transparent 0);border-radius:12px;animation:lvC 3s ease-in-out infinite;box-shadow:inset 0 0 0 1px rgba(11,13,12,.15)}
.lv-s{background:radial-gradient(circle at 35% 40%,transparent 0 22px,var(--vert) 23px 30px,transparent 31px);animation:lvR 7s ease-in-out infinite}
.lv-b{background:linear-gradient(90deg,var(--vert) 0 var(--w,20%),rgba(11,13,12,.12) 0);border-radius:8px;height:10px;top:40px;animation:lvB 4s ease-in-out infinite}
@keyframes lvA{to{transform:rotate(360deg)}}
@keyframes lvR{50%{transform:scale(.55)}}
@keyframes lvV{to{transform:rotate(360deg)}}
@keyframes lvE{50%{transform:scale(1.25)}}
@property --h{syntax:"<percentage>";inherits:false;initial-value:30%}
@property --w{syntax:"<percentage>";inherits:false;initial-value:20%}
@keyframes lvC{50%{--h:95%}}
@keyframes lvB{50%{--w:100%}}
.levier.explicable:after{content:"+";position:absolute;right:22px;bottom:22px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 15px var(--mono);background:var(--vert);color:var(--encre)}
@media (max-width:900px){.leviers{grid-template-columns:1fr 1fr}.s2-bas{grid-template-columns:1fr 1fr}.s2-bas>div:last-child{grid-column:span 2}}

/* L'équipe : les fondateurs, puis les scouts */
.m-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qr{width:58px;height:58px;border-radius:10px;display:grid;place-items:center;text-align:center;font:500 8.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre);background:repeating-conic-gradient(var(--encre) 0 25%,var(--blanc) 0 50%) 0 0/10px 10px;position:relative;overflow:hidden}
.qr:before{content:"";position:absolute;inset:8px;background:var(--blanc);border-radius:4px}
.qr{isolation:isolate}.qr:before{z-index:-1}
.scouts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scout{position:relative;min-height:340px;padding:28px;border-radius:24px;background:var(--craie);box-shadow:inset 0 0 0 1px var(--trait);display:flex;flex-direction:column;justify-content:space-between;transition:background .5s,color .5s,transform .7s var(--courbe)}
.scout:hover{background:var(--encre);color:var(--blanc);transform:translateY(-8px)}
.scout .mono{color:var(--encre-3)}
.scout-nom{margin:0;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(46px,4.6vw,84px);line-height:.85}
.scout-nom em{display:block;font-size:.6em}
.scout p:last-child{margin:0;font-size:15px;opacity:.8;max-width:300px}
.scout.explicable:after{content:"+";position:absolute;right:22px;bottom:22px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 15px var(--mono);background:var(--vert);color:var(--encre)}
@media (max-width:900px){.scouts{grid-template-columns:1fr}}

/* L'équipe, version du 23/10 au soir : trois fondateurs sur fond noir, des textes plus lisibles */
.fondateurs .membre{min-height:66vh}
.fondateurs .membre .sur{color:#c6f432;font-size:12px}
.fondateurs .membre-nom{font-size:clamp(60px,7.4vw,140px)}
/* 26/10/2026 : le nom du président n est plus plus grand que les autres. */
.m-desc{font:400 clamp(17px,1.4vw,21px)/1.5 var(--titre)!important;letter-spacing:0!important;text-transform:none!important;opacity:.92!important;max-width:560px!important;color:#e9ece7}
.grand-badge{border:0;cursor:pointer;padding:15px 22px;font-size:12px}
.fondateurs .membre .qr{width:64px;height:64px}
.scouts .scout{min-height:420px;background:var(--encre);color:var(--blanc)}
.scouts .scout .mono{color:#c6f432;font-size:12px}
.scout-nom{font-size:clamp(64px,6.4vw,118px)!important}
.scout-nom em{color:#c6f432}
.scout-desc{font-size:clamp(17px,1.3vw,20px)!important;opacity:.9!important;max-width:340px}
.scout:hover{background:#1b211d}

/* Le défilé : une rangée libre, de gauche à droite, sans descendre la page */
.defile{height:auto}
.defile-scene{position:relative;height:auto;padding:14vh 0 12vh;overflow:visible}
.defile-piste{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;padding-bottom:10px}
.defile-piste::-webkit-scrollbar{display:none}
.defile-piste:active{cursor:grabbing}
.defile-piste a{scroll-snap-align:start}
.defile-nav{display:flex;align-items:end;gap:10px}
.defile-fl{width:58px;height:58px;border-radius:50%;border:1px solid var(--encre);background:none;font:500 20px var(--mono);cursor:pointer;transition:background .3s,color .3s}
.defile-fl:hover{background:var(--encre);color:var(--vert)}
/* Licences FIFA : le vrai QR code et le numéro (24/10/2026) */
.licence-fifa{display:inline-flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:14px;background:var(--blanc);color:var(--encre)}
.licence-fifa .qr-img{width:76px;height:76px;border-radius:8px;display:block;image-rendering:auto}
.lic-num{font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:grid}
.lic-num b{font:700 15px/1.2 var(--mono);letter-spacing:.04em;margin-top:2px}
/* Lisibilité au défilement (24/10/2026, demande du gérant) : le menu du haut et la barre du bas
   portent leur propre fond. Un titre qui passe dessous ne se lit plus en même temps que le menu. */
.ui:before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:linear-gradient(180deg,rgba(236,238,233,.94) 0%,rgba(236,238,233,.86) 70%,rgba(236,238,233,0) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-mask:linear-gradient(180deg,#000 75%,transparent);mask:linear-gradient(180deg,#000 75%,transparent)}
.ui.voile:before{opacity:1}
body.menu-ouvert .ui:before{opacity:0}
/* La barre du bas ne porte plus de texte : elle passait sur les noms des joueurs et les titres.
   Il reste un fil de progression de 2 px, au ras de l'écran, qui ne cache rien. */
.ui-bas{left:0;right:0;bottom:0;display:block}
.ui-bas>div:last-child{display:none}
.ui-bas>div:first-child{font-size:0;line-height:0;color:transparent}
.ui-bas .barre{width:100%;height:2px;margin:0;background:transparent}
.ui-bas .barre i{background:var(--encre)}
/* Le nom du joueur sous chaque carte : lisible d'un coup d'œil */
.defile-piste .dp-bas{flex-direction:column;justify-content:flex-start;gap:4px;padding-top:14px}
.dp-nom{display:block;font:800 clamp(20px,1.7vw,26px)/1.05 var(--titre)!important;font-stretch:72%;letter-spacing:-.005em;text-transform:uppercase;color:var(--encre)!important}
.dp-club{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2)}
.cj-bas .dp-nom{margin-bottom:5px}
/* La signature de fin d'ouverture (24/10/2026) : le vrai logo, à plat, sur un noir profond. */
.sig{position:absolute;inset:0;z-index:3;background:#060707;display:grid;place-items:center;overflow:hidden;opacity:0;transition:opacity .6s}
.sig.vu{opacity:1}
.sig-lumiere{position:absolute;inset:-20%;background:radial-gradient(42% 38% at 50% 44%,rgba(255,244,220,.11),rgba(255,244,220,.03) 45%,transparent 70%)}
.sig-grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:screen;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sig-centre{position:relative;display:grid;justify-items:center;gap:0;transform:translateY(-2vh)}
.sig-logo svg{width:min(340px,56vw);height:auto;display:block;overflow:visible}
.sig-trait{fill:none;stroke:#efe9da;stroke-width:.7;stroke-linejoin:round}
.sig-matiere{fill:#f3efe5}
.sig-filet{display:block;width:min(360px,64vw);height:1px;margin:clamp(30px,5vh,48px) 0 clamp(22px,3.4vh,32px);background:linear-gradient(90deg,transparent,#c9a45a 18%,#e8d29b 50%,#c9a45a 82%,transparent);transform-origin:50% 50%}
.sig-nom{margin:0;padding-left:.42em;font:800 clamp(15px,1.6vw,24px)/1 var(--titre);font-stretch:68%;letter-spacing:.42em;text-transform:uppercase;color:#f3efe5;text-align:center;white-space:nowrap}
.sig-devise{margin:18px 0 0;font:400 clamp(17px,1.5vw,23px)/1.3 var(--serif);font-style:italic;color:rgba(243,239,229,.62);text-align:center}
.sig-devise em{color:#e8d29b}
.sig.immobile .sig-filet,.sig.immobile .sig-nom,.sig.immobile .sig-devise{opacity:1}
@media (max-width:520px){.sig-nom{letter-spacing:.24em;padding-left:.24em}}
/* QR des licences plus gros, à la demande du gérant (24/10/2026) : il se scanne d'un téléphone posé à distance. */
.licence-fifa{padding:10px 18px 10px 10px;gap:16px}
.licence-fifa .qr-img{width:118px;height:118px}
.lic-num b{font-size:17px}
@media (max-width:520px){.licence-fifa .qr-img{width:104px;height:104px}}
/* Les lettres qui descendent (g, p, j, y) et l'italique qui penche étaient coupés par le cache des lignes
   (24/10/2026, « le G est tronqué »). Le cache s'agrandit vers le bas et vers la droite ; une marge négative
   garde l'espacement des lignes identique. */
.geant .ligne,.dome-titre .ligne,.grand .ligne{padding:0 .12em .2em 0;margin:0 -.12em -.16em 0}
.geant em,.dome-titre em{padding-right:.06em}
/* L'Alliance, la philosophie d'ASC (24/10/2026) */
.s-aller{margin:0 0 28px 90px}
.s-aller .badge{border:0;cursor:pointer}
.moyens{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.moyen{position:relative;padding:26px 24px 28px;border-radius:22px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);cursor:pointer;transition:transform .5s var(--courbe),box-shadow .4s}
.moyen:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--encre),0 18px 40px rgba(11,13,12,.08)}
.moyen .m-n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--encre-3)}
.moyen .m-t{margin:18px 0 10px;font:800 clamp(26px,2.4vw,38px)/1 var(--titre);font-stretch:66%;text-transform:uppercase}
.moyen .m-d{margin:0;color:var(--encre-2);font-size:15.5px;line-height:1.5}
.partenaires{display:flex;align-items:center;gap:clamp(24px,5vw,70px);flex-wrap:wrap;margin-top:44px;padding:26px 30px;border-radius:22px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.partenaires .sur{margin:0}
.partenaires img{height:40px;width:auto}
.anciens-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.anciens-grille .grat{aspect-ratio:3/4}
.anciens-grille .dp-bas{display:flex;flex-direction:column;gap:4px;padding:14px 2px 0}
@media (max-width:1000px){.moyens,.anciens-grille{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.moyens{grid-template-columns:1fr}.anciens-grille{grid-template-columns:1fr 1fr;gap:12px}.s-aller{margin-left:0}.partenaires img{height:30px}}
.logo-tr{display:inline-flex;align-items:center;gap:12px}
.partenaires .logo-tr img{height:34px;width:auto}
.partenaires .logo-tr.grand-logo img{height:44px}
.logo-tr span{font:600 26px/1 "Lato","Archivo",sans-serif;font-stretch:100%;letter-spacing:-.01em;color:#182147}
.logo-tr b{font-weight:600;color:#109a52}
.anciens .credits{margin:22px 0 0;font:400 11px/1.6 var(--mono);color:var(--encre-3);letter-spacing:.02em}
/* Notre histoire et Nos partenaires (25/10/2026) */
.ponts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.pont{display:grid;gap:10px;padding:30px 30px 32px;border-radius:24px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait);text-decoration:none;color:var(--encre);transition:transform .5s var(--courbe),box-shadow .4s}
.pont:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--encre),0 18px 40px rgba(11,13,12,.08)}
.pont .m-n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--encre-3)}
.pont .m-t{font:800 clamp(30px,3vw,48px)/1 var(--titre);font-stretch:64%;text-transform:uppercase}
.pont .m-d{color:var(--encre-2);font-size:16px;line-height:1.5}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.ami{position:relative;padding:30px 28px 32px;border-radius:24px;background:var(--encre);color:var(--blanc)}
.ami .m-n{font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--vert)}
.ami-nom{margin:22px 0 6px;font:800 clamp(30px,2.8vw,44px)/.95 var(--titre);font-stretch:64%;text-transform:uppercase}
.ami-nom em{display:block;font:400 italic .62em/1.1 var(--serif);text-transform:none;color:var(--vert)}
.ami-role{margin:0 0 18px;font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a9b0aa}
.ami-passe{margin:0 0 14px;font:400 italic 20px/1.3 var(--serif);color:#e8ebe4}
.ami-prisme{margin:0;color:#c9cfc8;font-size:15.5px;line-height:1.55}.ami-prisme b{color:var(--blanc)}
.jalons{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.jalons li{padding:24px 24px 26px;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.jalons b{display:block;font:800 clamp(34px,3.4vw,56px)/1 var(--titre);font-stretch:62%;color:var(--vert);margin-bottom:10px}
.jalons span{color:#c9cfc8}
.parcours{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:14px}
.parcours li{padding:28px 30px;border-radius:22px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.pc-nom{margin:0 0 14px;font:800 clamp(26px,2.4vw,38px)/1 var(--titre);font-stretch:64%;text-transform:uppercase}
.pc-etapes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.pc-etapes span{padding:7px 14px;border-radius:999px;background:var(--craie-2);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pc-etapes span:last-child{background:var(--encre);color:var(--vert)}
.pc-etapes i{font-style:normal;color:var(--encre-3)}
.pc-txt{margin:0;color:var(--encre-2);max-width:820px}
.recit{margin:40px 0 0;padding:30px 32px;border-radius:24px;background:var(--encre);color:var(--blanc);font-size:18px;line-height:1.6}
.recit .sur{color:var(--vert);margin:0 0 12px}.recit p{margin:0}.recit b{color:var(--vert)}
.partenaire{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(24px,5vw,80px);align-items:center}
.p-logo{display:grid;justify-items:center;gap:18px;padding:48px 30px;border-radius:26px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.grand-logo img{height:64px!important;width:auto}.grand-logo span{font-size:42px!important}
.tm-logo{height:84px;width:auto}
.p-statut{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}
.moyen-titre{margin:0 0 18px;font:800 clamp(34px,4vw,64px)/.92 var(--titre);font-stretch:62%;text-transform:uppercase}
.p-tech{font-size:18px;line-height:1.6;color:var(--encre)}
.p-clair{color:var(--encre-2);line-height:1.6}.p-clair b{color:var(--encre)}
.moyens.deux{grid-template-columns:1fr 1fr}
@media (max-width:1000px){.trio,.jalons{grid-template-columns:1fr}.partenaire{grid-template-columns:1fr}}
@media (max-width:640px){.ponts,.moyens.deux{grid-template-columns:1fr}.grand-logo span{font-size:30px!important}.grand-logo img{height:46px!important}}
/* Le choix de la langue, dans l'en-tête (25/10/2026) */
.langues{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(247,248,245,.8);box-shadow:0 0 0 1px var(--trait);margin-right:8px}
.langues a{font:500 10.5px/1 var(--mono);letter-spacing:.08em;padding:7px 8px;border-radius:999px;color:var(--encre-2);text-decoration:none;transition:background .3s,color .3s}
.langues a:hover{color:var(--encre)}
.langues a[aria-current]{background:var(--encre);color:var(--blanc)}
@media (max-width:760px){.langues{position:fixed;left:var(--m);bottom:calc(var(--m) + 4px);margin:0;z-index:45}.langues a{padding:6px 7px}}
/* La signature, version cinéma (25/10/2026) */
.sig-poussiere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sig-eclat{position:absolute;left:-10%;right:-10%;top:calc(50% - 6vh);height:2px;background:linear-gradient(90deg,transparent,rgba(255,236,196,.15) 20%,rgba(255,246,226,.95) 50%,rgba(255,236,196,.15) 80%,transparent);filter:blur(1.5px);box-shadow:0 0 24px 6px rgba(255,226,170,.25);opacity:0;pointer-events:none}
.sig-bande{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:4;transform:scaleY(0)}
.sig-bande.haut{top:0;transform-origin:top}.sig-bande.bas{bottom:0;transform-origin:bottom}
.sig.immobile .sig-bande{transform:scaleY(1)}
/* Les explications rendues à leur place (25/10/2026) : moments de carrière, méthode mentale, jeunes talents */
.principes{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.principes .badge{border:0;cursor:pointer}
.moments{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.moment{display:grid;align-content:start;gap:10px;text-align:left;padding:26px 24px 28px;border:0;border-radius:22px;background:var(--encre);color:var(--blanc);cursor:pointer;font:inherit;transition:transform .5s var(--courbe)}
.moment:hover{transform:translateY(-5px)}
.moment .m-n{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vert)}
.moment .m-t{font:800 clamp(28px,2.6vw,40px)/1 var(--titre);font-stretch:64%;text-transform:uppercase}
.moment .m-d{color:#c9cfc8;font-size:15.5px;line-height:1.5}
.methode{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.methode .sur{color:var(--vert);margin:0 0 12px}
.puces{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.puces li{padding:9px 14px;border-radius:999px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:rgba(198,244,50,.12);color:inherit;box-shadow:inset 0 0 0 1px rgba(198,244,50,.35);transition:background .3s}
.puces li:hover{background:var(--vert);color:var(--encre)}
.jeunes-gestes{margin-top:22px;padding:22px 26px;border-radius:20px;background:var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.jeunes-gestes .sur{margin:0 0 12px}
.jeunes-gestes .puces li{background:var(--craie-2);box-shadow:inset 0 0 0 1px var(--trait)}
.jeunes-gestes .puces li:hover{background:var(--encre);color:var(--vert)}
@media (max-width:1000px){.moments{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.moments{grid-template-columns:1fr}}
/* L'insigne TransferRoom sous le nom de l'agence (25/10/2026) */
.ui-marque{justify-self:start;display:grid;gap:8px;pointer-events:auto}
.ui-tr{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;width:max-content;padding:8px 13px 9px;border-radius:10px;background:rgba(247,248,245,.94);box-shadow:0 0 0 1px var(--trait),0 6px 18px -10px rgba(18,20,18,.35);text-decoration:none;transition:box-shadow .3s,transform .3s}
.ui-tr .tr-sur,.ui-fifa .tr-sur{font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#4a4f49}
.ui-tr img{display:block;height:21px;width:auto}
.ui-tr:hover{box-shadow:0 0 0 1px #0E9655,0 8px 22px -10px rgba(14,150,85,.45);transform:translateY(-1px)}
@media (max-width:760px){.ui-tr{padding:6px 10px 7px;gap:4px}.ui-tr img{height:16px}.ui-tr .tr-sur{font-size:8px}}
.moments{grid-template-columns:repeat(3,1fr)}
a.moment{text-decoration:none;background:var(--vert);color:var(--encre)}
a.moment .m-n{color:var(--encre)}a.moment .m-d{color:var(--encre-2)}
#mehdi-kechkeche{scroll-margin-top:120px}
@media (max-width:1000px){.moments{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.moments{grid-template-columns:1fr}}
/* La galaxie des trois associés (25/10/2026) */
.galaxie{position:relative;height:clamp(620px,72vh,760px);margin-top:30px;border-radius:32px;overflow:hidden;cursor:grab;touch-action:pan-y;
  background:radial-gradient(60% 55% at 50% 50%,#1a2119 0%,#0b0d0c 70%),#0b0d0c;
  background-image:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.55),transparent),radial-gradient(1px 1px at 78% 18%,rgba(255,255,255,.45),transparent),radial-gradient(1.5px 1.5px at 64% 76%,rgba(198,244,50,.6),transparent),radial-gradient(1px 1px at 30% 84%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 88% 58%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 46% 10%,rgba(255,255,255,.35),transparent),radial-gradient(60% 55% at 50% 50%,#1a2119 0%,#0b0d0c 72%)}
.galaxie.prise{cursor:grabbing}
.galaxie .g-liens{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.galaxie .g-liens line{stroke:var(--vert);stroke-width:1;stroke-dasharray:3 6}
.galaxie .g-liens circle{fill:var(--vert);filter:drop-shadow(0 0 6px rgba(198,244,50,.8))}
.galaxie .ami{position:absolute;left:0;top:0;width:min(330px,72vw);will-change:transform;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(198,244,50,.18);user-select:none}
.ami-lien{margin:16px 0 0}.ami-lien a{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vert);text-decoration:none}
.galaxie.immobile{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:24px;cursor:auto}
.galaxie.immobile .ami{position:relative;width:auto}
.g-aide{margin:16px 0 0;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);text-align:center}
.dp-recit{margin:8px 0 0;color:var(--encre-2);font-size:14.5px;line-height:1.55}
@media (max-width:700px){.galaxie{height:600px}.galaxie .ami{padding:22px 20px;width:min(260px,74vw)}.galaxie .ami-prisme{font-size:14px}.galaxie.immobile{grid-template-columns:1fr}}

/* 26/10/2026 : le bouton « En savoir plus ». « Aller plus loin » ne se comprenait pas, et le contour fin faisait
   pâle. Une vraie pastille encre, lisible d'un coup d'œil, avec le « + » qui tourne quand on la survole. */
.btn-savoir{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:9px 9px 9px 18px;border:0;border-radius:999px;background:var(--encre);color:var(--craie);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:transform .4s var(--courbe),background .3s}
.btn-savoir i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--vert);color:var(--encre);font:500 15px/1 var(--mono);font-style:normal;transition:transform .5s var(--courbe)}
.btn-savoir:hover{transform:translateY(-1px)}.btn-savoir:hover i{transform:rotate(90deg)}
.btn-savoir:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.nuit .btn-savoir{background:var(--craie);color:var(--encre)}
.as-logo{height:96px;width:auto}

/* 26/10/2026 : sous le logo ASC, deux badges côte à côte. Le badge FIFA reste en noir et blanc, aux couleurs du site,
   et mène aux licences. Il dit le statut en toutes lettres ; le logo officiel de la FIFA reste à la FIFA. */
.ui-badges{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.ui-fifa{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px;padding:8px 13px 9px;border-radius:10px;background:var(--encre);color:var(--craie);box-shadow:0 6px 18px -10px rgba(18,20,18,.5);text-decoration:none;transition:transform .3s,box-shadow .3s}
.ui-fifa .tr-sur{color:rgba(236,238,233,.72)}
.fifa-l{display:flex;align-items:center;gap:7px}
.fifa-l svg{width:19px;height:19px;fill:none;stroke:var(--craie);stroke-width:1.6;stroke-linejoin:round}
.fifa-l .coche{stroke:var(--vert);stroke-width:2.2;stroke-linecap:round}
.fifa-l b{font:800 21px/1 var(--titre,"Archivo"),sans-serif;font-stretch:75%;letter-spacing:.04em}
.fifa-l span{font:500 9px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;max-width:92px}
.ui-fifa:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--vert),0 8px 22px -10px rgba(18,20,18,.6)}
@media (max-width:760px){.ui-fifa{padding:6px 10px 7px;gap:4px}.fifa-l b{font-size:16px}.fifa-l svg{width:15px;height:15px}.fifa-l span{font-size:7.5px;max-width:78px}}

/* 26/10/2026 : la méthode de Mehdi Kechkeche en cinq piliers, regroupés dans un seul bloc. Chaque carte s'ouvre sur
   son explication ; le « + » a sa place dans la carte, jamais par-dessus le texte. */
.methode-but{margin:0 0 16px;font:400 italic 22px/1.3 var(--serif,"Instrument Serif"),serif;color:var(--craie)}
.piliers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pilier{position:relative;display:grid;align-content:start;gap:8px;min-height:150px;padding:16px 16px 44px;border:0;border-radius:16px;text-align:left;cursor:pointer;background:rgba(198,244,50,.07);box-shadow:inset 0 0 0 1px rgba(198,244,50,.28);color:var(--craie);transition:background .35s,transform .35s var(--courbe)}
.pi-n{font:500 10px var(--mono);letter-spacing:.14em;color:var(--vert)}
.pi-t{font:800 22px/1 Archivo,sans-serif;font-stretch:70%;text-transform:uppercase}
.pi-d{font:400 13.5px/1.4 Archivo,sans-serif;color:rgba(236,238,233,.75)}
.pi-plus{position:absolute;left:16px;bottom:14px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--vert);color:var(--encre);font:500 14px/1 var(--mono);font-style:normal;transition:transform .5s var(--courbe)}
.pilier:hover{background:rgba(198,244,50,.16);transform:translateY(-2px)}.pilier:hover .pi-plus{transform:rotate(90deg)}
.pilier:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
@media (max-width:1000px){.piliers{grid-template-columns:repeat(2,1fr)}.pilier:last-child{grid-column:1/-1}}
@media (max-width:520px){.piliers{grid-template-columns:1fr}.pilier{min-height:0}}

/* 26/10/2026 : les globes de verre. Le globe est dessiné en méridiens et parallèles ; la moitié du fond reste pâle,
   pour qu'on devine à travers le verre ceux qui sont de l'autre côté. */
.galaxie .g-liens .g-av{fill:none;stroke:rgba(198,244,50,.42);stroke-width:1}
.galaxie .g-liens .g-arr{fill:none;stroke:rgba(236,238,233,.13);stroke-width:1;stroke-dasharray:2 5}
.galaxie .g-liens .g-bord{fill:rgba(198,244,50,.025);stroke:rgba(198,244,50,.3);stroke-width:1.2}
.ami-mono{position:absolute;right:22px;top:20px;font:800 34px/1 var(--titre);font-stretch:62%;color:rgba(198,244,50,.22)}
.galaxie .ami{padding-top:26px}
.globe .ami-passe{font:500 12px/1.4 var(--mono);letter-spacing:.08em;color:#c9cfc8}
/* Les scouts sur leur globe : des cartes plus courtes, posées comme les fondateurs. */
.scouts.galaxie{display:block;gap:0}
.galaxie .scout{position:absolute;left:0;top:0;width:min(300px,70vw);min-height:0;gap:18px;padding:24px;will-change:transform;user-select:none;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(198,244,50,.18)}
.galaxie.immobile .scout{position:relative;width:auto}
/* Les fiches complètes des fondateurs : toutes de la même taille, aucune n'est plus grande que les autres. */
.fondateurs .membre{grid-column:1/-1;min-height:0}


/* 26/10/2026 : le carrousel des fiches. Fond clair du site, une trame de points très fine qui s'efface vers les bords,
   le grand ASC en creux au centre, et une orbite pointillée. Les fiches tournent en cercle, avec la profondeur. */
.carrousel{position:relative;display:block;margin-top:26px;perspective:1600px;touch-action:pan-y;cursor:grab}
.carrousel:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(11,13,12,.16) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 100%)}
.carrousel.prise{cursor:grabbing}
.carrousel .c-orbite{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.carrousel .c-orbite ellipse{fill:none;stroke:rgba(11,13,12,.22);stroke-width:1;stroke-dasharray:2 7}
.carrousel .c-vide{position:absolute;left:50%;top:50%;width:min(100%,1180px);height:auto;transform:translate(-50%,-50%);opacity:.06;pointer-events:none;user-select:none}
.carrousel.actif > .membre,.carrousel.actif > .scout{position:absolute;left:0;top:0;width:min(880px,80vw);min-height:0;will-change:transform,opacity;transition:box-shadow .4s;user-select:none;box-shadow:0 40px 80px -30px rgba(11,13,12,.55)}
.carrousel.actif > .scout{width:min(380px,80vw);min-height:360px}
.carrousel.actif > :not(.c-devant){cursor:pointer}
.carrousel.actif > :not(.c-devant) *{pointer-events:none}
.carrousel.actif > .c-devant{box-shadow:0 50px 90px -30px rgba(11,13,12,.6),0 0 0 1px rgba(198,244,50,.35)}
@media (max-width:1100px){.carrousel.actif .piliers{grid-template-columns:repeat(2,1fr)}.carrousel.actif .pilier:last-child{grid-column:1/-1}}
.carrousel.actif .membre-nom{font-size:clamp(46px,5vw,84px)}
.carrousel.immobile{display:grid;gap:16px}.carrousel.immobile:before{display:none}
.carrousel.immobile .c-vide,.carrousel.immobile .c-orbite{display:none}
@media (max-width:760px){.carrousel.actif > .membre{width:88vw;padding:22px}.carrousel.actif .piliers{grid-template-columns:1fr}.carrousel .c-vide{width:84%}}
@media (max-width:760px){.fondateurs .membre-nom{font-size:13vw}}

/* 26/10/2026, troisième version voulue par le gérant : fondateurs et scouts présentés exactement pareil, en plus
   petit, et plus beau que la carte noire. Une fiche de verre clair : fond nacré, trame de points très fine, liseré
   lumineux qui tourne autour de la fiche de devant, reflet qui passe. Même largeur, même hauteur, mêmes tailles. */
@property --asc-tour{syntax:"<angle>";inherits:false;initial-value:0deg}
.carrousel{isolation:isolate}
.carrousel > .membre,.carrousel.scouts > .scout{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:28px 28px 26px;border-radius:26px;overflow:hidden;
  color:var(--encre)!important;
  background:
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%) 160% 0/260% 100% no-repeat,
    radial-gradient(rgba(11,13,12,.08) 1px,transparent 1.2px) 0 0/14px 14px,
    linear-gradient(160deg,rgba(255,255,255,.97),rgba(238,241,236,.9) 60%,rgba(226,232,222,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(11,13,12,.09),0 40px 80px -38px rgba(11,13,12,.5)!important}
.carrousel.actif > .membre,.carrousel.actif.scouts > .scout{position:absolute;width:min(460px,84vw)!important}
/* Le liseré lumineux de la fiche de devant, et le reflet qui la traverse. */
.carrousel > .c-devant:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--asc-tour),transparent 0 52%,rgba(198,244,50,.95) 66%,#fff 72%,rgba(11,13,12,.55) 80%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:asc-lisere 5s linear infinite}
.carrousel > .c-devant{animation:asc-reflet 6s ease-in-out infinite}
@keyframes asc-lisere{to{--asc-tour:360deg}}
@keyframes asc-reflet{0%,55%{background-position:160% 0,0 0,0 0}85%,100%{background-position:-60% 0,0 0,0 0}}
/* Le haut de fiche, le nom, la description : les mêmes pour tous. */
.carrousel > .membre > .sur,.carrousel.scouts > .scout > .mono{order:0;margin:0;font:500 11px/1.4 var(--mono)!important;letter-spacing:.14em;text-transform:uppercase;color:#4d6a00!important;display:flex;align-items:center;gap:8px}
.carrousel > .membre > .sur:before,.carrousel.scouts > .scout > .mono:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 3px rgba(198,244,50,.25)}
.carrousel .membre-nom,.carrousel .scout-nom{margin:6px 0 0;font-size:clamp(40px,3.6vw,54px)!important;line-height:.9;color:var(--encre)}
.carrousel .membre-nom em,.carrousel .scout-nom em{display:block;font:400 italic .56em/1.1 var(--serif);text-transform:none;color:var(--encre-2)!important}
.carrousel .m-desc,.carrousel .scout-desc{font:400 15.5px/1.55 var(--titre)!important;color:var(--encre-2)!important;opacity:1!important;max-width:none!important;margin:0}
.carrousel .membre-role{flex-direction:column;align-items:stretch;gap:16px}
.carrousel .m-actions{gap:8px}
.carrousel .grand-badge{padding:11px 16px;font-size:10.5px}
.carrousel .licence-fifa{padding:8px 14px 8px 8px;gap:12px;box-shadow:0 0 0 1px rgba(11,13,12,.1)}
.carrousel .licence-fifa .qr-img{width:72px;height:72px}
.carrousel .lic-num b{font-size:14px}
/* Le monogramme en creux, et le « + » des scouts à la même place que les boutons. */
.carrousel .membre-mono{font-size:180px!important;top:-24px;right:-8px;color:transparent;-webkit-text-stroke:1px rgba(11,13,12,.5);opacity:.12}
.carrousel.scouts > .scout:after{right:26px;bottom:24px}
.carrousel .m-methode{margin:0}
@media (max-width:760px){.carrousel > .membre,.carrousel.scouts > .scout{padding:22px}.carrousel .membre-nom,.carrousel .scout-nom{font-size:12vw!important}}

/* Notre histoire : la galaxie reprend le fond clair d'origine du site, et ses cartes restent sous le menu. */
.galaxie{isolation:isolate;background:transparent!important;background-image:none!important}
.galaxie .g-liens line{stroke:rgba(11,13,12,.45)}
.galaxie .g-liens circle{fill:var(--encre);filter:none}
.galaxie .ami{box-shadow:0 40px 80px -36px rgba(11,13,12,.55),0 0 0 1px rgba(11,13,12,.08)}
.g-aide{color:var(--encre-2)}

/* Les moments durs : la préparation mentale a la même apparence que les autres moments. */
a.moment{background:var(--encre);color:var(--blanc)}
a.moment .m-n{color:var(--vert)}a.moment .m-d{color:#c9cfc8}

/* La page de la méthode : les cinq piliers en tuiles sombres sur le fond clair. */
.methode-page{margin-top:0;padding-top:0;border-top:0}
.methode-page .sur{color:var(--encre-2)}
.methode-page .pilier{background:var(--encre);color:var(--blanc);min-height:220px}
.methode-page .pi-t{font-size:30px}.methode-page .pi-d{font-size:15.5px}
/* Ses cartes prennent la même fiche de verre que celles de l'équipe. */
.galaxie .ami{color:var(--encre);background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(238,241,236,.9) 60%,rgba(226,232,222,.92))}
.galaxie .ami-nom em{color:var(--encre-2)}
.galaxie .ami-role{color:#4d6a00}
.galaxie .ami-passe{color:var(--encre)}
.galaxie .ami-prisme{color:var(--encre-2)}.galaxie .ami-prisme b{color:var(--encre)}
.galaxie .ami-lien a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--vert);text-underline-offset:4px}

/* 26/10/2026 : le bandeau de l'accueil fait défiler les blasons des clubs de nos joueurs. */
.bandeau-piste .b-club{gap:0}
.bandeau-piste .b-club:after{display:none}
.bandeau-piste .b-club img{display:block;height:clamp(54px,6vw,92px);width:auto;max-width:clamp(80px,9vw,140px);object-fit:contain;transition:transform .4s}
.bandeau-piste .b-club img:hover{transform:scale(1.08)}
.bandeau-piste{gap:clamp(36px,5vw,80px);align-items:center}

/* 26/10/2026 : contrôle téléphone. Le défilé des joueurs élargissait toute la page (la grille prenait la largeur de la
   rangée) : la colonne est bornée à l'écran, la tête du défilé passe à la ligne, et les grands titres respirent. */
.defile-scene{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.defile-tete{flex-wrap:wrap;align-items:flex-end}.defile-fl{width:48px;height:48px}}
@media (max-width:520px){.geant{font-size:clamp(50px,12.6vw,80px)}.dome-titre{font-size:clamp(48px,12.4vw,80px)}.btn-savoir{max-width:100%}}
@media (max-width:760px){#matchs-liste a{grid-template-columns:1fr 44px;row-gap:8px}#matchs-liste .r-num{grid-column:1/-1}#matchs-liste .r-titre{font-size:clamp(26px,8vw,40px)!important}}

/* 26/10/2026 : sur téléphone, le menu se range en remontant son bord haut, sans transformation : une transformation
   embarquait la pastille des langues (fixée en bas de l'écran) qui sautait alors en haut. */
@media (max-width:760px){.ui{transition:top .45s var(--courbe),color .4s}.ui.masque{transform:none;top:-170px}}
@media (max-width:520px){.btn-savoir{white-space:normal;text-align:left}}

/* 26/10/2026 : sur téléphone, le nom qui apparaît en resserrant ses lettres était plus large que l'écran et poussait
   le logo de fin vers la droite (« logo toujours tordu au démarrage »). Le bloc a la largeur de l'écran, le nom ne
   peut plus le déborder : le logo reste au centre, du premier au dernier instant. */
.sig-centre{width:100vw}
.sig-nom{max-width:94vw;overflow:hidden}