/* =====================================================================
   SKLD · PAGE ACCUEIL (home.html) — REFONTE DRASTIQUE « VITRINE AAA++ ».
   Direction Fable : dark premium — esport — scroll storytelling.
   Refonte de ce pass :
   - Hero cinématique PROPRE : plus de plaque logo-vidéo au milieu (carré noir
     retiré). Titre = TEXT-PRESSURE stable (réf. page Top Killers), lisible,
     ne disparaît jamais. Fond bg-home.mp4 discret + LiquidEther autour. Aucun
     point lumineux blanc (palette LiquidEther assombrie côté markup).
   - DENSITÉ par le SCROLL : section « 3 temps » (cartes spotlight, cascade) +
     ScrollExpand cinématique (média qui se déploie) + FlowingMenu « Explorer ».
   - PLAQUES DE TOURNOI = même langage que la page /tournois (cohérence stricte) :
     média en tête, badge FORMAT chrome, date chrome, statut sapin, sheen au survol.
   Grille 8pt (16/24/32/48). Contraste AA. transform+opacity only.
   Palette STRICTE : OLED / vert sapin dominant / lime #9dff3c ACCENT LÉGER
   (1 gros lime/vue = le CTA) / chrome + crème froide. ZÉRO orange/ambre, ZÉRO
   emoji. Easing cubic-bezier(.32,.72,0,1). Respecte reduced-motion + ?fx=off.
   Ne redéfinit PAS les modules globaux (base.html / skald.css / polish).
   ===================================================================== */

:root{ --hz:cubic-bezier(.32,.72,0,1); }

/* utilitaire a11y (repli lecteur d'écran) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Eyebrows SOBRES (retour fondateur : plus de vert mono criard) — chrome froid,
   sans halo. S'applique aux .eye de la page accueil uniquement. */
.home-hero .eye,.sec .eye{color:#9aa89c}
.home-hero .eye::before,.sec .eye::before{
  background:linear-gradient(90deg,rgba(230,238,232,.55),transparent);box-shadow:none}

/* =====================================================================
   1) HÉROS EN DIRECT (.lh) — branche fonctionnelle, langage charbon-fir.
   ===================================================================== */
.lh{position:relative;overflow:hidden;border-bottom:1px solid var(--line);padding:clamp(48px,6vw,80px) 0}
.lh::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(56vw 46vh at 82% -10%,rgba(26,74,40,.20),transparent 62%)}
.lh .wrap{position:relative;z-index:2}
.lh-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.lh h1{font-size:clamp(38px,6vw,72px);margin:12px 0;letter-spacing:-.03em}
.lh .obj{display:inline-flex;align-items:center;gap:11px;margin-top:8px;padding:11px 18px;border-radius:14px;
  background:rgba(157,255,60,.07);border:1px solid rgba(157,255,60,.30);
  font-family:var(--mono);font-size:14px;color:var(--green)}
.lh .mp{background:linear-gradient(100deg,rgba(157,255,60,.16),rgba(233,240,234,.05));
  border-color:rgba(157,255,60,.55);color:var(--cream);
  box-shadow:0 0 0 1px rgba(157,255,60,.16),0 10px 34px -14px rgba(157,255,60,.42)}
.lh-meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}
.mini{border:1px solid rgba(230,238,232,.07);border-radius:20px;padding:6px;
  background:linear-gradient(180deg,rgba(22,28,24,.55),rgba(8,11,9,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 24px 60px -30px rgba(0,0,0,.85)}
.mini .h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.mini .h .t{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:9px;align-items:center}
.mini .in{border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(14,18,13,.5),rgba(6,9,6,.62))}
.mr{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:11px 16px;
  border-top:1px solid rgba(230,238,232,.05);transition:transform .7s var(--hz)}
.mr .rk{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--dim);text-align:center}
.mr.lead{background:linear-gradient(90deg,rgba(157,255,60,.08),transparent 65%)}
.mr.lead .rk{color:var(--green)}
.mr .nm{font-family:var(--disp);font-weight:600;font-size:16px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr .pt{font-family:var(--disp);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.mr.lead .pt{color:var(--green)}
@media(max-width:880px){.lh-grid{grid-template-columns:1fr}}

/* =====================================================================
   2) HÉROS PAR DÉFAUT — cinématique propre. Titre TEXT-PRESSURE stable.
   Aligné sur la MÊME grille (.wrap) que les sections (bord gauche commun).
   ===================================================================== */
.home-hero{position:relative;min-height:clamp(620px,88vh,880px);display:flex;align-items:center;overflow:hidden}
.home-hero .wrap{max-width:var(--maxw);padding-inline:var(--gut)}

/* FOND : bg-home.mp4 (glyph chrome qui tourne) — discret, à droite, fondu vers la
   gauche (là où vit le texte). Socle sombre : le média vit AUTOUR, jamais sous le texte. */
.home-bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% center;
  opacity:.22;mix-blend-mode:screen;pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.16) 36%,#000 74%),
               linear-gradient(180deg,#000 60%,transparent 100%);
          mask:linear-gradient(90deg,transparent 4%,rgba(0,0,0,.16) 36%,#000 74%),
               linear-gradient(180deg,#000 60%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:880px){.home-bgvid{opacity:.16;object-position:74% center}}

/* LiquidEther (WebGL) — vit AUTOUR du contenu, discret ; fade-in par le module. */
.hero-liquid{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease}
.hero-liquid.liquid-on{opacity:.26}

/* Contenu à GAUCHE, rythme resserré. Le scrim de lisibilité vient de .hero-xl::before (polish). */
.home-hero__in{position:relative;z-index:2}
.home-hero .status-row{margin-bottom:16px}
.home-hero .eye{margin-bottom:12px}
.home-lede{max-width:54ch;margin:20px 0 28px;color:#e2ecda;font-size:clamp(15px,1.7vw,17px);line-height:1.62}

/* TITRE : text-pressure (chrome au repos -> lime sous le curseur), stable, jamais effacé.
   Grande échelle wordmark, une seule ligne. */
.home-title{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.9;font-size:clamp(58px,12.5vw,176px);margin:4px 0 0}
.home-title .sk-tp__l{will-change:transform,color}

/* STATS du circuit (data-countup) — chrome/crème, jamais lime. */
.home-stats{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 32px}
.home-stat{position:relative;flex:1 1 160px;min-width:140px;padding:18px 20px;border-radius:16px;
  border:1px solid rgba(230,238,232,.07);
  background:linear-gradient(180deg,rgba(22,28,24,.55),rgba(8,11,9,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden}
.home-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(230,238,232,.5),transparent);opacity:.6}
.home-stat__num{display:block;font-family:var(--disp);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(30px,4.4vw,46px);line-height:1;font-variant-numeric:tabular-nums lining-nums;
  color:var(--cream);
  background:linear-gradient(120deg,var(--cream) 0%,#c3ccc6 52%,#8f9a92 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.home-stat__lbl{display:block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.home-hero .hero-cta{margin-top:4px}

/* Indice de scroll (jamais blanc plein) — puce lime qui « tombe ». */
.home-scroll{display:inline-flex;margin-top:36px;width:24px;height:38px;border-radius:13px;position:relative;
  border:1.5px solid rgba(230,238,232,.26)}
.home-scroll__dot{position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;
  background:var(--green);animation:home-bob 1.7s var(--hz) infinite}
@keyframes home-bob{0%,100%{transform:translateY(0);opacity:.35}45%{transform:translateY(12px);opacity:1}}

/* Enchaînement direct dans la 1re section (pas de bande vide). */
.home-hero{border-bottom:1px solid var(--line)}
.home-hero+.sec,.lh+.sec{padding-top:clamp(34px,4vw,56px)}

/* =====================================================================
   3) TITRES DE SECTION — dégradés STABLES (jamais qui disparaissent).
   Variante sapin->chrome pour un titre ; les autres restent crème (global).
   ===================================================================== */
.gt-fir{--sk-grad-a:#4fbf1e;--sk-grad-b:#aab4ad;--sk-grad-c:#eef2ef}

/* =====================================================================
   4) STORYTELLING — « le circuit en 3 temps » (cartes spotlight, cascade)
   ===================================================================== */
.home-steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{position:relative;border-radius:18px;padding:28px 24px 26px;isolation:isolate;
  border:1px solid rgba(230,238,232,.07);
  background:linear-gradient(180deg,rgba(22,28,24,.55),rgba(8,11,9,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.4),0 18px 40px -30px rgba(0,0,0,.85);
  transition:transform .45s var(--hz),border-color .3s ease,box-shadow .45s ease}
.feat:hover{transform:translateY(-4px);border-color:rgba(157,255,60,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 60px -28px rgba(0,0,0,.9),0 0 0 1px rgba(157,255,60,.06)}
.feat__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:#dfe7d7;
  border:1px solid var(--line2);background:linear-gradient(180deg,rgba(26,34,26,.8),rgba(6,10,7,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:color .3s ease,border-color .3s ease}
.feat__ico svg{width:26px;height:26px}
.feat:hover .feat__ico{color:var(--green);border-color:rgba(157,255,60,.30)}
.feat__n{position:absolute;top:18px;right:22px;font-family:var(--disp);font-weight:700;line-height:1;
  font-size:clamp(30px,3vw,40px);color:rgba(230,238,232,.09);letter-spacing:-.02em}
.feat h3{font-size:19px;margin:20px 0 8px;letter-spacing:-.01em}
.feat p{color:#c4cdc4;font-size:14px;line-height:1.6;max-width:34ch}

/* =====================================================================
   5) SCROLLEXPAND cinématique — surcharges DA (le module gère le pin/scrub).
   Kicker SOBRE (pas lime), média assis sur socle sombre, cadre encadré.
   ===================================================================== */
.home-se{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-se .sk-se-el{filter:contrast(1.03) saturate(.9) brightness(.92)}
.home-se .sk-se-kicker{color:#aeb8ae;letter-spacing:.34em}
.home-se .sk-se-title{letter-spacing:-.03em}
.home-se .sk-se-copy [data-se-reveal]{color:#e6efe0}
.home-se .sk-se-copy [data-se-reveal] strong{color:var(--green)}
.home-se .sk-se-hint{border-color:rgba(230,238,232,.28)}

/* =====================================================================
   6) PROCHAIN ÉVÉNEMENT (.home-next) — panneau KV spotlight, calme.
   ===================================================================== */
.home-next .grid.g4{gap:16px}
.home-next .panelcard{isolation:isolate}
.home-next .kv{border-bottom:0;padding:4px 0}

/* =====================================================================
   7) VAINQUEURS RÉCENTS (.wcard) — langage de cartes v2.
   ===================================================================== */
.wcard{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;isolation:isolate;
  border:1px solid rgba(230,238,232,.07);
  background:linear-gradient(180deg,rgba(22,28,24,.55),rgba(8,11,9,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.4),0 18px 40px -30px rgba(0,0,0,.85);
  transition:transform .45s var(--hz),border-color .3s ease,box-shadow .45s ease}
.wcard:hover{transform:translateY(-4px);border-color:rgba(157,255,60,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 60px -28px rgba(0,0,0,.9),0 0 0 1px rgba(157,255,60,.06)}
.wcard:active{transform:translateY(-2px) scale(.995)}
.wcard .medal{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--green);
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(160deg,rgba(20,32,22,.9),rgba(6,12,8,.95));
  border:1px solid rgba(157,255,60,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.wcard .n{font-family:var(--disp);font-weight:700;font-size:19px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wcard .m{font-family:var(--mono);font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   8) BOARD « Meilleurs joueurs » — scroll horizontal propre sur mobile.
   ===================================================================== */
.home-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.home-tw table{min-width:520px}

/* =====================================================================
   9) PLAQUES DE TOURNOI (.home-tcard) — COHÉRENCE STRICTE avec /tournois.
   Média en tête (socle sombre), badge FORMAT chrome, date chrome, statut
   sapin (jamais orange), sheen chrome au survol, halo spotlight discret.
   ===================================================================== */
.home-tgrid{position:relative;grid-template-columns:repeat(3,1fr)}
.home-tgrid [data-spotlight]{--sk-spot-a:.09;--sk-spot-stop:54%;--sk-glow-w:1px}

.home-tcard .top{overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(233,240,234,.04)}

/* Média du tournoi (bannière, sinon glyph SKLD). Le noir du glyph se fond dans le
   socle charbon (luminosity) : AUCUN carré noir visible. */
.home-tcard__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.26;pointer-events:none;mix-blend-mode:luminosity;border-radius:14px;transform:scale(1.02);
  transition:transform .5s var(--hz),opacity .4s var(--hz);
  -webkit-mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.28) 100%);
          mask:linear-gradient(180deg,#000 0%,rgba(0,0,0,.28) 100%)}
.home-tcard__media--glyph{object-fit:cover;object-position:center;opacity:.18}
.home-tcard:hover .home-tcard__media{transform:scale(1.05);opacity:.34}

/* Reflet chrome qui traverse la tête au survol (transform only, sous les badges). */
.home-tcard .top::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:14px;
  background:linear-gradient(105deg,transparent 38%,rgba(233,240,234,.14) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .7s var(--hz)}
.home-tcard:hover .top::before{transform:translateX(120%)}

/* Halo de tête NEUTRALISÉ : chrome froid très discret (fini le lime générique répété). */
.home-tcard .top::after{background:radial-gradient(92% 120% at 100% 0,rgba(120,150,135,.07),transparent 58%)}

/* Badge FORMAT dé-limé (langage v2) : puce charbon opaque, hairline chrome, libellé crème. */
.home-tcard .top .fmt{color:var(--cream);background:rgba(6,9,6,.72);
  border:1px solid rgba(233,240,234,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);font-weight:600}

/* Date « bigd » en chiffres CHROME (soupçon de lime seulement en pied du dégradé). */
.home-tcard .top .bigd{color:rgba(233,240,234,.16);
  background:linear-gradient(180deg,rgba(233,240,234,.42),rgba(157,255,60,.14));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Statuts : socle opaque, « En direct » en sapin/lime (ZÉRO orange). */
.home-tcard .top .st{background:rgba(4,6,4,.66)}
.home-tcard .top .st.running,.home-tcard .top .st.live{
  color:var(--green);border-color:rgba(157,255,60,.42);background:rgba(157,255,60,.08)}
.home-tcard .top .st.running::before,.home-tcard .top .st.live::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:6px;vertical-align:middle;
  border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(157,255,60,.9);
  animation:home-pulse 1.4s ease-in-out infinite}
@keyframes home-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* La flèche « Voir » du pied glisse au survol (transform only). */
.home-tcard .foot .p b{display:inline-block;color:var(--green);transition:transform .28s var(--hz)}
.home-tcard:hover .foot .p b{transform:translateX(3px)}
.home-tcard .slots{height:4px}

/* =====================================================================
   10) EXPLORER — FlowingMenu (le module gère l'apparence ; on cadre la ligne).
   ===================================================================== */
.home-flow{--skf-row-min:4.6rem}

/* État vide « Tous les tournois » : panneau ample et centré. */
#tournois .panelcard{padding:clamp(32px,5vw,48px) 28px;text-align:center}
#tournois .panelcard p{max-width:none}

/* =====================================================================
   RESPONSIVE (<980 / <768 / <620) — single-column propre, rien qui déborde.
   ===================================================================== */
@media(max-width:980px){
  .home-steps__grid{grid-template-columns:1fr 1fr}
  .home-steps__grid .feat:last-child{grid-column:1 / -1}
}
@media(max-width:880px){
  .home-hero{min-height:auto;padding:104px 0 60px}
  .home-title{font-size:clamp(52px,16vw,120px)}
}
@media(max-width:620px){
  .home-hero{padding:92px 0 48px}
  .home-stats{gap:12px}
  .home-stat{flex:1 1 100%}
  .home-steps__grid{grid-template-columns:1fr}
  .feat{padding:24px 20px 22px}
  .feat p{max-width:none}
  .wcard{padding:14px 15px;gap:13px}
}

/* =====================================================================
   ACCESSIBILITÉ — reduced-motion + kill-switch ?fx=off.
   (ScrollExpand / TextPressure gèrent déjà leur propre repli statique.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .home-bgvid{opacity:.12}
  .home-scroll__dot{animation:none}
  .feat,.wcard{transition:none}
  .home-tcard__media,.home-tcard .top::before,.home-tcard .foot .p b{transition:none}
  .home-tcard .top .st.running::before,.home-tcard .top .st.live::before{animation:none}
}
.sk-fx-off .home-scroll__dot{animation:none}
.sk-fx-off .home-tcard .top .st.running::before,.sk-fx-off .home-tcard .top .st.live::before{animation:none}

/* TA LIGNE (la prochaine action du joueur) : gabarit _prochaine.html, feuille skld-prochaine-v5.css. */