/* ============================================================================
   SKLD · DIRECTION v5 — L'HABILLAGE GLOBAL (chargé en DERNIER, après skld-header.css).

   Une seule feuille qui change la peau de toutes les pages qui étendent base.html :
   la palette (noir, blanc d'os, une touche de vert), l'en-tête, les boutons, les
   cases, les étiquettes, les formulaires, les tableaux, les barres.
   Les overlays de diffusion n'étendent pas base.html : ils ne sont pas touchés.

   PRINCIPES
   - Noir NEUTRE (plus de noir verdi), blanc d'os pour le texte et l'action principale.
   - Le vert est une TOUCHE : le palet d'un bouton, un point d'état, une valeur gagnée.
     Jamais un halo autour de tout, jamais la couleur d'un texte courant.
   - La typographie des commandes est une linéale (General Sans), en bas de casse : la
     mono reste aux données (étiquettes, relevés, chiffres).
   - Une case a de l'épaisseur et de la matière : coque + cœur (double bord), grain
     de pierre, reflet haut. Pas un rectangle gris à filet.
   Toutes les règles sont préfixées body.v5 pour passer devant les feuilles d'origine
   sans !important (sauf là où l'origine en pose déjà un).
   ========================================================================= */

/* ------------------------------------------------------------ la palette */
:root{
  --bg:#050505; --bg2:#0a0a0a; --panel:#0e0e0e; --panel2:#151515; --raise:#1c1c1c;
  --cream:#f1f1ec; --muted:#9c9e99; --dim:#5f615d;
  --green:#89f421; --lime:#b4f96c; --green-ink:#050505;
  --line:rgba(241,241,236,.08); --line2:rgba(241,241,236,.16);
  --bg-0:#050505; --bg-1:#0a0a0a; --surface-0:#0e0e0e; --surface-1:#151515; --surface-2:#1c1c1c;
  --ink:#f1f1ec; --ink-2:#a3a5a0; --ink-3:#62645f;
  --line-2:rgba(241,241,236,.16); --line-strong:rgba(241,241,236,.26);
  --hdr-h:78px;
  /* LA VOIX : une seule linéale (Archivo) en trois largeurs — texte, titre, micro — et une
     condensée pour les chiffres. Les anciens jetons pointent dessus : plus de Clash Display,
     plus de General Sans, plus de mono en capitales espacées (elle reste au code). */
  --f-display:"SKLD Titre","Archivo",system-ui,sans-serif;
  --f-ui:"SKLD Texte","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"SKLD Micro","Archivo",system-ui,sans-serif;
  --f-code:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-chiffre:"Big Shoulders Display","SKLD Titre","Archivo",sans-serif;
  --v5-cle:linear-gradient(180deg,#1e1e1e,#101010);
  --v5-bord:inset 0 0 0 1px rgba(255,255,255,.085),inset 0 1px 0 rgba(255,255,255,.11);
  --v5-pierre-tex:url("/static/players/roche.webp");
}
body.v5{background:var(--bg);color:var(--cream)}
body.v5 code,body.v5 kbd,body.v5 pre,body.v5 samp{font-family:var(--f-code)}
body.v5 h1,body.v5 h2,body.v5 h3,body.v5 h4{letter-spacing:-.03em}
/* les orbes verts d'ambiance s'en vont : le fond est noir, la lumière vient des scènes */
body.v5 .bgfx{display:none}

/* ------------------------------------------------------------ l'en-tête : une île
   Détachée du bord, arrondie, en verre fumé. À gauche la marque (le logo chrome dans sa
   plaque, le mot en fonte large), au centre le rail en bas de casse, à droite les actions. */
body.v5 .hdr{top:10px;left:10px;right:10px;margin-inline:auto;max-width:1500px;height:58px;gap:14px;
  padding:0 8px 0 10px;border:0;border-radius:20px;
  background:rgba(14,14,14,.68) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12),0 18px 44px -22px rgba(0,0,0,.95) !important}
body.v5 .hdr.scrolled{height:54px;background:rgba(9,9,9,.9) !important}
body.v5 .hdr .brand{gap:10px;padding-right:6px}
body.v5 .hdr .brand img{width:40px;height:40px;border-radius:13px;object-fit:cover;filter:none;
  background:radial-gradient(120% 120% at 30% 20%,#232323,#0a0a0a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.16)}
body.v5 .hdr.scrolled .brand img{width:36px;height:36px}
body.v5 .hdr .brand .wm{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:17px;letter-spacing:-.02em;color:var(--cream)}
body.v5 .rail{background:none;border:0;box-shadow:none;padding:0}
body.v5 .rail a,body.v5 .rail .zone__top{font-family:var(--f-ui);font-size:14px;font-weight:500;letter-spacing:-.005em;
  text-transform:none;color:rgba(241,241,236,.6);padding-inline:14px}
body.v5 .rail a:hover,body.v5 .rail a.is-active,body.v5 .rail .zone.is-open .zone__top{color:var(--cream)}
body.v5 .rail__ind{top:3px;bottom:3px;border-radius:12px;background:rgba(255,255,255,.085);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1)}
body.v5 .rail a.is-active::after{bottom:1px;width:4px;height:4px;background:var(--green);box-shadow:none}
body.v5 .hdr .hicon{width:40px;height:40px;border-radius:13px;border:0;color:rgba(241,241,236,.8);background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body.v5 .hdr .hicon:hover{color:var(--cream);background:rgba(255,255,255,.1);border-color:transparent}
body.v5 .hdr .burger{border:0;border-radius:13px;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body.v5 .hdr .right{gap:8px}
body.v5 .hdr .right .btn{min-height:42px;height:42px;border-radius:13px}
body.v5 .pouls{border-radius:13px}

/* ------------------------------------------------------------ les boutons : une touche qu'on enfonce
   .btn       la touche sombre (dégradé, biseau, filet)
   .btn.pri   la touche claire : blanc d'os, texte noir ; le vert vit dans le palet
   .btn-ico   le palet rond qui porte la flèche
   Texte en linéale, bas de casse, graisse 600. Au survol la touche monte d'un cran et le
   palet avance ; enfoncée, elle descend. */
body.v5 .btn{position:relative;isolation:isolate;overflow:hidden;gap:10px;min-height:48px;padding:0 20px;border:0;border-radius:15px;
  font-family:var(--f-ui);font-size:14.5px;font-weight:600;letter-spacing:-.01em;text-transform:none;line-height:1;white-space:nowrap;
  color:var(--cream);background:var(--v5-cle);
  box-shadow:var(--v5-bord),0 1px 0 rgba(0,0,0,.6),0 12px 26px -16px rgba(0,0,0,.9);
  transition:transform 420ms var(--v5-masse),box-shadow 420ms var(--v5-masse),background 300ms var(--v5-masse),color 300ms var(--v5-masse)}
body.v5 .btn:has(.btn-ico){padding-right:8px}
body.v5 .btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transform:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));transition:opacity 300ms var(--v5-masse)}
body.v5 .btn:hover{color:var(--cream);transform:translateY(-2px);border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.18),0 1px 0 rgba(0,0,0,.6),0 18px 30px -16px rgba(0,0,0,.95)}
body.v5 .btn:hover::after{opacity:1;transform:none}
body.v5 .btn:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 2px 6px rgba(0,0,0,.6)}
body.v5 .btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
body.v5 .btn.pri{color:#060606;font-weight:650;background:linear-gradient(180deg,#ffffff,#dedfd9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.14),0 1px 0 rgba(0,0,0,.6),0 16px 30px -16px rgba(0,0,0,.9)}
body.v5 .btn.pri::after{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
body.v5 .btn.pri:hover{color:#060606;box-shadow:inset 0 0 0 1px #fff,inset 0 -2px 0 rgba(0,0,0,.14),0 1px 0 rgba(0,0,0,.6),0 22px 36px -16px rgba(0,0,0,.95)}
body.v5 .btn .btn-ico{display:inline-grid;place-items:center;width:32px;height:32px;flex:none;border-radius:11px;border:0;
  color:var(--cream);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform 520ms var(--v5-masse),background 300ms var(--v5-masse)}
body.v5 .btn .btn-ico svg{width:15px;height:15px}
body.v5 .btn:hover .btn-ico{transform:translateX(3px)}
body.v5 .btn.pri .btn-ico{color:#060606;background:var(--green);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.5)}
body.v5 .btn.sm{min-height:40px;padding:0 14px;font-size:13px;border-radius:12px}
body.v5 .btn:disabled,body.v5 .btn[aria-disabled="true"]{opacity:.42;transform:none;cursor:not-allowed}
body.v5 .btn.danger{color:#ffd9d9;background:linear-gradient(180deg,#3a1414,#1f0a0a);box-shadow:inset 0 0 0 1px rgba(255,120,120,.28),inset 0 1px 0 rgba(255,255,255,.08)}

/* ------------------------------------------------------------ les étiquettes et les surtitres
   La micro : Archivo large, graisse 600, capitales, interlettrage court. Elle remplace la mono
   espacée partout où une feuille d'origine demandait var(--mono). */
body.v5 .eye{font-family:var(--f-mono);font-weight:600;color:rgba(241,241,236,.6);letter-spacing:.08em;font-size:10.5px}
body.v5 .eye::before{background:rgba(241,241,236,.3);box-shadow:none}
body.v5 .chip{font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.06em;border-radius:9px;border:0;color:rgba(241,241,236,.8);
  background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body.v5 .chip.g{color:var(--green);background:rgba(137,244,33,.08);box-shadow:inset 0 0 0 1px rgba(137,244,33,.3)}
body.v5 .mono,body.v5 .lbl,body.v5 .idx,body.v5 label{letter-spacing:.05em}
body.v5 .sec-head .idx{font-weight:600;font-size:10.5px;color:rgba(241,241,236,.5)}

/* ------------------------------------------------------------ les chiffres : la condensée
   Tout ce qui est un nombre qu'on regarde (compteur, date, rang, score, cote) passe en Big
   Shoulders 800 : haut, serré, il s'oppose à la largeur des mots. */
body.v5 .home-stat__num,body.v5 .trn-stat__n,body.v5 .cl-count__n,body.v5 .tk-count-n,body.v5 .rec-ledger__n,body.v5 .pc-hero__n,
body.v5 .cpod__rating,body.v5 .cpod__glyph,body.v5 .cpod__rk,body.v5 .pod-kills,body.v5 .pod-badge,body.v5 .bigd,body.v5 .feat__n,body.v5 .medal,
body.v5 table.lb .rk,body.v5 table.lb .tot,body.v5 .mr .rk,body.v5 .mr .pt,body.v5 .kv .v,body.v5 [data-countup]{
  font-family:var(--f-chiffre);font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums}
body.v5 table.lb .rk{font-size:22px}
body.v5 table.lb .tot{font-size:24px}

/* ------------------------------------------------------------ les titres de section : la fonte large */
body.v5 .sec-head{border-bottom-color:var(--line)}
body.v5 .sec-head h2{font-family:var(--f-mega);font-weight:850;font-stretch:118%;text-transform:uppercase;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(26px,3.3vw,46px);color:var(--cream);background:none;-webkit-text-fill-color:currentColor}

/* ------------------------------------------------------------ les cases : coque, cœur, pierre
   L'anneau extérieur (4 px, à peine visible) fait la coque ; le dégradé et le reflet haut
   font le cœur ; un grain de pierre très léger donne la matière. */
body.v5 .card,body.v5 .panelcard,body.v5 .board,body.v5 .mini,body.v5 .wcard,body.v5 .feat{
  border:0;border-radius:22px 22px 22px 6px;
  background:var(--v5-pierre-tex) center/460px,linear-gradient(180deg,#161616,#0b0b0b);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 4px rgba(255,255,255,.022),0 30px 60px -44px #000}
body.v5 a.card:hover,body.v5 .card.is-lien:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.2),0 0 0 4px rgba(255,255,255,.04),0 34px 70px -40px #000}
/* les repères d'angle : deux équerres fines (haut droit, bas gauche) sur les cases à marge */
body.v5 .panelcard,body.v5 .v5-coeur{--c:rgba(241,241,236,.34);
  background:
    linear-gradient(var(--c),var(--c)) calc(100% - 11px) 11px/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) calc(100% - 11px) 11px/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) 11px calc(100% - 11px)/9px 1px no-repeat,linear-gradient(var(--c),var(--c)) 11px calc(100% - 11px)/1px 9px no-repeat,
    var(--v5-pierre-tex) center/460px,linear-gradient(180deg,#161616,#0b0b0b);
  background-blend-mode:normal,normal,normal,normal,soft-light,normal}

/* ------------------------------------------------------------ les fonds animés
   Les fonds WebGL par page (portages React Bits déjà dans le site : silk, threads, aurora, topo,
   acid, color bends…) passent en NOIR ET BLANC et vivent derrière le contenu. */
body.v5 .sk-pagebg{filter:grayscale(1) contrast(1.25) brightness(.95);opacity:.5}

/* ------------------------------------------------------------ les formulaires */
body.v5 input[type="text"],body.v5 input[type="search"],body.v5 input[type="email"],body.v5 input[type="number"],body.v5 input[type="url"],
body.v5 input[type="password"],body.v5 input[type="datetime-local"],body.v5 input[type="date"],body.v5 input[type="time"],body.v5 input:not([type]),
body.v5 select,body.v5 textarea{
  border-radius:13px;border:0;color:var(--cream);background-color:#0c0c0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 2px 4px rgba(0,0,0,.5);
  transition:box-shadow 240ms var(--v5-masse),background-color 240ms var(--v5-masse)}
body.v5 input:focus,body.v5 select:focus,body.v5 textarea:focus{outline:0;background-color:#101010;
  box-shadow:inset 0 0 0 1.5px rgba(241,241,236,.7),0 0 0 4px rgba(241,241,236,.08)}
body.v5 ::placeholder{color:rgba(241,241,236,.34)}
body.v5 ::selection{background:var(--green);color:#050505}

/* ------------------------------------------------------------ les tableaux */
body.v5 table.lb th{color:rgba(241,241,236,.5);border-bottom-color:var(--line)}
body.v5 table.lb td{border-bottom-color:rgba(241,241,236,.055)}
body.v5 table.lb tr.lead{background:linear-gradient(90deg,rgba(241,241,236,.07),transparent 70%)}
body.v5 table.lb tr.lead .rk{color:var(--green)}
body.v5 table.lb td.tot{color:var(--cream)}
body.v5 table.lb tr.lead td.tot{color:var(--green)}

/* ------------------------------------------------------------ la barre basse (téléphone) et le tiroir */
body.v5 .bbar{background:rgba(10,10,10,.86);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
body.v5 .mnav{background:rgba(6,6,6,.96)}

/* ------------------------------------------------------------ la page d'un tournoi (peau seulement)
   Le nom du tournoi passe en fonte large, la bannière devient une plaque à double bord.
   La structure de la page n'est pas touchée ici. */
body.v5 .tdet-hero__title{font-family:var(--f-mega);font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.045em;
  line-height:.9;font-size:clamp(38px,5.6vw,92px);color:var(--cream);background:none;-webkit-text-fill-color:currentColor;text-wrap:balance}
body.v5 .tdet-banner{border-radius:26px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 5px rgba(255,255,255,.03),0 40px 80px -50px #000}

/* ------------------------------------------------------------ le pied de page */
body.v5 .foot2{position:relative;overflow:hidden;background:#050505;border-top:1px solid var(--line);padding-bottom:0}
body.v5 .foot2__brand img{width:44px;height:44px;border-radius:14px;object-fit:cover;filter:none;
  background:radial-gradient(120% 120% at 30% 20%,#232323,#0a0a0a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.16)}
body.v5 .foot2__sigle{display:grid;place-items:center;width:44px;height:44px;margin-bottom:9px;border-radius:14px;
  background:radial-gradient(120% 120% at 30% 20%,#232323,#0a0a0a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.16)}
body.v5 .foot2__sigle .sg5{--sg:28px}
body.v5 .foot2__wm{font-family:var(--f-mega);font-weight:900;font-stretch:125%;letter-spacing:-.02em}
body.v5 .foot2__t{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(241,241,236,.46)}
body.v5 .foot2__col a{font-family:var(--f-ui);font-size:15px;color:rgba(241,241,236,.72);transition:color 240ms var(--v5-masse),transform 420ms var(--v5-masse)}
body.v5 .foot2__col a:hover{color:var(--cream);transform:translateX(4px)}
.foot5{position:relative;height:7.7vw;margin-top:clamp(18px,3vw,44px);overflow:hidden;pointer-events:none;user-select:none}
.foot5__mot{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;font-size:12vw;line-height:.86;
  background:linear-gradient(180deg,#f1f1ec 8%,rgba(241,241,236,.1) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.foot5__mot > span{display:inline-block}

/* ------------------------------------------------------------ d'une page à l'autre
   Transition native du navigateur (rien en script) : l'ancienne page recule dans le flou, la
   nouvelle monte ; l'en-tête, nommé, reste en place. Un navigateur qui ne connaît pas la règle
   l'ignore : la navigation est alors ordinaire. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:v5-page-sort 240ms cubic-bezier(.32,.72,0,1) both}
::view-transition-new(root){animation:v5-page-entre 460ms cubic-bezier(.16,1,.3,1) both}
@keyframes v5-page-sort{to{opacity:0;filter:blur(10px);transform:scale(.988)}}
@keyframes v5-page-entre{from{opacity:0;filter:blur(12px);transform:translateY(16px)}}
body.v5 .hdr{view-transition-name:entete}
::view-transition-group(entete){animation-duration:280ms}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:v5-page-fondu 200ms linear both}
  @keyframes v5-page-fondu{from{opacity:0}}
}

@media (max-width:900px){
  body.v5 .hdr{top:8px;left:8px;right:8px;height:54px;border-radius:18px}
  body.v5 .foot2{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  body.v5 .btn,body.v5 .btn .btn-ico{transition:none}
}

/* ============================================================================
   SUR DU CLAIR — une page ou une zone au sol clair (body.sol-clair, .e5, .sur-clair) :
   le texte passe au noir, la touche principale devient NOIRE (palet lime), la touche
   secondaire devient blanche. Les objets noirs (cases, affiches, île d'en-tête) restent noirs.
   ========================================================================= */
body.v5.sol-clair{background:#d7d9d6;color:#0a0a0a}
body.v5.sol-clair::before{opacity:0}
body.v5.sol-clair main > .sec > .wrap > .sec-head,body.v5 .sur-clair .sec-head{border-bottom-color:rgba(10,10,10,.16)}
body.v5.sol-clair main > .sec > .wrap > .sec-head h2,body.v5 .sur-clair .sec-head h2{color:#0a0a0a;-webkit-text-fill-color:#0a0a0a;background:none}
body.v5.sol-clair main > .sec > .wrap > .sec-head .eye,body.v5 .sur-clair .eye{color:rgba(10,10,10,.6)}
body.v5.sol-clair main > .sec > .wrap > .sec-head .eye::before,body.v5 .sur-clair .eye::before{background:rgba(10,10,10,.3)}
body.v5.sol-clair main > .sec > .wrap > .sec-head .idx{color:rgba(10,10,10,.5)}
body.v5 .e5 .btn.pri,body.v5 .sur-clair .btn.pri,body.v5.sol-clair main > .sec > .wrap > .sec-head .btn.pri{color:#f1f1ec;background:linear-gradient(180deg,#1d1d1d,#050505);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16),0 16px 30px -16px rgba(0,0,0,.6)}
body.v5 .e5 .btn.pri::after,body.v5 .sur-clair .btn.pri::after{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
body.v5 .e5 .btn.pri:hover,body.v5 .sur-clair .btn.pri:hover{color:#fff}
body.v5 .e5 .btn:not(.pri),body.v5 .sur-clair .btn:not(.pri),body.v5.sol-clair main > .sec > .wrap > .sec-head .btn:not(.pri){color:#0a0a0a;background:linear-gradient(180deg,#ffffff,#e7e8e4);
  box-shadow:inset 0 0 0 1px rgba(10,10,10,.12),inset 0 -2px 0 rgba(0,0,0,.08),0 14px 26px -16px rgba(0,0,0,.45)}
body.v5 .e5 .btn:not(.pri):hover,body.v5 .sur-clair .btn:not(.pri):hover{color:#0a0a0a}
body.v5 .e5 .btn:not(.pri) .btn-ico,body.v5 .sur-clair .btn:not(.pri) .btn-ico,body.v5.sol-clair main > .sec > .wrap > .sec-head .btn:not(.pri) .btn-ico{color:#0a0a0a;background:rgba(10,10,10,.08);box-shadow:inset 0 0 0 1px rgba(10,10,10,.1)}
body.v5 .e5 .btn:focus-visible,body.v5 .sur-clair .btn:focus-visible{outline-color:#0a0a0a}
/* une bande de nuit retrouve les réglages sombres */
body.v5 .v5-bande .sec-head{border-bottom-color:var(--line)}
body.v5 .v5-bande .sec-head h2{color:var(--cream)}
body.v5 .v5-bande .eye{color:rgba(241,241,236,.6)}
body.v5 .v5-bande .eye::before{background:rgba(241,241,236,.3)}
body.v5.sol-clair .foot2{border-top:0;border-radius:clamp(22px,2.6vw,38px) clamp(22px,2.6vw,38px) 0 0;margin-top:clamp(20px,3vw,44px)}

/* ------------------------------------------------------------ le monde : le décor 3D fixe de toutes les pages */
.v5-monde{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1400ms cubic-bezier(.16,1,.3,1)}
.v5-monde.is-pret{opacity:1}
.v5-monde.is-vite{transition-duration:420ms}      /* l'arrivée en voyage, le retour depuis le héros de l'accueil */
/* le film de transition (Switch, tournoi en direct) : par-dessus tout, il ne prend aucun clic */
.v5-stinger{position:fixed;inset:0;z-index:2147483000;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:1;transition:opacity 180ms linear}
.v5-stinger.is-fini{opacity:0}
@media (prefers-reduced-motion:reduce){ .v5-stinger{display:none} }
body.v5 .sk-pagebg{display:none}
body.v5 main,body.v5 .foot2{position:relative;z-index:1}
/* les repères du monde : deux ou trois objets mènent à une page (vrais liens, doublés par la navigation) */
.v5-reperes{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
[data-h5] > .v5-reperes{position:absolute;z-index:6}
.v5-repere{position:absolute;left:0;top:0;display:block;color:#e9eae5;text-decoration:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 500ms cubic-bezier(.16,1,.3,1),visibility 0s linear 500ms}
.v5-repere.is-vu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 500ms cubic-bezier(.16,1,.3,1)}
body.sol-clair .v5-repere{color:#0a0a0a}
.v5-repere__cadre{position:absolute;inset:0;transition:inset 380ms cubic-bezier(.7,0,.2,1);background-repeat:no-repeat;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  background-size:14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px,14px 1.5px,1.5px 14px}
.v5-repere:hover .v5-repere__cadre,.v5-repere:focus-visible .v5-repere__cadre{inset:9px}
.v5-repere__nom{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:7px 11px 7px 9px;border-radius:2px 8px 8px 8px;background:#0a0a0a;color:#f1f2ee;font:600 10.5px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;transition:background-color 200ms linear,color 200ms linear}
.v5-repere__nom i{width:6px;height:6px;border-radius:50%;background:#89f421;transition:background-color 200ms linear}
.v5-repere__nom b{font:800 13px/1 var(--f-chiffre);letter-spacing:.02em;color:rgba(241,242,238,.6);transition:color 200ms linear}
.v5-repere:hover .v5-repere__nom,.v5-repere:focus-visible .v5-repere__nom{background:#89f421;color:#0a0a0a}
.v5-repere:hover .v5-repere__nom i,.v5-repere:focus-visible .v5-repere__nom i{background:#0a0a0a}
.v5-repere:hover .v5-repere__nom b,.v5-repere:focus-visible .v5-repere__nom b{color:rgba(10,10,10,.6)}
.v5-repere:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media (max-width:899px){ .v5-monde,.v5-reperes{display:none} }
/* les relevés d'une zone claire sont noirs */
body.v5 .sur-clair .v5-rel{color:rgba(10,10,10,.62)}
body.v5 .sur-clair .v5-rel b{color:#0a0a0a}
/* ------------------------------------------------------------ la langue, dans l'en-tête */
body.v5 .hlang{display:flex;gap:2px;margin:0;padding:3px;border-radius:13px;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
body.v5 .hlang button{min-width:36px;height:34px;padding:0 9px;border:0;border-radius:10px;cursor:pointer;background:none;color:rgba(241,241,236,.62);
  font-family:var(--f-mono);font-weight:700;font-size:11px;letter-spacing:.06em;transition:background 240ms var(--v5-masse),color 240ms var(--v5-masse)}
body.v5 .hlang button:hover{color:var(--cream)}
body.v5 .hlang button.is-on{color:#060606;background:#f1f1ec}
@media (max-width:700px){ body.v5 .hlang{display:none} }

/* ============================================================================
   L'EN-TÊTE EN TROIS PIÈCES (remplace l'île unique : « pas 100 % satisfait », 07/10).
   Trois blocs de pierre noire flottent au-dessus de la page, chacun avec son angle franc :
   la MARQUE (le logo chrome qui tourne dans sa plaque, le mot en fonte large), le RAIL (la page
   courante est une touche blanche qui glisse d'un lien à l'autre), les OUTILS (langue, recherche
   nommée, compte). Entre eux, on voit le monde.
   ========================================================================= */
body.v5 .hdr{top:10px;left:10px;right:10px;height:56px;max-width:calc(var(--maxw) + 240px);padding:0;gap:10px;border-radius:0;pointer-events:none;
  background:none !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none;view-transition-name:entete}
body.v5 .hdr.scrolled{height:56px;background:none !important}
body.v5 .hdr > *{pointer-events:auto}
body.v5 .hdr .brand,body.v5 .hdr .rail,body.v5 .hdr .right,body.v5 .hdr .pouls{position:relative;height:56px;
  background:url("/static/players/roche.webp") center/420px,linear-gradient(180deg,rgba(26,26,26,.9),rgba(8,8,8,.92));background-blend-mode:soft-light,normal;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 4px rgba(10,10,10,.05),0 22px 44px -24px rgba(0,0,0,.8)}
body.v5 .hdr .brand{gap:11px;padding:0 18px 0 7px;border-radius:18px 18px 18px 6px;transition:transform 520ms var(--v5-masse)}
body.v5 .hdr .brand:hover{transform:translateY(-2px)}
body.v5 .brand__plaque{position:relative;display:block;width:42px;height:42px;flex:none;overflow:hidden;border-radius:13px 13px 13px 4px;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.v5 .brand__film{position:absolute;left:50%;top:50%;height:124%;width:auto;max-width:none;transform:translate(-52.8%,-53%);mix-blend-mode:screen;pointer-events:none}
body.v5 .hdr .brand .wm{font-size:18px;letter-spacing:-.03em}
body.v5 .hdr .rail{margin-inline:auto;padding:0 6px;border-radius:18px}
body.v5 .rail__ind{top:6px;bottom:6px;border-radius:12px 12px 12px 4px;background:#f1f1ec;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 8px 18px -10px rgba(0,0,0,.8)}
body.v5 .rail a,body.v5 .rail .zone__top{height:44px;font-weight:600;transition:color 280ms var(--v5-masse)}
/* LE TEXTE EST SOMBRE LÀ OÙ EST LA PASTILLE, ET NULLE PART AILLEURS (`is-sous`, posé par skld-pillnav.js).
   Il l'était sur « active » et « survolée » : pastille ailleurs, la touche de la page disparaissait. */
body.v5 .rail > a:hover,body.v5 .rail > a.is-active,body.v5 .rail .zone:hover > .zone__top,body.v5 .rail .zone > .zone__top.is-active{color:var(--cream)}
body.v5 .rail > a.is-sous,body.v5 .rail > a.is-sous:hover,body.v5 .rail .zone > .zone__top.is-sous,
body.v5 .rail .zone:hover > .zone__top.is-sous,body.v5 .rail .zone.is-open > .zone__top.is-sous{color:#060606}
body.v5 .rail.rail--net a,body.v5 .hdr .rail.rail--net .zone__car-btn{transition:none}
body.v5 .rail a.is-active::after{display:none}
body.v5 .hdr .right{gap:6px;padding:0 7px;border-radius:18px 18px 6px 18px}
body.v5 .hdr .hicon,body.v5 .hdr .burger{height:42px;border-radius:13px}
body.v5 .hdr .hicon--cherche{display:inline-flex;align-items:center;gap:9px;width:auto;padding:0 14px 0 12px}
body.v5 .hdr .hicon--cherche svg{order:-1;flex:none}
body.v5 .hicon__lbl{font-family:var(--f-ui);font-weight:500;font-size:13.5px;letter-spacing:-.005em;color:rgba(241,241,236,.62)}
body.v5 .hdr .hicon--cherche:hover .hicon__lbl{color:var(--cream)}
body.v5 .hdr .right .btn{min-height:42px;height:42px;border-radius:13px 13px 4px 13px}
@media (max-width:1180px){ body.v5 .hicon__lbl{display:none} body.v5 .hdr .hicon--cherche{width:42px;padding:0;justify-content:center} }
@media (max-width:900px){
  body.v5 .hdr{top:8px;left:8px;right:8px;height:52px}
  body.v5 .hdr .brand,body.v5 .hdr .right{height:52px}
  body.v5 .hdr .brand{padding:0 12px 0 6px}
  body.v5 .hdr .right{margin-left:auto}
  body.v5 .brand__plaque{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){ body.v5 .hdr .brand{transition:none} }

/* ══ LA FENÊTRE PARTENAIRE — une dalle de roche noire et du chrome : plus de halo vert, plus de
   gélule. Le lime ne reste qu'au palet du bouton et au point d'état. Le script (moment, mémoire,
   glisser, inclinaison) n'est pas touché. ═══════════════════════════════════════════════════════ */
body.v5 .skp__tilt.fx-bezel{border-radius:22px;background:linear-gradient(165deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 32%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.16));
  box-shadow:0 34px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.75)}
body.v5 .skp__core.fx-core{border-radius:20.5px;color:#eceee9;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  background:url("/static/players/roche.webp") center/420px,linear-gradient(180deg,#171717,#070707)}
body.v5 .skp__scene{border-radius:20.5px}
body.v5 .skp__aurora,body.v5 .skp__scan,body.v5 .skp__halo,body.v5 .skp .fx-beam,body.v5 .skp__core.fx-glow::after{display:none}
body.v5 .skp__core.fx-foil::before{background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.1) 46%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.1) 54%,transparent 66%);background-size:250% 100%}
body.v5 .skp__eye{font:600 10px/1 var(--f-mono);letter-spacing:.08em;color:#cdd0ca}
body.v5 .skp__eye::before{width:7px;height:7px;border-radius:2px;background:#89f421;box-shadow:none}
body.v5 .skp__x{border-radius:12px}
body.v5 .skp__coin::before{background:conic-gradient(from var(--skp-a),#f6f7f5,#6d716e 14%,#e7e9e6 30%,#232524 46%,#fbfbfa 54%,#5a5e5b 72%,#eef0ed 88%,#f6f7f5);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.8)}
body.v5 .skp__t{font-family:var(--f-display);font-weight:740;font-size:18.5px;line-height:1.08;letter-spacing:-.012em;text-transform:uppercase;color:#fff}
body.v5 .skp__p{font-family:var(--f-ui);color:#b7bab4}
body.v5 .skp__cta{min-height:48px;padding:6px 6px 6px 18px;border-radius:14px;color:#0a0a0a;font:600 14px/1 var(--f-ui);letter-spacing:-.005em;text-transform:none;
  background:linear-gradient(180deg,#fbfbf8,#e3e4df);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(0,0,0,.12),0 14px 28px -16px rgba(0,0,0,.9)}
body.v5 .skp__cta::before,body.v5 .skp__cta::after,body.v5 .skp__cta i::before{display:none}
body.v5 .skp__cta i{width:36px;height:36px;border-radius:10px;color:#0a0a0a;background:#89f421;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18)}
body.v5 .skp__later{font-family:var(--f-ui);color:#9a9d97;border-radius:10px}
body.v5 .skp__later:focus-visible,body.v5 .skp__cta:focus-visible,body.v5 .skp__x:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:560px){
  body.v5 .skp__bd{grid-template-columns:60px 1fr;gap:12px;padding:6px 16px 10px}
  body.v5 .skp__logo{width:58px;height:58px;margin:4px 0 0}
  body.v5 .skp__reflet{display:none}
  body.v5 .skp__t{font-size:15.5px;margin:2px 0 6px}
  body.v5 .skp__p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body.v5 .skp__acts{padding:0 16px 14px}
}

/* ══ LA FENÊTRE DEK DEV — la langue de la pièce du site : un haut de pierre claire où le nom en chrome
   passe derrière les objets chrome qui se relaient, un bas de roche noire qui porte la devise et la porte. Plus large que la
   fenêtre ordinaire (on doit la voir), toujours dans un coin, toujours refermable. ══ */
body.v5 .skp--dek{width:min(430px,calc(100vw - 24px))}
body.v5 .skp--dek .skp__hd{position:absolute;left:0;right:0;top:0;z-index:6;padding:12px 10px 0 16px}
body.v5 .skp--dek .skp__eye{color:rgba(10,10,10,.7)}
body.v5 .skp--dek .skp__grip i{background:#0a0a0a}
body.v5 .skp--dek .skp__x{color:#0a0a0a}
body.v5 .skp--dek .skp__x:hover{background:rgba(10,10,10,.08);color:#0a0a0a}
body.v5 .skp__film{position:relative;height:216px;overflow:hidden;border-radius:20.5px 20.5px 0 0;
  background:radial-gradient(70% 60% at 30% 20%,rgba(255,255,255,.8),transparent 70%),linear-gradient(180deg,#e6e8e4,#cdd0cc)}
body.v5 .skp__film::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--v5-grain);filter:invert(1);mix-blend-mode:overlay;opacity:.24}
body.v5 .skp__mot{position:absolute;left:5%;top:50px;width:90%;height:auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.3))}
body.v5 .skp__objs{position:absolute;left:50%;bottom:-30px;width:60%;height:186px;transform:translateX(-50%);pointer-events:none}
body.v5 .skp__objs img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;opacity:0;
  filter:drop-shadow(0 22px 18px rgba(0,0,0,.4));animation:skp-objet 14s cubic-bezier(.32,.72,0,1) infinite both}
body.v5 .skp__objs img:nth-child(2){animation-delay:3.5s}
body.v5 .skp__objs img:nth-child(3){animation-delay:7s}
body.v5 .skp__objs img:nth-child(4){animation-delay:10.5s}
@keyframes skp-objet{
  0%{opacity:0;transform:translateY(16px) scale(.93) rotate(-5deg)}
  5%,24%{opacity:1;transform:none}
  29%,100%{opacity:0;transform:translateY(-10px) scale(.96) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){
  body.v5 .skp__objs img{animation:none}
  body.v5 .skp__objs img:first-child{opacity:1}
}
body.v5 .skp__bd--dek{display:block;padding:16px 18px 12px}
body.v5 .skp__t--dek{margin:0 0 8px;font-family:var(--f-display);font-weight:760;font-size:26px;line-height:.94;letter-spacing:-.03em;text-transform:uppercase;color:#fff}
body.v5 .skp--dek .skp__cta{flex:1 1 auto;justify-content:space-between}
@media (max-width:560px){
  body.v5 .skp--dek{width:calc(100vw - 16px)}
  body.v5 .skp__film{height:150px}
  body.v5 .skp__mot{top:42px}
  body.v5 .skp__objs{width:48%;height:128px;bottom:-22px}
  body.v5 .skp__t--dek{font-size:21px}
  body.v5 .skp--dek .skp__p{-webkit-line-clamp:2}
  body.v5 .skp--dek .skp__acts{flex-wrap:nowrap}
  body.v5 .skp--dek .skp__later{flex:none}
}

/* ══ LES FLÈCHES VIVENT : au survol d'un bouton ou d'une affiche, la flèche sort du palet et revient par l'autre bord. ══ */
body.v5 .btn .btn-ico,body.v5 .v5-rond{overflow:hidden}
body.v5 .btn:hover .btn-ico svg,body.v5 a:hover > .btn-ico svg{animation:v5-fleche-h .55s cubic-bezier(.2,.8,.2,1)}
body.v5 .a5:hover .v5-rond svg,body.v5 a:hover > .v5-rond svg{animation:v5-fleche-d .55s cubic-bezier(.2,.8,.2,1)}
@keyframes v5-fleche-h{0%{transform:none}49%{transform:translateX(150%)}50%{transform:translateX(-150%)}100%{transform:none}}
@keyframes v5-fleche-d{0%{transform:none}49%{transform:translate(130%,-130%)}50%{transform:translate(-130%,130%)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){ body.v5 .btn:hover .btn-ico svg,body.v5 .a5:hover .v5-rond svg{animation:none} }

/* ══ UN <header> DANS LE CONTENU N'EST PAS L'EN-TÊTE DU SITE. Deux feuilles d'origine (skald.css, skld-polish.css)
   habillent l'ÉLÉMENT header : tout <header> de section recevait le voile sombre collant de l'en-tête. Trois lots
   l'ont signalé et contourné par des <div>. Spécificité volontairement nulle : une classe posée dessus gagne. ══ */
header:where(:not(.hdr)){all:revert}
/* même piège pour <footer> (marge et filet du pied de site), et pour les paragraphes de section : deux feuilles
   d'origine peignent « .sec p » en clair, invisible sur la pierre. Signalé par cinq lots. */
footer:where(:not(.foot2)){all:revert}
body.sol-clair .sec p:where(:not([class])){color:inherit}


/* ── LA MARQUE À PLAT ET SA LOUPE ──────────────────────────────────────────────────────────────────
   Le sigle est un masque : il est centré par construction (le tracé de skld-mark.svg est centré dans
   son cadre). La loupe est un disque qui traverse la plaque ; dedans, le même sigle agrandi ×1,7 glisse
   en sens inverse, de sorte que le point sous le centre du verre reste le bon. Tout est exprimé en
   fractions de --pl (le côté de la plaque) : la géométrie tient à 40 comme à 42 px. */
body.v5 .brand__plaque{--pl:42px;width:var(--pl);height:var(--pl);background:#050505;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.12),inset 0 -8px 12px rgba(124,255,0,.05)}
body.v5 .brand__marque,body.v5 .brand__loupe > i{
  -webkit-mask:url("/static/skld-mark.svg") center/auto 68% no-repeat;mask:url("/static/skld-mark.svg") center/auto 68% no-repeat}
body.v5 .brand__marque{position:absolute;inset:0;background:var(--v5-lime);transition:transform 520ms var(--v5-masse)}
body.v5 .hdr .brand:hover .brand__marque{transform:scale(1.06) rotate(-3deg)}
body.v5 .brand__loupe{position:absolute;left:0;top:0;width:calc(var(--pl)*.48);height:calc(var(--pl)*.48);border-radius:50%;overflow:hidden;
  background:#050505;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.66),0 0 0 2px rgba(0,0,0,.55),0 3px 9px rgba(0,0,0,.65);
  transform:translate(calc(var(--pl)*-.52),calc(var(--pl)*.33));animation:v5-loupe 9s linear 2.4s infinite}
body.v5 .brand__loupe > i{position:absolute;left:0;top:0;width:calc(var(--pl)*1.7);height:calc(var(--pl)*1.7);background:#c9ff7c;
  transform:translate(calc(var(--pl)*.716),calc(var(--pl)*-.729));animation:v5-loupe-vue 9s linear 2.4s infinite}
body.v5 .brand__loupe::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.55),rgba(255,255,255,0) 44%),radial-gradient(circle at 72% 80%,rgba(124,255,0,.22),rgba(124,255,0,0) 55%)}
body.v5 .hdr .brand:hover .brand__loupe{animation:v5-loupe-survol 1.1s linear 1}
body.v5 .hdr .brand:hover .brand__loupe > i{animation:v5-loupe-vue-survol 1.1s linear 1}
@keyframes v5-loupe{
  0%{opacity:0;transform:translate(calc(var(--pl)*-.52),calc(var(--pl)*.33))}
  1.5%{opacity:1} 13%{opacity:1}
  14.5%,100%{opacity:0;transform:translate(calc(var(--pl)*1.05),calc(var(--pl)*.14))}}
@keyframes v5-loupe-vue{
  0%{transform:translate(calc(var(--pl)*.716),calc(var(--pl)*-.729))}
  14.5%,100%{transform:translate(calc(var(--pl)*-1.953),calc(var(--pl)*-.406))}}
@keyframes v5-loupe-survol{
  0%{opacity:0;transform:translate(calc(var(--pl)*-.52),calc(var(--pl)*.33))}
  10%{opacity:1} 88%{opacity:1}
  100%{opacity:0;transform:translate(calc(var(--pl)*1.05),calc(var(--pl)*.14))}}
@keyframes v5-loupe-vue-survol{
  0%{transform:translate(calc(var(--pl)*.716),calc(var(--pl)*-.729))}
  100%{transform:translate(calc(var(--pl)*-1.953),calc(var(--pl)*-.406))}}
@media (max-width:900px){ body.v5 .brand__plaque{--pl:40px} }
@media (prefers-reduced-motion:reduce){ body.v5 .brand__loupe{display:none} body.v5 .brand__marque{transition:none} }

/* ── LES CHEVRONS DU MENU ──────────────────────────────────────────────────────────────────────────
   Ils existaient mais ne se voyaient pas : il ne restait que leur place, donc des écarts inégaux entre
   « Tournois », « Classement » et « Le fil ». Ils se voient, tombent d'un cran au survol, se retournent
   quand le panneau est ouvert. */
body.v5 .hdr .rail .zone__car-btn{width:20px;margin-left:-8px;margin-right:8px;background:none;color:rgba(244,245,240,.74);
  transition:color 300ms var(--v5-masse)}
body.v5 .hdr .rail .zone__car{width:14px;height:14px;opacity:1;transition:transform 420ms var(--v5-masse)}
body.v5 .hdr .rail .zone__car path{stroke-width:2.3}
body.v5 .hdr .rail .zone:hover .zone__car-btn,body.v5 .hdr .rail .zone.is-open .zone__car-btn,
body.v5 .hdr .rail .zone__car-btn:focus-visible{color:var(--v5-lime)}
/* Sous la pastille claire, la flèche est sombre comme le libellé (du lime sur du crème ne se lit pas). */
body.v5 .hdr .rail .zone.is-sous .zone__car-btn,body.v5 .hdr .rail .zone.is-sous:hover .zone__car-btn,
body.v5 .hdr .rail .zone.is-sous.is-open .zone__car-btn,body.v5 .hdr .rail .zone.is-sous .zone__car-btn:focus-visible{color:#060606}
body.v5 .hdr .rail .zone:hover .zone__car{transform:translateY(2px)}
body.v5 .hdr .rail .zone.is-open .zone__car{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ body.v5 .hdr .rail .zone__car{transition:none} }

/* ══ LE MESSAGE APRÈS UNE ACTION — une plaque FIXE sous l'en-tête, au-dessus de tout ════════════════════
   Il vivait en haut du contenu, sous le décor des pages à grand en-tête : un refus (« ID Activision… »)
   ne se lisait pas, et le joueur recommençait sans comprendre. Noir, texte clair, un point d'état ; un
   refus porte un filet rouge. Il se ferme. */
body.v5 .v5-flash{position:fixed;top:calc(var(--hdr-h,78px) + 6px);left:16px;right:16px;z-index:59;display:flex;justify-content:center;pointer-events:none}
body.v5 .v5-flash .flash{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;width:min(840px,100%);margin:0;padding:14px 12px 14px 16px;border:0;border-radius:16px 16px 16px 5px;
  font-family:var(--f-ui);font-weight:600;font-size:15px;line-height:1.42;letter-spacing:-.005em;text-transform:none;color:#f1f1ec;background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 4px rgba(10,10,10,.06),0 30px 50px -24px rgba(0,0,0,.75);animation:v5-flash-entre 420ms var(--v5-sortie) both}
body.v5 .v5-flash .flash::before{content:"";flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--v5-lime);box-shadow:0 0 0 4px rgba(137,244,33,.2)}
body.v5 .v5-flash .flash.err{box-shadow:inset 0 0 0 2px #e5262b,0 0 0 4px rgba(10,10,10,.06),0 30px 50px -24px rgba(0,0,0,.75)}
body.v5 .v5-flash .flash.err::before{background:#e5262b;box-shadow:0 0 0 4px rgba(229,38,43,.25)}
body.v5 .flash__t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
body.v5 .flash__x{flex:none;display:grid;place-items:center;width:30px;height:30px;margin:-3px 0 -3px 4px;padding:0;border:0;border-radius:9px 9px 9px 3px;cursor:pointer;
  font:600 18px/1 var(--f-ui);color:#f1f1ec;background:rgba(255,255,255,.08);transition:background 200ms linear,color 200ms linear}
body.v5 .flash__x:hover,body.v5 .flash__x:focus-visible{color:#060606;background:#f1f1ec}
@keyframes v5-flash-entre{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media (max-width:900px){ body.v5 .v5-flash{top:68px;left:8px;right:8px} body.v5 .v5-flash .flash{font-size:14px} }
@media (prefers-reduced-motion:reduce){ body.v5 .v5-flash .flash{animation:none} }

/* ══ LE TRÈS GRAND ÉCRAN ════════════════════════════════════════════════════════════════════════════════
   La colonne restait à 1 200 px quelle que soit la largeur : sur un écran de 2 560 px, une bande étroite au
   milieu (« ça ne prend pas toute la page », le fondateur, 08/10/2026). Au-delà de 2 000 px elle s'élargit
   avec l'écran, dans la même proportion qu'à 1 920, et l'en-tête la suit (sa largeur se lit sur --maxw).
   En dessous de 2 000 px, rien ne change d'un pixel. */
@media (min-width:2000px){ :root{--maxw:clamp(1320px,66vw,1760px)} }

/* ══ LES VOLETS DE L'EN-TÊTE — menus Tournois et Classement, menu du compte, recherche ══════════════════
   La refonte ne les avait jamais repris : ils étaient restés en bleu nuit arrondi, halo et filets verts
   (« ça ne correspond pas du tout à la DA », le fondateur, 08/10/2026). Même matière que les plaques de
   l'en-tête : roche noire, filet clair, UN coin vif du côté de ce qui les ouvre. Une entrée survolée
   devient une plaque crème à texte sombre, comme la pastille du menu ; le lime reste une touche (le point
   d'état, le pictogramme survolé, le palet « ami »). */
body.v5 .rail .zone__panel,body.v5 .hmenu,body.v5 .hsearch__panel{border:0;
  background:url("/static/players/roche.webp") center/420px,linear-gradient(180deg,rgba(24,24,24,.97),rgba(7,7,7,.985));background-blend-mode:soft-light,normal;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 4px rgba(10,10,10,.05),0 34px 60px -26px rgba(0,0,0,.9)}

/* — le volet d'une touche du menu : accroché sous elle, par son coin vif — */
body.v5 .rail .zone__panel{top:calc(100% + 8px);left:0;width:316px;padding:8px;border-radius:6px 18px 18px 18px;
  transform:translateY(-8px);transform-origin:top left;
  transition:opacity 260ms var(--v5-masse),transform 420ms var(--v5-sortie),visibility 260ms}
body.v5 .rail .zone.is-open .zone__panel{transform:none}
body.v5 .rail .zone__panel::after{display:none}
body.v5 .zone__lbl{padding:11px 12px 6px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;color:rgba(241,241,236,.46)}
body.v5 .rail .zone__panel a:not(.zone__hero){gap:12px;align-items:center;padding:9px 10px !important;border-radius:12px 12px 12px 3px;
  transition:background 220ms var(--v5-masse)}
body.v5 .rail .zone__panel a:not(.zone__hero):hover,body.v5 .rail .zone__panel a:not(.zone__hero):focus-visible{background:#f1f1ec;padding-left:10px !important}
body.v5 .zone__panel a b{font-family:var(--f-ui);font-weight:600;font-size:14px;letter-spacing:-.005em;color:var(--cream);transition:color 220ms var(--v5-masse)}
body.v5 .zone__panel a small{margin-top:1px;font-family:var(--f-ui);font-weight:400;font-size:12.5px;line-height:1.3;color:rgba(241,241,236,.52);transition:color 220ms var(--v5-masse)}
body.v5 .zone__panel a:hover b,body.v5 .zone__panel a:focus-visible b{color:#060606}
body.v5 .zone__panel a:hover small,body.v5 .zone__panel a:focus-visible small{color:rgba(6,6,6,.64)}
/* le pictogramme vit dans une petite dalle : claire au repos, noire à trait lime sous le survol */
body.v5 .rail .zone__panel a:not(.zone__hero) .ico,body.v5 .hmenu .hmenu-sec a .ico{box-sizing:border-box;flex:none;width:32px;height:32px;margin:0;padding:8px;opacity:1;
  border-radius:10px 10px 10px 3px;color:rgba(241,241,236,.7);background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background 220ms var(--v5-masse),color 220ms var(--v5-masse),box-shadow 220ms var(--v5-masse)}
body.v5 .rail .zone__panel a:not(.zone__hero):hover .ico,body.v5 .rail .zone__panel a:not(.zone__hero):focus-visible .ico,
body.v5 .hmenu .hmenu-sec a:hover .ico,body.v5 .hmenu .hmenu-sec a:focus-visible .ico{color:var(--v5-lime);background:#060606;box-shadow:none}
/* la vedette : le tournoi du moment, en dalle noire — le lime n'y est que le point d'un direct */
body.v5 .rail .zone__hero{margin-bottom:6px;padding:13px 14px 14px !important;border:0;border-radius:3px 13px 13px 13px;background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow 260ms var(--v5-masse)}
body.v5 .rail .zone__hero:hover,body.v5 .rail .zone__hero:focus-visible{background:#000;transform:none;box-shadow:inset 0 0 0 1px rgba(241,241,236,.5)}
body.v5 .zone__hero-tag{gap:7px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;color:rgba(241,241,236,.62)}
body.v5 .zone__hero-tag i{width:6px;height:6px;background:rgba(241,241,236,.62);box-shadow:none;animation:none}
body.v5 .zone__hero-tag.is-live{color:var(--v5-lime)}
body.v5 .zone__hero-tag.is-live i{background:var(--v5-lime);animation:zoneLive 1.6s steps(2) infinite}
body.v5 .zone__hero-n{margin-top:8px;font-family:var(--f-display);font-weight:760;font-size:18px;line-height:1.02;letter-spacing:-.03em;text-transform:uppercase}
body.v5 .zone__hero-m{margin-top:7px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.5)}
body.v5 .rail .zone__hero:hover .zone__hero-m{color:rgba(241,241,236,.7)}

/* — le menu du compte : accroché sous l'avatar, à droite — */
body.v5 .hmenu{top:calc(100% + 8px);right:0;width:280px;padding:8px;border-radius:18px 6px 18px 18px}
body.v5 .hmenu-id{gap:12px;margin-bottom:4px;padding:10px;border:0;border-radius:13px 3px 13px 13px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow 260ms var(--v5-masse)}
body.v5 .hmenu-id:hover,body.v5 .hmenu-id:focus-visible{background:#000;border:0;box-shadow:inset 0 0 0 1px rgba(241,241,236,.5);padding-left:10px;transform:none}
body.v5 .hmenu-id img{width:42px;height:42px;border:0;border-radius:12px 12px 12px 4px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
body.v5 .hmenu-id__t{gap:5px}
body.v5 .hmenu-id__t b{font-family:var(--f-display);font-weight:760;font-size:15.5px;line-height:1;letter-spacing:-.03em;text-transform:uppercase}
body.v5 .hmenu-id__t small{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(241,241,236,.55);transition:color 220ms var(--v5-masse)}
body.v5 .hmenu-id:hover .hmenu-id__t small{color:var(--v5-lime)}
body.v5 .hmenu-sec{padding:4px 0 2px}
body.v5 .hmenu-sec + .hmenu-sec{margin-top:4px;padding-top:6px;border-top:1px solid rgba(241,241,236,.09)}
body.v5 .hmenu .hmenu-sec a,body.v5 .hmenu-out{gap:12px;padding:6px 10px 6px 6px;border-radius:12px 12px 12px 3px;font-family:var(--f-ui);font-weight:500;font-size:14px;letter-spacing:-.005em;
  color:rgba(241,241,236,.82);transition:background 220ms var(--v5-masse),color 220ms var(--v5-masse)}
body.v5 .hmenu .hmenu-sec a:hover,body.v5 .hmenu .hmenu-sec a:focus-visible,body.v5 .hmenu-out:hover,body.v5 .hmenu-out:focus-visible{
  background:#f1f1ec;color:#060606;padding-left:6px;transform:none}
body.v5 .hmenu-out{padding:11px 12px;color:rgba(241,241,236,.6)}
body.v5 .hmenu-out:hover,body.v5 .hmenu-out:focus-visible{padding-left:12px}

/* — la recherche : la même dalle, au milieu de l'écran — */
body.v5 .hsearch{padding-top:11vh;background:rgba(5,5,5,.6);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
body.v5 .hsearch__panel{width:min(680px,92vw);border-radius:18px 18px 18px 6px}
body.v5 .hsearch__field{gap:13px;padding:17px 16px 17px 19px;border-bottom:1px solid rgba(241,241,236,.09)}
body.v5 .hsearch__field svg{color:rgba(241,241,236,.6)}
body.v5 .hsearch__field input,body.v5 .hsearch__field input:focus,body.v5 .hsearch__field input:focus-visible{min-height:0;height:auto;padding:0;border:0;border-radius:0;outline:0;background:none;box-shadow:none;
  font-family:var(--f-ui);font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--cream);caret-color:var(--v5-lime)}
body.v5 .hsearch__field input::placeholder{color:rgba(241,241,236,.42)}
body.v5 .hsearch__field input::-webkit-search-cancel-button,body.v5 .hsearch__field input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
body.v5 .hsearch__field kbd{padding:5px 8px;border:0;border-radius:8px 8px 8px 2px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:rgba(241,241,236,.62);background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
body.v5 .hsearch__results{padding:8px}
body.v5 .hsearch__hint,body.v5 .hs-empty{padding:16px 12px;font-family:var(--f-ui);font-size:14px;color:rgba(241,241,236,.55)}
body.v5 .hs-group{padding:12px 12px 6px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;color:rgba(241,241,236,.46)}
body.v5 .hs-row{gap:13px;padding:8px 10px 8px 8px;border-radius:13px 13px 13px 3px;transition:background 220ms var(--v5-masse)}
body.v5 .hs-row:hover,body.v5 .hs-row.is-cursor{background:#f1f1ec}
body.v5 .hs-row__av,body.v5 .hs-row__ic{width:40px;height:40px;border:0;border-radius:11px 11px 11px 3px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.v5 .hs-row__av{font-family:var(--f-display);font-weight:760;font-size:14px;letter-spacing:-.03em}
body.v5 .hs-row__ic{color:rgba(241,241,236,.8);transition:color 220ms var(--v5-masse)}
body.v5 .hs-row:hover .hs-row__ic,body.v5 .hs-row.is-cursor .hs-row__ic{color:var(--v5-lime);box-shadow:none}
body.v5 .hs-row__n{font-family:var(--f-ui);font-weight:600;font-size:15px;letter-spacing:-.01em;transition:color 220ms var(--v5-masse)}
body.v5 .hs-row__s{margin-top:2px;font-family:var(--f-mono);font-weight:600;font-size:10px;letter-spacing:.07em;color:rgba(241,241,236,.5);transition:color 220ms var(--v5-masse)}
body.v5 .hs-row:hover .hs-row__n,body.v5 .hs-row.is-cursor .hs-row__n{color:#060606}
body.v5 .hs-row:hover .hs-row__s,body.v5 .hs-row.is-cursor .hs-row__s{color:rgba(6,6,6,.62)}
body.v5 .hs-row__add{padding:8px 11px;border-radius:10px 10px 3px 10px;font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:.07em;color:#050505;background:var(--v5-lime)}
@media (prefers-reduced-motion:reduce){
  body.v5 .rail .zone__panel,body.v5 .rail .zone__panel a,body.v5 .zone__panel a b,body.v5 .zone__panel a small,body.v5 .hmenu a,body.v5 .hmenu-out,
  body.v5 .hs-row,body.v5 .hs-row__n,body.v5 .hs-row__s,body.v5 .zone__hero-tag.is-live i{transition:none;animation:none}
}

/* ── LE BANDEAU DE RÉPÉTITION (paiement simulé) ─────────────────────────────────────────────────────
   Il passait SOUS l'en-tête flottant : on ne lisait plus « aucun argent, aucun PayPal ». Il est fixé tout
   en haut, et l'en-tête descend d'autant. */
body.v5 .sim5{position:fixed;left:0;right:0;top:0;z-index:80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v5:has(.sim5) .hdr{top:38px}
@media (max-width:900px){ body.v5 .sim5{font-size:10px!important;letter-spacing:.05em!important} body.v5:has(.sim5) .hdr{top:34px} }
@media (max-width:560px){ body.v5 .sim5{white-space:normal;line-height:1.25!important;padding:5px 10px!important} body.v5:has(.sim5) .hdr{top:44px} }

/* ── LISIBILITÉ (contrôle du 08/10, _outils/audit/a11y.mjs) ──────────────────────────────────────────
   1. Un relevé posé sur un objet NOIR, dans une section claire, héritait du noir de « .sur-clair » : noir sur
      noir (carte du prochain événement, vedette de la fiche, bande de la carte). Sur ces objets, il est clair.
   2. Le pied de page écrivait en gris 3,3:1 sur le noir : il passe au-dessus de 4,5:1.
   3. Le surtitre des sections claires (1,9:1) prend l'encre de la page. */
body.v5 :is(.v5-coque,.v5-bande,.v5-plaque--nuit) .v5-rel{color:rgba(232,233,228,.64)}
body.v5 :is(.v5-coque,.v5-bande,.v5-plaque--nuit) .v5-rel b{color:#f1f1ec}
body.v5 .foot2__t{color:rgba(241,241,236,.62)}
body.v5 .foot2__hint,body.v5 .foot2__legal a,body.v5 .foot2__note,body.v5 .foot2__lang button{color:#9c9e9a}
body.v5 .foot2__legal a:hover,body.v5 .foot2__lang button:hover{color:#f1f1ec}
/* !important : skld-pillnav.css force « .eye{color:var(--muted) !important} ». Jamais dans un objet noir. */
body.v5.sol-clair .sec-head .eye:not(:is(.v5-bande,.v5-plaque--nuit,.v5-coque) *),
body.v5.sol-clair .sec-head .idx:not(:is(.v5-bande,.v5-plaque--nuit,.v5-coque) *){color:rgba(10,10,10,.7)!important}
body.v5 .e5__regle dt,body.v5 .fj-h__regle dt,body.v5 .o5__regle dt{color:rgba(10,10,10,.74)}
body.v5 .fil-p__v iframe:focus-visible,body.v5 .cl5__ecran iframe:focus-visible{outline:2px solid var(--v5-lime);outline-offset:3px}

/* ── L'INTERRUPTEUR « ANIMATIONS » (skld-mouvement.js) ──────────────────────────────────────────────
   Dans le pied de page, et en pastille la première fois que le système demande de réduire. */
body.v5 .mv5__inter{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 6px 0 12px;border:0;border-radius:12px 12px 12px 4px;cursor:pointer;
  background:rgba(241,241,236,.08);box-shadow:inset 0 0 0 1px rgba(241,241,236,.16);color:#f1f1ec;
  font-family:var(--f-mono);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
body.v5 .mv5__inter i{position:relative;width:34px;height:20px;border-radius:10px;background:rgba(241,241,236,.16);transition:background .25s linear}
body.v5 .mv5__inter i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#f1f1ec;transition:transform .3s var(--v5-masse)}
body.v5 .mv5__inter[aria-pressed="true"] i{background:var(--v5-lime)}
body.v5 .mv5__inter[aria-pressed="true"] i::after{transform:translateX(14px);background:#050505}
body.v5 .mv5__inter:focus-visible{outline:2px solid var(--v5-lime);outline-offset:3px}
body.v5 .foot2__mv{margin-top:12px}
body.v5 .mv5{position:fixed;left:14px;bottom:14px;z-index:60;display:flex;align-items:center;gap:6px;padding:6px;border-radius:18px 18px 18px 6px;
  background:#070707;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 50px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(10px)}
body.v5 .mv5.is-la{opacity:1;transform:none;transition:opacity .2s linear,transform .2s linear}
body.v5 .mv5[hidden]{display:none}
body.v5 .mv5__x{width:30px;height:30px;border:0;border-radius:50%;background:none;color:rgba(241,241,236,.7);font-size:18px;line-height:1;cursor:pointer}
body.v5 .mv5__x:hover{background:rgba(241,241,236,.1);color:#f1f1ec}
@media (max-width:900px){ body.v5 .mv5{bottom:calc(74px + env(safe-area-inset-bottom,0px))} }

/* ── LE CIEL BAS ───────────────────────────────────────────────────────────────────────────────────
   Le sol clair n'est pas un aplat : il se charge vers le haut, comme un ciel couvert. L'en-tête des pages
   est un verre dépoli posé devant le pays. (Ni pluie ni voile de brume : refusés par le fondateur le 08/10.) */
body.v5.sol-clair{background:#d7d9d6 linear-gradient(180deg,#bcc2be 0,#cdd1ce 34%,#d7d9d6 72%) fixed}
body.v5.sol-clair .e5{background:rgba(215,217,214,.56);-webkit-backdrop-filter:blur(2.5px) saturate(1.04);backdrop-filter:blur(2.5px) saturate(1.04)}

/* ── LISIBILITÉ SUR LES IMAGES ────────────────────────────────────────────────────────────────────
   Le bloc qui s ouvre au défilement : sa narration et son surtitre passent sur la pierre claire avant que le film ne
   remplisse l écran. Chaque ligne repose sur un verre sombre ; elle se lit sur le clair comme sur le film. */
body.v5 .sk-se .sk-se-copy{align-items:center}
body.v5 .sk-se .sk-se-copy [data-se-reveal]{padding:9px 16px;border-radius:12px;color:#f1f1ec;text-shadow:none;
  background:rgba(6,8,7,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.v5 .sk-se .sk-se-copy [data-se-reveal] strong{color:#a5f95a}
body.v5 .sk-se .sk-se-kicker{display:inline-block;padding:7px 12px;border-radius:9px;color:#f1f1ec;background:rgba(6,8,7,.78)}
/* la barre du bas, sur téléphone : des libellés qui se lisent */
body.v5 .bbar a{color:#c3c6c0}
body.v5 .bbar a.is-here{color:#ffffff}

/* ── LE PIED DE PAGE REGARDE LA VALLÉE ─────────────────────────────────────────────────────────────
   Derrière les liens, la vallée vue de la crête, dans la pénombre ; elle se découvre vers le bas, sous le mot géant.
   (Plus un aplat noir : « le noir plein, ce n'est pas beau ».) */
body.v5 .foot2{background:
    linear-gradient(180deg,rgba(5,6,5,.94) 0,rgba(5,6,5,.86) 46%,rgba(5,6,5,.58) 82%,rgba(5,6,5,.42) 100%),
    url("/static/players/scenes/crete-960.webp?v=2") 50% 78%/cover no-repeat,#050505}