/* ============================================================
   DFCO Analytics — Design System
   CSS Vanilla + Variables
   Version: 2.1 — Avril 2026

   TABLE DES MATIÈRES :
   ─────────────────────────────────────────────────────────────
    1.  VARIABLES GLOBALES          — couleurs, typo, espacement, layout
    2.  RESET & BASE                — normalisation navigateurs
    3.  LAYOUT — SHELL DESKTOP      — squelette desktop (sidebar + main)
    4.  SIDEBAR — NAVIGATION        — menu latéral + sous-menu Paramètres
    5.  TOPBAR — BARRE SUPÉRIEURE   — barre de titre / actions (toutes pages)
    6.  AVATAR & PHOTO              — pastilles joueurs (toutes pages avec joueurs)
    7.  CARTES                      — card, stat-card (Dashboard, Fiches joueur)
    8.  TABLEAUX                    — table, tri, case à cocher (Joueurs, Classement, Live…)
    9.  BOUTONS                     — btn, toutes variantes (toutes pages)
   10.  BADGES & STATUTS            — statut joueur, rôle, classement (Joueurs, Groupes…)
   11.  FORMULAIRES                 — input, select, toggle (Login, Profil, Groupes…)
   12.  ONGLETS (TABS)              — tabs (Statistiques, Associations)
   13.  DROPDOWN MULTISELECT        — menu déroulant avec cases à cocher (Joueurs, Stats)
   14.  FILTRES                     — filter-bar simple + filter-panel avancé (Stats, Classement)
   15.  JOUEURS — LISTE & FICHE     — liste, profil, stats + rang (Pages Joueurs)
   16.  SÉANCES — LISTE AVEC JEUX   — accordéon séances + jeux (Page Séances)
   17.  MODE LIVE                   — header chrono, scoreboard, équipes colorées
   18.  COMMENTAIRES                — fil de commentaires (Fiche joueur, Live)
   19.  CLASSEMENT                  — rang, points, tendance (Page Statistiques)
   20.  BARÈME                      — configuration points (Page Barème/Paramètres)
   21.  GROUPES & COULEURS          — drag-handle, hiérarchie, palette couleurs
   22.  NAVIGATION MOBILE           — bottom-nav, mobile-header (Slides 34-36 : vues smartphone)
   23.  RESPONSIVITÉ                — breakpoints 480 / 768 / 1024px
   24.  UTILITAIRES                 — classes helper génériques
   ============================================================ */


/* ──────────────────────────────────────────────────────────────
   1. VARIABLES GLOBALES
   Utilisées partout dans le design system.
   Modifier ici pour changer l'apparence de toute l'application.
   ────────────────────────────────────────────────────────────── */
:root {

  /* ─── Couleurs de marque DFCO ─── */
  --color-red:        #E2001A;
  --color-red-light:  #FEE2E2;
  --color-red-dark:   #B00013;

  /* ─── Noirs et gris foncés (sidebar, textes) ─── */
  --color-black:      #0D0D0D;
  --color-navy:       #1A1A1A;
  --color-navy-mid:   #333333;
  --color-navy-light: #555555;

  /* ─── Blanc et gris clairs (fond, bordures) ─── */
  --color-white:      #FFFFFF;
  --color-gray-50:    #F9FAFB;
  --color-gray-100:   #F2F4F7;
  --color-gray-200:   #D0D5DD;
  --color-gray-400:   #98A2B3;
  --color-gray-600:   #667085;

  /* ─── Couleurs sémantiques ─── */
  --color-success:    #12B76A;
  --color-success-bg: #D1FAE5;
  --color-warning:    #F79009;
  --color-warning-bg: #FEF3C7;
  --color-error:      #E2001A;
  --color-error-bg:   #FEE2E2;
  --color-info:       #0EA5E9;
  --color-info-bg:    #E0F2FE;

  /* ─── Couleurs des rôles utilisateurs ─── */
  /* slides 8-11 (dashboards par rôle), slide 33 (utilisateurs), slide 32 (fiche groupe) */
  --color-role-admin-club:    #E2001A;
  --color-role-admin-groupe:  #F79009;
  --color-role-contributeur:  #12B76A;
  --color-role-lecteur:       #667085;

  /* ─── Couleurs des équipes (Mode Live) ─── */
  /* Gérées via la page Couleurs (slide 29) — slides 19-21 (Live desktop), slide 36 (Live mobile) */
  --color-team-rouge:    #E2001A;  /* Équipe Rouge */
  --color-team-noire:    #1A1A1A;  /* Équipe Noire (ajout v2.1) */
  --color-team-bleue:    #0EA5E9;
  --color-team-verte:    #12B76A;
  --color-team-orange:   #F79009;
  --color-team-violette: #7C3AED;
  --color-team-rose:     #EC4899;
  --color-team-teal:     #14B8A6;

  /* ─── Typographie ─── */
  --font-base:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-display: 'Inter', 'Arial Black', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* ─── Espacement ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ─── Bordures ─── */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;
  --radius-full: 9999px;

  /* ─── Ombres ─── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);

  /* ─── Transitions ─── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ─── Layout ─── */
  --sidebar-width:     240px;
  --topbar-height:     64px;
  --mobile-nav-height: 64px;
  --content-max-width: 1280px;
}


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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-base);
  font-size: var(--font-base);
  color: var(--color-navy);
  background-color: var(--color-gray-100);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-red); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }


/* ──────────────────────────────────────────────────────────────
   3. LAYOUT — SHELL DESKTOP
   Structure : sidebar fixe + contenu principal scrollable.
   Toutes les pages desktop (slides 7-33).
   ────────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background-color: var(--color-navy);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: var(--topbar-height);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: var(--shadow-sm);
}

.page-content {
  flex: 1;
  padding: var(--space-6);
  max-width: var(--content-max-width);
  width: 100%;
}


/* ──────────────────────────────────────────────────────────────
   4. SIDEBAR — NAVIGATION
   Menu latéral vertical avec 5 items fixes + sous-menu Paramètres.

   Structure v3 (toutes pages desktop) :
   ┌──────────────────────┐
   │ DFCO Analytics       │ ← Logo
   │ [Groupe Pro ▼]       │ ← Sélecteur de groupe
   ├──────────────────────┤
   │  Dashboard           │
   │  Joueurs             │
   │  Séances             │
   │  Statistiques        │
   │  Paramètres ▾        │ ← Avec chevron ▸/▾
   │    ├ Types de jeu    │ } Sous-menu visible seulement
   │    ├ Barèmes         │ } quand Paramètres est ouvert
   │    ├ Couleurs        │ } (slides 27-33)
   │    ├ Groupes         │ }
   │    ├ Saisons         │ }
   │    └ Utilisateurs    │ }
   ├──────────────────────┤
   │    [Rôle utilisateur]│ ← Badge de rôle
   └──────────────────────┘
   ────────────────────────────────────────────────────────────── */

/* Logo en haut */
.sidebar-logo {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-navy-mid);
}

.sidebar-logo__text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-black);
  color: var(--color-white);
  letter-spacing: -0.02em;
}

/* Sélecteurs groupe / saison dans la sidebar */
.sidebar-select-wrap {
  margin: var(--space-2) var(--space-3);
  position: relative;
  background-color: var(--color-navy-mid);
  border: 1px solid var(--color-navy-light);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}
.sidebar-select-wrap:hover { background-color: var(--color-navy-light); }
.sidebar-select-wrap--season {
  background-color: rgba(226, 0, 26, 0.12);
  border-color: rgba(226, 0, 26, 0.3);
}
.sidebar-select-wrap--season:hover { background-color: rgba(226, 0, 26, 0.22); }
.sidebar-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  cursor: pointer;
  line-height: 1.4;
}
.sidebar-select option { background-color: #1e2a40; color: var(--color-white); }
.sidebar-select--season {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: #f87171;
}
.sidebar-select__arrow {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  pointer-events: none;
}

/* Liste des 5 items principaux */
.sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  list-style: none;
}

.sidebar-nav__item { margin-bottom: 2px; }

/* Lien de navigation principal */
.sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-gray-400);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  user-select: none;
}
.sidebar-nav__link:hover {
  background-color: var(--color-navy-mid);
  color: var(--color-white);
  text-decoration: none;
}
/* Item actif (page courante) — fond rouge DFCO */
.sidebar-nav__link.active {
  background-color: var(--color-red);
  color: var(--color-white);
}
/* Icône à gauche du lien */
.sidebar-nav__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

/* Badge de rôle en bas de sidebar */
.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-navy-mid);
}

.role-badge-sidebar {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-navy-mid);
  color: var(--color-gray-400);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  width: 100%;
  justify-content: center;
}


/* ──────────────────────────────────────────────────────────────
   5. TOPBAR — BARRE SUPÉRIEURE
   Barre sticky affichant titre de page, sous-titre, saison, notifications, avatar.
   Toutes pages desktop (slides 7-33).
   ────────────────────────────────────────────────────────────── */
.topbar__left { display: flex; flex-direction: column; gap: 2px; }

.topbar__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-black);
  color: var(--color-navy);
  line-height: 1.2;
}

.topbar__subtitle { font-size: var(--text-sm); color: var(--color-gray-600); }

.topbar__right { display: flex; align-items: center; gap: var(--space-3); }

.topbar__season {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  font-weight: var(--font-medium);
}

.topbar__notifications {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-100);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast);
}
.topbar__notifications:hover { background-color: var(--color-gray-200); }

.notification-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  background-color: var(--color-red);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-white);
}


/* ──────────────────────────────────────────────────────────────
   6. AVATAR & PHOTO
   Pastilles rondes représentant les joueurs ou utilisateurs.
   Priorité d'affichage : photo > numéro de maillot > initiales.
   Toutes les pages avec joueurs (slides 13-14, 19-21, 23-25, 29, 32-36).
   ────────────────────────────────────────────────────────────── */
.avatar {
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  color: var(--color-white);
  flex-shrink: 0;
  overflow: hidden;
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Tailles */
.avatar--xs  { width: 24px;  height: 24px;  font-size: 10px; }
.avatar--sm  { width: 32px;  height: 32px;  font-size: 12px; }
.avatar--md  { width: 40px;  height: 40px;  font-size: 14px; }
.avatar--lg  { width: 56px;  height: 56px;  font-size: 18px; }
.avatar--xl  { width: 80px;  height: 80px;  font-size: 24px; }
.avatar--2xl { width: 112px; height: 112px; font-size: 32px; }

/* Couleurs génériques (rôles, équipes) */
.avatar--red    { background-color: var(--color-red);        --ac: var(--color-red); }
.avatar--orange { background-color: var(--color-warning);    --ac: var(--color-warning); }
.avatar--green  { background-color: var(--color-success);    --ac: var(--color-success); }
.avatar--blue   { background-color: var(--color-info);       --ac: var(--color-info); }
.avatar--gray   { background-color: var(--color-gray-600);   --ac: var(--color-gray-600); }
.avatar--purple { background-color: #7C3AED;                 --ac: #7C3AED; }
.avatar--teal   { background-color: var(--color-team-teal);  --ac: var(--color-team-teal); }
.avatar--black  { background-color: var(--color-team-noire); --ac: var(--color-team-noire); }

/* Couleurs par statut joueur (clé directe du modèle) */
.avatar--disponible      { background-color: #059669; --ac: #059669; }
.avatar--blesse          { background-color: #DC2626; --ac: #DC2626; }
.avatar--reathletisation { background-color: #D97706; --ac: #D97706; }
.avatar--malade          { background-color: #EA580C; --ac: #EA580C; }
.avatar--selection       { background-color: #2563EB; --ac: #2563EB; }
.avatar--absent          { background-color: #6B7280; --ac: #6B7280; }
.avatar--prete           { background-color: #6D28D9; --ac: #6D28D9; }

/* Anneau coloré quand l'avatar affiche une photo (box-shadow est hors overflow:hidden) */
.avatar--has-photo { box-shadow: 0 0 0 2px var(--ac, #6B7280); }

.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Upload photo (slide 14 — fiche joueur) */
.photo-upload { position: relative; display: inline-block; cursor: pointer; }
.photo-upload .avatar { transition: opacity var(--transition-fast); }
.photo-upload:hover .avatar { opacity: 0.85; }

.photo-upload__overlay {
  position: absolute;
  bottom: 0; right: 0;
  width: 28px; height: 28px;
  background-color: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.photo-upload__overlay svg { width: 14px; height: 14px; color: var(--color-gray-600); }


/* ──────────────────────────────────────────────────────────────
   7. CARTES
   card : Dashboard (slide 7), Stats (slides 23-25).
   stat-card + stat-card__rank : Fiche joueur (slide 14).
   ────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
}

.card--flat { box-shadow: none; border: 1px solid var(--color-gray-200); }

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card__title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-navy); }
.card__subtitle { font-size: var(--text-sm); color: var(--color-gray-600); margin-top: 2px; }

/* KPI card (Dashboard slide 7, Fiche joueur slide 14) */
.stat-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-black);
  color: var(--color-navy);
  line-height: 1;
}

.stat-card__label { font-size: var(--text-sm); color: var(--color-gray-600); }

/* Rang du joueur pour cette stat — slide 14 : ex "2e / 21" */
.stat-card__rank {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  font-weight: var(--font-medium);
  margin-top: 2px;
}

.stat-card--red    .stat-card__value { color: var(--color-red); }
.stat-card--green  .stat-card__value { color: var(--color-success); }
.stat-card--orange .stat-card__value { color: var(--color-warning); }


/* ──────────────────────────────────────────────────────────────
   8. TABLEAUX
   Slides : 13 (Joueurs), 14 (Fiche), 17 (Séances), 21 (Live résultats),
            23-24 (Classement / Comparaison), 27 (Types de jeu),
            30 (Groupes), 31 (Saisons), 32 (Fiche groupe), 33 (Utilisateurs).
   ────────────────────────────────────────────────────────────── */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
  font-size: var(--text-sm);
}

.table thead tr { background-color: var(--color-navy); color: var(--color-white); }

.table thead th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
}

.table thead th:first-child { border-radius: var(--radius-lg) 0 0 0; }
.table thead th:last-child  { border-radius: 0 var(--radius-lg) 0 0; }

/* Colonne triable (icône ↕ ajoutée dans le texte par JS) */
.table thead th.sortable { cursor: pointer; transition: background-color var(--transition-fast); }
.table thead th.sortable:hover { background-color: var(--color-navy-mid); }
.table thead th.sort-active { color: var(--color-red-light); }

/* Icône de tri (span .table-sort-icon ou ↕ inline) */
.table-sort-icon {
  display: inline-block;
  margin-left: 4px;
  font-size: var(--text-xs);
  opacity: 0.7;
  vertical-align: middle;
}
.table thead th.sort-active .table-sort-icon { opacity: 1; color: var(--color-red-light); }

/* Corps */
.table tbody tr {
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color var(--transition-fast);
}
.table tbody tr:hover { background-color: var(--color-gray-50); }
.table tbody tr:nth-child(even) { background-color: var(--color-gray-50); }
.table tbody tr:nth-child(even):hover { background-color: var(--color-gray-100); }
.table tbody tr.row-checked { background-color: #EFF6FF; }

.table tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-navy);
  vertical-align: middle;
}

.table--compact thead th,
.table--compact tbody td { padding: var(--space-2) var(--space-3); }

/* Case à cocher de sélection (slide 24 — comparaison joueurs) */
.table-checkbox { width: 16px; height: 16px; accent-color: var(--color-red); cursor: pointer; }

/* Colonne Tendance (slide 24) */
.trend-up   { color: var(--color-success); font-weight: var(--font-bold); }
.trend-down { color: var(--color-error);   font-weight: var(--font-bold); }
.trend-flat { color: var(--color-gray-400); }


/* ──────────────────────────────────────────────────────────────
   9. BOUTONS
   Toutes les pages avec interactions utilisateur.
   ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-base);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1.5;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tailles */
.btn--sm   { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--lg   { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn--full { width: 100%; }

/* Variantes */
/* Primaire — action principale (Connexion, Enregistrer, Créer…) */
.btn--primary   { background-color: var(--color-red); color: var(--color-white); }
.btn--primary:hover { background-color: var(--color-red-dark); }

/* Secondaire — action secondaire (Annuler, Éditer…) */
.btn--secondary { background-color: var(--color-gray-100); color: var(--color-navy); }
.btn--secondary:hover { background-color: var(--color-gray-200); }

/* Contour */
.btn--outline { background-color: transparent; color: var(--color-navy); border: 1.5px solid var(--color-navy); }
.btn--outline:hover { background-color: var(--color-gray-100); }

/* Fantôme — ex: "⏸ Pause" (slide 20), Réinitialiser filtres */
.btn--ghost { background-color: transparent; color: var(--color-gray-600); }
.btn--ghost:hover { background-color: var(--color-gray-100); }

/* Danger — action destructrice (Désactiver, Supprimer, Retirer) */
.btn--danger { background-color: var(--color-red-light); color: var(--color-red-dark); }
.btn--danger:hover { background-color: #fecaca; }

/* Succès — réactivation (slide 32 : bouton "Activer" un joueur désactivé) */
.btn--success { background-color: var(--color-success-bg); color: #065f46; }
.btn--success:hover { background-color: #a7f3d0; }


/* ──────────────────────────────────────────────────────────────
   10. BADGES & STATUTS
   Slides : 13 (Joueurs), 14 (Fiche), 17 (Séances), 27 (Types de jeu),
            28 (Barèmes), 30 (Groupes), 31 (Saisons), 32 (Fiche groupe), 33 (Utilisateurs).
   ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

/* Chips joueur glisser-déposer (Équipes, Convocation match) */
.dnd-pool {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 52px; padding: var(--space-2);
  border: 2px dashed var(--color-gray-200); border-radius: 8px;
  transition: border-color .15s, background .15s;
}
.dnd-pool--over { border-color: var(--color-navy); background: #eef2ff; }

.dnd-team-zone {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 90px; padding: var(--space-2);
  transition: background .15s;
}
.dnd-team-zone--over { background: #eef2ff !important; }

.dnd-hint {
  text-align: center; color: var(--color-gray-300);
  font-size: var(--text-sm); padding: var(--space-4) 0;
}

.player-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-gray-100); border: 1px solid var(--color-gray-200);
  border-radius: 20px; padding: 3px 10px 3px 6px;
  font-size: var(--text-sm); cursor: grab; user-select: none;
  white-space: nowrap;
}
.player-chip:active { cursor: grabbing; opacity: .7; }

.player-chip--team {
  border-radius: 6px; width: 100%; box-sizing: border-box;
  background: #fff; border-color: var(--color-gray-200);
}

.chip-num {
  background: var(--color-gray-300); color: var(--color-gray-700);
  border-radius: 10px; padding: 0 5px;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}

.chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--color-gray-400); font-size: 16px;
  line-height: 1; padding: 0; flex-shrink: 0;
}
.chip-x:hover { color: var(--color-red); }

/* Clignotement (statut "en cours" liste des matchs, pastille live sidebar) */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.badge-en-cours { animation: live-pulse 1.4s infinite; }

/* Statuts joueurs (slides 13, 14, 32) */
.badge--actif    { background-color: var(--color-success-bg); color: #065f46; }
.badge--blesse   { background-color: var(--color-warning-bg); color: #92400e; }
.badge--inactif  { background-color: var(--color-gray-100);   color: var(--color-gray-600); }
/* Désactivé par admin (slide 32 : colonne Statut) */
.badge--desactive { background-color: #f3f4f6; color: var(--color-gray-600); border: 1px solid var(--color-gray-200); }

/* Type de jeu (slide 17, 28) */
.badge--classant     { background-color: var(--color-error-bg);   color: var(--color-red-dark); }
.badge--non-classant { background-color: var(--color-gray-100);   color: var(--color-gray-600); }

/* Saisons (slide 31) */
.badge--active   { background-color: var(--color-success-bg); color: #065f46; }
.badge--archivee { background-color: var(--color-gray-100);   color: var(--color-gray-600); }

/* Rôles utilisateurs (slides 8-11, 33, 32) */
.badge--role-admin-club    { background-color: #FEE2E2; color: var(--color-red-dark); }
.badge--role-admin-groupe  { background-color: #FEF3C7; color: #92400e; }
.badge--role-contributeur  { background-color: var(--color-success-bg); color: #065f46; }
.badge--role-lecteur       { background-color: var(--color-gray-100); color: var(--color-gray-600); }

/* Inscription groupe (slide 32) */
.badge--inscription-ouverte { background-color: var(--color-success-bg); color: #065f46; }
.badge--inscription-fermee  { background-color: var(--color-gray-100); color: var(--color-gray-600); }

/* Rang sous chaque stat (slide 14 — ex: "2e / 21") */
.stat-rank { display: inline-block; font-size: var(--text-xs); color: var(--color-gray-400); font-weight: var(--font-medium); margin-top: 3px; }
.stat-rank--first { color: var(--color-red); font-weight: var(--font-bold); }


/* ──────────────────────────────────────────────────────────────
   11. FORMULAIRES
   Slides : 5-6 (Login), 14 (Fiche joueur), 18 (Créer séance),
            19 (Config jeu), 28 (Barème), 32 (Fiche groupe).
   ────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: var(--space-1); }
.form-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-600); }

.radio-group,
.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.radio-group label,
.checkbox-group label { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--color-gray-600); cursor: pointer; white-space: nowrap; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-base);
  color: var(--color-navy);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  line-height: 1.5;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.12);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--color-gray-400); }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.form-textarea { resize: vertical; min-height: 80px; }

/* Texte d'aide sous un champ (slide 32 : explication "Inscription ouverte") */
.form-help,
.inscription-info {
  font-size: var(--text-xs);
  color: var(--color-gray-600);
  margin-top: var(--space-1);
  line-height: 1.4;
  font-style: italic;
}

/* Toggle on/off (slides 18, 32…) */
.toggle { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track { width: 44px; height: 24px; background-color: var(--color-gray-200); border-radius: var(--radius-full); transition: background-color var(--transition-fast); position: relative; flex-shrink: 0; }
.toggle__input:checked + .toggle__track { background-color: var(--color-red); }
.toggle__knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: var(--color-white); border-radius: var(--radius-full); transition: transform var(--transition-fast); box-shadow: var(--shadow-sm); }
.toggle__input:checked ~ .toggle__track .toggle__knob,
.toggle__input:checked + .toggle__track .toggle__knob { transform: translateX(20px); }
.toggle__label { font-size: var(--text-sm); color: var(--color-navy); font-weight: var(--font-medium); }


/* ──────────────────────────────────────────────────────────────
   12. ONGLETS (TABS)
   Slides : 23 (Classement), 24 (Progression), 25 (Associations).
   ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 6px;
  padding: 0 0 0 2px;
  border-bottom: 2px solid var(--color-gray-200);
  max-width: 100%;
  overflow-x: auto;
}

.tab {
  position: relative;
  top: 2px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  cursor: pointer;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-gray-50);
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.tab:hover { color: var(--color-navy); background: var(--color-gray-100); }
.tab.active {
  color: var(--color-white);
  font-weight: var(--font-semibold);
  background: var(--color-red);
  border-color: var(--color-red);
  border-bottom: 2px solid var(--color-white);
  box-shadow: 0 -2px 6px rgba(226, 0, 26, 0.25);
}

.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: var(--space-5);
}

/* Couleurs d'identification des thèmes de Paramètres — retrouvées à la fois sur les cartes
   de la page d'accueil et sur les onglets de navigation, pour s'y retrouver malgré le fait
   que TOUTES les pages (tous thèmes confondus) apparaissent ensemble dans les onglets. */
:root {
  --color-theme-jeux:         #0EA5E9;
  --color-theme-organisation: #7C3AED;
  --color-theme-match:        #F79009;
  --color-theme-evaluation:   #12B76A;
  --color-theme-api:          #DC2626;
  --color-theme-championnat:  #2563EB;
}

/* Onglets de navigation entre TOUTES les pages de Paramètres (parametres_tabs.html) — ce sont
   de vrais liens (chargement de page), pas de bascule JS. Silhouette de vrai onglet (coins
   arrondis en haut seulement, posés sur une ligne de base commune) — plus compacts qu'un
   bouton normal, et chaque onglet reçoit la couleur de son thème via --tab-color, seul repère
   qui les différencie puisque tous les thèmes sont mélangés dans la même barre. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3px;
  border-bottom: 2px solid var(--color-gray-200);
  margin-bottom: var(--space-5);
}
.settings-tab {
  position: relative;
  top: 1px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-bottom: none;
  border-top: 2px solid var(--tab-color, var(--color-gray-300));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.settings-tab:hover { background: var(--color-white); color: var(--color-navy); }
.settings-tab.active {
  background: var(--tab-color, var(--color-black));
  border-color: var(--tab-color, var(--color-black));
  color: var(--color-white);
  font-weight: var(--font-semibold);
  padding-bottom: 6px;
}
.settings-back-link {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  text-decoration: none;
  margin-bottom: var(--space-2);
}
.settings-back-link:hover { color: var(--color-navy); }

/* Page d'accueil des paramètres : une carte visuelle par PAGE (pas par thème), regroupées et
   colorées par thème via --card-color inline. */
.page-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.page-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--card-color, var(--color-gray-200));
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-fast);
}
.page-card:hover { border-color: var(--card-color, var(--color-black)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.page-card__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--card-color, var(--color-gray-400)) 14%, var(--color-white));
  color: var(--card-color, var(--color-navy));
  flex-shrink: 0;
}
.page-card__nom { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-navy); }


/* ──────────────────────────────────────────────────────────────
   13. DROPDOWN MULTISELECT
   Menu déroulant avec cases à cocher.
   slide 13 : filtre statut joueurs.
   slides 23-24 : filtre Type de jeu.
   slide 28 : sélecteur de type de jeu dans le barème.
   ────────────────────────────────────────────────────────────── */
.dropdown-multiselect { position: relative; display: inline-block; }

.dropdown-multiselect__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  font-size: var(--text-sm);
  font-family: var(--font-base);
  color: var(--color-navy);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-width: 160px;
}
.dropdown-multiselect__trigger:hover { border-color: var(--color-gray-400); }
.dropdown-multiselect--open .dropdown-multiselect__trigger {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px rgba(226, 0, 26, 0.12);
  outline: none;
}

.dropdown-multiselect__arrow {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  transition: transform var(--transition-fast);
}
.dropdown-multiselect--open .dropdown-multiselect__arrow { transform: rotate(180deg); }

.dropdown-multiselect__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background-color: var(--color-red);
  color: var(--color-white);
  border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--font-bold); line-height: 1;
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  z-index: 200;
  min-width: 220px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.dropdown-multiselect--open .dropdown-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-panel--right { left: auto; right: 0; }

.dropdown-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.dropdown-panel__footer { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-gray-100); display: flex; justify-content: flex-end; }

.dropdown-panel__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-size: var(--text-sm); color: var(--color-navy);
}
.dropdown-panel__item:hover { background-color: var(--color-gray-50); }
.dropdown-panel__item:has(input:checked) { background-color: #fff5f5; }
.dropdown-panel__item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-red); cursor: pointer; flex-shrink: 0; }
.dropdown-panel__divider { height: 1px; background-color: var(--color-gray-100); margin: var(--space-1) 0; }


/* ──────────────────────────────────────────────────────────────
   14. FILTRES
   A) Barre simple — slides 13 (Joueurs), 17 (Séances)
   B) Panneau avancé — slides 23 (Classement), 24 (Progression)
   ────────────────────────────────────────────────────────────── */

/* ─── A) Barre simple ─── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}

.filter-select {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background-color: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23667085' d='M5 7L1 2.5h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* ─── B) Panneau de filtres avancés (slides 23, 24) ─── */
/* Filtres : Non-classant☑, Buts CSC, Gardien, Type de jeu▼, Période▼,
             Tps jeu min/max, Participations min/max, Réinitialiser */
.filter-panel {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.filter-panel__title {
  font-size: var(--text-xs); font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.filter-panel__row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.filter-panel__separator { width: 1px; height: 24px; background-color: var(--color-gray-200); flex-shrink: 0; }

/* Plages min/max (Tps jeu, Participations) */
.filter-range { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.filter-range__label { color: var(--color-gray-600); font-weight: var(--font-medium); white-space: nowrap; }
.filter-range__input {
  width: 56px; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-gray-200); border-radius: var(--radius-sm);
  font-size: var(--text-xs); text-align: center; color: var(--color-navy);
  background-color: var(--color-white);
}
.filter-range__input:focus { border-color: var(--color-red); outline: none; }
.filter-range__dash { color: var(--color-gray-400); }

/* Case à cocher avec label inline (Non-classant, Buts CSC, Gardien) */
.filter-checkbox { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--color-navy); white-space: nowrap; }
.filter-checkbox input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--color-red); cursor: pointer; }

/* Bouton de remise à zéro */
.filter-reset {
  font-size: var(--text-xs); color: var(--color-gray-400);
  text-decoration: underline; cursor: pointer;
  background: none; border: none; padding: 0;
  transition: color var(--transition-fast); white-space: nowrap;
}
.filter-reset:hover { color: var(--color-red); }


/* ──────────────────────────────────────────────────────────────
   15. JOUEURS — LISTE & FICHE
   slide 13 : liste avec statuts et multiselect
   slide 14 : fiche avec photo, stats et rang dans l'équipe
   ────────────────────────────────────────────────────────────── */
.player-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100);
  transition: background-color var(--transition-fast);
}
.player-row:hover { background-color: var(--color-gray-50); }
.player-row__info { flex: 1; min-width: 0; }
.player-row__name { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-row__meta { font-size: var(--text-xs); color: var(--color-gray-600); margin-top: 2px; }

.player-profile { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: start; }

.player-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

.stat-item {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: 2px;
}
.stat-item__label { font-size: var(--text-xs); color: var(--color-gray-600); }
.stat-item__value { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-navy); }
/* Rang du joueur pour cette stat (slide 14) — ex: "2e / 21" */
.stat-item__rank  { font-size: var(--text-xs); color: var(--color-gray-400); margin-top: 1px; }


/* ──────────────────────────────────────────────────────────────
   16. SÉANCES — LISTE AVEC JEUX
   slide 16 : liste des séances
   slide 17 : accordéon séances + jeux inline + badges statuts
   slide 18 : formulaire création séance (choix de jeux avec coches)
   ────────────────────────────────────────────────────────────── */
.seance-group {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.seance-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: background-color var(--transition-fast);
}
.seance-header:hover { background-color: var(--color-gray-50); }
.seance-header.expanded { border-bottom-color: var(--color-gray-100); }
.seance-header__toggle { color: var(--color-red); font-size: var(--text-xs); margin-right: var(--space-2); transition: transform var(--transition-fast); }
.seance-header__date   { font-weight: var(--font-bold); font-size: var(--text-sm); color: var(--color-navy); }
.seance-header__moment { font-size: var(--text-sm); color: var(--color-gray-600); margin-left: var(--space-3); }
.seance-header__count  { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-navy); background-color: var(--color-gray-100); padding: 2px var(--space-2); border-radius: var(--radius-full); }

.jeu-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8);
  border-bottom: 1px dashed var(--color-gray-100);
  background-color: var(--color-gray-50);
}
.jeu-row:last-child { border-bottom: none; }
.jeu-row__indicator { width: 3px; height: 100%; border-radius: var(--radius-full); flex-shrink: 0; }
.jeu-row__type { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-navy); flex: 1; }
.jeu-row__meta { font-size: var(--text-xs); color: var(--color-gray-600); }


/* ──────────────────────────────────────────────────────────────
   17. MODE LIVE
   slide 19 : configuration des jeux (pastilles de joueurs)
   slide 20 : chrono + scoreboard + bouton Pause
   slide 21 : résultats finaux (colonnes Arrêts/Buts enc. si gardien)
   slide 36 : version mobile du live
   ────────────────────────────────────────────────────────────── */
.live-header {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

/* Chronomètre (slide 20) — chiffres de largeur fixe */
.live-timer {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-black);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.live-controls { display: flex; align-items: center; gap: var(--space-2); }

.live-scoreboard { display: grid; gap: var(--space-3); }
.live-scoreboard--4 { grid-template-columns: repeat(4, 1fr); }
.live-scoreboard--2 { grid-template-columns: repeat(2, 1fr); }

/* Carte d'équipe dans le scoreboard */
.team-score { border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; color: var(--color-white); }

/* Couleurs d'équipe — gérées via page Couleurs (slide 29) */
.team-score--rouge    { background-color: var(--color-team-rouge); }
.team-score--noire    { background-color: var(--color-team-noire); }
.team-score--bleue    { background-color: var(--color-team-bleue); }
.team-score--verte    { background-color: var(--color-team-verte); }
.team-score--orange   { background-color: var(--color-team-orange); }
.team-score--violette { background-color: var(--color-team-violette); }
.team-score--rose     { background-color: var(--color-team-rose); }
.team-score--teal     { background-color: var(--color-team-teal); }

.team-score__name  { font-size: var(--text-sm); font-weight: var(--font-bold); opacity: 0.9; }
.team-score__value { font-family: var(--font-display); font-size: 3rem; font-weight: var(--font-black); line-height: 1; margin: var(--space-2) 0; }

/* Résultat final ex: "Équipe Rouge  2 – 1  Équipe Noire" (slide 21) */
.live-result {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  font-family: var(--font-display); font-weight: var(--font-black); font-size: var(--text-2xl);
  padding: var(--space-3);
  background-color: var(--color-navy); color: var(--color-white);
  border-radius: var(--radius-lg); margin-bottom: var(--space-4);
}
.live-result__sep { color: var(--color-gray-400); font-weight: var(--font-normal); }


/* ──────────────────────────────────────────────────────────────
   18. COMMENTAIRES
   slide 14 : commentaires sur la fiche joueur
   slide 17 : notes de séance
   ────────────────────────────────────────────────────────────── */
.comment-list { display: flex; flex-direction: column; gap: var(--space-3); }
.comment-item {
  display: flex; gap: var(--space-3); padding: var(--space-3);
  background-color: var(--color-gray-50); border-radius: var(--radius-md);
  border-left: 3px solid var(--color-gray-200);
}
.comment-item--performance { border-left-color: var(--color-success); }
.comment-item--tactique    { border-left-color: var(--color-warning); }
.comment-item--general     { border-left-color: var(--color-gray-400); }
.comment-item__body { flex: 1; }
.comment-item__text { font-size: var(--text-sm); color: var(--color-navy); line-height: 1.5; }
.comment-item__meta { font-size: var(--text-xs); color: var(--color-gray-600); margin-top: var(--space-1); display: flex; gap: var(--space-3); }


/* ──────────────────────────────────────────────────────────────
   19. CLASSEMENT
   slide 23 : classement trié pts → victoires → buts
   slide 24 : comparaison joueurs + graphe de progression
   ────────────────────────────────────────────────────────────── */
.rank-number { font-family: var(--font-display); font-weight: var(--font-black); min-width: 28px; text-align: center; }
.rank-number--1 { color: var(--color-red); font-size: var(--text-lg); }
.rank-number--2 { color: var(--color-warning); }
.rank-number--3 { color: var(--color-gray-600); }

.pts-total { font-weight: var(--font-black); color: var(--color-navy); font-size: var(--text-base); }

/* Pastille de tendance (slides 24-25) */
.trend-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-bold); }
.trend-badge--up   { background-color: var(--color-success-bg); color: var(--color-success); }
.trend-badge--down { background-color: var(--color-red-light);  color: var(--color-red); }
.trend-badge--flat { background-color: var(--color-gray-100);   color: var(--color-gray-400); }


/* ──────────────────────────────────────────────────────────────
   20. BARÈME — CONFIGURATION DES POINTS
   slide 28 : configuration du barème (Paramètres > Barèmes).
   Deux catégories distinctes : Classement (1er→4e) et Bonus (Joker, Clean sheet).
   ────────────────────────────────────────────────────────────── */
.bareme-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

/* Catégorie Classement (1er, 2e, 3e, 4e) — bordure gauche rouge */
.bareme-item--position { background-color: #fff5f5; border-left: 3px solid var(--color-red); }

/* Catégorie Bonus (Joker +1, Clean sheet +2) — bordure gauche teal */
.bareme-item--bonus    { background-color: #f0fdfa; border-left: 3px solid var(--color-team-teal); }

.bareme-item__label    { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-navy); }
.bareme-item__sublabel { font-size: var(--text-xs); color: var(--color-gray-600); margin-top: 2px; }

.bareme-item__input {
  width: 72px; text-align: center; font-weight: var(--font-bold);
  padding: var(--space-1) var(--space-2);
  border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-navy);
}
.bareme-item__input:focus { border-color: var(--color-red); outline: none; }

.bareme-section-title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-navy); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); margin-top: var(--space-4); padding-left: var(--space-1); }


/* ──────────────────────────────────────────────────────────────
   21. GROUPES & COULEURS
   ─── Groupes (Paramètres > Groupes, slides 30 et 32)
   ─── Couleurs (Paramètres > Couleurs, slide 29)
   ────────────────────────────────────────────────────────────── */

/* Bandeau de groupe avec poignée de drag-and-drop (slide 30) */
.group-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  transition: box-shadow var(--transition-fast);
}
.group-row:hover { box-shadow: var(--shadow-md); }
.group-row--drag-over { border: 2px dashed var(--color-red); background-color: #fff5f5; }

/* Poignée glisser-déposer (⠿ ou ≡) à gauche du bandeau groupe (slide 30) */
.drag-handle {
  display: flex; align-items: center; justify-content: center;
  width: 24px; flex-shrink: 0;
  cursor: grab;
  color: var(--color-gray-400);
  font-size: var(--text-base);
  padding: var(--space-2) 0;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.drag-handle:hover { color: var(--color-gray-600); background-color: var(--color-gray-100); }
.drag-handle:active { cursor: grabbing; }
.drag-handle::before { content: "⠿"; line-height: 1; }

/* Flèche de hiérarchie entre groupes (slide 30) */
.group-hierarchy-arrow { display: flex; align-items: center; padding-left: var(--space-8); color: var(--color-gray-400); font-size: var(--text-xs); margin-bottom: var(--space-1); }
.group-hierarchy-arrow::before { content: "↳"; margin-right: var(--space-2); }

.group-row__name { font-weight: var(--font-bold); font-size: var(--text-sm); color: var(--color-navy); }
.group-row__meta { font-size: var(--text-xs); color: var(--color-gray-600); margin-top: 2px; }

/* Fiche groupe (slide 32) */
.group-detail__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4);
  background-color: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--color-gray-100);
}
.group-detail__name { font-size: var(--text-xl); font-weight: var(--font-black); color: var(--color-navy); }

/* Info-bulle toggle "Inscription ouverte" (slide 32) */
.inscription-info { font-size: var(--text-xs); color: var(--color-gray-600); line-height: 1.4; font-style: italic; margin-top: var(--space-1); max-width: 260px; }

/* ─── Grille de couleurs (slide 29 — Paramètres > Couleurs) ─── */
/* Chaque couleur = une carte avec swatch coloré sur la gauche + nom + hex + actions */
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.color-card {
  display: flex;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

/* Bande colorée (swatch) à gauche de la carte */
.color-card__swatch {
  width: 10px;
  flex-shrink: 0;
  /* La couleur est définie inline via style="background-color: #XXXXXX" */
}

.color-card__body {
  padding: var(--space-3);
  flex: 1;
}

.color-card__name { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-navy); }
.color-card__hex  { font-size: var(--text-xs); color: var(--color-gray-600); font-family: var(--font-mono); margin-top: 2px; }

.color-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

/* ─── Types de jeu (slide 27 — Paramètres > Types de jeu) ─── */
/* Liste CRUD simple des types de jeux (Rondo 5c5, 11c11, etc.)
   Chaque type peut être édité ou supprimé. */
.game-type-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray-100);
}
.game-type-row__name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-navy); flex: 1; }
.game-type-row__count { font-size: var(--text-xs); color: var(--color-gray-600); }


/* ──────────────────────────────────────────────────────────────
   22. NAVIGATION MOBILE
   Slides 34 (Dashboard), 35 (Joueurs), 36 (Live) — vues smartphone.
   ────────────────────────────────────────────────────────────── */

/* Caché par défaut sur desktop — affiché via @media ≤768px */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mobile-nav-height);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-gray-200);
  z-index: 150;
  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05);
}

.mobile-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; color: var(--color-gray-400); font-size: 10px; font-weight: var(--font-medium);
  text-decoration: none; transition: color var(--transition-fast);
}
.mobile-nav__item.active { color: var(--color-red); }
.mobile-nav__item svg { width: 22px; height: 22px; }

/* Caché par défaut sur desktop — affiché via @media ≤768px */
.mobile-header {
  display: none;
  background-color: var(--color-navy); color: var(--color-white);
  height: var(--topbar-height);
  align-items: center; justify-content: space-between;
  padding: 0 var(--space-4);
  position: sticky; top: 0; z-index: 50;
}

.mobile-header__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-black); color: var(--color-white); }

.hamburger {
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; padding: var(--space-2);
  background: none; border: none;
  transition: gap var(--transition-fast);
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background-color: var(--color-white); border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
  transform-origin: center;
}
/* Animation hamburger → croix quand sidebar ouverte */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay semi-transparent derrière la sidebar tiroir */
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 190;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Bouton de fermeture dans la sidebar (mobile uniquement) */
.sidebar-close {
  display: none;
  background: none; border: none;
  color: var(--color-gray-400);
  font-size: 1.3rem; line-height: 1;
  padding: var(--space-3) var(--space-4) var(--space-1);
  cursor: pointer; align-self: flex-end;
  transition: color var(--transition-fast);
}
.sidebar-close:hover { color: var(--color-white); }


/* ──────────────────────────────────────────────────────────────
   23. RESPONSIVITÉ
   ────────────────────────────────────────────────────────────── */

/* ── Layouts de page (desktop par défaut) ── */
/* Liste + panneau latéral (360 px) : barèmes, groupes, saisons, types de jeu,
   utilisateurs, séances, jeux */
.layout-list-form {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-6);
  align-items: start;
}
/* Variante panneau plus large (380 px) : barèmes, utilisateurs */
.layout-list-form--wide { grid-template-columns: 1fr 380px; }
/* Quand le panneau latéral est absent ({% if %} non rendu), 1 seul enfant → pleine largeur */
.layout-list-form > :only-child { grid-column: 1 / -1; }
/* BUG-06 : min-width:0 permet à overflow-x:auto de fonctionner dans les cellules de grille */
.layout-list-form > *, .layout-list-form--wide > * { min-width: 0; }

/* Formulaire 2 colonnes égales */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Grille KPI (4 cartes) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Contenu principal + colonne droite */
.layout-main-aside {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

/* Statistiques : filtres sidebar (220 px) + résultats */
.layout-stats {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  align-items: start;
}
/* Panneau de filtres des statistiques : sticky sur desktop, normal sur mobile */
.stats-filter-card {
  position: sticky;
  top: var(--space-4);
}

/* Grille de stats joueur 6 colonnes */
.stats-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Grille de stats joueur 3 colonnes */
.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}


/* Tablette (769px–1024px) : sidebar icônes seulement */
@media (max-width: 1024px) and (min-width: 769px) {
  .sidebar { width: 64px; overflow: hidden; }

  .sidebar-logo,
  .sidebar-nav__link span,
  .sidebar-nav__link > svg + span,
  .sidebar-select-wrap,
  .role-badge-sidebar,
  .sidebar-footer,
  .viewport-sim { display: none; }

  .main-content { margin-left: 64px; }
  .sidebar-nav__link { justify-content: center; padding: var(--space-3); }

  /* Grilles : 2 colonnes sur tablette */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .layout-main-aside { grid-template-columns: 1fr; }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
  /* Sidebar : tiroir latéral glissant */
  .sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 200;
    max-width: 85vw;
    overflow-x: hidden;
  }
  .sidebar.sidebar--open { transform: translateX(0); }
  .sidebar-overlay { display: block; }
  .sidebar-overlay.active { opacity: 1; pointer-events: auto; }

  /* Navigation mobile */
  .mobile-header { display: flex; }
  .mobile-nav    { display: flex; }

  /* Layout général */
  .main-content { margin-left: 0; padding-bottom: var(--mobile-nav-height); }
  .topbar { display: none; }
  .page-content { padding: var(--space-4); }

  /* Layouts de page → colonne unique */
  .layout-list-form,
  .layout-list-form--wide,
  .layout-stats { grid-template-columns: 1fr; }

  /* Dashboard : widgets en colonne sur mobile */
  #widget-container { flex-direction: column !important; }
  #widget-container .wcol { width: 100% !important; flex: none !important; }
  /* Filtre stats : désactiver le sticky + contraindre la largeur sur mobile */
  .stats-filter-card { position: static; overflow-x: hidden; }
  .stats-filter-card .filter-select,
  .stats-filter-card select,
  .stats-filter-card input[type="range"],
  .stats-filter-card input[type="number"] { max-width: 100%; box-sizing: border-box; }
  .stats-filter-card .filter-range { flex-wrap: wrap; }
  .layout-list-form > :only-child { grid-column: auto; } /* réinitialise :only-child span */
  .form-grid-2    { grid-template-columns: 1fr; }
  .stats-grid     { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-6   { grid-template-columns: repeat(3, 1fr); }
  .stats-grid-3   { grid-template-columns: repeat(2, 1fr); }
  .layout-main-aside { grid-template-columns: 1fr; }

  /* Composants */
  .player-profile { grid-template-columns: 1fr; }
  .live-scoreboard--4 { grid-template-columns: repeat(2, 1fr); }
  .player-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-card__value { font-size: var(--text-2xl); }
  .dropdown-multiselect { width: 100%; }
  .dropdown-multiselect__trigger { width: 100%; }
  .filter-panel__row { flex-direction: column; align-items: flex-start; }
  .color-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Très petit mobile (≤ 480px) */
@media (max-width: 480px) {
  .filter-bar { flex-direction: column; align-items: stretch; }
  .live-scoreboard--4 { grid-template-columns: repeat(2, 1fr); }
  .card { padding: var(--space-3); }
  .color-grid { grid-template-columns: 1fr; }
  .stats-grid   { grid-template-columns: 1fr 1fr; }
  .stats-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid-3 { grid-template-columns: 1fr; }
}


/* ──────────────────────────────────────────────────────────────
   24. UTILITAIRES
   Classes génériques réutilisables partout.
   ────────────────────────────────────────────────────────────── */
.text-red    { color: var(--color-red); }
.text-navy   { color: var(--color-navy); }
.text-gray   { color: var(--color-gray-600); }
.text-green  { color: var(--color-success); }
.text-orange { color: var(--color-warning); }

.text-sm    { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }
.font-bold  { font-weight: var(--font-bold); }
.font-black { font-weight: var(--font-black); }

.flex              { display: flex; }
.items-center      { align-items: center; }
.justify-between   { justify-content: space-between; }
.gap-2             { gap: var(--space-2); }
.gap-3             { gap: var(--space-3); }
.gap-4             { gap: var(--space-4); }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }

.p-4  { padding: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-md       { box-shadow: var(--shadow-md); }
.bg-white        { background-color: var(--color-white); }
.bg-gray         { background-color: var(--color-gray-100); }
.overflow-hidden { overflow: hidden; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Accessible mais visuellement masqué (lecteurs d'écran) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}


/* ──────────────────────────────────────────────────────────────
   25. SIMULATEUR DE VIEWPORT  (superadmin uniquement)
   Outil de développement — simule les mises en page responsive
   sans redimensionner la fenêtre du navigateur.
   Activé via l'attribut data-sim sur <html> :
     data-sim="tablet"    → mise en page 769–1024 px
     data-sim="mobile"    → mise en page ≤ 768 px
     data-sim="mobile-sm" → mise en page ≤ 480 px
   ────────────────────────────────────────────────────────────── */

/* ── Widget sélecteur (dans la sidebar) ── */
.viewport-sim {
  margin: var(--space-1) var(--space-3) var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.viewport-sim__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-400);
  margin-bottom: var(--space-1);
  user-select: none;
  transition: color var(--transition-fast);
}
.viewport-sim__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  padding: 4px 22px 4px 8px;
  font-size: 11px;
  color: var(--color-white);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2398A2B3' d='M5 7L1 2.5h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.viewport-sim__select:hover,
.viewport-sim__select:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.12);
}
.viewport-sim__select option,
.viewport-sim__select optgroup { background-color: #1e2a40; color: var(--color-white); }

/* État actif — surligné en ambre quand une simulation est en cours */
.viewport-sim.is-active {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.07);
}
.viewport-sim.is-active .viewport-sim__label { color: #F59E0B; }

/* ── Badge flottant (haut-droite) — indicateur visible sur toute la page ── */
.sim-badge {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 9999;
  display: none;           /* affiché par JS uniquement */
  align-items: center;
  gap: var(--space-2);
  background: #F59E0B;
  color: #1a1a1a;
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 3px 6px 3px 10px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  letter-spacing: 0.03em;
  user-select: none;
  pointer-events: auto;
}
.sim-badge__reset {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.18);
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: var(--font-bold);
  color: #1a1a1a;
  line-height: 1;
  padding: 0;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.sim-badge__reset:hover { background: rgba(0, 0, 0, 0.32); }


/* ══ Règles de simulation — appliquées via data-sim sur <html> ══ */

/* ── Mode tablette (769–1024 px) ── */
html[data-sim="tablet"] .sidebar { width: 64px; overflow: hidden; }
html[data-sim="tablet"] .sidebar-logo,
html[data-sim="tablet"] .sidebar-nav__link span,
html[data-sim="tablet"] .sidebar-select-wrap,
html[data-sim="tablet"] .role-badge-sidebar,
html[data-sim="tablet"] .sidebar-footer,
html[data-sim="tablet"] .viewport-sim        { display: none; }
html[data-sim="tablet"] .main-content        { margin-left: 64px; }
html[data-sim="tablet"] .sidebar-nav__link   { justify-content: center; padding: var(--space-3); }
html[data-sim="tablet"] .stats-grid          { grid-template-columns: repeat(2, 1fr); }
html[data-sim="tablet"] .stats-grid-6        { grid-template-columns: repeat(3, 1fr); }
html[data-sim="tablet"] .layout-main-aside   { grid-template-columns: 1fr; }



html[data-sim="mobile"]    .sidebar,
html[data-sim="mobile-sm"] .sidebar    { transform: translateX(-100%); transition: transform var(--transition-base); z-index: 200; }
html[data-sim="mobile"]    .sidebar.sidebar--open,
html[data-sim="mobile-sm"] .sidebar.sidebar--open  { transform: translateX(0); }
html[data-sim="mobile"]    .sidebar-overlay,
html[data-sim="mobile-sm"] .sidebar-overlay        { display: block; }
html[data-sim="mobile"]    .sidebar-overlay.active,
html[data-sim="mobile-sm"] .sidebar-overlay.active { opacity: 1; pointer-events: auto; }
html[data-sim="mobile"]    .sidebar-close,
html[data-sim="mobile-sm"] .sidebar-close          { display: flex; }
html[data-sim="mobile"]    .mobile-header,
html[data-sim="mobile-sm"] .mobile-header          { display: flex; }
html[data-sim="mobile"]    .mobile-nav,
html[data-sim="mobile-sm"] .mobile-nav             { display: flex; }
html[data-sim="mobile"]    .main-content,
html[data-sim="mobile-sm"] .main-content           { margin-left: 0; padding-bottom: var(--mobile-nav-height); }
html[data-sim="mobile"]    .topbar,
html[data-sim="mobile-sm"] .topbar                 { display: none; }
html[data-sim="mobile"]    .page-content,
html[data-sim="mobile-sm"] .page-content           { padding: var(--space-4); }
html[data-sim="mobile"]    .layout-list-form,
html[data-sim="mobile"]    .layout-list-form--wide,
html[data-sim="mobile"]    .layout-stats,
html[data-sim="mobile-sm"] .layout-list-form,
html[data-sim="mobile-sm"] .layout-list-form--wide,
html[data-sim="mobile-sm"] .layout-stats           { grid-template-columns: 1fr; }
html[data-sim="mobile"]    .stats-filter-card,
html[data-sim="mobile-sm"] .stats-filter-card      { position: static; overflow-x: hidden; }
html[data-sim="mobile"]    .stats-filter-card .filter-select,
html[data-sim="mobile"]    .stats-filter-card select,
html[data-sim="mobile"]    .stats-filter-card input[type="range"],
html[data-sim="mobile"]    .stats-filter-card input[type="number"],
html[data-sim="mobile-sm"] .stats-filter-card .filter-select,
html[data-sim="mobile-sm"] .stats-filter-card select,
html[data-sim="mobile-sm"] .stats-filter-card input[type="range"],
html[data-sim="mobile-sm"] .stats-filter-card input[type="number"] { max-width: 100%; box-sizing: border-box; }
html[data-sim="mobile"]    .stats-filter-card .filter-range,
html[data-sim="mobile-sm"] .stats-filter-card .filter-range        { flex-wrap: wrap; }
/* BUG-05 : widgets dashboard en colonne sur simulateur mobile */
html[data-sim="mobile"]    #widget-container,
html[data-sim="mobile-sm"] #widget-container    { flex-direction: column !important; }
html[data-sim="mobile"]    #widget-container .wcol,
html[data-sim="mobile-sm"] #widget-container .wcol { width: 100% !important; flex: none !important; }
html[data-sim="mobile"]    .form-grid-2,
html[data-sim="mobile-sm"] .form-grid-2            { grid-template-columns: 1fr; }
html[data-sim="mobile"]    .stats-grid,
html[data-sim="mobile-sm"] .stats-grid             { grid-template-columns: repeat(2, 1fr); }
html[data-sim="mobile"]    .stats-grid-6,
html[data-sim="mobile-sm"] .stats-grid-6           { grid-template-columns: repeat(3, 1fr); }
html[data-sim="mobile"]    .stats-grid-3,
html[data-sim="mobile-sm"] .stats-grid-3           { grid-template-columns: repeat(2, 1fr); }
html[data-sim="mobile"]    .layout-main-aside,
html[data-sim="mobile-sm"] .layout-main-aside      { grid-template-columns: 1fr; }
html[data-sim="mobile"]    .player-profile,
html[data-sim="mobile-sm"] .player-profile         { grid-template-columns: 1fr; }
html[data-sim="mobile"]    .color-grid,
html[data-sim="mobile-sm"] .color-grid             { grid-template-columns: repeat(2, 1fr); }
html[data-sim="mobile"]    .dropdown-multiselect,
html[data-sim="mobile-sm"] .dropdown-multiselect   { width: 100%; }
html[data-sim="mobile"]    .dropdown-multiselect__trigger,
html[data-sim="mobile-sm"] .dropdown-multiselect__trigger { width: 100%; }
html[data-sim="mobile"]    .filter-panel__row,
html[data-sim="mobile-sm"] .filter-panel__row      { flex-direction: column; align-items: flex-start; }
html[data-sim="mobile"]    .live-scoreboard--4,
html[data-sim="mobile-sm"] .live-scoreboard--4     { grid-template-columns: repeat(2, 1fr); }


/* ── Mode petit mobile (≤ 480 px) — en complément des règles mobile ── */
html[data-sim="mobile-sm"] .filter-bar    { flex-direction: column; align-items: stretch; }
html[data-sim="mobile-sm"] .stats-grid    { grid-template-columns: 1fr 1fr; }
html[data-sim="mobile-sm"] .stats-grid-6  { grid-template-columns: repeat(2, 1fr); }
html[data-sim="mobile-sm"] .stats-grid-3  { grid-template-columns: 1fr; }
html[data-sim="mobile-sm"] .card          { padding: var(--space-3); }
html[data-sim="mobile-sm"] .color-grid    { grid-template-columns: 1fr; }