/* ═══════════════════════════════════════════════════════════════════
   GFTC MMA — Style Futuriste
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #080808;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --red: #c9a227;
  --red-light: #e8c84a;
  --red-glow: rgba(201,162,39,0.4);
  --gold: #f0c040;
  --gold-light: #fcd34d;
  --text: #e5e5e5;
  --text-muted: #888;
  --border: rgba(201,162,39,0.2);
  --border-hover: #c9a227;
  --nav-h: 72px;
  --font-title: 'Orbitron', monospace;
  /* 'Inter' retiré de la pile : elle n'était qu'un repli derrière Rajdhani,
     donc jamais affichée — mais ses 8 fichiers pesaient 520 Ko dans les polices
     auto-hébergées. Le repli est désormais la sans-serif du système. */
  --font-body: 'Rajdhani', sans-serif;
  --transition: 0.3s cubic-bezier(0.25,0.8,0.25,1);
  --radius: 8px;
  --glow-red: 0 0 20px rgba(201,162,39,0.5);
  --glow-gold: 0 0 20px rgba(240,192,64,0.5);
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Font Awesome est chargée hors du chemin critique (cf. base.html) : elle arrive
   donc APRÈS le premier rendu. Sans réservation, chaque pictogramme naît large
   de 0 px puis pousse le texte à côté de lui en apparaissant — c'est ce qui
   faisait grimper le CLS à 0,171. On fige la case ici, dans la feuille bloquante,
   donc dès la première image affichée. 1,25em = la largeur `fa-fw` de la police. */
i.fas, i.far, i.fab, i.fa-solid, i.fa-regular, i.fa-brands {
  display: inline-block;
  width: 1.25em;
  text-align: center;
  font-style: normal;
}
html { scroll-behavior: smooth; background: #000; min-height: 100%; }
body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}
/* Le scroll-wrap (et non body/html) porte overflow-x:hidden : sur mobile, un ancêtre
   avec overflow non-visible casse position:fixed pour la vidéo/particules de fond,
   qui les fait défiler avec la page au lieu de rester fixes. */
.page-scroll-wrap { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }
::selection { background: var(--red); color: white; }

/* ── Vidéo de fond globale ──────────────────────────────────────────── */
.site-bg-video {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  pointer-events: none;
}
.site-bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,5,8,0.30);
  z-index: -1;
  pointer-events: none;
}

/* ── Particules ─────────────────────────────────────────────────────── */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particles::before, .particles::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--red);
  box-shadow:
    100px 200px var(--red), 200px 400px rgba(201,162,39,0.3),
    350px 100px rgba(245,158,11,0.2), 500px 300px rgba(201,162,39,0.2),
    700px 150px rgba(245,158,11,0.3), 900px 450px var(--red),
    150px 600px rgba(201,162,39,0.2), 800px 700px rgba(245,158,11,0.1),
    1200px 100px rgba(201,162,39,0.3), 1400px 500px rgba(245,158,11,0.2),
    300px 800px rgba(201,162,39,0.15), 1100px 300px rgba(245,158,11,0.3),
    600px 900px rgba(201,162,39,0.2), 1500px 200px rgba(201,162,39,0.1),
    400px 1100px rgba(245,158,11,0.15), 1300px 800px rgba(201,162,39,0.2);
  animation: drift 20s linear infinite;
}
.particles::after {
  animation-duration: 30s;
  animation-delay: -10s;
  box-shadow:
    500px 100px rgba(201,162,39,0.1), 800px 300px rgba(245,158,11,0.2),
    1200px 500px rgba(201,162,39,0.3), 200px 700px rgba(245,158,11,0.1),
    1000px 900px rgba(201,162,39,0.2), 600px 400px rgba(245,158,11,0.3),
    300px 200px rgba(201,162,39,0.15), 1400px 700px rgba(245,158,11,0.1);
}
@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-100vh); }
}

/* ── Navigation ─────────────────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  background: rgba(8,8,8,0.8);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.navbar.scrolled {
  background: rgba(8,8,8,0.95);
  border-bottom-color: var(--red);
  box-shadow: 0 4px 30px rgba(201,162,39,0.2);
}
.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: flex;
  align-items: center;
}
.nav-logo-img {
  height: 52px;
  width: 52px;          /* fixe, pas `auto` : le logo est carré, et `auto` laissait
                           l'image s'étaler à 1254px avant application de la CSS */
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(201,162,39,0.5));
  transition: var(--transition);
}
.nav-logo-img:hover {
  filter: drop-shadow(0 0 18px rgba(201,162,39,0.9));
  transform: scale(1.05);
}
.logo-gftc { color: var(--red); text-shadow: var(--glow-red); }
.logo-mma { color: white; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-link {
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%; height: 2px;
  background: var(--red);
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active {
  color: white;
}
.nav-link:hover::after, .nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}
.nav-link.nav-cta {
  background: var(--red);
  color: white !important;
  padding: 8px 18px;
  border-radius: 4px;
}
.nav-link.nav-cta::after { display: none; }
.nav-link.nav-cta:hover {
  background: var(--red-light);
  box-shadow: var(--glow-red);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  transition: var(--transition);
}

/* ── Flash messages ──────────────────────────────────────────────────── */
.flash-container {
  position: fixed;
  top: calc(var(--nav-h) + 12px);
  right: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flash {
  background: rgba(15,15,15,0.95);
  border: 1px solid;
  border-radius: var(--radius);
  padding: 12px 40px 12px 16px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  position: relative;
  animation: slideInRight 0.3s ease;
}
.flash-success { border-color: #22c55e; }
.flash-success i { color: #22c55e; }
.flash-error { border-color: #ef4444; }
.flash-error i { color: #ef4444; }
.flash-info, .flash-warning { border-color: var(--gold); }
.flash-info i, .flash-warning i { color: var(--gold); }
.flash-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--text-muted); }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  /* Texte quasi noir et non blanc : sur l'or #c9a227, le blanc ne donne que
     2,42:1 là où WCAG AA exige 4,5 — le libellé était illisible pour une partie
     des visiteurs et faisait échouer l'audit d'accessibilité. Le noir donne
     8,29:1, et c'est déjà ce que fait .btn-gold sur ce même or. */
  color: #0a0800;
  border-color: var(--red);
}
.btn-primary:hover {
  background: var(--red-light);
  color: #0a0800;
  border-color: var(--red-light);
  box-shadow: var(--glow-red);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: rgba(255,255,255,0.3);
}
.btn-outline:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: var(--glow-red);
}
.btn-lg { padding: 16px 32px; font-size: 1rem; }
.btn-sm { padding: 6px 14px; font-size: 0.8rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-danger { background: #78600a; color: white; border-color: #78600a; }
.btn-danger:hover { background: #ef4444; border-color: #ef4444; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ── Container ───────────────────────────────────────────────────────── */
main { background: transparent; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; position: relative; }
.section-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.section-tag {
  display: inline-block;
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.4);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.section-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 1;
}
.section-link {
  font-size: 0.85rem;
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  transition: var(--transition);
}
.section-link:hover { color: var(--red-light); gap: 10px; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) saturate(0.8); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0.3) 50%, rgba(8,8,8,0.9) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 40px 24px;
}
.hero-badge {
  display: inline-block;
  background: var(--red);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-bottom: 20px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.hero-title {
  font-family: var(--font-title);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  color: white;
  text-shadow: 0 0 60px rgba(201,162,39,0.6), 0 4px 30px rgba(0,0,0,0.8);
  margin-bottom: 12px;
  position: relative;
}
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0; right: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,162,39,0.3);
  z-index: -1;
  transform: translate(4px, 4px);
}
.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
.hero-info {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}
.hero-info span { display: flex; align-items: center; gap: 8px; }
.hero-info i { color: var(--red); }

/* Countdown */
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}
.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.countdown-num {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: white;
  background: rgba(201,162,39,0.15);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 6px;
  padding: 12px 18px;
  min-width: 80px;
  text-align: center;
  line-height: 1;
  text-shadow: var(--glow-red);
}
.countdown-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.countdown-sep {
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 900;
  color: var(--red);
  margin-top: -20px;
}
.hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--text-muted);
  animation: bounce 2s infinite;
  font-size: 1.2rem;
}
@keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ── Page Hero (sous-pages) ───────────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: calc(var(--nav-h) + 60px) 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-hero-sm { padding: calc(var(--nav-h) + 40px) 0 40px; }
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(201,162,39,0.15) 0%, transparent 60%);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,8,8,0.7) 0%, rgba(8,8,8,0.85) 100%);
}
.page-hero-content { position: relative; z-index: 1; padding: 0 24px; }
.page-title {
  font-family: var(--font-title);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 12px 0;
}
.page-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  margin: 8px auto;
}
.page-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.page-meta span { display: flex; align-items: center; gap: 6px; }
.page-meta i { color: var(--red); }

/* ── Cards génériques ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: var(--transition);
}
.card:hover {
  border-color: var(--red);
  background: var(--bg-card-hover);
  box-shadow: var(--glow-red), 0 8px 40px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}

/* ── Highlights ──────────────────────────────────────────────────────── */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.highlight-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.highlight-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--glow-red); }
.highlight-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.highlight-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.highlight-card:hover .highlight-thumb img { transform: scale(1.05); filter: brightness(0.7); }
.highlight-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: var(--transition);
}
.highlight-card:hover .highlight-play { opacity: 1; }
.highlight-play i { font-size: 3rem; color: white; background: var(--red); border-radius: 50%; padding: 16px; }
.highlight-info { padding: 12px 16px; }
.highlight-info p { font-size: 0.9rem; color: var(--text-muted); }

/* ── Events list ─────────────────────────────────────────────────────── */
.events-list { display: flex; flex-direction: column; gap: 12px; }
.event-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}
.event-row:hover { border-color: var(--red); background: var(--bg-card-hover); }
.event-code {
  font-family: var(--font-title);
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--red);
  min-width: 90px;
  text-shadow: var(--glow-red);
}
.event-info { flex: 1; }
.event-info h3 { font-size: 1rem; font-weight: 600; margin-bottom: 4px; }
.event-info span { font-size: 0.85rem; color: var(--text-muted); margin-right: 16px; }
.event-info i { color: var(--red); margin-right: 4px; }

/* ── Fighters grid ───────────────────────────────────────────────────── */
.fighters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.fighters-grid-full { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fighter-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  display: block;
}
.fighter-card:hover { border-color: var(--red); transform: translateY(-6px); box-shadow: var(--glow-red), 0 20px 40px rgba(0,0,0,0.5); }
.fighter-photo {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111;
  position: relative;
}
.fighter-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(30%);
  transition: transform 0.5s, filter 0.3s;
}
.fighter-card:hover .fighter-photo img { transform: scale(1.08); filter: grayscale(0%); }
.fighter-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(201,162,39,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: var(--transition);
}
.fighter-card:hover .fighter-photo-overlay { opacity: 1; }
.fighter-placeholder, .fighter-placeholder-lg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,162,39,0.16) 0%, #0d0d0d 70%);
  border: 1px solid rgba(201,162,39,0.25);
}
.fighter-placeholder i, .fighter-placeholder-lg i {
  font-size: 3rem;
  color: rgba(201,162,39,0.55);
  filter: drop-shadow(0 0 14px rgba(201,162,39,0.35));
}
.fighter-placeholder-lg i { font-size: 5rem; }
.fighter-placeholder span, .fighter-placeholder-lg span {
  font-family: var(--font-title);
  font-weight: 900;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: rgba(201,162,39,0.5);
}
.fighter-placeholder-lg span { font-size: 0.9rem; }
.fighter-info { padding: 14px; }
.fighter-record { font-family: var(--font-title); font-size: 0.8rem; color: var(--gold); margin-bottom: 4px; }
.fighter-info h3 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 6px; }
.fighter-cat { font-size: 0.75rem; color: var(--text-muted); }
.fighter-streak { display: block; font-size: 0.75rem; color: var(--gold); margin-top: 4px; }
.fighter-flag { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.fighter-record-badge {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--gold);
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  padding: 2px 8px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 6px;
}

/* ── Valeurs ─────────────────────────────────────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.value-card {
  text-align: center;
  padding: 40px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}
.value-card:hover { border-color: var(--gold); background: var(--bg-card-hover); transform: translateY(-4px); }
.value-icon { font-size: 2.5rem; margin-bottom: 16px; color: var(--red); }
.value-card:hover .value-icon { color: var(--gold); text-shadow: var(--glow-gold); }
.value-card h3 {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 12px;
}
.value-card p { font-size: 0.9rem; color: var(--text-muted); }

/* ── Partenaires (marquee) ──────────────────────────────────────────── */
.partners-marquee { overflow: hidden; position: relative; padding: 20px 0; margin-bottom: 30px; }
.partners-marquee::before, .partners-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
}
.partners-marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.partners-marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.partners-track {
  display: flex;
  gap: 40px;
  animation: marquee 30s linear infinite;
  width: max-content;
}
.partners-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partner-item {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  filter: brightness(0.6);
  transition: var(--transition);
  white-space: nowrap;
}
.partner-item:hover { filter: brightness(1); border-color: var(--red); }
/* Sans souris, `:hover` n'arrive JAMAIS : le `brightness(0.6)` ci-dessus reste
   posé en permanence et les logos, pourtant blancs, s'affichent en gris sur
   téléphone. On rend donc l'état plein la valeur par défaut là où le survol
   n'existe pas. Critère `hover: none` et non une largeur d'écran : une tablette
   tactile large a le même problème, un petit écran avec souris ne l'a pas. */
@media (hover: none) {
  .partner-item { filter: none; }
}
/* Logos servis pré-normalisés (canevas 3:1 commun) → une seule taille, valable
   pour tous. Les règles par `data-pid` qui rattrapaient à la main les logos trop
   petits ont disparu avec leur cause : c'étaient des identifiants de base de
   données écrits en dur dans la feuille de style, à refaire à chaque partenaire. */
.partner-item img { width: 132px; height: 44px; filter: brightness(0) invert(1); }
/* Partenaire sans logo : le nom tient la place du logo, donc il en prend le poids. */
.partner-name { font-weight: 800; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--text); }
.partners-cta { text-align: center; }

/* ── Events page ─────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; margin-bottom: 32px; }
.tab-btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 10px 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
}
.tab-btn.active, .tab-btn:hover { background: var(--red); color: white; border-color: var(--red); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.event-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  transition: var(--transition);
}
.event-card:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--glow-red); }
.event-card-upcoming { border-left: 4px solid var(--red); }
.event-card-poster { background: #111; display: flex; align-items: center; justify-content: center; }
.event-card-poster img { width: 100%; height: 100%; object-fit: contain; }
.event-poster-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--red);
  background: linear-gradient(135deg, #111, #0d0b00);
}
.event-poster-placeholder.past { color: var(--text-muted); }
.event-card-body { padding: 28px 28px 28px 0; }
.event-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.event-status-badge.upcoming { background: var(--red); color: white; }
.event-status-badge.past { background: rgba(255,255,255,0.1); color: var(--text-muted); }
.event-code-title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 900; color: var(--red); margin-bottom: 6px; }
.event-title { font-size: 1.1rem; color: rgba(255,255,255,0.8); margin-bottom: 16px; }
.event-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.event-meta-item { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.event-meta-item i { color: var(--red); }
.event-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }
.event-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.event-actions-bottom { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ── Fight card ──────────────────────────────────────────────────────── */
.fight-card-list { display: flex; flex-direction: column; gap: 12px; }
.fight-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
}
.fight-row.fight-main { border-color: var(--gold); box-shadow: var(--glow-gold); }
.fight-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: #000;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 3px 14px;
  border-radius: 10px;
  white-space: nowrap;
}
.fight-fighter { text-align: center; }
.fight-red .fight-fighter-name { color: var(--red-light); }
.fight-blue .fight-fighter-name { color: #4fc3f7; }
.fight-fighter-photo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto 8px; border: 2px solid var(--border); }
.fight-fighter-photo img { width: 100%; height: 100%; object-fit: cover; }
.fight-fighter-name { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; }
.fight-fighter-name.tbd { color: var(--text-muted); font-style: italic; }
.fight-fighter-record { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.fight-vs { text-align: center; }
.fight-vs span { font-family: var(--font-title); font-size: 1.5rem; font-weight: 900; color: var(--text-muted); display: block; }
.fight-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.fight-rounds { font-size: 0.75rem; color: var(--text-muted); }
.fight-result { font-size: 0.8rem; color: var(--gold); font-weight: 700; margin-top: 6px; }
.fight-winner { font-size: 0.75rem; color: var(--gold); }
.fight-card-section { margin-top: 40px; }
.event-description { font-size: 1rem; color: var(--text-muted); line-height: 1.8; max-width: 800px; margin: 0 auto 40px; text-align: center; }

/* ── Fighter profile ─────────────────────────────────────────────────── */
.fighter-profile { position: relative; min-height: 80vh; display: flex; align-items: center; overflow: hidden; padding: var(--nav-h) 0 0; }
.fighter-profile-bg { position: absolute; inset: 0; }
.fighter-profile-bg-img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px) brightness(0.2) saturate(0.5); transform: scale(1.1); }
.fighter-profile-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,8,8,0.8) 30%, transparent); }
.fighter-profile-content { position: relative; z-index: 1; display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; padding: 60px 24px; max-width: 1200px; margin: 0 auto; width: 100%; }
.fighter-profile-photo { width: 280px; border: 3px solid var(--red); box-shadow: var(--glow-red); border-radius: var(--radius); overflow: hidden; }
.fighter-profile-photo img { width: 100%; display: block; }
.fighter-profile-flag { font-size: 1.5rem; margin-bottom: 8px; }
.fighter-profile-name { font-family: var(--font-title); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 12px; }
.fighter-profile-name strong { color: var(--red); display: block; text-shadow: var(--glow-red); }
.fighter-profile-cat { font-size: 1rem; color: var(--text-muted); margin-bottom: 6px; }
.fighter-profile-team { font-size: 0.9rem; color: var(--gold); margin-bottom: 24px; }
.fighter-stats-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.stat-block { text-align: center; }
.stat-num { font-family: var(--font-title); font-size: 2.5rem; font-weight: 900; display: block; }
.stat-num.victory { color: #22c55e; }
.stat-num.defeat { color: var(--red); }
.stat-num.draw { color: var(--text-muted); }
.stat-label { font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.stat-divider { font-family: var(--font-title); font-size: 2rem; color: rgba(255,255,255,0.1); }
.fighter-detail-stats { margin-bottom: 20px; }
.detail-stat { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.detail-stat-label { font-size: 0.8rem; color: var(--text-muted); min-width: 100px; }
.detail-stat-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.detail-stat-bar div { height: 100%; background: var(--red); border-radius: 2px; transition: width 1s ease; }
.detail-stat-num { font-weight: 700; min-width: 24px; text-align: right; }
.streak-badge { display: inline-block; background: rgba(245,158,11,0.15); border: 1px solid rgba(245,158,11,0.4); color: var(--gold); font-size: 0.8rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; }
.fighter-bio { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; }
.fighter-socials { display: flex; gap: 12px; }
.social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-weight: 600; transition: var(--transition); }
.social-btn:hover { border-color: var(--red); color: var(--red); }

/* Historique combats */
.combats-table { display: flex; flex-direction: column; gap: 8px; }
.combat-row { display: grid; grid-template-columns: 40px 80px 1fr auto auto auto; gap: 12px; align-items: center; padding: 14px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.combat-row.win { border-left: 3px solid #22c55e; }
.combat-row.loss { border-left: 3px solid var(--red); }
.combat-row.nc { border-left: 3px solid var(--text-muted); }
.combat-result-badge { font-family: var(--font-title); font-size: 1rem; font-weight: 900; }
.win .combat-result-badge { color: #22c55e; }
.loss .combat-result-badge { color: var(--red); }
.nc .combat-result-badge { color: var(--text-muted); }
.combat-event { font-size: 0.8rem; color: var(--red); font-weight: 700; }
.combat-method { font-size: 0.8rem; color: var(--gold); }
.combat-date { font-size: 0.75rem; color: var(--text-muted); }
.combat-vs { font-size: 0.9rem; }
.combat-video { min-width: 0; }
.combat-video-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  color: #0a0800; background: linear-gradient(135deg, #c9a227, #f0d060);
  border-radius: 6px; padding: 7px 12px; text-decoration: none;
}
.combat-video-btn:hover { opacity: 0.85; }
.combat-vs a:hover { color: var(--red); }

/* ── Billetterie ─────────────────────────────────────────────────────── */
.billet-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}
.billet-plan h3, .plan-title {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.seating-map { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.seating-svg { width: 100%; max-width: 400px; display: block; margin: 0 auto; }
.seat-zone { cursor: pointer; transition: all 0.3s; }
.seat-zone:hover { filter: brightness(1.5); }
.seat-zone.selected { filter: brightness(2); stroke-width: 4; }
.legend { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.legend-item:hover, .legend-item.selected { border-color: var(--red); background: var(--bg-card-hover); }
.legend-item.sold-out { opacity: 0.5; cursor: not-allowed; }
.legend-dot { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.legend-nom { flex: 1; font-weight: 600; font-size: 0.9rem; }
.legend-prix { font-family: var(--font-title); font-weight: 900; color: var(--gold); }
.legend-dispo { font-size: 0.75rem; color: var(--text-muted); }
.sold-out-tag { background: rgba(239,68,68,0.2); color: #ef4444; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 2px; }

/* Formulaire billet */
.billet-form-panel, .billet-initial {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.form-title {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.selected-cat-display {
  background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
}
.selected-cat-name { font-family: var(--font-title); font-size: 1rem; font-weight: 900; color: white; }
.selected-cat-price { font-family: var(--font-title); font-size: 1.5rem; font-weight: 900; color: var(--gold); margin: 4px 0; }
.selected-cat-dispo { font-size: 0.8rem; color: var(--text-muted); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 0.95rem;
  transition: var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(201,162,39,0.2);
}
.qty-control { display: flex; align-items: center; gap: 16px; }
.qty-control button {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.qty-control button:hover { border-color: var(--red); color: var(--red); }
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.qty-row .form-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; }
#qtyDisplay { font-family: var(--font-title); font-size: 1.3rem; font-weight: 900; }
.form-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); margin: 16px 0; font-weight: 700; }
.total-amount { font-family: var(--font-title); font-size: 1.5rem; color: var(--gold); }
.form-secure { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 12px; }
.form-secure i { color: #22c55e; }
.select-hint { text-align: center; padding: 20px 0; }
.hint-icon { font-size: 3rem; color: var(--red); margin-bottom: 16px; }
.select-hint h3 { font-family: var(--font-title); font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
.select-hint p { font-size: 0.9rem; color: var(--text-muted); }
.quick-prices { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.quick-price-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.quick-price-card:hover { border-color: var(--red); }
.quick-price-card.disabled { opacity: 0.5; cursor: not-allowed; }
.qp-nom { flex: 1; font-weight: 600; font-size: 0.9rem; }
.qp-prix { font-family: var(--font-title); font-weight: 900; color: var(--gold); }
.qp-dispo { font-size: 0.75rem; color: var(--text-muted); }

/* ── Boutique ─────────────────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  background: transparent;
}
.filter-btn:hover, .filter-btn.active { background: var(--red); color: white; border-color: var(--red); }
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
  display: block;
}
.product-card:hover { border-color: var(--red); transform: translateY(-6px); box-shadow: var(--glow-red); }
.product-image { aspect-ratio: 1; overflow: hidden; background: #111; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.product-card:hover .product-image img { transform: scale(1.08); }
.product-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 4rem; color: rgba(255,255,255,0.1); }
.product-info { padding: 16px; }
.product-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.product-price { font-family: var(--font-title); font-size: 1.2rem; font-weight: 900; color: var(--gold); margin-bottom: 6px; }
.product-stock { font-size: 0.75rem; font-weight: 700; }
.in-stock { color: #22c55e; }
.out-of-stock { color: #ef4444; }

/* Produit detail */
.product-detail-section { padding-top: calc(var(--nav-h) + 40px); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 32px; transition: var(--transition); }
.back-link:hover { color: var(--red); }
.product-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-detail-image { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.product-detail-image img { width: 100%; display: block; }
.product-detail-cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; color: var(--red); text-transform: uppercase; }
.product-detail-name { font-family: var(--font-title); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; margin: 10px 0; }
.product-detail-price { font-family: var(--font-title); font-size: 2rem; font-weight: 900; color: var(--gold); margin-bottom: 20px; }
.product-detail-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 24px; }
.size-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.size-btn {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.size-btn:hover:not(:disabled), .size-btn.active { border-color: var(--red); color: var(--red); background: rgba(201,162,39,0.1); }
.size-btn.out-of-stock { opacity: 0.4; cursor: not-allowed; }
.product-form-group { margin-bottom: 14px; }
.product-form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }
.product-form-group input, .product-form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: var(--transition);
}
.product-form-group input:focus, .product-form-group textarea:focus { outline: none; border-color: var(--red); }

/* ── Médias ───────────────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.media-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.media-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--glow-red); }
.media-thumb { aspect-ratio: 16/9; overflow: hidden; background: #111; position: relative; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-play-btn, .media-zoom-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: var(--transition);
}
.media-card:hover .media-play-btn, .media-card:hover .media-zoom-btn { opacity: 1; }
.media-play-btn i { font-size: 2.5rem; color: white; }
.media-zoom-btn i { font-size: 2rem; color: white; }
.media-icon-thumb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 3rem; color: rgba(255,255,255,0.15); min-height: 140px; }
.media-info { padding: 14px; }
.media-type-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; background: rgba(201,162,39,0.2); color: var(--red); padding: 2px 8px; border-radius: 2px; }
.media-titre { font-size: 0.9rem; color: var(--text); margin: 6px 0 4px; }
.media-date { font-size: 0.75rem; color: var(--text-muted); }
.lightbox, .video-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.lightbox.active, .video-modal.active { opacity: 1; pointer-events: all; }
.lightbox-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.lightbox-close, .video-close {
  position: absolute;
  top: -48px; right: 0;
  font-size: 1.5rem;
  color: white;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.lightbox-close:hover, .video-close:hover { background: var(--red); }
.lightbox-inner img { max-height: 85vh; border-radius: var(--radius); }
.lightbox-title { color: rgba(255,255,255,0.7); text-align: center; margin-top: 12px; font-size: 0.9rem; }
.video-modal-inner { position: relative; width: 90vw; max-width: 900px; }
.video-close { top: -48px; right: 0; }
.video-modal-inner iframe { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); border: none; }

/* ── Partenaires ─────────────────────────────────────────────────────── */
/* Les logos étant centrés, un intitulé collé à gauche rendrait la section
   bancale : on centre l'ensemble du bloc. */
.partner-level-section { margin-bottom: 48px; text-align: center; }
.partner-level-header {
  font-family: var(--font-title);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Institutionnel : bleu république, pour ne pas le confondre avec un rang commercial. */
.partner-level-header.inst { background: rgba(37,99,235,0.8); border: 1px solid rgba(37,99,235,0.6); color: #fff; }
.partner-level-header.gold { background: rgba(245,158,11,0.8); border: 1px solid rgba(245,158,11,0.6); color: #fff; }
.partner-level-header.silver { background: rgba(120,120,120,0.8); border: 1px solid rgba(160,160,160,0.5); color: #fff; }
.partner-level-header.bronze { background: rgba(201,162,39,0.8); border: 1px solid rgba(201,162,39,0.6); color: #fff; }
/* Rangées CENTRÉES, cartes de largeur fixe.
   Avant : une grille `repeat(auto-fill, minmax(X, 1fr))`. Les cartes s'étiraient
   pour remplir des colonnes qui, elles, restaient vides — avec 2 partenaires sur
   une rangée de 5 colonnes, on obtenait deux cartes énormes collées à gauche et
   600 px de noir à droite. Invisible tant que chaque rang était plein ; criant
   dès que le classement a été rééquilibré (2026-08-10).
   Le flex ne réserve que la place utilisée et centre le reste. */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.partners-grid > * { flex: 0 0 auto; }
.partners-grid-or > *, .partners-grid-institutionnel > *, .partners-grid-premium > * { width: 240px; }
.partners-grid-argent > *, .partners-grid-officiel > * { width: 200px; }
.partners-grid-bronze > *, .partners-grid-fournisseur > * { width: 165px; }
@media (max-width: 560px) {
  .partners-grid-or > *, .partners-grid-institutionnel > *, .partners-grid-premium > * { width: 46%; }
  .partners-grid-argent > *, .partners-grid-officiel > *,
  .partners-grid-bronze > *, .partners-grid-fournisseur > * { width: 44%; }
}
.partner-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-height: 100px;
  transition: var(--transition);
}
.partner-card:hover { border-color: var(--red); transform: translateY(-4px); box-shadow: var(--glow-red); }
.partner-card-or { min-height: 140px; }
.partner-card-sm { min-height: 80px; padding: 16px; }
/* Les logos sont servis déjà normalisés (rognés, remis à la même taille optique,
   canevas 3:1 identique pour tous — cf. logo_norm.py). Une largeur suffit donc :
   plus de max-height/max-width à arbitrer, plus d'`object-fit`, et surtout plus
   de `transform: scale()` par identifiant de partenaire. */
/* `width:100%` et non une valeur fixe : les cartes font 240 / 200 / 165 px selon
   le rang (et un pourcentage sur mobile). Le logo épouse donc la carte, et comme
   tous les fichiers servis ont désormais les mêmes proportions, deux partenaires
   d'un même rang sortent rigoureusement à la même taille — sans qu'aucune règle
   n'ait à connaître ni la largeur des cartes ni les logos. */
.partner-card img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); opacity: 0.8; transition: var(--transition); }
.partner-card:hover img { opacity: 1; }
/* Même raison que pour le marquee de l'accueil : sur un écran tactile le survol
   n'arrive jamais, les logos restaient donc à 0.8 — blancs mais ternis. */
@media (hover: none) {
  .partner-card img { opacity: 1; }
}
.partner-name-display { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; color: var(--text); }
.partner-link { font-size: 0.75rem; color: var(--text-muted); transition: var(--transition); }
.partner-link:hover { color: var(--red); }
.partner-cta-section { margin-top: 60px; }
.partner-cta-card {
  background: linear-gradient(135deg, rgba(201,162,39,0.1) 0%, rgba(245,158,11,0.05) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
}
.partner-cta-icon { font-size: 3rem; color: var(--red); margin-bottom: 20px; }
.partner-cta-card h2 { font-family: var(--font-title); font-size: 1.5rem; margin-bottom: 16px; }
.partner-cta-card p { color: var(--text-muted); max-width: 600px; margin: 0 auto 28px; }
.partner-cta-contacts { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── À propos ─────────────────────────────────────────────────────────── */
.about-layout { max-width: 1000px; margin: 0 auto; }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 60px; align-items: center; }
.about-title { font-family: var(--font-title); font-size: 2rem; font-weight: 900; margin-bottom: 20px; }
.about-title span { color: var(--red); font-size: 1rem; display: block; font-weight: 400; font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.about-lead { font-size: 1.1rem; color: rgba(255,255,255,0.9); margin-bottom: 16px; line-height: 1.7; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; transition: var(--transition); }
.about-stat-card:hover { border-color: var(--red); }
.about-stat-num { font-family: var(--font-title); font-size: 2.5rem; font-weight: 900; color: var(--red); display: block; }
.about-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; display: block; }
.about-values-section, .about-fed-section, .about-contact-section { margin-bottom: 60px; }
.fed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.fed-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; }
.fed-badge { font-family: var(--font-title); font-size: 1.2rem; font-weight: 900; color: var(--gold); margin-bottom: 8px; }
.fed-card p { font-size: 0.8rem; color: var(--text-muted); }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; align-items: center; gap: 12px; }
.contact-card i { font-size: 1.2rem; color: var(--red); }

/* ── Confirmation ─────────────────────────────────────────────────────── */
.confirmation-section { padding-top: calc(var(--nav-h) + 60px); min-height: 100vh; }
.confirmation-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 48px;
  text-align: center;
}
.confirm-icon { font-size: 4rem; margin-bottom: 20px; }
.confirm-icon.confirm-success { color: #22c55e; }
.confirm-icon.confirm-pending { color: var(--gold); }
.confirm-icon.confirm-error { color: #ef4444; }
.confirm-title { font-family: var(--font-title); font-size: 1.8rem; font-weight: 900; margin-bottom: 12px; }
.confirm-sub { color: var(--text-muted); margin-bottom: 28px; }
.ticket-preview {
  background: linear-gradient(135deg, #111 0%, #0d0b00 100%);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
  text-align: left;
}
.ticket-preview-header { background: var(--red); padding: 12px 20px; font-family: var(--font-title); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; color: white; text-align: center; }
.ticket-preview-body { padding: 24px; }
.ticket-numero { font-family: var(--font-title); font-size: 1.3rem; font-weight: 900; color: var(--gold); margin-bottom: 8px; }
.ticket-nom { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.ticket-cat { color: var(--red); font-weight: 700; margin-bottom: 4px; }
.ticket-event { font-size: 0.85rem; color: var(--text-muted); }
.ticket-lieu { font-size: 0.8rem; color: var(--text-muted); }
.confirm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.confirm-info { font-size: 0.8rem; color: var(--text-muted); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 6px; padding: 12px 16px; }
.confirm-info i { color: var(--gold); margin-right: 6px; }
.order-summary { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 28px; }
.order-total { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }

/* ── Scanner ─────────────────────────────────────────────────────────── */
.scanner-layout { display: flex; justify-content: center; padding-top: 20px; }
.scanner-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 480px;
  width: 100%;
}
.scanner-header { text-align: center; margin-bottom: 24px; }
.scanner-header i { font-size: 3rem; color: var(--red); display: block; margin-bottom: 12px; }
.scanner-header h2 { font-family: var(--font-title); font-size: 1.3rem; font-weight: 900; margin-bottom: 6px; }
.scanner-header p { font-size: 0.9rem; color: var(--text-muted); }
.scanner-video-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 1;
  margin-bottom: 16px;
}
#scannerVideo { width: 100%; height: 100%; object-fit: cover; }
.scanner-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.scanner-frame {
  width: 60%;
  aspect-ratio: 1;
  border: 3px solid var(--red);
  border-radius: 8px;
  box-shadow: 0 0 0 2000px rgba(0,0,0,0.4), var(--glow-red);
  animation: scanPulse 2s ease-in-out infinite;
}
@keyframes scanPulse { 0%,100% { box-shadow: 0 0 0 2000px rgba(0,0,0,0.4), 0 0 15px rgba(201,162,39,0.5); } 50% { box-shadow: 0 0 0 2000px rgba(0,0,0,0.4), 0 0 30px rgba(201,162,39,0.8); } }
.scanner-status { text-align: center; padding: 16px; color: var(--text-muted); font-size: 0.9rem; }
.scanner-result {
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
}
.result-valid { background: rgba(34,197,94,0.1); border: 2px solid #22c55e; }
.result-invalid { background: rgba(239,68,68,0.1); border: 2px solid #ef4444; }
.result-valid #resultIcon { font-size: 4rem; color: #22c55e; }
.result-invalid #resultIcon { font-size: 4rem; color: #ef4444; }
#resultTitle { font-family: var(--font-title); font-size: 1.2rem; font-weight: 900; margin: 10px 0; }
.result-valid #resultTitle { color: #22c55e; }
.result-invalid #resultTitle { color: #ef4444; }
#resultDetails { font-size: 0.9rem; color: var(--text-muted); }
.scanner-controls { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.scanner-stats { display: flex; gap: 20px; justify-content: center; }
.scanner-stat { text-align: center; }
.scanner-stat span { font-family: var(--font-title); font-size: 2rem; font-weight: 900; color: var(--gold); display: block; }
.scanner-stat label { font-size: 0.75rem; color: var(--text-muted); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}
.empty-state i { font-size: 4rem; margin-bottom: 20px; opacity: 0.3; }
.empty-state p { font-size: 1rem; }
.empty-sub { font-size: 0.85rem; margin-top: 8px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { background: #050505; border-top: 1px solid var(--border); margin-top: 0; padding-top: 60px; }
.footer-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
}
.footer-logo { margin-bottom: 12px; }
.footer-logo span { color: var(--red); }
.footer-brand p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; }
.footer-socials { display: flex; gap: 12px; }
.social-link {
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1rem;
  transition: var(--transition);
}
.social-link:hover { border-color: var(--red); color: var(--red); box-shadow: var(--glow-red); }
.footer-links h3, .footer-contact h3 { font-family: var(--font-title); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; color: var(--red); margin-bottom: 16px; }
.footer-links ul { list-style: none; }
.footer-links ul li { margin-bottom: 8px; }
.footer-links ul li a { font-size: 0.9rem; color: var(--text-muted); transition: var(--transition); }
.footer-links ul li a:hover { color: var(--red); }
.footer-contact p, .footer-contact a { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; transition: var(--transition); }
.footer-contact a:hover, .footer-contact i { color: var(--red); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 24px; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.footer-bottom a { color: var(--red); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .billet-layout { grid-template-columns: 1fr; }
  .fighter-profile-content { grid-template-columns: 240px 1fr; gap: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    background: rgba(8,8,8,0.97);
    flex-direction: column;
    padding: 20px;
    gap: 4px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    border-bottom: 1px solid var(--border);
  }
  .nav-menu.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-toggle { display: flex; }
  .event-card { grid-template-columns: 1fr; }
  .event-card-poster { max-height: 200px; }
  .fighter-profile-content { grid-template-columns: 1fr; text-align: center; padding: 40px 24px; }
  .fighter-profile-photo { width: 200px; margin: 0 auto; }
  .fighter-stats-bar { justify-content: center; }
  .fighter-socials { justify-content: center; }
  .product-detail-layout { grid-template-columns: 1fr; }
  /* `minmax(0, 1fr)` et non `1fr` : une piste `1fr` a un minimum implicite égal
     à son contenu, donc elle GROSSIT au lieu de contraindre. Les cartes de stats
     réclamaient 387 px sur un écran de 390 (48 px de padding compris) — la piste
     suivait, et le texte d'à côté, calé sur la même piste, se faisait couper à
     droite. Mesuré le 12/08/2026 : 21 px de dépassement sur .about-text. */
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr; }
  .combat-row { grid-template-columns: 30px auto 1fr auto; }
  .combat-method, .combat-date { display: none; }
}

@media (max-width: 480px) {
  .countdown-num { font-size: 2rem; padding: 8px 12px; min-width: 60px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .section { padding: 50px 0; }
  .fighters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Cartes de stats « À propos » : sur un 390, chaque carte ne dispose que de
     163 px. On resserre le chiffre et le libellé pour qu'ils tiennent dedans. */
  .about-stat-card { padding: 18px 12px; }
  .about-stat-num { font-size: 1.9rem; }
  .about-stat-label { font-size: 0.65rem; letter-spacing: 0.06em; }
}



/* ══ FIN DU FICHIER ══ */

/* SUPPRIMÉ: widget commande vocale (non utilisé)

#vc-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  font-family: 'Rajdhani', sans-serif;
}

/* Bouton principal */
#vc-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #D4AF37;
  background: linear-gradient(135deg, #0d0d0d, #1a1200);
  color: #D4AF37;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(212,175,55,0.5), 0 4px 20px rgba(0,0,0,0.6);
  transition: transform 0.2s, box-shadow 0.3s;
  position: relative;
  overflow: visible;
}
#vc-btn svg {
  width: 26px;
  height: 26px;
  pointer-events: none;
}
#vc-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.15), 0 4px 24px rgba(0,0,0,0.7);
}
#vc-btn.listening {
  border-color: #ef4444;
  color: #ef4444;
  box-shadow: 0 0 0 6px rgba(239,68,68,0.15), 0 4px 24px rgba(0,0,0,0.7);
}

/* Anneau pulsant */
#vc-pulse {
  display: none;
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(239,68,68,0.6);
  animation: vc-ring 1.2s ease-out infinite;
}
@keyframes vc-ring {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Panel */
#vc-panel {
  display: none;
  position: absolute;
  bottom: 72px;
  right: 0;
  width: 320px;
  background: linear-gradient(160deg, #0a0a0a, #111100);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,175,55,0.1);
  overflow: hidden;
  animation: vc-slide 0.2s ease;
}
#vc-panel.open { display: block; }
@keyframes vc-slide {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

#vc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(212,175,55,0.07);
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
#vc-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#vc-close {
  background: none;
  border: none;
  color: #666;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
#vc-close:hover { color: #D4AF37; }

#vc-status-zone {
  padding: 14px 16px 6px;
}
#vc-status {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 6px;
  transition: color 0.3s;
}
#vc-transcript {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  min-height: 24px;
  font-style: italic;
}

/* Barres animation écoute */
#vc-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
}
#vc-bars span {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: #D4AF37;
  animation: vc-bar 0.8s ease-in-out infinite;
}
#vc-bars span:nth-child(1) { height:10px; animation-delay:0s; }
#vc-bars span:nth-child(2) { height:18px; animation-delay:0.1s; }
#vc-bars span:nth-child(3) { height:24px; animation-delay:0.2s; }
#vc-bars span:nth-child(4) { height:18px; animation-delay:0.3s; }
#vc-bars span:nth-child(5) { height:10px; animation-delay:0.4s; }
@keyframes vc-bar {
  0%,100% { transform: scaleY(0.5); opacity:0.5; }
  50%     { transform: scaleY(1.3); opacity:1; }
}

/* Feedback */
#vc-feedback {
  margin: 8px 16px;
  padding: 10px 12px;
  border-left: 3px solid #D4AF37;
  background: rgba(212,175,55,0.06);
  border-radius: 0 4px 4px 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Champ texte fallback */
#vc-text-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#vc-text-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 4px;
  color: #fff;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
}
#vc-text-input:focus { border-color: #D4AF37; }
#vc-text-input::placeholder { color: #555; }
#vc-text-zone button {
  background: linear-gradient(135deg, #D4AF37, #9A7A1C);
  border: none;
  border-radius: 4px;
  color: #000;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
#vc-text-zone button:hover { filter: brightness(1.15); }

/* Exemples rapides */
#vc-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 16px 12px;
}
#vc-examples span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #D4AF37;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.2s;
}
#vc-examples span:hover {
  background: rgba(212,175,55,0.12);
}

#vc-no-support {
  padding: 10px 16px 14px;
  font-size: 0.78rem;
  color: #888;
  line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.06);
}

@media (max-width: 480px) {
  #vc-widget { bottom: 16px; right: 16px; }
  #vc-panel { width: calc(100vw - 32px); right: 0; }
}
*/

/* ── Pages légales (mentions, confidentialité, CGV) ───────────────────── */
.legal-wrap { max-width: 860px; margin: 0 auto; padding: calc(var(--nav-h,80px) + 40px) 24px 80px; }
.legal-wrap h1 { font-family: var(--font-title); font-size: clamp(1.8rem,5vw,2.6rem); color:#fff; margin-bottom: 6px; letter-spacing:0.03em; }
.legal-updated { color: rgba(255,255,255,0.4); font-size: 0.82rem; margin-bottom: 30px; }
.legal-wrap h2 { font-family: var(--font-title); font-size: 1.15rem; color:#c9a84c; letter-spacing:0.03em; margin: 32px 0 12px; }
.legal-wrap h3 { font-size: 1rem; color:#fff; margin: 18px 0 8px; }
.legal-wrap p, .legal-wrap li { color: rgba(255,255,255,0.75); font-size: 0.94rem; line-height: 1.75; }
.legal-wrap ul { margin: 8px 0 8px 20px; }
.legal-wrap a { color:#c9a84c; }
.legal-wrap a:hover { text-decoration: underline; }
.legal-todo { background: rgba(234,179,8,0.12); border:1px solid rgba(234,179,8,0.45); color:#eab308;
  border-radius:6px; padding: 1px 7px; font-size:0.85rem; font-weight:600; }
.legal-card { background: rgba(12,12,12,0.7); border:1px solid rgba(201,168,76,0.2); border-radius:12px; padding: 16px 22px; margin: 14px 0; }
.legal-toc { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.legal-toc a { background:rgba(201,168,76,0.1); border:1px solid rgba(201,168,76,0.25); border-radius:20px;
  padding:5px 14px; font-size:0.8rem; color:#c9a84c; }

/* ── Bannière cookies ────────────────────────────────────────────────── */
/* La bannière ne s'affiche/se masque PLUS en `display` : passer de `none` à
   `flex` crée une boîte d'un coup et compte comme un décalage de mise en page
   (0,083 sur les 0,146 de CLS mesurés). Elle existe donc toujours, simplement
   transparente et hors interaction — un élément `fixed` invisible ne coûte rien
   et ne bouscule personne. */
.cookie-banner[hidden] { display: flex !important; opacity: 0; pointer-events: none; visibility: hidden; }
.cookie-banner { transition: opacity .25s ease;
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  max-width: 720px; margin: 0 auto; background: rgba(10,10,14,0.97); border:1px solid rgba(201,168,76,0.4);
  border-radius: 14px; padding: 16px 20px; box-shadow: 0 12px 50px rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cookie-banner p { color: rgba(255,255,255,0.8); font-size: 0.86rem; line-height: 1.55; margin: 0; flex: 1; min-width: 220px; }
/* Un lien noyé dans un paragraphe doit se repérer AUTREMENT que par sa couleur
   (un daltonien ne le voit pas) : on le souligne. Ne concerne que les liens en
   pleine phrase — les menus et boutons se repèrent à leur place et leur forme. */
.cookie-banner a,
.footer-bottom p a { text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner a { color: #c9a84c; }
.cookie-banner .btn { white-space: nowrap; }
.footer-legal { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; margin-top:8px; }
.footer-legal a { color: rgba(255,255,255,0.55); font-size: 0.82rem; }
.footer-legal a:hover { color:#c9a84c; }
.footer-legal button { color: rgba(255,255,255,0.55); font-size: 0.82rem; background:none; border:none; cursor:pointer; }
.footer-legal button:hover { color:#c9a84c; }