/* ============================================================================
   SKLD — page TOURNOIS (annuaire du circuit). Chargée UNIQUEMENT par tournois.html.  ?v=5
   REFONTE DRASTIQUE « DARK PREMIUM / AAA » (retour fondateur) :
     - HÉRO cinématique sur SOCLE SOMBRE OPAQUE (vidéo skld-anim ; poster statique retiré :
       plus d'image SKLD qui « disparaît »). Le fond WebGL 'acid' vit AUTOUR, jamais derrière.
     - LE CIRCUIT EN CHIFFRES : bande de stats count-up (stagger) — chrome, pas lime.
     - ANNUAIRE = grille ChromaGrid (révélation au curseur) + PLAQUES 3D (tilt) cohérentes
       avec la home : socle charbon/fir OPAQUE, hairline fine, filigrane de marque SKLD
       (brand-glyph) sur les plaques sans bannière. Filigrane géant en parallaxe (le fond
       vit autour). Storytelling final : ScrollExpand (média qui se déploie).
   Hiérarchie : 1 « wow » fort par section (héro=vidéo+titre / stats=compteurs /
     grille=ChromaGrid+tilt / finale=ScrollExpand). Le reste est calme.
   Palette : OLED / lime #9dff3c ACCENT LÉGER (1 gros lime/vue = le CTA) / vert sapin
     DOMINANT / chrome (#e9f0ea→#aab4ad→#6f7a72) / crème froide. ZÉRO orange/ambre. ZÉRO emoji.
   Grille/spacing 8pt. transform+opacity only. easing cubic-bezier(.32,.72,0,1).
   Respecte prefers-reduced-motion ET ?fx=off (.sk-fx-off). Les titres ne disparaissent JAMAIS.
   ========================================================================= */

.trn{ --trn-ease:cubic-bezier(.32,.72,0,1); }

/* Eyebrows refroidis (jamais de vert criard) : texte gris, le tiret lime global reste l'accent. */
.trn-eye{ color:var(--muted); }

/* ============================================================ HÉRO / BANNIÈRE HAUTE */
.trn-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  min-height:clamp(320px,40vw,468px);
  /* SOCLE SOMBRE OPAQUE : le fond WebGL 'acid' ne passe PAS derrière la vidéo. */
  background:
    radial-gradient(120% 120% at 84% -12%, rgba(16,34,22,.5), transparent 56%),
    linear-gradient(180deg, #05080b 0%, #04060a 60%, var(--bg) 100%);
  border-bottom:1px solid var(--line2);
}

/* Média de fond (skld-anim.mp4) : cover, opacité tranchée, luminosity. */
.trn-hero__media{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.trn-hero__media video{
  position:absolute;top:50%;left:50%;
  width:100%;height:100%;min-width:100%;min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;object-position:78% 30%;   /* sujet lumineux poussé à DROITE, loin du titre */
  opacity:.22;mix-blend-mode:luminosity;
  filter:contrast(1.05) saturate(.9);
}

/* Fondu qui assied le texte (gauche + bas) + soupçon de lumière FROIDE en haut.
   Zone bas-gauche (où vit TOUT le texte) tenue sombre ; le média reste vif en haut-droite. */
.trn-hero__fade{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 88% at 90% -6%, rgba(120,150,135,.10), transparent 58%),
    linear-gradient(90deg, var(--bg) 0%, rgba(5,8,6,.5) 30%, rgba(5,8,6,.18) 56%, transparent 82%),
    linear-gradient(180deg, rgba(4,6,8,.42) 0%, rgba(4,6,8,.12) 26%, rgba(4,6,8,.82) 70%, var(--bg) 100%);
}
/* Grille « circuit » très discrète (texture esport statique, masquée en haut-droite). */
.trn-hero__fade::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:
    linear-gradient(90deg, rgba(233,240,234,.6) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(233,240,234,.6) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask:radial-gradient(118% 118% at 82% 0, #000, transparent 60%);
          mask:radial-gradient(118% 118% at 82% 0, #000, transparent 60%);
}
/* Liseré de pied de bannière (raccord vers le contenu) : chrome dominant, soupçon de lime. STATIQUE. */
.trn-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(111,122,114,0) 0%, rgba(233,240,234,.42) 32%, rgba(157,255,60,.55) 60%, rgba(111,122,114,0) 100%);
}

/* Contenu : une seule entrée douce (transform+opacity), robuste sans JS. */
.trn-hero__in{
  position:relative;z-index:2;
  padding-block:clamp(28px,3.4vw,40px);
  max-width:74ch;
  opacity:0;
  animation:trn-hero-in .8s var(--trn-ease) forwards;
}
/* Socle sombre opaque ancré bas-gauche DERRIÈRE le texte : garantit le contraste AA du titre
   et du sous-titre quel que soit le média (le fondu vit AUTOUR, le média reste vif à droite). */
.trn-hero__in::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-12% -28% -24% -10%;
  background:radial-gradient(120% 116% at 14% 76%, rgba(3,5,7,.9), rgba(3,5,7,.52) 44%, transparent 72%);
}
@keyframes trn-hero-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.trn-hero .eye{margin-bottom:14px}

/* Titre héro : dégradé CHROME -> crème STABLE (le lime = le CTA). Module .sk-gradtext. */
.trn-hero__title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(48px,8.8vw,108px);
  line-height:.88;letter-spacing:-.035em;margin:2px 0 0;
  --sk-grad-a:#cdd6cf;   /* chrome clair */
  --sk-grad-b:#8f9a92;   /* chrome médian */
  --sk-grad-c:#eef2ef;   /* crème froide */
}
.trn-hero__sub{
  color:#dfe7d7;font-size:clamp(15px,2.1vw,17px);line-height:1.6;
  max-width:56ch;margin:16px 0 24px;
}
.trn-hero__cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ============================================================ LE CIRCUIT EN CHIFFRES */
.trn-hero + .trn-statsec{ padding-top:clamp(28px,3.2vw,44px); padding-bottom:0; }
.trn-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.trn-stat{
  position:relative;padding:20px 22px;border-radius:16px;overflow:hidden;
  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 18px 40px -30px rgba(0,0,0,.85);
}
/* liseré latéral chrome froid (fini la barre lime répétée) */
.trn-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}
.trn-stat__n{
  display:block;font-family:var(--disp);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(30px,4.2vw,46px);line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(180deg,var(--cream) 6%,#c3ccc6 52%,#8f9a92 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.trn-stat__l{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============================================================ SECTION ANNUAIRE */
/* overflow-x:clip : le filigrane déborde volontairement (bleed) — on l'empêche de créer
   un défilement horizontal, sans clipper les ombres verticales des plaques. */
.trn-listsec{position:relative;isolation:isolate;overflow-x:clip}
.trn-statsec + .trn-listsec{ padding-top:clamp(28px,3.4vw,46px); }
.trn-listsec .wrap{position:relative;z-index:1}
.trn-listsec .sec-head{margin-bottom:clamp(16px,2vw,22px)}

/* Filigrane de marque géant : le fond « vit autour » du contenu. Très discret, en parallaxe. */
.trn-watermark{
  position:absolute;z-index:0;top:-4%;right:-6%;width:min(720px,64vw);
  pointer-events:none;opacity:.05;
  -webkit-mask:radial-gradient(80% 80% at 60% 40%, #000 20%, transparent 78%);
          mask:radial-gradient(80% 80% at 60% 40%, #000 20%, transparent 78%);
}
.trn-watermark img{display:block;width:100%;height:auto;
  filter:grayscale(.4) contrast(1.02) brightness(.9);mix-blend-mode:screen}

.trn-count{font-variant-numeric:tabular-nums lining-nums;color:var(--dim);white-space:nowrap}
.trn-count span{color:var(--muted)}
.trn-count span:first-child{color:var(--green);text-shadow:0 0 12px rgba(157,255,60,.22)}

/* ============================================================ Barre de filtres (verre premium) */
.trn-filters{
  position:relative;display:flex;gap:12px;flex-wrap:wrap;align-items:end;
  margin-bottom:clamp(20px,2.6vw,30px);overflow:hidden;
  padding:clamp(16px,2vw,20px);
}
/* Filet chrome->lime en tête de la barre (rappel du liseré du hero). */
.trn-filters::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(233,240,234,.4) 28%, rgba(157,255,60,.4) 60%, transparent);
}
.trn-filters .fld label{letter-spacing:.02em}
.trn-filters .fld input,
.trn-filters .fld select{transition:border-color .2s var(--trn-ease), box-shadow .25s var(--trn-ease)}
.trn-filters .btn{align-self:end}

/* ============================================================ GRILLE ChromaGrid */
/* Le wrap porte la révélation (calques + halo). La grille interne garde sa mise en page. */
.trn-gridwrap{position:relative}
.trn-grid{grid-template-columns:repeat(3,1fr);gap:18px}

/* Révélation ChromaGrid ADOUCIE pour une page-annuaire (lisibilité AA au repos, pop net au survol).
   On surcharge le filtre global (plus doux) : les plaques restent lisibles avant même le survol. */
.trn-gridwrap .sk-chroma-overlay,
.trn-gridwrap .sk-chroma-fade{
  -webkit-backdrop-filter:grayscale(.58) brightness(.9);
          backdrop-filter:grayscale(.58) brightness(.9);
}
/* halo de carte : accent lime/chrome léger (défauts du module conservés, réaffirmés ici) */
.trn-gridwrap{ --sk-cg-lime:157,255,60; --sk-cg-chrome:210,224,230; }

/* On coupe l'entrée globale .grid>* (fadeUp) pour NE PAS entrer en conflit avec la transform
   inline du tilt : l'entrée passe par .reveal (opacité + légère montée), échelonnée par --i. */
.trn-grid > *{ animation:none !important; }
.trn-grid .reveal{ transition-delay:calc(min(var(--i,0), 8) * 45ms); }

/* ---------------------------------------------------------------- PLAQUE 3D (tilt) */
/* Coque = langage de cartes v2 (charbon/fir OPAQUE) MAIS sans .card (dont le hover
   `transform !important` écraserait le tilt). On assume donc le socle nous-mêmes. */
.tplaque{
  position:relative;display:block;padding:5px;border-radius:16px;
  text-decoration:none;color:inherit;
  background:linear-gradient(180deg,rgba(22,28,24,.62),rgba(8,11,9,.78));
  border:1px solid rgba(230,238,232,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.4),
    0 18px 40px -30px rgba(0,0,0,.85);
  /* tilt : reflet chrome froid discret (évite la sur-brillance avec le halo ChromaGrid). */
  --sk-tilt-gloss-a:.09;
  transition:border-color .3s var(--trn-ease), box-shadow .4s var(--trn-ease);
}
@media (hover:hover) and (pointer:fine){
  .tplaque:hover{ border-color:rgba(157,255,60,.20); }
}

/* Tête de plaque : plateau charbon, bezel chrome subtil. */
.tplaque .top{
  height:132px;position:relative;overflow:hidden;border-radius:14px;
  display:flex;align-items:flex-end;padding:16px;
  background:
    radial-gradient(120% 120% at 100% 0, rgba(20,34,24,.55), transparent 60%),
    linear-gradient(180deg,#0a0f0b,#070a07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(233,240,234,.05);
}

/* Filigrane de marque SKLD sur les plaques SANS bannière (« l'image SKLD sur les badges »). */
.trn-card__glyph{
  position:absolute;inset:0;pointer-events:none;
  background:url("/static/brand-glyph-black.jpg") center/135% no-repeat;
  opacity:.5;mix-blend-mode:screen;filter:grayscale(.25) contrast(1.04) brightness(.92);
  -webkit-mask:linear-gradient(180deg,#000 0%, rgba(0,0,0,.30) 100%);
          mask:linear-gradient(180deg,#000 0%, rgba(0,0,0,.30) 100%);
  transform:scale(1.01);
  transition:transform .5s var(--trn-ease), opacity .4s var(--trn-ease);
}
@media (hover:hover) and (pointer:fine){
  .tplaque:hover .trn-card__glyph{ transform:scale(1.05); opacity:.62 }
}

/* Bannière du tournoi (si présente) : cover, opacité réduite, luminosity, fondu bas. */
.trn-card__media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;pointer-events:none;mix-blend-mode:luminosity;border-radius:14px;
  transform:scale(1.02);
  transition:transform .5s var(--trn-ease), opacity .4s var(--trn-ease);
  -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%);
}
@media (hover:hover) and (pointer:fine){
  .tplaque:hover .trn-card__media{ transform:scale(1.05); opacity:.4 }
}

/* Reflet chrome qui traverse la tête au survol (transform only, sous les badges). */
.tplaque .top::before{
  content:"";position:absolute;inset:0;z-index:1;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(--trn-ease);
}
@media (hover:hover) and (pointer:fine){
  .tplaque:hover .top::before{ transform:translateX(120%) }
}

/* Badges : format (chrome), statut, date (chrome). z-index au-dessus des médias. */
.tplaque .top .fmt{
  position:relative;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);padding:5px 10px;border-radius:8px;
  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;
}
.tplaque .top .st{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:8px;color:var(--muted);
  background:rgba(4,6,4,.66);border:1px solid var(--line2);
}
.tplaque .top .st.registration_open,.tplaque .top .st.open{
  color:var(--green);border-color:rgba(157,255,60,.40);background:rgba(157,255,60,.07)}
.tplaque .top .st.running,.tplaque .top .st.live{
  color:var(--green);border-color:rgba(157,255,60,.42);background:rgba(157,255,60,.08)}
/* Puce « live » qui pulse (opacity only) devant le statut En direct. */
.tplaque .top .st.running::before,
.tplaque .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:trn-pulse 1.4s ease-in-out infinite;
}
@keyframes trn-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tplaque .top .bigd{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--disp);font-weight:700;font-size:44px;line-height:.8;letter-spacing:-.01em;
  color:rgba(233,240,234,.16);
  background:linear-gradient(180deg, rgba(233,240,234,.5), rgba(157,255,60,.16));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Corps de plaque */
.tplaque .body{padding:18px 16px 16px}
.tplaque .body h3{
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.15;
  margin:0 0 6px;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tplaque .meta{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tplaque .foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.tplaque .foot .p{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tplaque .foot .p.prize b{color:var(--green);font-weight:700}
.tplaque .foot .p.see b{
  color:var(--cream);font-weight:700;display:inline-block;
  transition:transform .28s var(--trn-ease);
}
@media (hover:hover) and (pointer:fine){
  .tplaque:hover .foot .p.see b{ transform:translateX(3px) }
}

/* ============================================================ État vide */
.trn-empty{
  color:var(--muted);font-size:15px;line-height:1.7;max-width:64ch;margin-top:4px;
  padding:24px 26px;border:1px solid var(--line);border-left:2px solid rgba(157,255,60,.42);
  border-radius:14px;background:linear-gradient(160deg, rgba(157,255,60,.035), var(--panel));
}
.trn-empty a{color:var(--green)}

/* ============================================================ STORYTELLING : ScrollExpand */
/* Socle OLED, cadre du média cohérent, titre chrome/crème (le module gère le mouvement). */
.trn-se{ border-top:1px solid var(--line); }
.trn-se .sk-se-stage{ background:var(--bg); }
.trn-se .sk-se-el{ filter:contrast(1.04) saturate(.92) brightness(.92); }
.trn-se .sk-se-kicker{ color:var(--muted); letter-spacing:.42em; }
.trn-se .sk-se-title{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(180deg,#e8eee9 4%,#aeb8b1 58%,#7f8a82 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.trn-se .sk-se-copy [data-se-reveal]{ color:var(--cream); }
.trn-se .sk-se-copy [data-se-reveal] strong{ color:var(--green); }

/* ============================================================ Responsive */
@media (max-width:1080px){
  .trn-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .trn-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .trn-hero{min-height:clamp(260px,64vw,360px)}
  .trn-hero__in{max-width:none;padding-block:24px}
  .trn-hero__sub{max-width:none}
  .trn-hero__cta{width:100%}
  .trn-hero__cta .btn{flex:1;justify-content:center}
  .trn-watermark{width:min(520px,90vw);top:-2%;right:-14%;opacity:.04}
  .trn-filters{gap:10px}
  .trn-filters .fld{min-width:0;flex:1 1 100%}
  .trn-filters .btn{flex:1}
  .trn-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .trn-stats{grid-template-columns:1fr}
}

/* ============================================================ Coupures d'accessibilité */
@media (prefers-reduced-motion:reduce){
  .trn-hero__in{opacity:1;animation:none;transform:none}
  .trn-card__media,.trn-card__glyph,
  .tplaque .top::before,
  .tplaque .foot .p.see b,
  .trn-watermark{transition:none}
  .tplaque .top .st.running::before,
  .tplaque .top .st.live::before{animation:none}
}
/* Kill-switch ?fx=off : entrée figée nette, tilt/chromagrid déjà en mode statique via les modules. */
.sk-fx-off .trn-hero__in{opacity:1;animation:none;transform:none}
.sk-fx-off .trn-hero__media video{opacity:.22}
.sk-fx-off .tplaque .top .st.running::before,
.sk-fx-off .tplaque .top .st.live::before{animation:none}

/* ============================================================ Chez les structures
   Bloc à part, sous l'annuaire du circuit : tournois annoncés par des structures.
   Lecture calme (pas de tilt, pas de plaque), un liseré sapin, et le bouton
   mène CHEZ EUX. Palette inchangée : encre, sapin, lime, crème. */
.trn-invsec{padding-top:28px;border-top:1px solid rgba(157,255,60,.14)}
.trn-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.trn-inv__c{position:relative;padding:16px 18px 16px;border:1px solid rgba(157,255,60,.16);border-radius:14px;
  background:linear-gradient(180deg,rgba(12,20,10,.72),rgba(6,10,6,.9));
  transition:border-color .5s cubic-bezier(.32,.72,0,1),transform .5s cubic-bezier(.32,.72,0,1)}
.trn-inv__c:hover{border-color:rgba(157,255,60,.42);transform:translateY(-2px)}
.trn-inv__who{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px;letter-spacing:.04em}
.trn-inv__who img,.trn-inv__crest{width:26px;height:26px;border-radius:7px;object-fit:cover;background:rgba(157,255,60,.12);
  display:inline-grid;place-items:center;font:800 10px/1 var(--mono,monospace);color:var(--green)}
.trn-inv__who a{color:var(--cream);text-decoration:none;font-weight:700}
.trn-inv__who a:hover{color:var(--green)}
.trn-inv__st{margin-left:auto;font:700 10px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;
  padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--muted)}
.trn-inv__st.registration_open{border-color:rgba(157,255,60,.5);color:var(--green)}
.trn-inv__st.running{border-color:rgba(157,255,60,.7);color:var(--green)}
.trn-inv__c h3{margin:0 0 6px;font-size:18px;line-height:1.15}
.trn-inv__c h3 a{color:#fff;text-decoration:none}
.trn-inv__c h3 a:hover{color:var(--green)}
.trn-inv__meta{margin:0 0 14px;font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.trn-inv__cta .btn{width:100%;justify-content:center}
@media (max-width:560px){.trn-inv{grid-template-columns:1fr}}