/* ===========================================================
   RIVALZ — Design System (~7500 lignes, fichier monolithique)
   ───────────────────────────────────────────────────────────
   DA : esprit Apple iOS/macOS appliqué au foot.
   Light theme. Pelouse fraîche en accent principal,
   gold trophée pour les moments forts, navy stadium en arrière-plan,
   rouge réservé au live / EN COURS.

   ── TABLE DES MATIÈRES ──────────────────────────────────────
   1. Tokens (variables :root)
   2. Reset & base typo
   3. Layout (page, hero, grid)
   4. Top nav + mega menus + mobile drawer
   5. Cards (entity / lineup / cat / challenge)
   6. Boutons + pills
   7. Modals + toasts + auth modal + pregame overlay
   8. Picker (modal joueur)
   9. Pitch (terrain + slots + jersey)
   10. Vues : home, sport, country, competition, entity-category
   11. Vues : lineup-builder + lineup-view
   12. Vues : games (duel, guess-lineup, guess-player) + tabs jeux
   13. XP : pill, level up, profile cosmetics
   14. Share bar + share card
   15. Onboarding modal
   16. Footer + meta
   17. ACCESSIBILITÉ (focus-visible, prefers-reduced-motion, skip-link, sr-only)
   ────────────────────────────────────────────────────────────
   Pour chercher une section : Ctrl+F sur le numéro entre crochets,
   ex « [11. Vues : lineup-builder » donnera le bon endroit.
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

/* -----------------------------------------------------------
   1. Tokens
   ----------------------------------------------------------- */
:root {
  /* Neutres — papier crème chaud, façon programme de match */
  --bg: #faf8f3;
  --bg-elev: #ffffff;
  --bg-subtle: #f3efe6;
  --bg-glass: rgba(255, 255, 255, 0.82);
  --text: #0c1814;
  --text-muted: #5a6b62;
  --text-faded: #a3b0a8;
  --border: #e6e0d3;
  --border-strong: #d3cab6;

  /* ─── Accent principal : pelouse fraîche ─────────────── */
  --accent: #15803d;            /* vert pelouse profond */
  --accent-bright: #22c55e;     /* vert vif (highlights) */
  --accent-hover: #166534;
  --accent-soft: #dcfce7;
  --accent-glow: rgba(21, 128, 61, 0.18);

  /* ─── Stadium navy (profondeur, brand) ───────────────── */
  --navy: #1e293b;
  --navy-deep: #0f172a;
  --navy-soft: #e2e8f0;

  /* ─── Or trophée (moments forts) ─────────────────────── */
  --gold: #d4a017;
  --gold-bright: #fbbf24;
  --gold-soft: #fef3c7;

  /* ─── Live / EN COURS ───────────────────────────────── */
  --hot: #ef4444;               /* rouge passion (uniquement live, vote down) */
  --hot-soft: #fee2e2;

  /* ─── Variétés (icônes catégorisées) ─────────────────── */
  --pink: #db2777;
  --pink-soft: #fce7f3;
  --orange: #ea580c;            /* trophée chaud, ex coupes */
  --orange-soft: #ffedd5;
  --pitch-green: #15803d;       /* alias historique */
  --pitch-soft: #dcfce7;
  --blue: #1d4ed8;
  --blue-soft: #dbeafe;
  --teal: #0d9488;
  --teal-soft: #ccfbf1;
  --purple: #6d28d9;
  --purple-soft: #ede9fe;
  --yellow: #ca8a04;
  --yellow-soft: #fef9c3;

  /* Sémantiques */
  --success: #16a34a;
  --warning: #d97706;
  --danger: #ef4444;
  --info: #1d4ed8;

  /* Pitch (terrain) — un peu plus profond pour le côté gazon-coupé */
  --pitch-1: #1f8a4c;
  --pitch-2: #166534;
  --pitch-line: rgba(255, 255, 255, 0.85);

  /* Gradients réutilisables — ton-sur-ton, jamais de couleurs qui jurent */
  --grad-brand:  linear-gradient(135deg, #22c55e 0%, #15803d 100%);
  --grad-pitch:  linear-gradient(135deg, #16a34a 0%, #166534 100%);
  --grad-trophy: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
  --grad-night:  linear-gradient(135deg, #1e293b 0%, #0f172a 100%);

  /* Rayons */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* Ombres — neutres + tint vert subtil (pelouse) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.08), 0 28px 56px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 4px 8px rgba(15, 23, 42, 0.10), 0 36px 72px rgba(15, 23, 42, 0.18);
  --shadow-icon: 0 4px 14px rgba(21, 128, 61, 0.20), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-icon-hover: 0 14px 34px rgba(21, 128, 61, 0.30), 0 2px 4px rgba(15, 23, 42, 0.08);

  /* Animations */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* Typo */
  --font-sans: 'Inter Tight', 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --header-h: 64px;
  --sidebar-w: 248px;
  --content-w: 1200px;

  /* ─── Couleurs par mode de jeu ─────────────────────────
     Chaque jeu a sa palette : tab actif, cards/CTA, glow.
     Choisis explicitement (pas un dérivé de --accent) pour différencier visuellement les modes. */
  --game-xi:           #15803d;
  --game-xi-bright:    #22c55e;
  --game-xi-soft:      rgba(22, 163, 74, 0.10);
  --game-xi-grad:      linear-gradient(135deg, #15803d 0%, #16a34a 50%, #22c55e 100%);

  --game-top5:         #f97316;
  --game-top5-bright:  #fb923c;
  --game-top5-soft:    rgba(249, 115, 22, 0.10);
  --game-top5-grad:    linear-gradient(135deg, #fb923c 0%, #f97316 55%, #ea580c 100%);

  --game-duel:         #06b6d4;
  --game-duel-bright:  #22d3ee;
  --game-duel-soft:    rgba(6, 182, 212, 0.10);
  --game-duel-grad:    linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #3b82f6 100%);

  --game-guess:        #a855f7;
  --game-guess-bright: #c084fc;
  --game-guess-soft:   rgba(168, 85, 247, 0.10);
  --game-guess-grad:   linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #ec4899 100%);

  --game-guess-player:        #ec4899;
  --game-guess-player-bright: #f472b6;
  --game-guess-player-soft:   rgba(236, 72, 153, 0.10);
  --game-guess-player-grad:   linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f472b6 100%);

  /* Devine le manquant : jaune doré (écho aux numéros de maillot
     surlignés sur les compos broadcast type post Insta/FB des clubs) */
  --game-missing:        #ca8a04;
  --game-missing-bright: #facc15;
  --game-missing-soft:   rgba(202, 138, 4, 0.10);
  --game-missing-grad:   linear-gradient(135deg, #a16207 0%, #ca8a04 50%, #facc15 100%);
}

/* -----------------------------------------------------------
   2. Reset & base
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Évite tout débordement horizontal accidentel (orbs décoratives, marges négatives
     des carousels mobile, etc.). Le scroll horizontal est INTERDIT au niveau body :
     les composants qui veulent scroller (game-tabs mobile, modes-grid carousel) le font
     en local avec leur propre overflow-x. */
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--dur-quick); }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select, textarea {
  font-family: inherit; font-size: inherit;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  outline: none;
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--text-faded); }

::selection { background: var(--accent-soft); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: inherit; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 12px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faded); }

/* -----------------------------------------------------------
   3. TOP NAV (avec mega menus)
   ----------------------------------------------------------- */
.topnav {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex;
  padding: 0;
}
.tn-inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex; align-items: center;
  gap: 14px;
}
.tn-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.03em;
  flex-shrink: 0;
  color: var(--text);
}
.tn-brand:hover { color: var(--text); text-decoration: none; }
.tn-brand .ball {
  width: 32px; height: 32px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  font-size: 16px;
  box-shadow: var(--shadow-icon);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.tn-brand .ball::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    transparent 0 6px,
    rgba(255,255,255,0.06) 6px 8px);
  pointer-events: none;
}
.tn-brand .alt {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Sport context pill — multi-sport ready */
.tn-sport {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: .8125rem;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-quick);
}
.tn-sport:hover { border-color: var(--border-strong); background: white; }
.tn-sport[aria-expanded="true"] { background: white; border-color: var(--accent); color: var(--accent); }
.tn-sport .ts-em {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: 14px;
  background: white;
  border-radius: 50%;
}
.tn-sport .ts-name { letter-spacing: -.005em; }
.tn-sport .chevron { font-size: 9px; opacity: .55; transition: transform var(--dur-quick); }
.tn-sport[aria-expanded="true"] .chevron { transform: rotate(180deg); opacity: 1; }

.tn-divider {
  width: 1px; height: 22px;
  background: var(--border);
  flex-shrink: 0;
}

.tn-nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: 8px;
}
.tn-link {
  position: relative;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-weight: 600; font-size: .9rem;
  cursor: pointer;
  transition: all var(--dur-quick);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.tn-link:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }
.tn-link.active { color: var(--accent); }
.tn-link .chevron { font-size: 10px; transition: transform var(--dur-quick); }
.tn-link[aria-expanded="true"] {
  background: var(--bg-subtle);
  color: var(--text);
}
.tn-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.tn-search {
  position: relative;
  width: 220px;
  margin-left: auto;
}
.tn-search input {
  width: 100%;
  padding: 8px 14px 8px 34px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: all var(--dur-quick);
}
.tn-search input:focus {
  background-color: white;
  width: 280px;
}
.tn-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }

/* Menu de langue (popup) — déclenché depuis le footer */
.tn-lang-menu {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xl);
  padding: 6px;
  min-width: 200px;
  z-index: 100;
  animation: megaSlide var(--dur-base) var(--ease-smooth);
}
.tn-lang-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: none; background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit; color: inherit;
  text-align: left;
}
.tn-lang-item:hover { background: var(--bg-subtle); }
.tn-lang-item.is-current { background: var(--bg-subtle); font-weight: 600; }
.tn-lang-item-flag { display: inline-flex; align-items: center; }
.tn-lang-item-flag .lang-flag-img { width: 22px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); display: block; }
.tn-lang-item-name { flex: 1; }
.tn-lang-item-check { color: var(--accent); font-weight: 700; }

/* Footer global — minimal, discret */
.footer {
  margin-top: 60px;
  padding: 24px clamp(16px, 4vw, 40px);
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: .8125rem;
}
.footer-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
}
.footer-brand .ball { font-size: 16px; }
.footer-brand:hover { color: var(--accent); }
.footer-tagline { font-size: .75rem; }
.footer-right { display: flex; align-items: center; gap: 12px; }
.footer-lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px;
  border-radius: var(--r-sm);
  background: white;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  font: inherit; font-size: .8125rem;
  transition: border-color var(--dur-base) var(--ease-smooth);
}
.footer-lang-btn:hover { border-color: var(--border-strong); }
.footer-lang-btn[aria-expanded="true"] { border-color: var(--accent); }
.footer-lang-btn .chevron { font-size: 10px; color: var(--muted); }
.footer-lang-flag { width: 20px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); display: block; }
.footer-lang-name { font-weight: 600; }
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

.tn-mobile-btn {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  align-items: center; justify-content: center;
  font-size: 18px;
}
@media (max-width: 980px) {
  .tn-nav, .tn-search, .tn-sport { display: none; }
  .tn-mobile-btn { display: flex; }
}

/* MEGA MENU panel */
.megamenu-backdrop {
  position: fixed; left: 0; right: 0; top: 64px;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  z-index: 49;
  box-shadow: var(--shadow-xl);
  padding: 24px clamp(16px, 4vw, 40px) 32px;
  animation: megaSlide var(--dur-base) var(--ease-smooth);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
@keyframes megaSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.megamenu {
  max-width: var(--content-w);
  margin: 0 auto;
}
.megamenu-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.mega-col-title {
  font-size: .6875rem; font-weight: 700;
  color: var(--text-faded);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 12px;
}
.mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mega-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: .875rem; font-weight: 500;
  color: var(--text);
  transition: all var(--dur-quick);
}
.mega-item:hover {
  background: var(--bg-subtle);
  text-decoration: none;
  color: var(--accent);
}
.mega-item .em {
  font-size: 18px;
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mega-item .em .flag-img {
  height: 14px; width: auto;
  vertical-align: middle;
}
.mega-item .em .club-logo-img {
  width: 22px; height: 22px;
  object-fit: contain;
}
.mega-item .sub { font-size: .75rem; color: var(--text-faded); display: block; }

.mega-feature {
  background: linear-gradient(135deg, #ecfdf5 0%, #fef9c3 100%);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.mega-feature h4 { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.mega-feature p { margin: 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }

@media (max-width: 980px) {
  .megamenu-cols { grid-template-columns: 1fr; }
}

/* Megamenu étroit (sélecteur de sport) */
.megamenu.megamenu-narrow {
  max-width: 360px;
  margin: 0;
  padding-left: clamp(16px, 4vw, 40px);
}
.sport-list {
  display: flex; flex-direction: column; gap: 4px;
}
.sport-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  transition: all var(--dur-quick);
}
.sport-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.sport-item:hover:not(.disabled):not(.active) {
  background: var(--bg-subtle);
  text-decoration: none;
  color: var(--text);
}
.sport-item.disabled {
  opacity: .55;
  cursor: not-allowed;
}
.sport-item .si-em {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 22%;
  flex-shrink: 0;
}
.sport-item.active .si-em {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.sport-item .si-info {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.sport-item .si-name { font-weight: 600; font-size: .9rem; }
.sport-item .si-meta {
  font-size: .6875rem; color: var(--text-faded);
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.sport-item.active .si-meta { color: var(--accent); }
.sport-item .si-check {
  margin-left: auto;
  font-size: 10px;
  color: var(--accent);
}

/* MOBILE DRAWER */
.mobile-drawer {
  position: fixed; left: 0; top: 0;
  width: 300px; height: 100vh;
  background: white;
  box-shadow: var(--shadow-xl);
  z-index: 110;
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-smooth);
  display: flex; flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(13, 10, 8, 0.5);
  backdrop-filter: blur(4px);
  z-index: 105;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base);
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }
.md-section { margin-bottom: 18px; }
.md-section-title {
  font-size: .6875rem; font-weight: 700;
  color: var(--text-faded);
  text-transform: uppercase; letter-spacing: .1em;
  margin: 0 0 6px; padding: 0 8px;
}
.md-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-weight: 500; font-size: .9375rem;
  transition: background var(--dur-quick);
}
.md-link:hover { background: var(--bg-subtle); text-decoration: none; }

/* USER PILL (top nav) */
.user-pill-wrap { position: relative; display: inline-flex; }
.user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 4px 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: all var(--dur-quick);
  font-family: inherit;
  cursor: pointer;
}
.user-pill:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); text-decoration: none; }
.user-pill .up-chevron {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 2px;
  transition: transform .15s;
}
.user-pill[aria-expanded="true"] .up-chevron { transform: rotate(180deg); }

/* USER MENU (dropdown sous user-pill) */
.user-menu {
  position: fixed;
  z-index: 200;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xl);
  padding: 6px;
  min-width: 220px;
  display: flex; flex-direction: column;
  animation: pop .18s var(--ease-spring);
}
.user-menu .um-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: .875rem; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .12s;
}
.user-menu .um-link:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}
.user-menu .um-em {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.user-menu .um-link:hover .um-em { background: var(--bg-elev); }
.user-menu .um-sep {
  height: 1px; background: var(--border);
  margin: 4px 8px;
}
.user-pill .avatar {
  width: 30px; height: 30px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
  box-shadow: var(--shadow-icon);
}
.user-pill .username { font-size: .8125rem; font-weight: 600; }

/* -----------------------------------------------------------
   5. Main container & titres
   ----------------------------------------------------------- */
.main {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 32px clamp(16px, 4vw, 40px) 80px;
  width: 100%;
}

.page-title {
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0 0 8px; line-height: 1.1;
}
.page-subtitle {
  color: var(--text-muted);
  margin: 0 0 32px;
  font-size: 1.0625rem;
  max-width: 720px;
}

.section-title {
  font-size: 1.125rem; font-weight: 700;
  letter-spacing: -.01em;
  margin: 36px 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.section-title .accent-dot {
  width: 4px; height: 20px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
}
.section-title .count {
  margin-left: auto;
  font-size: .8125rem; font-weight: 500;
  color: var(--text-faded);
}

.eyebrow {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
  display: inline-block;
}

.breadcrumb {
  margin-bottom: 16px;
  font-size: .8125rem;
  color: var(--text-faded);
}
.breadcrumb a { color: var(--text-muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--accent); }

/* -----------------------------------------------------------
   6. Hero (home) — gradient sunset punchy
   ----------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(700px 380px at 92% 10%, rgba(34, 197, 94, 0.10), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ec 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 56px);
  margin-bottom: 40px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
}
/* Liseré vert en haut, comme une couture de maillot */
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-brand);
  pointer-events: none;
  z-index: 1;
}
/* Ballon en filigrane discret en arrière-plan */
.hero::before {
  content: '⚽';
  position: absolute;
  top: -50px; right: -30px;
  font-size: 240px;
  opacity: 0.05;
  transform: rotate(-12deg);
  z-index: -1;
}
.hero .eyebrow-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  background: white;
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero .eyebrow-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 8px var(--hot);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(0.8); }
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 800; letter-spacing: -.04em;
  line-height: 1;
  margin: 0 0 16px;
  max-width: 820px;
}
.hero h1 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 0 32px;
  line-height: 1.55;
  font-weight: 500;
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--grad-brand);
  color: white;
  padding: 14px 30px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 1rem;
  box-shadow: 0 10px 28px rgba(21, 128, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all var(--dur-base) var(--ease-spring);
}
.cta-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 36px rgba(21, 128, 61, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: white; text-decoration: none;
}
.cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: white;
  color: var(--text);
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 1rem;
  border: 1.5px solid var(--border-strong);
  transition: all var(--dur-quick);
}
.cta-secondary:hover {
  border-color: var(--text);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.hero-stats .stat .num {
  font-size: 2.25rem; font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.025em;
  line-height: 1;
}
.hero-stats .stat .lbl {
  font-size: .6875rem; color: var(--text-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 6px;
}

/* -----------------------------------------------------------
   6.b Hero v2 — concept-clear, 5 modes, multi-color orbs
   ----------------------------------------------------------- */
.hero-v2 {
  background:
    radial-gradient(900px 480px at 92% 8%, rgba(34, 197, 94, 0.12), transparent 65%),
    radial-gradient(700px 420px at 8% 100%, rgba(168, 85, 247, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ec 100%);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 44px);
  margin-bottom: 28px;
}
.hero-v2 .hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.hero-v2 .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
}
.hero-v2 .orb-1 {
  width: 200px; height: 200px;
  top: -60px; right: 10%;
  background: radial-gradient(circle, #f97316, transparent 70%);
}
.hero-v2 .orb-2 {
  width: 160px; height: 160px;
  bottom: -50px; left: 16%;
  background: radial-gradient(circle, #a855f7, transparent 70%);
}
.hero-v2 .orb-3 {
  width: 140px; height: 140px;
  top: 35%; right: -40px;
  background: radial-gradient(circle, #06b6d4, transparent 70%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-v2 h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin: 0 0 12px;
  max-width: 760px;
}
.hero-v2 h1 .accent {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ef4444 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-v2 h1 .accent-2 {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-v2 p.lead {
  font-size: clamp(.9375rem, 1.1vw, 1.0625rem);
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.5;
  margin: 0 0 16px;
  font-weight: 500;
}
.hero-v2 p.lead strong { font-weight: 700; color: var(--text); }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
  align-items: center;
  margin-bottom: 20px;
}
.hero-trust strong { color: var(--text); font-weight: 800; }
.hero-trust .dot-sep { color: var(--text-faded); font-weight: 700; }
@media (max-width: 540px) {
  .hero-trust .dot-sep { display: none; }
  .hero-trust { gap: 4px 0; flex-direction: column; align-items: flex-start; }
}

.hero-modes-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.hero-modes-eyebrow::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}
.hero-modes-grid { margin: 0; }

/* -----------------------------------------------------------
   6.c Modes grid — blocs gradient pleins (1 couleur = 1 mode)
   ----------------------------------------------------------- */
.modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0 28px;
}
.modes-grid.hero-modes-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .modes-grid.hero-modes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mode-card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px 12px 12px;
  background: var(--grad-brand);
  border: none;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: white;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
  min-height: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.mode-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 28% -10%, rgba(255, 255, 255, 0.28), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.mode-card .mc-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  filter: blur(26px);
  opacity: .55;
  z-index: -1;
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.mode-card:hover {
  transform: translateY(-3px) scale(1.01);
  text-decoration: none; color: white;
}
.mode-card:hover .mc-glow { opacity: .8; transform: scale(1.2); }
.mode-card .mc-icon {
  font-size: 1.125rem; line-height: 1;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px;
  margin-bottom: 2px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base);
}
.mode-card:hover .mc-icon {
  transform: scale(1.08) rotate(-4deg);
  background: rgba(255, 255, 255, 0.32);
}
.mode-card .mc-name {
  font-size: .9375rem; font-weight: 800;
  letter-spacing: -.015em;
  margin: 0; line-height: 1.2;
  color: white;
}
.mode-card .mc-desc {
  font-size: .75rem; line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mode-card .mc-cta {
  margin-top: 6px;
  align-self: center;
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; font-size: .6875rem;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mode-card:hover .mc-cta {
  transform: translateX(2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.mode-card[data-game="xi"]           { background: var(--game-xi-grad); box-shadow: 0 6px 18px rgba(22, 163, 74, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mode-card[data-game="xi"]:hover     { box-shadow: 0 14px 32px rgba(22, 163, 74, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.mode-card[data-game="xi"] .mc-cta   { color: var(--game-xi); }

.mode-card[data-game="top5"]         { background: var(--game-top5-grad); box-shadow: 0 6px 18px rgba(249, 115, 22, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mode-card[data-game="top5"]:hover   { box-shadow: 0 14px 32px rgba(249, 115, 22, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.mode-card[data-game="top5"] .mc-cta { color: var(--game-top5); }

.mode-card[data-game="duel"]         { background: var(--game-duel-grad); box-shadow: 0 6px 18px rgba(6, 182, 212, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mode-card[data-game="duel"]:hover   { box-shadow: 0 14px 32px rgba(6, 182, 212, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.mode-card[data-game="duel"] .mc-cta { color: var(--game-duel); }

.mode-card[data-game="guess-player"]         { background: var(--game-guess-player-grad); box-shadow: 0 6px 18px rgba(236, 72, 153, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mode-card[data-game="guess-player"]:hover   { box-shadow: 0 14px 32px rgba(236, 72, 153, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.mode-card[data-game="guess-player"] .mc-cta { color: var(--game-guess-player); }

.mode-card[data-game="guess"]         { background: var(--game-guess-grad); box-shadow: 0 6px 18px rgba(168, 85, 247, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mode-card[data-game="guess"]:hover   { box-shadow: 0 14px 32px rgba(168, 85, 247, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.mode-card[data-game="guess"] .mc-cta { color: var(--game-guess); }

.mode-card[data-game="missing"]         { background: var(--game-missing-grad); box-shadow: 0 6px 18px rgba(202, 138, 4, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.mode-card[data-game="missing"]:hover   { box-shadow: 0 14px 32px rgba(202, 138, 4, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.mode-card[data-game="missing"] .mc-cta { color: var(--game-missing); }

/* -----------------------------------------------------------
   7. Portails (style "Hero card" CCN)
   ----------------------------------------------------------- */
.portals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 40px;
}
@media (max-width: 720px) { .portals { grid-template-columns: 1fr; } }

.portal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
  text-decoration: none;
  color: var(--text);
}
.portal:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }
.portal-icon {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 22%;
  display: grid; place-items: center;
  font-size: 1.875rem;
  box-shadow: var(--shadow-icon);
}
.portal.green .portal-icon  { background: var(--grad-brand); color: white; }
.portal.purple .portal-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; }
.portal.amber .portal-icon  { background: var(--grad-trophy); color: white; }
.portal.blue .portal-icon   { background: linear-gradient(135deg, #3b82f6, #1e3a8a); color: white; }
.portal-eyebrow {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.portal.purple .portal-eyebrow { color: var(--purple); }
.portal.amber  .portal-eyebrow { color: var(--yellow); }
.portal.blue   .portal-eyebrow { color: var(--blue); }
.portal-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 4px; }
.portal-sub { margin: 0; color: var(--text-muted); font-size: .9375rem; line-height: 1.4; }
.portal-arrow {
  font-size: 1.5rem; color: var(--text-faded);
  font-weight: 600;
  transition: transform var(--dur-quick), color var(--dur-quick);
}
.portal:hover .portal-arrow { color: var(--accent); transform: translateX(4px); }
@media (max-width: 600px) {
  .portal { grid-template-columns: auto 1fr; padding: 18px; }
  .portal-arrow { display: none; }
}

/* -----------------------------------------------------------
   8. Cards
   ----------------------------------------------------------- */
.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.grid.tight   { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.grid.wide    { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  transition: all var(--dur-quick);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--text);
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--text);
}
.card .card-icon {
  width: 44px; height: 44px;
  border-radius: 22%;
  background: linear-gradient(135deg, var(--bg-subtle), #e7e5e4);
  display: grid; place-items: center;
  font-size: 1.375rem;
  margin-bottom: 10px;
  box-shadow: var(--shadow-icon);
}
.card .card-title {
  font-weight: 600; font-size: .9375rem;
  color: var(--text);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.card .card-meta { font-size: .75rem; color: var(--text-muted); font-weight: 500; }

/* Couleurs catégorisées — chaque type sa couleur, ton-sur-ton, jamais deux teintes qui jurent */
.card .card-icon[data-tile="club"]         { background: linear-gradient(135deg, #4ade80, #15803d); color: white; }
.card .card-icon[data-tile="national"]     { background: linear-gradient(135deg, #60a5fa, #1e40af); color: white; }
.card .card-icon[data-tile="confederation"]{ background: linear-gradient(135deg, #fbbf24, #d4a017); color: white; }
.card .card-icon[data-tile="country"]      { background: linear-gradient(135deg, #f472b6, #be185d); color: white; }
.card .card-icon[data-tile="competition"]  { background: linear-gradient(135deg, #a78bfa, #6d28d9); color: white; }
.card .card-icon[data-tile="cup"]          { background: linear-gradient(135deg, #fb923c, #c2410c); color: white; }
.card .card-icon[data-tile="world"]        { background: linear-gradient(135deg, #5eead4, #0f766e); color: white; }
.card .card-icon[data-tile="category"]     { background: linear-gradient(135deg, #fde047, #ca8a04); color: white; }

/* Quand un vrai logo (club) est rendu dans une tuile, on neutralise le fond
   coloré et on ajoute un padding/contour discret pour uniformiser les logos
   aux ratios variés (carrés, ronds, hauts, larges). */
.card .card-icon.has-logo {
  background: #fff !important;
  border: 1px solid var(--border);
  padding: 4px;
  overflow: hidden;
}
.card .card-icon.has-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* App Store style card pour featured */
.card-spot {
  padding: 20px;
  border-radius: var(--r-lg);
  display: grid;
  gap: 12px;
}
.card-spot .card-icon { width: 56px; height: 56px; font-size: 1.625rem; margin-bottom: 0; }

/* -----------------------------------------------------------
   9. Buttons
   ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: .875rem;
  background: white;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: all var(--dur-quick);
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn.primary {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
  box-shadow: var(--shadow-icon);
}
.btn.primary:hover {
  filter: brightness(1.05);
  color: white;
  box-shadow: var(--shadow-icon-hover);
}
.btn.warning {
  background: var(--warning);
  border-color: var(--warning);
  color: white;
}
.btn.warning:hover { background: #b45309; border-color: #b45309; color: white; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: rgba(220, 38, 38, 0.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--bg-subtle); color: var(--text); transform: none; box-shadow: none; }
.btn.sm { padding: 7px 14px; font-size: .8125rem; }
.btn.lg { padding: 14px 28px; font-size: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* -----------------------------------------------------------
   10. Filters / Search
   ----------------------------------------------------------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: white;
  border: 1px solid var(--border);
  font-size: .8125rem; color: var(--text-muted);
  font-weight: 500; cursor: pointer;
  transition: all var(--dur-quick);
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
  box-shadow: var(--shadow-icon);
}
.search-box {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font-size: .9375rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  box-shadow: var(--shadow-sm);
}

/* -----------------------------------------------------------
   11. Pitch (terrain)
   ----------------------------------------------------------- */
.pitch-wrap {
  background: linear-gradient(180deg, #1a1a1a, #0d0d0d);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-md);
}
/* Header "broadcast TV" au-dessus du terrain : catégorie dominante + équipe */
.pitch-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 18px 14px;
  margin-bottom: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  /* Thème par défaut : ORANGE (consensus + builder) */
  background: linear-gradient(135deg, #fb923c 0%, #f97316 40%, #dc2626 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 -2px 0 rgba(0, 0, 0, 0.12) inset,
    0 6px 18px rgba(249, 115, 22, 0.35);
}
/* Thème VIOLET — XI individuels (lineup-view) — pour différencier du XI commu */
.pitch-header.theme-purple {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 45%, #6d28d9 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 -2px 0 rgba(0, 0, 0, 0.12) inset,
    0 6px 18px rgba(139, 92, 246, 0.4);
}
/* Halo lumineux subtil en haut (effet "shine") */
.pitch-header::before {
  content: ''; position: absolute;
  top: -50%; left: 50%; transform: translateX(-50%);
  width: 80%; height: 100%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.22), transparent 65%);
  pointer-events: none;
}
.pitch-header > * { position: relative; z-index: 1; }
.pitch-header.empty {
  justify-content: center;
  background: var(--bg-elev);
  border-color: var(--border);
  color: var(--text-muted);
  font-style: italic;
}
.pitch-header.empty::before { display: none; }
.pitch-header .ph-logo {
  width: 48px; height: 48px;
  object-fit: contain;
  background: white;
  padding: 4px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.pitch-header .ph-flag,
.pitch-header .ph-emoji {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: 30px;
  background: white;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.pitch-header .ph-flag .flag-img { height: 70%; width: auto; }
.pitch-header .ph-info { flex: 1; min-width: 0; }
/* Texte sur fond gradient orange→rouge : tout en blanc, gros, claquant pour partage social */
.pitch-header .ph-cat {
  font-weight: 900; font-size: 1.625rem;
  color: white;
  letter-spacing: -.025em; line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pitch-header .ph-team {
  font-size: 1.0625rem; font-weight: 700;
  color: white;
  letter-spacing: -.01em; line-height: 1.2;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.pitch-header .ph-meta {
  font-size: .75rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 4px;
  letter-spacing: .01em;
}
/* Responsive : sur petits écrans, réduire un peu pour éviter débordement */
@media (max-width: 540px) {
  .pitch-header { padding: 12px 14px; gap: 12px; }
  .pitch-header .ph-logo,
  .pitch-header .ph-flag,
  .pitch-header .ph-emoji { width: 54px; height: 54px; }
  .pitch-header .ph-emoji,
  .pitch-header .ph-flag { font-size: 32px; }
  .pitch-header .ph-cat { font-size: 1.1875rem; }
  .pitch-header .ph-team { font-size: .875rem; }
  .pitch-header .ph-meta { font-size: .6875rem; }
}
/* Filigrane logo au centre du terrain — bien visible (~38% opacité) */
.pitch-watermark {
  position: absolute;
  inset: 30% 20% 33% 20%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.38;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}
/* Variante drapeau (rectangulaire) — un peu moins opaque, plus large */
.pitch-watermark.watermark-flag {
  inset: 32% 14% 35% 14%;
  opacity: 0.32;
  border-radius: 4px;
  overflow: hidden;
}
.pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
  background:
    /* vignette douce pour donner du relief */
    radial-gradient(ellipse 90% 100% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
    /* bandes verticales subtiles (effet tonte) */
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.045) 0px, rgba(255, 255, 255, 0.045) 8%,
      transparent 8%, transparent 16%
    ),
    /* dégradé vert de fond — du haut sombre vers milieu plus clair */
    linear-gradient(180deg, #157a3a 0%, #1a9c47 50%, #157a3a 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2);
}
.pitch-lines { position: absolute; inset: 0; pointer-events: none; }
.pitch .slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  width: 80px; cursor: pointer; user-select: none;
  z-index: 2;
}
.pitch .slot .jersey {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--accent);
  display: grid; place-items: center;
  font-weight: 700; color: var(--accent); font-size: .8125rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: all var(--dur-base) var(--ease-spring);
  overflow: hidden;
  position: relative;
}
.pitch .slot:hover .jersey {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 18px rgba(0, 0, 0, 0.4);
}
.pitch .slot.empty .jersey {
  background: rgba(255, 255, 255, 0.85);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--text-muted);
}
.pitch .slot.gk .jersey {
  background: var(--warning);
  border-color: white;
  color: white;
}
/* Slot rempli avec drapeau de la nationalité dans le cercle */
.pitch .slot .jersey-flag {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pitch .slot.has-flag .jersey {
  background: #1a1a1a;
  border-color: white;
}
.pitch .slot.has-flag.gk .jersey {
  border-color: var(--warning);
  border-width: 4px;
}
.pitch .slot .name {
  margin-top: 6px;
  font-size: .8125rem; font-weight: 600;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  text-align: center;
  max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 5px;
  backdrop-filter: blur(4px);
  letter-spacing: -.01em;
}
/* Empty slot : la jersey affiche déjà le poste, pas besoin de label en double */
.pitch .slot.empty .jersey { font-size: .9375rem; }

/* -----------------------------------------------------------
   12. Badges
   ----------------------------------------------------------- */
.lineup-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.badge {
  padding: 5px 12px;
  background: white;
  border-radius: var(--r-pill);
  font-size: .75rem; color: var(--text-muted);
  font-weight: 600;
  border: 1px solid var(--border);
}
.badge.accent { background: var(--accent); color: white; border-color: var(--accent); }
.badge.warning { background: var(--warning); color: white; border-color: var(--warning); }
.badge.soft { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* -----------------------------------------------------------
   13. Vote
   ----------------------------------------------------------- */
.vote-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.vote-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: white;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-weight: 600; font-size: .875rem;
  transition: all var(--dur-quick);
}
.vote-btn:hover { color: var(--text); border-color: var(--accent); }
.vote-btn.active.up {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.vote-btn.active.down {
  background: #fee2e2;
  border-color: var(--danger);
  color: var(--danger);
}
.vote-score {
  margin-left: auto;
  font-weight: 700; font-size: 1.5rem;
  letter-spacing: -.02em;
}

/* -----------------------------------------------------------
   14. Modal
   ----------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 25, 23, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn var(--dur-base) var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 100%; max-width: 460px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  animation: pop var(--dur-base) var(--ease-spring);
}
@keyframes pop {
  from { transform: scale(.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.modal-header {
  padding: 22px 26px 16px;
  display: flex; align-items: center; gap: 10px;
}
.modal-header h3 {
  margin: 0;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em;
}
.modal-header .close {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  transition: all var(--dur-quick);
  font-size: 16px; color: var(--text-muted);
}
.modal-header .close:hover { background: var(--border); transform: rotate(90deg); color: var(--text); }
.modal-body { padding: 0 26px 22px; overflow-y: auto; flex: 1; }
.modal-body label {
  display: block;
  font-size: .6875rem; color: var(--text-muted);
  margin: 14px 0 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.modal-body input, .modal-body select, .modal-body textarea { width: 100%; }
.modal-footer {
  padding: 16px 26px 22px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  background: white;
  color: #3c4043;
  font-weight: 600; font-size: .9375rem;
  border: 1px solid var(--border-strong);
  transition: all var(--dur-quick);
}
.btn-google:hover { border-color: var(--text-muted); box-shadow: var(--shadow-md); }

.modal-or {
  display: flex; align-items: center; gap: 14px;
  color: var(--text-faded); font-size: .6875rem; font-weight: 600;
  margin: 22px 0;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.modal-or::before, .modal-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.modal-error {
  display: none;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: var(--danger);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 500;
  margin-bottom: 14px;
}
.modal-error.show { display: block; }

.modal-switch {
  text-align: center; margin-top: 18px;
  font-size: .8125rem; color: var(--text-muted);
}
.modal-switch a { color: var(--accent); font-weight: 600; cursor: pointer; }

/* -----------------------------------------------------------
   14b. Auth modal — additional polish (register, login, reset)
   ----------------------------------------------------------- */
.auth-modal { max-width: 480px !important; }
.auth-modal .modal-header h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.375rem;
}
.auth-subtitle {
  margin: 0 0 18px !important;
  font-size: .9rem !important;
  color: var(--text-muted);
  line-height: 1.45;
}
.auth-modal .modal-body input,
.auth-modal .modal-body select {
  padding: 13px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 500;
  background: var(--bg-elev);
  transition: border-color .18s, box-shadow .18s;
}
.auth-modal .modal-body input:focus,
.auth-modal .modal-body select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .12);
}
.auth-modal .form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-modal .form-grid-2 label { margin-top: 0; }
.auth-modal .req { color: var(--accent); }
.auth-modal .auth-row-end { text-align: right; margin-top: 10px; }
.auth-modal .auth-link-sub {
  color: var(--text-muted); font-weight: 600; font-size: .8125rem;
  cursor: pointer;
}
.auth-modal .auth-link-sub:hover { color: var(--accent); }
.auth-modal .auth-hint {
  font-size: .75rem; font-weight: 500;
  color: var(--text-faded);
  margin-top: -4px;
}
.auth-modal .auth-submit {
  width: 100%; margin-top: 20px;
}
.auth-modal .auth-section-divider {
  margin: 22px 0 12px;
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
}
.auth-modal .auth-section-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.auth-modal .auth-optional {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  color: var(--text-faded);
}

/* Password show/hide toggle */
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 46px !important; }
.pwd-wrap .pwd-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: transparent; border: none; border-radius: var(--r-sm);
  cursor: pointer; font-size: 16px;
  color: var(--text-muted);
  display: grid; place-items: center;
  transition: background .15s;
}
.pwd-wrap .pwd-toggle:hover { background: var(--bg-subtle); }

/* Newsletter toggle row */
.newsletter-toggle {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 16px !important;
  margin: 14px 0 4px !important;
  background: linear-gradient(135deg, rgba(249, 115, 22, .06), rgba(236, 72, 153, .04));
  border: 1.5px solid rgba(249, 115, 22, .18);
  border-radius: var(--r) !important;
  cursor: pointer;
  text-transform: none !important; letter-spacing: 0 !important;
  font-weight: 500 !important;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.newsletter-toggle:hover { border-color: rgba(249, 115, 22, .35); }
.newsletter-toggle .nt-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.newsletter-toggle .nt-title {
  font-size: .9rem; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.newsletter-toggle .nt-sub {
  font-size: .75rem; color: var(--text-muted); font-weight: 500;
  text-transform: none; letter-spacing: 0;
  line-height: 1.35;
}
.newsletter-toggle .nt-switch {
  position: relative; flex-shrink: 0;
  width: 46px; height: 26px;
}
.newsletter-toggle .nt-switch input {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0; margin: 0 !important; padding: 0 !important;
  cursor: pointer; z-index: 1;
}
.newsletter-toggle .nt-slider {
  position: absolute; inset: 0;
  background: #cbd1d8;
  border-radius: 99px;
  transition: background .2s;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.newsletter-toggle .nt-slider::after {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: transform .2s;
}
.newsletter-toggle .nt-switch input:checked + .nt-slider {
  background: #16a34a;
}
.newsletter-toggle .nt-switch input:checked + .nt-slider::after {
  transform: translateX(20px);
}
.newsletter-toggle .nt-switch input:focus-visible + .nt-slider {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .25);
}

/* Entity picker (club / nation autocomplete) */
.ent-picker {
  position: relative;
  margin-bottom: 4px;
}
.ent-picker-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  cursor: pointer;
  text-align: left;
  font-weight: 500; font-size: .9375rem;
  color: var(--text-muted);
  transition: border-color .15s, background .15s;
}
.ent-picker-trigger:hover { border-color: var(--text-muted); }
.ent-picker.selected .ent-picker-trigger {
  border-color: var(--accent);
  background: rgba(249, 115, 22, .04);
  color: var(--text);
  font-weight: 600;
}
.ent-picker-em {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 1rem;
  overflow: hidden;
}
.ent-picker-em img { width: 100%; height: 100%; object-fit: contain; }
.ent-picker-label { flex: 1; }
.ent-picker-clear {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: none;
  display: grid; place-items: center;
  font-size: 11px; color: var(--text-muted);
  cursor: pointer; padding: 0;
  transition: background .12s;
}
.ent-picker-clear:hover { background: var(--border); color: var(--text); }

.ent-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 110;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-xl);
  max-height: 360px;
  display: flex; flex-direction: column;
  animation: pop .18s var(--ease-spring);
  overflow: hidden;
}
.ent-search {
  flex-shrink: 0;
  width: 100%;
  padding: 12px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-size: .875rem !important;
  background: transparent;
}
.ent-search:focus { box-shadow: none !important; border-color: var(--border) !important; }
.ent-results {
  flex: 1; overflow-y: auto;
  padding: 6px;
}
.ent-loading, .ent-empty {
  padding: 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: .875rem;
}
.ent-section-title {
  padding: 6px 10px;
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
}
.ent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.ent-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.ent-row {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: transparent; border: none;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.ent-row:hover { background: var(--bg-subtle); }
.ent-row-em {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 1rem;
  overflow: hidden;
}
.ent-row-img { width: 100%; height: 100%; object-fit: contain; }
.ent-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ent-row-name {
  font-size: .875rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-row-sub {
  font-size: .7rem; color: var(--text-muted); font-weight: 500;
}

/* Welcome card (post signup) */
.welcome-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px 30px;
  max-width: 460px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: pop var(--dur-base) var(--ease-spring);
  position: relative;
}
.welcome-card .welcome-burst {
  font-size: 3rem;
  margin-bottom: 8px;
  animation: pop .5s var(--ease-spring);
}
.welcome-card h2 {
  font-size: 1.65rem; font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 8px;
  color: var(--text);
}
.welcome-card .welcome-sub {
  color: var(--text-muted); font-size: .95rem;
  margin: 0 0 20px; line-height: 1.45;
}
.welcome-card .welcome-perks {
  list-style: none; padding: 0; margin: 0 0 24px;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.welcome-card .welcome-perks li {
  display: flex; align-items: center; gap: 12px;
  font-size: .9rem; font-weight: 500; color: var(--text);
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
}
.welcome-card .welcome-perks .ico {
  flex-shrink: 0;
  font-size: 1.2rem;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-elev);
  display: grid; place-items: center;
}
.welcome-card .welcome-perks strong { font-weight: 700; }
.welcome-card .welcome-perks em { color: var(--accent); font-style: normal; font-weight: 600; }

/* -----------------------------------------------------------
   14c. Account page (Mon compte)
   ----------------------------------------------------------- */
.account-page {
  max-width: 880px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 8px 0 60px;
}
/* Quand monté dans l'onglet Préférences du profil, on prend toute la largeur
   pour s'aligner sur les autres onglets (XI publiés / Cosmétiques / Stats). */
#profile-tab-content .account-page {
  max-width: none;
  padding-top: 0;
}
.account-hero {
  background: linear-gradient(135deg, rgba(249,115,22,.04), rgba(236,72,153,.04));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 32px 24px;
}
.account-hero h1 {
  margin: 0 0 6px;
  font-size: 1.875rem; font-weight: 800;
  letter-spacing: -.02em;
}
.account-hero p { margin: 0; font-size: .95rem; color: var(--text-muted); }

.account-section {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 26px 28px;
}
.account-section-title {
  font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  display: flex; align-items: center; gap: 8px;
}
.account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.account-field { display: flex; flex-direction: column; gap: 8px; }
.account-field label {
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
}
.account-field input {
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  font-size: .9375rem; font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
.account-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.account-field input:disabled {
  background: var(--bg-subtle);
  opacity: .65;
  cursor: not-allowed;
}
.account-hint {
  font-size: .75rem; color: var(--text-faded); font-weight: 500;
}
.account-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 600;
  color: #92400e;
}
.account-banner span { flex: 1; }

.account-actions {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.account-actions .acc-feedback {
  font-size: .875rem; font-weight: 700;
  color: var(--success, #16a34a);
  background: rgba(22, 163, 74, .08);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  animation: fadeIn .25s var(--ease-out);
}

.danger-zone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  border: 2px dashed rgba(239, 68, 68, .35) !important;
  background: rgba(239, 68, 68, .03);
}
.danger-zone .dz-info h3 {
  font-size: .9375rem; font-weight: 800;
  color: var(--danger);
  margin: 0 0 4px;
}
.danger-zone .dz-info p {
  font-size: .8125rem; color: var(--text-muted); margin: 0;
  line-height: 1.4;
}
.btn.danger {
  background: white !important;
  border: 1.5px solid var(--danger);
  color: var(--danger);
  font-weight: 700;
}
.btn.danger:hover {
  background: var(--danger) !important;
  color: white;
}

.logout-row {
  display: flex; justify-content: center;
  padding: 18px;
  background: transparent;
  border: none;
}

.account-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.account-empty-icon {
  font-size: 3rem;
  margin-bottom: 14px;
}
.account-empty h2 {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.account-empty p {
  margin: 0 0 24px;
  color: var(--text-muted);
}
.account-empty-actions {
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
}
.account-empty-actions .btn { min-width: 280px; }

@media (max-width: 720px) {
  .account-grid { grid-template-columns: 1fr; }
  .account-section { padding: 22px 18px; }
  .account-hero { padding: 20px 18px 16px; }
  .account-hero h1 { font-size: 1.5rem; }
  .danger-zone { flex-direction: column; align-items: stretch; }
  .danger-zone .btn { width: 100%; }
}

/* -----------------------------------------------------------
   15. Pregame overlay
   ----------------------------------------------------------- */
.pregame-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: pop var(--dur-base) var(--ease-spring);
}
.pregame-card .pregame-icon {
  font-size: 2.25rem;
  width: 72px; height: 72px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  box-shadow: var(--shadow-icon);
  margin: 0 auto 18px;
}
.pregame-card h2 {
  font-size: 1.5rem; font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -.02em;
}
.pregame-card p { color: var(--text-muted); font-size: .9375rem; margin: 0 0 24px; line-height: 1.55; }
.pregame-card .perks {
  text-align: left;
  margin: 0 auto 24px;
  max-width: 320px;
  display: flex; flex-direction: column; gap: 10px;
}
.pregame-card .perk { display: flex; align-items: center; gap: 12px; font-size: .875rem; font-weight: 500; }
.pregame-card .perk .ico {
  font-size: 1.125rem;
  width: 36px; height: 36px;
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.pregame-card .pregame-actions { display: flex; flex-direction: column; gap: 10px; }
.pregame-card .pregame-actions .btn.primary {
  /* Le CTA "Créer mon compte (gratuit)" doit ressortir nettement */
  font-weight: 800;
  letter-spacing: -.005em;
}
.pregame-card .pregame-guest {
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 600;
}
.pregame-card .pregame-loginhint {
  text-align: center;
  margin: 10px 0 16px;
  font-size: .8125rem;
  color: var(--text-muted);
}
.pregame-card .pregame-loginhint a {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}
.pregame-card .pregame-trust {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin: 0 -4px;
  background: linear-gradient(135deg, #fff4ed, #ffede0);
  border: 1.5px solid #ffd6b8;
  border-radius: var(--r-sm);
  font-size: .78rem; font-weight: 600;
  color: #7a4520;
  line-height: 1.45;
  text-align: left;
}
.pregame-card .pregame-trust-ico { font-size: 1.1rem; flex-shrink: 0; }

/* -----------------------------------------------------------
   15.b Onboarding wizard (5 étapes post-signup)
   ----------------------------------------------------------- */
.onb-wizard-backdrop {
  /* Backdrop renforcée — l'overlay est obligatoire */
  background: rgba(10, 8, 5, .72) !important;
  backdrop-filter: blur(8px);
}
.onb-wizard {
  background: var(--bg-elev);
  border-radius: var(--r-xl);
  padding: 0 0 28px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: pop var(--dur-base) var(--ease-spring);
  overflow: hidden;
}
.onb-progress {
  height: 4px;
  background: var(--bg-subtle);
  position: relative;
  flex-shrink: 0;
}
.onb-progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: 0 4px 4px 0;
  transition: width .35s var(--ease-spring);
}
.onb-step-info {
  text-align: center;
  font-size: .68rem; font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .12em;
  margin: 14px 0 0;
  flex-shrink: 0;
}
.onb-body {
  padding: 12px 28px 0;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column;
}
.onb-icon {
  font-size: 2rem;
  width: 64px; height: 64px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  box-shadow: var(--shadow-icon);
  margin: 8px auto 14px;
}
.onb-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: -.02em;
}
.onb-sub {
  color: var(--text-muted);
  font-size: .875rem;
  margin: 0 0 20px;
  text-align: center;
  line-height: 1.5;
}
.onb-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font: inherit; font-size: 1rem;
  background: var(--bg-elev);
  margin-bottom: 6px;
  box-sizing: border-box;
  transition: border-color .15s, background .15s;
}
.onb-input:focus {
  outline: none;
  border-color: var(--accent);
  background: white;
}
.onb-err {
  font-size: .8125rem;
  color: var(--danger, #ef4444);
  font-weight: 600;
  margin: 4px 0 8px;
  min-height: 18px;
  opacity: 0;
  transition: opacity .15s;
}
.onb-err.show { opacity: 1; }
.onb-actions {
  display: flex; gap: 10px;
  margin-top: 18px;
  justify-content: flex-end;
}
.onb-actions .btn.primary { flex: 1; max-width: 220px; }
.onb-actions .btn.ghost {
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
}
.onb-skip-link {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  margin: 10px auto 0;
  padding: 6px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.onb-skip-link:hover { color: var(--text); }

/* Picker region (club / nation / player) */
.onb-picker-region { margin: 0 0 4px; }
.onb-ent-results,
.onb-player-results {
  max-height: 280px;
  overflow-y: auto;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
}
.onb-section-title {
  font-size: .68rem; font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 10px 14px 6px;
  position: sticky; top: 0;
  background: var(--bg-elev);
  z-index: 1;
}
.onb-ent-grid,
.onb-player-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 0 8px 8px;
}
.onb-ent-list {
  display: flex; flex-direction: column;
  padding: 0 8px 8px;
}
.onb-ent-row,
.onb-player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .12s, border-color .12s;
}
.onb-ent-row:hover,
.onb-player-row:hover {
  background: rgba(249, 115, 22, .06);
  border-color: rgba(249, 115, 22, .15);
}
.onb-ent-row-em,
.onb-player-flag {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 1rem;
  overflow: hidden;
}
.onb-ent-row-em img { width: 100%; height: 100%; object-fit: contain; }
.onb-ent-row-info,
.onb-player-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.onb-ent-row-name,
.onb-player-name {
  font-size: .875rem; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb-ent-row-sub,
.onb-player-sub {
  font-size: .72rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onb-empty,
.onb-loading {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: .875rem;
}

.onb-selected-preview {
  background: linear-gradient(135deg, rgba(34, 197, 94, .08), rgba(34, 197, 94, .03));
  border: 1.5px solid rgba(34, 197, 94, .3);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.onb-selected-info { display: flex; align-items: center; gap: 12px; }
.onb-selected-flag {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: white;
  display: grid; place-items: center;
  font-size: 1.2rem;
  overflow: hidden;
}
.onb-selected-flag img { width: 100%; height: 100%; object-fit: contain; }
.onb-selected-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.onb-selected-name { font-size: .9375rem; font-weight: 800; color: var(--text); }
.onb-selected-sub { font-size: .75rem; color: var(--text-muted); }
.onb-clear {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px; color: var(--text-muted);
  display: grid; place-items: center;
}
.onb-clear:hover { background: white; color: var(--text); }

.onb-newsletter {
  margin-top: 8px !important;
  margin-bottom: 14px !important;
}
.onb-recap-block {
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 1.5px solid #f9ca24;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-size: .875rem;
  color: #7d4e00;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Mobile */
@media (max-width: 640px) {
  .onb-wizard {
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .onb-body { padding: 12px 18px 0; }
  .onb-title { font-size: 1.2rem; }
  .onb-icon { width: 56px; height: 56px; font-size: 1.7rem; }
  .onb-ent-grid, .onb-player-grid { grid-template-columns: 1fr; }
  .onb-ent-results, .onb-player-results { max-height: 36vh; }
  .onb-actions .btn.primary { max-width: none; }
}

/* -----------------------------------------------------------
   16. Player picker (browse + filtres)
   ----------------------------------------------------------- */
.picker-modal {
  max-width: 760px !important;
  height: 86vh;
  display: flex !important;
  flex-direction: column;
}
.picker-header {
  padding: 22px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.picker-header .pos-pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  font-weight: 800; font-size: .8125rem;
  box-shadow: var(--shadow-icon);
  flex-shrink: 0;
}
.picker-header .pos-pill.gk { background: linear-gradient(135deg, var(--warning), #b45309); }
.picker-header h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.02em;
  flex: 1;
}
.picker-header h3 .scope-label {
  display: block;
  font-size: .75rem; font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}
.picker-header .close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: 16px; color: var(--text-muted);
  flex-shrink: 0;
}
.picker-header .close:hover { background: var(--border); transform: rotate(90deg); }

.picker-toolbar {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0;
}
.picker-toolbar .search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
}
.picker-toolbar .filter-row {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
}
.picker-toolbar .filter-label {
  font-size: .6875rem; font-weight: 700;
  color: var(--text-faded);
  text-transform: uppercase; letter-spacing: .08em;
  margin-right: 6px;
}
.picker-toolbar .chip-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 600; color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-quick);
  white-space: nowrap;
}
.picker-toolbar .chip-mini:hover { border-color: var(--accent); color: var(--accent); }
.picker-toolbar .chip-mini.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
}
.picker-toolbar .chip-mini .n {
  background: rgba(0, 0, 0, 0.1);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: .65rem;
}
.picker-toolbar .chip-mini.active .n { background: rgba(255, 255, 255, 0.25); }

/* ========== PICKER : nouveau toolbar enrichi ========== */
.picker-toolbar .search-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.picker-toolbar .search-row .search { flex: 1; min-width: 200px; }
.picker-toolbar .picker-sort {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--text-muted);
}
.picker-toolbar .picker-sort label { font-weight: 600; }
.picker-toolbar .picker-sort select {
  padding: 7px 10px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.picker-toolbar #picker-toggle-advanced.active,
.picker-toolbar #picker-toggle-compact.active {
  background: var(--grad-brand);
  color: white;
  border-color: transparent;
}

/* Filtres avancés (panneau repliable) */
#picker-advanced-container {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
}
.adv-block-wide { grid-column: 1 / -1; }
.adv-label {
  font-size: .6875rem; font-weight: 700;
  color: var(--text-faded);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px;
}
.adv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adv-chips .chip-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: .75rem;
  font-weight: 600; color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-quick);
  white-space: nowrap;
}
.adv-chips .chip-mini:hover { border-color: var(--accent); color: var(--accent); }
.adv-chips .chip-mini.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
}
.adv-range {
  display: flex; align-items: center; gap: 8px;
}
.adv-range input[type="number"] {
  width: 80px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: .8125rem;
  font-weight: 600;
}
.adv-range span { color: var(--text-faded); font-weight: 700; }

/* ========== Nouvelle filter-bar : boutons-dropdown compacts ========== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur-quick);
  font-family: inherit;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.open {
  border-color: var(--accent);
  background: var(--bg-subtle);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}
.filter-btn .fb-icon { font-size: .9rem; line-height: 1; }
.filter-btn .fb-text { display: inline-flex; align-items: baseline; gap: 6px; }
.filter-btn .fb-caret { font-size: .65rem; opacity: .6; margin-left: 2px; }
.filter-btn .fb-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: .65rem;
  margin-left: 2px;
  transition: all var(--dur-quick);
}
.filter-btn .fb-clear:hover { background: rgba(0, 0, 0, 0.2); transform: rotate(90deg); }
.filter-btn.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
  box-shadow: 0 2px 8px -2px rgba(249, 115, 22, 0.4);
}
.filter-btn.active .fb-key {
  font-weight: 600;
  opacity: .85;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.filter-btn.active .fb-key::after { content: ' :'; }
.filter-btn.active .fb-val {
  font-weight: 700;
  max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-clear-all {
  margin-left: auto;
}

/* Popover des valeurs (attaché au body, position:fixed → pas de clipping) */
.filter-popover {
  z-index: 1000;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.25), 0 4px 12px -4px rgba(0, 0, 0, 0.1);
  max-height: min(60vh, 420px);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: filterPopoverIn .14s var(--ease-spring);
  max-width: 320px;
}
@keyframes filterPopoverIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.filter-popover .fp-search {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.filter-popover .fp-search-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: .8125rem;
  font-family: inherit;
}
.filter-popover .fp-list {
  overflow-y: auto;
  padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.filter-popover .fp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background var(--dur-quick), color var(--dur-quick);
}
.filter-popover .fp-item:hover { background: var(--bg-subtle); color: var(--accent); }
.filter-popover .fp-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.filter-popover .fp-item-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.filter-popover .fp-item-label em { font-style: normal; opacity: .7; }
.filter-popover .fp-item-count {
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-faded);
  background: var(--bg-subtle);
  padding: 1px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.filter-popover .fp-item.active .fp-item-count {
  background: rgba(249, 115, 22, 0.18);
  color: var(--accent);
}

/* Badge compteur sur le bouton ⚙ Filtres */
.adv-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-size: .65rem;
  font-weight: 800;
  margin-left: 4px;
  line-height: 1;
}

/* Pills résumé des filtres actifs (legacy — non utilisé par la nouvelle filter-bar) */
.picker-active-pills {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.picker-active-pills:empty { display: none; }
.active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid rgba(21, 128, 61, 0.3);
  color: var(--accent);
  font-size: .75rem; font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-quick);
}
.active-pill:hover { background: rgba(21, 128, 61, 0.18); }
.active-pill .x {
  font-size: .65rem;
  opacity: .6;
}
.active-pill:hover .x { opacity: 1; }

/* A-Z strip */
.picker-az-strip {
  display: flex; gap: 2px; padding: 6px 24px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  background: var(--bg-subtle);
}
.az-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px;
  padding: 0 4px;
  font-size: .75rem; font-weight: 700;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dur-quick);
  user-select: none;
}
.az-letter:hover { background: var(--bg-elev); color: var(--accent); }
.az-letter.active {
  background: var(--grad-brand);
  color: white;
}

/* Compact mode pour les résultats */
.picker-results.compact .picker-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.picker-results.compact .picker-card {
  padding: 6px 10px;
  gap: 8px;
}
.picker-results.compact .pc-avatar {
  width: 28px; height: 28px; font-size: .65rem;
}
.picker-results.compact .pc-meta { font-size: .6875rem; }

.picker-results {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  background: var(--bg);
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.picker-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-quick);
  text-align: left;
}
.picker-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.picker-card .pc-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 800;
  flex-shrink: 0;
}
.picker-card .pc-info { min-width: 0; flex: 1; }
.picker-card .pc-name {
  font-weight: 600; font-size: .875rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-card .pc-meta {
  font-size: .6875rem; color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-card.popular {
  background: linear-gradient(135deg, #fefce8, white);
  border-color: var(--gold-soft);
}
.picker-card.popular:hover { background: var(--gold-soft); }
.picker-card.is-picked {
  opacity: .45;
  cursor: not-allowed;
  background: var(--bg-subtle);
}
.picker-card.is-picked:hover { transform: none; background: var(--bg-subtle); }
.picker-card .picked-mark {
  display: inline-block;
  margin-left: 4px;
  color: var(--accent-bright, #16a34a);
  font-weight: 800;
}
.foot-mark {
  display: inline-block;
  font-size: .55rem;
  font-weight: 800;
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 3px;
  vertical-align: middle;
}

.popular-section {
  background: linear-gradient(180deg, #fefce8, #fef9c3);
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
}
.popular-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.popular-icon { font-size: 1.125rem; }
.popular-title {
  font-size: .8125rem; font-weight: 800;
  color: var(--gold);
  letter-spacing: -.005em;
}
.popular-sub {
  margin-left: auto;
  font-size: .6875rem; color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
}

.picker-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
  background: var(--bg-elev);
}
.picker-foot .total {
  font-size: .8125rem; color: var(--text-muted);
  font-weight: 600;
}
.picker-foot .actions { margin-left: auto; display: flex; gap: 8px; }

.picker-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}
.picker-empty .em { font-size: 40px; margin-bottom: 12px; opacity: .6; }
.picker-empty p { margin: 0; font-size: .875rem; }

@media (max-width: 720px) {
  .picker-modal { height: 100vh; max-height: 100vh; border-radius: 0; }
  .picker-grid { grid-template-columns: 1fr 1fr; }
}

/* SCOPE PICKER (choix d'équipe dans le builder) */
.scope-picker-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-quick);
}
.scope-picker-trigger:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.scope-picker-trigger .spt-icon {
  width: 32px; height: 32px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-icon);
}
.scope-picker-trigger.empty .spt-icon { background: var(--bg-subtle); color: var(--text-muted); box-shadow: none; }
.scope-picker-trigger .spt-icon .flag-img { height: 60%; width: auto; vertical-align: middle; }
.scope-picker-trigger .spt-logo {
  width: 100%; height: 100%; object-fit: contain;
  background: white; padding: 2px; border-radius: 22%;
}
.scope-picker-trigger .spt-info { min-width: 0; flex: 1; }
.scope-picker-trigger .spt-name {
  font-weight: 600; font-size: .875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scope-picker-trigger .spt-sub {
  font-size: .6875rem; color: var(--text-muted);
}
.scope-picker-trigger .spt-arrow {
  margin-left: auto; color: var(--text-faded); font-size: 1rem;
}

.scope-modal { max-width: 640px !important; height: 80vh; }
.scope-modal .picker-results { padding: 14px 18px; }
.scope-tabs {
  display: flex; gap: 2px;
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}
.scope-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: .8125rem; font-weight: 600;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--dur-quick);
  text-align: center;
  white-space: nowrap;
}
.scope-tab:hover { color: var(--text); }
.scope-tab.active {
  background: white;
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.scope-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-quick);
  text-align: left;
}
.scope-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.scope-card .sc-flag {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scope-card .sc-flag .flag-img {
  width: 24px; height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
.scope-card .sc-logo {
  width: 26px; height: 26px;
  object-fit: contain;
}
/* Drapeau pays — image PNG (flagcdn.com), inline avec le texte */
.flag-img {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.1em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}
/* Dans une icône carrée (card / detail-header), on agrandit le drapeau */
.card .card-icon .flag-img { height: 60%; width: auto; vertical-align: middle; }
.card-spot .card-icon .flag-img { height: 56%; }
.detail-header .icon .flag-img { height: 50%; width: auto; vertical-align: middle; }
.scope-card .sc-info { min-width: 0; flex: 1; }
.scope-card .sc-name {
  font-weight: 600; font-size: .8125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scope-card .sc-meta {
  font-size: .6875rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scope-section-title {
  font-size: .6875rem; font-weight: 700;
  color: var(--text-faded);
  text-transform: uppercase; letter-spacing: .1em;
  margin: 14px 0 8px;
}

/* -----------------------------------------------------------
   17. Toast
   ----------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 200;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 20px;
  font-weight: 500; font-size: .875rem;
  color: var(--text);
  box-shadow: var(--shadow-xl);
  animation: slideIn var(--dur-base) var(--ease-spring);
  max-width: 360px;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
.toast.success { border-color: var(--accent); color: var(--accent); }
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* -----------------------------------------------------------
   18. Spinner & loading
   ----------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading {
  color: var(--text-muted); font-size: .875rem;
  padding: 32px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}

/* -----------------------------------------------------------
   19. Empty state
   ----------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--text-muted);
}
.empty .empty-icon {
  font-size: 3rem; margin-bottom: 16px;
  display: inline-block;
  width: 72px; height: 72px;
  border-radius: 22%;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  display: grid; place-items: center;
}
.empty h3 {
  color: var(--text); font-size: 1.25rem;
  margin: 0 0 8px; font-weight: 700; letter-spacing: -.015em;
}
.empty p { margin: 0 0 18px; }

/* -----------------------------------------------------------
   20. Detail header (entity, country, comp, conf)
   ----------------------------------------------------------- */
.detail-header {
  display: flex; align-items: center; gap: 20px;
  padding: 28px;
  background:
    radial-gradient(500px 240px at 100% 0%, rgba(21, 128, 61, 0.08), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ec 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.detail-header::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-brand);
}
.detail-header .icon {
  font-size: 2.25rem;
  width: 84px; height: 84px;
  border-radius: 22%;
  background: var(--bg-elev);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-icon);
  border: 1px solid var(--border);
}
.detail-header h1 {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700; letter-spacing: -.025em;
}
.detail-header p { margin: 0; color: var(--text-muted); font-size: .9375rem; }

/* -----------------------------------------------------------
   21. Layouts (lineup, builder)
   ----------------------------------------------------------- */
.lineup-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
}
@media (max-width: 880px) { .lineup-layout { grid-template-columns: 1fr; } }
.lineup-side { display: flex; flex-direction: column; gap: 14px; }

.builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
}
@media (max-width: 880px) { .builder-layout { grid-template-columns: 1fr; } }
.builder-form {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  position: sticky; top: 84px;
  box-shadow: var(--shadow-sm);
}
.builder-form label {
  display: block;
  font-size: .6875rem; color: var(--text-muted);
  margin-bottom: 6px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.builder-form input, .builder-form textarea, .builder-form select { width: 100%; }

/* -----------------------------------------------------------
   22. Lineup card
   ----------------------------------------------------------- */
.lineup-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  transition: all var(--dur-quick);
  text-decoration: none; color: var(--text);
}
.lineup-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none; color: var(--text);
}
.lineup-card .lc-title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.lineup-card .lc-meta { font-size: .75rem; color: var(--text-muted); }
.lineup-card .lc-stats { display: flex; gap: 14px; font-size: .75rem; color: var(--text-muted); margin-top: 4px; }
.lineup-card .lc-stats .stat { display: flex; align-items: center; gap: 4px; font-weight: 500; }

/* Placeholder dans la grille de lineups quand peu/pas de data — décision 2026-05-12 :
   plutôt qu'un empty state hors-grid, on intègre une carte d'invitation à publier
   dans la grille elle-même. Layout unique, contenu adapté. */
.lineup-card-placeholder {
  background: var(--bg-subtle);
  border: 1.5px dashed var(--border-strong);
}
.lineup-card-placeholder:hover {
  background: var(--bg-elev);
  border-color: var(--accent);
}

/* -----------------------------------------------------------
   23. Tabs
   ----------------------------------------------------------- */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tab {
  padding: 12px 18px;
  font-size: .9rem; font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dur-quick);
  margin-bottom: -1px;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, transparent 60%, var(--accent-soft));
}
.tab .badge-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: var(--bg-subtle);
  border-radius: 10px;
  font-size: .6875rem;
  color: var(--text-muted);
  font-weight: 600;
}
.tab.active .badge-count { background: var(--accent-soft); color: var(--accent); }

/* -----------------------------------------------------------
   24. Profile avatar
   ----------------------------------------------------------- */
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  display: grid; place-items: center;
  font-size: 1.625rem; font-weight: 700;
  box-shadow: var(--shadow-icon);
}

/* -----------------------------------------------------------
   25. Marquee tags (home)
   ----------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  margin: 24px -24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 12px;
  width: max-content;
  animation: scroll 40s linear infinite;
}
.marquee-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .875rem; font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition: transform .18s var(--ease-spring), border-color .18s, box-shadow .18s, background .18s;
}
.marquee-tag:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 8px 20px -8px rgba(249, 115, 22, .4);
}
.marquee-tag .em { font-size: 1rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(calc(-50% - 6px)); } }

/* -----------------------------------------------------------
   26. Utilities
   ----------------------------------------------------------- */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }

/* -----------------------------------------------------------
   COMPETITION — édition en cours, stages, éditions passées
   ----------------------------------------------------------- */
.edition-current {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.edition-current::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: #f97316; /* orange chaud, moins agressif que le rouge --hot */
}
.ec-head { margin-bottom: 18px; }
.ec-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: #f97316;
  color: white;
  border-radius: var(--r-pill);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.edition-current h2 {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  margin: 0;
}
.ec-note { margin: 4px 0 0; color: var(--text-muted); font-size: .8125rem; }

/* Édition en cours v2 — résumé compact + CTA */
.ec-summary {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.ec-summary-line {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  font-size: .875rem;
  overflow: hidden;
}
.ec-count {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}
.ec-preview {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1; min-width: 0;
  overflow: hidden;
}
.ec-preview .ecp-team {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.ec-preview .ecp-more {
  font-size: .75rem; font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.ec-cta { flex-shrink: 0; white-space: nowrap; }
/* Variante texte (championnat : pas de chips équipes, juste du copy) */
.ec-preview.ec-preview-text {
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .ec-summary { flex-direction: column; align-items: stretch; }
  .ec-cta { width: 100%; justify-content: center; }
  .ec-preview.ec-preview-text { white-space: normal; }
}

/* Phases finales — chips visuels */
.ec-stages {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
}
.ec-stages-label {
  display: block;
  font-size: .6875rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ec-stages-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.ec-stage-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: .8125rem;
  color: var(--text);
  text-decoration: none;
  transition: all var(--dur-quick);
}
.ec-stage-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.ec-stage-chip .ecs-count {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800; font-size: .6875rem;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

/* Accordéon des qualifiés */
.ec-details {
  margin-top: 14px;
}
.ec-details summary {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  padding: 8px 14px;
  font-size: .8125rem; font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  border-radius: var(--r-pill);
  transition: all var(--dur-quick);
}
.ec-details summary::-webkit-details-marker { display: none; }
.ec-details summary:hover {
  background: var(--bg-subtle);
  color: var(--text);
}
.ec-details[open] summary { color: var(--text); margin-bottom: 12px; }
.ec-teams-grid {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
}

/* Lead text sous les section-title */
.section-lead {
  margin-top: -10px;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: .9375rem;
}

/* Catégories en grille fixe — 6 cards par ligne en desktop. Tuiles vertes saturées + custom outline. */
.cat-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 40px;
}
/* Variante interne (inside .pe-body) : pas de marge bottom, gap un peu réduit */
.cat-strip.cat-strip-inner {
  margin: 0;
  gap: 10px;
}

/* Section title teintée selon le mode de jeu (le accent-dot prend la couleur) */
.section-title-game[data-game="top5"] .accent-dot { background: var(--game-top5); }
.section-title-game[data-game="duel"] .accent-dot { background: var(--game-duel); }
.section-title-game[data-game="guess"] .accent-dot { background: var(--game-guess); }

/* Couleur des cards selon le mode de jeu (data-game) */
.cat-strip[data-game="top5"] .cat-card {
  background: var(--game-top5-grad);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cat-strip[data-game="top5"] .cat-card:hover {
  box-shadow: 0 14px 32px rgba(249, 115, 22, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cat-strip[data-game="duel"] .cat-card {
  background: var(--game-duel-grad);
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cat-strip[data-game="duel"] .cat-card:hover {
  box-shadow: 0 14px 32px rgba(6, 182, 212, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cat-strip[data-game="guess"] .cat-card {
  background: var(--game-guess-grad);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cat-strip[data-game="guess"] .cat-card:hover {
  box-shadow: 0 14px 32px rgba(168, 85, 247, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ─────────────────────────────────────────────────────────
   TOP 5 — board vertical en remplacement du terrain
   ───────────────────────────────────────────────────────── */
.top5-board {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.top5-board-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.t5h-eyebrow {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.t5h-meta {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
}

.top5-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.top5-slot {
  display: grid;
  grid-template-columns: 56px auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--dur-quick);
  cursor: pointer;
  outline: none;
}
.top5-slot:hover, .top5-slot:focus-visible {
  border-color: var(--orange);
  background: rgba(249, 115, 22, 0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.08);
}
.top5-slots-view .top5-slot {
  cursor: default;
}
.top5-slots-view .top5-slot:hover {
  border-color: var(--border);
  background: var(--bg-subtle);
  transform: none;
  box-shadow: none;
}
.top5-slot.empty .t5s-info { color: var(--text-muted); }
.top5-slot.filled {
  background: white;
  border-color: var(--border);
}

/* Le rang #1 a un trophée or, #2 argent, #3 bronze, #4-5 plus discrets */
.t5s-rank {
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -.04em;
  text-align: center;
  background: linear-gradient(135deg, var(--orange) 0%, var(--danger) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.top5-slot:nth-child(1) .t5s-rank {
  background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top5-slot:nth-child(2) .t5s-rank {
  background: linear-gradient(135deg, #d1d5db 0%, #6b7280 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.top5-slot:nth-child(3) .t5s-rank {
  background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.t5s-flag {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  background: var(--bg-subtle);
  border-radius: 22%;
  border: 1px solid var(--border);
}
.t5s-flag .flag-img {
  height: 60%;
  width: auto;
  margin: 0;
}
.t5s-info { min-width: 0; }
.t5s-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t5s-name.t5s-empty-label {
  color: var(--orange);
  font-weight: 600;
}
.t5s-sub {
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.t5s-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 6px;
}
.t5s-actions > * {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-faded);
  font-size: .75rem;
  cursor: pointer;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  transition: all var(--dur-quick);
  font-family: inherit;
  line-height: 1;
}
.t5s-arrow:hover:not(:disabled) {
  background: var(--game-top5-soft);
  color: var(--game-top5);
  border-color: var(--game-top5);
}
.t5s-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.t5s-clear {
  font-size: 1rem !important;
  margin-top: 2px;
}
.t5s-clear:hover {
  background: rgba(239, 68, 68, 0.10);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.40);
}

/* Drag & drop visuel */
.top5-slot[draggable="true"] { cursor: grab; }
.top5-slot.dragging { opacity: 0.5; cursor: grabbing; }
.top5-slot.drag-over {
  border-color: var(--game-top5) !important;
  background: var(--game-top5-soft) !important;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.20);
}

/* Quand on est en mode TOP 5, le grid principal devient single-col jusqu'à breakpoint large */
.consensus-grid.consensus-grid-top5 {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
  .consensus-grid.consensus-grid-top5 { grid-template-columns: 1fr; }
}

/* TOP 5 — board consensus (% d'apparition par slot) */
.top5-consensus-board.top5-board-empty {
  opacity: 0.6;
}
.top5-consensus-board .t5s-pct {
  font-size: .8125rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.top5-consensus-board .t5s-pct[data-level="strong"] { background: #dcfce7; color: #15803d; }
.top5-consensus-board .t5s-pct[data-level="medium"] { background: #ffedd5; color: #c2410c; }
.top5-consensus-board .t5s-pct[data-level="weak"]   { background: #fee2e2; color: #b91c1c; }

/* TOP 5 — liste "Autres joueurs plébiscités" */
.top5-others {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-bottom: 32px;
}
.t5o-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.t5o-flag {
  display: grid; place-items: center;
  width: 24px; height: 24px;
}
.t5o-flag .flag-img { height: 100%; width: auto; margin: 0; }
.t5o-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t5o-pct {
  font-size: .75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--r-pill);
}
.t5o-pct[data-level="strong"] { background: #dcfce7; color: #15803d; }
.t5o-pct[data-level="medium"] { background: #ffedd5; color: #c2410c; }
.t5o-pct[data-level="weak"]   { background: #fee2e2; color: #b91c1c; }

/* ─────────────────────────────────────────────────────────
   LE MEILLEUR — duel infini
   ───────────────────────────────────────────────────────── */
.duel-intro {
  margin: 0 0 24px;
}
.duel-title {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  background: var(--game-duel-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.duel-sub {
  color: var(--text-muted);
  margin: 0;
  font-size: .9375rem;
}

.duel-arena {
  margin-bottom: 28px;
}

/* Layout 2-cols : arène à gauche, podium personnel à droite */
.duel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 24px;
  margin-bottom: 36px;
  align-items: start;
}
@media (max-width: 980px) {
  .duel-grid { grid-template-columns: 1fr; }
}

/* Bandeau de stats — 3 cellules */
.duel-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.dsb-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.dsb-icon { font-size: 1.5rem; line-height: 1; }
.dsb-num {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  background: var(--game-duel-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.dsb-lbl {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-top: 2px;
}

.duel-instructions {
  text-align: center;
  font-size: .9375rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  padding: 10px;
  background: var(--game-duel-soft);
  border-radius: var(--r-md);
}
.duel-instructions strong { color: var(--game-duel); }

.duel-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 18px;
}
.duel-card-wrap {
  position: relative;
  display: flex;
  /* pas d'overflow:hidden ici → le badge ROI peut dépasser au-dessus */
}
.duel-card-wrap > .duel-card { width: 100%; }
.duel-vs {
  align-self: center;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  background: var(--game-duel-grad);
  color: white;
  border-radius: 50%;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.40), 0 0 0 4px var(--bg);
  position: relative;
  z-index: 2;
}
.duel-vs .dvs-text { font-family: inherit; }

.duel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 26px 20px 18px;
  background: var(--bg-elev);
  border: 2px solid var(--border);
  border-radius: var(--r-xl);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-spring);
  font-family: inherit;
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: 380px;
}
.duel-card::before {
  /* Effet gradient subtil en fond */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--game-duel-soft), transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.duel-card > * { position: relative; z-index: 1; }
.duel-card:hover {
  transform: translateY(-4px);
  border-color: var(--game-duel);
  box-shadow: 0 18px 40px rgba(6, 182, 212, 0.30);
}
.duel-card:hover::before { opacity: 1; }
.duel-card:hover .dpc-cta {
  background: var(--game-duel-grad);
  color: white;
}

/* Le roi (winner du round précédent) — bordure or + couronne */
.duel-card.is-king {
  border-color: var(--gold);
  box-shadow: 0 12px 30px rgba(212, 160, 23, 0.25);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--bg-elev) 30%);
}
.duel-card.is-king:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 18px 40px rgba(212, 160, 23, 0.40);
}
.dpc-king {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background: #1e293b;
  color: white;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.40), 0 0 0 4px var(--bg-elev);
  z-index: 5;
  pointer-events: none;
  transition: border-color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}
.dpc-king::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(212, 160, 23, 0.18) 100%);
  pointer-events: none;
}

/* Palette King — change tous les 5 wins consécutifs. Affecte le badge, l'avatar,
 * la bordure de la card et le glow. tier=0 = palette or initiale, déjà définie. */
.duel-card-wrap[data-king-tier="1"] .dpc-king,
.duel-card[data-king-tier="1"].is-king { --king-c: var(--game-xi); --king-glow: 22, 163, 74; }
.duel-card-wrap[data-king-tier="2"] .dpc-king,
.duel-card[data-king-tier="2"].is-king { --king-c: var(--game-top5); --king-glow: 249, 115, 22; }
.duel-card-wrap[data-king-tier="3"] .dpc-king,
.duel-card[data-king-tier="3"].is-king { --king-c: var(--game-guess-player); --king-glow: 236, 72, 153; }
.duel-card-wrap[data-king-tier="4"] .dpc-king,
.duel-card[data-king-tier="4"].is-king { --king-c: var(--game-guess); --king-glow: 168, 85, 247; }

.duel-card-wrap[data-king-tier="1"] .dpc-king,
.duel-card-wrap[data-king-tier="2"] .dpc-king,
.duel-card-wrap[data-king-tier="3"] .dpc-king,
.duel-card-wrap[data-king-tier="4"] .dpc-king {
  border-color: var(--king-c);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.40), 0 0 0 4px var(--bg-elev), 0 0 22px rgba(var(--king-glow), .35);
}
.duel-card[data-king-tier="1"].is-king,
.duel-card[data-king-tier="2"].is-king,
.duel-card[data-king-tier="3"].is-king,
.duel-card[data-king-tier="4"].is-king {
  border-color: var(--king-c) !important;
  background: linear-gradient(180deg, rgba(var(--king-glow), .14) 0%, var(--bg-elev) 30%);
  box-shadow: 0 12px 30px rgba(var(--king-glow), .25);
}
.duel-card[data-king-tier="1"].is-king .dpc-avatar,
.duel-card[data-king-tier="2"].is-king .dpc-avatar,
.duel-card[data-king-tier="3"].is-king .dpc-avatar,
.duel-card[data-king-tier="4"].is-king .dpc-avatar {
  background: linear-gradient(135deg, rgba(var(--king-glow), 1) 0%, rgba(var(--king-glow), .75) 100%);
  box-shadow: 0 8px 22px rgba(var(--king-glow), .40), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.duel-card[data-king-tier="1"].is-king .dpc-position,
.duel-card[data-king-tier="2"].is-king .dpc-position,
.duel-card[data-king-tier="3"].is-king .dpc-position,
.duel-card[data-king-tier="4"].is-king .dpc-position {
  color: var(--king-c);
  background: rgba(var(--king-glow), .12);
}
.duel-card[data-king-tier="1"].is-king .dpc-winrate,
.duel-card[data-king-tier="2"].is-king .dpc-winrate,
.duel-card[data-king-tier="3"].is-king .dpc-winrate,
.duel-card[data-king-tier="4"].is-king .dpc-winrate {
  background: linear-gradient(135deg, rgba(var(--king-glow), 1) 0%, rgba(var(--king-glow), .75) 100%);
  box-shadow: 0 4px 12px rgba(var(--king-glow), .35);
}

/* Ligne contextuelle scopée — clubs / tournois disputés selon le scope */
.dpc-context {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  margin-top: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: .75rem;
  color: var(--text);
  line-height: 1.35;
}
.dpc-ctx-ico { font-size: .95rem; flex: 0 0 auto; }
.dpc-ctx-text {
  font-weight: 600;
  text-align: left;
  word-break: break-word;
}

/* KO animation — quand le loser est viré */
.duel-card.ko {
  animation: duel-ko 280ms var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes duel-ko {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(40px) scale(0.85) rotate(-3deg); }
}

/* Slide-in : nouveau challenger */
.duel-card.slide-in {
  animation: duel-slidein 320ms var(--ease-spring);
}
@keyframes duel-slidein {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.dpc-avatar {
  width: 96px; height: 96px;
  border-radius: 22%;
  display: grid; place-items: center;
  background: var(--game-duel-grad);
  color: white;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: 0 8px 22px rgba(6, 182, 212, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.30);
}
.duel-card.is-king .dpc-avatar {
  background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
  box-shadow: 0 8px 22px rgba(212, 160, 23, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.dpc-initials { line-height: 1; }
.dpc-flag {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 2;
}
.dpc-flag .flag-img { height: 28px !important; width: auto !important; margin: 0 !important; border-radius: 3px; }

.dpc-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.dpc-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.15;
}
.dpc-nat {
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 600;
}
.dpc-position {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--game-duel);
  padding: 3px 10px;
  background: var(--game-duel-soft);
  border-radius: var(--r-pill);
}
.duel-card.is-king .dpc-position {
  color: var(--gold);
  background: var(--gold-soft);
}

/* Win-rate commu sur la card du joueur */
.dpc-winrate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: var(--game-duel-grad);
  color: white;
  border-radius: var(--r-md);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}
.dpcw-num {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.dpcw-lbl {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: 0.85;
}
.duel-card.is-king .dpc-winrate {
  background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%);
  box-shadow: 0 4px 12px rgba(212, 160, 23, 0.35);
}

.dpc-stats {
  display: flex;
  width: 100%;
  justify-content: space-around;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dpc-stat-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.dpc-stat-num {
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--text);
  line-height: 1;
}
.dpc-stat-lbl {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.dpc-cta {
  margin-top: 4px;
  padding: 10px 22px;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-muted);
  transition: all var(--dur-quick);
  border: 1px solid var(--border);
}

.duel-actions {
  display: flex;
  justify-content: center;
}
.duel-skip {
  font-size: .8125rem;
  color: var(--text-muted);
}

/* PODIUM PERSONNEL (sidebar) — top des joueurs élus winners pendant la session */
.duel-side { position: sticky; top: 80px; }
.duel-side-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(212, 160, 23, 0.06);
}
.dsc-eyebrow {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.dsc-empty {
  font-size: .8125rem;
  color: var(--text-muted);
  font-style: italic;
}
.dmw-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.dmw-row {
  display: grid;
  grid-template-columns: 28px 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  font-size: .8125rem;
}
.dmw-row.top1 { background: var(--gold-soft); border: 1px solid var(--gold); }
.dmw-row.top2 { background: #f3f4f6; border: 1px solid #d1d5db; }
.dmw-row.top3 { background: #fdf2e9; border: 1px solid #d97706; }
.dmw-rank { font-weight: 900; color: var(--text-muted); text-align: center; }
.dmw-row.top1 .dmw-rank { color: #d4a017; }
.dmw-row.top2 .dmw-rank { color: #6b7280; }
.dmw-row.top3 .dmw-rank { color: #92400e; }
.dmw-flag .flag-img { height: 14px; width: auto; margin: 0; border-radius: 2px; }
.dmw-name { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmw-count {
  font-weight: 800;
  font-size: .75rem;
  color: var(--game-duel);
  background: var(--game-duel-soft);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.dmw-save {
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%) !important;
  color: white !important;
  border: none;
  font-weight: 800;
  padding: 10px;
  font-size: .9375rem;
  text-decoration: none;
  border-radius: var(--r-md);
  display: block;
  box-shadow: 0 6px 18px rgba(212, 160, 23, 0.30);
}
.dmw-save:hover { box-shadow: 0 12px 28px rgba(212, 160, 23, 0.45); }
.dmw-hint {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Hall of Fame de session — joueurs ayant atteint 25 wins consécutifs */
.duel-hof-card {
  margin-top: 14px;
  border-top: 4px solid var(--game-guess);
  background: linear-gradient(180deg, rgba(168, 85, 247, .06) 0%, var(--bg-elev) 40%);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.08);
}
.duel-hof-card .dsc-eyebrow { color: var(--game-guess); }
.dhof-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.dhof-row {
  display: grid;
  grid-template-columns: 22px 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(168, 85, 247, .07);
  border: 1px solid rgba(168, 85, 247, .25);
  border-radius: var(--r-sm);
  font-size: .8125rem;
}
.dhof-crown { font-size: 1rem; text-align: center; }
.dhof-name { font-weight: 700; color: var(--text); }
.dhof-streak {
  font-weight: 900;
  color: var(--game-guess);
  font-size: .75rem;
  padding: 2px 8px;
  background: rgba(168, 85, 247, .15);
  border-radius: var(--r-pill);
}
.dhof-hint {
  font-size: .7rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.duel-leaderboard {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.duel-lb-title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.duel-lb-empty {
  color: var(--text-muted);
  font-size: .875rem;
  margin: 0;
}
.duel-lb-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.duel-lb-row {
  display: grid;
  grid-template-columns: 40px auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--dur-quick);
}
.duel-lb-row:hover { border-color: var(--border-strong); }
.duel-lb-row.top3 { background: white; border-color: var(--border); }
.duel-lb-row.top-1 { border-left: 4px solid #fbbf24; }
.duel-lb-row.top-2 { border-left: 4px solid #d1d5db; }
.duel-lb-row.top-3 { border-left: 4px solid #d97706; }

.dlr-rank {
  font-size: 1.125rem;
  font-weight: 900;
  color: var(--text-muted);
  text-align: center;
}
.duel-lb-row.top-1 .dlr-rank { color: #d4a017; }
.duel-lb-row.top-2 .dlr-rank { color: #6b7280; }
.duel-lb-row.top-3 .dlr-rank { color: #92400e; }
.dlr-flag .flag-img { height: 16px; width: auto; margin: 0; }
.dlr-name {
  font-weight: 700;
  color: var(--text);
  font-size: .9375rem;
}
.dlr-pct {
  font-weight: 800;
  font-size: 1rem;
  background: var(--game-duel-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dlr-record {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-faded);
}

@media (max-width: 700px) {
  .duel-cards { grid-template-columns: 1fr; }
  .duel-vs { justify-self: center; }
  .duel-card { padding: 18px 12px; }
  .dpc-avatar { width: 64px; height: 64px; font-size: 1.125rem; }
  .duel-lb-row { grid-template-columns: 32px auto 1fr auto; }
  .dlr-record { display: none; }
}

/* ─────────────────────────────────────────────────────────
   DEVINE L'ÉQUIPE — quiz visuel sur la compo
   Layout : .consensus-grid (terrain à gauche, panneau hangman à droite).
   ───────────────────────────────────────────────────────── */
.guess-intro { margin: 0 0 24px; }
.guess-title {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
  background: var(--game-guess-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.guess-sub { color: var(--text-muted); margin: 0; font-size: .9375rem; }

/* Header du terrain en mode quiz : gradient violet (signal qu'on est sur Devine l'équipe) */
.pitch-header.gl-header {
  background: var(--game-guess-grad);
}
.pitch-header.gl-header .ph-cat,
.pitch-header.gl-header .ph-team,
.pitch-header.gl-header .ph-meta { color: white; }

/* Panneau de droite (consensus-side-col custom pour le quiz) */
.gl-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* PROGRESS BAR — % de joueurs trouvés + score */
.gl-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--game-guess-grad);
  border-radius: var(--r-lg);
  color: white;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.20);
}
.gl-progress-num {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.gl-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gl-progress-fill {
  height: 100%;
  background: white;
  border-radius: var(--r-pill);
  transition: width var(--dur-base) var(--ease-out);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.40);
}
.gl-progress-score {
  font-size: 1.125rem;
  font-weight: 800;
  white-space: nowrap;
}

/* LISTE DES SLOTS — tableau de bord des 11 joueurs */
.gl-slots-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px;
  max-height: 340px;
  overflow-y: auto;
}
.gl-slot-row {
  display: grid;
  grid-template-columns: 24px 40px 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  cursor: pointer;
  transition: all var(--dur-quick);
  font-family: inherit;
  text-align: left;
  width: 100%;
  font-size: .875rem;
  color: var(--text);
}
.gl-slot-row:hover:not(:disabled) {
  border-color: var(--game-guess);
  background: var(--game-guess-soft);
}
.gl-slot-row.active {
  border-color: var(--game-guess);
  background: var(--game-guess-soft);
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.15);
}
.gl-slot-row.found {
  background: var(--accent-soft);
  border-color: rgba(22, 163, 74, 0.30);
  color: var(--accent);
  cursor: default;
}
.gl-slot-row.skipped {
  background: var(--bg-subtle);
  opacity: 0.75;
}
.gl-slot-row.skipped .gsl-text { font-style: italic; color: var(--text-muted); }
.gl-skip-text { font-style: italic; color: var(--text-muted); }
.gsl-status {
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  color: var(--text-muted);
}
.gl-slot-row.active .gsl-status { color: var(--game-guess); }
.gl-slot-row.found .gsl-status { color: var(--accent); }
.gsl-pos {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  padding: 4px 7px;
  background: var(--game-guess);
  color: white;
  border-radius: var(--r-sm);
}
.gl-slot-row.found .gsl-pos { background: var(--accent); }
.gl-slot-row.active .gsl-pos { background: var(--game-guess-grad); }
.gsl-flag { display: grid; place-items: center; }
.gsl-flag .flag-img { height: 14px; width: auto; margin: 0; border-radius: 2px; }
.gsl-text {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-skip-text { font-style: italic; color: var(--text-faded); }

/* CARD DU SLOT ACTIF — avec input et boutons.
   Toutes les typos restent en var(--font-sans), couleurs accentuées sur le thème violet. */
.gl-active-card {
  position: relative;
  background: var(--bg-elev);
  border: 2px solid var(--game-guess);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.18);
}
.gl-active-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.gl-active-pos {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 5px 12px;
  background: var(--game-guess-grad);
  color: white;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.30);
}
.gl-active-flag {
  display: grid;
  place-items: center;
  width: 32px; height: 24px;
  background: var(--bg-subtle);
  border-radius: 4px;
  border: 1px solid var(--border);
}
.gl-active-flag .flag-img { height: 16px; width: auto; margin: 0; border-radius: 2px; }
.gl-active-meta {
  font-size: .9375rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.005em;
}
.gl-active-meta::before {
  content: '';
  display: inline-block;
  width: 1px; height: 12px;
  background: var(--border);
  margin-right: 8px;
  vertical-align: -1px;
}
.gl-active-name {
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: .15em;
  color: var(--text-faded);
  margin-bottom: 14px;
  min-height: 36px;
  text-align: center;
  padding: 8px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  border: 1px dashed var(--border-strong);
}
.gl-active-row {
  display: flex;
  gap: 8px;
}
.gl-active-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: .9375rem;
  font-weight: 600;
  background: white;
  font-family: inherit;
}
.gl-active-row input:focus {
  outline: none;
  border-color: var(--game-guess);
  box-shadow: 0 0 0 3px var(--game-guess-soft);
}
.gl-active-row .btn.primary {
  background: var(--game-guess-grad);
  border: none;
  color: white;
  padding: 10px 18px;
  font-weight: 800;
}
/* Autocomplete : noms de joueurs uniquement (pas de drapeau, pas de nationalité)
   pour aider à l'orthographe sans donner d'indice supplémentaire. */
.gl-suggest {
  margin-top: 6px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
}
.gl-suggest[hidden] { display: none; }
.gl-sg-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: .9375rem;
  border-bottom: 1px solid var(--border);
}
.gl-sg-item:last-child { border-bottom: none; }
.gl-sg-item:hover,
.gl-sg-item.active {
  background: rgba(168, 85, 247, .08);
  color: var(--game-guess-bright);
  font-weight: 600;
}
.gl-sg-hint {
  padding: 6px 12px;
  font-size: .75rem;
  color: var(--muted);
  font-style: italic;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
}
.gl-active-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.gl-active-actions .btn {
  font-size: .8125rem;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  background: var(--bg-subtle);
  color: var(--text);
  border-radius: var(--r-pill);
  transition: all var(--dur-quick);
}
.gl-active-actions .btn:hover {
  border-color: var(--game-guess);
  color: var(--game-guess);
  background: var(--game-guess-soft);
}
.gl-toast {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--hot-soft);
  color: var(--danger);
  border-radius: var(--r-md);
  font-size: .8125rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--dur-quick);
}
.gl-toast.show { opacity: 1; animation: gl-shake .35s; }
@keyframes gl-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-3px); }
  40%,80% { transform: translateX(3px); }
}

/* Card shake + red flash on wrong answer (forte feedback visuelle) */
@keyframes gl-card-shake {
  0%,100% { transform: translateX(0); }
  15%,45%,75% { transform: translateX(-7px); }
  30%,60%,90% { transform: translateX(7px); }
}
.gl-active-card.shake-wrong {
  animation: gl-card-shake .45s var(--ease-spring);
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18), 0 8px 24px rgba(239, 68, 68, 0.20) !important;
}
.gl-active-card.shake-wrong .gl-active-row input {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.06);
}

/* Flash centré (succès / erreur) — visible quel que soit le scroll */
.gl-flash {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 9999;
  padding: 14px 22px;
  background: var(--game-guess-grad);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.005em;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease-spring);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-flash.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.gl-flash.wrong {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.40);
}

/* Highlight de la ligne juste trouvée (pulse vert) */
@keyframes gl-just-found {
  0%   { background: var(--accent-soft); transform: scale(1); }
  40%  { background: var(--accent-soft); transform: scale(1.015); }
  100% { background: transparent; transform: scale(1); }
}
.gl-slot-row.just-found {
  animation: gl-just-found .8s var(--ease-spring);
}

/* Bonus année — toujours dispo en cours de partie */
.gl-year-bonus {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(236, 72, 153, 0.06));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.gl-year-bonus.found {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.gl-year-bonus.locked {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  opacity: .7;
}
.gl-year-bonus.locked .gl-year-eyebrow {
  color: var(--text-faded);
  text-transform: none;
  letter-spacing: -.005em;
  font-size: .8125rem;
  margin-bottom: 0;
}
.gl-year-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.gl-year-bonus.found .gl-year-eyebrow {
  color: var(--accent);
  text-transform: none;
  font-size: .875rem;
  letter-spacing: -.005em;
  margin-bottom: 0;
}
.gl-year-row {
  display: flex;
  gap: 8px;
}
.gl-year-row input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: .9375rem;
  font-weight: 600;
  background: white;
  font-family: inherit;
}
.gl-year-row input:focus {
  outline: none;
  border-color: var(--game-guess);
  box-shadow: 0 0 0 3px var(--game-guess-soft);
}
.gl-year-row .btn {
  padding: 8px 14px;
  font-size: .8125rem;
  font-weight: 700;
}
.gl-year-hint {
  font-size: .6875rem;
  color: var(--text-faded);
  margin-top: 6px;
  font-style: italic;
}

/* Panneau de révélation final (Devine l'équipe) — récap factuel basé sur le seed. */
.gl-reveal {
  background: linear-gradient(135deg, var(--game-guess-soft), rgba(168, 85, 247, 0.04));
  border: 1px solid var(--game-guess);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 16px 0;
}
.gl-reveal-eyebrow {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--game-guess);
  margin-bottom: 8px;
}
.gl-reveal-team {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.2;
}
.gl-reveal-year {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--game-guess);
}
.gl-reveal-desc {
  margin-top: 8px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Topbar Devine l'équipe — breadcrumb à gauche + bouton "Tirer une autre compo" à droite,
   hors de la zone de jeu pour ne pas créer d'ambiguïté pendant la partie. */
.gl-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gl-topbar .breadcrumb {
  margin: 0;
}
.gl-newcompo.btn {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 8px 14px;
  font-size: .8125rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  transition: all var(--dur-quick);
  white-space: nowrap;
}
.gl-newcompo.btn:hover {
  border-color: var(--game-guess);
  color: var(--game-guess);
  background: var(--game-guess-soft);
}

/* Gros bouton de partage sous le terrain — cohérent avec les autres modes de jeu. */
.gl-pitch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .gl-pitch-actions { grid-template-columns: 1fr; }
}
.gl-action-share.btn.primary {
  background: var(--game-guess-grad);
  color: white;
  border: none;
  padding: 14px 20px;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.005em;
  border-radius: var(--r-md);
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.30);
  transition: transform var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick);
}
.gl-action-share.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(168, 85, 247, 0.42);
  color: white;
}
.gl-action-share-img.btn {
  background: white;
  color: var(--game-guess-bright, #a855f7);
  border: 2px solid var(--game-guess, #a855f7);
  padding: 12px 20px;
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.005em;
  border-radius: var(--r-md);
  transition: transform var(--dur-quick) var(--ease-spring), box-shadow var(--dur-quick);
}
.gl-action-share-img.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(168, 85, 247, 0.25);
}

/* Pitch — feedback visuel sur les slots selon leur état */
.gl-pitch-active .jersey {
  outline: 3px solid var(--game-guess);
  outline-offset: 2px;
  animation: gl-pulse 1.4s ease-in-out infinite;
}
.gl-pitch-found .jersey {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.gl-pitch-found .name {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
/* Skipped = révélé via "Sauter ce poste" → on voit le nom (pas barré, juste atténué) */
.gl-pitch-skipped .jersey { outline: 2px dashed var(--text-faded); }
.gl-pitch-skipped .name {
  color: var(--text-muted);
  background: var(--bg-subtle);
  font-style: italic;
}
.gl-pitch-pending .name {
  color: var(--text-faded);
  font-weight: 700;
  letter-spacing: .15em;
}
@keyframes gl-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.45); }
  50%     { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0); }
}

/* PHASE BONUS — équipe + année */
.gl-bonus-block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.gl-bonus-eyebrow {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--game-guess);
  margin-bottom: 4px;
}
.gl-bonus-title {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
}
.gl-direct-found {
  padding: 10px 14px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  border-radius: var(--r-md);
}
.gl-all-done {
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  font-size: .875rem;
  color: var(--text-muted);
}

/* TENTATIVE DIRECTE — input texte */
.gl-direct, .gl-year-picker {
  background: var(--game-guess-soft);
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.gl-direct-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--game-guess);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.gl-direct-row {
  display: flex;
  gap: 8px;
}
.gl-direct-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: .9375rem;
  font-weight: 600;
  background: white;
  font-family: inherit;
}
.gl-direct-row input:focus {
  outline: none;
  border-color: var(--game-guess);
  box-shadow: 0 0 0 3px var(--game-guess-soft);
}
.gl-direct-row .btn.primary {
  background: var(--game-guess-grad);
  border: none;
  color: white;
  padding: 10px 18px;
  font-weight: 800;
}

/* INDICES */
.gl-clues {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gl-clues-title {
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.gl-clue {
  display: grid;
  grid-template-columns: 24px auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  font-size: .8125rem;
}
.gl-clue-icon { font-size: 1rem; text-align: center; }
.gl-clue-label {
  font-weight: 700;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.gl-clue-value { font-weight: 700; color: var(--text); justify-self: end; }
.gl-clues #gl-clue-more { align-self: flex-start; }

/* SCORE BAR */
.gl-score-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--game-guess-grad);
  border-radius: var(--r-lg);
  color: white;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.20);
}
.gl-score-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: 0.85;
}
.gl-score-value {
  font-size: 1.625rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.gl-score-unit { font-size: .875rem; font-weight: 700; opacity: 0.85; }

/* RÉSULTAT FINAL */
.gl-panel-result { gap: 14px; }
.gl-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.gl-result.won { background: var(--accent-soft); border-color: var(--accent); }
.gl-result.partial { background: var(--orange-soft); border-color: var(--orange); }
.gl-result.lost { background: var(--hot-soft); border-color: var(--danger); }
.gl-result-emoji { font-size: 3rem; line-height: 1; }
.gl-result-text {
  font-size: 1rem;
  color: var(--text);
}
.gl-result-score {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.03em;
  background: var(--game-guess-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 4px;
}
.gl-result-team {
  text-align: center;
  font-size: .9375rem;
  color: var(--text);
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
}

/* Bandeau partage — utilisé par tous les jeux pour leur écran de fin */
.gl-share {
  background: linear-gradient(140deg, var(--accent-soft) 0%, rgba(168, 85, 247, 0.08) 100%);
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-share-title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gl-share-teaser {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  font-style: italic;
}
.gl-share-url {
  font-size: .75rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.gl-share-url code { background: none; color: var(--text-muted); padding: 0; font-size: inherit; }
.gl-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gl-share-row .btn {
  font-size: .8125rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  text-decoration: none;
  white-space: nowrap;
}
.share-copy {
  background: white;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.share-copy:hover { border-color: var(--game-guess); color: var(--game-guess); }
.share-x  { background: #000; color: white; border: 1px solid #000; }
.share-wa { background: #25d366; color: white; border: 1px solid #25d366; }
.share-fb { background: #1877f2; color: white; border: 1px solid #1877f2; }
.share-x:hover, .share-wa:hover, .share-fb:hover { opacity: 0.9; color: white; }
.gl-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gl-actions .btn.primary {
  background: var(--game-guess-grad);
  border: none;
  color: white;
}

@media (max-width: 600px) {
  .gl-letters-grid { grid-template-columns: repeat(7, 1fr); }
  .gl-letter { padding: 10px 0; font-size: .9375rem; }
  .gl-hangchar { min-width: 22px; height: 32px; font-size: 1.125rem; }
}

.guess-board {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.06);
}
.guess-board.national { border-top: 4px solid var(--game-guess); }
.guess-board.club     { border-top: 4px solid var(--game-guess-bright); }

.guess-board-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.gb-eyebrow {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--game-guess);
}
.gb-meta {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

/* Le guess-pitch : on réutilise les classes .pitch + .slot existantes mais on override
   le contenu du jersey (pas de drapeau pour les nationaux, pas de nom). */
.guess-pitch .guess-slot .jersey {
  background: var(--bg-elev);
  border: 2px solid var(--game-guess);
  color: var(--game-guess);
  font-weight: 800;
  font-size: .75rem;
  display: grid;
  place-items: center;
  text-align: center;
}
.guess-pitch .guess-slot .ni-caps {
  font-size: .9375rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.guess-pitch .guess-slot .ni-birth {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--game-guess-bright);
  margin-top: 2px;
}
.guess-pitch .guess-slot-club .jersey {
  background: white;
  border-color: var(--game-guess);
}
.guess-pitch .guess-slot-club .jersey .flag-img {
  width: 60% !important; height: auto !important; margin: 0 !important;
  border-radius: 3px;
}

.guess-input-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--game-guess-soft);
  border: 1px solid rgba(168, 85, 247, 0.20);
  border-radius: var(--r-lg);
}
.guess-counter {
  font-size: .875rem;
  color: var(--text-muted);
}
.guess-counter strong {
  color: var(--game-guess);
  font-weight: 800;
}
.guess-input-group {
  display: flex;
  gap: 8px;
}
.guess-input-group input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 600;
  background: white;
  font-family: inherit;
}
.guess-input-group input[type="text"]:focus {
  outline: none;
  border-color: var(--game-guess);
  box-shadow: 0 0 0 3px var(--game-guess-soft);
}
.guess-input-group .btn.primary {
  background: var(--game-guess-grad);
  border: none;
  color: white;
  padding: 12px 22px;
  font-weight: 800;
  border-radius: var(--r-md);
}

.guess-feedback {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: .875rem;
  font-weight: 600;
}
.guess-feedback.success { background: var(--accent-soft); color: var(--accent); }
.guess-feedback.error   { background: var(--hot-soft); color: var(--danger); }
.guess-feedback.info    { background: var(--bg-subtle); color: var(--text-muted); }

.guess-result {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  font-size: 1rem;
  border: 1px solid var(--border);
}
.guess-result.won { background: var(--accent-soft); border-color: var(--accent); }
.guess-result.lost { background: var(--hot-soft); border-color: var(--danger); }
.guess-result .gr-emoji { font-size: 2rem; }

.guess-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.guess-actions .btn.primary {
  background: var(--game-guess-grad);
  border: none;
  color: white;
}

/* Bloc stats agrégées affiché après réveal */
.guess-stats {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.gs-title {
  font-size: .9375rem;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--text);
}
.gs-rate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.gs-rate-num {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.03em;
  background: var(--game-guess-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gs-rate-lbl { font-size: .8125rem; color: var(--text-muted); }
.gs-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.gs-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 50px;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
}
.gs-bar-label { font-weight: 600; color: var(--text-muted); }
.gs-bar-track {
  height: 8px;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gs-bar-fill {
  height: 100%;
  background: var(--game-guess-grad);
  border-radius: var(--r-pill);
  transition: width var(--dur-base);
}
.gs-bar-pct {
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gs-avg {
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: right;
}
.gs-avg strong { color: var(--text); }

/* Badge "déjà tenté" affiché quand l'user a déjà joué cette compo/joueur */
.ph-prev-play, .gp2-prev-play {
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--text-muted);
  font-style: italic;
  background: var(--bg-subtle);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  display: inline-block;
}

/* ─────────────────────────────────────────────────────────
   USER STATS — section "Mes stats" sur la home
   ───────────────────────────────────────────────────────── */
.user-stats {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 0 0 36px;
  box-shadow: var(--shadow-sm);
}
.us-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.us-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
}
.us-em { font-size: 2rem; line-height: 1; }
.us-num {
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
}
.us-lbl {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.us-badges {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.us-badges-title {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.us-badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.us-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--gold-soft), var(--orange-soft));
  border: 1px solid var(--gold);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  cursor: help;
}

/* ─────────────────────────────────────────────────────────
   ONBOARDING — modal première visite par mode de jeu
   ───────────────────────────────────────────────────────── */
.ob-backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
}
.ob-modal {
  max-width: 540px;
  width: 92%;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  background: var(--bg-elev);
  animation: ob-pop 320ms var(--ease-spring);
}
@keyframes ob-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.ob-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  color: white;
  position: relative;
}
.ob-modal[data-game="xi"]    .ob-header { background: var(--game-xi-grad); }
.ob-modal[data-game="top5"]  .ob-header { background: var(--game-top5-grad); }
.ob-modal[data-game="duel"]  .ob-header { background: var(--game-duel-grad); }
.ob-modal[data-game="guess"] .ob-header { background: var(--game-guess-grad); }
.ob-modal[data-game="guess-player"] .ob-header { background: var(--game-guess-player-grad); }
.ob-icon { font-size: 2.5rem; line-height: 1; }
.ob-title {
  flex: 1;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.ob-close {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: white;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  transition: all var(--dur-quick);
}
.ob-close:hover { background: rgba(255, 255, 255, 0.35); transform: rotate(90deg); }

.ob-steps {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ob-step {
  display: grid;
  grid-template-columns: 36px 48px 1fr;
  gap: 14px;
  align-items: center;
}
.ob-step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: grid; place-items: center;
  font-size: .9375rem;
  font-weight: 900;
  color: var(--text);
}
.ob-step-em { font-size: 2rem; line-height: 1; text-align: center; }
.ob-step-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.ob-step-desc { font-size: .875rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

.ob-actions {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: center;
}
.ob-go {
  width: 100%;
  font-size: 1rem;
  font-weight: 800;
  padding: 14px;
  border: none;
  color: white !important;
}
.ob-modal[data-game="xi"]    .ob-go { background: var(--game-xi-grad); }
.ob-modal[data-game="top5"]  .ob-go { background: var(--game-top5-grad); }
.ob-modal[data-game="duel"]  .ob-go { background: var(--game-duel-grad); }
.ob-modal[data-game="guess"] .ob-go { background: var(--game-guess-grad); }
.ob-modal[data-game="guess-player"] .ob-go { background: var(--game-guess-player-grad); }

/* ─────────────────────────────────────────────────────────
   DAILY CHALLENGES — bandeau home
   ───────────────────────────────────────────────────────── */
.daily-challenges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin: 0 0 36px;
}
.daily-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: white;
  transition: all var(--dur-base) var(--ease-spring);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  position: relative;
  overflow: hidden;
}
.daily-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: white;
}
.daily-guess-lineup { background: var(--game-guess-grad); }
.daily-guess-player { background: var(--game-guess-player-grad); }
.dc-icon { font-size: 3rem; flex-shrink: 0; line-height: 1; }
.dc-content { flex: 1; min-width: 0; }
.dc-eyebrow {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 4px;
}
.dc-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.dc-meta {
  font-size: .8125rem;
  opacity: 0.85;
  margin-top: 4px;
  font-weight: 600;
}
.dc-arrow {
  font-size: 2rem;
  font-weight: 900;
  opacity: 0.7;
  transition: transform var(--dur-quick), opacity var(--dur-quick);
}
.daily-card:hover .dc-arrow { transform: translateX(4px); opacity: 1; }

/* ─────────────────────────────────────────────────────────
   DEVINE LE JOUEUR v2 — carrière en clubs (gp2)
   Style Footy.gg : logos clubs successifs + indices progressifs
   ───────────────────────────────────────────────────────── */
.gp2-grid {
  align-items: start;
}

.gp2-board {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 4px solid var(--game-guess-player);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.06);
}
.gp2-header { margin-bottom: 18px; }
.gp2-eyebrow {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--game-guess-player);
  margin-bottom: 6px;
}
.gp2-title {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 4px;
}
.gp2-sub {
  font-size: .9375rem;
  color: var(--text-muted);
}

/* Silhouette du joueur (cercle de mystère) */
.gp2-silhouette {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.gp2-sil-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--game-guess-player-grad);
  color: white;
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: -.04em;
  box-shadow: 0 16px 36px rgba(236, 72, 153, 0.30), inset 0 2px 0 rgba(255, 255, 255, 0.30);
  border: 4px solid white;
  position: relative;
}
.gp2-silhouette.revealed .gp2-sil-circle {
  background: var(--bg-elev);
  color: var(--game-guess-player);
  font-size: 2.5rem;
  border-color: var(--game-guess-player);
  animation: gp2-reveal 600ms var(--ease-spring);
}
@keyframes gp2-reveal {
  0%   { transform: scale(0.8) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Carrière en clubs — la grosse feature */
.gp2-career {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 18px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.gp2-club {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 90px;
  max-width: 110px;
}
.gp2-club-logo {
  width: 64px; height: 64px;
  border-radius: 22%;
  background: white;
  border: 2px solid var(--border);
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  padding: 4px;
  transition: transform var(--dur-quick);
}
.gp2-club-logo:hover { transform: scale(1.08); }
.gp2-club-logo img {
  width: 100%; height: 100%;
  /* contain garantit qu'aucun logo ne soit coupé — même les bannières larges
     comme "F.C. Porto" en wordmark restent visibles entièrement. */
  object-fit: contain;
  display: block;
}
/* Fallback quand pas de logo_url ou img cassée : cercle dégradé + initiales — donne
   un rendu propre même en l'absence de data, plutôt qu'un carré blanc vide. */
.gp2-club-logo.no-logo {
  background: linear-gradient(135deg, #f5e6cf 0%, #e8d5b3 100%);
  border-color: #d4b890;
}
.gp2-club-fallback {
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #6b4f2a;
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.gp2-club-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp2-club-years {
  font-size: .625rem;
  font-weight: 700;
  color: var(--text-faded);
  letter-spacing: .04em;
}
.gp2-arrow {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--game-guess-player);
  margin: 0 -2px;
  animation: gp2-arrow 1.4s ease-in-out infinite;
}
@keyframes gp2-arrow {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50%      { transform: translateX(3px); opacity: 1; }
}
.gp2-no-clubs {
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  padding: 14px;
}

/* Détails révélés (post-game) */
.gp2-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: var(--r-md);
  margin-top: 14px;
}
.gp2-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: var(--r-sm);
}
.gp2-d-em { font-size: 1rem; }
.gp2-d-lbl { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.gp2-d-val { font-weight: 800; color: var(--text); margin-left: auto; }

/* PANNEAU DROIT — input + indices */
.gp2-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gp2-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 14px 18px;
  background: var(--game-guess-player-grad);
  color: white;
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.20);
}
.gp2-prog-num { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.gp2-prog-lbl { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: 0.85; }
.gp2-prog-score { font-size: 1.25rem; font-weight: 800; }

.gp2-attempts {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gp2-att {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
}
.gp2-att.wrong { background: var(--hot-soft); color: var(--danger); }
.gp2-att.right { background: var(--accent-soft); color: var(--accent); }
.gp2-att-empty { font-size: .8125rem; color: var(--text-faded); font-style: italic; padding: 4px 0; }

/* Carte input */
.gp2-input-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;
}
.gp2-input-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.gp2-input-eyebrow strong { color: var(--game-guess-player); font-weight: 800; }
.gp2-input-row {
  display: flex;
  gap: 8px;
}
.gp2-input-row input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: .9375rem;
  font-weight: 600;
  background: white;
  font-family: inherit;
}
.gp2-input-row input:focus {
  outline: none;
  border-color: var(--game-guess-player);
  box-shadow: 0 0 0 3px var(--game-guess-player-soft);
}
.gp2-input-row .btn.primary {
  background: var(--game-guess-player-grad);
  border: none;
  color: white;
  font-weight: 800;
  padding: 10px 20px;
}

.gp2-suggest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.gp2-sug-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: .8125rem;
}
.gp2-sug-item:hover {
  border-color: var(--game-guess-player);
  background: var(--game-guess-player-soft);
}
.gsi-name { font-weight: 700; color: var(--text); }
.gsi-meta { font-size: .75rem; color: var(--text-muted); }
.gsi-meta .flag-img { height: 12px; width: auto; margin: 0; }

/* INDICES progressifs */
.gp2-hints {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gp2-hints-title {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.gp2-hint {
  display: grid;
  grid-template-columns: 24px auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  font-size: .8125rem;
  transition: all var(--dur-base);
}
.gp2-hint.off { opacity: 0.45; }
.gp2-hint.on { background: var(--game-guess-player-soft); border: 1px solid rgba(236, 72, 153, 0.20); }
.gp2-h-em { font-size: 1rem; }
.gp2-h-lbl { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.gp2-h-val { font-weight: 800; color: var(--text); justify-self: end; }
.gp2-hint.off .gp2-h-val { color: var(--text-faded); font-family: monospace; }

/* RESULT */
.gp2-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 18px;
  border-radius: var(--r-lg);
  border: 2px solid var(--border);
}
.gp2-result-card.won {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.gp2-result-card.won-perfect {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--gold-soft) 100%);
  border-color: var(--gold);
}
.gp2-result-card.lost {
  background: var(--hot-soft);
  border-color: var(--danger);
}
.gp2-result-emoji { font-size: 3.5rem; line-height: 1; }
.gp2-result-headline { font-size: 1.125rem; font-weight: 800; color: var(--text); }
.gp2-result-name { font-size: 1.375rem; font-weight: 900; color: var(--text); letter-spacing: -.02em; }
.gp2-result-score {
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -.03em;
  background: var(--game-guess-player-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 4px;
}
.gp2-rs-unit { font-size: 1rem; opacity: 0.8; }

.gp2-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gp2-actions .btn.primary {
  background: var(--game-guess-player-grad);
  border: none;
  color: white;
  font-weight: 800;
}

/* ─────────────────────────────────────────────────────────
   DEVINE LE JOUEUR v1 (legacy, gardé pour les vieilles refs)
   ───────────────────────────────────────────────────────── */
.gp-board {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 24px;
  align-items: start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-top: 4px solid var(--game-guess-player);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.08);
}
.gp-silhouette {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 18px 14px;
  background: var(--game-guess-player-soft);
  border-radius: var(--r-md);
}
.gp-flag { font-size: 2.5rem; line-height: 1; }
.gp-flag .flag-img { height: 48px; width: auto; margin: 0; border-radius: 4px; }
.gp-init {
  width: 92px; height: 92px;
  border-radius: 22%;
  display: grid; place-items: center;
  background: var(--game-guess-player-grad);
  color: white;
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.30);
}
.gp-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.gp-clues-title {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--game-guess-player);
  margin-bottom: 12px;
}
.gp-clues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.gp-clue {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.gp-clue-icon {
  font-size: 1.25rem;
  width: 32px; text-align: center;
  flex-shrink: 0;
}
.gp-clue-icon .flag-img { height: 16px; width: auto; margin: 0; }
.gp-clue-text { min-width: 0; }
.gp-clue-label {
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gp-clue-value {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le pink/magenta override pour les composants génériques quand on est sur cette page */
body:has(.gp-board) .guess-input-row {
  background: var(--game-guess-player-soft);
  border-color: rgba(236, 72, 153, 0.20);
}
body:has(.gp-board) .guess-counter strong { color: var(--game-guess-player); }
body:has(.gp-board) .guess-input-group input[type="text"]:focus {
  border-color: var(--game-guess-player);
  box-shadow: 0 0 0 3px var(--game-guess-player-soft);
}
body:has(.gp-board) .guess-input-group .btn.primary,
body:has(.gp-board) .guess-actions .btn.primary {
  background: var(--game-guess-player-grad);
}
body:has(.gp-board) .gs-rate-num,
body:has(.gp-board) .gs-bar-fill {
  background: var(--game-guess-player-grad);
}

@media (max-width: 700px) {
  .gp-board { grid-template-columns: 1fr; }
}
.cat-card {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 12px;
  background: var(--grad-brand);
  border: none;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: white;
  text-align: center;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
  box-shadow: 0 6px 18px rgba(21, 128, 61, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  position: relative;
  isolation: isolate;
}
.cat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 28% -10%, rgba(255, 255, 255, 0.28), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.cat-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 32px rgba(21, 128, 61, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-decoration: none;
  color: white;
}
.cat-card-icon {
  width: 64px; height: 64px;
  border-radius: 22%;
  display: grid; place-items: center;
  font-size: 32px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: white;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 10px rgba(0, 0, 0, 0.10);
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base);
}
.cat-card:hover .cat-card-icon {
  transform: scale(1.10) rotate(-4deg);
  background: rgba(255, 255, 255, 0.32);
}
.cat-card-title {
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: white;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Variante "Catégorie perso" : fond blanc + dashed orange. Surcharge les data-game
   (TOP 5 / duel / guess) qui colorent par défaut .cat-card → on les force explicitement
   pour préserver l'identité "carte d'action utilisateur" comme sur la page "ma compo". */
.cat-card.custom,
.cat-strip[data-game] .cat-card.custom {
  background: var(--bg-elev);
  color: var(--text);
  border: 2px dashed var(--orange);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.10);
}
.cat-card.custom::before,
.cat-strip[data-game] .cat-card.custom::before {
  background: radial-gradient(circle at 28% -10%, rgba(249, 115, 22, 0.10), transparent 55%);
}
.cat-card.custom:hover,
.cat-strip[data-game] .cat-card.custom:hover {
  background: var(--bg-subtle);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.22);
  border-color: var(--orange);
}
.cat-card.custom .cat-card-icon,
.cat-strip[data-game] .cat-card.custom .cat-card-icon {
  background: rgba(249, 115, 22, 0.12);
  border: 1px solid rgba(249, 115, 22, 0.28);
  color: var(--orange);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cat-card.custom:hover .cat-card-icon,
.cat-strip[data-game] .cat-card.custom:hover .cat-card-icon {
  background: rgba(249, 115, 22, 0.18);
}
.cat-card.custom .cat-card-title,
.cat-strip[data-game] .cat-card.custom .cat-card-title {
  color: var(--text);
}

@media (max-width: 980px) {
  .cat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cat-card { padding: 16px 10px; gap: 12px; }
  .cat-card-icon { width: 56px; height: 56px; font-size: 28px; }
}
@media (max-width: 600px) {
  .cat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cat-card { padding: 14px 8px; gap: 10px; }
  .cat-card-icon { width: 48px; height: 48px; font-size: 24px; }
  .cat-card-title { font-size: .8125rem; }
}

.stages-list {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.stage-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.stage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.stage-head h3 {
  margin: 0;
  font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em;
}
.stage-count {
  font-size: .6875rem; color: var(--text-muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--bg-subtle);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
.stage-teams {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.team-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600;
  color: var(--text);
  transition: all var(--dur-quick);
  text-decoration: none;
}
.team-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
}
.team-chip .flag { font-size: 1rem; }
.stage-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.past-editions {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
.past-edition {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 18px;
  align-items: stretch;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--dur-quick);
}
.past-edition.current,
.past-edition.alltime {
  /* Pas de compose à droite — le CTA hero est dans le pe-body */
  grid-template-columns: 110px 1fr;
}
.past-edition:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .past-edition {
    grid-template-columns: 90px 1fr;
  }
  .past-edition .pe-compose {
    grid-column: 1 / -1;
    border-radius: 0;
  }
}
.pe-year {
  background: var(--grad-night);
  color: white;
  padding: 18px 14px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  gap: 6px;
}
.pe-year::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0 14px,
    rgba(255, 255, 255, 0.04) 14px 16px);
  pointer-events: none;
}

/* Variantes du bloc gauche selon le type d'édition */
.past-edition.current {
  border-color: rgba(249, 115, 22, 0.30);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.10);
}
.past-edition.current .pe-year {
  background: linear-gradient(140deg, #f97316 0%, #ef4444 50%, #ec4899 100%);
}
.past-edition.current .pey-num {
  background: linear-gradient(135deg, #fff 0%, #fef3c7 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.past-edition.alltime {
  border-color: rgba(99, 102, 241, 0.30);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.10);
}
.past-edition.alltime .pe-year {
  background: linear-gradient(140deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}
.past-edition.alltime .pey-num {
  background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  line-height: 1;
}

/* Petit pill au-dessus du label année dans pe-year */
.pe-year-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-pill);
  font-size: .625rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: white;
  position: relative; z-index: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Le pey-num doit passer au-dessus de l'overlay rayé */
.pey-num, .pey-host { position: relative; z-index: 1; }

/* Header inline d'un bloc EN COURS / ALL TIME — remplace l'ancienne pe-winner-card,
   plus léger et thème-aware. */
.pe-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--text);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.pe-title strong {
  font-weight: 800;
  color: var(--text);
}
.pe-title .pet-meta {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
}
.pe-title .pet-meta-note {
  width: 100%;
  font-size: .8125rem;
  margin-top: 2px;
}
.pe-title-current {
  border-bottom-color: rgba(249, 115, 22, 0.30);
}
.pe-title-current strong {
  background: linear-gradient(135deg, var(--orange) 0%, var(--danger) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pe-title-alltime {
  border-bottom-color: rgba(99, 102, 241, 0.30);
}
.pe-title-alltime strong {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pe-title-past {
  border-bottom-color: rgba(212, 160, 23, 0.30);
}
.pe-title-past strong {
  background: linear-gradient(135deg, #d4a017 0%, #16a34a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pe-title-past .pet-trophy {
  font-size: 1.125rem;
  filter: drop-shadow(0 2px 4px rgba(212, 160, 23, 0.30));
}
/* Air autour des drapeaux dans le titre — sinon l'inline-block colle au texte voisin */
.pe-title .flag-img {
  margin: 0 4px;
  vertical-align: -0.15em;
}
.pey-num {
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(135deg, #fbbf24, #d4a017);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pey-host {
  font-size: .6875rem; font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: 6px;
}

.pe-body {
  padding: 14px 18px 14px 0;
  display: flex; flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.pe-winner-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pew-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15));
}
.pew-info { flex: 1; min-width: 0; }
.pew-label {
  font-size: .625rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.pew-name {
  font-size: 1rem; font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}
.pew-final {
  font-size: .75rem; color: var(--text-muted);
  margin-top: 2px;
}
.pe-no-winner {
  font-size: .9375rem; font-weight: 700;
  color: var(--text);
  padding: 6px 0;
}

.pe-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pe-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all var(--dur-quick);
}
.pe-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  text-decoration: none;
}
.pe-chip-stage {
  background: var(--accent-soft);
  border-color: rgba(21, 128, 61, 0.2);
  color: var(--accent);
}
.pe-chip-stage:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.pec-count {
  font-size: .625rem; font-weight: 800;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: var(--r-pill);
}
.pe-chip-stage .pec-count {
  background: rgba(21, 128, 61, 0.18);
  color: var(--accent);
}
.pe-chip-stage:hover .pec-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Chip "Catégorie perso" — style pointillé orange pour le distinguer des catégories curated */
.pe-chip-custom {
  background: white;
  border: 1px dashed var(--orange);
  color: var(--orange);
}
.pe-chip-custom:hover {
  background: rgba(249, 115, 22, 0.10);
  border-color: var(--orange);
  border-style: dashed;
  color: var(--orange);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * CTA HERO — gros bouton "Compose ton XI" intégré dans un bloc édition/scope
 * ═══════════════════════════════════════════════════════════════════════════ */
.cta-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: white;
  text-decoration: none;
  border-radius: var(--r-lg);
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.22);
  transition: all var(--dur-quick) var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.cta-hero[data-game="top5"] {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.22);
}
.cta-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.cta-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.32);
}
.cta-hero[data-game="top5"]:hover {
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.32);
}
.cta-hero-inner {
  /* Variante intégrée dans un .pe-body — plus compact, marge top pour respirer */
  margin-top: 6px;
}
.cta-hero-icon {
  width: 56px; height: 56px;
  border-radius: 22%;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
  font-size: 1.75rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cta-hero-body { flex: 1; position: relative; z-index: 1; }
.cta-hero-title {
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.cta-hero-sub {
  font-size: .875rem; font-weight: 500;
  opacity: 0.92;
  margin-top: 4px;
}
.cta-hero-arrow {
  font-size: 1.5rem; font-weight: 700;
  margin-left: 8px;
  transition: transform var(--dur-quick) var(--ease-spring);
  position: relative; z-index: 1;
}
.cta-hero:hover .cta-hero-arrow { transform: translateX(4px); }

@media (max-width: 720px) {
  .cta-hero { padding: 14px 16px; gap: 12px; }
  .cta-hero-icon { width: 44px; height: 44px; font-size: 1.4rem; }
  .cta-hero-title { font-size: 1.05rem; }
  .cta-hero-sub { font-size: .8125rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * STAGE CARDS — sub-cards d'une édition en cours (Finale / Demi / Quarts)
 * ═══════════════════════════════════════════════════════════════════════════ */
.stage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.stage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  transition: all var(--dur-quick);
}
.stage-card:hover {
  border-color: var(--game-xi);
  background: rgba(22, 163, 74, 0.06);
  transform: translateY(-1px);
}
.stage-card[data-game="top5"]:hover {
  border-color: var(--game-top5);
  background: rgba(249, 115, 22, 0.06);
}
.stage-card .sc-icon {
  width: 36px; height: 36px;
  border-radius: 22%;
  background: var(--bg-elev);
  display: grid; place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.stage-card .sc-body { flex: 1; min-width: 0; }
.stage-card .sc-label {
  font-size: .9375rem; font-weight: 700;
  letter-spacing: -0.01em;
}
.stage-card .sc-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.stage-card .sc-arrow {
  font-size: 1.1rem;
  color: var(--text-faded);
  transition: transform var(--dur-quick) var(--ease-spring);
}
.stage-card:hover .sc-arrow { transform: translateX(3px); color: var(--game-xi); }
.stage-card[data-game="top5"]:hover .sc-arrow { color: var(--game-top5); }

/* ═══════════════════════════════════════════════════════════════════════════
 * PE-COMPOSE — bouton "Compose ton XI →" à droite d'une past-edition
 * ═══════════════════════════════════════════════════════════════════════════ */
.pe-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  background: var(--bg-subtle);
  border-left: 1px solid var(--border);
  color: var(--game-xi);
  font-size: .875rem; font-weight: 700;
  text-decoration: none;
  transition: all var(--dur-quick);
  white-space: nowrap;
}
.pe-compose[data-game="top5"] { color: var(--game-top5); }
.pe-compose:hover {
  background: rgba(22, 163, 74, 0.08);
  color: var(--game-xi-bright);
}
.pe-compose[data-game="top5"]:hover {
  background: rgba(249, 115, 22, 0.08);
  color: var(--game-top5-bright);
}
.pe-compose .pec-arrow {
  transition: transform var(--dur-quick) var(--ease-spring);
}
.pe-compose:hover .pec-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .pe-compose {
    padding: 10px 16px;
    border-left: none;
    border-top: 1px solid var(--border);
    justify-content: center;
  }
}

/* Accordéon des qualifiés au sein d'une past-edition (édition en cours) */
.pe-teams {
  margin-top: 4px;
  padding: 0;
}
.pe-teams summary {
  cursor: pointer;
  list-style: none;
  font-size: .8125rem; font-weight: 700;
  color: var(--text-muted);
  padding: 8px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--dur-quick);
}
.pe-teams summary::-webkit-details-marker { display: none; }
.pe-teams summary:hover {
  color: var(--accent);
  border-color: var(--border-strong);
}
.pe-teams[open] summary {
  margin-bottom: 10px;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.pe-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

@media (max-width: 600px) {
  .past-edition { grid-template-columns: 1fr; }
  .pe-year { flex-direction: row; gap: 12px; padding: 12px 16px; justify-content: flex-start; }
  .pey-num { font-size: 1.375rem; }
  .pe-body { padding: 14px 16px 16px; }
}

/* -----------------------------------------------------------
   ENGAGEMENT — sections home punchy
   ----------------------------------------------------------- */

/* Big CTA cards "challenges" : les défis à lancer */
.challenges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 24px 0 40px;
}
.challenge {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: all var(--dur-base) var(--ease-spring);
  min-height: 170px;
}
.challenge::before {
  content: var(--ch-emoji, '⚽');
  position: absolute;
  right: -20px; bottom: -30px;
  font-size: 140px;
  opacity: .12;
  z-index: -1;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base);
}
.challenge:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--text);
}
.challenge:hover::before {
  transform: scale(1.15) rotate(-8deg);
  opacity: .2;
}
.challenge .ch-eyebrow {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.challenge h3 {
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.02em;
  margin: 0; line-height: 1.2;
}
.challenge p {
  margin: 0; color: var(--text-muted); font-size: .875rem; line-height: 1.4;
}
.challenge .ch-cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .875rem;
  color: var(--accent);
}
.challenge.warm    { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-color: #fed7aa; }
.challenge.warm .ch-eyebrow { color: var(--accent); }
.challenge.cold    { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-color: #bfdbfe; }
.challenge.cold .ch-eyebrow, .challenge.cold .ch-cta { color: var(--blue); }
.challenge.pink    { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); border-color: #fbcfe8; }
.challenge.pink .ch-eyebrow, .challenge.pink .ch-cta { color: var(--pink); }
.challenge.green   { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #bbf7d0; }
.challenge.green .ch-eyebrow, .challenge.green .ch-cta { color: var(--pitch-green); }
.challenge.yellow  { background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); border-color: #fef08a; }
.challenge.yellow .ch-eyebrow, .challenge.yellow .ch-cta { color: #ca8a04; }
.challenge.purple  { background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%); border-color: #ddd6fe; }
.challenge.purple .ch-eyebrow, .challenge.purple .ch-cta { color: var(--purple); }

/* Trending strip — top 3 XI les plus votés */
.trending {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.trending-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--dur-quick);
  text-decoration: none; color: var(--text);
}
.trending-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none; color: var(--text);
}
.trending-card .rank {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--grad-trophy);
  color: white;
  border-radius: 50%;
  font-weight: 800; font-size: .875rem;
  box-shadow: 0 4px 14px rgba(212, 160, 23, 0.30), 0 1px 2px rgba(15, 23, 42, 0.06);
}
.trending-card .rank.silver { background: linear-gradient(135deg, #e7e5e4, #a8a29e); box-shadow: var(--shadow-md); }
.trending-card .rank.bronze { background: linear-gradient(135deg, #fb923c, #9a3412); box-shadow: var(--shadow-md); }
.trending-card h4 { margin: 0; font-size: 1rem; font-weight: 700; padding-right: 40px; }
.trending-card .tc-meta { font-size: .75rem; color: var(--text-muted); }
.trending-card .tc-stats {
  display: flex; gap: 12px; margin-top: 6px;
  font-size: .8125rem; font-weight: 600;
}
.trending-card .tc-stats .up { color: var(--pitch-green); }
.trending-card .tc-stats .down { color: var(--danger); }

/* Mini-pitch preview (XI du jour) */
.spotlight-card {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 24px;
  padding: 28px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  margin-bottom: 36px;
  align-items: center;
}
@media (max-width: 720px) { .spotlight-card { grid-template-columns: 1fr; } }
.spotlight-card h3 {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.spotlight-card .sp-meta { font-size: .8125rem; color: var(--text-muted); margin-bottom: 12px; }
.spotlight-card .sp-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-weight: 700; color: var(--accent);
}
/* Spotlight pitch — vrai terrain en miniature dans le bandeau "XI à la une"
   de la home. Réutilise .pitch-wrap/.pitch (cf lib/pitch.js, source unique) et
   réduit les jerseys + labels pour tenir dans la grille étroite. */
.spotlight-pitch {
  display: block;
  padding: 12px;
  text-decoration: none;
}
.spotlight-pitch .pitch { aspect-ratio: 4 / 5; max-height: none; }
.spotlight-pitch .slot .jersey { width: 34px; height: 34px; border-width: 2px; font-size: .6875rem; }
.spotlight-pitch .slot .name { font-size: .6875rem; padding: 1px 5px; max-width: 90px; margin-top: 3px; }
.spotlight-pitch .pitch-watermark { opacity: .12; }
@media (max-width: 720px) {
  .spotlight-pitch .slot .jersey { width: 40px; height: 40px; }
  .spotlight-pitch .slot .name { font-size: .75rem; max-width: 110px; }
}

/* Quick stats bar */
.live-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 36px;
  box-shadow: var(--shadow-sm);
}
.live-stat {
  text-align: center;
  padding: 8px 14px;
  border-right: 1px solid var(--border);
}
.live-stat:last-child { border-right: none; }
.live-stat .ls-num {
  font-size: 1.75rem; font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
  line-height: 1;
}
.live-stat .ls-lbl {
  font-size: .6875rem; color: var(--text-muted);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .live-stat { border-right: none; border-bottom: 1px solid var(--border); padding: 12px; }
  .live-stat:last-child { border-bottom: none; }
}

/* Marquee : couleur sport */
.marquee-tag .em { font-size: 1.0625rem; }
.marquee-tag {
  background: linear-gradient(135deg, white, var(--bg-subtle));
  font-weight: 700;
  font-size: .8125rem;
  border: 1px solid var(--border-strong);
}

/* -----------------------------------------------------------
   28. Career quiz — "Devine le joueur"
   ----------------------------------------------------------- */
.tn-link-fun {
  background: var(--gold-soft);
  color: #92400e !important;
  font-weight: 700;
  border: 1px solid var(--gold-soft);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth);
}
.tn-link-fun:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212, 160, 23, 0.25); }

.quiz-wrap {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quiz-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.quiz-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
}
.quiz-card > * { position: relative; }

.quiz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: white;
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  margin-bottom: 14px;
}
.quiz-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hot);
  animation: pulse 1.6s ease-in-out infinite;
}
.quiz-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 6px;
}
.quiz-sub { color: var(--text-muted); margin: 0 0 22px; }

/* Silhouette */
.quiz-silhouette {
  display: flex;
  justify-content: center;
  margin: 8px 0 24px;
}
.quiz-silhouette-shape {
  width: 100px; height: 100px;
  border-radius: 22%;
  background: var(--grad-brand);
  color: white;
  font-weight: 800;
  font-size: 2.4rem;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-icon-hover);
  filter: blur(8px);
  transition: filter var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-spring);
}
.quiz-silhouette-shape.revealed {
  filter: blur(0);
  transform: scale(1.05);
}

/* Career path */
.quiz-career {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 14px;
  margin-bottom: 18px;
}
.quiz-club {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px;
  flex: 0 0 auto;
}
.quiz-club-logo {
  width: 56px; height: 56px;
  border-radius: 22%;
  background: white;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.quiz-club-logo img { width: 78%; height: 78%; object-fit: contain; }
.quiz-club-fallback {
  font-weight: 800;
  color: var(--accent-hover);
  font-size: 1rem;
  letter-spacing: -.02em;
}
.quiz-club-name {
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.2;
  word-break: break-word;
}
.quiz-arrow {
  align-self: center;
  margin-top: -18px;
  color: var(--text-faded);
  font-weight: 700;
  font-size: 1.125rem;
}

/* Hints grid */
.quiz-hints {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.quiz-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-smooth), background var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth);
}
.quiz-hint.revealed {
  opacity: 1;
  background: white;
  border-color: var(--accent-soft);
  box-shadow: 0 1px 2px var(--accent-glow);
}
.quiz-hint .qh-em { font-size: 1.125rem; }
.quiz-hint .qh-lbl {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-right: auto;
}
.quiz-hint .qh-val {
  font-weight: 700;
  font-size: .875rem;
  color: var(--text);
}
.quiz-hint:not(.revealed) .qh-val { color: var(--text-faded); letter-spacing: .15em; }

/* Attempts history */
.quiz-attempts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.quiz-attempts:empty { margin: 0; }
.quiz-attempt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: .875rem;
  animation: quizSlideIn .35s var(--ease-spring);
}
.quiz-attempt.wrong { background: var(--hot-soft); color: #b91c1c; }
.quiz-attempt.right { background: var(--pitch-soft); color: #15803d; }
@keyframes quizSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Input + autocomplete */
.quiz-input-wrap {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  position: relative;
}
.quiz-input-wrap input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: white;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.quiz-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.quiz-input-wrap input:disabled { background: var(--bg-subtle); color: var(--text-muted); }

.quiz-suggest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  margin-bottom: 12px;
  max-height: 280px;
  overflow-y: auto;
}
.quiz-suggest:empty { display: none; }
.quiz-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  border-radius: var(--r-sm);
  transition: background var(--dur-quick) var(--ease-smooth);
}
.quiz-suggest-item:hover { background: var(--bg-subtle); }
.qsi-name { font-weight: 700; color: var(--text); }
.qsi-meta { font-size: .8125rem; color: var(--text-muted); }

/* Meta + counter */
.quiz-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
}
.quiz-counter { letter-spacing: .04em; }

/* Result */
.quiz-result {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  text-align: center;
  animation: quizSlideIn .4s var(--ease-spring);
}
.qr-success { background: var(--pitch-soft); color: #15803d; }
.qr-fail    { background: var(--hot-soft); color: #b91c1c; }
.qr-icon { font-size: 2rem; margin-bottom: 4px; }
.quiz-result h3 { margin: 0 0 4px; font-size: 1.125rem; }
.quiz-result p  { margin: 0; font-size: .875rem; color: inherit; opacity: .9; }
.quiz-result strong { color: var(--text); }

/* Actions row */
.quiz-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quiz-actions .btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 720px) {
  .quiz-card { padding: 22px 18px; }
  .quiz-title { font-size: 1.625rem; }
  .quiz-club { width: 72px; }
  .quiz-club-logo { width: 48px; height: 48px; }
  .quiz-hints { grid-template-columns: 1fr; }
  .quiz-actions { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   29. Responsive (global)
   ----------------------------------------------------------- */
@media (max-width: 720px) {
  .header { padding: 0 16px; gap: 12px; }
  .main { padding: 24px 16px 80px; }
  .grid.compact { grid-template-columns: repeat(2, 1fr); }
  .builder-form { position: static; }
  .detail-header { flex-direction: column; text-align: center; padding: 22px; }
  .hero { padding: 32px 22px; }
  .hero h1 { font-size: 1.875rem; }
}

/* ====================================================================
   PAGE CONSENSUS V2 (entity-category)
   Header compact · CTA géant · terrain + alternatives 2 colonnes ·
   ton XI · galerie curated.
   ==================================================================== */

.consensus-header-v2 {
  display: flex; align-items: center; gap: 14px;
  margin: 8px 0 18px;
}
.consensus-header-v2 .ch2-icon {
  font-size: 32px;
  display: flex; align-items: center; gap: 4px;
  line-height: 1;
}
.consensus-header-v2 .ch2-icon .flag-img { height: 32px; width: auto; border-radius: 4px; }
.consensus-header-v2 .ch2-text { flex: 1; min-width: 0; }
.consensus-header-v2 .ch2-text h1 {
  margin: 0 0 2px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.consensus-header-v2 .ch2-scope {
  margin: 0;
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
}

/* ─── CTA "Compose ton XI" — vrai bouton, pas un titre ─── */
.big-cta-link {
  display: block;
  text-decoration: none;
  margin: 0 0 28px;
  text-align: center;
}
.big-cta-link:hover { text-decoration: none; }
.big-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 16px 22px;
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  color: white;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -2px 0 rgba(0, 0, 0, 0.15) inset,
    0 8px 22px rgba(249, 115, 22, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.08);
  transition: transform 120ms var(--ease-spring), box-shadow 180ms;
  cursor: pointer;
  font-family: inherit;
  user-select: none;
}
.big-cta-link:hover .big-cta {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 0 rgba(0, 0, 0, 0.15) inset,
    0 12px 30px rgba(249, 115, 22, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.08);
}
.big-cta-link:active .big-cta {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 4px 12px rgba(249, 115, 22, 0.4);
}
.big-cta .bcta-icon {
  font-size: 28px;
  line-height: 1;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.big-cta .bcta-label {
  display: flex; flex-direction: column;
  text-align: left;
  padding-right: 8px;
}
.big-cta .bcta-label strong {
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.big-cta .bcta-label small {
  font-size: .75rem;
  opacity: .92;
  font-weight: 500;
  margin-top: 1px;
}
.big-cta .bcta-arrow {
  font-size: 1.125rem;
  font-weight: 800;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: white;
  color: #ea580c;
  border-radius: 50%;
  margin-left: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 180ms var(--ease-spring);
}
.big-cta-link:hover .bcta-arrow { transform: translateX(3px); }

/* Variante BLEUE — CTA principal sous le terrain.
 *  Tranche avec le vert du terrain et le orange/rouge du titre. */
.big-cta.green {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset,
    0 8px 22px rgba(37, 99, 235, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 18px 24px 18px 26px;
}
.big-cta.green .bcta-icon {
  width: 50px; height: 50px;
  font-size: 30px;
}
.big-cta.green .bcta-label strong { font-size: 1.3125rem; }
.big-cta.green .bcta-arrow { color: #1d4ed8; }
.big-cta-link.under-pitch {
  display: block;
  text-align: center;
  margin: 18px auto 0;
  max-width: 480px;
}
.big-cta-link.under-pitch .big-cta {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Variante ABOVE-PITCH — CTA pleine largeur posé au-dessus du terrain consensus.
 *  Bords moins arrondis (radius médian au lieu de pill) pour un look plus assertif,
 *  pleine largeur du parent pour maximiser la visibilité de l'action principale. */
.big-cta-link.above-pitch {
  display: block;
  width: 100%;
  margin: 0 0 18px;
}
.big-cta-link.above-pitch .big-cta {
  display: flex;
  width: 100%;
  border-radius: var(--r-sm);
  padding: 20px 24px;
  justify-content: flex-start;
}
.big-cta-link.above-pitch .bcta-label { flex: 1; }
.big-cta-link.above-pitch .bcta-label strong { font-size: 1.375rem; }
.big-cta-link.above-pitch .bcta-label small { font-size: .8125rem; }
.big-cta-link.above-pitch .big-cta.secondary { border-radius: var(--r-sm); }
.big-cta-link:hover .big-cta.green {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 0 rgba(0, 0, 0, 0.18) inset,
    0 12px 30px rgba(37, 99, 235, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Variante secondaire : "Édite ton XI" (bleu) */
.big-cta.secondary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 -2px 0 rgba(0, 0, 0, 0.15) inset,
    0 8px 22px rgba(37, 99, 235, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.08);
}
.big-cta.secondary .bcta-main {
  display: inline-flex; align-items: center; gap: 16px;
  color: white; text-decoration: none;
}
.big-cta.secondary .bcta-main:hover { text-decoration: none; }
.big-cta.secondary .bcta-side {
  color: white;
  font-weight: 700;
  font-size: .8125rem;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.18);
  text-decoration: none;
  white-space: nowrap;
  transition: background 180ms;
  margin-left: 4px;
}
.big-cta.secondary .bcta-side:hover { background: rgba(255,255,255,0.3); text-decoration: none; }

/* ─── Layout 2 colonnes (terrain + mini cards XI remarquables) ─── */
.consensus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-bottom: 36px;
}
.consensus-pitch-col, .consensus-side-col { min-width: 0; }
.cv-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.cv-section-head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.cv-section-head .cv-meta {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ─── Mini cards XI remarquables (colonne droite) ─── */
.curated-side {
  display: flex; flex-direction: column;
  gap: 10px;
}
.curated-mini {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  transition: transform 180ms var(--ease-spring), box-shadow 180ms;
}
.curated-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  text-decoration: none;
  border-color: var(--border-strong);
}
.curated-mini .cm-pitch {
  position: relative;
  width: 80px;
  aspect-ratio: 2 / 3;
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  border-radius: 6px;
  overflow: hidden;
}
.curated-mini .cm-pitch .pitch-lines {
  position: absolute; inset: 0;
}
.cm-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
  overflow: hidden;
  display: grid; place-items: center;
}
.cm-dot.gk { border-color: var(--warning); background: var(--warning); }
.cm-dot .flag-img { width: 100%; height: 100%; object-fit: cover; }
.curated-mini .cm-text {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
}
.curated-mini .cm-label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.curated-mini .cm-title {
  font-weight: 700; font-size: .875rem;
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curated-mini .cm-sub {
  font-size: .75rem; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "Voir tous les N XI" : footer link discret À L'INTÉRIEUR du bloc curated. */
.curated-more {
  display: block;
  text-align: center;
  padding: 10px 0 4px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  transition: color 180ms;
}
.curated-more:hover {
  color: var(--accent, #f97316);
  text-decoration: none;
}

/* Carte qui wrappe le header "XI remarquables" + les mini-cards + le footer link.
 * Même style visuel que .side-share pour harmoniser la sidebar. */
.side-curated-card {
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  margin-bottom: 12px;
}
.side-curated-card .cv-section-head { margin-bottom: 12px; }
.side-curated-card .curated-mini {
  border-color: var(--border);
  background: var(--bg);
}

/* ─── Terrain STANDARD : format unique pour la page consensus + lineup-view + builder.
 *  Le wrap noir est restreint à la même largeur que le terrain pour éviter les marges
 *  noires sur les côtés (effet de cadre serré, broadcast TV). ─── */
.pitch-standard,
.consensus-pitch {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  background: linear-gradient(180deg, #1c1814, #110d0a);
  border: 1px solid rgba(255, 255, 255, 0.05);
  /* Empêche le grid de stretcher en hauteur pour matcher la sidebar */
  align-self: start;
  height: fit-content;
}
.pitch-standard .pitch,
.consensus-pitch .pitch {
  max-height: none;  /* override le default 78vh qui casse l'aspect ratio */
}
.pitch-standard .pitch,
.consensus-pitch .pitch {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}
.pitch-standard .slot,
.consensus-pitch .slot {
  width: 76px;
}
.pitch-standard .slot .jersey,
.consensus-pitch .slot .jersey {
  width: 50px; height: 50px;
  border-width: 2.5px;
  font-size: .8125rem;
}
.pitch-standard .slot .name,
.consensus-pitch .slot .name {
  max-width: 110px;
  font-size: .75rem;
  padding: 2px 7px;
  margin-top: 4px;
}
.slot-pct {
  margin-top: 3px;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: white;
  color: var(--text);
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}
.slot-pct[data-level="strong"] { background: #16a34a; color: white; }
.slot-pct[data-level="medium"] { background: #f97316; color: white; }
.slot-pct[data-level="weak"]   { background: #ef4444; color: white; }

/* ─── Joueurs les plus pickés par poste — grille 4×2 sur desktop ─── */
.macro-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .macro-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .macro-list { grid-template-columns: 1fr; }
}
.macro-block {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.macro-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: -.01em;
}
.macro-icon { font-size: 1rem; line-height: 1; }
.macro-name { color: var(--text); }
.macro-cands {
  display: flex; flex-direction: column;
}
.mc-row {
  display: grid;
  grid-template-columns: 22px 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 12px;
  font-size: .8125rem;
  border-top: 1px solid var(--border);
}
.mc-row:first-child { border-top: none; }
.mc-rank {
  color: var(--text-faint);
  font-weight: 700;
  font-size: .6875rem;
  text-align: center;
}
.mc-flag {
  display: inline-flex;
  width: 22px; height: 16px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--border);
}
.mc-flag .flag-img { width: 100%; height: 100%; object-fit: cover; }
.mc-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.mc-pct {
  font-weight: 800;
  font-size: .6875rem;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  letter-spacing: -.02em;
}
.mc-pct[data-level="strong"] { background: #dcfce7; color: #15803d; }
.mc-pct[data-level="medium"] { background: #ffedd5; color: #c2410c; }
.mc-pct[data-level="weak"]   { background: #fee2e2; color: #b91c1c; }

/* ─── Share bar — disponible partout où on affiche un XI ─── */
.share-bar {
  display: flex; flex-direction: column; gap: 12px;
}
.share-bar .share-go {
  width: 100%;
  font-weight: 700;
  padding: 14px 16px;
}
.share-bar .share-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
/* Layout icon-only : tous les boutons sont des cercles 40px identiques.
 * Les logos PNG (X/FB/WA/Insta) sont contraints à un cercle 40px avec object-fit:cover,
 * ce qui harmonise visuellement quelle que soit la forme native du logo de marque.
 * Le bouton "lien" (SVG) a un fond neutre pour matcher le style cercle. */
.share-bar .share-icons-only {
  justify-content: center;
  gap: 14px;
}
.share-bar .share-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: transform .14s var(--ease-spring, ease), box-shadow .14s;
  overflow: visible;
}
.share-bar .share-icon:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.share-bar .share-icon:active:not(:disabled) { transform: scale(.98); }
.share-bar .share-icon:disabled { opacity: .6; cursor: wait; }
.share-bar .share-icon img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
/* Bouton "lien" (SVG inline) : besoin de son propre fond/cercle. */
.share-bar .share-icon.share-link {
  background: #f1f5f9;
  color: #475569;
}
.share-bar .share-icon.share-link:hover { background: #e2e8f0; }
.share-bar .share-icon svg {
  width: 22px; height: 22px;
  display: block;
}
/* ─── Sidebar lineup-view : meta + desc + vote + composition ─── */
.side-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .8125rem;
  color: var(--text-muted);
}
.side-meta .sm-author {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.side-meta .sm-author:hover { color: var(--accent); }
.side-meta .sm-dot { color: var(--text-faint); }
.side-meta .sm-spacer { flex: 1; }

.side-desc {
  margin: 0;
  font-size: .875rem;
  color: var(--text);
  line-height: 1.45;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

/* Vote bar compacte — boutons pouces vert/rouge serrés */
.side-vote {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.side-vote .vote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: .8125rem;
  border: 1.5px solid;
  cursor: pointer;
  transition: all 150ms;
}
.side-vote .vote-btn.vb-up {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
.side-vote .vote-btn.vb-up:hover,
.side-vote .vote-btn.vb-up.active {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
}
.side-vote .vote-btn.vb-down {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.side-vote .vote-btn.vb-down:hover,
.side-vote .vote-btn.vb-down.active {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}
.side-vote .vote-score {
  margin-left: auto;
  font-size: 1.125rem; font-weight: 800;
  min-width: 36px; text-align: right;
  letter-spacing: -.02em;
}

.side-composition {
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.side-composition-title {
  font-weight: 700; font-size: .875rem; margin-bottom: 6px;
  letter-spacing: -.01em;
}
.side-composition .sc-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8125rem; padding: 4px 0;
  border-top: 1px solid var(--border);
}
.side-composition .sc-row:first-of-type { border-top: none; }
.side-composition .sc-pos {
  color: var(--text-muted); min-width: 36px; font-weight: 700;
  font-size: .6875rem; letter-spacing: .03em;
}
.side-composition .sc-name {
  text-align: right; flex: 1; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-left: 8px;
}

/* Bloc partage dans la sidebar (consensus + lineup-view) */
.side-share {
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex; flex-direction: column; gap: 10px;
}
.side-share-title {
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: -.01em;
}

/* Bannière invité dans le builder */
.builder-guest-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  margin: 0 0 18px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fdba74;
  border-radius: var(--r);
  font-size: .875rem;
  color: #7c2d12;
}
.builder-guest-banner .bgb-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.builder-guest-banner .bgb-text { line-height: 1.4; }
.builder-guest-banner .bgb-text strong { font-weight: 800; }

/* Actions sous le terrain du builder (aperçu image) */
.builder-pitch-actions {
  display: flex; gap: 8px;
  margin: 12px auto 0;
  max-width: 540px;
}
.builder-pitch-actions .btn { flex: 1; }

/* CTA "Compose ton XI" en haut de la sidebar de lineup-view : compact et orange foncé */
.side-cta-compose {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%);
  color: white;
  border-radius: var(--r);
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 -2px 0 rgba(0,0,0,0.15) inset,
    0 4px 12px rgba(249, 115, 22, 0.3);
  transition: transform 120ms var(--ease-spring), box-shadow 180ms;
  border: 1.5px solid rgba(255,255,255,0.18);
}
.side-cta-compose:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -2px 0 rgba(0,0,0,0.15) inset,
    0 6px 16px rgba(249, 115, 22, 0.4);
}
.side-cta-compose .scc-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  flex-shrink: 0;
}
.side-cta-compose .scc-label {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.side-cta-compose .scc-label strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.side-cta-compose .scc-label small {
  font-size: .75rem;
  opacity: .92;
  font-weight: 500;
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-cta-compose .scc-arrow {
  font-size: 1.125rem;
  font-weight: 800;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: white;
  color: #ea580c;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 180ms var(--ease-spring);
}
.side-cta-compose:hover .scc-arrow { transform: translateX(2px); }

/* ─── Section "Continuer à explorer" sur la page lineup-view ─── */
.explore-section {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.explore-section .big-cta-link {
  margin: 0 auto 28px;
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.explore-grid .curated-mini {
  grid-template-columns: 90px 1fr;
}
.explore-grid .curated-mini .cm-pitch {
  width: 90px;
}
/* Variante "consensus" : bordure verte pour la distinguer */
.curated-mini.consensus-mini {
  border-color: #86efac;
  background: linear-gradient(180deg, #f0fdf4, white);
}
.curated-mini.consensus-mini .cm-label { color: #15803d; }

/* Anciens styles consensus-header / cohesion-badge / consensus-cta : conservés mais inutilisés (pour compat) */
.consensus-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.06), rgba(236, 72, 153, 0.04));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin: 8px 0 22px;
}
.consensus-header .ch-icon {
  font-size: 36px;
  display: flex; align-items: center; gap: 4px;
  line-height: 1;
}
.consensus-header .ch-icon .flag-img { height: 36px; width: auto; border-radius: 4px; }
.consensus-header .ch-titles h1 {
  margin: 0 0 4px;
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -.025em;
}
.consensus-header .ch-scope {
  margin: 0;
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 500;
}
.consensus-header .ch-desc {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: .8125rem;
}

/* Cohésion badge — pastille avec score 0-100% */
.cohesion-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px;
  padding: 12px 14px;
  background: white;
  border: 2px solid var(--border-strong);
  border-radius: var(--r);
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cohesion-badge[data-level="strong"] { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4, white); }
.cohesion-badge[data-level="medium"] { border-color: #f97316; background: linear-gradient(180deg, #fff7ed, white); }
.cohesion-badge[data-level="weak"]   { border-color: #ef4444; background: linear-gradient(180deg, #fef2f2, white); }
.cohesion-badge .cb-num {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.cohesion-badge[data-level="strong"] .cb-num { color: #16a34a; }
.cohesion-badge[data-level="medium"] .cb-num { color: #f97316; }
.cohesion-badge[data-level="weak"]   .cb-num { color: #ef4444; }
.cohesion-badge .cb-pct {
  font-size: 1rem; opacity: .7; margin-left: 1px;
}
.cohesion-badge .cb-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  font-weight: 700;
  margin-top: 4px;
}
.cohesion-badge .cb-sub {
  font-size: .6875rem;
  color: var(--text-faint);
  margin-top: 2px;
}

.consensus-cta {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0 0 24px;
}

.slot-flag {
  display: inline-flex;
  width: 14px; height: 10px;
  margin-right: 3px;
  vertical-align: middle;
  border-radius: 1px;
  overflow: hidden;
}
.slot-flag .flag-img { width: 100%; height: 100%; object-fit: cover; }
.slot-pct {
  margin-top: 4px;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: -.02em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: white;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  border: 1.5px solid white;
}
.slot-pct[data-level="strong"] { background: #16a34a; color: white; border-color: white; }
.slot-pct[data-level="medium"] { background: #f97316; color: white; border-color: white; }
.slot-pct[data-level="weak"]   { background: #ef4444; color: white; border-color: white; }

/* Alternatives par poste — liste compacte poste par poste */
.alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.alt-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.alt-pos {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: -.02em;
}
.alt-cands {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.alt-cand {
  display: grid;
  grid-template-columns: 18px 22px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: .8125rem;
  min-width: 0;
}
.alt-cand .ac-rank {
  color: var(--text-faint);
  font-weight: 700;
  font-size: .6875rem;
  text-align: center;
}
.alt-cand.is-top .ac-rank { color: var(--accent); }
.alt-cand.is-top .ac-name { font-weight: 700; }
.alt-cand .ac-flag {
  display: inline-flex;
  width: 22px; height: 16px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--border);
}
.alt-cand .ac-flag .flag-img { width: 100%; height: 100%; object-fit: cover; }
.alt-cand .ac-name {
  font-weight: 500;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.alt-cand .ac-pct {
  font-weight: 800;
  font-size: .6875rem;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
  letter-spacing: -.02em;
}
.alt-cand .ac-pct[data-level="strong"] { background: #dcfce7; color: #15803d; }
.alt-cand .ac-pct[data-level="medium"] { background: #ffedd5; color: #c2410c; }
.alt-cand .ac-pct[data-level="weak"]   { background: #fee2e2; color: #b91c1c; }

/* Carte "Mon XI" — gros call to action */
.my-lineup-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(168, 85, 247, 0.04));
  border: 2px solid #93c5fd;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.my-lineup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
  text-decoration: none;
}
.my-lineup-card .ml-title { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.my-lineup-card .ml-meta { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }
.my-lineup-card .ml-cta {
  font-weight: 700;
  color: #2563eb;
  font-size: .9375rem;
  white-space: nowrap;
}

/* Galerie XI individuels remarquables — 3 cards avec mini terrain */
.curated-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.curated-card {
  display: flex; flex-direction: column;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base);
}
.curated-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  text-decoration: none;
}
.curated-card .cc-label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 10px 14px 6px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.curated-card .cc-mini-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  overflow: hidden;
}
.curated-card .cc-mini-pitch .pitch-lines {
  position: absolute; inset: 0;
}
.cc-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  overflow: hidden;
  display: grid; place-items: center;
}
.cc-dot.gk { border-color: var(--warning); background: var(--warning); }
.cc-dot .flag-img { width: 100%; height: 100%; object-fit: cover; }
.curated-card .cc-meta { padding: 12px 14px; }
.curated-card .cc-title {
  font-weight: 700; font-size: .9375rem; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curated-card .cc-sub {
  font-size: .75rem; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curated-card .cc-stats {
  font-size: .75rem; color: var(--text-faint); margin-top: 6px;
}

/* Empty soft — version moins agressive de .empty pour les pages consensus vides */
.empty.empty-soft {
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 32px 24px;
}

@media (max-width: 980px) {
  .consensus-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .consensus-pitch .pitch { max-width: 420px; }
}
@media (max-width: 720px) {
  .consensus-header-v2 .ch2-text h1 { font-size: 1.25rem; }
  .big-cta { padding: 18px 20px; gap: 14px; }
  .big-cta .bcta-icon { font-size: 30px; }
  .big-cta .bcta-label strong { font-size: 1.25rem; }
  .big-cta .bcta-label small { font-size: .8125rem; }
  .big-cta.secondary { flex-direction: column; align-items: stretch; }
  .big-cta.secondary .bcta-side { text-align: center; }
  .consensus-pitch .pitch { max-width: 100%; }
  .consensus-pitch .slot { width: 70px; }
  .consensus-pitch .slot .jersey { width: 42px; height: 42px; }
  .consensus-pitch .slot .name { max-width: 100px; font-size: .75rem; }

  /* Devine le joueur — sur mobile, on remonte le panneau (input + score + indices)
     AU-DESSUS du board (carrière en clubs). L'utilisateur voit l'action en premier,
     scrolle pour la carrière en référence. */
  .gp2-grid { gap: 14px; }
  .gp2-grid .consensus-side-col { order: -1; }

  /* Board compact : pas de gros padding, header allégé, carrière compacte horizontale */
  .gp2-board { padding: 14px; border-top-width: 3px; }
  .gp2-header { margin-bottom: 12px; }
  .gp2-title { font-size: 1.125rem; }
  .gp2-sub { font-size: .8125rem; }
  .gp2-eyebrow { font-size: .625rem; }

  /* Silhouette révélée : plus petite — l'info utile c'est le nom révélé déjà dans le titre */
  .gp2-silhouette { margin-bottom: 14px; }
  .gp2-sil-circle { width: 80px; height: 80px; font-size: 2rem; border-width: 3px; }
  .gp2-silhouette.revealed .gp2-sil-circle { font-size: 1.5rem; }

  /* Carrière en clubs — chips plus petites pour faire tenir 3-4 par ligne */
  .gp2-career { padding: 12px; gap: 8px; }
  .gp2-club { min-width: 64px; max-width: 80px; gap: 2px; }
  .gp2-club-logo { width: 44px; height: 44px; padding: 4px; border-width: 1.5px; }
  .gp2-club-name { font-size: .6875rem; max-width: 80px; }
  .gp2-club-years { font-size: .5625rem; }
  .gp2-arrow { font-size: 1rem; }

  /* Panel : padding et progress bar resserrés */
  .gp2-panel { gap: 10px; }
  .gp2-progress { padding: 10px 14px; gap: 10px; }
  .gp2-prog-num { font-size: 1.25rem; }
  .gp2-prog-score { font-size: 1.0625rem; }
  .gp2-prog-lbl { font-size: .625rem; }
  .gp2-input-card { padding: 10px 12px; }
  .gp2-input-eyebrow { font-size: .6875rem; margin-bottom: 6px; }
  .gp2-input-row input { padding: 9px 12px; font-size: .875rem; }
  .gp2-input-row .btn.primary { padding: 9px 14px; font-size: .8125rem; }
  .gp2-hints { padding: 10px 12px; gap: 4px; }
  .gp2-hint { padding: 5px 8px; font-size: .75rem; }
  .gp2-hints-title { font-size: .625rem; margin-bottom: 2px; }
  .gp2-att { padding: 5px 10px; font-size: .8125rem; }
}

/* -----------------------------------------------------------
   29. Game tabs (modes par scope) — composant unique réutilisé
        sur competition.js, entity.js, top5.js, devine.js, duel.js.
   ----------------------------------------------------------- */
/* Frame scope — container qui englobe hero (titre + tabs) + body (contenu).
   Le visuel doit rendre clair que les tabs pilotent tout ce qui suit. */
.scope-frame {
  position: relative;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: var(--bg-elev);
  overflow: hidden;
}
/* Plus de rail vert sur le côté gauche : trop visuel, parasite la lecture. */

/* Hero (titre + tabs) — partie haute du frame. Pas de border propre, pas de radius :
   c'est le frame qui les porte. */
.scope-hero {
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(21, 128, 61, 0.05), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
  overflow: visible;
}
.scope-hero::before { display: none; }

/* Body — contenu sous les tabs, raccordé visuellement.
   Pas de border-top : l'onglet actif fusionne avec ce body via couleur de fond identique. */
.scope-body {
  background: var(--bg-elev);
  padding: 28px 28px 28px;
  position: relative;
}
.scope-body > :first-child { margin-top: 0; }
.scope-body > :last-child { margin-bottom: 0; }
/* Les section-title à l'intérieur n'ont plus besoin du grand margin-top */
.scope-body .section-title:first-child { margin-top: 4px; }
.scope-hero-head {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 28px 14px;
  width: 100%;
}
.scope-hero-head > div:not(.icon) {
  flex: 1;
  min-width: 0;
}
.scope-hero-head .icon {
  font-size: 2.25rem;
  width: 84px; height: 84px;
  border-radius: 22%;
  background: var(--bg-elev);
  display: grid; place-items: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-icon);
  border: 1px solid var(--border);
}
.scope-hero-head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700; letter-spacing: -.025em;
}
.scope-hero-head p {
  margin: 0; color: var(--text-muted); font-size: .9375rem;
}

/* Tabs intégrés à la même carte — flux continu, onglets attachés au body */
.scope-hero .game-tabs-wrap {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 28px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
  z-index: 2;
}
.scope-hero .game-tabs-wrap::before { display: none; }
.game-tabs-label {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.gtl-eyebrow {
  font-size: .75rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}
.gtl-help {
  font-size: .9375rem; color: var(--text);
  font-weight: 600;
  letter-spacing: -.005em;
}
.gtl-help strong { color: var(--text); font-weight: 800; }

.game-tabs {
  /* Grid 6 colonnes égales : tous les tabs ont strictement la même largeur,
     tous alignés sur une seule ligne. Le mobile (≤980px) bascule en flex
     scrollable (cf media query plus bas). */
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  scrollbar-width: none;
  padding-bottom: 4px; /* laisse respirer l'ombre de l'actif */
}
.game-tabs::-webkit-scrollbar { display: none; }

/* Gros boutons colorés — chaque mode porte sa couleur en fond (pastel translucide
   au repos, gradient plein sur l'actif). On voit instantanément "5 jeux = 5 couleurs",
   et le sélectionné explose en gradient pour être impossible à louper. */
.game-tab {
  /* En grid : chaque tab remplit sa colonne 1fr. Texte centré, sans icône. */
  display: flex; align-items: center; justify-content: center;
  padding: 13px 12px;
  min-width: 0;       /* indispensable en grid pour autoriser l'ellipsis */
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1.5px solid color-mix(in srgb, var(--game-color, var(--border)) 35%, var(--border));
  font-weight: 700; font-size: .9375rem;
  color: var(--game-color, var(--text-muted));
  text-decoration: none;
  transition: background var(--dur-quick), color var(--dur-quick), border-color var(--dur-quick), box-shadow var(--dur-quick);
  position: relative;
  text-align: center;
}
.game-tab .gt-name {
  /* Ellipsis si vraiment trop long (viewports <1100px en desktop). */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.game-tab:hover {
  background: var(--bg-elev);
  border-color: var(--game-color, var(--border-strong));
  color: var(--game-color, var(--text));
  text-decoration: none;
  box-shadow: 0 4px 12px -6px var(--game-color, rgba(0, 0, 0, .15));
}
.game-tab.active {
  background: var(--game-color-grad, var(--accent-grad));
  border-color: transparent;
  color: white;
  font-weight: 800;
  box-shadow:
    0 10px 24px -8px var(--game-color, rgba(21, 128, 61, 0.55)),
    0 2px 6px -2px rgba(0, 0, 0, 0.15);
}
.game-tab.active:hover {
  background: var(--game-color-grad, var(--accent-grad));
  color: white;
  border-color: transparent;
}

/* Couleurs par mode — custom props héritées par les enfants pour bg, border, color, shadow */
.game-tab[data-game="xi"]           { --game-color: var(--game-xi);           --game-color-soft: var(--game-xi-soft);           --game-color-grad: var(--game-xi-grad); }
.game-tab[data-game="top5"]         { --game-color: var(--game-top5);         --game-color-soft: var(--game-top5-soft);         --game-color-grad: var(--game-top5-grad); }
.game-tab[data-game="duel"]         { --game-color: var(--game-duel);         --game-color-soft: var(--game-duel-soft);         --game-color-grad: var(--game-duel-grad); }
.game-tab[data-game="guess"]        { --game-color: var(--game-guess);        --game-color-soft: var(--game-guess-soft);        --game-color-grad: var(--game-guess-grad); }
.game-tab[data-game="guess-player"] { --game-color: var(--game-guess-player); --game-color-soft: var(--game-guess-player-soft); --game-color-grad: var(--game-guess-player-grad); }
.game-tab[data-game="missing"]      { --game-color: var(--game-missing);      --game-color-soft: var(--game-missing-soft);      --game-color-grad: var(--game-missing-grad); }

/* Icône — pleine couleur partout, drop-shadow renforcé sur l'actif pour rester lisible sur le gradient */
.game-tab .gt-icon {
  font-size: 21px; line-height: 1;
  transition: transform var(--dur-quick);
}
.game-tab.active .gt-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
  transform: scale(1.05);
}

.game-tab.soon {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-faded);
  cursor: not-allowed;
  opacity: .55;
}
.game-tab.soon:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-faded);
  opacity: .55;
  box-shadow: none;
}
.game-tab .gt-badge {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  margin-left: 4px;
  border: 1px solid var(--border);
}

/* Catégorie — sections repliables (comps / sélections / clubs sous les phares) */
.cat-section-details { margin: 24px 0 0; }
.cat-section-summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  font-weight: 700;
  font-size: .9375rem;
  color: var(--text);
  list-style: none;
  user-select: none;
  transition: border-color var(--dur-quick), background var(--dur-quick);
}
.cat-section-summary::-webkit-details-marker { display: none; }
.cat-section-summary:hover {
  border-color: var(--border-strong);
  background: var(--bg-subtle);
}
.cat-section-summary::before {
  content: '▸';
  font-size: .75rem;
  transition: transform var(--dur-quick);
}
.cat-section-details[open] .cat-section-summary::before {
  transform: rotate(90deg);
}

/* Builder — toggle "Voir le XI de la commu" (carte sobre cliquable au-dessus du grid) */
.builder-mode-toggle {
  margin: 8px 0 18px;
}
.builder-mode-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-quick), background var(--dur-quick), transform var(--dur-quick);
}
.builder-mode-link:hover {
  border-color: var(--game-xi);
  background: var(--bg-subtle);
  text-decoration: none;
  color: var(--text);
  transform: translateY(-1px);
}
.builder-mode-link .bml-em { font-size: 1.5rem; line-height: 1; }
.builder-mode-link .bml-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.builder-mode-link .bml-text strong { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.builder-mode-link .bml-text small { font-size: .8125rem; color: var(--text-muted); }
.builder-mode-link .bml-arrow {
  font-size: 1.25rem; color: var(--text-muted);
  transition: transform var(--dur-quick), color var(--dur-quick);
}
.builder-mode-link:hover .bml-arrow {
  color: var(--game-xi);
  transform: translateX(3px);
}

/* Builder — section commu (chargée async sous le grid) */
.builder-commu-loading {
  margin-top: 32px;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: .875rem;
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.builder-commu-empty {
  margin-top: 32px;
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
  border: 1px dashed var(--border-strong);
}
.builder-commu-empty .bce-icon { font-size: 2rem; line-height: 1; }
.builder-commu-empty .bce-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.builder-commu-empty .bce-text strong { font-size: .9375rem; }
.builder-commu-empty .bce-text small { font-size: .8125rem; color: var(--text-muted); }

/* État "pas encore de XI publié" — overlays sur la même structure que le cas plein.
   Décision 2026-05-12 : une seule mise en page pour toutes les catégories, peu importe
   les données. Les composants se grisent / s'overlay au lieu de switcher de layout. */
.pitch-wrap.pitch-empty {
  position: relative;
}
.pitch-wrap.pitch-empty .pitch {
  opacity: .35;
  filter: saturate(.7);
  pointer-events: none;
}
.pitch-empty-overlay {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  pointer-events: none;
  z-index: 2;
}
.pitch-empty-overlay .peo-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
}
.pitch-empty-overlay .peo-text {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  margin-bottom: 4px;
}
.pitch-empty-overlay .peo-sub {
  font-size: .8125rem;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  max-width: 320px;
}

/* Sidebar curated vide — même structure, message d'invitation */
.curated-side-empty {
  display: block;
}
.curated-empty-msg {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px;
  background: var(--bg-subtle);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
}
.curated-empty-msg .cem-icon {
  font-size: 1.75rem; line-height: 1;
  flex-shrink: 0;
}
.curated-empty-msg .cem-text {
  display: flex; flex-direction: column; gap: 4px;
}
.curated-empty-msg .cem-text strong {
  font-size: .9375rem; font-weight: 700;
}
.curated-empty-msg .cem-text small {
  font-size: .8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Message "Aucun XI publié — alternatives par poste à venir" */
.alt-empty {
  margin: 0 0 32px;
  padding: 14px 18px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--text-muted);
  font-size: .875rem;
}

/* Universe rails — 2 grands rails Sélections / Clubs sur la home (décision 2026-05-12) */
.universe-rails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
  margin: 0 0 40px;
}
.universe-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 24px 24px 28px;
  background: var(--bg-elev);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-spring), border-color var(--dur-base), box-shadow var(--dur-base);
  min-height: 130px;
}
.universe-rail::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, var(--rail-glow, transparent), transparent 60%);
  pointer-events: none; opacity: .6;
  z-index: -1;
}
.universe-rail:hover {
  transform: translateY(-3px);
  text-decoration: none; color: var(--text);
  border-color: var(--rail-color, var(--border-strong));
  box-shadow: 0 14px 32px -10px var(--rail-color, rgba(0,0,0,.18));
}
.universe-rail .ur-icon {
  font-size: 3rem; line-height: 1;
  flex-shrink: 0;
}
.universe-rail .ur-content { flex: 1; }
.universe-rail .ur-eyebrow {
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rail-color, var(--accent));
  margin-bottom: 6px;
}
.universe-rail h3 {
  font-size: 1.0625rem; font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 4px; line-height: 1.25;
}
.universe-rail p {
  font-size: .8125rem; color: var(--text-muted);
  margin: 0; line-height: 1.4;
}
.universe-rail .ur-arrow {
  font-size: 1.5rem;
  color: var(--rail-color, var(--text-muted));
  transition: transform var(--dur-base) var(--ease-spring);
  flex-shrink: 0;
}
.universe-rail:hover .ur-arrow { transform: translateX(4px); }
.universe-rail.rail-selections {
  --rail-color: #f97316;
  --rail-glow: rgba(249, 115, 22, 0.10);
}
.universe-rail.rail-clubs {
  --rail-color: #22c55e;
  --rail-glow: rgba(34, 197, 94, 0.10);
}

/* Continent filter — chips filtre sur /selections et /clubs */
.continent-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.continent-filter .cf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  font-weight: 600; font-size: .8125rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background var(--dur-quick), color var(--dur-quick), border-color var(--dur-quick);
}
.continent-filter .cf-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.continent-filter .cf-chip.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
  font-weight: 800;
}
.continent-filter .cf-chip .cf-count {
  font-size: .6875rem;
  opacity: .8;
}

/* Section title niveau 3 (sous-titre regroupé par continent par ex) */
.section-title-sub {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -.01em;
  margin: 22px 0 10px;
  text-transform: none;
}

/* Category switcher — strip de pills pour basculer entre les 5 catégories
   (Meilleur XI / Pire XI / Héros culte / Sous-coté / Surcoté + Catégorie perso)
   sans quitter la page. Affiché dans entity-category. */
.cat-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 8px;
  margin: 16px 0 8px;
}
.cat-switcher::-webkit-scrollbar { display: none; }
.cat-switcher-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 700; font-size: .875rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-quick), color var(--dur-quick), border-color var(--dur-quick), transform var(--dur-quick);
}
.cat-switcher-item:hover {
  background: var(--bg-elev);
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-1px);
}
.cat-switcher-item.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: white;
  font-weight: 800;
  box-shadow: 0 6px 14px -6px rgba(21, 128, 61, 0.55);
}
.cat-switcher-item.active:hover {
  color: white;
}
.cat-switcher-item.custom {
  border-style: dashed;
  border-color: var(--orange);
  color: var(--orange);
}
.cat-switcher-item.custom:hover {
  background: rgba(249, 115, 22, 0.08);
}
.cat-switcher-item .csi-icon { font-size: 16px; line-height: 1; }
@media (max-width: 600px) {
  .cat-switcher-item { padding: 8px 12px; font-size: .8125rem; }
  .cat-switcher-item .csi-icon { font-size: 14px; }
}

/* Strip de facettes (ex sous-tabs TOP 5 par poste) */
.facet-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.facet-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: white;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600; font-size: .8125rem;
  text-decoration: none;
  transition: all var(--dur-quick);
}
.facet-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.facet-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.facet-chip .fc-icon { font-size: 14px; }

/* Intro de mode (chapeau au-dessus du contenu) */
.mode-intro {
  margin: 0 0 20px;
}
.mode-intro h2 {
  font-size: 1.5rem; font-weight: 800;
  letter-spacing: -.025em;
  margin: 0 0 6px;
}
.mode-intro p {
  margin: 0;
  color: var(--text-muted);
  font-size: .9375rem;
  line-height: 1.5;
  max-width: 720px;
}

.empty-soft {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 48px 28px;
}

@media (max-width: 720px) {
  .game-tabs-wrap { padding: 14px 14px 12px 18px; }
  .gtl-help { font-size: .8125rem; }
  .game-tab { padding: 10px 14px; font-size: .8125rem; gap: 7px; border-radius: 12px; }
  .game-tab .gt-badge { display: none; }
  .game-tab .gt-icon { font-size: 18px; }
}

/* ===========================================================
   XP / NIVEAU — feedbacks visuels (level-up toast, floater)
   Variables --phase-color et --phase-soft injectées en inline.
   =========================================================== */

/* Floater "+95 XP" qui apparaît à l'endroit cible et s'envole */
.xp-gain-floater {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--accent);
  text-shadow: 0 2px 8px rgba(21, 128, 61, 0.35), 0 0 1px rgba(255,255,255,0.9);
  background: linear-gradient(135deg, var(--accent-soft) 0%, #fff 100%);
  border: 2px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  opacity: 0;
  letter-spacing: -.02em;
  transition: opacity .25s ease, transform .9s cubic-bezier(.34, 1.56, .64, 1);
  white-space: nowrap;
}
.xp-gain-floater.show { opacity: 1; }
.xp-gain-floater.fly {
  transform: translate(-50%, -180px) scale(.85) !important;
  opacity: 0;
}

/* Level-up toast — gros banner haut-centre */
.xp-levelup-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 10000;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 28px;
  background: linear-gradient(135deg, var(--phase-color, #15803d) 0%, color-mix(in srgb, var(--phase-color, #15803d) 70%, #000) 100%);
  color: white;
  border: 3px solid var(--phase-color, #15803d);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35), 0 8px 32px rgba(0, 0, 0, .18);
  min-width: 320px;
  max-width: 92vw;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
  opacity: 0;
}
.xp-levelup-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.xp-lu-emoji {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
  animation: xp-lu-bounce .9s ease infinite alternate;
}
@keyframes xp-lu-bounce {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-4px) rotate(3deg); }
}
.xp-lu-body {
  flex: 1;
  min-width: 0;
}
.xp-lu-eyebrow {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}
.xp-lu-title {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 2px 0 4px;
  line-height: 1.15;
}
.xp-lu-sub {
  font-size: .8125rem;
  font-weight: 600;
  opacity: .85;
}
.xp-lu-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--r-xl);
}
.xp-lu-confetti span {
  position: absolute;
  font-size: 22px;
  opacity: 0;
  animation: xp-lu-confetti 1.6s ease-out forwards;
}
.xp-lu-confetti span:nth-child(1) { left: 10%;  top: 50%; animation-delay: .15s; }
.xp-lu-confetti span:nth-child(2) { left: 30%;  top: 50%; animation-delay: .25s; }
.xp-lu-confetti span:nth-child(3) { left: 55%;  top: 50%; animation-delay: .35s; }
.xp-lu-confetti span:nth-child(4) { left: 75%;  top: 50%; animation-delay: .20s; }
.xp-lu-confetti span:nth-child(5) { left: 90%;  top: 50%; animation-delay: .30s; }
@keyframes xp-lu-confetti {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-72px) rotate(360deg) scale(1.2); }
}

/* ─── Top nav : pill user enrichi avec niveau + barre XP ──────────────── */
/* ─── Bouton logout (icône SVG ronde, style missionrevisions) ──────────── */
.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  width: 34px; height: 34px;
  padding: 0;
  color: var(--text-faded);
  cursor: pointer;
  transition: border-color .18s, color .18s, transform .15s var(--ease-spring);
  margin-left: 6px;
}
.logout-btn:hover {
  border-color: var(--hot);
  color: var(--hot);
  transform: translateY(-1px);
}
.logout-btn svg { display: block; }

/* ─── Lien admin (whitelist UID, à côté du logout) ─────────────────────── */
.admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f97316, #ec4899);
  border: 1.5px solid transparent;
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 15px;
  color: white;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--ease-spring), box-shadow .18s;
  margin-left: 6px;
  box-shadow: 0 2px 8px rgba(249, 115, 22, .25);
}
.admin-link:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(249, 115, 22, .4);
}

/* ─── User pill compacte (refonte 2026-05-10) ─────────────────────────── */
.user-pill-wrap { position: relative; display: inline-flex; }
.user-pill.compact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  background: var(--bg-elev);
  border: 2px solid var(--frame-c, var(--phase-color, var(--border)));
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s, transform .15s var(--ease-spring), box-shadow .2s;
}
.user-pill.compact:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.user-pill.compact .up-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.user-pill.compact .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: .8125rem;
  flex-shrink: 0;
  overflow: hidden;
}
.user-pill.compact .avatar.has-logo {
  background: #fff !important;
  border: 1px solid var(--border);
  padding: 2px;
}
.user-pill.compact .up-club-logo {
  width: 100%; height: 100%;
  object-fit: contain;
}
.user-pill.compact .up-trophy {
  position: absolute;
  top: -6px; right: -8px;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(212, 160, 23, .5));
  pointer-events: none;
}
.user-pill.compact .up-flag-deco {
  font-size: 1.125rem;
  line-height: 1;
  margin: 0 -2px 0 2px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .12));
}
.user-pill.compact .up-flag-img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  margin: 0 0 0 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  flex-shrink: 0;
}
.user-pill.compact .up-title-text {
  font-weight: 700;
  font-size: .8125rem;
  color: var(--text);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  line-height: 1.2;
}
.user-pill.compact .up-chevron {
  font-size: .625rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .2s;
}
.user-pill.compact[aria-expanded="true"] .up-chevron {
  transform: rotate(180deg);
}
.user-pill.compact.guest .up-guest-cta {
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.user-pill.compact.guest .avatar {
  background: var(--text-faded);
  color: var(--bg-elev);
}
@media (max-width: 720px) {
  .user-pill.compact .up-title-text { max-width: 110px; font-size: .75rem; }
  .user-pill.compact .up-flag-deco { font-size: 1rem; }
}
@media (max-width: 480px) {
  .user-pill.compact .up-title-text { display: none; }
  .user-pill.compact { padding: 3px 8px 3px 3px; }
}

/* ─── User menu (dropdown) ─────────────────────────────────────────────── */
/* Positionné absolu sous la pill quand inséré dans .user-pill-wrap (cas standard).
   Le bord droit du menu est aligné avec le bord droit de la pill. */
.user-pill-wrap > .user-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}
.user-menu {
  z-index: 1000;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);
  min-width: 260px;
  padding: 6px;
  animation: um-pop .18s var(--ease-spring);
  transform-origin: top right;
}
@keyframes um-pop {
  from { opacity: 0; transform: scale(.94) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.user-menu .um-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-menu .um-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.user-menu .um-id {
  flex: 1;
  min-width: 0;
}
.user-menu .um-name {
  font-weight: 800;
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu .um-title {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu .um-logout-icon {
  background: transparent;
  border: 0;
  font-size: 1.125rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background .15s, color .15s, transform .15s var(--ease-spring);
}
.user-menu .um-logout-icon:hover {
  background: var(--hot-soft);
  color: var(--hot);
  transform: translateX(2px);
}
.user-menu .um-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text);
  font-size: .875rem;
  font-weight: 600;
  transition: background .15s;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.user-menu .um-link:hover {
  background: var(--bg-subtle);
}
.user-menu .um-em {
  font-size: 1.125rem;
  width: 24px;
  display: inline-flex;
  justify-content: center;
}

/* ─── Profil v2 : gros header carrière ─────────────────────────────────── */
.profile-hero {
  background: linear-gradient(135deg, var(--bg-elev) 0%, var(--phase-soft, var(--bg-subtle)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, var(--phase-color, var(--accent)) 0%, transparent 70%);
  opacity: .12;
  pointer-events: none;
}
.profile-hero-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}
/* Avatar profil : ring extérieur = frame cosmétique, fond = couleur de phase */
.profile-avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  background: var(--phase-c, var(--phase-color, var(--accent)));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0;            /* le texte est dans .pa-inner */
  position: relative;
  flex-shrink: 0;
  box-shadow:
    0 0 0 4px var(--frame-c, var(--accent)),       /* le ring "frame" */
    0 0 0 6px var(--bg-elev),                       /* séparation propre */
    0 8px 24px rgba(0, 0, 0, .18);
}
.profile-avatar .pa-inner {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.profile-avatar.has-club {
  background: #fff !important;
  padding: 6px;
}
.profile-avatar .pa-club-logo {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}
.profile-avatar .pa-flag {
  position: absolute;
  right: -8px; bottom: -8px;
  font-size: 32px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elev);
  border-radius: 50%;
  border: 3px solid var(--frame-c, var(--accent));
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.profile-avatar .pa-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-avatar .pa-trophy {
  position: absolute;
  left: -10px; top: -10px;
  font-size: 32px;
  filter: drop-shadow(0 3px 6px rgba(212, 160, 23, .55));
  animation: trophy-bob 3s ease-in-out infinite;
}
@keyframes trophy-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-3px) rotate(6deg); }
}
.profile-meta { flex: 1; min-width: 240px; }
.profile-meta h1 {
  margin: 0 0 8px;
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -.025em;
}
.profile-title-row { margin-bottom: 14px; }
.profile-title {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--frame-c, var(--phase-color, var(--accent)));
  color: white;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 4px 14px -4px var(--frame-c, var(--phase-color, var(--accent)));
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Bloc progression XP : ligne haute (chiffres + prochain titre) + bar + ligne basse */
.profile-progress {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}
.profile-progress .pp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.profile-progress .pp-current {
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.01em;
}
.profile-progress .pp-current-suffix {
  font-weight: 700;
  color: var(--text-muted);
  font-size: .875rem;
}
.profile-progress .pp-next {
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 600;
}
.profile-progress .pp-next strong { color: var(--phase-color, var(--accent)); font-weight: 800; }
.profile-progress .pp-bar {
  height: 12px;
  background: var(--bg-subtle);
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--border);
}
.profile-progress .pp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--phase-color, var(--accent)) 0%, var(--accent-bright) 100%);
  border-radius: var(--r-pill);
  transition: width .8s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 0 12px -2px var(--phase-color, var(--accent));
}
.profile-progress .pp-foot {
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--text-muted);
}
.profile-progress .pp-foot strong { color: var(--text); font-weight: 800; }

.profile-hero-cta { align-self: flex-start; }

/* Tuiles stats sous le hero — gros chiffres, labels discrets */
.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 18px;
  position: relative;
}
.ps-tile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  transition: transform var(--dur-quick), border-color var(--dur-quick), box-shadow var(--dur-quick);
}
.ps-tile:hover {
  transform: translateY(-2px);
  border-color: var(--phase-color, var(--accent));
  box-shadow: 0 8px 20px -10px var(--phase-color, var(--accent));
}
.ps-tile-num {
  font-size: 1.875rem;
  font-weight: 900;
  letter-spacing: -.025em;
  color: var(--text);
  line-height: 1.1;
}
.ps-tile-label {
  font-size: .8125rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 2px;
}

.profile-showcase {
  margin: 24px 0;
}
.profile-showcase-title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.profile-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.cosmetic-card {
  background: var(--bg-elev);
  border: 2px solid var(--border);
  border-radius: var(--r);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--ease-spring);
}
.cosmetic-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.cosmetic-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cosmetic-card.locked {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.6);
}
.cosmetic-emoji { font-size: 38px; line-height: 1; }
.cosmetic-name {
  font-size: .6875rem;
  font-weight: 700;
  margin-top: 6px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Notif unlock cosmétique : toast persistant avec actions */
.unlock-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  background: white;
  border: 2px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  display: flex; align-items: center; gap: 14px;
  max-width: 420px;
  cursor: pointer;
  transform: translateX(120%);
  transition: transform .5s var(--ease-spring), opacity .3s;
}
.unlock-toast.show { transform: translateX(0); }
.unlock-toast .ut-emoji {
  font-size: 36px;
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
  border-radius: 50%;
}
.unlock-toast .ut-club-logo {
  width: 44px; height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 3px;
  border: 1px solid var(--border);
}
.unlock-toast .ut-text {
  flex: 1;
  font-size: .8125rem;
  line-height: 1.4;
  min-width: 0;
}
.unlock-toast .ut-text strong {
  display: block;
  font-weight: 800;
  color: var(--gold);
  font-size: .75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.unlock-toast .ut-label {
  font-weight: 700;
  color: var(--text);
}
.unlock-toast .ut-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.unlock-toast .ut-apply {
  background: var(--gold);
  color: #1a0e00;
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-weight: 800;
  font-size: .75rem;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s var(--ease-spring), background .15s;
  white-space: nowrap;
}
.unlock-toast .ut-apply:hover { background: var(--gold-bright); transform: translateY(-1px); }
.unlock-toast .ut-close {
  background: transparent;
  border: 0;
  font-size: .9375rem;
  color: var(--text-faded);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: color .15s, background .15s;
}
.unlock-toast .ut-close:hover { color: var(--text); background: var(--bg-subtle); }
@media (max-width: 480px) {
  .unlock-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ─── Profil v2 : tabs en pilules colorées (style game-tabs) ───────────── */
.profile-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 22px;
  flex-wrap: wrap;
}
.profile-tab {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-quick), color var(--dur-quick), border-color var(--dur-quick), box-shadow var(--dur-quick), transform var(--dur-quick);
  white-space: nowrap;
}
.profile-tab .pt-icon { font-size: 19px; line-height: 1; }
.profile-tab:hover {
  border-color: var(--text-muted);
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .18);
}

/* Couleur par onglet (data-color = xi|guess-player|duel|guess) */
.profile-tab[data-color="xi"]            { --tab-color: var(--game-xi);           --tab-grad: var(--game-xi-grad); }
.profile-tab[data-color="guess-player"]  { --tab-color: var(--game-guess-player); --tab-grad: var(--game-guess-player-grad); }
.profile-tab[data-color="duel"]          { --tab-color: var(--game-duel);         --tab-grad: var(--game-duel-grad); }
.profile-tab[data-color="guess"]         { --tab-color: var(--game-guess);        --tab-grad: var(--game-guess-grad); }

.profile-tab.active {
  background: var(--tab-grad, var(--accent-grad));
  border-color: transparent;
  color: white;
  font-weight: 800;
  box-shadow:
    0 10px 24px -8px var(--tab-color, rgba(21, 128, 61, .55)),
    0 2px 6px -2px rgba(0, 0, 0, .15);
}
.profile-tab.active .pt-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25));
  transform: scale(1.05);
}
.profile-tab.active:hover { transform: translateY(-1px); }

/* Compteur compact par catégorie */
.cosmetics-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: .8125rem;
  margin-bottom: 24px;
  align-items: center;
}
.cosmetics-stats .cs-total {
  font-weight: 800;
  color: var(--accent-hover);
  margin-right: auto;
}
.cosmetics-stats .cs-item {
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.cosmetics-stats .cs-item strong { color: var(--text); margin-left: 4px; }

.cosmetics-section { margin-bottom: 32px; }
.cosmetics-section-head { margin-bottom: 14px; }
.cosmetics-section-head .profile-showcase-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.cs-section-count {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.cosmetics-subtitle {
  color: var(--text-muted);
  font-size: .8125rem;
  margin: 0;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
}

/* Badge "✓ débloqué" sur cartes unlocked (non sélectionnées) */
.cosmetic-card.unlocked .cosmetic-ok {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #15803d;
  background: #dcfce7;
  border-radius: var(--r-sm);
  padding: 3px 6px;
  margin-top: 4px;
  text-align: center;
}
.cosmetic-card.selected .cosmetic-ok { display: none; }

.cosmetic-card { position: relative; }
.cosmetic-card.locked .cosmetic-lock-hint {
  font-size: .625rem;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: var(--r-sm);
  padding: 3px 6px;
  margin-top: 4px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.cosmetic-card.locked {
  opacity: 1; /* on retire le grayscale, on veut voir ce qui est dispo */
  cursor: help;
  text-decoration: none;
  color: var(--text);
  display: block;
  border-style: dashed;
}
a.cosmetic-card.locked { cursor: pointer; transition: all .2s var(--ease-spring); }
a.cosmetic-card.locked:hover {
  border-color: var(--gold);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 160, 23, .25);
  text-decoration: none;
}
a.cosmetic-card.locked:hover .cosmetic-emoji { opacity: .85; filter: none; }
a.cosmetic-card.locked:hover .cosmetic-lock-hint { background: var(--gold); color: white; }
.cosmetic-card.locked .cosmetic-emoji { opacity: .35; filter: grayscale(.7); transition: opacity .2s, filter .2s; }
.cosmetic-card.locked .cosmetic-img { opacity: .4; filter: grayscale(.5); transition: opacity .2s, filter .2s; }
.cosmetic-card.locked:hover .cosmetic-img { opacity: 1; filter: none; }
.cosmetic-card.locked .cosmetic-name { opacity: .55; }

/* Vraie image (drapeau / logo club) dans les cartes cosmétiques */
.cosmetic-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  border-radius: var(--r-sm);
}
.flag-card .cosmetic-img {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.club-card .cosmetic-img { background: #fff; padding: 4px; }
.cosmetic-card { padding: 10px 6px 10px; }
.cosmetic-card .cosmetic-name { margin-top: 6px; }

/* Filtre status : Tous / Débloqués / Verrouillés */
.cosmetics-filter {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}
.cf-chip {
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .18s var(--ease-spring);
}
.cf-chip:hover { border-color: var(--accent); color: var(--text); }
.cf-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

/* Application du filtre status sur les cartes */
.cosmetics-tab-body[data-filter="unlocked"] .cosmetic-card.locked { display: none; }
.cosmetics-tab-body[data-filter="locked"] .cosmetic-card:not(.locked):not(.cosmetic-card-none) { display: none; }
/* "Aucun" reste toujours visible — c'est l'option pour désélectionner */

/* Search input pour filtrer drapeaux/clubs */
.cosmetics-search {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: .8125rem;
  color: var(--text);
  margin: 4px 0 12px;
}
.cosmetics-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ─── Banner "Débloque ici" dans scope-header ──────────────────────────── */
.scope-unlock-hint {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--gold-soft) 0%, #fff 100%);
  border: 1.5px dashed var(--gold);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin: 4px 28px 10px;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text);
  animation: suh-pulse 2.5s ease-in-out infinite;
  max-width: calc(100% - 56px);
}
.scope-unlock-hint--trophy {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: var(--gold);
}
.scope-unlock-hint .suh-emoji {
  font-size: 1.25rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
}
.scope-unlock-hint .suh-text {
  color: var(--text-muted);
  font-weight: 600;
}
.scope-unlock-hint .suh-target {
  color: var(--text);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.scope-unlock-hint .suh-flag-img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
@keyframes suh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(212, 160, 23, 0); }
}

/* ===========================================================
   GUESS-MISSING — Devine le manquant (mode jaune doré)
   ----------------------------------------------------------
   Layout consensus-grid (terrain à gauche, panneau à droite).
   Numéros de maillot bien lisibles dans les slots du terrain
   (écho broadcast TV / posts club Insta-FB type "GUESS THE
   MISSING PLAYER").
   =========================================================== */

.gm-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
.gm-newcompo {
  font-weight: 700;
}

/* Numéros de maillot dans tous les slots du terrain */
.gm-jersey-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--game-missing);
  font-family: 'Inter Tight', system-ui, sans-serif;
  letter-spacing: -.02em;
  line-height: 1;
}
.slot.gk .gm-jersey-num { color: var(--game-missing-bright); }

/* Slot mystère : gros "?" doré + name placeholder en pointillé */
.gm-mystery-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--game-missing);
  font-family: 'Inter Tight', system-ui, sans-serif;
  line-height: 1;
}
.gm-mystery-name {
  color: var(--game-missing);
  font-weight: 800;
  letter-spacing: .04em;
}
.gm-pitch-mystery .jersey {
  background: rgba(250, 204, 21, 0.18);
  border: 2px dashed var(--game-missing);
  animation: gm-mystery-pulse 2.2s ease-in-out infinite;
}
.gm-pitch-found .jersey {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}
.gm-pitch-skipped .jersey {
  border-color: var(--text-faded);
  opacity: .85;
}
.gm-skip-text {
  color: var(--text-muted);
  font-style: italic;
}
@keyframes gm-mystery-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); border-color: var(--game-missing-bright); }
}

/* Header du terrain (titre du match, méta) — teinte missing */
.pitch-header.gm-header .ph-cat {
  color: var(--game-missing);
}

/* Side panel — progress + card mystère + actions + résultat */
.gm-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.gm-progress {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.gm-progress-num {
  font-size: .8125rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.gm-progress-score {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--game-missing);
  font-family: 'Inter Tight', system-ui, sans-serif;
  letter-spacing: -.02em;
}

.gm-active-card {
  padding: 16px;
  background: var(--game-missing-soft);
  border: 1px solid rgba(202, 138, 4, 0.20);
  border-radius: var(--r);
}
.gm-active-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gm-active-pos {
  display: inline-block;
  padding: 4px 10px;
  background: var(--game-missing);
  color: white;
  font-weight: 800;
  font-size: .8125rem;
  border-radius: var(--r-pill);
  letter-spacing: .03em;
}
.gm-active-flag { font-size: 1.4rem; line-height: 1; }
.gm-active-num {
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: .875rem;
}
.gm-active-name {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 8px 0 14px;
  color: var(--text);
  letter-spacing: .04em;
}
.gm-active-name strong { letter-spacing: -.01em; color: var(--game-missing); }
.gm-mystery-text {
  color: var(--text-faded);
  font-weight: 600;
  letter-spacing: .03em;
}

.gm-active-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.gm-active-row input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  font-size: 1rem;
  font-family: inherit;
}
.gm-active-row input:focus-visible {
  outline-color: var(--game-missing);
}

.gm-active-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.gm-rules {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
}

/* Result panel */
.gm-result-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.gm-result-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--game-missing-grad);
  color: white;
  font-size: 1.5rem;
  font-weight: 800;
  border-radius: 12px;
}
.gm-result.gm-panel:has(.gm-result-icon:contains('✗')) .gm-result-icon {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}
.gm-result-title {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.gm-result-score {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--game-missing);
  font-family: 'Inter Tight', system-ui, sans-serif;
}
.gm-result-truth {
  background: var(--bg-subtle);
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: 1rem;
  margin-bottom: 14px;
}
.gm-result-actions { display: flex; gap: 8px; }

/* Shake feedback (réutilise le shake du guess-lineup) */
.gm-active-card.shake-wrong {
  animation: gl-shake 0.4s ease-in-out;
}
.gm-active-card.shake-wrong .gm-active-row input {
  border-color: #ef4444;
}

/* Flash toast (réutilise styles gl-flash mais palette missing) */
.gm-flash {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 9999;
  padding: 14px 22px;
  background: var(--game-missing-grad);
  color: white;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.005em;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 32px rgba(202, 138, 4, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease-spring);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-flash.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.gm-flash.wrong {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.40);
}

/* Bloc partage sous le terrain — réutilise .side-share (pattern lineup-view XI)
   pour harmoniser la mise en page. Le bouton "Partager" prend la teinte missing. */
.gm-share-block {
  margin-top: 14px;
}
.gm-share-block .share-go.btn.primary {
  background: var(--game-missing-grad);
  color: #1a0e00;
  border: none;
  box-shadow: 0 6px 18px rgba(202, 138, 4, 0.30);
}
.gm-share-block .share-go.btn.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Onboarding modal du mode missing — le tab actif est géré par la règle générique
   .game-tab.active (gradient + color:white), grâce au mapping --game-color-grad
   ajouté dans la section "Couleurs par mode". */
.ob-modal[data-game="missing"] .ob-icon {
  background: var(--game-missing-grad);
}
.ob-modal[data-game="missing"] .ob-go {
  background: var(--game-missing-grad);
}

/* Responsive : sidebar passe sous le terrain en mobile (déjà géré par consensus-grid global) */
@media (max-width: 720px) {
  .gm-active-card { padding: 14px; }
  .gm-active-actions { flex-direction: column; }
  .gm-active-actions .btn { width: 100%; }
}

/* ===========================================================
   ACCESSIBILITÉ — focus visible, motion réduit, lecteurs d'écran
   =========================================================== */

/* Focus visible explicite — anneau cohérent partout au clavier.
   On NE l'enlève PAS pour les utilisateurs souris (focus-visible le gère),
   contrairement à `outline:none` qui casse l'a11y. */
:focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Boutons ronds / cartes : décale le ring vers l'extérieur */
.btn:focus-visible,
.card:focus-visible,
.lineup-card:focus-visible,
.cat-card:focus-visible,
.mega-item:focus-visible,
.user-pill:focus-visible,
.tn-link:focus-visible,
.tn-brand:focus-visible {
  outline-offset: 4px;
  outline-width: 3px;
}
/* Inputs / textareas : ring soft sur le bord, pas trop agressif */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-color: var(--accent);
  outline-offset: 1px;
}
/* On supprime le focus pour les clics souris (pas trap clavier) — focus-visible only. */
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link — première chose au tab, permet aux lecteurs d'écran de
   sauter la nav pour aller directement au contenu. Visible uniquement au focus. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform .15s ease;
  z-index: 10000;
}
.skip-link:focus {
  transform: translateY(0);
}

/* Live region pour les annonces a11y (aria-live) — invisible visuellement
   mais lue par les lecteurs d'écran. */
.sr-only,
[aria-live] {
  /* Si un élément a aria-live ET pas de classe sr-only, on suppose qu'il est volontairement
     visible et on ne touche à rien. */
}
.sr-only {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

/* ===========================================================
   18. MOBILE OVERRIDES — refonte complète mobile-first (2026-05-09)
   ───────────────────────────────────────────────────────────
   Breakpoints :
   - 980px : tablette portrait (game-tabs serrés, grilles plus compactes)
   - 720px : phablette / mobile classique (1col strict, drawer activé)
   - 540px : iPhone moderne (typo réduite, paddings compactés)
   - 400px : iPhone SE / petits mobiles (économie max d'espace)
   Tout est en bas pour faire effet de cascade — surcharge propre.
   =========================================================== */

/* ─── ≤980px : tablette portrait ─── */
@media (max-width: 980px) {
  .main { padding: 24px clamp(14px, 4vw, 28px) 80px; }

  /* Topnav : on cache les CTAs auth dès que le hamburger apparaît.
     Sinon → 3 boutons + hamburger côte-à-côte = bouchon.
     Et on pousse les actions à droite (search caché → plus de margin-left:auto). */
  .tn-actions { margin-left: auto; }
  .tn-actions #login-btn,
  .tn-actions #register-btn { display: none !important; }
  /* User pill (logged in) : on garde, juste compact */
  .tn-actions .user-pill { padding: 3px 4px 3px 3px; }
  .tn-actions .user-pill .up-info { display: none; }
  .tn-actions .user-pill .username { display: none; }
  .tn-mobile-btn { width: 44px; height: 44px; font-size: 20px; }

  /* Scope hero (pages compétition / club / sélection) */
  .scope-body { padding: 22px 22px 22px; }
  .scope-hero-head { padding: 20px 22px 12px; gap: 16px; }
  .scope-hero-head .icon { width: 64px; height: 64px; font-size: 1.75rem; }
  .scope-hero-head h1 { font-size: 1.5rem; }
  .scope-hero .game-tabs-wrap { padding: 0 22px; }
  .scope-unlock-hint { margin: 4px 22px 10px; max-width: calc(100% - 44px); }

  /* Duel : stats bar plus dense */
  .duel-stats-bar { gap: 8px; }
  .dsb-cell { padding: 10px 12px; gap: 8px; }
  .dsb-num { font-size: 1.25rem; }
  .dsb-lbl { font-size: .625rem; }
  .duel-leaderboard { padding: 18px; }
}

/* ─── ≤720px : phablette / mobile classique ─── */
@media (max-width: 720px) {
  /* TOPNAV — version compacte, hamburger 44px (zone tactile iOS) */
  .topnav { height: 56px; }
  .megamenu-backdrop { top: 56px; max-height: calc(100dvh - 56px); }
  .tn-inner { padding: 0 14px; gap: 8px; }
  .tn-brand { font-size: 1.0625rem; gap: 7px; min-width: 0; overflow: hidden; }
  .tn-brand .ball { width: 28px; height: 28px; font-size: 14px; flex-shrink: 0; }
  .tn-brand > span:not(.ball) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* MAIN container & sections */
  .main { padding: 18px 14px 80px; }
  .breadcrumb { font-size: .75rem; margin-bottom: 12px; }
  h1, .page-title { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  h2 { font-size: 1.375rem; }
  .section-title { font-size: 1rem; margin: 24px 0 12px; }
  .page-subtitle { font-size: .9375rem; }

  /* SCOPE HERO + GAME TABS (cœur du problème mobile #1) */
  .scope-frame { border-radius: var(--r-md); margin-bottom: 22px; }
  .scope-body { padding: 18px 14px 22px; }
  .scope-hero-head { padding: 16px 14px 10px; gap: 12px; }
  .scope-hero-head .icon { width: 50px; height: 50px; font-size: 1.375rem; border-radius: 18%; }
  .scope-hero-head h1 { font-size: 1.25rem; line-height: 1.15; }
  .scope-hero-head p { font-size: .8125rem; }
  .scope-unlock-hint { margin: 4px 14px 8px; padding: 5px 12px; font-size: .75rem; max-width: calc(100% - 28px); }

  .scope-hero .game-tabs-wrap { padding: 0; }
  .game-tabs-label {
    padding: 0 14px;
    margin-bottom: 10px;
    gap: 6px 10px;
    align-items: center;
  }
  .gtl-eyebrow { font-size: .6875rem; padding: 3px 10px; letter-spacing: .12em; }
  .gtl-help { font-size: .8125rem; flex: 1 1 100%; font-weight: 600; }
  .gtl-help strong { display: inline; font-weight: 800; }
  .game-tabs {
    padding: 6px 14px 6px;
    gap: 6px;
    /* Mobile : scroll horizontal (wrap mangerait trop de hauteur) avec mask
       gradient "il y a plus à droite". On override la grid desktop. */
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
  }
  .game-tab { flex: 0 0 auto; }
  .game-tab {
    padding: 10px 14px;
    font-size: .8125rem;
    gap: 7px;
    border-radius: 12px;
  }
  .game-tab .gt-icon { font-size: 19px; }
  .game-tab .gt-name { letter-spacing: -.01em; }
  .game-tab .gt-badge { display: none; }

  /* HERO (home) */
  .hero { padding: 28px 18px; margin-bottom: 24px; border-radius: var(--r-lg); }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .hero p.lead { font-size: .9375rem; margin-bottom: 20px; }
  .hero .cta-row { gap: 8px; }
  .cta-primary, .cta-secondary { padding: 12px 22px; font-size: .9375rem; }
  .hero-stats {
    gap: 10px;
    padding-top: 18px;
    margin-top: 22px;
    grid-template-columns: repeat(3, 1fr);
  }
  .hero-stats .stat .num { font-size: 1.375rem; }
  .hero-stats .stat .lbl { font-size: .625rem; }

  /* GRIDS / CARDS */
  .grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
  .grid.compact { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .grid.tight { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); }
  .grid.wide { grid-template-columns: 1fr; }
  .card { padding: 12px; }
  .card .card-icon { width: 36px; height: 36px; font-size: 1.125rem; margin-bottom: 8px; }
  .card .card-title { font-size: .875rem; }

  /* PITCH (terrain) — tout réduit pour ne pas déborder */
  .pitch-wrap { padding: 12px; border-radius: var(--r-md); }
  .pitch { aspect-ratio: 3 / 4; max-height: none; border-width: 2px; }
  .pitch .slot { width: 64px; }
  .pitch .slot .jersey {
    width: 38px; height: 38px;
    border-width: 2.5px;
    font-size: .6875rem;
  }
  .pitch .slot.has-flag.gk .jersey { border-width: 3px; }
  .pitch .slot .name {
    font-size: .6875rem;
    max-width: 80px;
    padding: 2px 6px;
    margin-top: 3px;
  }
  .pitch .slot.empty .jersey { font-size: .75rem; }

  /* PITCH HEADER */
  .pitch-header { padding: 12px 14px; gap: 10px; }
  .pitch-header .ph-logo,
  .pitch-header .ph-flag,
  .pitch-header .ph-emoji { width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
  .pitch-header .ph-cat { font-size: 1.125rem; }
  .pitch-header .ph-team { font-size: .875rem; }

  /* DUEL — arena, stats, leaderboard */
  .duel-grid { grid-template-columns: 1fr; gap: 18px; }
  .duel-stats-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dsb-cell {
    padding: 9px 8px;
    gap: 7px;
    min-width: 0;        /* indispensable : sinon le contenu pousse + overflow */
    overflow: hidden;
  }
  .dsb-icon { font-size: 1rem; flex-shrink: 0; }
  .dsb-text { min-width: 0; overflow: hidden; }
  .dsb-num { font-size: 1.0625rem; }
  .dsb-lbl {
    font-size: .5625rem;
    line-height: 1.1;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .duel-cards { grid-template-columns: 1fr; gap: 10px; }
  .duel-vs { width: 48px; height: 48px; font-size: .9375rem; justify-self: center; margin: -6px 0; }
  .duel-card { padding: 18px 14px; min-height: 280px; }
  .dpc-avatar { width: 76px; height: 76px; font-size: 1.25rem; }
  .duel-leaderboard { padding: 16px 14px; margin-top: 24px; }
  .duel-lb-row {
    grid-template-columns: 28px 22px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }
  .dlr-record { display: none; }
  .dlr-name { font-size: .875rem; }
  .duel-instructions { font-size: .8125rem; padding: 8px; }
  .duel-side { position: static; }
  .duel-side-card { padding: 14px; }

  /* GUESS-LINEUP — panneau actif, slots, progress */
  .gl-active-card { padding: 14px; border-radius: var(--r-md); }
  .gl-active-name {
    font-size: 1.25rem;
    letter-spacing: .12em;
    min-height: 30px;
    padding: 6px;
  }
  .gl-active-row { gap: 6px; flex-wrap: wrap; }
  .gl-active-row input {
    padding: 9px 12px;
    font-size: .875rem;
    min-width: 120px;
  }
  .gl-active-row .btn.primary { padding: 9px 14px; font-size: .8125rem; }
  .gl-active-actions { gap: 6px; }
  .gl-active-actions .btn { padding: 7px 12px; font-size: .75rem; }
  .gl-active-meta { font-size: .8125rem; }
  .gl-active-head { gap: 8px; margin-bottom: 10px; padding-bottom: 8px; }
  .gl-active-pos { font-size: .6875rem; padding: 4px 10px; }
  .gl-progress { padding: 12px; gap: 10px; border-radius: var(--r-md); }
  .gl-progress-num { font-size: 1.0625rem; }
  .gl-progress-score { font-size: 1rem; }
  .gl-slots-list { padding: 6px; max-height: 280px; }
  .gl-slot-row {
    padding: 7px 10px;
    grid-template-columns: 22px 32px 26px 1fr;
    gap: 8px;
    font-size: .8125rem;
  }
  .gl-slot-row .gsl-pos { font-size: .625rem; padding: 3px 5px; }
  .gl-pitch-actions { grid-template-columns: 1fr; }
  .gl-action-share.btn.primary,
  .gl-action-share-img.btn { padding: 12px 18px; font-size: .875rem; }
  .gl-topbar .breadcrumb { font-size: .75rem; }
  .gl-newcompo.btn { padding: 6px 12px; font-size: .75rem; }
  .gl-reveal { padding: 14px; }
  .gl-reveal-team { font-size: 1.25rem; }

  /* GUESS-PLAYER */
  .gp-board { grid-template-columns: 1fr; padding: 18px 14px; gap: 18px; }
  .gp-clues-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gp-clue { padding: 8px 10px; gap: 8px; }
  .gp-clue-icon { width: 24px; font-size: 1rem; }
  .gp-clue-value { font-size: .8125rem; }
  .gp-init { width: 72px; height: 72px; font-size: 1.5rem; }
  .gp-silhouette { padding: 14px 12px; }

  /* PICKER MODAL */
  .picker-modal {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .picker-header { padding: 14px; gap: 10px; }
  .picker-header h3 { font-size: 1rem; }
  .picker-header h3 .scope-label { font-size: .6875rem; }
  .picker-header .pos-pill { width: 32px; height: 32px; font-size: .75rem; }
  .picker-toolbar { padding: 10px 14px; gap: 8px; }
  .picker-toolbar .filter-row { gap: 4px; }
  .picker-toolbar .search-row { gap: 6px; }
  .picker-toolbar .search-row .search { flex: 1 1 100%; min-width: 0; }
  .picker-toolbar .picker-sort { font-size: .6875rem; }
  .picker-toolbar .picker-sort select { padding: 6px 8px; font-size: .75rem; }
  .picker-results { padding: 10px 14px; }
  .picker-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .picker-foot { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .picker-foot .actions { margin-left: 0; flex: 1 1 100%; }
  .picker-foot .actions .btn { flex: 1; }

  /* SCOPE MODAL (sélecteur d'équipe builder) */
  .scope-modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100% !important;
    border-radius: 0;
  }
  .scope-modal .picker-results { padding: 10px 14px; }
  .scope-tabs { gap: 1px; padding: 3px; }
  .scope-tab { padding: 7px 6px; font-size: .75rem; }
  .scope-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .scope-picker-trigger { padding: 10px 12px; }
  .scope-picker-trigger .spt-icon { width: 28px; height: 28px; }
  .scope-picker-trigger .spt-name { font-size: .8125rem; }

  /* MODAL global (login, confirm, share preview, onboarding) → bottom-sheet */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-height: 92dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    width: 100%;
    max-width: 100%;
    animation: pop-mobile var(--dur-base) var(--ease-spring);
  }
  @keyframes pop-mobile {
    from { transform: translateY(40px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .modal-header { padding: 18px 20px 12px; }
  .modal-header h3 { font-size: 1.125rem; }
  .modal-body { padding: 0 20px 18px; }
  .modal-footer {
    padding: 14px 20px 18px;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn { width: 100%; }
  /* Picker, scope et autres "fullscreen" modaux : on garde fullscreen (ne pas écraser) */
  .picker-modal, .scope-modal { animation: none; }

  /* BUILDER + LINEUP layouts */
  .lineup-layout { gap: 16px; }
  .builder-layout { gap: 16px; }
  .builder-form {
    padding: 16px;
    position: static !important;
    gap: 12px;
    border-radius: var(--r-md);
  }
  .builder-form .scope-picker-trigger { padding: 10px 12px; }
  .lineup-side { gap: 10px; }

  /* VOTE BAR */
  .vote-bar { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }
  .vote-btn { padding: 8px 14px; font-size: .8125rem; }
  .vote-score { font-size: 1.25rem; }

  /* PROFILE */
  .profile-hero { padding: 20px 18px; }
  .profile-stats-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ps-tile { padding: 10px 12px; }
  .ps-tile-num { font-size: 1.375rem; }
  .ps-tile-label { font-size: .6875rem; }
  .profile-progress { padding: 12px 14px; }
  .profile-progress .pp-current { font-size: .9375rem; }
  .profile-tabs {
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profile-tabs::-webkit-scrollbar { display: none; }
  .profile-tab { padding: 10px 14px; font-size: .8125rem; flex-shrink: 0; border-radius: 12px; }
  .profile-tab .pt-icon { font-size: 17px; }
  .profile-avatar { width: 84px; height: 84px; }
  .profile-avatar .pa-inner { font-size: 30px; }
  .profile-showcase-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }

  /* TOP 5 board */
  .top5-board { padding: 18px 14px; }
  .top5-board-head { flex-wrap: wrap; gap: 10px; }
  .top5-slot { padding: 12px 14px; gap: 12px; }

  /* DAILY challenges (home) */
  .daily-challenges { gap: 10px; }
  .daily-card { padding: 14px; }

  /* PORTAILS */
  .portal { padding: 16px 14px; gap: 14px; }
  .portal-icon { width: 48px; height: 48px; font-size: 1.5rem; }

  /* SPOTLIGHT cards */
  .spotlight-card { padding: 18px 16px; }

  /* MOBILE drawer width — un peu plus serré */
  .mobile-drawer { width: 100%; max-width: 360px; padding: 18px 16px; }
  .mobile-overlay { display: block; }

  /* BUTTONS génériques : tap target 40px min */
  .btn { padding: 10px 18px; font-size: .8125rem; min-height: 40px; }
  .btn.sm { padding: 8px 14px; font-size: .75rem; min-height: 36px; }
  .btn.lg { padding: 13px 22px; font-size: .9375rem; min-height: 46px; }

  /* FILTER bar / chips */
  .filter-bar { gap: 4px; }
  .filter-btn { padding: 6px 10px; font-size: .75rem; min-height: 32px; }
  .chip { padding: 6px 10px; font-size: .75rem; min-height: 32px; }

  /* TABS génériques */
  .tabs { gap: 2px; }
  .tab { padding: 10px 14px; font-size: .8125rem; }

  /* MODE intro / chapeau */
  .mode-intro h2 { font-size: 1.25rem; }
  .mode-intro p { font-size: .875rem; }

  /* PREGAME overlay (auth pre-action) */
  .pregame-card { padding: 24px 18px !important; }
  .pregame-card h2 { font-size: 1.25rem; }

  /* ONBOARDING modal */
  .ob-modal { padding: 22px 16px !important; }

  /* SHARE bar */
  .share-bar { gap: 6px; flex-wrap: wrap; }
  .share-bar .btn { flex: 1; min-width: 90px; padding: 10px 12px; }

  /* COMPETITION : edition + stage cards */
  .stage-card { padding: 12px; }
  .team-chip { font-size: .75rem; padding: 4px 10px; }
  .past-edition { padding: 12px 14px; gap: 8px; }
  .past-edition .pe-year { font-size: .9375rem; }
  .edition-current { padding: 14px; }
}

/* ─── ≤540px : iPhone moderne ─── */
@media (max-width: 540px) {
  /* Scope hero : icône encore plus petite, header peut wrap */
  .scope-hero-head {
    gap: 10px;
    padding: 14px 12px 8px;
    flex-wrap: nowrap;
  }
  .scope-hero-head .icon { width: 44px; height: 44px; font-size: 1.25rem; }
  .scope-hero-head h1 { font-size: 1.125rem; }
  .scope-hero-head p { font-size: .75rem; }
  .scope-body { padding: 14px 12px 18px; }

  /* Game tabs : compactés mais lisibles. L'icône reste grande pour l'identification rapide. */
  .game-tabs-label { padding: 0 12px; }
  .game-tabs { padding: 4px 12px 8px; gap: 6px; }
  .game-tab { padding: 9px 12px; font-size: .75rem; gap: 6px; border-radius: 11px; }
  .game-tab .gt-icon { font-size: 17px; }

  /* Hero : compacté */
  .hero { padding: 22px 16px; }
  .hero h1 { font-size: 1.5rem; line-height: 1.05; margin-bottom: 12px; }
  .hero p.lead { font-size: .875rem; margin-bottom: 18px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-stats .stat .num { font-size: 1.125rem; }
  .hero-stats .stat .lbl { font-size: .5625rem; letter-spacing: .06em; }

  /* Duel stats : encore plus compacts (visible dans le screenshot du user) */
  .dsb-cell { padding: 8px 8px; gap: 3px; }
  .dsb-icon { font-size: 1rem; }
  .dsb-num { font-size: 1rem; }
  .dsb-lbl { font-size: .5rem; letter-spacing: .04em; }

  /* Pitch : encore plus petit pour rester scrollable */
  .pitch-wrap { padding: 10px; }
  .pitch .slot { width: 56px; }
  .pitch .slot .jersey { width: 32px; height: 32px; border-width: 2px; font-size: .625rem; }
  .pitch .slot .name { font-size: .625rem; max-width: 70px; padding: 1px 5px; }

  /* Pitch header (sur le partage social) */
  .pitch-header { padding: 10px 12px; gap: 8px; }
  .pitch-header .ph-cat { font-size: 1rem; }
  .pitch-header .ph-team { font-size: .8125rem; }
  .pitch-header .ph-meta { font-size: .625rem; }

  /* Picker grid 1col */
  .picker-grid { grid-template-columns: 1fr; gap: 6px; }
  .picker-card { padding: 10px; }

  /* Lineup card */
  .lineup-card { padding: 12px; }
  .lineup-card .lc-title { font-size: .875rem; }

  /* Profile avatar */
  .profile-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
}

/* ─── ≤400px : iPhone SE / petits mobiles ─── */
@media (max-width: 400px) {
  .topnav { height: 52px; }
  .megamenu-backdrop { top: 52px; max-height: calc(100dvh - 52px); }
  .tn-inner { padding: 0 12px; gap: 6px; }
  .tn-brand { font-size: .9375rem; }
  .tn-brand .ball { width: 24px; height: 24px; font-size: 13px; }

  .main { padding: 14px 10px 60px; }
  .scope-body { padding: 12px 10px 16px; }
  .scope-hero-head { padding: 12px 10px 6px; gap: 8px; }
  .game-tabs-label { padding: 0 10px; }
  .game-tabs { padding: 4px 10px 6px; gap: 5px; }
  .game-tab { padding: 8px 10px; font-size: .6875rem; gap: 5px; border-radius: 10px; }
  .game-tab .gt-icon { font-size: 15px; }

  /* Stats bar : on retire l'icône (gain de place vital) */
  .duel-stats-bar { gap: 4px; }
  .dsb-cell { padding: 7px 5px; }
  .dsb-icon { display: none; }
  .dsb-num { font-size: .9375rem; }
  .dsb-lbl { font-size: .5rem; }

  /* Hero stats : 2 col au lieu de 3, dernier item en pleine largeur */
  .hero { padding: 20px 14px; }
  .hero h1 { font-size: 1.375rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:nth-child(3) { grid-column: 1 / -1; text-align: center; }

  /* Pitch ultra compact */
  .pitch .slot { width: 48px; }
  .pitch .slot .jersey { width: 28px; height: 28px; font-size: .5625rem; }
  .pitch .slot .name { font-size: .5625rem; max-width: 60px; padding: 1px 4px; }

  /* Game-tabs : si 5 tabs, on accepte qu'ils dépassent → mask gradient déjà en place */
}

/* ===========================================================
   HOME — Mobile-first redesign (≤720px)
   Pas un empilement de blocs : carrousels swipables pour la
   découverte, grilles compactes pour les stats, hero condensé.
   =========================================================== */
@media (max-width: 720px) {
  /* ── Hero : condense ──────────────────────────────────────── */
  .hero.hero-v2 {
    padding: 22px 16px 20px;
    margin-bottom: 18px;
    border-radius: var(--r-lg);
  }
  .hero-v2 .orb { filter: blur(40px); opacity: .28; }
  .hero-v2 .orb-1 { width: 180px; height: 180px; top: -50px; right: -20px; }
  .hero-v2 .orb-2 { width: 140px; height: 140px; bottom: -50px; left: -30px; }
  .hero-v2 .orb-3 { display: none; }

  .hero .eyebrow-pill {
    font-size: .625rem;
    padding: 4px 10px;
    margin-bottom: 14px;
    letter-spacing: .06em;
  }
  .hero-v2 h1 {
    font-size: clamp(1.875rem, 8.5vw, 2.5rem);
    line-height: .98;
    letter-spacing: -.035em;
    margin-bottom: 12px;
  }
  .hero-v2 p.lead {
    font-size: .9375rem;
    line-height: 1.45;
    margin-bottom: 16px;
  }

  /* Trust line : pills inline, pas un stack vertical */
  .hero-trust {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .6875rem;
    margin-bottom: 22px;
    padding: 0;
  }
  .hero-trust > span:not(.dot-sep) {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    padding: 4px 9px;
    border-radius: var(--r-pill);
    font-weight: 600;
    white-space: nowrap;
  }
  .hero-trust .dot-sep { display: none; }
  .hero-trust strong { font-weight: 800; color: var(--text); }

  /* Modes eyebrow : compact */
  .hero-modes-eyebrow {
    font-size: .625rem;
    letter-spacing: .12em;
    margin: 0 0 10px;
    padding: 0 2px;
  }

  /* ── 1) Modes : CAROUSEL horizontal snap, full-bleed ──── */
  .modes-grid.hero-modes-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    /* full bleed : sort des 16px de padding hero */
    margin: 0 -16px;
    padding: 4px 16px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .modes-grid.hero-modes-grid::-webkit-scrollbar { display: none; }
  .modes-grid.hero-modes-grid > .mode-card {
    flex: 0 0 78%;
    min-height: 0;
    scroll-snap-align: start;
    padding: 18px 18px 16px;
    min-width: 0;
  }
  .mode-card .mc-icon {
    font-size: 1.875rem;
    width: 44px; height: 44px;
    border-radius: 14px;
  }
  .mode-card .mc-name { font-size: 1.0625rem; }
  .mode-card .mc-desc { font-size: .8125rem; line-height: 1.4; }
  .mode-card .mc-cta { font-size: .8125rem; }

  /* ── 2) Section titles : tighter, no awkward count ─── */
  .section-title {
    font-size: 1rem;
    margin: 22px 2px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .section-title .count {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-muted);
    text-transform: uppercase;
  }

  /* ── 3) Daily challenges : CAROUSEL full-bleed ──────── */
  .daily-challenges {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -14px 24px;
    padding: 2px 14px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .daily-challenges::-webkit-scrollbar { display: none; }
  .daily-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    padding: 14px 16px;
    gap: 12px;
    min-width: 0;
  }
  .dc-icon { font-size: 2.125rem; }
  .dc-eyebrow { font-size: .5625rem; letter-spacing: .1em; margin-bottom: 2px; }
  .dc-title { font-size: 1rem; }
  .dc-meta { font-size: .6875rem; margin-top: 2px; }
  .dc-arrow { font-size: 1.5rem; }

  /* ── 4) Marquee : un peu plus discret ─────────────────── */
  .marquee { margin: 0 -14px 22px; border-radius: 0; }
  .marquee-tag { padding: 6px 12px; font-size: .75rem; }

  /* ── 5) Live bar : 3-col grid compact (pas 5 lignes) ── */
  .live-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 10px 6px;
    margin-bottom: 24px;
    border-radius: var(--r-md);
  }
  .live-stat {
    padding: 8px 4px;
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
  .live-stat:nth-child(3n) { border-right: none; }
  .live-stat:nth-child(n+4) {
    border-top: 1px solid var(--border);
    margin-top: 8px;
    padding-top: 12px;
  }
  /* 4ème et 5ème stats sous une ligne, centrées sur 2 cols */
  .live-stat:nth-child(4) { grid-column: 1 / span 2; }
  .live-stat:nth-child(5) { grid-column: 3 / span 1; }
  .live-stat .ls-num { font-size: 1.25rem; }
  .live-stat .ls-lbl { font-size: .5625rem; margin-top: 2px; }

  /* ── 6) Spotlight : compact, pas de margin-bottom énorme */
  .spotlight-card {
    padding: 16px 14px;
    gap: 16px;
    margin-bottom: 24px;
    border-radius: var(--r-lg);
  }
  .spotlight-card h3 { font-size: 1.1875rem; }
  .spotlight-card .sp-meta { font-size: .75rem; }
  .spotlight-pitch { padding: 8px; }

  /* ── 7) Challenges (6 défis) : CAROUSEL full-bleed ────── */
  .challenges {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -14px 24px;
    padding: 2px 14px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .challenges::-webkit-scrollbar { display: none; }
  .challenge {
    flex: 0 0 70%;
    scroll-snap-align: start;
    padding: 16px;
    min-height: 140px;
    min-width: 0;
  }
  .challenge::before { font-size: 100px; right: -16px; bottom: -22px; }
  .challenge .ch-eyebrow { font-size: .625rem; }
  .challenge h3 { font-size: 1.0625rem; }
  .challenge p { font-size: .75rem; }
  .challenge .ch-cta { font-size: .8125rem; }

  /* ── 8) Trending : CAROUSEL full-bleed ─────────────────── */
  .trending {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -14px 24px;
    padding: 2px 14px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trending::-webkit-scrollbar { display: none; }
  .trending-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
    padding: 14px;
    min-width: 0;
  }
  .trending-card .rank { width: 26px; height: 26px; font-size: .75rem; top: 10px; right: 12px; }
  .trending-card h4 { font-size: .9375rem; padding-right: 34px; }

  /* ── 9) Confédérations (home) : grille 3-col compacte ── */
  .home-confeds {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .home-confeds .card {
    padding: 12px 10px;
    text-align: center;
    align-items: center;
    gap: 2px;
  }
  .home-confeds .card .card-icon {
    width: 40px; height: 40px;
    font-size: 1.25rem;
    margin: 0 0 6px;
  }
  .home-confeds .card .card-title {
    font-size: .8125rem;
    text-align: center;
  }
  .home-confeds .card .card-meta {
    font-size: .625rem;
    text-align: center;
  }

  /* ── 10) Derniers XIs publiés (home) : CAROUSEL ────── */
  .home-lineups {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px;
    margin: 0 -14px 24px;
    padding: 2px 14px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .home-lineups::-webkit-scrollbar { display: none; }
  .home-lineups > .lineup-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
    padding: 14px;
    min-width: 0;
  }

  /* ── 11) User stats : 3-col compact ──────────────────── */
  .user-stats { padding: 14px; margin-bottom: 24px; }
  .us-cells {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .us-cell { padding: 10px 6px; }
  .us-em { font-size: 1.25rem; }
  .us-num { font-size: 1.25rem; }
  .us-lbl { font-size: .625rem; }
}

/* ─── ≤400px : très petit écran : on tient quand même ─── */
@media (max-width: 400px) {
  .modes-grid.hero-modes-grid > .mode-card { flex-basis: 84%; }
  .daily-card { flex-basis: 90%; }
  .challenge { flex-basis: 78%; }
  .trending-card { flex-basis: 86%; }
  .home-lineups > .lineup-card { flex-basis: 86%; }
  .hero-v2 h1 { font-size: 1.625rem; }
  .live-stat .ls-num { font-size: 1.0625rem; }
}

/* prefers-reduced-motion : respecte le réglage OS de l'utilisateur.
   Réduit drastiquement les animations / transitions sans tout supprimer
   (sinon les états interactifs deviennent confus). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Le marquee de la home est purement décoratif → on l'arrête */
  .marquee-track {
    animation: none !important;
  }
  /* Et le ballon qui pulse */
  .pulse, .live-dot, .dot.pulse {
    animation: none !important;
  }
}

/* Contraste / lisibilité — placeholder un poil plus dark pour respecter WCAG AA */
::placeholder {
  color: var(--text-muted);
  opacity: 1; /* Firefox baisse à .54 par défaut */
}

/* Focus dans une modal : ring plus visible (fond gris foncé du backdrop) */
.modal :focus-visible,
.pregame-card :focus-visible,
.ob-modal :focus-visible,
.picker-modal :focus-visible {
  outline-color: var(--accent-bright);
}

/* ===========================================================
   OFFLINE BANNER + ERREURS
   =========================================================== */

.offline-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #1f2937;
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 9999;
  max-width: calc(100% - 32px);
  animation: ob-enter .28s var(--ease-spring, ease-out);
}
.offline-banner .ob-icon {
  font-size: 18px;
}
.offline-banner.ob-leaving {
  animation: ob-leave .28s ease-in forwards;
}
@keyframes ob-enter {
  from { transform: translateX(-50%) translateY(40px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}
@keyframes ob-leave {
  to { transform: translateX(-50%) translateY(40px); opacity: 0; }
}

/* Modal-error / modal-success — déjà partiels, on standardise */
.modal-error,
.modal-success {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
.modal-error.show {
  display: block;
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.modal-success.show {
  display: block;
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #86efac;
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE — touch targets ≥ 44×44 (Apple HIG)
   Audit 2026-05-15 : 99 cibles < 44px sur les pages compétition
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .game-tab,
  .team-chip,
  .stage-card .team-chip,
  .picker-card,
  .pc-name,
  .tab-link,
  .tn-link,
  .tn-brand,
  .nav-action,
  .breadcrumb a,
  .crumb,
  .pill,
  .chip,
  .filter-chip,
  .pe-chip,
  .pe-chip-stage {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .game-tab { padding: 10px 14px; }
  .team-chip { padding: 10px 14px; }
  .tn-brand { padding: 8px 6px; }
  /* Boutons icônes-only : carrés 44×44 minimum */
  button[aria-label]:not(.cta):not(.btn):not(.primary) {
    min-width: 44px;
    min-height: 44px;
  }
}