/* ==========================================================================
   AURION E-SPORT — DESIGN SYSTEM
   Static HTML build (Phase 1). Tokens mirror the future Tailwind config.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  --background: #03060D;
  --background-secondary: #07162C;  /* bleu nuit */
  --surface: #0A1A33;                /* bleu marine assombri — cartes/texte (4,67:1 avec --text-muted, #0D2348 pur échouait AA) */
  --surface-hover: #123163;
  --card: rgba(255, 255, 255, 0.03);
  --aurion-blue: #2F8CFF;         /* bleu lumineux — accent, texte, bordures, halos, focus */
  --aurion-blue-strong: #1A4FA8;  /* bleu principal — bouton primaire, texte blanc (7,7:1) */
  --aurion-blue-deep: #0D2348;    /* bleu marine */
  --aurion-blue-glow: rgba(47, 140, 255, 0.35);
  --aurion-gold: #C9A45C;
  --aurion-gold-light: #E6CB8B;
  --aurion-gold-glow: rgba(201, 164, 92, 0.22);
  --text-primary: #F5F7FA;   /* ≥ 15:1 sur toutes les surfaces */
  --text-secondary: #9CA3AF; /* 6,98:1 au pire (surface-hover) */
  /* #6B7280 était joli mais illisible : 3,67:1 au pire — sous le minimum
     WCAG AA (4,5:1) pour du texte normal, alors qu'il porte les légendes,
     les états vides et les titres du footer. #7C8595 tient 4,77:1 partout
     tout en restant nettement en retrait de --text-secondary. */
  --text-muted: #7C8595;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --success: #22C55E;
  --danger: #EF4444;
  --live: #FF3040;

  --font-display: "Teko", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-shell: 1.75rem;
  --radius-core: calc(1.75rem - 0.5rem);
  --radius-pill: 999px;

  --container: 1240px;
  --nav-height: 76px;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* Transitions cinématiques entre pages (#35) — View Transitions cross-document.
   Amélioration progressive : ignoré par les navigateurs non compatibles
   (navigation classique conservée) et sauté automatiquement si
   prefers-reduced-motion. Supprime le flash blanc « clic → page ». */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

::selection { background: var(--aurion-blue-strong); color: #fff; }

/* Film grain — fixed, non-interactive */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. TYPOGRAPHY ---------- */
.display-xxl, .display-xl, h1, h2, h3, .h-display {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.display-xxl { font-size: clamp(4rem, 12vw, 11rem); }
.display-xl  { font-size: clamp(3rem, 8vw, 7.5rem); }
h1, .h1 { font-size: clamp(2.75rem, 6vw, 5rem); }
h2, .h2 { font-size: clamp(2.25rem, 4.5vw, 3.75rem); }
h3, .h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h4, .h4 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.05; }

.body-lg { font-size: 1.125rem; color: var(--text-secondary); }
.body-sm { font-size: 0.875rem; }
.label {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; color: var(--text-secondary);
}
.caption { font-size: 0.75rem; color: var(--text-muted); }

.text-gold { color: var(--aurion-gold); }
.text-blue { color: var(--aurion-blue); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* Eyebrow pill above section titles */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--aurion-gold);
}

/* ---------- 4. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(5rem, 10vw, 9rem); position: relative; }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head p { margin-top: 1rem; color: var(--text-secondary); max-width: 56ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

/* Claw separator — three angled slashes */
.claw-sep {
  display: flex; gap: 10px; align-items: center; margin: 0 0 1.25rem;
}
.claw-sep span {
  width: 26px; height: 3px; background: var(--aurion-gold);
  transform: skewX(-30deg); border-radius: 2px; opacity: 0.9;
}
.claw-sep span:nth-child(2) { width: 18px; opacity: 0.55; }
.claw-sep span:nth-child(3) { width: 10px; opacity: 0.3; }

/* Ambient glows */
.glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
.glow--blue { background: var(--aurion-blue-glow); width: 520px; height: 520px; }
.glow--gold { background: var(--aurion-gold-glow); width: 420px; height: 420px; }

/* Giant background word */
.bg-word {
  position: absolute; inset-inline: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(6rem, 22vw, 20rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.045);
  pointer-events: none; user-select: none; z-index: 0;
}

/* ---------- 5. BUTTONS ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.28s var(--ease-out-expo), background 0.5s var(--ease-premium),
              border-color 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
/* Balayage lumineux au survol (#34) — réactif au pointeur, jamais ambiant.
   overflow:hidden borne le reflet à la pilule ; le box-shadow n'est pas rogné. */
.btn { overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.28) 50%, transparent 65%);
  transform: translateX(-130%); opacity: 0;
  transition: transform 0.75s var(--ease-premium), opacity 0.3s ease;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

.btn .btn-ico {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transition: transform 0.5s var(--ease-premium);
}
.btn:hover .btn-ico { transform: translate(2px, -1px) scale(1.06); }
.btn .btn-ico svg { width: 14px; height: 14px; }

.btn--primary {
  background: var(--aurion-blue-strong); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 12px 40px -12px var(--aurion-blue-glow);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset, 0 16px 50px -10px var(--aurion-blue-glow); }
.btn--primary .btn-ico { background: rgba(255, 255, 255, 0.16); }

.btn--gold {
  background: linear-gradient(135deg, var(--aurion-gold), #AF8F50); color: #100D04;
  box-shadow: 0 12px 40px -12px var(--aurion-gold-glow);
}
.btn--gold .btn-ico { background: rgba(0, 0, 0, 0.14); }

.btn--ghost {
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02); color: var(--text-primary);
  backdrop-filter: none;
}
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); }
.btn--ghost .btn-ico { background: rgba(255, 255, 255, 0.07); }

.btn--sm { padding: 0.4rem 0.4rem 0.4rem 1.1rem; font-size: 0.6875rem; }
.btn--sm .btn-ico { width: 26px; height: 26px; }
.btn--sm .btn-ico svg { width: 11px; height: 11px; }

.btn--block { width: 100%; justify-content: space-between; }

/* Text link */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary); transition: color 0.4s var(--ease-premium);
}
.link-arrow:hover { color: var(--text-primary); }
.link-arrow svg { width: 12px; height: 12px; transition: transform 0.4s var(--ease-premium); }
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* ---------- 6. HEADER / NAVIGATION ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: var(--announce-h, 0); z-index: 100;
  transition: background 0.5s var(--ease-premium), border-color 0.5s var(--ease-premium),
              backdrop-filter 0.5s var(--ease-premium);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(3, 6, 13, 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--border-subtle);
}
.site-header .container {
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.75rem; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }

/* Official lion emblem (raster, dark render) — zoomed on the mark, edges
   lifted so it reads at small size on the dark header. */
.brand-mark--img {
  display: inline-block; position: relative; width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(201, 164, 92, 0.3);
  background-image: url("../brand/aurion-logo-256.png");
  background-size: 175%;
  background-position: 50% 26%;
  background-color: #08090C;
  filter: brightness(1.5) contrast(1.04);
  box-shadow: 0 0 22px -8px rgba(201, 164, 92, 0.35);
}
.brand-mark--lg { width: 64px; height: 64px; border-radius: 18px; }

/* Emblème vivant au survol (desktop) : le lion du header s'incline en 3D et
   s'illumine quand on le touche. Pas d'animation permanente — on le voit sur
   chaque page, un mouvement continu fatiguerait. Il réagit, il ne s'agite pas. */
.brand { perspective: 420px; }
@media (hover: hover) and (pointer: fine) {
  .site-header .brand-mark--img {
    transition: transform 0.5s var(--ease-premium), box-shadow 0.5s var(--ease-premium),
                filter 0.5s var(--ease-premium);
    transform-style: preserve-3d;
  }
  .brand:hover .brand-mark--img {
    transform: rotateY(16deg) rotateX(-6deg) translateZ(6px) scale(1.05);
    box-shadow: -6px 6px 26px -6px rgba(201, 164, 92, 0.55),
                0 0 0 1px rgba(201, 164, 92, 0.5) inset;
    filter: brightness(1.7) contrast(1.08);
  }
  /* Reflet doré qui balaie l'emblème au survol */
  .brand-mark--img::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(120deg, transparent 35%, rgba(241, 214, 117, 0.45) 50%, transparent 65%);
    background-size: 250% 100%; background-position: 130% 0;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--ease-premium);
  }
  .brand:hover .brand-mark--img::after {
    opacity: 1; animation: markShine 0.7s var(--ease-premium) 0.05s;
  }
}
@keyframes markShine {
  from { background-position: 130% 0; }
  to   { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-mark--img { transform: none; }
  .brand-mark--img::after { display: none; }
}

/* Hero brand visual — static render + WebGL canvas share the same frame.
   The render's black background melts into the page through a radial mask
   (CSS on the image, in-shader on the canvas). */
.hero-visual {
  position: absolute; top: 50%; right: -4%;
  width: min(60vw, 820px); aspect-ratio: 1;
  transform: translateY(-54%);
  animation: heroVisualIn 1.7s var(--ease-out-expo) 0.1s both;
  /* Anti-CLS : le ratio est déjà réservé par aspect-ratio + width/height de
     l'img. Ce fond très discret évite un flash de vide avant la 1re frame. */
  background: radial-gradient(circle at 50% 44%, rgba(201, 164, 92, 0.05), transparent 62%);
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: translateY(-54%) scale(1.05); }
  to   { opacity: 1; transform: translateY(-54%) scale(1); }
}
.hero-logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(58% 58% at 50% 48%, #000 52%, transparent 79%);
  mask-image: radial-gradient(58% 58% at 50% 48%, #000 52%, transparent 79%);
  filter: brightness(1.18);
  opacity: 0.95;
  transition: opacity 1.2s var(--ease-premium);
}
.hero-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.2s var(--ease-premium);
}
/* Quand le shader tourne, le canvas prend le relais de l'image */
.hero.gl-on .hero-logo { opacity: 0; }
.hero.gl-on .hero-gl { opacity: 1; }
/* rAF gelé : le canvas resterait figé sur sa frame d'intro — on rebascule
   l'image statique (le watchdog pose .fx-dead). */
.fx-dead .hero-gl { opacity: 0 !important; }
.fx-dead .hero.gl-on .hero-logo { opacity: 0.95; }
@media (max-width: 1023px) {
  .hero-visual { right: -18%; width: 72vw; opacity: 0.75; }
}
@media (max-width: 767px) {
  .hero-visual { right: 50%; transform: translate(50%, -60%); width: 125vw; max-width: none; opacity: 0.45; }
  @keyframes heroVisualIn {
    from { opacity: 0; transform: translate(50%, -60%) scale(1.05); }
    to   { opacity: 0.45; transform: translate(50%, -60%) scale(1); }
  }
}
.brand-name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: 0.05em; line-height: 1;
}
.brand-name em { font-style: normal; color: var(--aurion-gold); }

.main-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.15rem; white-space: nowrap; }
.main-nav > li { position: relative; flex: 0 0 auto; }
.main-nav a, .main-nav .nav-drop-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.7rem; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-secondary); white-space: nowrap;
  transition: color 0.4s var(--ease-premium), background 0.4s var(--ease-premium);
}
.main-nav a:hover, .main-nav .nav-drop-btn:hover,
.main-nav a.is-active { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.main-nav a.is-active { color: var(--aurion-gold); }
.nav-drop-btn svg { width: 10px; height: 10px; transition: transform 0.4s var(--ease-premium); }
.nav-drop:hover .nav-drop-btn svg, .nav-drop:focus-within .nav-drop-btn svg { transform: rotate(180deg); }

/* Teams dropdown — panneau éditorial : hairline dorée, monogrammes de
   division, entrée en cascade. */
.nav-drop-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 344px; padding: 0.6rem;
  background: rgba(8, 10, 16, 0.94);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle); border-radius: 1.25rem;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium), visibility 0.4s;
  overflow: hidden;
}
.nav-drop-panel::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurion-gold), transparent);
  opacity: 0.7;
}
.nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-drop-panel a {
  display: grid; grid-template-columns: 44px 1fr; gap: 0.85rem; align-items: center;
  padding: 0.65rem 0.75rem; border-radius: 0.85rem; letter-spacing: 0.1em;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium),
              background 0.3s var(--ease-premium);
}
.nav-drop:hover .nav-drop-panel a, .nav-drop:focus-within .nav-drop-panel a {
  opacity: 1; transform: none;
}
.nav-drop:hover .nav-drop-panel a:nth-child(2), .nav-drop:focus-within .nav-drop-panel a:nth-child(2) { transition-delay: 0.05s; }
.nav-drop:hover .nav-drop-panel a:nth-child(3), .nav-drop:focus-within .nav-drop-panel a:nth-child(3) { transition-delay: 0.1s; }
.nav-drop:hover .nav-drop-panel a:nth-child(4), .nav-drop:focus-within .nav-drop-panel a:nth-child(4) { transition-delay: 0.15s; }
.nav-drop-panel a:hover { background: rgba(255, 255, 255, 0.045); }
.nav-drop-panel .drop-mono {
  width: 44px; height: 44px; border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.06em; color: var(--text-secondary);
  transition: color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}
.nav-drop-panel a:hover .drop-mono { color: var(--aurion-gold); border-color: rgba(201, 164, 92, 0.4); }
.nav-drop-panel .drop-body { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; }
.nav-drop-panel a strong { font-size: 0.8125rem; color: var(--text-primary); font-weight: 600; }
.nav-drop-panel a .drop-body > span { font-size: 0.6875rem; letter-spacing: 0.02em; text-transform: none; color: var(--text-muted); font-weight: 400; }
.nav-drop-panel a:hover .drop-body > span { color: var(--text-secondary); }
.nav-drop-panel .drop-tag {
  font-size: 0.5625rem; letter-spacing: 0.2em; color: var(--aurion-gold);
  margin-bottom: 0.1rem; font-weight: 700;
}
/* Sous-choix ROSTER 1 / ROSTER 2 sous Aurion CDL (division à double roster).
   Deux pastilles cliquables ouvrant directement le roster voulu. */
.drop-subroster { display: flex; gap: 0.4rem; padding: 0 0.75rem 0.4rem; margin-top: -0.15rem; }
.nav-drop-panel a.drop-roster {
  display: inline-flex; align-items: center; justify-content: center;
  grid-template-columns: none; flex: 1;
  padding: 0.42rem 0.6rem; border-radius: 0.6rem;
  border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.nav-drop-panel a.drop-roster:hover {
  color: var(--aurion-gold); border-color: rgba(201, 164, 92, 0.4);
  background: rgba(201, 164, 92, 0.06);
}

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  transition: color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium);
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: rgba(255,255,255,0.04); }
.icon-btn svg { width: 16px; height: 16px; }

/* Hamburger */
.nav-toggle { display: none; position: relative; width: 40px; height: 40px; z-index: 210; }
.nav-toggle span {
  position: absolute; left: 50%; width: 20px; height: 1.5px; background: var(--text-primary);
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease-premium), opacity 0.3s;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 23px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateX(-50%) translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateX(-50%) translateY(-4px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 5, 7, 0.9);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-height) + 2rem) 1.5rem 2.5rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.55s var(--ease-premium), visibility 0.55s;
}
body.nav-open .mobile-nav { opacity: 1; visibility: visible; }
.mobile-nav-links li { overflow: hidden; }
.mobile-nav-links a {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.4rem, 9vw, 3.5rem); line-height: 1.1;
  color: var(--text-primary);
  transform: translateY(110%); opacity: 0;
  transition: transform 0.7s var(--ease-premium), opacity 0.7s var(--ease-premium), color 0.4s;
}
.mobile-nav-links a:hover { color: var(--aurion-gold); }
body.nav-open .mobile-nav-links a { transform: translateY(0); opacity: 1; }
body.nav-open .mobile-nav-links li:nth-child(1) a { transition-delay: 0.08s; }
body.nav-open .mobile-nav-links li:nth-child(2) a { transition-delay: 0.13s; }
body.nav-open .mobile-nav-links li:nth-child(3) a { transition-delay: 0.18s; }
body.nav-open .mobile-nav-links li:nth-child(4) a { transition-delay: 0.23s; }
body.nav-open .mobile-nav-links li:nth-child(5) a { transition-delay: 0.28s; }
body.nav-open .mobile-nav-links li:nth-child(6) a { transition-delay: 0.33s; }
body.nav-open .mobile-nav-links li:nth-child(7) a { transition-delay: 0.38s; }
.mobile-nav-foot {
  display: flex; flex-direction: column; gap: 1.5rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s var(--ease-premium) 0.4s, transform 0.6s var(--ease-premium) 0.4s;
}
body.nav-open .mobile-nav-foot { opacity: 1; transform: translateY(0); }

/* ---------- 7. HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-bottom: clamp(4rem, 8vh, 7rem);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 20%, var(--aurion-blue-glow), transparent 70%),
    radial-gradient(40% 35% at 15% 80%, var(--aurion-gold-glow), transparent 70%),
    linear-gradient(180deg, rgba(3, 6, 13,0.55) 0%, rgba(3, 6, 13,0.25) 40%, rgba(3, 6, 13,0.92) 85%, var(--background) 100%);
}
/* Placeholder texture when no hero video/image is configured (CMS slot) */
.hero-media--placeholder {
  background:
    radial-gradient(70% 60% at 70% 15%, rgba(47, 140, 255,0.16), transparent 65%),
    radial-gradient(45% 40% at 12% 85%, rgba(201, 164, 92,0.10), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,0.017) 46px 48px),
    linear-gradient(180deg, #07162C 0%, var(--background) 100%);
}
/* Claw beams — angular light slashes drifting slowly across the hero */
.hero::after {
  content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 40%, rgba(47, 140, 255, 0.07) 45%, transparent 52%),
    linear-gradient(115deg, transparent 56%, rgba(201, 164, 92, 0.05) 61%, transparent 68%),
    linear-gradient(115deg, transparent 24%, rgba(255, 255, 255, 0.02) 26%, transparent 29%);
  animation: beamDrift 16s var(--ease-premium) infinite alternate;
  will-change: transform;
}
@keyframes beamDrift {
  from { transform: translateX(-2.5%) skewX(0deg); }
  to   { transform: translateX(2.5%) skewX(-1deg); }
}
/* Gold ember line anchoring the hero base */
.hero-inner::before {
  content: ""; position: absolute; left: 1.25rem; top: -2.5rem;
  width: min(200px, 30vw); height: 2px;
  background: linear-gradient(90deg, var(--aurion-gold), transparent);
  opacity: 0.7;
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-kicker { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.hero h1 { margin-bottom: 1.75rem; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; }

/* Slogan mask reveal — each line rises out of its clipping box on load.
   Fallback sans JS ; remplacé par le char-reveal quand fx.js splitte. */
.hero h1 .line > span {
  transform: translateY(112%);
  animation: lineRise 0.95s var(--ease-out-expo) forwards;
}
.hero h1 .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.28s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.41s; }
@keyframes lineRise { to { transform: translateY(0); } }
.hero h1.is-split .line > span { animation: none; transform: none; }

/* Emblem entrance — quick, once per load */
.site-header .brand-mark--img { animation: markIn 0.8s var(--ease-out-expo) both; }
@keyframes markIn { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
.hero-sub { max-width: 52ch; color: var(--text-secondary); font-size: 1.0625rem; margin-bottom: 2.5rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.scroll-hint {
  position: absolute; bottom: 2.25rem; right: 2.5rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  color: var(--text-muted); font-size: 0.5625rem; letter-spacing: 0.3em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-hint::after {
  content: ""; width: 1px; height: 48px;
  background: linear-gradient(180deg, var(--aurion-gold), transparent);
  animation: scrollPulse 2.4s var(--ease-premium) infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: 0.25; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Page hero (interior pages) */
.page-hero {
  position: relative; padding: calc(var(--nav-height) + clamp(4rem, 10vh, 7rem)) 0 clamp(3rem, 6vh, 5rem);
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  background:
    radial-gradient(55% 70% at 82% 0%, rgba(47, 140, 255,0.12), transparent 65%),
    radial-gradient(30% 40% at 8% 100%, rgba(201, 164, 92,0.07), transparent 70%),
    var(--background-secondary);
}
.page-hero .eyebrow { margin-bottom: 1.5rem; }
.page-hero p.lead { margin-top: 1.5rem; max-width: 60ch; color: var(--text-secondary); font-size: 1.0625rem; }
.page-hero .container { position: relative; z-index: 1; }

/* Monogramme géant des pages équipe (rempli par main.js selon ?team=) */
.team-hero-mono {
  position: absolute; right: -0.04em; bottom: -0.24em; z-index: 0;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(7rem, 22vw, 17rem); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  pointer-events: none; user-select: none;
}

/* ---------- 8. CARDS (Double-bezel) ---------- */
.shell {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-shell);
  padding: 0.5rem;
}
.core {
  background: var(--surface);
  border-radius: var(--radius-core);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  overflow: hidden; position: relative;
  height: 100%;
}

.card-hover { transition: transform 0.6s var(--ease-premium), border-color 0.6s var(--ease-premium); }
.card-hover:hover { transform: translateY(-4px); border-color: var(--border-strong); }

/* (Le systeme .roster-card de la home vivait ici. Remplace par .div-card (§22)
   lors de la refonte de la vitrine des divisions ; retire le 2026-07-15 apres
   verification qu'il ne ciblait plus aucun element du site.) */

.tag {
  display: inline-flex; padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
  font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  background: rgba(0,0,0,0.25);
}
.tag--gold { color: var(--aurion-gold); border-color: rgba(201, 164, 92,0.35); }
.tag--blue { color: #63A9FF; border-color: rgba(47, 140, 255,0.4); }
.tag--live { color: var(--live); border-color: rgba(255,48,64,0.4); }
.tag--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live);
  margin-right: 0.45rem; align-self: center;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.tag--win { color: var(--success); border-color: rgba(34,197,94,0.35); }
.tag--loss { color: var(--danger); border-color: rgba(239,68,68,0.35); }

/* ---------- 9. MATCH SPOTLIGHT / EMPTY STATES ---------- */
.spotlight { padding: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.spotlight .vs-row {
  display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 4rem);
  margin: 2rem 0;
}
.countdown { display: flex; justify-content: center; gap: clamp(0.75rem, 3vw, 1.5rem); margin-top: 2rem; }
.countdown .cd-cell {
  min-width: 76px; padding: 0.9rem 0.5rem 0.7rem;
  border: 1px solid var(--border-subtle); border-radius: 1rem;
  background: rgba(255,255,255,0.02);
}
.countdown .cd-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1; }
.countdown .cd-lab { font-size: 0.5625rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.35rem; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem; padding: clamp(3rem, 7vw, 5.5rem) 1.5rem;
}
.empty-state .empty-ico {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.02);
  color: var(--text-muted);
}
.empty-state .empty-ico svg { width: 22px; height: 22px; }
.empty-state h4 { color: var(--text-primary); letter-spacing: 0.06em; }
.empty-state p { color: var(--text-muted); font-size: 0.875rem; max-width: 44ch; }

/* ---------- 10. LISTS: RESULTS / MATCHES ---------- */
.match-row {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.4s var(--ease-premium);
}
.match-row:last-child { border-bottom: none; }
.match-row:hover { background: rgba(255,255,255,0.025); }
.match-row[hidden] { display: none; }

.mr-date { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; }
.mr-day { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--text-primary); }
.mr-mon { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.mr-time { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.3rem; }
.mr-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; min-width: 0; }
.mr-opp { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; }
.mr-comp { font-size: 0.8125rem; color: var(--text-muted); }
.mr-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
.mr-score { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
@media (max-width: 767px) {
  .mr-info { align-items: center; }
  .mr-actions { flex-direction: row; align-items: center; justify-content: center; }
}

/* Spotlight : bandeau méta sous le VS (date, statut, countdown, stream). */
.spot-meta { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.spot-info { font-size: 0.8125rem; letter-spacing: 0.03em; color: var(--text-muted); }

/* ---------- 11. VALUE / FEATURE CARDS ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.value-card { padding: 2rem; min-height: 240px; display: flex; flex-direction: column; }
.value-card .value-num {
  font-family: var(--font-display); font-size: 1rem; color: var(--aurion-gold);
  letter-spacing: 0.2em; margin-bottom: auto;
}
.value-card h3 { margin: 2.5rem 0 0.5rem; }
.value-card p { color: var(--text-secondary); font-size: 0.9375rem; }

/* Pathway steps */
.pathway { display: flex; flex-direction: column; gap: 0; position: relative; max-width: 640px; margin-inline: auto; }
.pathway-step { display: flex; gap: 1.75rem; position: relative; padding-bottom: 2.75rem; }
.pathway-step:last-child { padding-bottom: 0; }
.pathway-step::before {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, var(--border-strong), transparent);
}
.pathway-step:last-child::before { display: none; }
.pathway-dot {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font-display); font-size: 1.05rem; color: var(--aurion-gold);
}
.pathway-step h4 { margin-bottom: 0.3rem; }
.pathway-step p { color: var(--text-secondary); font-size: 0.9375rem; max-width: 52ch; }

/* ---------- 12. FORMS ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary); }
.form-field label .req { color: var(--aurion-gold); }
/* Questionnaires de candidature (join.html) : ces intitulés sont des phrases
   entières, pas des micro-libellés. Les capitales et l'interlettrage large du
   gabarit rendraient une vingtaine de questions illisibles — même graisse,
   même couleur, simplement en casse normale. */
.form-field--question label { text-transform: none; letter-spacing: 0.01em; font-size: 0.8125rem; line-height: 1.5; }
.form-field input, .form-field select, .form-field textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 0.9rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem; color: var(--text-primary);
  transition: border-color 0.4s var(--ease-premium), background 0.4s var(--ease-premium);
  width: 100%;
  appearance: none;
}
.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center;
}
/* Le popup natif d'un <select> ignore le fond translucide et force un fond
   clair côté OS — sans ce bloc, le texte quasi-blanc hérité devient illisible
   sur ce fond clair (seule l'option survolée, en surbrillance bleue, reste
   lisible). Fond solide obligatoire ici : rgba/transparent ne suffit pas. */
.form-field select option {
  background: var(--surface);
  color: var(--text-primary);
}
.form-field select optgroup {
  background: var(--surface);
  color: var(--text-secondary);
  font-style: normal;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--aurion-blue); background: rgba(47, 140, 255,0.05);
  box-shadow: 0 0 0 3px var(--aurion-blue-glow);
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field .hint { font-size: 0.75rem; color: var(--text-muted); }
.form-check { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.8125rem; color: var(--text-secondary); }
.form-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--aurion-blue); appearance: auto; flex: none; }
.form-notice {
  padding: 1rem 1.25rem; border-radius: 1rem;
  border: 1px solid rgba(201, 164, 92,0.3); background: rgba(201, 164, 92,0.05);
  font-size: 0.8125rem; color: var(--aurion-gold-light);
}
/* L'avis de soumission bascule en rouge quand la candidature est incomplète */
.form-notice.is-error {
  border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.07); color: #FCA5A5;
}

/* Validation par champ : message rouge sous le champ + liseré sur l'input */
.field-error {
  display: block; margin-top: 0.4rem;
  font-size: 0.75rem; color: #FCA5A5; letter-spacing: 0.01em;
}
.form-check .field-error { margin-left: 2.4rem; }
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.04);
}
.form-field input[aria-invalid="true"]:focus,
.form-field select[aria-invalid="true"]:focus,
.form-field textarea[aria-invalid="true"]:focus {
  outline-color: var(--danger);
}

/* ---------- 13. TABS & FILTERS ---------- */
.tab-bar {
  display: inline-flex; gap: 0.25rem; padding: 0.3rem;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.02);
}
.tab-bar button {
  padding: 0.55rem 1.4rem; border-radius: var(--radius-pill);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-secondary);
  transition: color 0.4s var(--ease-premium), background 0.4s var(--ease-premium);
}
.tab-bar button:hover { color: var(--text-primary); }
.tab-bar button.is-active { background: var(--aurion-blue-strong); color: #fff; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: panelIn 0.6s var(--ease-premium); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.45rem 1.1rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
  transition: all 0.4s var(--ease-premium);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip.is-active { color: var(--aurion-gold); border-color: rgba(201, 164, 92,0.4); background: rgba(201, 164, 92,0.06); }

/* ---------- 14. IDENTITY / CTA BANDS ---------- */
.identity-band { position: relative; overflow: hidden; text-align: center; }
/* Giant lion watching over the identity statement.
   Version décorative 800px/65 Ko — le master 2,1 Mo reste réservé au press
   kit (media.html). Le screen-blend rend le fond noir du JPEG neutre. */
.identity-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../brand/aurion-logo-deco.jpg");
  background-repeat: no-repeat;
  background-position: center 42%;
  background-size: min(72vh, 620px);
  mix-blend-mode: screen;
  filter: saturate(0.35) brightness(1.12);
  opacity: 0.32;
}
.identity-band .display-xl { position: relative; z-index: 1; }
.identity-band .display-xl .accent { color: var(--aurion-gold); }
.identity-band p { position: relative; z-index: 1; max-width: 54ch; margin: 1.75rem auto 0; color: var(--text-secondary); }

.cta-band .core { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; }
.cta-band .core::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 80% at 50% 120%, rgba(47, 140, 255,0.22), transparent 70%),
    radial-gradient(30% 40% at 85% 0%, rgba(201, 164, 92,0.1), transparent 70%);
  pointer-events: none;
}
.cta-band h2, .cta-band p, .cta-band .hero-cta { position: relative; }
.cta-band p { max-width: 50ch; margin: 1.25rem auto 2.25rem; color: var(--text-secondary); }
.cta-band .hero-cta { justify-content: center; }

/* ---------- 15. FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--background-secondary);
  padding: clamp(4rem, 8vw, 6rem) 0 2.5rem;
  position: relative; overflow: hidden;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 4rem; }
.footer-brand p { color: var(--text-muted); font-size: 0.875rem; max-width: 34ch; margin-top: 1.25rem; }
.footer-col h5 { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem; }
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a { font-size: 0.875rem; color: var(--text-secondary); transition: color 0.4s var(--ease-premium); }
.footer-col a:hover { color: var(--text-primary); }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-top: 2rem; border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem; color: var(--text-muted);
}
.social-row { display: flex; gap: 0.6rem; }
.footer-word {
  position: absolute; bottom: -0.18em; inset-inline: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 18vw, 15rem);
  line-height: 1; text-transform: uppercase;
  color: rgba(255,255,255,0.015); pointer-events: none; user-select: none;
}

/* ---------- 16. SEARCH MODAL ---------- */
.search-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1.25rem 0;
  background: rgba(3, 4, 6, 0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-premium), visibility 0.4s;
}
.search-modal.is-open { opacity: 1; visibility: visible; }
.search-panel {
  width: 100%; max-width: 560px;
  background: rgba(12, 15, 23, 0.95);
  border: 1px solid var(--border-strong); border-radius: 1.5rem;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.9);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.45s var(--ease-premium);
  overflow: hidden;
}
.search-modal.is-open .search-panel { transform: none; }
.search-input-row { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--border-subtle); }
.search-input-row svg { width: 17px; height: 17px; color: var(--text-muted); flex: none; }
.search-input-row input { flex: 1; background: none; border: none; outline: none; font-size: 1rem; color: var(--text-primary); }
.search-input-row kbd {
  font-size: 0.625rem; padding: 0.25rem 0.5rem; border-radius: 0.4rem;
  border: 1px solid var(--border-subtle); color: var(--text-muted); font-family: var(--font-body);
}
.search-results { max-height: 340px; overflow-y: auto; padding: 0.5rem; }
.search-results a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.8rem 1rem; border-radius: 0.9rem; font-size: 0.9375rem;
}
.search-results a:hover, .search-results a.is-focused { background: rgba(255,255,255,0.05); }
.search-results a span { font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.search-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; }

/* ---------- 17. DEV BANNER ---------- */
.dev-banner {
  position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 90;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0.7rem 0.7rem 1.1rem;
  background: rgba(12, 15, 23, 0.92);
  border: 1px solid rgba(201, 164, 92,0.35); border-radius: var(--radius-pill);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aurion-gold-light);
  box-shadow: 0 20px 50px -15px rgba(0,0,0,0.7);
}
.dev-banner button {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 0.75rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.dev-banner button:hover { color: var(--text-primary); }

/* ---------- 17b. PAGE TRANSITIONS & SCROLL-DRIVEN PARALLAX ---------- */
/* Cross-document View Transitions (progressive enhancement — Chromium) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.3s var(--ease-premium) both; }
::view-transition-new(root) { animation: vtIn 0.5s var(--ease-premium) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(12px); } }

/* Scroll-driven parallax (progressive enhancement — no JS scroll listeners) */
@supports (animation-timeline: view()) {
  .identity-band .bg-word {
    animation: wordParallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes wordParallax {
    from { transform: translateY(calc(-50% + 4.5rem)); }
    to   { transform: translateY(calc(-50% - 4.5rem)); }
  }
  .footer-word {
    animation: footWordRise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 90%;
  }
  @keyframes footWordRise {
    from { transform: translateY(30%); opacity: 0.4; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ---------- 18. SCROLL REVEAL ----------
   Masquage gaté par .fx (posé par fx.js) : sans JavaScript, tout le contenu
   reste visible d'emblée. */
.fx [data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0s);
}
.fx [data-reveal].is-visible { opacity: 1; transform: none; }
.fx-dead [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- 19. MISC ---------- */
.divider { height: 1px; background: var(--border-subtle); border: none; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack > * + * { margin-top: 1.5rem; }
.row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.5rem; } .mt-5 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2.5rem; }
.center { text-align: center; }

/* Timeline (Aurion story) */
.timeline { position: relative; max-width: 720px; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--aurion-gold), var(--border-subtle));
}
.timeline-item { position: relative; padding: 0 0 2.75rem 2.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--aurion-gold);
  box-shadow: 0 0 0 5px rgba(201, 164, 92,0.12);
}
.timeline-item .tl-year { font-family: var(--font-display); font-size: 1.4rem; color: var(--aurion-gold); line-height: 1; }
.timeline-item h4 { margin: 0.4rem 0 0.35rem; }
.timeline-item p { color: var(--text-secondary); font-size: 0.9375rem; max-width: 56ch; }

/* FAQ accordéon (composant global — merch.html, faq.html ; JS dans main.js) */
.faq-list { max-width: 760px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0.25rem; text-align: left;
  font-size: 1.0625rem; font-weight: 500; color: var(--text-primary);
  transition: color 0.3s;
}
.faq-q:hover { color: var(--aurion-gold-light); }
.faq-q .faq-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); position: relative; transition: transform 0.4s var(--ease-premium), border-color 0.3s; }
.faq-q .faq-ico::before, .faq-q .faq-ico::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq-q .faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.4s var(--ease-premium); }
.faq-item.is-open .faq-ico { transform: rotate(45deg); border-color: var(--aurion-gold); color: var(--aurion-gold); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-premium); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 2.5rem 1.4rem 0.25rem; font-size: 0.9375rem; color: var(--text-secondary); max-width: 62ch; }

/* Error pages */
.error-page {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 2rem; position: relative; overflow: hidden;
}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width: 1023px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .header-actions .btn { display: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Header compact : sur un écran de 360 px, la marque + les icônes + le
   hamburger dépassaient la largeur disponible. Le débordement était masqué par
   overflow-x: hidden — donc le hamburger sortait littéralement de l'écran. On
   resserre au lieu de rogner. (La boutique ajoute en plus l'icône panier.) */
@media (max-width: 767px) {
  .site-header .container { gap: 0.75rem; }
  .brand-name { font-size: 1.2rem; letter-spacing: 0.03em; }
  .header-actions { gap: 0.4rem; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 15px; height: 15px; }
}
/* Très petits écrans : « Mon compte » reste accessible dans le menu mobile,
   son icône peut donc céder la place au panier et au hamburger. */
@media (max-width: 479px) {
  .header-actions > a.icon-btn[href="compte.php"] { display: none; }
  .brand-name { font-size: 1.05rem; }
}

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .match-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.1rem 1rem; }
  .scroll-hint { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding-bottom: 3.5rem; }
  .dev-banner { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; justify-content: space-between; }
  .spotlight .vs-row { flex-direction: column; gap: 1rem; }
  .countdown .cd-cell { min-width: 62px; }
  .countdown .cd-num { font-size: 2rem; }
}

/* ---------- 21. ACCESSIBILITY ---------- */
:focus-visible { outline: 2px solid var(--aurion-blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 500;
  padding: 0.75rem 1.25rem; background: var(--aurion-blue-strong); color: #fff;
  border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
  transition: top 0.3s var(--ease-premium);
}
.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  /* Scroll-linked animations ignore duration overrides — disable explicitly */
  .identity-band .bg-word, .footer-word { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ==========================================================================
   22. FX — SPLIT TEXT
   fx.js découpe [data-split] en caractères ; la cascade est pilotée par CSS
   (transition-delay par caractère), déclenchée par .is-visible.
   ========================================================================== */
.fx [data-split] .split-w { display: inline-block; }
.fx [data-split] .split-ch {
  display: inline-block;
  opacity: 0; transform: translateY(0.6em);
  transition: opacity 0.4s linear, transform 0.85s var(--ease-out-expo);
  transition-delay: calc(var(--split-delay, 0s) + var(--ci, 0) * 0.022s);
}
.fx [data-split].is-visible .split-ch { opacity: 1; transform: none; }

/* Sécurité : rAF mort ou reduced motion → texte immédiatement lisible */
.fx-dead [data-split] .split-ch, .fx-rm [data-split] .split-ch {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  [data-split] .split-ch { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   23. FX — CURSEUR AURION (desktop, pointeur fin uniquement)
   Point or instantané + anneau retardé. Pastille libellée sur [data-cursor].
   ========================================================================== */
html.fx-cursor body,
html.fx-cursor a, html.fx-cursor button,
html.fx-cursor [data-cursor], html.fx-cursor .chip { cursor: none; }

.cursor { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.cursor-dot {
  position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--aurion-gold); margin: -3px 0 0 -3px;
  transition: opacity 0.3s;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(201, 164, 92, 0.5);
  display: flex; align-items: center; justify-content: center;
  transition: scale 0.35s var(--ease-premium), border-color 0.3s,
              background 0.3s, opacity 0.3s,
              width 0.3s var(--ease-premium), height 0.3s var(--ease-premium),
              margin 0.3s var(--ease-premium), border-radius 0.3s var(--ease-premium);
}
/* Aimanté : l'anneau épouse le contour du bouton survolé (taille inline JS) */
.cursor.is-snap .cursor-ring {
  border-color: rgba(201, 164, 92, 0.85);
  background: rgba(201, 164, 92, 0.05);
}
.cursor.is-snap .cursor-dot { opacity: 0.55; }
.cursor-label {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: #100D04; opacity: 0; transition: opacity 0.2s;
  white-space: nowrap; transform: scale(0.5); transition: opacity 0.25s, transform 0.35s var(--ease-premium);
}
.cursor.is-link .cursor-ring {
  scale: 1.5; border-color: rgba(201, 164, 92, 0.85); background: rgba(201, 164, 92, 0.06);
}
.cursor.is-label .cursor-dot { opacity: 0; }
.cursor.is-label .cursor-ring {
  scale: 2.1; background: var(--aurion-gold); border-color: var(--aurion-gold);
}
.cursor.is-label .cursor-label { opacity: 1; transform: scale(0.48); }
.cursor.is-hidden .cursor-dot, .cursor.is-hidden .cursor-ring { opacity: 0; }
.fx-dead .cursor { display: none; }

/* ==========================================================================
   24. FX — BARRE DE PROGRESSION
   ========================================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 130;
  background: linear-gradient(90deg, var(--aurion-gold), var(--aurion-blue));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.fx-dead .scroll-progress { display: none; }

/* ==========================================================================
   25. FX — MARQUEE TYPOGRAPHIQUE
   Bande « S'élever — Rivaliser — Dominer » en Teko contour, défilement
   continu compensé par un léger skew de vélocité (fx.js).
   ========================================================================== */
.marquee {
  overflow: hidden; position: relative;
  padding: clamp(1.75rem, 4vw, 3rem) 0;
  border-block: 1px solid var(--border-subtle);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marqueeX 44s linear infinite;
  will-change: transform;
}
.marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-track > span {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3rem, 7vw, 6.2rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.13);
  padding-right: 0.6em;
}
.marquee-track em {
  font-style: normal; color: var(--aurion-gold); -webkit-text-stroke: 0;
}
@keyframes marqueeX { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ==========================================================================
   26. FX — HERO CINÉMATIQUE
   Le noir se lève, le lion apparaît sous la lumière, la lame dorée traverse,
   puis l'index des divisions s'installe.
   ========================================================================== */
/* Levée d'obscurité au chargement */
.hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: var(--background);
  animation: heroDarkLift 1.2s var(--ease-premium) 0.05s forwards;
  pointer-events: none;
}
@keyframes heroDarkLift { to { opacity: 0; } }

/* Lame dorée — traverse l'écran une fois, au moment où le slogan se pose */
.hero-blade {
  position: absolute; left: 0; right: 0; top: 34%; height: 1px; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.hero-blade::before {
  content: ""; position: absolute; top: 0; left: 0; width: 34vw; height: 100%;
  background: linear-gradient(90deg, transparent, var(--aurion-gold-light), transparent);
  animation: bladeAcross 1.5s var(--ease-in-out-quart, cubic-bezier(0.77, 0, 0.175, 1)) 0.85s both;
}
@keyframes bladeAcross {
  from { transform: translateX(-36vw); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateX(102vw); opacity: 0; }
}

/* Index des divisions — le bas du hero devient une table des matières */
.hero-divisions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 1.5rem; margin-top: clamp(2.25rem, 5vh, 3.5rem);
  border-top: 1px solid var(--border-subtle);
}
.hero-divisions a {
  position: relative; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 0 0.25rem;
}
.hero-divisions a::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px;
  background: var(--aurion-gold);
  transition: width 0.55s var(--ease-premium);
}
.hero-divisions a:hover::before, .hero-divisions a:focus-visible::before { width: 100%; }
.hero-divisions .hd-num {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 600;
  color: var(--aurion-gold); letter-spacing: 0.2em;
}
.hero-divisions .hd-name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.4rem; line-height: 1.05; color: var(--text-primary);
  transition: color 0.4s var(--ease-premium);
}
.hero-divisions a:hover .hd-name { color: var(--aurion-gold-light); }
.hero-divisions .hd-tag {
  font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 767px) {
  .hero-divisions { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .hero-divisions .hd-name { font-size: 1.2rem; }
}

/* ==========================================================================
   27. FX — VITRINE DES DIVISIONS
   Hiérarchie réelle : Aurion CDL domine, Warzone suit, l'Académie ferme la
   marche. Cartes en profondeur : fond, monogramme, lion, contenu — chaque
   couche dérive à sa propre vitesse (tilt fx.js via --px/--py).
   ========================================================================== */
.division-layout {
  display: grid; grid-template-columns: minmax(280px, 1fr) 2.1fr;
  gap: clamp(2rem, 4vw, 4.5rem); align-items: start;
}
.division-head { position: sticky; top: calc(var(--nav-height) + 2.5rem); }
.division-head h2 { max-width: 8ch; }
.division-head p { margin-top: 1rem; color: var(--text-secondary); max-width: 34ch; }
.division-head .link-arrow { margin-top: 1.75rem; }
.division-legend {
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.6rem;
  padding-top: 1.5rem; border-top: 1px solid var(--border-subtle);
}
.division-legend li {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
.division-legend .lg-mark {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
  color: var(--aurion-gold); min-width: 2.4rem;
}

.division-stack { display: grid; gap: 1.25rem; perspective: 1400px; }
.division-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.div-card {
  --dc-h: 340px;
  position: relative; display: block;
  border-radius: var(--radius-shell);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.025);
  padding: 0.5rem;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.3s var(--ease-out-quad, ease-out), border-color 0.5s var(--ease-premium);
}
.div-card:hover { border-color: var(--border-strong); }
.div-card--main.div-card--cdl { --dc-h: 470px; }
.div-card--main.div-card--wz { --dc-h: 400px; }
.div-card--academy { --dc-h: 320px; }

.dc-core {
  position: relative; overflow: hidden; border-radius: var(--radius-core);
  background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
  min-height: var(--dc-h);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Couche 1 — fond signature de division */
.dc-bg {
  position: absolute; inset: -4%; z-index: 0;
  background:
    radial-gradient(80% 90% at 80% 0%, rgba(47, 140, 255, 0.15), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 255, 255, 0.02) 46px 48px);
  transition: transform 0.9s var(--ease-premium);
  translate: calc(var(--px, 0) * 6px) calc(var(--py, 0) * 4px);
}
.div-card:hover .dc-bg { transform: scale(1.03); }
.div-card--wz .dc-bg {
  background:
    radial-gradient(80% 90% at 80% 0%, rgba(47, 140, 255, 0.17), transparent 60%),
    repeating-radial-gradient(circle at 84% 12%, transparent 0 38px, rgba(47, 140, 255, 0.05) 38px 39px);
}
.div-card--academy .dc-bg {
  background:
    radial-gradient(80% 90% at 80% 0%, rgba(201, 164, 92, 0.12), transparent 60%),
    radial-gradient(rgba(201, 164, 92, 0.05) 1px, transparent 1.6px);
  background-size: auto, 22px 22px;
}
/* Couche 2 — monogramme géant en contour */
.dc-mono {
  position: absolute; left: -0.03em; bottom: -0.22em; z-index: 0;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(6rem, 15vw, 13rem); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  pointer-events: none; user-select: none;
  translate: calc(var(--px, 0) * 12px) calc(var(--py, 0) * 8px);
  transition: -webkit-text-stroke-color 0.6s;
}
.div-card--academy .dc-mono { -webkit-text-stroke-color: rgba(201, 164, 92, 0.08); font-size: clamp(5rem, 10vw, 8.5rem); }
.div-card--wz .dc-mono { -webkit-text-stroke-color: rgba(111, 165, 255, 0.09); }
.div-card:hover .dc-mono { -webkit-text-stroke-color: rgba(201, 164, 92, 0.18); }
/* Couche 3 — lion en filigrane (screen fait fondre le noir du rendu) */
.dc-lion {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../brand/aurion-logo-256.png");
  background-repeat: no-repeat;
  background-size: min(64%, 420px);
  background-position: right -8% top -22%;
  mix-blend-mode: screen;
  filter: saturate(0) brightness(1.25);
  opacity: 0.38;
  translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -12px);
  transition: opacity 0.8s var(--ease-premium), filter 0.8s var(--ease-premium);
}
.div-card:hover .dc-lion { opacity: 0.6; filter: saturate(0.5) brightness(1.3); }
/* Couche 4 — contenu */
.dc-top {
  position: relative; z-index: 1; margin-bottom: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.dc-num {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.22em; color: var(--aurion-gold);
}
.dc-body { position: relative; z-index: 1; }
.dc-body h3 {
  font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 1.25rem 0 0.4rem;
  transition: transform 0.6s var(--ease-premium);
}
.div-card--academy .dc-body h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.div-card:hover .dc-body h3 { transform: translateX(6px); }
.dc-body p {
  color: var(--text-secondary); font-size: 0.875rem; max-width: 44ch;
  margin-bottom: 1.5rem;
}
.dc-body .link-arrow { color: var(--text-secondary); }
.div-card:hover .link-arrow { color: var(--text-primary); }
.div-card:hover .link-arrow svg { transform: translate(2px, -2px); }

/* Aperçu du roster réel sur la carte division : visages qui se chevauchent
   + compte. Signale que cette division est VIVANTE (vraies têtes) face aux
   teasers. Injecté par main.js — absent si la division n'a pas de joueur. */
.dc-roster {
  display: flex; align-items: center; gap: 0.85rem;
  margin: 0 0 1.4rem; min-height: 40px;
}
.dc-roster:empty { display: none; }
.dc-avatars { display: flex; align-items: center; }
.dc-avatars img,
.dc-avatars .dc-av-more {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  border: 2px solid var(--surface);
  margin-left: -13px; background: #0B0E14;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
  transition: transform 0.45s var(--ease-premium), margin 0.45s var(--ease-premium);
}
.dc-avatars img { object-fit: cover; object-position: 50% 18%; }  /* cadre le visage */
.dc-avatars > :first-child { margin-left: 0; }
.dc-avatars .dc-av-more {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.85rem; color: var(--aurion-gold-light);
  background: linear-gradient(160deg, #141821, #0B0E14);
}
/* Au survol de la carte, la lineup s'aère — les têtes se séparent */
.div-card:hover .dc-avatars img,
.div-card:hover .dc-avatars .dc-av-more { margin-left: -7px; }
.div-card:hover .dc-avatars > :first-child { margin-left: 0; }
.dc-roster-count {
  font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.02em; line-height: 1.2;
}
.dc-roster-count strong {
  display: block; font-family: var(--font-display); font-size: 1.5rem;
  color: var(--aurion-gold); letter-spacing: 0.03em; line-height: 0.9;
}

@media (max-width: 1023px) {
  .division-layout { grid-template-columns: 1fr; }
  .division-head { position: static; }
  .division-head h2 { max-width: none; }
}
@media (max-width: 767px) {
  .division-duo { grid-template-columns: 1fr; }
  .div-card--main.div-card--cdl { --dc-h: 380px; }
  .div-card--main.div-card--wz { --dc-h: 340px; }
  .div-card--academy { --dc-h: 280px; }
}

/* ==========================================================================
   28. FX — PARCOURS ACADÉMIE SCROLL-DRIVEN
   La ligne d'or se remplit au fil du scroll (GSAP scrub) ; chaque étape
   s'allume à son passage. Sans GSAP/rAF : ligne pleine, tout lisible.
   ========================================================================== */
.pathway--fx { position: relative; padding-left: 0; }
.pathway-line {
  position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px;
  background: rgba(255, 255, 255, 0.07); border-radius: 2px;
}
.pathway-line .pathway-fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--aurion-gold-light), var(--aurion-gold));
  border-radius: 2px;
  box-shadow: 0 0 18px -2px rgba(201, 164, 92, 0.5);
}
.fx-dead .pathway-fill { transform: scaleY(1) !important; }
.pathway--fx .pathway-step::before { display: none; }
.pathway--fx .pathway-dot {
  transition: border-color 0.5s var(--ease-premium), color 0.5s var(--ease-premium),
              box-shadow 0.5s var(--ease-premium);
  color: var(--text-muted); position: relative; z-index: 1;
}
.pathway--fx .pathway-step h4 { color: var(--text-secondary); transition: color 0.5s var(--ease-premium); }
.pathway--fx .pathway-step .pw-label {
  display: block; font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem;
  transition: color 0.5s var(--ease-premium);
}
.pathway--fx .pathway-step.is-lit .pathway-dot {
  border-color: rgba(201, 164, 92, 0.65); color: var(--aurion-gold);
  box-shadow: 0 0 24px -4px rgba(201, 164, 92, 0.45);
}
.pathway--fx .pathway-step.is-lit h4 { color: var(--text-primary); }
.pathway--fx .pathway-step.is-lit .pw-label { color: var(--aurion-gold); }
/* Sans GSAP (ou reduced motion) : tout est allumé d'office */
.fx-rm .pathway--fx .pathway-step .pathway-dot { color: var(--aurion-gold); border-color: rgba(201, 164, 92, 0.65); }
.fx-rm .pathway--fx .pathway-step h4 { color: var(--text-primary); }
.fx-dead .pathway--fx .pathway-step .pathway-dot { color: var(--aurion-gold); border-color: rgba(201, 164, 92, 0.65); }
.fx-dead .pathway--fx .pathway-step h4 { color: var(--text-primary); }

/* ==========================================================================
   29. FX — MATCH CENTER : COMPOSITION VS
   Honnête : l'adversaire reste un slot en pointillés tant qu'aucun match
   réel n'est programmé. Aucun faux LIVE, aucun faux score.
   ========================================================================== */
.vs-hero, .vs-detail {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
  position: relative;
}
.vs-detail { padding-inline: 0; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.vs-emblem {
  width: clamp(88px, 12vw, 136px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, 0.35);
  background-image: url("../brand/aurion-logo-256.png");
  background-size: 175%; background-position: 50% 26%;
  background-color: #08090C;
  filter: brightness(1.5);
  box-shadow: 0 0 44px -12px rgba(201, 164, 92, 0.45);
}
.vs-emblem--empty {
  background-image: none; filter: none; box-shadow: none;
  border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-display); font-weight: 600; font-size: 1.9rem;
}
.vs-name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1;
}
.vs-name--muted { color: var(--text-muted); }
.vs-meta { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }
.vs-mark {
  font-family: var(--font-display); font-weight: 700; line-height: 0.9;
  font-size: clamp(3.4rem, 9vw, 7rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(201, 164, 92, 0.5);
  user-select: none;
}
@media (max-width: 767px) {
  .vs-hero, .vs-detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .vs-mark { font-size: 2.6rem; }
}

/* ---------- Fiches profil & détail (player.html, match.html) ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-secondary); transition: color 0.3s; }
.breadcrumb a:hover { color: var(--aurion-gold-light); }
/* Séparateur « / » : --border-strong le rendait quasi invisible (1,4:1). */
.breadcrumb span[aria-hidden] { color: var(--text-muted); }
.breadcrumb [aria-current] { color: var(--text-secondary); }

.player-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.player-hero-id { min-width: 0; }
.player-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2rem; }
.player-portrait .core { padding: 0; overflow: hidden; }
.player-portrait img { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  .player-hero-grid { grid-template-columns: 1fr; }
  .player-portrait { max-width: 340px; }
}

.id-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-core); overflow: hidden;
}
.id-cell { background: var(--surface); padding: 1.25rem 1.4rem; }
.id-cell dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
.id-cell dd { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.id-note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--text-muted); max-width: 64ch; }
@media (max-width: 767px) { .id-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419px) { .id-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   30. FX — NEWSROOM ÉDITORIALE
   Système magazine : une « une » pleine largeur + grille asymétrique.
   Les slots restent des invitations tant qu'aucun article réel n'existe.
   ========================================================================== */
.edit-featured {
  position: relative; overflow: hidden;
  border-radius: var(--radius-core);
  background:
    radial-gradient(70% 100% at 85% 0%, rgba(47, 140, 255, 0.14), transparent 60%),
    radial-gradient(40% 60% at 10% 100%, rgba(201, 164, 92, 0.08), transparent 65%),
    var(--surface);
  min-height: clamp(320px, 44vh, 460px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.edit-featured .ef-word {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(4rem, 13vw, 11rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  pointer-events: none; user-select: none;
}
.edit-featured > * { position: relative; }
.edit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.edit-slot {
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-core);
  padding: 1.75rem; min-height: 200px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  color: var(--text-muted);
  transition: border-color 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
.edit-slot:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, 0.015); }
.edit-slot .es-kicker { font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--aurion-gold); opacity: 0.7; }
.edit-slot .es-title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; color: var(--text-secondary); }
@media (max-width: 1023px) { .edit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .edit-grid { grid-template-columns: 1fr; } }

/* ============================================================
   NEWSROOM — articles réels (assets/js/news.js remplit ces blocs
   quand des articles publiés existent ; sinon l'état vide reste).
   ============================================================ */
/* À la une : carte pleine largeur, visuel + texte côte à côte. */
.news-featured { display: block; text-decoration: none; color: inherit; margin-bottom: 1.25rem; }
.news-featured .nf-core {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: stretch; padding: 0; overflow: hidden;
}
.nf-media { display: block; position: relative; min-height: 260px; background: var(--background-secondary); }
.nf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-premium); }
.news-featured:hover .nf-media img { transform: scale(1.04); }
.nf-body { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.nf-body .es-kicker { font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--aurion-gold); }
.nf-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.04; }
.nf-excerpt { max-width: 52ch; }
.nf-meta { color: var(--text-muted); }
.nf-cta { margin-top: 0.35rem; }
/* Quand l'article à la une n'a pas de visuel : une seule colonne. */
.news-featured .nf-core:not(:has(.nf-media)) { grid-template-columns: 1fr; }

/* Grille de cartes d'articles. */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.news-card { min-width: 0; }
.news-card[hidden] { display: none; }
.nc-link {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-core); overflow: hidden;
  background: var(--surface);
  transition: border-color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
.nc-link:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-hover); }
.nc-media { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--background-secondary); overflow: hidden; }
.nc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-premium); }
.nc-link:hover .nc-media img { transform: scale(1.05); }
.nc-media--empty {
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(47, 140, 255, 0.14), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgba(201, 164, 92, 0.08), transparent 65%),
    var(--surface);
}
.nc-kicker { font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--aurion-gold); padding: 1.25rem 1.35rem 0; }
.nc-title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: 1.25rem; line-height: 1.12; padding: 0.4rem 1.35rem 0; }
.nc-excerpt { font-size: 0.9rem; line-height: 1.5; padding: 0.5rem 1.35rem 0; }
.nc-meta { margin-top: auto; color: var(--text-muted); padding: 0.85rem 1.35rem 1.25rem; }
@media (max-width: 1023px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-featured .nf-core { grid-template-columns: 1fr; }
  .nf-media { min-height: 200px; aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) { .news-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PAGE ARTICLE — expérience de lecture (article.html)
   ============================================================ */
.article-measure { max-width: 760px; }
.article-hero { padding-bottom: clamp(1rem, 3vw, 2rem); }
.article-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin-top: 0.25rem; }
.article-meta { color: var(--text-muted); margin-top: 0.85rem; }
.article-cover { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--radius-core); overflow: hidden;
  background: var(--background-secondary); }
.article-cover img { display: block; width: 100%; height: auto; }
.article-body { font-size: 1.075rem; line-height: 1.75; color: var(--text-secondary); }
.article-body p { margin: 0 0 1.35em; }
.article-body p:last-child { margin-bottom: 0; }

/* Galerie d'article : réutilise .gallery-item / .lightbox de la section MÉDIA.
   La règle [hidden] est indispensable — `display: grid` l'emporterait sinon
   sur l'attribut hidden et un bloc vide resterait visible. */
.article-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin-top: clamp(1.75rem, 5vw, 2.75rem); }
.article-gallery[hidden] { display: none; }
@media (max-width: 559px) { .article-gallery { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PARTENAIRES — cartes réelles (assets/js/partners.js), groupées
   par niveau. L'état vide reste tant qu'aucun partenaire signé.
   ============================================================ */
.partner-tier { margin-top: 2rem; }
.partner-tier:first-child { margin-top: 0; }
.pt-tier-label { display: block; margin-bottom: 1rem; }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.partner-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  padding: 1.75rem; text-decoration: none; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-core); background: var(--surface);
  transition: border-color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
a.partner-card:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-hover); }
.pt-logo { display: flex; align-items: center; justify-content: center; height: 56px; }
.pt-logo img { max-height: 56px; max-width: 160px; width: auto; object-fit: contain; }
.pt-logo--initials {
  width: 56px; height: 56px; border-radius: 12px; background: var(--background-secondary);
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--aurion-gold);
}
.pt-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; }
.pt-desc { font-size: 0.9rem; line-height: 1.5; }

/* Ligues & coupes — cartes plus grandes que les partenaires : une compétition
   est une annonce à part entière, pas une simple vignette. Bannière horizontale
   (logo à gauche, intitulé à droite), 2 colonnes max pour qu'une annonce seule
   reste large et lisible. */
.competitions-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 720px));
  justify-content: center; gap: 1.9rem;
}
.competitions-grid .partner-card {
  flex-direction: row; align-items: center; gap: 2rem; padding: 2.75rem 2.9rem;
}
.competitions-grid .pt-logo { height: 112px; flex: 0 0 auto; }
.competitions-grid .pt-logo img { max-height: 112px; max-width: 190px; }
.competitions-grid .pt-logo--initials { width: 112px; height: 112px; font-size: 2.4rem; }
.competitions-grid .pt-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.competitions-grid .pt-name { font-size: 2.1rem; }
.competitions-grid .pt-desc { font-size: 1.05rem; }
@media (max-width: 559px) {
  .competitions-grid .partner-card { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================================================
   CRÉATEURS — cartes réelles (assets/js/creators.js).
   ============================================================ */
.creator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.creator-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem;
  padding: 1.75rem 1.25rem; text-decoration: none; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-core); background: var(--surface);
  transition: border-color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
a.creator-card:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-hover); }
.cr-avatar { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; position: relative;
  background: var(--background-secondary); }
.cr-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-avatar--initials { display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--aurion-gold); }
.cr-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; }
.cr-platform { align-self: center; }
.cr-cat { font-size: 0.85rem; line-height: 1.4; }
@media (max-width: 1023px) {
  .partner-grid { grid-template-columns: 1fr 1fr; }
  .creator-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 559px) {
  .partner-grid { grid-template-columns: 1fr; }
  .creator-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TOURNOIS — cartes réelles (assets/js/tournaments.js) sur community.html
   ============================================================ */
.tournament-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1.6rem;
}
.tournament-card {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-core); background: var(--surface);
  overflow: hidden; padding-bottom: 1.35rem;
  transition: border-color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium), background 0.5s var(--ease-premium);
}
a.tournament-card:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-hover); }
.tn-head { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2; }
.tn-media { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--background-secondary); overflow: hidden; margin-bottom: 0.9rem; }
.tn-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-premium); }
a.tournament-card:hover .tn-media img { transform: scale(1.05); }
.tn-media--empty {
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(47, 140, 255, 0.14), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgba(201, 164, 92, 0.08), transparent 65%),
    var(--surface);
}
.tn-name { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; font-size: 1.5rem; line-height: 1.14; padding: 0 1.5rem; }
.tn-meta { color: var(--text-muted); padding: 0.45rem 1.5rem 0; }
.tn-result { color: var(--aurion-gold); font-weight: 600; font-size: 0.95rem; padding: 0.45rem 1.5rem 0; }
.tn-cta { padding: 0.7rem 1.5rem 0; }

/* ============================================================
   MÉDIA — vidéos (liens externes) + galerie photo + lightbox
   (assets/js/media.js). États vides restent tant que c'est vide.
   ============================================================ */
.media-video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.media-video { display: block; position: relative; text-decoration: none; color: inherit; }
.mv-thumb { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-core); background: var(--background-secondary);
  border: 1px solid var(--border-subtle); transition: border-color 0.5s var(--ease-premium); }
.mv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease-premium); }
.media-video:hover .mv-thumb { border-color: var(--border-strong); }
.media-video:hover .mv-thumb img { transform: scale(1.05); }
.mv-thumb--empty { background:
  radial-gradient(60% 80% at 80% 10%, rgba(47, 140, 255, 0.14), transparent 60%),
  radial-gradient(50% 60% at 10% 100%, rgba(201, 164, 92, 0.08), transparent 65%),
  var(--surface); }
.mv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; color: #fff; pointer-events: none;
  transition: transform 0.4s var(--ease-premium); }
.media-video:hover .mv-play { transform: translate(-50%, -50%) scale(1.08); }
.mv-play svg { width: 100%; height: 100%; }
.mv-title { display: block; margin-top: 0.7rem; font-family: var(--font-display); font-weight: 500;
  text-transform: uppercase; font-size: 1.05rem; line-height: 1.2; }

.media-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.gallery-item { position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-core);
  background: var(--background-secondary); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.8s var(--ease-premium); }
.gallery-item:hover img { transform: scale(1.06); }
.gi-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 0.7rem;
  font-size: 0.75rem; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(3, 6, 13, 0.85), transparent);
  opacity: 0; transition: opacity 0.4s var(--ease-premium); }
.gallery-item:hover .gi-caption { opacity: 1; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center;
  justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(3, 6, 13, 0.92); backdrop-filter: blur(6px); }
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; max-width: min(1100px, 100%); max-height: 100%; text-align: center; }
.lb-figure img { max-width: 100%; max-height: 82vh; width: auto; height: auto;
  border-radius: var(--radius-core); }
.lb-cap { margin-top: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; }
.lb-close { position: fixed; top: 1.1rem; right: 1.3rem; width: 44px; height: 44px;
  font-size: 1.9rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer;
  transition: background 0.3s, transform 0.3s; }
.lb-close:hover { background: rgba(255, 255, 255, 0.14); transform: rotate(90deg); }
/* Flèches précédent/suivant — utilisées par la galerie d'article (plusieurs
   images). Masquées quand il n'y a qu'une seule image à montrer. */
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  font-size: 2rem; line-height: 1; color: #fff; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong); border-radius: 50%; cursor: pointer;
  transition: background 0.3s; }
.lb-nav:hover { background: rgba(255, 255, 255, 0.14); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.lb-next { right: clamp(0.6rem, 2vw, 1.6rem); }
@media (max-width: 1023px) {
  .media-video-grid { grid-template-columns: 1fr 1fr; }
  .media-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 559px) {
  .media-video-grid { grid-template-columns: 1fr; }
  .media-gallery { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   CHRONOLOGIE — timeline officielle (assets/js/history.js), aurion.html
   ============================================================ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: linear-gradient(to bottom, var(--aurion-blue), var(--aurion-gold)); opacity: 0.5; }
.timeline-item { position: relative; padding: 0 0 2rem 2.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--aurion-blue);
  box-shadow: 0 0 0 4px var(--background); }
.tl-year { display: inline-block; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.04em; color: var(--aurion-gold); font-size: 0.95rem; }
.tl-title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: 1.35rem; line-height: 1.1; margin-top: 0.15rem; }
.tl-desc { margin-top: 0.4rem; max-width: 60ch; line-height: 1.6; }

/* ============================================================
   PAGES COMPTE — connexion / inscription / mon compte (PHP)
   Écrans d'authentification centrés, sobres, à la charte du site.
   ============================================================ */
.auth-page { min-height: 100vh; display: flex; }
.auth-wrap { margin: auto; width: 100%; max-width: 440px; padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.auth-logo { display: inline-flex; }
.auth-logo img { width: 72px; height: 72px; object-fit: contain; }
.auth-card { width: 100%; }
.auth-card .core { padding: clamp(1.5rem, 5vw, 2.5rem); }
.auth-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.05; }
.auth-lead { margin-top: 0.35rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.auth-form .btn { width: 100%; justify-content: center; margin-top: 0.25rem; }
.auth-flash { padding: 0.7rem 0.9rem; border-radius: var(--radius-core); font-size: 0.875rem; margin-top: 1.25rem; }
.auth-flash--err { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.35); color: #FCA5A5; }
.auth-flash--ok { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.35); color: #86EFAC; }
.auth-forgot { margin: 0.6rem 0 0; font-size: 0.85rem; text-align: right; }
.auth-forgot a { color: var(--text-secondary); }
.auth-forgot a:hover { color: var(--aurion-gold); }
.auth-alt { margin-top: 1.5rem; font-size: 0.9rem; color: var(--text-secondary); }
.auth-alt a { color: var(--aurion-gold); }
.auth-legal { margin-top: 1rem; }
.auth-legal a { color: var(--text-secondary); text-decoration: underline; }

/* ==========================================================================
   31. FX — SLOTS JOUEURS (système de portraits réutilisable)
   Aucun joueur inventé : chaque slot ouvert est une invitation à postuler.
   Le même cadre accueillera les vrais portraits détourés plus tard.
   ========================================================================== */
.roster-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.player-slot {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--radius-core);
  border: 1px dashed var(--border-subtle);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(47, 140, 255, 0.07), transparent 65%),
    rgba(255, 255, 255, 0.015);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem;
  transition: border-color 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.player-slot:hover { border-color: rgba(201, 164, 92, 0.4); transform: translateY(-4px); }
.player-slot .ps-num {
  position: absolute; top: 0.4rem; right: 0.9rem;
  font-family: var(--font-display); font-weight: 700; font-size: 4.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
  user-select: none;
}
.player-slot .ps-silhouette {
  position: absolute; inset: 12% 15% 28%;
  background:
    radial-gradient(50% 38% at 50% 18%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(75% 55% at 50% 78%, rgba(255, 255, 255, 0.04), transparent 72%);
  filter: blur(2px); pointer-events: none;
}
.player-slot .ps-label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; line-height: 1; }
.player-slot .ps-sub { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.3rem; }
.player-slot .ps-cta {
  margin-top: 0.9rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--aurion-gold);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.player-slot:hover .ps-cta { opacity: 1; transform: none; }
@media (max-width: 1023px) { .roster-slots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .roster-slots { grid-template-columns: 1fr; } }

/* ==========================================================================
   33. FX — SIGNATURE PASS (relief, storytelling, matière)
   ========================================================================== */

/* Hairline dorée auto-tracée au-dessus de chaque tête de section */
.fx .section-head[data-reveal]::before {
  content: ""; display: block; width: 0; height: 1px;
  background: linear-gradient(90deg, var(--aurion-gold), rgba(201, 164, 92, 0.08));
  margin-bottom: 1.5rem;
  transition: width 1.2s var(--ease-premium) 0.15s;
}
.fx .section-head--center[data-reveal]::before { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--aurion-gold), transparent); }
.fx .section-head[data-reveal].is-visible::before { width: 100%; }

/* Line-mask unifié : les h2 sortent d'une boîte de clipping (fx.js wrappe) */
.mask-line { display: block; overflow: hidden; }
.mask-inner { display: inline-block; }
.fx [data-reveal] .mask-inner {
  transform: translateY(110%);
  transition: transform 0.95s var(--ease-out-expo) 0.1s;
}
.fx [data-reveal].is-visible .mask-inner { transform: none; }
.fx-dead .mask-inner { transform: none !important; }

/* Boutons : la flèche sort en haut-droite, sa jumelle entre du bas-gauche */
@media (hover: hover) and (pointer: fine) {
  .fx .btn-ico { position: relative; overflow: hidden; }
  .fx .btn-ico svg {
    transition: transform 0.45s var(--ease-out-expo), opacity 0.25s linear;
  }
  .fx .btn-ico .ico-b {
    position: absolute; inset: 0; margin: auto;
    transform: translate(-15px, 15px); opacity: 0;
  }
  .fx .btn:hover .btn-ico svg:not(.ico-b),
  .fx .btn:focus-visible .btn-ico svg:not(.ico-b) { transform: translate(16px, -16px); opacity: 0; }
  .fx .btn:hover .btn-ico .ico-b,
  .fx .btn:focus-visible .btn-ico .ico-b { transform: translate(0, 0); opacity: 1; }
}

/* Reflet suivant le pointeur sur les cartes divisions (injecté par fx.js) */
.dc-glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(241, 214, 117, 0.09), rgba(255, 255, 255, 0.04) 35%, transparent 65%);
  opacity: 0; transition: opacity 0.5s var(--ease-premium);
}
.div-card:hover .dc-glare { opacity: 1; }
@media (pointer: coarse) { .dc-glare { display: none; } }

/* Navigation : underline doré qui se déploie depuis la gauche */
.fx .main-nav > li > a, .fx .main-nav .nav-drop-btn { position: relative; }
.fx .main-nav > li > a::after, .fx .main-nav .nav-drop-btn::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 1px;
  background: linear-gradient(90deg, var(--aurion-gold), rgba(201, 164, 92, 0.15));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.45s var(--ease-out-expo);
}
.fx .main-nav > li > a:hover::after,
.fx .main-nav > li > a:focus-visible::after,
.fx .main-nav > li > a.is-active::after,
.fx .main-nav .nav-drop-btn:hover::after,
.fx .main-nav .nav-drop-btn:focus-visible::after { transform: scaleX(1); }

/* Grain animé — rendu pellicule (desktop seulement, sauts à ~7 i/s) */
@media (pointer: fine) {
  .fx .grain { animation: grainShift 0.84s steps(1) infinite; }
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  20%  { background-position: -32px 22px; }
  40%  { background-position: 26px -36px; }
  60%  { background-position: -18px -28px; }
  80%  { background-position: 30px 14px; }
  100% { background-position: 0 0; }
}

/* Halos qui respirent */
.fx .glow { animation: glowBreath 9s ease-in-out infinite alternate; }
.fx .glow--gold { animation-duration: 12s; }
@keyframes glowBreath {
  from { opacity: 0.7; transform: scale(0.96); }
  to   { opacity: 1;   transform: scale(1.08); }
}

/* « Dominer. » s'embrase juste après le passage de la lame dorée */
.fx .hero h1.is-split .line:nth-child(3) > span {
  animation: goldFlash 1.1s var(--ease-premium) 2.05s both;
}
@keyframes goldFlash {
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1.75) drop-shadow(0 0 18px rgba(201, 164, 92, 0.4)); }
  100% { filter: brightness(1); }
}

/* Identité pinnée — lignes en boîtes de clipping, pilotées par GSAP.
   Par défaut (sans GSAP, mobile, reduced motion) : visibles. */
.id-line-wrap { display: block; overflow: hidden; }
.id-line { display: inline-block; }
.fx-dead .id-line { transform: none !important; }

/* Voile de transition entre pages (navigateurs sans View Transitions) */
.page-veil {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: var(--background);
  opacity: 0;
  transition: opacity 0.32s var(--ease-premium);
}
.page-veil::after {
  content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--aurion-gold), transparent);
  transform: scaleX(0);
  transition: transform 0.34s var(--ease-premium) 0.05s;
}
.page-veil.is-in { opacity: 1; pointer-events: auto; }
.page-veil.is-in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .section-head[data-reveal]::before { width: 100%; transition: none; }
  .mask-inner { transform: none !important; transition: none !important; }
  .id-line { transform: none !important; }
  .grain, .glow { animation: none !important; }
  /* NB : ne PAS couper l'animation lineRise du slogan ici — son état de base
     est translateY(112%) ; la règle globale reduced-motion (durée 0.01ms +
     fill forwards) la termine instantanément, texte visible. */
  .dc-glare { display: none; }
}

/* ==========================================================================
   32. FX — GARDE-FOUS GLOBAUX
   ========================================================================== */
/* Mobile : pas de tilt (pas de pointeur fin), couches recentrées */
@media (pointer: coarse) {
  .div-card { transform: none; }
  .dc-bg, .dc-mono, .dc-lion { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .div-card { transform: none !important; }
  .dc-bg, .dc-mono, .dc-lion { translate: 0 0 !important; }
  .hero-media::before { animation: none; opacity: 0; }
  .hero-blade { display: none; }
  .hero-visual { animation: none; }
  .pathway-fill { transform: scaleY(1) !important; }
  .scroll-progress { display: none; }
}

/* ==========================================================================
   34. TEASER BOUTIQUE (homepage) + typographie des visuels produits SVG
   Les rendus SVG (merch.js et teaser inline) héritent de ces classes.
   ========================================================================== */
.g-logo { mix-blend-mode: screen; }
.g-word { font-family: var(--font-body); font-weight: 600; }
.g-num { font-family: var(--font-display); font-weight: 700; }

.merch-teaser .core {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2rem; align-items: center; overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(55% 80% at 85% 20%, rgba(201, 164, 92, 0.10), transparent 65%),
    var(--surface);
}
.merch-teaser p { color: var(--text-secondary); max-width: 46ch; margin: 1rem 0 2rem; }
.merch-teaser .mt-visual { position: relative; min-height: 260px; }
.merch-teaser .mt-jersey {
  position: absolute; top: 50%; left: 50%;
  width: min(52%, 230px); height: auto; object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.5));
  mix-blend-mode: screen;
}
.merch-teaser .mt-jersey--home { z-index: 2; transform: translate(-62%, -50%); }
.merch-teaser .mt-jersey--away { z-index: 1; transform: translate(-34%, -50%) scale(0.9) rotate(4deg); opacity: 0.92; }
@keyframes teaserFloatHome {
  from { transform: translate(-62%, -50%) translateY(-7px) rotateZ(-0.4deg); }
  to   { transform: translate(-62%, -50%) translateY(9px) rotateZ(0.5deg); }
}
@keyframes teaserFloatAway {
  from { transform: translate(-34%, -50%) scale(0.9) rotate(4deg) translateY(6px); }
  to   { transform: translate(-34%, -50%) scale(0.9) rotate(4deg) translateY(-6px); }
}
.fx .merch-teaser .mt-jersey--home { animation: teaserFloatHome 7s ease-in-out infinite alternate; }
.fx .merch-teaser .mt-jersey--away { animation: teaserFloatAway 8s ease-in-out infinite alternate; }
@media (max-width: 767px) {
  .merch-teaser .core { grid-template-columns: 1fr; }
  .merch-teaser .mt-visual { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .merch-teaser .mt-jersey--home, .merch-teaser .mt-jersey--away { animation: none !important; }
}

/* ==========================================================================
   35. PAGE 404 — moment de marque
   La 404 hérite du header/footer (§19 build) : elle ne fait plus 100svh.
   ========================================================================== */
.error-page {
  position: relative; overflow: hidden;
  min-height: auto;
  display: block; text-align: left;
  padding: calc(var(--nav-height) + clamp(4rem, 10vh, 7rem)) 0 clamp(4rem, 9vw, 7rem);
}
.err-word {
  top: 46%; transform: translateY(-50%);
  font-size: clamp(10rem, 34vw, 30rem);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
}
.err-inner { position: relative; z-index: 1; max-width: 780px; }
.err-mark { display: block; margin-bottom: 2rem; }
.err-title { margin: 1.25rem 0 1.25rem; }
.err-lead { color: var(--text-secondary); max-width: 46ch; font-size: 1.0625rem; margin-bottom: 3rem; }

.err-links {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
  padding-top: 2rem; border-top: 1px solid var(--border-subtle);
}
.err-link {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--border-subtle); border-radius: 1rem;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.4s var(--ease-premium), transform 0.5s var(--ease-premium),
              background 0.4s var(--ease-premium);
}
.err-link:hover {
  border-color: rgba(201, 164, 92, 0.4); transform: translateY(-3px);
  background: rgba(201, 164, 92, 0.04);
}
.err-link .err-mono {
  font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.2em;
  color: var(--aurion-gold); margin-bottom: 0.4rem;
}
.err-link strong {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1;
}
.err-link span:not(.err-mono) { font-size: 0.75rem; color: var(--text-muted); }
.err-hint { margin-top: 1.75rem; }
.err-hint kbd {
  font-family: var(--font-body); font-size: 0.6875rem;
  padding: 0.15rem 0.4rem; border-radius: 0.35rem;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
@media (max-width: 767px) {
  .err-links { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   36. PAGE MANIFESTE (aurion.html)
   La page de marque : déclaration typographique, mission/vision éditoriale,
   valeurs en bandes. Aucun numéro décoratif — le mot porte le sens.
   ========================================================================== */
.manifesto-hero { position: relative; overflow: hidden; }
.mh-inner { position: relative; z-index: 1; }
.mh-lion {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../brand/aurion-logo-deco.jpg");
  background-repeat: no-repeat;
  background-position: right -6% center;
  background-size: min(52vh, 460px);
  mix-blend-mode: screen;
  filter: saturate(0.3) brightness(1.1);
  opacity: 0.3;
}
@media (max-width: 1023px) { .mh-lion { background-position: right -22% center; opacity: 0.18; } }
.mh-title { margin: 1.25rem 0 1.5rem; }

/* Déclaration — lignes massives qui montent au scroll */
.statement-sec { padding-block: clamp(4rem, 9vw, 7rem); }
.statement {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1.02;
  letter-spacing: 0.01em;
  max-width: 18ch;
}
.statement .st-line { overflow: hidden; }
.statement .st-line em { font-style: normal; color: var(--text-secondary); }
.statement .st-accent { color: var(--aurion-gold); }
.fx .statement .st-line > span,
.fx .statement .st-line { will-change: transform; }
.fx [data-reveal] .st-line {
  transform: translateY(105%);
  transition: transform 0.9s var(--ease-out-expo);
}
.fx [data-reveal].is-visible .st-line { transform: none; }
.fx [data-reveal] .st-line:nth-child(2) { transition-delay: 0.1s; }
.fx [data-reveal] .st-line:nth-child(3) { transition-delay: 0.2s; }
.fx-dead .statement .st-line { transform: none !important; }
.st-note {
  margin-top: 2.5rem; max-width: 52ch; color: var(--text-secondary);
  font-size: 1.0625rem;
  padding-left: 1.5rem; border-left: 1px solid rgba(201, 164, 92, 0.35);
}

/* Mission / Vision — deux colonnes éditoriales */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.mv-col { position: relative; }
.mv-label {
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--aurion-gold);
}
.mv-head { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0.75rem 0 1.75rem; }
.mv-list { border-top: 1px solid var(--border-subtle); }
.mv-list li {
  padding: 0.95rem 0 0.95rem 1.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9375rem; color: var(--text-secondary);
  position: relative;
  transition: color 0.35s var(--ease-premium), padding-left 0.35s var(--ease-premium);
}
.mv-list li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px; background: var(--aurion-gold);
  transform: translateY(-50%);
  transition: width 0.35s var(--ease-premium);
}
.mv-list li:hover { color: var(--text-primary); padding-left: 2.25rem; }
.mv-list li:hover::before { width: 16px; }

/* Valeurs — bandes typographiques */
.values-list { border-top: 1px solid var(--border-subtle); }
.value-row {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: baseline;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.value-row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--aurion-gold), transparent);
  transition: width 1s var(--ease-premium);
}
.value-row:hover::after { width: 100%; }
.value-word {
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.95;
  color: var(--text-primary);
  transition: color 0.5s var(--ease-premium), transform 0.6s var(--ease-premium);
}
.value-row:hover .value-word { color: var(--aurion-gold); transform: translateX(0.5rem); }
.value-line {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.15;
  color: var(--text-primary); margin-bottom: 0.6rem;
}
.value-note { font-size: 0.9375rem; color: var(--text-muted); max-width: 46ch; }

@media (max-width: 767px) {
  .mv-grid { grid-template-columns: 1fr; }
  .value-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .statement { max-width: none; }
  .st-note { padding-left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .statement .st-line { transform: none !important; transition: none !important; }
  .value-word, .mv-list li, .value-row::after { transition: none; }
}

/* ==========================================================================
   37. PAGES SECONDAIRES — hero de marque + cartes réseaux
   Un hero éditorial partagé (monogramme géant + lion en filigrane) donne aux
   pages secondaires le même niveau que la home et la boutique, sans dupliquer
   de CSS par page.
   ========================================================================== */
.page-hero--brand { position: relative; overflow: hidden; }
.page-hero--brand .container { position: relative; z-index: 1; }
/* Monogramme géant : le mot-clé de la page, en contour, ancré en bas à droite */
.ph-mono {
  position: absolute; right: -0.06em; bottom: -0.3em; z-index: 0;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(6rem, 17vw, 15rem); line-height: 1; letter-spacing: 0.01em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.ph-lion {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../brand/aurion-logo-deco.jpg");
  background-repeat: no-repeat;
  background-position: right 4% center;
  background-size: min(44vh, 380px);
  mix-blend-mode: screen;
  filter: saturate(0.28) brightness(1.08);
  opacity: 0.22;
}
@media (max-width: 1023px) {
  .ph-lion { opacity: 0.12; background-position: right -18% center; }
  .ph-mono { font-size: clamp(4.5rem, 22vw, 9rem); }
}

/* Cartes réseaux — chaque plateforme a son icône et son état réel */
.social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.social-card {
  position: relative; padding: 1.6rem 1.5rem;
  border: 1px solid var(--border-subtle); border-radius: 1.2rem;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.03), transparent 62%);
  transition: border-color 0.45s var(--ease-premium), transform 0.5s var(--ease-premium),
              background 0.45s var(--ease-premium);
}
.social-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.social-card .sc-ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  transition: color 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium),
              background 0.4s var(--ease-premium);
}
.social-card .sc-ico svg { width: 19px; height: 19px; }
.social-card:hover .sc-ico {
  color: var(--aurion-gold); border-color: rgba(201, 164, 92, 0.4);
  background: rgba(201, 164, 92, 0.06);
}
.social-card h4 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.social-card p { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 1rem; }
/* État honnête : tant qu'aucune URL officielle n'est fournie, la carte ne
   prétend pas être un lien. */
.social-card .sc-state {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.5938rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
}
.social-card .sc-state::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted); flex: none;
}
/* Quand une vraie URL est branchée, la carte devient <a class="social-card"> :
   ces règles la réveillent automatiquement. */
a.social-card:hover { background: rgba(201, 164, 92, 0.04); }
a.social-card .sc-state { color: var(--aurion-gold); }
a.social-card .sc-state::before { background: var(--aurion-gold); }

/* Formats de collaboration / rangées de valeur — liseré animé */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.offer-card {
  position: relative; padding: 1.7rem 1.5rem;
  border: 1px solid var(--border-subtle); border-radius: 1.2rem;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.03), transparent 60%);
  overflow: hidden;
  transition: border-color 0.45s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.offer-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--aurion-gold), transparent);
  transition: height 0.6s var(--ease-premium);
}
.offer-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.offer-card:hover::before { height: 100%; }
.offer-card h4 { color: var(--aurion-gold); font-size: 1.1rem; margin-bottom: 0.4rem; }
.offer-card p { font-size: 0.8125rem; color: var(--text-secondary); }

@media (max-width: 1023px) {
  .social-grid, .offer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .social-grid, .offer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .social-card, .offer-card, .social-card .sc-ico, .offer-card::before { transition: none; }
}

/* ==========================================================================
   38. HERO MOBILE — composition dédiée
   Le desktop réduit ne marchait pas : le lion passait à 45 % d'opacité
   DERRIÈRE le texte, ce qui l'effaçait sans rien apporter. Sur mobile on
   empile : le lion tient le haut de l'écran comme une affiche, la typo prend
   le bas sur un fond franc. Le lion redevient un sujet, pas une texture.
   ========================================================================== */
@media (max-width: 767px) {
  .hero {
    min-height: 100svh;
    align-items: stretch;
    padding-bottom: 2.5rem;
  }
  /* Le visuel occupe le tiers haut, cadré comme une affiche */
  .hero-visual {
    position: absolute;
    top: 0; right: 50%; bottom: auto;
    transform: translateX(50%);
    width: 118vw; max-width: none;
    height: 56svh;
    opacity: 1;                     /* plus d'effacement à 45 % */
  }
  @keyframes heroVisualIn {
    from { opacity: 0; transform: translateX(50%) scale(1.06); }
    to   { opacity: 1; transform: translateX(50%) scale(1); }
  }
  .hero-logo, .hero-gl {
    height: 100%;
    object-fit: cover;
    object-position: 50% 32%;
  }
  /* Dégradé de raccord : le lion se fond dans le noir avant la typo */
  .hero-media::after {
    background:
      radial-gradient(60% 40% at 50% 18%, rgba(47, 140, 255, 0.16), transparent 70%),
      linear-gradient(180deg,
        rgba(3, 6, 13, 0.28) 0%,
        rgba(3, 6, 13, 0.05) 26%,
        rgba(3, 6, 13, 0.82) 48%,
        var(--background) 62%);
  }
  /* La typo occupe le bas, alignée en bas de l'écran */
  .hero-inner {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 52svh;
  }
  .hero-inner::before { top: -1.5rem; width: 120px; }
  .hero .display-xxl { font-size: clamp(3rem, 15vw, 4.5rem); }
  .hero-kicker { margin-bottom: 1.1rem; }
  .hero h1 { margin-bottom: 1.1rem; }
  .hero-sub { font-size: 0.9375rem; margin-bottom: 1.5rem; }
  .hero-cta { gap: 0.6rem; }
  .hero-cta .btn { flex: 1; justify-content: space-between; }
}
/* Très petits écrans : on rend de la place à la typo */
@media (max-width: 767px) and (max-height: 700px) {
  .hero-visual { height: 44svh; }
  .hero-inner { padding-top: 40svh; }
  .hero-sub { display: none; }   /* le slogan et les CTA priment */
}

/* ==========================================================================
   39. RETENUE — la passe qui retire
   --------------------------------------------------------------------------
   Le site avait accumulé 14 boucles d'animation permanentes. Six tournaient
   simultanément sur la home, derrière un lion WebGL qui a déjà sa propre
   respiration et son propre balayage lumineux. Résultat : l'œil n'a nulle
   part où se reposer, et le mouvement — qui devrait signaler l'important —
   ne signale plus rien.

   Règle appliquée ici : UNE seule chose bouge en permanence par écran, et
   c'est le sujet (le lion, le marquee). Tout le reste ne bouge qu'en
   réaction à une action de l'utilisateur, ou pas du tout.

   Ce bloc neutralise plutôt qu'il ne supprime le code source : chaque effet
   reste réactivable en retirant sa ligne, et le commentaire dit pourquoi il
   a été coupé.
   ========================================================================== */

/* Hero : les faisceaux dérivaient derrière un lion qui a déjà son propre
   balayage doré. Deux lumières animées qui se croisent = bouillie. */
.hero::after { animation: none; }

/* Halos : la respiration des glows ajoutait un pouls lent sur des formes
   déjà floutées à 120px — invisible en soi, mais fatigant cumulé. */
.fx .glow { animation: none; opacity: 0.85; transform: none; }

/* Le maillot du teaser flottait pendant que la page a déjà le lion + le
   marquee. Il attend maintenant le survol. */
.fx .merch-teaser .mt-jersey--home, .fx .merch-teaser .mt-jersey--away { animation: none; }
.merch-teaser .mt-jersey { transition: transform 0.7s var(--ease-premium), filter 0.4s; }
@media (hover: hover) and (pointer: fine) {
  .merch-teaser .core:hover .mt-jersey--home { transform: translate(-62%, calc(-50% - 8px)); }
  .merch-teaser .core:hover .mt-jersey--away { transform: translate(-34%, calc(-50% - 8px)) scale(0.9) rotate(4deg); }
}

/* Grain : conservé (c'est la texture cinéma du site) mais ralenti — 0,84 s
   scintillait comme un vieux téléviseur. 2 s = pellicule. */
@media (pointer: fine) {
  .fx .grain { animation-duration: 2s; }
}

/* (Pas de règle .scroll-hint ici : l'indice de scroll a disparu de la home
   lors de la refonte du hero — l'index des divisions en bas d'écran signale
   déjà qu'il y a une suite. Sa CSS §7 est conservée pour un usage futur.) */

/* ==========================================================================
   40. TYPOGRAPHIE — le détail qui coûte cher
   ========================================================================== */

/* Pas de veuve dans un titre : le navigateur équilibre les lignes plutôt que
   de laisser un mot seul en bas. C'est LE réglage qui distingue un titre
   composé d'un titre déversé. */
h1, h2, h3, .display-xxl, .display-xl, .value-word, .mv-head, .st-line,
.m-name, .drop-title, .err-title, .lb-label h3 {
  text-wrap: balance;
}
/* Paragraphes : évite le mot orphelin en dernière ligne. */
p, .lead, .value-note, .qv-desc, .st-note {
  text-wrap: pretty;
}

/* Interlettrage optique : plus le corps est grand, plus il faut resserrer.
   Une seule valeur pour toutes les tailles est une signature d'amateur —
   Teko à 11rem avec le tracking d'un corps de 2rem paraît soufflé. */
.display-xxl { letter-spacing: -0.015em; }
.display-xl  { letter-spacing: -0.01em; }
h1, .h1      { letter-spacing: -0.005em; }
h2, .h2      { letter-spacing: 0.005em; }
h3, .h3      { letter-spacing: 0.01em; }
h4, .h4      { letter-spacing: 0.02em; }

/* Chiffres tabulaires : un compte à rebours dont les chiffres n'ont pas la
   même largeur tressaute à chaque seconde. Idem pour les prix et les scores
   qui changent. */
.countdown .cd-num, .cd-num, .m-price, .qv-price, .cl-price,
.cart-summary, .score, .value-num, .err-mono, .drop-meta strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Ligatures et cadratins désactivés sur les libellés espacés : avec
   letter-spacing, les ligatures se décollent et créent des trous. */
.eyebrow, .label, .tag, .mv-label, .m-cat, .sc-state, .drop-meta .dm,
.btn, .link-arrow, .chip, .main-nav a, .main-nav .nav-drop-btn {
  font-variant-ligatures: none;
}

/* Ponctuation suspendue : la marge optique des citations et listes. */
.st-note, .value-note, blockquote { hanging-punctuation: first last; }

/* Césure autorisée sur les colonnes étroites uniquement — jamais sur les
   titres, où une coupure serait une faute. */
@media (max-width: 767px) {
  .value-note, .qv-desc, .lead, .st-note { hyphens: auto; }
}
h1, h2, h3, h4, .display-xxl, .display-xl, .value-word { hyphens: manual; }

/* ==========================================================================
   41. RYTHME VERTICAL — modificateur de section
   .section pose un padding symetrique. Quand deux sections s'enchainent,
   les deux paddings s'additionnent et creent un trou. C'etait jusqu'ici
   corrige par un style="padding-top:0" recopie 27 fois a la main : une
   rustine invisible dans le CSS, impossible a auditer, et le signe qu'aucun
   systeme ne gerait le rythme.

   .section--flush dit la meme chose, mais le dit dans le systeme : on peut
   le chercher, le changer partout d'un coup, et il exprime une intention
   ("cette section colle a la precedente") au lieu d'une valeur.

   Les sections qui gardent leur respiration (bandes avec fond propre :
   .division-sec, .identity-band, .drop-sec) n'ont simplement pas la classe.
   ========================================================================== */
.section--flush { padding-top: 0; }
/* ==========================================================================
   42. CIBLES TACTILES (WCAG 2.2 — 2.5.8 Target Size Minimum)
   --------------------------------------------------------------------------
   Mesuré sur mobile : les liens du pied de page faisaient 17 px de haut et
   les .link-arrow 20 px, pour un minimum requis de 24 px. Au pouce, entre
   deux voisins aussi serrés, c'est une loterie.

   La zone cliquable grandit, PAS le dessin : on ne touche qu'au padding, et
   uniquement sur pointeur grossier (doigt). Le rendu desktop est inchangé —
   la souris n'a pas ce problème, et élargir partout aurait dilué le pied de
   page sans raison.
   ========================================================================== */
@media (pointer: coarse) {
  /* Pied de page : 17 px → ~31 px, en compensant la marge pour que
     l'interlignage visuel reste le même. */
  .footer-col li { margin-bottom: 0.15rem; }
  .footer-col a {
    display: inline-block;
    padding-block: 0.45rem;
  }

  /* Liens fléchés : 20 px → ~34 px */
  .link-arrow { padding-block: 0.45rem; }

  /* Liens du bandeau légal et des listes de contenu */
  .footer-base a, .mv-list a, .qv-info a, .faq-a a {
    display: inline-block;
    padding-block: 0.35rem;
  }

  /* Fermeture du bandeau de développement (17×26) */
  .dev-banner button { width: 32px; height: 32px; }
}

/* Rappel : .m-fav (36×36), .icon-btn (40×40) et les liens de nav (39 px)
   dépassent déjà les 24 px requis — on n'y touche pas. */

/* ==========================================================================
   43. LE FIL D'OR — la signature
   --------------------------------------------------------------------------
   Aurion = aurum + lion. Un fil d'or unique traverse la page : sa progression
   EST le scroll, et chaque section y est enfilée. Les sections ne s'empilent
   plus, elles sont reliées — c'est ça, « le scroll est un voyage ».

   Il n'est pas décoratif : c'est le sommaire de la page. Chaque nœud est un
   vrai lien focusable. Il remplace la barre de progression dégradée en haut
   de page, qui décrivait sans jamais servir.

   Coût : deux transforms scrubés dans un rAF throttlé. Aucune boucle
   permanente — le fil ne bouge que si TU bouges. C'est le principe posé au
   §39 : une seule chose s'anime en permanence, et ce n'est pas lui.
   ========================================================================== */
/* Le fil vit dans la GOUTTIÈRE, jamais sous le texte.
   Le conteneur fait --container (1240px) centré : la gouttière vaut donc
   (100vw - 1240px) / 2. On s'y cale, avec un plancher à 1.5rem pour les
   écrans juste au-dessus du seuil.
   Piège corrigé : un `left: 2.25rem` fixe plaçait le fil SOUS le texte de
   1100 à 1400px — la largeur de la plupart des portables. */
.thread {
  position: fixed;
  left: clamp(1.5rem, calc(50vw - var(--container) / 2 - 2.5rem), 5rem);
  top: 22vh; bottom: 22vh; z-index: 120;
  width: 1px;
  container-type: size;           /* pour le cqh du head */
  pointer-events: none;
}
.thread-track, .thread-fill {
  position: absolute; inset: 0; width: 1px;
}
.thread-track { background: rgba(255, 255, 255, 0.1); }
.thread-fill {
  background: linear-gradient(180deg, var(--aurion-gold-light), var(--aurion-gold));
  transform: scaleY(0); transform-origin: 50% 0;
  will-change: transform;
}
/* La tête : le point de lumière qui tire le fil */
.thread-head {
  position: absolute; top: 0; left: 50%; z-index: 2;
  width: 5px; height: 5px; margin: -2px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--aurion-gold-light);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.16), 0 0 12px 2px rgba(241, 214, 117, 0.5);
  will-change: transform;
}

/* --- Nœuds = sections --- */
.thread-nodes { position: absolute; inset: 0; }
/* Le POINT est l'ancre, centré sur le rail. Le libellé flotte à sa droite en
   position absolue : il ne pèse ni sur la mise en page, ni sur la zone
   cliquable.
   Piège corrigé : un `translateX(-50%)` sur le <li> centrait le bloc entier
   (point + libellé) sur le rail, ce qui poussait le point hors de l'écran
   d'une demi-largeur de libellé sur les écrans étroits. */
.thread-nodes li {
  position: absolute; top: var(--p, 0%); left: 0;
  transform: translateY(-50%);
  pointer-events: auto;
}
/* Cible de 24px (WCAG 2.5.8) centrée sur le rail, avec le point au milieu.
   Deux pièges évités ici : le reset global met `box-sizing: border-box`, donc
   une largeur de 5px + padding aurait donné 19px et non 24 — on dimensionne
   donc la cible directement. Et `.tn-dot` est un <span> : sans `display`,
   width/height seraient ignorés en inline. */
.thread-nodes a {
  position: relative;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  margin-left: -12px;
}
.tn-dot {
  display: block;                 /* un <span> inline ignorerait width/height */
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.45s var(--ease-premium), transform 0.45s var(--ease-premium),
              box-shadow 0.45s var(--ease-premium);
}
/* Le libellé n'apparaît QU'AU SURVOL / FOCUS.
   Il fut un temps affiché en permanence sur le chapitre courant : c'était
   redondant (le point marque déjà la position, et le titre de section est à
   l'écran) et surtout c'est ce libellé permanent qui risquait de passer sous
   le texte. Le fond opaque le garde lisible s'il déborde au survol. */
.tn-label {
  position: absolute; left: 100%; top: 50%;
  margin-left: 0.75rem;
  pointer-events: none;           /* ne doit jamais intercepter un clic sur le contenu */
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 0.6875rem; letter-spacing: 0.16em; line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  background: rgba(8, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translate(-6px, -50%);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium),
              color 0.4s var(--ease-premium);
}
/* Franchi : le fil a déposé son or au passage */
.thread-nodes li.is-passed .tn-dot { background: rgba(201, 164, 92, 0.55); }
/* Courant : le point s'ouvre et s'allume — sans libellé, il n'en a pas besoin */
.thread-nodes li.is-current .tn-dot {
  background: var(--aurion-gold-light);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, 0.14);
}
/* Au survol/focus, n'importe quel nœud se nomme */
.thread-nodes a:hover .tn-label,
.thread-nodes a:focus-visible .tn-label {
  opacity: 1; transform: translate(0, -50%); color: var(--aurion-gold-light);
}
.thread-nodes a:hover .tn-dot { background: var(--aurion-gold); transform: scale(1.4); }
.thread-nodes a:focus-visible { outline: 2px solid var(--aurion-blue); outline-offset: 4px; border-radius: 4px; }

/* Le curseur personnalisé masque les libellés : on le neutralise sur le fil */
.fx-cursor .thread-nodes a:hover ~ * { pointer-events: none; }

/* --- Garde-fous --- */
/* SEUIL : mesuré, pas deviné. Conteneur 1240px + cible de 24px centrée sur le
   rail → il faut ~1360px de viewport pour que la cible ne morde pas le texte
   (à 1320px elle le chevauchait de 3px). En dessous, fx.js pose la barre fine.
   Ce seuil laisse les portables 1366px profiter du fil.
   ⚠ Dupliqué dans fx.js (`min-width: 1360px`) : les deux DOIVENT rester
   synchrones, sinon on obtient soit deux indicateurs, soit aucun. */
@media (max-width: 1359px) { .thread { display: none; } }
.fx-dead .thread { display: none; }
@media (prefers-reduced-motion: reduce) {
  .thread-fill, .thread-head { transition: none; }
  .tn-dot, .tn-label { transition: none; }
}

/* ==========================================================================
   44. CARTES JOUEURS — les vraies
   --------------------------------------------------------------------------
   Les cartes officielles d'Aurion (1086×1448, fond noir) sont DÉJÀ des
   compositions finies : emblème, lion en filigrane, pseudo, rôle, fumée.
   Deux conséquences de direction artistique :

   1. On ne les encadre pas et on ne rajoute pas de libellé — ce serait
      redoubler ce que la carte dit déjà. Leur fond noir est FONDU dans la
      page par un masque : la carte n'a plus de bord, le joueur flotte.
   2. Toute l'animation porte la profondeur, jamais la décoration : la carte
      s'incline vers le curseur, se soulève, et une lumière dorée l'effleure.

   Le pseudo reste accessible via l'alt de l'image et le nom du lien — un
   lecteur d'écran ne « voit » pas le texte incrusté dans le visuel.
   ========================================================================== */
.roster-real {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(0.5rem, 2vw, 1.5rem);
  perspective: 1400px;
}
/* Séparateur entre les deux rosters d'une division à double roster. */
.roster-sep { margin: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.25rem, 3vw, 2rem); }

/* Révélation cinématique du roster : chaque joueur monte et pivote en 3D,
   l'un après l'autre — la line-up qu'on dévoile. Le wrapper .pc-slot porte
   l'entrée, la carte garde son tilt. Gaté par .fx (sans JS, tout est visible). */
/* Le wrapper porte la TAILLE (avant, la carte était un item de grille étiré ;
   enveloppée, elle perdait sa largeur → 0×0, joueurs invisibles). Le ratio
   vit ici, la carte le remplit. */
.pc-slot { position: relative; aspect-ratio: 1086 / 1448; }
.pc-slot > .player-card { width: 100%; height: 100%; aspect-ratio: auto; }
/* L'entrée est une ANIMATION (pas une transition gâchée par une classe .is-in
   posée en JS). Une animation `forwards` se joue seule au chargement et se
   fige sur l'état final visible : même si l'IntersectionObserver ne se
   déclenche jamais (roster hors écran, webview bridée…), les cartes finissent
   TOUJOURS visibles, sans clic ni survol. C'était la cause du roster « vide ».*/
.fx .roster-real .pc-slot {
  opacity: 0;
  transform-origin: 50% 100%;
  animation: pcSlotReveal 0.8s var(--ease-out-expo) forwards;
  animation-delay: calc(var(--i) * 60ms);
  will-change: transform, opacity;
}
@keyframes pcSlotReveal {
  from { opacity: 0; transform: translateY(38px) rotateX(14deg) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
/* Filet supplémentaire : si le JS pose quand même .is-in, l'état reste visible. */
.fx .roster-real.is-in .pc-slot { opacity: 1; transform: none; }
.fx-dead .roster-real .pc-slot { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .roster-real .pc-slot { opacity: 1 !important; transform: none !important; animation: none !important; }
}

.player-card {
  position: relative;
  display: block;
  aspect-ratio: 1086 / 1448;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.5s var(--ease-premium);
  will-change: transform;
}
.player-card img {
  width: 100%; height: 100%; object-fit: cover;
  /* Le masque mange les bords : plus de rectangle, le noir de la carte
     devient le noir de la page. C'est ce qui fait flotter le joueur. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 93%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 93%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: transform 0.7s var(--ease-premium), filter 0.5s var(--ease-premium);
}
/* Lumière dorée rasante : elle suit le curseur (--gx/--gy posés par fx.js) */
.player-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 40%),
    rgba(241, 214, 117, 0.16), transparent 60%);
  opacity: 0; transition: opacity 0.45s var(--ease-premium);
  mix-blend-mode: screen;
}
/* Contre-jour turquoise : les cartes officielles sont éclairées turquoise +
   or, comme les vrais maillots. On rejoue ce bi-éclairage — la clé turquoise
   arrive du bas opposé au curseur et « allume » la carte au survol. */
.player-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(75% 60% at 50% 118%,
    rgba(47, 140, 255, 0.22), transparent 62%);
  opacity: 0; transition: opacity 0.55s var(--ease-premium);
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) {
  .player-card:hover img, .player-card:focus-visible img {
    transform: scale(1.03);
    filter: brightness(1.08) contrast(1.02) saturate(1.05);
  }
  .player-card:hover::after, .player-card:focus-visible::after { opacity: 1; }
  .player-card:hover::before, .player-card:focus-visible::before { opacity: 1; }
}
.player-card:focus-visible { outline: 2px solid var(--aurion-blue); outline-offset: 4px; border-radius: 8px; }

/* Le staff n'est pas un roster : grille plus petite, plus sobre. */
.staff-real {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: clamp(0.5rem, 2vw, 1.25rem);
  perspective: 1400px;
}

/* Sélecteur ROSTER 1 / ROSTER 2 (divisions à double roster, ex. Aurion CDL).
   Contrôle segmenté sombre, accent doré sur l'onglet actif — cohérent avec
   .chip et l'identité turquoise/or. La bascule est un crossfade (voir
   .roster-real.is-switching plus bas). */
.roster-switch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.28rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(4px);
}
.rsw-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.35s var(--ease-premium), background 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
}
.rsw-btn:hover { color: var(--text-primary); }
.rsw-btn.is-active {
  color: var(--bg-900, #03060D);
  background: linear-gradient(135deg, var(--aurion-gold, #C9A45C), #f1d675);
  box-shadow: 0 6px 18px -8px rgba(201, 164, 92, 0.7);
}
.rsw-btn:focus-visible { outline: 2px solid var(--aurion-blue); outline-offset: 3px; }
@media (max-width: 479px) {
  .roster-switch { width: 100%; margin-top: 1rem; }
  .rsw-btn { flex: 1; padding: 0.6rem 0.5rem; text-align: center; }
}

/* Crossfade à la bascule de roster : le conteneur s'estompe et remonte
   légèrement, se reconstruit invisible, puis réapparaît. Sans .fx (JS off),
   la transition est ignorée et le contenu reste toujours visible. */
.roster-real { transition: opacity 0.32s var(--ease-premium), transform 0.32s var(--ease-premium); }
.roster-real.is-switching { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  .roster-real { transition: none; }
  .roster-real.is-switching { opacity: 1; transform: none; }
}

/* Compteur du roster — une vraie donnée, donc on l'affiche */
.roster-count {
  font-family: var(--font-display); font-size: 0.8125rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--aurion-gold);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .roster-real { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .staff-real { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .player-card, .player-card img { transition: none; transform: none !important; }
  .player-card::after, .player-card::before { display: none; }
}
.fx-dead .player-card { transform: none !important; }

/* ==========================================================================
   44. VISIONNEUSE JOUEUR 3D
   (L'aperçu roster des cartes divisions est stylé §22b — .dc-roster/.dc-av-more.)
   ========================================================================== */

/* --- Visionneuse joueur --- */
body.pv-lock { overflow: hidden; }
.pv {
  position: fixed; inset: 0; z-index: 340;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: radial-gradient(60% 60% at 50% 45%, rgba(8, 11, 18, 0.86), rgba(3, 4, 6, 0.96));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-premium), visibility 0.45s;
}
.pv.is-open { opacity: 1; visibility: visible; }

.pv-stage {
  position: relative; perspective: 1300px;
  display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
}
.pv-card {
  position: relative;
  height: min(74vh, 640px); aspect-ratio: 1086 / 1448;
  transform-style: preserve-3d;
  transform: rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg));
  transition: transform 0.4s var(--ease-premium);
  will-change: transform;
}
.pv-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 14px;
  /* Même fondu de bords que les cartes du roster : le joueur flotte */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.pv-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background: radial-gradient(300px circle at var(--pgx, 50%) var(--pgy, 35%),
    rgba(241, 214, 117, 0.2), transparent 60%);
  mix-blend-mode: screen;
}
/* Entrée : la carte surgit et se stabilise */
.pv-card.pv-in { animation: pvIn 0.55s var(--ease-out-expo); }
@keyframes pvIn {
  from { opacity: 0; transform: rotateY(-14deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.pv-cap { text-align: center; }
.pv-cap .pv-role {
  display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--aurion-gold);
}
.pv-cap .pv-name {
  display: block; font-family: var(--font-display); font-weight: 600;
  text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1; letter-spacing: 0.02em; margin: 0.35rem 0 0.3rem;
}
.pv-cap .pv-team { display: block; font-size: 0.8125rem; color: var(--text-secondary); }
.pv-cap .pv-link { display: inline-flex; margin-top: 1rem; }

.pv-close {
  position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 44px; height: 44px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  background: rgba(10, 12, 18, 0.6); backdrop-filter: blur(8px);
  transition: color 0.3s, border-color 0.3s, transform 0.3s var(--ease-premium);
}
.pv-close:hover { color: var(--text-primary); border-color: var(--border-strong); transform: rotate(90deg); }

.pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
  background: rgba(10, 12, 18, 0.5); backdrop-filter: blur(8px);
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s var(--ease-premium);
}
.pv-nav:hover { color: var(--aurion-gold); border-color: var(--m-line, rgba(201, 164, 92,0.4)); background: rgba(201, 164, 92, 0.08); }
.pv-prev { left: clamp(0.5rem, 3vw, 2.5rem); }
.pv-next { right: clamp(0.5rem, 3vw, 2.5rem); }
.pv-prev:hover { transform: translateY(-50%) translateX(-3px); }
.pv-next:hover { transform: translateY(-50%) translateX(3px); }

.pv-dots { display: flex; gap: 0.4rem; justify-content: center; }
.pv-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); transition: background 0.3s, transform 0.3s; }
.pv-dot.is-on { background: var(--aurion-gold); transform: scale(1.4); }

@media (max-width: 767px) {
  .pv-card { height: 62vh; }
  .pv-nav { width: 44px; height: 44px; }
  .pv-prev { left: 0.5rem; } .pv-next { right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pv, .pv-card, .pv-close, .pv-nav { transition: none; }
  .pv-card.pv-in { animation: none; }
  .pv-card { transform: none !important; }
}

/* ==========================================================================
   44. ÉTATS VIDES ENGAGEANTS (.empty-rich)
   Le site est en préparation : plutôt qu'un sec « Aucun… », on montre que
   c'est vivant et on dit CE QUI VIENT. Une SEULE animation par bloc (la
   pastille de vie), le reste statique — fidèle à la retenue du §39.
   Indicateur DORÉ (pas rouge « LIVE ») : on ne prétend jamais à du direct.
   ========================================================================== */
.empty-rich { gap: 1rem; }
.empty-flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.85rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(201, 164, 92, 0.35);
  background: rgba(201, 164, 92, 0.06);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--aurion-gold-light);
}
.empty-pulse {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--aurion-gold);
}
.fx .empty-pulse { animation: emptyPulse 2.2s ease-out infinite; }
@keyframes emptyPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(201, 164, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0); }
}
/* Halo doré statique derrière l'icône — de la présence, pas du mouvement */
.empty-ico--halo {
  position: relative; isolation: isolate;
  border-color: rgba(201, 164, 92, 0.35);
  color: var(--aurion-gold);
  background: rgba(201, 164, 92, 0.05);
}
.empty-ico--halo::after {
  content: ""; position: absolute; inset: -9px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 164, 92, 0.20), transparent 70%);
}
.empty-cta {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem;
  align-items: center; justify-content: center; margin-top: 0.4rem;
}
/* Permet de masquer entièrement une section vide (via HTML ou JS) */
.section-empty-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .empty-pulse { animation: none !important; }
}

/* ==========================================================================
   45. NAV MOBILE — SOUS-MENU DES 4 ROSTERS
   Cohérence avec le dropdown desktop : les divisions sont accessibles
   directement. Colonne unique (sûr dès 320px), révélation calée après les
   liens principaux, hover/focus doré. Masqué avec l'overlay (opacity/visibility
   du .mobile-nav) → rien à gérer sans JS de plus.
   ========================================================================== */
.mnav-rosters { display: flex; flex-direction: column; gap: 0.4rem; margin: 1.25rem 0; }
.mnav-rosters-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.15rem;
}
.mnav-rosters a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.9rem; border-radius: 0.85rem;
  border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
}
.mnav-rosters a:hover, .mnav-rosters a:focus-visible {
  border-color: rgba(201, 164, 92, 0.4); background: rgba(201, 164, 92, 0.06);
}
.mnav-rosters .mr-num {
  font-family: var(--font-display); font-size: 1.15rem; line-height: 1;
  color: var(--aurion-gold); flex: none; min-width: 1.4em;
}
.mnav-rosters .mr-name {
  flex: 1; font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1; color: var(--text-primary);
}
.mnav-rosters a:hover .mr-name, .mnav-rosters a:focus-visible .mr-name { color: var(--aurion-gold-light); }
.mnav-rosters .mr-tag {
  margin-left: auto; flex: none;
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
}
/* Sous-choix ROSTER 1 / ROSTER 2 sous Aurion CDL, version mobile. */
.mr-sub { display: flex; gap: 0.4rem; padding-left: 2.2rem; margin-top: -0.1rem; }
.mnav-rosters .mr-sub a {
  flex: 1; justify-content: center; gap: 0; padding: 0.55rem 0.5rem;
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-secondary);
}
.mnav-rosters .mr-sub a:hover, .mnav-rosters .mr-sub a:focus-visible { color: var(--aurion-gold-light); }

/* Révélation avec l'ouverture du menu, juste après les liens principaux */
.mnav-rosters { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-premium) 0.34s, transform 0.6s var(--ease-premium) 0.34s; }
body.nav-open .mnav-rosters { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mnav-rosters { transition: none; }
}

/* ==========================================================================
   44. PORTAIL CANDIDAT (join.html)
   --------------------------------------------------------------------------
   Postuler exige un compte : la candidature est stockee et liee au compte,
   pour que le candidat lise notre reponse sur /mes-candidatures.php.
   .join-gate  : bloc « connecte-toi » quand le visiteur est anonyme.
   .join-connected : rappel discret du compte quand il est connecte.
   .join-success   : panneau de confirmation renforce apres un envoi reussi.
   ========================================================================== */
.join-gate {
  border: 1px solid var(--border-strong);
  background: rgba(201, 164, 92, 0.06);
  border-radius: var(--radius-core);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.75rem;
}
.join-gate-title { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: 0 0 0.4rem; }
.join-gate-text { color: var(--text-secondary); margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.55; }
.join-gate-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.join-connected {
  color: var(--text-secondary); font-size: 0.9rem;
  margin: 0 0 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.join-connected .join-switch { color: var(--text-muted); margin-left: 0.5rem; text-decoration: underline; }

.join-success { text-align: center; padding: 1.5rem 1rem 0.5rem; }
.join-success-ico {
  width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #86EFAC; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.4);
}
.join-success-ico svg { width: 32px; height: 32px; }
.join-success-title { font-family: var(--font-display); font-weight: 600; margin: 0 0 0.6rem; }
.join-success-text { color: var(--text-secondary); max-width: 46ch; margin: 0 auto 1.5rem; line-height: 1.6; }
.join-success-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Bio joueur (player.html) — narration remplie depuis le back-office. */
.player-bio p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 1rem; }
.player-bio p:last-child { margin-bottom: 0; }

/* Fiche joueur enrichie (player.html) — remplie depuis le back-office. */
.player-devise blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.3;
  color: var(--aurion-gold); text-align: center;
}
.player-perf .id-grid { margin: 0; }
.player-perf .perf-sub {
  margin: 1.5rem 0 0.75rem; font-size: 0.6875rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted);
}
.player-perf .perf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.player-perf .perf-list li {
  position: relative; padding-left: 1.4rem; color: var(--text-secondary); line-height: 1.5;
}
.player-perf .perf-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem; border: 1px solid var(--aurion-gold);
  transform: rotate(45deg);
}

/* ==========================================================================
   45. BANDEAU D'ANNONCE GLOBAL (piloté depuis le back-office)
   Barre fixe en haut. body.has-announce pose --announce-h : le header
   (top: var(--announce-h)) et le contenu (padding-top) se décalent d'autant.
   ========================================================================== */
body.has-announce { --announce-h: 2.75rem; padding-top: var(--announce-h); }
.announce-bar {
  position: fixed; top: 0; inset-inline: 0; z-index: 120;
  height: var(--announce-h, 2.75rem);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 0 3rem 0 1rem; /* place à droite pour le bouton fermer */
  font-size: 0.8125rem; line-height: 1.2;
  background: #0A1220; color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
}
.announce-bar .an-msg {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.announce-bar .an-link {
  flex: none; color: var(--aurion-gold); text-decoration: underline;
  white-space: nowrap; font-weight: 600;
}
.announce-bar .an-close {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-secondary); cursor: pointer;
  border-radius: 8px;
}
.announce-bar .an-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.announce-bar .an-close svg { width: 15px; height: 15px; }
/* Niveau « live » : accent rouge + point clignotant. */
.announce-bar--live { background: #1A0C0E; border-bottom-color: rgba(239,68,68,0.4); }
.announce-bar--live .an-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F87171;
  box-shadow: 0 0 0 0 rgba(248,113,113,0.6); animation: an-pulse 1.6s ease-out infinite;
}
@keyframes an-pulse {
  0% { box-shadow: 0 0 0 0 rgba(248,113,113,0.6); }
  70% { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
}
@media (prefers-reduced-motion: reduce) { .announce-bar--live .an-dot { animation: none; } }
@media (max-width: 560px) { .announce-bar .an-link { display: none; } }

/* ==========================================================================
   §46 · POT DE MIEL (anti-spam des formulaires publics)
   Le champ doit être invisible et hors du parcours clavier, MAIS rester
   présent dans le rendu : beaucoup de robots ignorent les champs en
   `display:none`. On le sort donc de l'écran plutôt que de le supprimer.
   ========================================================================== */
.hp-field {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   §47 · PAGE « MON COMPTE »
   L'ancienne version tenait dans la carte d'authentification de 440 px : trop
   petite pour présenter identité, rôle, permissions et actions. Ici, une vraie
   page de compte — même direction artistique (bleu nuit + or), mais
   dimensionnée pour son contenu, centrée et responsive.
   ========================================================================== */
.account-page { min-height: 100vh; display: flex; flex-direction: column; }
.account-wrap {
  width: 100%; max-width: 980px; margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  flex: 1;
}
.account-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.account-brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.account-brand img { width: 46px; height: 46px; object-fit: contain; }
.account-brand span {
  font-family: var(--font-display, inherit); font-size: 1.25rem;
  letter-spacing: 0.04em; color: var(--text-primary); text-transform: uppercase;
}
.account-brand em { font-style: normal; color: var(--aurion-gold); }

.account-hero { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.account-hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 0.35rem; line-height: 1.05; }
.account-hero p { color: var(--text-secondary); margin: 0; }

/* Bandeau d'identité : monogramme + email + rôle. Léger halo bleu nuit + or
   pour en faire l'ancre visuelle de la page, au-dessus des cartes. */
.account-identity > .core {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(198, 160, 74, 0.10), transparent 55%),
    linear-gradient(135deg, var(--aurion-blue-deep), var(--surface));
}
.account-id { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.5rem); flex-wrap: wrap; }
.account-avatar {
  flex: none; width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--aurion-blue-strong), var(--aurion-blue-deep));
  border: 1px solid var(--aurion-gold); color: #fff;
  box-shadow: 0 0 0 4px rgba(198, 160, 74, 0.12), 0 8px 24px rgba(3, 6, 13, 0.4);
  font-family: var(--font-display, inherit); font-size: 1.6rem; letter-spacing: 0.05em;
}
.account-id-main { min-width: 0; }
.account-id-main strong { display: block; font-size: 1.05rem; word-break: break-word; }
.account-id-main .account-role { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; }

.account-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.5vw, 1.5rem); margin-top: clamp(1.25rem, 3vw, 2rem);
}
/* La carte Informations occupe toute la largeur : ses 3 cellules (email, rôle,
   membre depuis) respirent au lieu d'être tassées dans une colonne étroite. */
.account-card--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .account-grid { grid-template-columns: 1fr; } }

/* Cartes du compte : survol discret, cohérent avec le reste du site. */
.account-grid > .shell { transition: transform 0.4s var(--ease-premium); }
.account-grid > .shell:hover { transform: translateY(-3px); }

.account-card-title {
  position: relative; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-muted);
  margin: 0 0 1.1rem; padding-left: 0.85rem;
}
.account-card-title::before {
  content: ""; position: absolute; left: 0; top: 0.05em; bottom: 0.05em;
  width: 3px; border-radius: 3px; background: var(--aurion-gold);
}

/* Liste des permissions : lisible d'un coup d'oeil, jamais un pavé technique. */
.perm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.perm-list li {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-subtle);
}
.perm-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.perm-list .perm-name { flex: none; min-width: 9.5rem; color: var(--text-primary); font-weight: 600; }
.perm-list .perm-acts { color: var(--text-secondary); font-size: 0.875rem; }
.perm-all { color: var(--aurion-gold); font-weight: 600; }

.account-actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--border-subtle);
}
@media (max-width: 520px) {
  .account-actions .btn, .account-actions .btn-logout { width: 100%; justify-content: center; }
  .account-avatar { width: 56px; height: 56px; font-size: 1.3rem; }
}
/* La déconnexion est un formulaire POST (protégé CSRF), pas un lien : il ne
   doit pas casser l'alignement de la rangée de boutons. */
.account-actions form { display: contents; }

/* ==========================================================================
   §48 · STAFF PUBLIC — mêmes cartes que le roster joueurs
   Le staff réutilise .roster-real / .pc-slot / .player-card : même format,
   mêmes animations, même grille responsive. Seule différence : une légende
   sous la carte porte le nom et la FONCTION (un joueur a son pseudo imprimé
   sur sa carte, pas un membre du staff).
   ========================================================================== */
.staff-lineup .pc-slot { aspect-ratio: auto; }
.staff-lineup .pc-slot > .player-card { aspect-ratio: 1086 / 1448; height: auto; }
.staff-cap { display: block; margin-top: 0.7rem; text-align: center; }
.staff-cap .sc-name {
  display: block; font-family: var(--font-display, inherit);
  font-size: 1.05rem; letter-spacing: 0.03em; color: var(--text-primary);
  text-transform: uppercase;
}
.staff-cap .sc-role {
  display: block; margin-top: 0.15rem;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--aurion-gold);
}
.staff-cap .sc-team { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--text-muted); }

/* Roster joueurs avec légende visible (pseudo + rôle sous la carte).
   Comme le staff, le slot passe en hauteur auto pour laisser la place à la
   légende ; la carte garde son ratio de portrait. */
.pc-slot--cap { aspect-ratio: auto; }
.pc-slot--cap > .player-card { aspect-ratio: 1086 / 1448; height: auto; }
.pc-slot--cap .sc-name { font-size: 1.15rem; }

/* Drapeau pays (préfixe du pseudo) — l'emoji porte sa propre couleur. */
.sc-flag { margin-right: 0.35rem; font-size: 0.95em; line-height: 1; }

/* ==========================================================================
   §48b · CARTES « TRADING CARD » — roster Aurion CDL (.roster-framed)
   Cadre doré à coins crantés, portrait plein cadre, pseudo + rôle incrustés
   en bas, repères d'angle. Scopé à .roster-framed : le reste du site garde
   les cartes flottantes classiques.
   ========================================================================== */
.roster-framed { perspective: 1500px; }

/* Le slot EST la carte : ratio portrait fixe, filet doré via dégradé + coins
   crantés (clip-path). Le padding donne l'épaisseur du filet. */
.roster-framed .pc-slot--framed {
  --pc-notch: 20px;
  aspect-ratio: 1086 / 1448;
  padding: 1.5px;
  background: linear-gradient(160deg,
    rgba(241, 214, 117, 0.85) 0%, rgba(201, 164, 92, 0.32) 32%,
    rgba(201, 164, 92, 0.12) 55%, rgba(241, 214, 117, 0.7) 100%);
  clip-path: polygon(
    var(--pc-notch) 0, 100% 0, 100% calc(100% - var(--pc-notch)),
    calc(100% - var(--pc-notch)) 100%, 0 100%, 0 var(--pc-notch));
  box-shadow: -14px 0 34px -22px rgba(241, 214, 117, 0.55);
}

/* La carte : fond sombre, même découpe, remplit le slot (pas de ratio ici). */
.roster-framed .pc-slot--framed > .player-card {
  width: 100%; height: 100%; aspect-ratio: auto;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(47, 140, 255, 0.05), transparent 60%),
    linear-gradient(180deg, #12151d 0%, #0a0c12 100%);
  clip-path: polygon(
    var(--pc-notch) 0, 100% 0, 100% calc(100% - var(--pc-notch)),
    calc(100% - var(--pc-notch)) 100%, 0 100%, 0 var(--pc-notch));
}

/* Portrait plein cadre : on retire le masque flottant, on recadre sur le buste. */
.roster-framed .player-card img {
  -webkit-mask-image: none; mask-image: none;
  object-fit: cover; object-position: 50% 12%;
}
.roster-framed .player-silhouette { border-radius: 0; }

/* Repères d'angle « //// » en haut à droite. */
.roster-framed .pc-ticks {
  position: absolute; top: 12px; right: 16px; z-index: 3;
  width: 34px; height: 12px; pointer-events: none; opacity: 0.7;
  background: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, 0.55) 0 2px, transparent 2px 5px);
}

/* Légende incrustée : barre sombre en bas, pseudo + rôle. */
.roster-framed .pc-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.85rem 0.9rem 0.8rem; text-align: left;
  background: linear-gradient(180deg, transparent,
    rgba(6, 8, 13, 0.82) 38%, rgba(6, 8, 13, 0.96));
}
.roster-framed .pc-cap::before {
  content: ""; position: absolute; left: 0.9rem; top: 0.55rem;
  width: 14px; height: 2px; background: var(--aurion-gold, #C9A45C);
}
.roster-framed .pc-cap-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.35rem); line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
}
.roster-framed .pc-cap-role {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--aurion-gold, #C9A45C);
}
/* Chevron doré, coin bas droit. */
.roster-framed .pc-cap::after {
  content: ""; position: absolute; right: 12px; bottom: 12px;
  width: 15px; height: 15px; opacity: 0.9;
  background: var(--aurion-gold, #C9A45C);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Pastille de statut du joueur (Actif / Remplaçant / Inactif / Recrutement). */
.player-status {
  display: inline-block; margin-top: 0.35rem;
  padding: 0.12rem 0.55rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent;
}
.player-status.is-actif       { color: #86EFAC; background: rgba(34, 197, 94, 0.12);  border-color: rgba(34, 197, 94, 0.35); }
.player-status.is-remplacant  { color: #FCD34D; background: rgba(234, 179, 8, 0.12);  border-color: rgba(234, 179, 8, 0.35); }
.player-status.is-inactif     { color: var(--text-muted); background: rgba(255,255,255,0.04); border-color: var(--border-subtle); }
.player-status.is-recrutement { color: #93C5FD; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); }

/* Liens réseaux sous une carte joueur / staff : petites pastilles. */
.sc-socials { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.45rem; }
.sc-social {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; height: 1.7rem; padding: 0 0.4rem;
  border-radius: 999px; border: 1px solid var(--border-subtle);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-secondary); background: rgba(255, 255, 255, 0.02);
  transition: color 0.3s var(--ease-premium), border-color 0.3s var(--ease-premium);
}
.sc-social:hover { color: var(--aurion-gold); border-color: rgba(201, 164, 92, 0.5); }

/* Silhouette anonyme quand aucune photo n'est disponible — jamais de carte
   vide, mais aucune image inventée. Occupe le cadre du portrait. */
.player-silhouette {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 100%; aspect-ratio: 1086 / 1448;
  border-radius: var(--radius-core);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(47, 140, 255, 0.06), transparent 65%),
    rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.14);
}
.player-silhouette svg { width: 62%; height: auto; margin-bottom: -2%; }

/* Carte « Slot ouvert » déclarée depuis le back-office (appel à candidature). */
.pc-slot--open .player-slot {
  height: 100%; aspect-ratio: 1086 / 1448;
  align-items: center; justify-content: center;
  border: 1px dashed var(--border-subtle);
}
.pc-slot--open .ps-plus {
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 3.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(201, 164, 92, 0.35);
}
.pc-slot--open .sc-role { color: var(--aurion-gold); }

/* ==========================================================================
   §49 · AURION TV — cartes de live
   Une carte = un live partagé par un membre. Aucun badge « en direct » n'est
   affiché tant que le statut n'est pas vérifiable auprès de la plateforme :
   annoncer un direct qui n'existe pas serait une information fausse.
   ========================================================================== */
/* Cartes de lives : format HORIZONTAL compact et sobre — vignette à gauche,
   pseudo + plateforme + petit bouton « Regarder » à droite. Plus de vignette
   géante ni d'icône Play surdimensionnée. */
.live-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: clamp(0.75rem, 2vw, 1.1rem);
}
.live-card {
  display: flex; flex-direction: row; align-items: stretch; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 12px; text-decoration: none; color: inherit;
  transition: border-color 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo);
}
a.live-card:hover, a.live-card:focus-visible { border-color: var(--aurion-blue); transform: translateY(-2px); }
.live-thumb {
  position: relative; display: block; flex: 0 0 auto;
  width: 128px; aspect-ratio: 16 / 9; align-self: center; border-radius: 8px;
  margin: 0.7rem 0 0.7rem 0.7rem;
  background: linear-gradient(135deg, var(--background-secondary), var(--surface-hover));
  overflow: hidden;
}
.live-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-thumb .lv-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0.8; }
.live-thumb .lv-play svg { width: 22px; height: 22px; }
.live-body { flex: 1 1 auto; min-width: 0; padding: 0.75rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; }
.live-body .lv-streamer {
  font-family: var(--font-display, inherit); font-size: 1.05rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-body .lv-title {
  color: var(--text-secondary); font-size: 0.85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-body .lv-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.35rem; }
.live-body .lv-foot .tag { font-size: 0.7rem; }
.lv-watch {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 0.3rem 0.8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent;
  font-family: var(--font-display, inherit); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary);
  transition: border-color 0.3s var(--ease-out-expo), background 0.3s var(--ease-out-expo), color 0.3s var(--ease-out-expo);
}
a.live-card:hover .lv-watch, a.live-card:focus-visible .lv-watch {
  border-color: var(--aurion-blue); background: var(--aurion-blue); color: #03060d;
}
@media (max-width: 479px) {
  .live-thumb { width: 104px; }
  .live-body { padding: 0.65rem 0.8rem; }
}

/* ==========================================================================
   §50 · CONNEXION GOOGLE
   Bouton secondaire, clairement distinct du bouton principal Aurion, avec un
   séparateur qui dit que les deux chemins mènent au même compte.
   ========================================================================== */
.auth-sep {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.25rem 0; color: var(--text-muted);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.75rem 1.1rem; border-radius: 10px;
  background: #FFFFFF; color: #1F1F1F; border: 1px solid #DADCE0;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-google:hover { background: #F3F4F6; }
.btn-google:focus-visible { outline: 2px solid var(--aurion-blue); outline-offset: 2px; }
.btn-google svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   §51 · BOUTIQUE FERMÉE
   État affiché quand la boutique est désactivée depuis le back-office. Le
   blocage réel est côté serveur ; ceci n'est que la version lisible.
   ========================================================================== */
.shop-closed { max-width: 620px; margin: 0 auto; text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; }
.shop-closed h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 0.75rem; }
.shop-closed p { color: var(--text-secondary); margin: 0 0 1.5rem; }