/* ============================================================
   BOULEBRETONNE.FR — DESIGN SYSTEM
   Version 3 · Source unique de vérité pour toute la DA
   ============================================================ */

/* ─── IMPORT POLICES ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {

  /* ─── FONDS ─────────────────────────────────────────────── */
  --bg-page:        #111213;   /* fond page principale */
  --bg-section-alt: #16171a;   /* sections sombres alternées (avec pattern points) — P3 */
  --bg-card:        #1a1b1e;   /* fond cards, modals, panels */
  --bg-card-sombre: #1e1f23;   /* cards sur fond sombre (un cran plus clair) — P3 */
  --bg-elevated:    #222326;   /* fond éléments surélevés */
  --bg-deep:        #0d0e10;   /* fond très sombre (inputs, badges) */
  --bg-ultra:       #0a0b0d;   /* fond le plus sombre */

  /* Pattern points pour sections sombres alternées — P3 */
  --pattern-dots:       radial-gradient(circle, #2a2b2e 1px, transparent 1px);
  --pattern-dots-size:  28px 28px;

  /* ─── COULEUR OR (accent principal) ─────────────────────── */
  --or:             #f5c518;
  --or-2:           #e8f020;
  --or-3:           #c9963a;   /* or foncé / hover */
  --grad-or:        linear-gradient(135deg, #f5c518 0%, #e8f020 100%);
  --grad-or-rev:    linear-gradient(135deg, #e8f020 0%, #f5c518 100%);
  --on-or:          #1a1200;   /* texte sur fond or */
  --bg-or-soft:     rgba(245, 197, 24, 0.08);  /* fond teinté or discret */
  --bg-or-medium:   rgba(245, 197, 24, 0.15);  /* fond teinté or moyen */
  --border-or:      rgba(245, 197, 24, 0.33);  /* bordure or */

  /* Alias spec P2 (compatibilité spec index-refonte) */
  --jaune:          var(--or);
  --jaune-fonce:    #d4a800;   /* jaune foncé pour labels sur fond clair */

  /* Gradient or signature (P3 — restauration de l'effet doré) */
  --gradient-gold:        linear-gradient(135deg, #f5c518 0%, #e8a800 50%, #d4920a 100%);
  --gradient-gold-hover:  linear-gradient(135deg, #ffd700 0%, #f5c518 50%, #e8a800 100%);

  /* ─── FONDS CLAIRS (sections alternées P2) ─────────────── */
  --fond-clair:     #f7f6f2;   /* blanc cassé — features, formats */
  --fond-blanc:     #ffffff;   /* blanc pur — cards et features joueur */
  --bordure-claire: #e8e8e4;   /* bordure cards sur fond clair */
  --on-clair:       #111;      /* texte sur fond clair */

  /* ─── COULEUR CUIVRE (accent consolante) ────────────────── */
  --cuivre:         #e8913a;
  --cuivre-2:       #c97a30;
  --grad-cuivre:    linear-gradient(135deg, #c97a30 0%, #e8913a 100%);
  --on-cuivre:      #1f0d04;
  --bg-cuivre-soft: rgba(232, 145, 58, 0.08);
  --border-cuivre:  rgba(232, 145, 58, 0.33);

  /* ─── COULEURS SÉMANTIQUES ──────────────────────────────── */
  --success:        #22c55e;
  --success-soft:   rgba(34, 197, 94, 0.12);
  --error:          #e24b4a;
  --error-soft:     rgba(226, 75, 74, 0.12);
  --warning:        #e8913a;   /* = cuivre */
  --warning-soft:   rgba(232, 145, 58, 0.12);
  --info:           #5b8dee;
  --info-soft:      rgba(91, 141, 238, 0.12);
  --live-red:       #e24b4a;   /* indicateur LIVE */

  /* ─── COULEURS ROUNDS (tournoi) ─────────────────────────── */
  --round-prelim:   #e8913a;
  --round-r64:      #6b5de8;
  --round-r32:      #5b8dee;
  --round-r16:      #3eb8cf;
  --round-r8:       #22c55e;
  --round-r4:       #f5c518;
  --round-final:    #e24b4a;

  /* ─── TEXTE ──────────────────────────────────────────────── */
  --text-1:         #ffffff;   /* texte principal */
  --text-2:         #888888;   /* texte secondaire */
  --text-3:         #666666;   /* texte tertiaire */
  --text-4:         #444444;   /* texte très discret */

  /* ─── BORDURES ───────────────────────────────────────────── */
  --border:         #2a2b2e;   /* bordure standard */
  --border-2:       #383a3f;   /* bordure plus visible */
  --border-focus:   var(--or); /* bordure focus inputs */

  /* ─── TYPOGRAPHIE ────────────────────────────────────────── */
  --font-display:   'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
  --font-body:      'Outfit', 'Segoe UI', system-ui, sans-serif;

  --text-xs:        0.72rem;   /* 10-11px */
  --text-sm:        0.82rem;   /* 12-13px */
  --text-base:      0.94rem;   /* 14-15px */
  --text-md:        1.05rem;   /* 16px */
  --text-lg:        1.2rem;    /* 18px */
  --text-xl:        1.5rem;    /* 24px */
  --text-2xl:       2rem;      /* 32px */
  --text-3xl:       3rem;      /* 48px */

  /* ─── ESPACEMENTS ────────────────────────────────────────── */
  --space-1:        0.25rem;   /* 4px */
  --space-2:        0.5rem;    /* 8px */
  --space-3:        0.75rem;   /* 12px */
  --space-4:        1rem;      /* 16px */
  --space-5:        1.25rem;   /* 20px */
  --space-6:        1.5rem;    /* 24px */
  --space-8:        2rem;      /* 32px */
  --space-10:       2.5rem;    /* 40px */
  --space-12:       3rem;      /* 48px */

  /* ─── GÉOMÉTRIE ──────────────────────────────────────────── */
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  /* ─── OMBRES ─────────────────────────────────────────────── */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow:         0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:      0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-or:      0 4px 20px rgba(245, 197, 24, 0.25);

  /* ─── TRANSITIONS ────────────────────────────────────────── */
  --tr-fast:        0.12s ease;
  --tr:             0.18s ease;
  --tr-slow:        0.3s ease;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --content-max:    1280px;    /* largeur max contenu standard */
  --content-wide:   1440px;    /* largeur max grands écrans */
  --topbar-h:       72px;      /* hauteur nav universelle (P3 — passé de 60px à 72px) */
  --sidebar-w:      280px;     /* largeur sidebar (admin) */

  /* ─── Z-INDEX ────────────────────────────────────────────── */
  --z-base:         1;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-topbar:       300;
  --z-fab:          500;     /* Floating action buttons (boutons flottants) */
  --z-modal:        1000;
  --z-toast:        2000;
  --z-lightbox:     3000;
}

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

html { font-size: 15px; scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ─── TYPOGRAPHIE BASE ───────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--text-1);
}
a { color: var(--or); text-decoration: none; }
a:hover { color: var(--or-2); }

/* ─── SÉLECTION ──────────────────────────────────────────── */
::selection { background: rgba(245, 197, 24, 0.25); color: var(--text-1); }

/* ─── RESPONSIVE HELPERS ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --topbar-h: 64px;          /* P3 — réduction modérée mobile (au lieu de 52px) */
    --content-max: 100%;
  }
}