/* ============================================================
   css/mc-hero.css — EN-TETE MASTERCLASS (objet partage) — 24/09/2026
   Un seul en-tete pour la page publique (masterclass.php) et la fiche
   combattant de l app (js/masterclass/masterclass.js). Les regles ci-dessous
   viennent telles quelles du bloc <style> de masterclass.php (25-30/08/2026),
   avec une seule difference : les couleurs sont portees par des variables
   locales (--h-*) fixees sur l en-tete, pour que l affiche reste une affiche
   sombre quel que soit le theme de l app (clair ou sombre). Sur la page
   publique les valeurs sont identiques a son :root, le rendu ne change pas.
   Le defilement est pilote par js/masterclass/mc-hero.js.

   Angle de 11,5 deg : c est l inclinaison du logo NEXT FIGHT XP,
   documentee dans la charte. Coupe du bandeau, motif de fleches,
   barre sous le titre en derivent tous — la marque tient l ecran
   meme quand aucune photo n est fournie.
   ============================================================ */
.hero { position:relative; overflow:hidden;
        --h-bg:#080A0C; --h-text:#E8ECF0; --h-text2:#9CA8B4; --h-text3:#5C6772;
        --h-border:#222A33; --h-red:#B71C1C; --h-accent:var(--accent, #B71C1C) }
/* Fondu enchaine (26/08/2026) : les diapositives sont superposees et
   ne varient que par leur opacite. C est le conteneur qui porte
   desormais la hauteur — des enfants en position absolute n en
   donnent plus au parent. */
.hero-track { position:relative }
.hero-slide { position:absolute; inset:0; transition:opacity .9s ease-in-out }
/* Sans JS, seule la premiere reste visible : les autres sont masquees
   par defaut, et la page garde donc une image d en-tete correcte. */
.hero-slide:not(:first-child) { opacity:0 }
.hero-track.js .hero-slide { opacity:0 }
.hero-track.js .hero-slide.on { opacity:1 }
.hero-img { position:absolute; inset:0; background-size:cover; background-position:center 22% }
.hero-fallback { position:absolute; inset:0; background:linear-gradient(128deg, var(--h-accent) -10%, #10151B 62%, #080A0C 100%) }
/* Trame directionnelle : le "flou directionnel" de la charte, rendu
   en lignes fines — un blur CSS coute cher au premier rendu mobile. */
.hero-grain { position:absolute; inset:0; background:repeating-linear-gradient(101.5deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px) }
.hero-dots { position:absolute; z-index:6; display:flex; gap:6px }
.hero-dots > i { width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.28); cursor:pointer; transition:background .25s }
.hero-dots > i.on { background:#fff }
/* Logo d en-tete : 76px pour rester lisible sur une photo chargee, avec une
   ombre portee car le fond est imprevisible. Fond transparent : un PNG
   detoure doit pouvoir se poser directement sur l image.
   30/08/2026 : les deux logos (icone de la masterclass a gauche, partenaire
   a droite) ont la MEME taille et la meme ligne de base. */
.aff-logo { width:76px; height:76px; object-fit:contain; border-radius:12px;
            filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)) }
/* Colonne de droite : badge d etat puis logo partenaire, en LIGNE. */
.aff-topright { display:flex; flex-direction:row; align-items:flex-start; gap:9px }
.dia-clublogo { position:absolute; top:15px; right:15px; z-index:6; width:76px; height:76px;
                object-fit:contain; border-radius:12px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)) }

/* ---- style AFFICHE : 4/5, la photo porte tout ---- */
.aff .hero-track { aspect-ratio:4/5 }
.aff-veil { position:absolute; inset:0; background:linear-gradient(178deg, rgba(8,10,12,.85) 0%, rgba(8,10,12,0) 26%, rgba(8,10,12,.14) 46%, rgba(8,10,12,.9) 88%, rgba(8,10,12,.98) 100%) }
.aff-top { position:absolute; top:0; left:0; right:0; padding:15px 17px; display:flex; justify-content:space-between; align-items:flex-start; z-index:5; gap:12px }
/* Bloc titre colle au bas de l image. */
.aff-titlewrap { position:absolute; left:16px; right:16px; bottom:14px; z-index:5 }
.aff-name-h1 { font-size:19px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--h-text); line-height:1.18; margin:0 }
.aff-meta { font-size:12.5px; color:var(--h-text2); margin-top:6px; letter-spacing:.2px }
.aff-who { position:absolute; left:16px; right:16px; bottom:96px; z-index:5 }
.aff-first { font-size:29px; font-weight:700; line-height:.92; letter-spacing:.8px; text-transform:uppercase; color:var(--h-text); opacity:.8; font-style:italic }
.aff-last { font-size:56px; font-weight:900; line-height:.86; letter-spacing:-.5px; text-transform:uppercase; color:#fff; font-style:italic; text-shadow:0 2px 26px rgba(0,0,0,.55) }
.aff-sub { font-size:12px; color:var(--h-text2); margin-top:9px; letter-spacing:.3px }
.aff-rule { height:3px; width:60px; background:var(--h-red); margin-top:11px; transform:skewX(-11.5deg) }
/* Bande d infos : dans le flux, sous l image, sur fond sombre. */
.aff-strip { display:flex; border-top:1px solid var(--h-border); border-bottom:1px solid var(--h-border) }
.aff-cell { flex:1; padding:12px 6px 13px; text-align:center; border-right:1px solid var(--h-border) }
.aff-cell:last-child { border-right:0 }
.aff-k { font-size:9.5px; letter-spacing:1.8px; color:var(--h-text3); text-transform:uppercase; font-weight:700 }
.aff-v { font-size:15px; font-weight:800; color:#fff; margin-top:3px }
.aff .hero-dots { top:15px; left:50%; transform:translateX(-50%) }

/* ---- style DIAGONALE : la marque porte, la photo decore ---- */
.dia-band { position:relative; height:238px; clip-path:polygon(0 0, 100% 0, 100% 82%, 0 100%) }
.dia .hero-track { height:238px }
.dia-motif { position:absolute; inset:-22% -12%; opacity:.06; transform:rotate(-11.5deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 120 120'%3E%3Cpolygon points='88,14 22,76 47,76 39,110 63,110' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:56px 56px }
.dia-veil { position:absolute; inset:0; background:linear-gradient(96deg, var(--h-bg) 2%, rgba(8,10,12,.6) 44%, rgba(8,10,12,.12) 100%) }
.dia-logo { position:absolute; top:15px; left:17px; z-index:6; width:76px; height:76px;
            object-fit:contain; border-radius:12px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)) }
.dia-badge { position:absolute; top:14px; right:15px; z-index:6 }
.dia-badge.beside { right:100px }
.dia-who { position:absolute; left:17px; bottom:40px; z-index:6; max-width:70% }
.dia-n { font-size:38px; font-weight:900; line-height:.88; text-transform:uppercase; color:#fff; font-style:italic; letter-spacing:-.2px }
.dia-r { font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--h-text2); margin-top:7px }
.dia .hero-dots { bottom:44px; right:17px }
.dia-body { padding:20px 17px 0 }
.dia-title { font-size:25px; font-weight:900; line-height:1.05; text-transform:uppercase; color:#fff; letter-spacing:.2px; margin:0 }
.dia-facts { margin-top:16px; border-top:1px solid var(--h-border) }
.dia-row { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--h-border) }
.dia-ic { width:22px; flex-shrink:0; color:var(--h-red); display:flex }
.dia-rk { font-size:10px; letter-spacing:1.8px; color:var(--h-text3); text-transform:uppercase; font-weight:700; width:62px; flex-shrink:0 }
.dia-rv { font-size:14px; font-weight:700; color:var(--h-text) }

@media (prefers-reduced-motion: reduce) { .hero-slide { transition:none } }

/* 26/08/2026 : la diapositive passe de 4/5 a 2/3 sur mobile, soit environ
   70 px de hauteur gagnes sur un ecran de 390 px. Le bloc de texte restant
   ancre en bas, tout ce gain profite a l image : le visage du champion n est
   plus coupe par le titre. Palier a 480 px et non 400 : les grands mobiles
   (Pro Max, 430 px) doivent en beneficier aussi. */
@media (max-width:480px) {
  .aff .hero-track { aspect-ratio:2/3 }
  /* 30/08/2026 : logos de l en-tete reduits sur mobile (76 px prenaient
     un tiers de la largeur). Le badge de statut suit le logo. */
  .aff-logo, .dia-logo, .dia-clublogo { width:52px; height:52px; border-radius:9px }
  .dia-badge.beside { right:76px }
}
/* Sur petit ecran, un titre de trois lignes remontait sur le nom du
   champion : on reduit l echelle du nom et on decale le bloc titre. */
@media (max-width:400px) {
  .aff-last { font-size:44px }
  .aff-first { font-size:25px }
  .aff-who { bottom:110px }
  .aff-name-h1 { font-size:17.5px }
  .dia-n { font-size:33px }
  .dia-title { font-size:22px }
}