/* =====================================================================
   ACCUEIL v5 « PIERRE » — le héros (.h5) et les sections recomposées.
   Chargée APRÈS skld-page-home.css (qui garde le héros « en direct » et les
   sections pas encore reprises).

   LE HÉROS. Une scène, pas une mise en page : le mot géant derrière, le
   personnage au centre, la roche et le chrome autour (3D réelle sur ordinateur),
   et le texte posé en bas comme une légende de pièce. Le seul vert de la scène
   est la lumière du masque, l'action principale et le point d'état.
   Empilement : 1 mot · 2 tag, lueur · 3 scène · 4 filet du mot · 5 voile ·
   6 relevés · 7 texte · 8 grain.
   ===================================================================== */
.h5{--page:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));position:relative;isolation:isolate;overflow:hidden;background:var(--v5-nuit);color:var(--v5-os);
  min-height:max(720px,100svh);margin-top:calc(-1 * var(--hdr-h));border-bottom:1px solid var(--v5-fil)}
.h5::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 50% 38%,rgba(232,233,228,.06),transparent 70%),
    radial-gradient(120% 80% at 50% 120%,rgba(137,244,33,.05),transparent 60%)}
.h5::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:var(--v5-grain);opacity:.07;mix-blend-mode:overlay}

/* --- le mot géant : net en haut, dissous dans le flou en bas */
.h5__mot{position:absolute;left:0;right:0;top:41%;z-index:1;text-align:center;white-space:nowrap;
  font-size:31vw;color:var(--v5-os);transform:translateY(-50%);user-select:none;pointer-events:none}
.h5__mot > span{display:inline-block}
.h5__mot-net{-webkit-mask:linear-gradient(180deg,#000 0,#000 44%,transparent 90%);mask:linear-gradient(180deg,#000 0,#000 44%,transparent 90%)}
.h5__mot-flou{position:absolute;left:50%;top:0;transform:translateX(-50%);filter:blur(.05em);opacity:.9;
  -webkit-mask:linear-gradient(180deg,transparent 18%,#000 80%);mask:linear-gradient(180deg,transparent 18%,#000 80%)}
.h5__mot--fil{z-index:4;color:transparent;-webkit-text-stroke:1.5px rgba(232,233,228,.5);
  -webkit-mask:linear-gradient(180deg,#000 0,#000 40%,transparent 82%);mask:linear-gradient(180deg,#000 0,#000 40%,transparent 82%)}

/* --- le tag à la bombe : noir, il ne se lit que là où il passe sur les lettres (comme sur le bandeau) */
.h5__tag{position:absolute;left:50%;top:45%;z-index:2;width:min(60vw,980px);aspect-ratio:976/356;
  transform:translate(-50%,-50%) rotate(-6deg);background:var(--v5-nuit);opacity:.94;pointer-events:none;
  -webkit-mask:url("/static/players/tag-skld.webp") center/contain no-repeat;mask:url("/static/players/tag-skld.webp") center/contain no-repeat}
.h5__lueur{position:absolute;left:50%;top:33%;z-index:2;width:min(52vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(137,244,33,.20),rgba(137,244,33,.05) 46%,transparent 72%);pointer-events:none}

/* --- la scène */
.h5__3d{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;opacity:0;transition:opacity 1100ms var(--v5-sortie)}
.h5__3d.is-pret{opacity:1}
.h5__3d.is-vite{transition-duration:420ms}
.h5__perso{position:absolute;left:50%;bottom:-3%;z-index:3;height:74%;width:auto;max-width:none;transform:translateX(-50%);
  pointer-events:none;transition:opacity 700ms linear}
.h5.is-3d .h5__perso{opacity:0}
.h5__voile{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,rgba(5,5,5,.62) 42%,rgba(5,5,5,.94) 78%,var(--v5-nuit) 100%)}

/* --- les relevés */
.h5__hud{position:absolute;z-index:6;top:112px;display:grid;gap:3px;pointer-events:none}
.h5__hud--hg{left:var(--page)}
.h5__hud--hd{right:var(--page);text-align:right}
.h5__croix{z-index:6}
.h5__croix--1{left:var(--page);top:52%}
.h5__croix--2{right:var(--page);top:52%}
.h5__croix--3{left:50%;top:92px;margin-left:-6px}

/* --- le texte, posé en bas */
.h5__bas{position:absolute;z-index:7;left:0;right:0;bottom:104px;padding-inline:var(--page);
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.h5__dit{max-width:600px}
.h5__eye{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.h5__eye::before{content:"";width:22px;height:1px;background:var(--v5-fil-2)}
.h5__phrase{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(28px,2.9vw,44px);line-height:1.02;
  letter-spacing:-.025em;color:var(--v5-os);text-wrap:balance}
.h5__lede{margin:14px 0 24px;max-width:44ch;font-size:15px;line-height:1.6;color:rgba(232,233,228,.66)}
.h5 .hero-cta{margin:0;display:flex;flex-wrap:wrap;gap:10px}

.h5__prochain{width:min(380px,34vw);flex:none;transition:transform 700ms var(--v5-masse)}
.h5__prochain .v5-coeur{padding:18px 20px 16px}
.h5p__tete{display:flex;justify-content:space-between;align-items:center;gap:12px}
.h5p__tete span{display:inline-flex;align-items:center;gap:9px}
.h5p__pt{width:7px;height:7px;border-radius:50%;background:var(--v5-lime);box-shadow:0 0 0 4px rgba(137,244,33,.16)}
.h5p__nom{margin-top:14px;font-family:var(--f-display);font-weight:600;font-size:22px;line-height:1.08;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--v5-os);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.h5p__chrono{margin-top:10px;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(44px,4vw,60px);line-height:.95;letter-spacing:.01em;
  color:var(--v5-os);font-variant-numeric:tabular-nums;font-feature-settings:"zero" 1}
.h5p__pied{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--v5-fil)}
.h5p__jauge{flex:1;min-width:0}
.h5p__barre{display:block;height:3px;margin-top:9px;border-radius:2px;background:rgba(232,233,228,.12);overflow:hidden}
.h5p__barre i{display:block;height:100%;border-radius:2px;background:var(--v5-os)}

/* --- la règle du bas : les chiffres du circuit, comme une ligne de relevé */
.h5__regle{position:absolute;z-index:7;left:0;right:0;bottom:0;margin:0;height:76px;display:grid;padding-inline:var(--page);
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;border-top:1px solid var(--v5-fil)}
.h5__regle > div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-inline:22px;border-left:1px solid var(--v5-fil);min-width:0}
.h5__regle > div:first-child{border-left:0;padding-left:0}
.h5__regle > div:last-child{padding-right:0}
.h5__regle dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h5__regle dd{margin:0;font-family:var(--f-chiffre);font-weight:800;font-size:40px;line-height:1;letter-spacing:.01em;color:var(--v5-os)}
.h5__defile{min-width:150px}
.h5__fleche{display:block;width:1px;height:18px;background:var(--v5-os);position:relative;animation:h5-tombe 1.9s var(--v5-masse) infinite}
.h5__fleche::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;border-right:1px solid var(--v5-os);border-bottom:1px solid var(--v5-os);transform:rotate(45deg)}
@keyframes h5-tombe{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(6px);opacity:0}}

/* --- l'entrée en scène (classe .is-la posée quand les fontes sont là) */
.v5js .h5__mot,.v5js .h5__tag,.v5js .h5__lueur,.v5js .h5__perso,.v5js .h5__hud,.v5js .h5__croix,
.v5js .h5__dit > *,.v5js .h5__prochain,.v5js .h5__regle > div{opacity:0}
.v5js .h5__mot{filter:blur(28px);transition:opacity 1100ms var(--v5-sortie),filter 1400ms var(--v5-sortie)}
.v5js .h5__tag{clip-path:inset(0 100% 0 0);transition:opacity 300ms linear 700ms,clip-path 900ms var(--v5-masse) 700ms}
.v5js .h5__lueur{transition:opacity 1600ms linear 500ms}
.v5js .h5__perso{transform:translateX(-50%) translateY(40px);transition:opacity 900ms var(--v5-sortie) 250ms,transform 1300ms var(--v5-sortie) 250ms}
.v5js .h5__hud,.v5js .h5__croix{transition:opacity 900ms linear 900ms}
.v5js .h5__dit > *,.v5js .h5__prochain{transform:translateY(22px);transition:opacity 800ms var(--v5-sortie),transform 1000ms var(--v5-sortie)}
.v5js .h5__dit > :nth-child(1){transition-delay:600ms}.v5js .h5__dit > :nth-child(2){transition-delay:680ms}
.v5js .h5__dit > :nth-child(3){transition-delay:760ms}.v5js .h5__dit > :nth-child(4){transition-delay:840ms}
.v5js .h5__prochain{transition-delay:920ms}
.v5js .h5__regle > div{transition:opacity 800ms linear 1100ms}
.v5js .h5.is-la .h5__mot{opacity:1;filter:none}
.v5js .h5.is-la .h5__tag{opacity:.94;clip-path:inset(0 0 0 0)}
.v5js .h5.is-la .h5__lueur,.v5js .h5.is-la .h5__hud,.v5js .h5.is-la .h5__regle > div{opacity:1}
.v5js .h5.is-la .h5__croix{opacity:.5}
.v5js .h5.is-la .h5__perso{opacity:1;transform:translateX(-50%)}
.v5js .h5.is-la.is-3d .h5__perso{opacity:0}
.v5js .h5.is-la .h5__dit > *,.v5js .h5.is-la .h5__prochain{opacity:1;transform:none}
.v5js .h5.is-la .h5__prochain:hover{transform:translateY(-4px);transition-delay:0s}

@media (max-width:900px){
  /* téléphone : la scène en haut (mot, tag, personnage), le texte dessous, sur fond plein */
  .h5{min-height:0;margin-top:calc(-1 * var(--hdr-h))}
  .h5__mot{top:236px}
  .h5__tag{top:244px;width:88vw}
  .h5__lueur{top:300px;width:110vw}
  .h5__perso{top:132px;bottom:auto;height:420px;width:auto}
  .h5__voile{top:372px;bottom:0;height:auto;background:linear-gradient(180deg,transparent 0,rgba(5,5,5,.88) 130px,var(--v5-nuit) 190px)}
  .h5__hud{top:84px}
  .h5__hud--hd span:last-child,.h5__croix{display:none}
  .h5__bas{position:relative;bottom:auto;padding-inline:var(--gut);flex-direction:column;align-items:stretch;gap:18px;padding-top:516px;padding-bottom:28px}
  .h5__prochain{width:auto}
  .h5__phrase{font-size:clamp(28px,8.4vw,38px)}
  .h5 .hero-cta .btn{flex:1 1 100%;justify-content:space-between}
  .h5__regle{position:relative}
  .h5__regle{grid-template-columns:repeat(3,minmax(0,1fr));height:auto}
  .h5__regle{padding-inline:0}
  .h5__regle > div,.h5__regle > div:first-child,.h5__regle > div:last-child{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:12px var(--gut)}
  .h5__regle dd{font-size:32px}
  .h5__regle dt{font-size:9px;letter-spacing:.1em;max-width:100%}
  .h5__defile{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .v5js .h5__mot{filter:none;transition:opacity 500ms linear}
  .v5js .h5__perso,.v5js .h5__dit > *,.v5js .h5__prochain{transform:none;transition:opacity 500ms linear}
  .v5js .h5__perso{transform:translateX(-50%)}
  .v5js .h5__tag{clip-path:none;transition:opacity 500ms linear}
  .h5__fleche{animation:none}
}

/* =====================================================================
   LES ÉTAPES (.p5) — une vraie séquence : trois grandes lignes numérotées,
   pas trois cartes égales. Le chiffre est un filet qui se remplit au survol.
   ===================================================================== */
.p5__liste{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--v5-fil)}
.p5__pas{position:relative;display:grid;grid-template-columns:minmax(120px,.85fr) minmax(0,1.5fr) minmax(0,1.6fr) 64px;
  align-items:center;gap:clamp(16px,3vw,48px);padding:clamp(22px,2.6vw,36px) clamp(8px,1.2vw,18px);border-top:1px solid var(--v5-fil)}
.p5__pas::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 500ms var(--v5-masse);
  background:linear-gradient(90deg,rgba(232,233,228,.06),transparent 72%)}
.p5__pas:hover::before{opacity:1}
.p5__n{font-size:clamp(64px,8.4vw,128px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(232,233,228,.34);
  transition:color 500ms var(--v5-masse),-webkit-text-stroke-color 500ms var(--v5-masse)}
.p5__pas:hover .p5__n{color:var(--v5-os);-webkit-text-stroke-color:var(--v5-os)}
.p5 .p5__t{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.3vw,34px);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--v5-os)}
.p5 .p5__d{margin:0;font-size:15px;line-height:1.6;color:rgba(232,233,228,.62);max-width:46ch}
.p5__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;justify-self:end;color:var(--v5-os);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform 600ms var(--v5-masse),background 400ms var(--v5-masse),color 400ms var(--v5-masse)}
.p5__ico svg{width:24px;height:24px}
.p5__pas:hover .p5__ico{transform:rotate(-8deg) scale(1.06);background:var(--v5-lime);color:#050505}
@media (max-width:820px){
  .p5__pas{grid-template-columns:auto minmax(0,1fr);gap:6px 18px;align-items:end}
  .p5__n{font-size:64px}
  .p5 .p5__d{grid-column:1 / -1;margin-top:8px}
  .p5__ico{display:none}
}

/* =====================================================================
   LES VAINQUEURS (.g5) — la plaque claire : le gris pierre du bandeau, le mot
   géant noir, la roche posée dessus. Au survol une ligne se retourne en noir.
   ===================================================================== */
.g5{padding:clamp(22px,2.6vw,40px) clamp(20px,3.2vw,48px) clamp(20px,2.6vw,40px)}
.g5__rang{font-family:var(--f-chiffre);font-weight:800;font-size:26px;letter-spacing:.01em;line-height:1}
.g5__tete{display:flex;justify-content:space-between;gap:16px}
.g5__mot{position:relative;z-index:1;margin:clamp(14px,2vw,28px) 0 0;white-space:nowrap;text-align:center;color:#0a0a0a;font-size:13vw;line-height:.8}
.g5__mot > span{display:inline-block}
.g5__roche{position:absolute;z-index:2;height:auto;pointer-events:none;will-change:transform;
  transform:translate3d(0,var(--fy,0px),0) rotate(var(--rot,0deg))}
.g5__roche--a{right:3%;top:-7%;width:clamp(190px,27vw,420px);--rot:9deg}
.g5__roche--b{left:-4%;top:30%;width:clamp(120px,15vw,240px);--rot:-16deg;filter:blur(3px)}
.g5__liste{position:relative;z-index:3;list-style:none;margin:clamp(30px,4.4vw,72px) 0 0;padding:0;border-bottom:1.5px solid #0a0a0a}
.g5__ligne{position:relative;isolation:isolate;display:grid;grid-template-columns:56px minmax(0,1.5fr) minmax(0,1fr) auto;align-items:center;
  gap:clamp(12px,2vw,28px);padding:clamp(14px,1.6vw,22px) clamp(8px,1.2vw,18px);border-top:1.5px solid #0a0a0a;color:#0a0a0a;text-decoration:none;
  transition:color 420ms var(--v5-masse)}
.g5__ligne::before{content:"";position:absolute;inset:0;z-index:-1;background:#0a0a0a;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform 520ms var(--v5-masse)}
.g5__ligne:hover,.g5__ligne:focus-visible{color:var(--v5-os)}
.g5__ligne:hover::before,.g5__ligne:focus-visible::before{transform:scaleY(1)}
.g5__ligne:hover .v5-rel,.g5__ligne:focus-visible .v5-rel{color:rgba(232,233,228,.7)}
.g5__nom{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.6vw,54px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g5__ou{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g5 .v5-rond{background:#0a0a0a;color:var(--v5-os)}
.g5__ligne:hover .v5-rond,.g5__ligne:focus-visible .v5-rond{background:var(--v5-lime);color:#0a0a0a}
@media (max-width:820px){
  .g5__ligne{grid-template-columns:34px minmax(0,1fr) auto;row-gap:2px}
  .g5__ou{grid-column:2;grid-row:2}
  .g5 .v5-rond{grid-row:1 / span 2;grid-column:3}
  .g5__roche--a{width:44vw;top:-3%}
  .g5__roche--b{display:none}
}

/* =====================================================================
   LES JOUEURS (.j5) — un sélecteur : la liste réglée à gauche, la grande fiche
   du joueur visé à droite (portrait, nom géant, note en chiffres condensés).
   ===================================================================== */
.j5__grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(18px,2.4vw,36px);align-items:stretch}
.j5__liste{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--v5-fil);align-self:center}
.j5__ligne{position:relative;display:grid;grid-template-columns:54px 46px minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:16px clamp(8px,1vw,14px);border-top:1px solid var(--v5-fil);color:rgba(232,233,228,.62);text-decoration:none;
  transition:color 300ms var(--v5-masse),padding 500ms var(--v5-masse)}
.j5__ligne::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:linear-gradient(90deg,rgba(232,233,228,.08),transparent 80%);
  transition:opacity 400ms var(--v5-masse)}
.j5__ligne.is-on{color:var(--v5-os);padding-left:clamp(14px,1.6vw,24px)}
.j5__ligne.is-on::before{opacity:1}
.j5__rg{font-family:var(--f-chiffre);font-weight:800;font-size:30px;line-height:1;letter-spacing:.01em}
.j5__ligne.is-on .j5__rg{color:var(--v5-lime)}
.j5__av{width:46px;height:46px;border-radius:14px;object-fit:cover;filter:grayscale(1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:filter 400ms var(--v5-masse)}
.j5__ligne.is-on .j5__av{filter:none}
.j5__av--ini{display:grid;place-items:center;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:20px;color:transparent;-webkit-text-stroke:1px var(--v5-os)}
.j5__nom{font-family:var(--f-display);font-weight:720;font-size:clamp(20px,2.1vw,30px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j5__note{font-family:var(--f-chiffre);font-weight:800;font-size:30px;line-height:1;letter-spacing:.01em}
.j5__fiche{min-height:440px}
.j5__coeur{position:relative;display:block;height:100%;min-height:428px;isolation:isolate}
.j5__rang{position:absolute;z-index:0;right:18px;top:6px;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(150px,17vw,250px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(232,233,228,.2);pointer-events:none}
.j5__roche{position:absolute;z-index:1;left:-9%;top:-6%;width:46%;height:auto;transform:rotate(-18deg);filter:blur(1.5px) brightness(.8);pointer-events:none}
.j5__portrait{position:absolute;z-index:2;left:28px;top:28px;width:clamp(120px,13vw,176px);aspect-ratio:1;border-radius:26px 26px 26px 8px;overflow:hidden;
  background:#0c0c0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 5px rgba(255,255,255,.035),0 30px 60px -30px #000}
.j5__portrait img{width:100%;height:100%;object-fit:cover}
.j5__bas{position:absolute;z-index:3;left:28px;right:24px;bottom:22px;display:grid;gap:12px}
.j5__grand{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(34px,4.6vw,68px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.j5__ligne2{display:flex;align-items:flex-end;gap:16px;padding-top:14px;border-top:1px solid var(--v5-fil)}
.j5__chiffre{font-family:var(--f-chiffre);font-weight:800;font-size:clamp(54px,6vw,86px);line-height:.8;letter-spacing:.01em}
.j5__rel{display:grid;gap:3px;flex:1;min-width:0;padding-bottom:2px}
.j5__fiche.is-change .j5__grand,.j5__fiche.is-change .j5__chiffre,.j5__fiche.is-change .j5__portrait{animation:j5-change 520ms var(--v5-sortie) both}
.j5__fiche.is-change .j5__chiffre{animation-delay:60ms}
@keyframes j5-change{from{opacity:0;filter:blur(10px);transform:translateY(10px)}}
@media (max-width:900px){
  .j5__grille{grid-template-columns:1fr}
  .j5__fiche{display:none}
  .j5__ligne{color:var(--v5-os)}
  .j5__av{filter:none}
}
@media (prefers-reduced-motion:reduce){
  .j5__fiche.is-change .j5__grand,.j5__fiche.is-change .j5__chiffre,.j5__fiche.is-change .j5__portrait{animation:none}
}

/* =====================================================================
   LE MONDE DU BANDEAU (body.sol-clair) — l'accueil sur pierre claire.
   Le mot géant est LIME (la masse du bandeau), le tag à la bombe est noir par-dessus,
   la roche et le sweat sont noirs, le texte est noir. Les sections alternent :
   clair (étapes, joueurs) · bande de nuit (vidéo, carrousel) · plaque noire (vainqueurs).
   ===================================================================== */
body.sol-clair .h5{background:#d7d9d6;color:#0a0a0a;border-bottom:0}
body.sol-clair .h5::before{background:radial-gradient(70% 62% at 56% 30%,#f1f3f1,transparent 70%),radial-gradient(60% 60% at 0 100%,#b9bebd,transparent 66%),
  radial-gradient(50% 50% at 100% 0,#c6cbca,transparent 70%)}
body.sol-clair .h5::after{filter:invert(1);opacity:.22;mix-blend-mode:normal}
body.sol-clair .h5__mot{color:var(--v5-lime)}
body.sol-clair .h5__mot--fil,body.sol-clair .h5__voile{display:none}
body.sol-clair .h5__tag{background:#0b0b0b;opacity:.96}
body.sol-clair .h5__lueur{background:radial-gradient(closest-side,rgba(137,244,33,.55),rgba(137,244,33,.14) 46%,transparent 72%)}
body.sol-clair .h5 > .v5-rel,body.sol-clair .h5__dit .v5-rel,body.sol-clair .h5__regle{color:rgba(10,10,10,.64)}
body.sol-clair .h5 > .v5-rel b{color:#0a0a0a}
body.sol-clair .h5 .v5-croix::before,body.sol-clair .h5 .v5-croix::after{background:#0a0a0a}
body.sol-clair .h5__eye::before{background:rgba(10,10,10,.34)}
body.sol-clair .h5__phrase{color:#0a0a0a}
body.sol-clair .h5__lede{color:rgba(10,10,10,.72)}
body.sol-clair .h5__regle{background:#d9dbd8;border-top-color:rgba(10,10,10,.16)}
body.sol-clair .h5__regle > div{border-left-color:rgba(10,10,10,.16)}
body.sol-clair .h5__regle dd{color:#0a0a0a}
body.sol-clair .h5__fleche{background:#0a0a0a}
body.sol-clair .h5__fleche::after{border-color:#0a0a0a}
/* les étapes, sur le clair */
body.sol-clair .p5__liste{border-bottom-color:rgba(10,10,10,.16)}
body.sol-clair .p5__pas{border-top-color:rgba(10,10,10,.16)}
body.sol-clair .p5__pas::before{background:linear-gradient(90deg,rgba(10,10,10,.07),transparent 72%)}
body.sol-clair .p5__n{-webkit-text-stroke:1.5px rgba(10,10,10,.4)}
body.sol-clair .p5__pas:hover .p5__n{color:#0a0a0a;-webkit-text-stroke-color:#0a0a0a}
body.sol-clair .p5 .p5__t{color:#0a0a0a}
body.sol-clair .p5 .p5__d{color:rgba(10,10,10,.68)}
body.sol-clair .p5__ico{color:var(--v5-os);background:linear-gradient(180deg,#1d1d1d,#070707);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16)}
body.sol-clair .p5__pas:hover .p5__ico{background:var(--v5-lime);color:#050505}
/* les joueurs, sur le clair : la liste est noire sur pierre, la grande fiche reste un objet noir */
body.sol-clair .j5__liste{border-bottom-color:rgba(10,10,10,.16)}
body.sol-clair .j5__ligne{border-top-color:rgba(10,10,10,.16);color:rgba(10,10,10,.56)}
body.sol-clair .j5__ligne::before{background:linear-gradient(90deg,rgba(10,10,10,.09),transparent 80%)}
body.sol-clair .j5__ligne.is-on{color:#0a0a0a}
body.sol-clair .j5__ligne.is-on .j5__rg{color:#0a0a0a}
body.sol-clair .j5__av{box-shadow:inset 0 0 0 1px rgba(10,10,10,.2)}
body.sol-clair .j5__av--ini{-webkit-text-stroke-color:#0a0a0a}
body.sol-clair .j5__fiche{color:var(--v5-os);background:linear-gradient(180deg,#222,#0c0c0c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px -40px rgba(0,0,0,.6)}
@media (max-width:900px){ body.sol-clair .j5__ligne{color:#0a0a0a} }
/* le carrousel vit dans une bande de nuit */
.v5-bande .t5{padding-block:clamp(40px,5vw,72px) clamp(28px,3vw,44px)}
/* les vainqueurs en plaque NOIRE (page claire) : mot d'os, filets clairs, la ligne se retourne en blanc */
.v5-plaque--nuit .g5__mot{color:var(--v5-os)}
.v5-plaque--nuit .g5__liste{border-bottom-color:rgba(232,233,228,.22)}
.v5-plaque--nuit .g5__ligne{border-top-color:rgba(232,233,228,.22);color:var(--v5-os)}
.v5-plaque--nuit .g5__ligne::before{background:var(--v5-os)}
.v5-plaque--nuit .g5__ligne:hover,.v5-plaque--nuit .g5__ligne:focus-visible{color:#0a0a0a}
.v5-plaque--nuit .g5__ligne:hover .v5-rel,.v5-plaque--nuit .g5__ligne:focus-visible .v5-rel{color:rgba(10,10,10,.66)}
.v5-plaque--nuit.g5 .v5-rond{background:var(--v5-os);color:#0a0a0a}
.v5-plaque--nuit .g5__ligne:hover .v5-rond{background:var(--v5-lime);color:#0a0a0a}

@media (max-width:900px){
  /* téléphone, sol clair : le texte commence sous le personnage (pas de voile sombre ici) */
  body.sol-clair .h5__bas{padding-top:572px}
}

/* le fil de hangul, vertical, sur le bord droit du héros */
.h5__han{position:absolute;z-index:6;right:calc(var(--page) - 4px);top:31%;writing-mode:vertical-rl;font-size:13px;letter-spacing:.42em;color:rgba(10,10,10,.62);pointer-events:none}
body:not(.sol-clair) .h5__han{color:rgba(232,233,228,.5)}
@media (max-width:900px){ .h5__han{top:392px;right:14px;font-size:11px} }

/* LE PAYS derrière le texte (scène 3D active seulement) : une nappe de brume — pierre et flou —
   tient la phrase lisible au-dessus de l'herbe ; elle n'a pas de bord. */
body.sol-clair .h5.is-3d .h5__dit{position:relative;isolation:isolate}
body.sol-clair .h5.is-3d .h5__dit::before{content:"";position:absolute;z-index:-1;inset:-52px -30px -44px -90px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(215,217,214,.9),rgba(215,217,214,.66) 58%,rgba(215,217,214,0));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  -webkit-mask:radial-gradient(closest-side,#000 50%,transparent);mask:radial-gradient(closest-side,#000 50%,transparent)}


/* ─── LE DIRECT SUR SOL CLAIR : contrastes (audit d'accessibilité du 07/10/2026) ──────────────
   La branche « tournoi en direct » garde sa structure d'origine. Ses textes clairs et lime, écrits
   pour un fond noir, étaient illisibles sur la pierre (1,0:1 à 1,9:1) ; dans le classement, les noms
   et les points héritaient du noir de la page sur un tableau noir (1,0:1). Mesuré : _outils/audit/a11y.mjs. */
/* !important : skld-pillnav.css force « .eye{color:var(--muted) !important} » (gris clair, 1,9:1 sur la pierre) */
body.v5.sol-clair .lh .eye{color:rgba(10,10,10,.74) !important}
body.v5.sol-clair .lh .eye::before{background:rgba(10,10,10,.36) !important}
body.v5.sol-clair .lh .status-row .chip{color:#0a0a0a;background:rgba(10,10,10,.05);border-color:rgba(10,10,10,.24);box-shadow:none}
body.v5.sol-clair .lh .status-row .chip.g{color:#89f421;background:#0a0a0a;border-color:#0a0a0a}
body.v5.sol-clair .lh .obj{color:#0a0a0a;background:rgba(10,10,10,.05);border-color:rgba(10,10,10,.22);box-shadow:none}
body.v5.sol-clair .lh .mini .mr .nm,body.v5.sol-clair .lh .mini .mr .pt{color:#f1f1ec}
body.v5.sol-clair .lh .mini .mr .rk{color:#a9aca6}
body.v5.sol-clair .lh .mini .mr.lead .rk,body.v5.sol-clair .lh .mini .mr.lead .pt{color:#89f421}


/* ── LE HÉROS EN DIRECT (.lh5) ────────────────────────────────────────────────────────────────────
   Même langue que le héros au repos : le mot géant qui se dissout, la lueur du masque, et la mascotte
   debout derrière le classement — on voit le masque dépasser du panneau. Le contenu (.wrap) reste devant. */
body.v5 .lh.lh5{isolation:isolate;overflow:hidden;min-height:clamp(600px,52vw,800px);display:grid;align-items:end;padding-bottom:clamp(64px,7vw,110px)}
body.v5 .lh.lh5 > .wrap{z-index:3;width:100%}
.lh5__mot{position:absolute;left:0;right:0;top:25%;z-index:0;text-align:center;white-space:nowrap;font-size:20vw;color:var(--v5-lime);
  transform:translateY(-50%);pointer-events:none;user-select:none;
  -webkit-mask:linear-gradient(180deg,#000 0,#000 38%,transparent 94%);mask:linear-gradient(180deg,#000 0,#000 38%,transparent 94%)}
.lh5__mot > span{display:inline-block}
.lh5__lueur{position:absolute;left:52%;top:40%;z-index:1;width:min(46vw,720px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(137,244,33,.26),rgba(137,244,33,.06) 48%,transparent 72%)}
.lh5__perso{position:absolute;left:52%;bottom:-9%;z-index:2;height:92%;transform:translateX(-50%);pointer-events:none}
.lh5__perso img{display:block;height:100%;width:auto;max-width:none}
.lh5__hud{position:absolute;left:var(--v5-gouttiere,clamp(16px,8.2vw,118px));bottom:18px;z-index:3;display:flex;gap:22px;color:rgba(10,10,10,.6)}
.lh5__hud b{font-weight:inherit;color:#0a0a0a}
body.v5 .lh.lh5{border-bottom:0;margin-bottom:0}
body.v5 .lh.lh5::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;height:1px;background:rgba(10,10,10,.38);opacity:1;inset:auto 0 0 0}
body.v5 .lh.lh5 + .g5{position:relative;z-index:3;margin-top:0}
body.v5 .lh.lh5 .mini{box-shadow:0 30px 60px -18px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07)}
@media (max-width:880px){
  body.v5 .lh.lh5{display:block;min-height:0}
  .lh5__mot{top:158px;font-size:32vw}
  .lh5__perso{left:auto;right:-46px;bottom:auto;top:64px;height:236px;transform:none;-webkit-mask:linear-gradient(180deg,#000 62%,transparent 98%);mask:linear-gradient(180deg,#000 62%,transparent 98%)}
  .lh5__lueur{left:78%;top:170px;width:90vw}
  .lh5__hud{display:none}
}

/* ── LA MASCOTTE VIT (héros en direct) ─────────────────────────────────────────────────────────────
   Elle respire (un souffle de huit pixels), et de loin en loin le masque « saute » : deux tranches
   horizontales se décalent un instant, comme sur le bandeau. Rien en mode calme. */
@media (prefers-reduced-motion:no-preference){
  .lh5__perso{animation:lh5-respire 7s ease-in-out infinite}
  .lh5__perso::before,.lh5__perso::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    background:url("/static/players/perso.webp") center/100% 100% no-repeat}
  .lh5__perso::before{animation:lh5-saut-a 6.4s steps(1,end) 2.2s infinite}
  .lh5__perso::after{animation:lh5-saut-b 6.4s steps(1,end) 2.2s infinite}
}
@keyframes lh5-respire{0%,100%{translate:0 0} 50%{translate:0 -8px}}
@keyframes lh5-saut-a{
  0%,90%,100%{opacity:0}
  91%{opacity:1;clip-path:inset(17% 0 71% 0);transform:translateX(-16px)}
  93%{opacity:1;clip-path:inset(30% 0 60% 0);transform:translateX(11px)}
  95%{opacity:1;clip-path:inset(9% 0 84% 0);transform:translateX(-7px)}
  96.5%{opacity:0}}
@keyframes lh5-saut-b{
  0%,91%,100%{opacity:0}
  92%{opacity:.92;clip-path:inset(41% 0 49% 0);transform:translateX(18px)}
  94%{opacity:.92;clip-path:inset(23% 0 68% 0);transform:translateX(-13px)}
  96%{opacity:0}}

/* =====================================================================
   LE HÉROS « SCÈNE » (.h5--scene) — le fondateur, 08/10 : « des vraies scènes, comme un film qu'on a fait sur
   Blender », « là, on parle ». Le plan d'arrivée de la vallée tient tout l'écran ; sa boucle le remplace dès qu'elle
   est chargée. Le mot géant n'est plus une masse : un simple filet lime, posé sur la brume, qui se perd vers le bas —
   l'image est le sujet. Le bas se charge pour porter le texte ; la carte du prochain tournoi monte au-dessus du
   personnage (il se tient en bas à droite de l'image).
   ===================================================================== */
body.sol-clair .h5.h5--scene{--v5-os:#eef0eb;--v5-fil:rgba(238,240,235,.18);--v5-fil-2:rgba(238,240,235,.36);background:#7f8582;color:#eef0eb}
.h5--scene::before{display:none}
.h5--scene::after{opacity:.1}
.h5__plan{position:absolute;left:0;top:-2%;z-index:0;width:100%;height:104%;object-fit:cover;object-position:62% 46%;pointer-events:none;
  transform:translate3d(calc(var(--mx,0) * -14px),calc(var(--fy,0px) + var(--my,0) * -8px),0) scale(1.03);will-change:transform}
.h5__plan--film{opacity:0;transition:opacity 1.6s ease}
body.sol-clair .h5.h5--scene .h5__mot{top:31%;z-index:1;color:transparent;mix-blend-mode:normal;filter:none;-webkit-text-stroke:1.5px rgba(137,244,33,.8)}
.h5--scene .h5__mot-net{-webkit-mask:linear-gradient(180deg,#000 0,#000 34%,transparent 78%);mask:linear-gradient(180deg,#000 0,#000 34%,transparent 78%)}
body.sol-clair .h5.h5--scene .h5__mot-flou,body.sol-clair .h5.h5--scene .h5__mot--fil{display:none}
.h5--scene .h5__voile{top:0;height:auto;background:
    linear-gradient(180deg,rgba(6,8,7,0) 42%,rgba(6,8,7,.4) 66%,rgba(6,8,7,.9) 100%),
    linear-gradient(90deg,rgba(6,8,7,.62) 0,rgba(6,8,7,.34) 30%,rgba(6,8,7,0) 56%)}
body.sol-clair .h5.h5--scene > .v5-rel,body.sol-clair .h5.h5--scene .h5__regle{color:rgba(238,240,235,.86)}
body.sol-clair .h5.h5--scene .h5__dit .v5-rel{color:#fff}
body.sol-clair .h5.h5--scene > .v5-rel b{color:#fff}
body.sol-clair .h5.h5--scene .v5-croix::before,body.sol-clair .h5.h5--scene .v5-croix::after{background:#eef0eb}
body.sol-clair .h5.h5--scene .h5__eye::before{background:rgba(238,240,235,.5)}
.h5--scene .h5__hud{text-shadow:0 1px 14px rgba(6,8,7,.6)}
.h5--scene .h5__han{color:rgba(238,240,235,.74);text-shadow:0 1px 14px rgba(6,8,7,.6)}
body.sol-clair .h5.h5--scene .h5__phrase{color:#fff;text-shadow:0 2px 30px rgba(6,8,7,.55)}
body.sol-clair .h5.h5--scene .h5__lede{color:rgba(238,240,235,.88)}
body.sol-clair .h5.h5--scene .h5__regle{background:rgba(6,8,7,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(238,240,235,.18)}
body.sol-clair .h5.h5--scene .h5__regle > div{border-left-color:rgba(238,240,235,.16)}
body.sol-clair .h5.h5--scene .h5__regle dd{color:#fff}
body.sol-clair .h5.h5--scene .h5__fleche,body.sol-clair .h5.h5--scene .h5__fleche::after{background-color:#eef0eb;border-color:#eef0eb}
body.v5 .h5--scene .btn.pri{color:#0a0a0a;background:linear-gradient(180deg,#ffffff,#dfe2dd)}
body.v5 .h5--scene .btn.pri:hover,body.v5 .h5--scene .btn.pri .btn-ico{color:#0a0a0a}
body.v5 .h5--scene .btn:not(.pri){color:#f4f5f1;background:rgba(6,8,7,.5);box-shadow:inset 0 0 0 1px rgba(238,240,235,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.v5 .h5--scene .btn:not(.pri):hover{color:#fff;background:rgba(6,8,7,.66)}
body.v5 .h5--scene .btn:not(.pri) .btn-ico{color:#f4f5f1;background:rgba(238,240,235,.14);box-shadow:none}
.h5--scene .h5__bas{align-items:stretch}
.h5--scene .h5__dit{align-self:flex-end}
.h5--scene .h5__prochain{align-self:flex-start;margin-bottom:clamp(210px,30vh,330px)}
.v5js .h5--scene .h5__plan{opacity:0;transition:opacity 1200ms linear}
.v5js .h5--scene.is-la .h5__plan:not(.h5__plan--film){opacity:1}
.v5js .h5--scene.is-la .h5__plan--film.is-pret{opacity:1}
@media (max-width:820px){
  .h5__plan{top:0;height:520px;object-position:70% 50%;transform:none}
  .h5--scene .h5__mot{top:140px}
  .h5--scene .h5__voile{top:330px;bottom:0;height:auto;background:linear-gradient(180deg,rgba(6,8,7,0) 0,rgba(6,8,7,.9) 150px,#060807 200px)}
  body.sol-clair .h5.h5--scene{background:#060807}
  .h5--scene .h5__prochain{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){ .h5__plan{transform:scale(1.03)} }

/* =====================================================================
   LE DIRECT « SCÈNE » (.ld5) — un tournoi tourne : l'accueil s'ouvre sur le plan du monogramme. En bas à gauche,
   l'état (la pastille « en direct », le format, la manche), le nom, l'objectif, deux boutons. Tout en bas, une règle
   de verre sombre : les cinq premiers, sur une ligne. Ni mot géant ni carte flottante (refusés le 08/10).
   ===================================================================== */
.ld5{--page:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)));position:relative;isolation:isolate;overflow:hidden;
  min-height:max(680px,92svh);margin-top:calc(-1 * var(--hdr-h));background:#7f8582;color:#eef0eb}
.ld5::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:var(--v5-grain);opacity:.1;mix-blend-mode:overlay}
.ld5__plan{position:absolute;left:0;top:-2%;z-index:0;width:100%;height:104%;object-fit:cover;object-position:46% 44%;pointer-events:none;
  transform:translate3d(0,var(--fy,0px),0) scale(1.03);will-change:transform}
.ld5__plan--film{opacity:0;transition:opacity 1.6s ease}
.ld5__plan--film.is-pret{opacity:1}
.ld5__voile{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(180deg,rgba(6,8,7,0) 40%,rgba(6,8,7,.42) 64%,rgba(6,8,7,.9) 100%),
    linear-gradient(90deg,rgba(6,8,7,.6) 0,rgba(6,8,7,.3) 32%,rgba(6,8,7,0) 60%)}
.ld5__hud{position:absolute;z-index:3;top:112px;left:var(--page);display:grid;gap:3px;color:rgba(238,240,235,.84);text-shadow:0 1px 14px rgba(6,8,7,.6)}
.ld5__hud b{font-weight:inherit;color:#fff}
.ld5__bas{position:absolute;z-index:3;left:0;right:0;bottom:118px;padding-inline:var(--page);display:grid;justify-items:start;gap:16px}
.ld5__etat{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ld5__etat .v5-rel{height:30px;display:inline-flex;align-items:center;gap:.4em;padding:0 12px;border-radius:9px;color:#f4f5f1;
  background:rgba(6,8,7,.62);box-shadow:inset 0 0 0 1px rgba(238,240,235,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ld5__etat .v5-rel b{font-weight:inherit;color:#fff}
.ld5__direct{display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 11px;border-radius:9px;background:#89f421;color:#0a0a0a;
  font-family:var(--f-micro,var(--f-ui));font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.ld5__direct i{width:7px;height:7px;border-radius:50%;background:#0a0a0a}
.ld5__nom{margin:0;max-width:16ch;font-family:var(--f-display);font-weight:600;font-size:clamp(44px,6.4vw,104px);line-height:.92;letter-spacing:-.03em;
  text-transform:uppercase;color:#fff;text-wrap:balance;text-shadow:0 2px 40px rgba(6,8,7,.5)}
.ld5 .obj{margin:0;display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border-radius:12px;font-size:14.5px;line-height:1.35;color:#f4f5f1;
  background:rgba(6,8,7,.46);box-shadow:inset 0 0 0 1px rgba(238,240,235,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ld5 .obj.mp{color:#0a0a0a;background:#89f421;box-shadow:none;font-weight:600}
.ld5 .hero-cta{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:10px}
body.v5 .ld5 .btn.pri{color:#0a0a0a;background:linear-gradient(180deg,#ffffff,#dfe2dd)}
body.v5 .ld5 .btn.pri:hover,body.v5 .ld5 .btn.pri .btn-ico{color:#0a0a0a}
body.v5 .ld5 .btn:not(.pri){color:#f4f5f1;background:rgba(6,8,7,.5);box-shadow:inset 0 0 0 1px rgba(238,240,235,.34);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.v5 .ld5 .btn:not(.pri):hover{color:#fff;background:rgba(6,8,7,.66)}
body.v5 .ld5 .btn:not(.pri) .btn-ico{color:#f4f5f1;background:rgba(238,240,235,.14);box-shadow:none}
.ld5__regle{position:absolute;z-index:3;left:0;right:0;bottom:0;height:84px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:stretch;
  padding-inline:var(--page);background:rgba(6,8,7,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(238,240,235,.18)}
.ld5__tout{display:flex;align-items:center;gap:9px;padding-right:26px;color:rgba(238,240,235,.86);text-decoration:none;white-space:nowrap}
.ld5__tout:hover{color:#fff}
.ld5__rangs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-width:0}
.ld5__rangs .mr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 20px;min-width:0;
  border:0;border-left:1px solid rgba(238,240,235,.16);background:none}
.ld5__rangs .mr:nth-child(n+6){display:none}
body.v5 .ld5__rangs .mr .rk{font-family:var(--f-chiffre);font-weight:800;font-size:15px;letter-spacing:.02em;color:rgba(238,240,235,.7)}
body.v5 .ld5__rangs .mr .nm{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:-.005em;text-transform:uppercase;color:#f4f5f1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.v5 .ld5__rangs .mr .pt{font-family:var(--f-chiffre);font-weight:800;font-size:26px;line-height:1;color:#fff}
body.v5 .ld5__rangs .mr.lead .rk,body.v5 .ld5__rangs .mr.lead .pt{color:#89f421}
body.v5 .ld5 + .g5{position:relative;z-index:3;margin-top:0}
@media (max-width:980px){
  .ld5__rangs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ld5__rangs .mr:nth-child(n+4){display:none}
}
@media (max-width:640px){
  .ld5{min-height:0;padding-top:300px;display:grid}
  .ld5__plan{top:0;height:420px;transform:none}
  .ld5__voile{top:230px;bottom:0;height:auto;background:linear-gradient(180deg,rgba(6,8,7,0) 0,rgba(6,8,7,.92) 150px,#060807 200px)}
  .ld5{background:#060807}
  .ld5__hud{top:84px;left:var(--gut)}
  .ld5__bas{position:relative;bottom:auto;padding:0 var(--gut) 22px}
  .ld5__nom{font-size:clamp(34px,11vw,52px)}
  .ld5__regle{position:relative;height:auto;grid-template-columns:1fr;padding:0}
  .ld5__tout{padding:12px var(--gut);border-bottom:1px solid rgba(238,240,235,.16)}
  .ld5__rangs{grid-template-columns:1fr}
  .ld5__rangs .mr{padding:11px var(--gut);border-left:0;border-top:1px solid rgba(238,240,235,.12)}
  .ld5__rangs .mr:first-child{border-top:0}
  .ld5__rangs .mr:nth-child(n+4){display:grid}
  .ld5__rangs .mr:nth-child(n+6){display:none}
}
@media (prefers-reduced-motion:reduce){ .ld5__plan{transform:scale(1.03)} }

/* Le bloc qui ouvre la vidéo du fondateur au défilement : autour de la vidéo, la vallée dans la pénombre, pas un noir plein. */
body.v5 .home-se .sk-se-stage{background:linear-gradient(rgba(6,8,7,.74),rgba(6,8,7,.82)),url("/static/players/scenes/col-960.webp?v=2") center/cover no-repeat #0a0c0b}

/* --- LA MASCOTTE AU CENTRE du héros (« sur le site, il faut qu'il soit assez central, c'est vraiment la mascotte »).
   Son illustration, entière et nette, devant le film ; le bas de son buste passe derrière la règle des chiffres (pas
   de fondu : il avait lu un fondu comme « une grande barre »). Elle respire, et suit un peu le pointeur. */
.h5__mascotte{position:absolute;left:50%;bottom:76px;z-index:6;height:min(61vh,600px);aspect-ratio:764/941;translate:-50% 0;pointer-events:none}
.h5__mascotte::before{content:"";position:absolute;left:52%;top:30%;z-index:-1;width:150%;aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(137,244,33,.2),rgba(137,244,33,.06) 50%,rgba(137,244,33,0) 72%)}
.h5__mascotte img{display:block;width:100%;height:100%;max-width:none;filter:drop-shadow(0 26px 34px rgba(4,6,5,.5));
  transform:translate3d(calc(var(--mx,0) * 9px),calc(var(--my,0) * 4px),0);will-change:transform}
.h5--scene .h5__bas,.h5--scene .h5__regle,.h5--scene .h5__hud,.h5--scene .h5__han,.h5--scene .h5__croix{z-index:7}
.v5js .h5__mascotte{opacity:0;translate:-50% 34px;transition:opacity 900ms var(--v5-sortie) 250ms,translate 1300ms var(--v5-sortie) 250ms}
.v5js .h5.is-la .h5__mascotte{opacity:1;translate:-50% 0}
.h5.is-la .h5__mascotte img{animation:h5-respire 7s ease-in-out 1.6s infinite}
@keyframes h5-respire{0%,100%{translate:0 0} 50%{translate:0 -7px}}
@media (max-width:1180px){ .h5__mascotte{height:min(52vh,480px)} }
@media (max-width:820px){
  .h5__mascotte{left:50%;top:168px;bottom:auto;z-index:4;height:372px}
  .h5__mascotte::before{display:none}
  .v5js .h5__mascotte{transition-delay:120ms}
}
@media (prefers-reduced-motion:reduce){
  .h5.is-la .h5__mascotte img{animation:none}
  .v5js .h5__mascotte{translate:-50% 0;transition:opacity 500ms linear}
}

/* --- LES VAINQUEURS DEVANT LES DOUILLES : le plan du champ de cartouches chromées tient la droite du cadre et se
   fond dans le noir vers les noms (ils restent sur du sombre). Il glisse un peu au défilement. */
.g5__plan{position:absolute;left:0;top:-7%;z-index:0;width:100%;height:114%;object-fit:cover;object-position:78% 70%;pointer-events:none;opacity:.74;
  transform:translate3d(0,var(--fy,0px),0);will-change:transform;
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.32) 66%,#000 93%);mask:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.32) 66%,#000 93%)}
.g5 > .g5__tete,.g5 > .g5__mot,.g5 > .g5__liste{position:relative;z-index:3}
.g5 .g5__mot{text-shadow:0 2px 30px rgba(4,6,5,.5)}
body.v5 .g5.v5-plaque--nuit .g5__ligne .v5-rel{color:rgba(241,242,237,.9);text-shadow:0 1px 10px rgba(4,6,5,.9)}
@media (max-width:820px){
  .g5__plan{opacity:.5;object-position:84% 70%;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 20%,#000 96%);mask:linear-gradient(90deg,rgba(0,0,0,0) 20%,#000 96%)}
}
@media (prefers-reduced-motion:reduce){ .g5__plan{transform:none} }
body.v5 .g5.v5-plaque--nuit .g5__ligne:hover .v5-rel,body.v5 .g5.v5-plaque--nuit .g5__ligne:focus-visible .v5-rel{color:rgba(10,10,10,.7);text-shadow:none}

/* --- LA MASCOTTE DU DIRECT (« sur l'écran d'accueil, obligé, il y a ma mascotte, en gros, avec l'animation derrière ») :
   devant le film du monogramme, le buste arrêté par la règle des cinq premiers. Le nom du tournoi reste à gauche et
   passe devant elle s'il est long. Au téléphone, elle est en haut, dans le plan, et se dissout avant le nom. */
.ld5__masc{--masc-x:72%;--masc-b:84px;--masc-h:min(70svh,660px,48vw)}
@media (max-width:1180px){ .ld5__masc{--masc-x:76%;--masc-h:min(56svh,500px,44vw)} }
@media (max-width:820px){
  .ld5__masc{--masc-x:50%;--masc-h:272px;bottom:auto;top:96px}
  .ld5__masc::before{display:none}
  .ld5__masc img{-webkit-mask:linear-gradient(180deg,#000 0,#000 64%,rgba(0,0,0,0) 96%);mask:linear-gradient(180deg,#000 0,#000 64%,rgba(0,0,0,0) 96%)}
}