:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --accent: #f78166;
  --accent2: #79c0ff;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f85149;
  --gold: #ffd700;
  --silver: #c0c0c0;
  --bronze: #cd7f32;
  /* Champ de saisie (select/input dans les modales) — volontairement plus sombre que --surface
     pour un effet "creux" sous le panneau. BUG CORRIGÉ (2026-08-13) : cette variable était
     référencée par ~20 <select> (via var(--input-bg)) mais n'avait jamais été définie ici —
     un var() invalide retombe sur la valeur initiale de la propriété (transparent pour
     background), ce qui restait invisible sur le select FERMÉ (le fond sombre de la modale
     derrière masquait le souci) mais laissait le POPUP natif du navigateur (rendu hors du flux
     normal, ne "voit" pas ce qu'il y a derrière) retomber sur son thème clair par défaut —
     d'où les menus déroulants illisibles remontés par l'utilisateur.
     color-scheme: dark posé ici (racine, hérité par tout le document) plutôt que sur chaque
     select individuellement : c'est la manière recommandée par la spec pour que TOUS les
     contrôles natifs (select fermé ET popup, scrollbars, etc.) suivent le thème sombre — poser
     la propriété élément par élément (comme c'était fait jusqu'ici) ne garantit pas que le
     popup, qui n'est pas un élément normal de la page, en hérite de façon fiable. */
  --input-bg: #0d1117;
  color-scheme: dark;
}

/* Filet de sécurité pour le rendu des <option> dans le popup natif — respecté par les moteurs
   Chromium/Firefox en complément de color-scheme, cible directement les lignes du menu déroulant. */
option {
  background: var(--input-bg);
  color: var(--text);
}

/* ── Overlay site privé ─────────────────────────────────────────────── */
#site-private-overlay {
  position: fixed; inset: 0; z-index: 99; /* sous les modals (z-index:100) mais au-dessus du contenu */
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.private-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  max-width: 380px; width: 90%;
  text-align: center;
}
.private-logo { font-size: 48px; margin-bottom: 12px; }
.private-card h2 { font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.private-card p  { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
header h1 { font-size: 18px; font-weight: 700; color: var(--accent); }
header nav { display: flex; gap: 8px; margin-left: auto; }
.back-link {
  color: var(--text-muted); text-decoration: none; font-size: 13px;
  transition: color 0.15s; white-space: nowrap;
}
.back-link:hover { color: var(--text); }

/* ── Layout ─────────────────────────────────────────────────────────── */
.main { max-width: 1280px; margin: 0 auto; padding: 24px 16px; }

/* ── Navigation par section (niveau supérieur aux onglets) ──────────── */
.section-nav {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 20px 0 14px;
}
.section-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.section-btn:hover {
  color: var(--text);
  border-color: #555;
  background: rgba(255,255,255,0.04);
}
.section-btn.active {
  color: var(--text);
  border-color: var(--accent2);
  background: rgba(121,192,255,0.1);
}

/* ── Onglets principaux ──────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto; }
.tab-btn {
  padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); cursor: pointer; font-size: 14px; font-weight: 500;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent2); border-bottom-color: var(--accent2); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Sous-onglets (GDC / Ligues / Classé) ──────────────────────────── */
.sub-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; width: fit-content;
}
/* Collée directement au-dessus de "Parcourir / Bilan défensif / Admin" (retour utilisateur
   2026-08-19) — UNIQUEMENT cette occurrence (Ressources → Bases/Vidéos), pas les autres barres
   .sub-tabs du site qui n'ont pas de 2e barre de bascule juste en dessous et gardent l'espacement
   normal de 20px. */
#res-subtabs-bases { margin-bottom: 6px; }
.sub-tab-btn {
  padding: 6px 16px; background: none; border: none; border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all 0.15s;
}
.sub-tab-btn:hover { color: var(--text); }
.sub-tab-btn.active { background: var(--bg); color: var(--accent2); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.sub-tab-pane { display: none; }
.sub-tab-pane.active { display: block; }

/* ── Filtres de classement ───────────────────────────────────────────── */
.filter-block { display: flex; flex-direction: column; gap: 14px; }
.filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
.filter-label {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  white-space: nowrap; min-width: 40px;
}
.filter-label-inline {
  font-size: 12px; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 4px;
}

/* Checkboxes de sélection des clans */
.clan-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.clan-check-label {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px;
  font-size: 13px; color: var(--text-muted); transition: all 0.15s;
  user-select: none;
}
.clan-check-label:hover { border-color: var(--accent2); color: var(--text); }
.clan-check-label input { display: none; }
.clan-check-label.checked {
  border-color: var(--accent2); background: rgba(121,192,255,0.1); color: var(--accent2);
}

/* Bouton "Tous ✓" dans les filtres de sélection des clans */
.clan-select-all {
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px;
  background: none; color: var(--text-muted); cursor: pointer; font-size: 13px;
  transition: all 0.15s; user-select: none; white-space: nowrap;
}
.clan-select-all:hover { border-color: var(--accent); color: var(--accent); }

/* Checkbox "inclure en cours" */
.filter-ongoing-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted); cursor: pointer;
  user-select: none; white-space: nowrap;
}
.filter-ongoing-label input[type=checkbox] { accent-color: var(--accent2); cursor: pointer; }
.filter-ongoing-label:has(input:checked) { color: var(--accent2); }

/* Checkboxes de colonnes dans la modale preset */
.col-check-label {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 12px; color: var(--text-muted); transition: all 0.15s; user-select: none;
}
.col-check-label:hover { border-color: var(--accent2); color: var(--text); }
.col-check-label input { accent-color: var(--accent2); cursor: pointer; }
.col-check-label:has(input:checked) {
  border-color: var(--accent2); background: rgba(121,192,255,0.08); color: var(--accent2);
}

/* Séparateur de groupe HDV dans les tableaux classement */
tr.th-group-header td {
  background: linear-gradient(90deg, rgba(247,129,102,.12) 0%, transparent 60%);
  color: var(--accent);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 8px 14px;
  border-top: 2px solid rgba(247,129,102,.35);
  border-bottom: 1px solid rgba(247,129,102,.15);
}
tr.th-group-header td::before { content: ""; }

/* Badges fiabilité */
.rel-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.rel-faible   { background: rgba(248,81,73,.15);  color: var(--danger); }
.rel-moyenne  { background: rgba(210,153,34,.15); color: var(--warning); }
.rel-élevée   { background: rgba(63,185,80,.15);  color: var(--success); }

/* Badge niveau de jeu */
.skill-badge {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; background: rgba(121,192,255,.12);
  color: var(--accent2); white-space: nowrap;
}

/* Selects et inputs dans les filtres */
.filter-block select,
.filter-block input[type=number] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 5px 8px; font-size: 13px;
}
.filter-block select:focus, .filter-block input:focus {
  outline: none; border-color: var(--accent2);
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

/* ── Clan grid (onglet Clans) ────────────────────────────────────────── */
.clan-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.clan-card {
  flex: 1 1 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s;
  /* Empêche sélection de texte et callout iOS sur long press */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.clan-card.dragging { opacity: 0.3; }
.clan-card .drag-handle {
  color: var(--text-muted); font-size: 16px; margin-bottom: 4px;
  opacity: 0.4;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.clan-card .drag-handle:active { cursor: grabbing; }
/* Zones de dépôt fines injectées pendant le drag */
.drop-zone-line {
  /* Verticale (multi-colonnes, desktop) */
  flex: 0 0 8px;
  align-self: stretch;
  min-height: 80px;
  border-radius: 4px;
  background: rgba(121,192,255,0.07);
  border: 2px dashed rgba(121,192,255,0.25);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, box-shadow 0.1s;
}
.drop-zone-line.horizontal {
  /* Horizontale (mono-colonne, mobile) */
  flex: 0 0 100%;
  min-height: 0;
  height: 16px;
  align-self: auto;
}
.drop-zone-line.hovered {
  background: rgba(121,192,255,0.3);
  border-color: var(--accent2);
  border-style: solid;
  box-shadow: 0 0 10px rgba(121,192,255,0.6);
}
.clan-card .clan-name { font-weight: 600; font-size: 15px; }
.clan-card .clan-tag { color: var(--text-muted); font-size: 12px; font-family: monospace; }

/* ── Tableau de classement ───────────────────────────────────────────── */
/* table-wrap : scroll horizontal géré par le miroir en haut.
   Tout overflow (même overflow-x:auto) crée un conteneur de scroll →
   position:sticky des <th> serait relatif au wrap et jamais déclenché.
   Les sticky headers sont donc gérés via JS (setupStickyThead) : clone
   fixe du thead affiché quand l'original sort du viewport.
   Barres de défilement masquées via scrollbar-width:none. */
.table-wrap {
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge */
}
.table-wrap::-webkit-scrollbar { display: none; } /* Chrome / Safari */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th {
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  position: sticky; top: 0; z-index: 5;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sorted-asc::after  { content: " ↑"; }
th.sorted-desc::after { content: " ↓"; }
tr:hover td { background: rgba(255,255,255,0.03); }
td.rank { font-weight: 700; width: 36px; text-align: center; }
td.score { font-weight: 700; color: var(--accent2); }
tr.rank-gold   td.rank { color: var(--gold); }
tr.rank-silver td.rank { color: var(--silver); }
tr.rank-bronze td.rank { color: var(--bronze); }

/* Barre de scroll miroir en haut du tableau */
.scroll-top-mirror {
  overflow-x: auto;
  overflow-y: hidden;
  height: 14px;
  margin-bottom: 2px;
}
.scroll-top-mirror > div { height: 1px; }

/* Contexte de filtre au-dessus du tableau */
.table-filter-meta {
  font-size: 11px; color: var(--text-muted); padding: 6px 2px 4px;
  border-bottom: 1px solid var(--border); margin-bottom: 0;
}
.clan-badge {
  display: inline-block; padding: 1px 6px; border-radius: 10px;
  font-size: 11px; background: rgba(121,192,255,0.1); color: var(--accent2);
  border: 1px solid rgba(121,192,255,0.2); margin-left: 4px;
}

/* ── Éditeur de poids ────────────────────────────────────────────────── */
.weights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.weight-item { display: flex; flex-direction: column; gap: 6px; }
.weight-item label { font-size: 12px; color: var(--text-muted); display: flex; justify-content: space-between; }
.weight-item input[type=range] { width: 100%; accent-color: var(--accent2); }
.weight-total { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.weight-total.error { color: var(--danger); }

/* ── Chips presets rapides ───────────────────────────────────────────── */
.presets-list { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chip {
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border);
  background: none; cursor: pointer; font-size: 12px; color: var(--text-muted);
  transition: all 0.15s;
}
.preset-chip:hover { border-color: var(--accent2); color: var(--text); }
.preset-chip.active { border-color: var(--accent2); background: rgba(121,192,255,0.1); color: var(--accent2); }
.preset-chip.is-default::after { content: " ★"; color: var(--gold); font-size: 11px; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border);
  cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s;
  background: var(--surface); color: var(--text);
}
.btn:hover { border-color: var(--accent2); color: var(--accent2); }
.btn-primary { background: var(--accent2); color: var(--bg); border-color: var(--accent2); }
.btn-primary:hover { opacity: 0.85; color: var(--bg); }
.btn-danger { background: none; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: white; }
.btn-sm { padding: 3px 8px; font-size: 12px; }

/* ── Formulaires ─────────────────────────────────────────────────────── */
input[type=text], input[type=password] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 10px; font-size: 13px; width: 100%;
}
input:focus { outline: none; border-color: var(--accent2); }

/* ── Modals ──────────────────────────────────────────────────────────── */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 100; align-items: center; justify-content: center;
}
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 24px; min-width: 320px; max-width: 480px; width: 90%;
  /* Ne dépasse jamais l'écran : scroll interne si le contenu est long
     (ex. « Mon compte » avec beaucoup de comptes CoC liés). */
  max-height: 90vh; overflow-y: auto;
}
.modal h3 { margin-bottom: 16px; font-size: 16px; }
.modal .form-group { margin-bottom: 12px; }
.modal .form-group label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: block; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ── Utilitaires ─────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); line-height: 1.6; }
.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--accent2);
  border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.alert { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.alert-error { background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.3); color: #f85149; }
.alert-success { background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.3); color: var(--success); }
.text-muted { color: var(--text-muted); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; }
.ml-auto { margin-left: auto; }

/* ── Page d'accueil ──────────────────────────────────────────────────── */
.home-container {
  max-width: 900px; margin: 60px auto; padding: 0 24px; text-align: center;
}
.home-subtitle {
  font-size: 15px; color: var(--text-muted); margin-bottom: 40px;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.home-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 32px 20px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-decoration: none; cursor: pointer; transition: all 0.2s;
  color: var(--text);
}
a.home-card:hover {
  border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(121,192,255,0.12);
  transform: translateY(-2px);
}
.home-card.disabled { opacity: 0.4; cursor: default; }
.home-card-icon { font-size: 36px; }
.home-card-title { font-size: 16px; font-weight: 700; }
.home-card-desc { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.5; }

/* ── Titre court/long selon la taille d'écran ───────────────────────── */
.h1-short { display: none; }

/* ── Colonnes sticky gauche dans les tableaux de classement ─────────── */
/* Permet de garder # et Joueur visibles en scrollant horizontalement.   */
/* Seulement activé sur les écrans < 640px (mobile).                     */
@media (max-width: 640px) {
  .table-wrap table th:nth-child(1),
  .table-wrap table td:nth-child(1) {
    position: sticky; left: 0; z-index: 4;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .table-wrap table th:nth-child(2),
  .table-wrap table td:nth-child(2) {
    position: sticky; left: 36px; z-index: 4;
    background: var(--surface);
    /* Ombre portée vers la droite pour signifier que du contenu se cache */
    box-shadow: 3px 0 8px rgba(0,0,0,0.45);
  }
  /* Hover : maintenir le fond opaque sur les colonnes sticky */
  .table-wrap table tr:hover td:nth-child(1),
  .table-wrap table tr:hover td:nth-child(2) {
    background: #1d2430; /* légèrement plus clair que --surface */
  }
}

/* ── Bouton "Charger" pleine largeur + filtre "en cours" sur mobile ──── */
@media (max-width: 600px) {
  /* Le bouton passe en dernier dans la filter-row et prend toute la largeur */
  #btn-load-gdc, #btn-load-cwl, #btn-load-ranked {
    flex: 1 0 100%;
    order: 10;
    padding: 11px 14px;
    font-size: 15px;
  }
  /* La checkbox "en cours" suit, sur la même ligne étroite */
  .filter-ongoing-label { order: 11; }
}

/* ── Auth nav (header) ───────────────────────────────────────────────── */
.auth-nav { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.auth-user {
  font-size: 13px; color: var(--text-muted);
  padding: 3px 8px; background: rgba(255,255,255,0.04);
  border-radius: 12px; border: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Badges de permissions ───────────────────────────────────────────── */
.perm-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; background: rgba(121,192,255,0.1);
  color: var(--accent2); border: 1px solid rgba(121,192,255,0.2);
  white-space: nowrap;
}
.perm-badge.perm-super {
  background: rgba(247,129,102,0.12); color: var(--accent);
  border-color: rgba(247,129,102,0.3);
}

/* ── Tableau des comptes ──────────────────────────────────────────────── */
.accounts-table-wrap { overflow-x: auto; }
.accounts-table { width: 100%; border-collapse: collapse; }
.accounts-table th, .accounts-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.accounts-table th {
  color: var(--text-muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.accounts-table tr:hover td { background: rgba(255,255,255,0.03); }
.accounts-table tr.account-inactive td { opacity: 0.55; }

/* ── Indicateur force du mot de passe ────────────────────────────────── */
.pwd-strength-box {
  font-size: 12px; line-height: 1.8;
  padding: 4px 0;
}

/* ── Inputs email ────────────────────────────────────────────────────── */
input[type=email] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 10px; font-size: 13px; width: 100%;
}
input[type=email]:focus { outline: none; border-color: var(--accent2); }

/* ── Page connexion standalone ───────────────────────────────────────── */
.login-page { max-width: 400px; margin: 80px auto; padding: 0 16px; }
.login-page .card { padding: 28px 24px; }
.login-page h2 { text-align: center; margin-bottom: 24px; font-size: 20px; }
.login-page .form-group { margin-bottom: 16px; }
.login-page .form-group label { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 6px; }

/* ── Modal "Mon compte" ──────────────────────────────────────────────── */
/* En-tête collant : la croix de fermeture reste visible même si le contenu scrolle. */
.mc-header {
  position: sticky; top: -24px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface);
  margin: -24px -24px 14px; padding: 16px 24px 10px;
  border-bottom: 1px solid var(--border);
}
.mc-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted);
  margin-bottom: 10px;
}
.mc-separator {
  border: none; border-top: 1px solid var(--border);
  margin: 18px 0;
}

/* ── Champ mot de passe + bouton œil ────────────────────────────────── */
.pwd-field-wrap { position: relative; }
.pwd-field-wrap input[type=password],
.pwd-field-wrap input[type=text] { padding-right: 36px; }
.btn-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; font-size: 15px; line-height: 1;
  opacity: 0.6; transition: opacity 0.15s;
  /* Empêche la sélection de texte au double-clic */
  user-select: none; -webkit-user-select: none;
}
.btn-eye:hover { opacity: 1; }

/* ── Header responsive (mobile) ─────────────────────────────────────── */
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 4px 10px;
    row-gap: 6px;
  }
  header h1 { font-size: 15px; flex: 1 1 auto; }
  .h1-long { display: none; }
  .h1-short { display: inline; }
  .back-link { font-size: 12px; white-space: nowrap; }

  /* Auth nav : passe sur une 2e ligne, pleine largeur, alignée à droite */
  .auth-nav {
    order: 10;
    width: 100%;
    margin-left: 0;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    gap: 6px;
  }
  .auth-user {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  /* Raccourcir le bouton Déconnexion */
  #btn-logout { font-size: 11px; padding: 3px 7px; }
}

/* ── Onglets : scroll horizontal sur très petits écrans ─────────────── */
@media (max-width: 480px) {
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-wrap: nowrap;
    padding-bottom: 1px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; font-size: 13px; padding: 8px 12px; }

  /* Sous-onglets : idem */
  .sub-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .sub-tabs::-webkit-scrollbar { display: none; }
  .sub-tab-btn { white-space: nowrap; font-size: 12px; padding: 5px 12px; }
}

/* ── Modals : pleine largeur sur mobile ──────────────────────────────── */
@media (max-width: 520px) {
  .modal { min-width: unset; max-width: 100%; width: calc(100vw - 32px); padding: 18px 16px; }
}

/* ── Login page : marges réduites sur mobile ─────────────────────────── */
@media (max-width: 480px) {
  .login-page { margin-top: 32px; }
}

/* ── Dashboard 4 cartes (2×2) ───────────────────────────────────────── */
.dash-4grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}
@media (max-width: 560px) { .dash-4grid { grid-template-columns: 1fr; } }

.dash-kard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.dash-kard-head {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
}

/* Ligne par clan dans une carte */
.dash-clan-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(48,54,61,.45);
  font-size: 13px;
  min-height: 36px;
}
.dash-clan-row:last-child { border-bottom: none; }

/* Indicateur coloré */
.dash-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-green  { background: var(--success); }
.dot-red    { background: var(--danger); }
.dot-orange { background: var(--warning); }
.dot-grey   { background: #555e68; }

/* Nom + valeur dans la ligne */
.dash-cname {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-val {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
}
.dash-val-red    { color: var(--danger) !important; font-weight: 600; }
.dash-val-green  { color: var(--success) !important; }
.dash-val-orange { color: var(--warning) !important; }

/* Bouton ping Discord dans la carte guerre */
.btn-dash-ping {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 0 2px; opacity: 0.7;
  transition: opacity .15s;
  flex-shrink: 0;
}
.btn-dash-ping:hover:not(:disabled) { opacity: 1; }
.btn-dash-ping:disabled { cursor: default; opacity: 0.5; }

/* Panneau expand guerre (clic sur une ligne) */
.war-detail-panel {
  padding: 7px 14px 9px 32px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(48,54,61,.35);
  font-size: 12px;
}
.war-detail-panel:last-child { border-bottom: none; }
.war-detail-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  margin-bottom: 4px;
  font-size: 12px;
}
.war-detail-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.war-detail-missing {
  margin-top: 5px;
  font-size: 11px;
  color: var(--warning);
  line-height: 1.5;
}
.war-detail-missing span { margin-right: 6px; }
.war-detail-err { color: var(--danger); font-size: 11px; }
.war-row-open .dash-cname { color: var(--accent2); }

/* Petit sous-label (temps restant, rang CWL…) */
.dash-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.empty-state-sm {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Legacy dash cards (vue par clan) ───────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.dash-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.dash-card-head { font-size: 15px; font-weight: 700; color: var(--accent); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.dash-sec { display: flex; flex-direction: column; gap: 2px; }
.dash-sec-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.dash-line { font-size: 13px; }
.dash-muted { font-size: 13px; color: var(--text-muted); font-style: italic; }
.dash-warn { color: var(--warning); font-weight: 600; }
.dash-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 700; background: rgba(139, 148, 158, 0.15);
}
.dash-badge-good { background: rgba(63, 185, 80, 0.18);  color: var(--success); }
.dash-badge-mid  { background: rgba(121, 192, 255, 0.18); color: var(--accent2); }
.dash-badge-warn { background: rgba(210, 153, 34, 0.18); color: var(--warning); }
.dash-badge-bad  { background: rgba(248, 81, 73, 0.18);  color: var(--danger); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.dash-remind { align-self: flex-start; margin-top: 2px; }
.dash-remind:disabled { opacity: 0.55; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   Orga CWL
   ══════════════════════════════════════════════════════════════════ */

/* ── En-tête saison ──────────────────────────────────────────────── */
.cwl-header {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.cwl-header select {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 14px;
}
#cwl-reg-count, #cwl-comp-count {
  font-size: 13px; color: var(--text-muted); margin-left: auto;
}
#cwl-reg-loading, #cwl-rotation-loading {
  font-size: 13px; color: var(--text-muted); margin: 8px 0;
}

/* ── Alert inline ───────────────────────────────────────────────── */
#cwl-reg-alert, #cwl-comp-alert {
  font-size: 13px; margin-bottom: 8px; padding: 6px 12px;
  border-radius: 6px; display: none;
}
#cwl-reg-alert:not(:empty), #cwl-comp-alert:not(:empty) { display: block; }
.alert-success { background: rgba(63,185,80,.15); color: var(--success); }
.alert-error   { background: rgba(248,81,73,.15);  color: var(--danger);  }

/* ── Tableau inscriptions ───────────────────────────────────────── */
.cwl-table-wrap { overflow-x: auto; }
.cwl-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cwl-table th, .cwl-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle;
}
.cwl-table th { background: var(--surface2); font-weight: 600; }
.cwl-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── TH badge ───────────────────────────────────────────────────── */
.cwl-th {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.cwl-th-16  { background: rgba(199,30,30,.25);  color: #f47; }
.cwl-th-14  { background: rgba(155,89,182,.25); color: #c9a; }
.cwl-th-12  { background: rgba(52,152,219,.25); color: var(--accent2); }
.cwl-th-low { background: rgba(139,148,158,.2); color: var(--text-muted); }
.cwl-th-0   { background: var(--surface2); color: var(--text-muted); }

/* ── Dispo dot ──────────────────────────────────────────────────── */
.cwl-avail-dot {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; text-align: center; line-height: 20px; font-weight: 700;
}
.cwl-avail-dot.avail   { background: rgba(63,185,80,.2);  color: var(--success); }
.cwl-avail-dot.unavail { background: rgba(248,81,73,.15); color: var(--danger);  }

/* ── Détail CWL (panneau dashboard) : carte par round + badge résultat ──── */
.cwl-round-card {
  padding: 6px 0;
  border-bottom: 1px solid rgba(48,54,61,.4);
}
.cwl-round-card:last-child { border-bottom: none; }

.cwl-round-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.cwl-round-badge.win     { background: rgba(63,185,80,.2);   color: var(--success); }
.cwl-round-badge.lose    { background: rgba(248,81,73,.15);  color: var(--danger);  }
.cwl-round-badge.tie     { background: rgba(210,153,34,.18); color: var(--warning); }
.cwl-round-badge.live    { background: rgba(121,192,255,.15); color: var(--accent2); }
.cwl-round-badge.pending { background: rgba(255,255,255,.06); color: var(--text-muted); }

/* ── Vivier ─────────────────────────────────────────────────────── */
.cwl-vivier-wrap {
  background: var(--surface2); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 16px; min-height: 48px;
}
.cwl-vivier-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); margin-bottom: 8px; font-weight: 600;
}
/* Grille régulière : colonnes alignées (au lieu de pilules de largeurs variables en vrac) */
#cwl-vivier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  max-height: 320px; overflow-y: auto;   /* hauteur limitée : ne pousse plus la page */
  padding-right: 4px;
}
/* En-tête de groupe : occupe toute la largeur de la grille */
.cwl-vivier-group {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin: 8px 0 2px; padding-top: 6px; border-top: 1px solid var(--border);
}
.cwl-vivier-group:first-child { margin-top: 0; padding-top: 0; border-top: none; }
/* 2 lignes (nom en haut, infos en dessous) — même principe que .cwl-player-row (carte de
   clan) : évite de tasser nom + HDV + ligue + fails + étoiles + icône sur une seule ligne. */
.cwl-player-chip {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 8px;
  font-size: 12px; cursor: pointer; transition: border-color .15s;
  user-select: none;
}
.cwl-player-chip:hover { border-color: var(--accent); }
.cwl-chip-top { display: flex; align-items: center; gap: 5px; }
/* La ligne d'infos réutilise directement .cwl-row-info (même classe que les lignes de clan, pas
   une copie à valeur de padding recalculée à la main) — garantit un alignement IDENTIQUE entre
   vivier et clans, sans risque de dérive si l'un des deux layouts est retouché plus tard. */
/* Nom : prend l'espace dispo et tronque → les infos (fails/★) s'alignent à droite de chaque cellule */
.cwl-chip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cwl-muted { font-size: 12px; color: var(--text-muted); }

/* ── Grille de clans ────────────────────────────────────────────── */
.cwl-clans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.cwl-clan-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.cwl-clan-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 4px;
  padding: 8px 12px; background: var(--surface2);
  font-size: 13px; font-weight: 600;
}
/* Bloc nom + ligue : peut rétrécir et tronquer ; les contrôles restent intacts. */
.cwl-clan-title { flex: 1 1 130px; min-width: 0; }
.cwl-clan-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwl-clan-ctrls {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.cwl-clan-count {
  font-size: 11px; color: var(--text-muted); font-weight: 400;
}
/* Ligne référents sur la carte de clan */
.cwl-clan-refs {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 4px 10px; font-size: 11px; color: var(--text);
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.cwl-clan-count.full { color: var(--success); font-weight: 600; }
.cwl-clan-players { padding: 8px; }
/* Ligne joueur d'un clan : 2 lignes (nom complet en haut, infos en dessous) car
   les cartes de clan sont étroites → le nom ne tient pas avec les infos sur 1 ligne. */
.cwl-player-row {
  display: flex; flex-direction: column; gap: 1px;
  padding: 3px 4px; border-radius: 6px; font-size: 12px;
}
.cwl-row-top { display: flex; align-items: center; gap: 6px; }
.cwl-row-info { padding-left: 26px; line-height: 1.2; }   /* aligné sous le nom (après slot + HDV) */
.cwl-player-row.bench { opacity: .65; }
.cwl-player-row:hover { background: var(--surface2); }
.cwl-slot { width: 20px; text-align: right; color: var(--text-muted); font-size: 11px; }
.cwl-player-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Indicateur de force (★ / direction / fails) sur les puces & lignes de composition */
.cwl-str { font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-left: auto; }
.cwl-row-info .cwl-str { margin-left: 0; }   /* sur sa propre ligne → calé à gauche sous le nom */
/* Boutons +/- de places sur la carte clan */
.cwl-slot-ctrl { display: inline-flex; gap: 2px; }
.btn-xs {
  padding: 0 6px; font-size: 13px; line-height: 1.5; min-width: 20px;
  border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.btn-xs:hover { border-color: var(--accent); }
.cwl-bench-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(139,148,158,.2); color: var(--text-muted);
  border-radius: 4px; padding: 1px 5px;
}
.cwl-remove-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 12px; padding: 0 2px; opacity: .5; line-height: 1;
}
.cwl-remove-btn:hover { opacity: 1; color: var(--danger); }
/* Icône indication (vivier + lignes de clan) : bouton ➕ TOUJOURS la même cible de clic, discret
   par défaut — l'état "a une indication" est signalé par un badge 📝 séparé juste à côté (voir
   noteIcon() dans main.js), jamais en changeant l'icône du bouton lui-même. Le texte de
   l'indication ne s'affiche qu'au clic (modal), jamais en survol. */
.cwl-note-icon {
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 0 2px; opacity: .3; line-height: 1;
}
.cwl-note-icon:hover { opacity: .8; }
.cwl-add-to-clan {
  width: 100%; margin-top: 6px; font-size: 11px;
  background: rgba(255,255,255,.04); border: 1px dashed var(--border);
  color: var(--text-muted);
}
.cwl-add-to-clan:hover { border-color: var(--accent); color: var(--accent); }

/* ── Modal assignation ──────────────────────────────────────────── */
.cwl-assign-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13px; margin-bottom: 2px;
}
.cwl-assign-row:hover { background: var(--surface2); }

/* ── Rotation ───────────────────────────────────────────────────── */
.cwl-rotation-controls {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.cwl-rotation-controls select {
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 13px; flex: 1; min-width: 160px;
}
.cwl-rotation-wrap { overflow-x: auto; }
.cwl-rotation-table-inner { border-collapse: collapse; font-size: 12px; }
.cwl-rotation-table-inner th,
.cwl-rotation-table-inner td {
  padding: 5px 10px; border: 1px solid var(--border);
  text-align: center; white-space: nowrap;
}
.cwl-rotation-table-inner th { background: var(--surface2); font-weight: 600; }
.cwl-rotation-table-inner td:first-child { text-align: left; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.rot-play  { color: var(--success); font-weight: 700; }
.rot-bench { color: var(--text-muted); }
.rot-bench-count-hi  { color: var(--warning); font-weight: 600; }
.rot-bench-count-mid { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════
   Tournois
   ══════════════════════════════════════════════════════════════════ */

/* ── Cartes liste ───────────────────────────────────────────────── */
.trn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.trn-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.trn-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.trn-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.trn-card-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.trn-card-meta { font-size: 12px; color: var(--text-muted); }

/* ── Badges ─────────────────────────────────────────────────────── */
.trn-format-badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 700; background: rgba(139,148,158,.2);
  color: var(--text-muted); text-transform: uppercase;
}
.trn-status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
}
.trn-status-open     { background: rgba(121,192,255,.18); color: var(--accent2); }
.trn-status-running  { background: rgba(63,185,80,.18);   color: var(--success); }
.trn-status-finished { background: rgba(139,148,158,.2);  color: var(--text-muted); }

/* ── Bracket ────────────────────────────────────────────────────── */
.trn-bracket { overflow-x: auto; }
.trn-bracket-inner {
  display: flex; gap: 24px; align-items: flex-start;
  padding-bottom: 8px; min-width: max-content;
}
.trn-round { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.trn-round-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600; margin-bottom: 4px;
}

/* ── Match ──────────────────────────────────────────────────────── */
.trn-match {
  border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; position: relative;
}
.trn-match.pending { border-style: dashed; }
.trn-match.done    { border-color: rgba(63,185,80,.3); }
.trn-match.pending[onclick] { cursor: pointer; }
.trn-match.pending[onclick]:hover { border-color: var(--accent); background: rgba(255,255,255,.02); }
.trn-player {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--border);
}
.trn-player:last-child { border-bottom: none; }
.trn-player.winner {
  background: rgba(63,185,80,.12); color: var(--success); font-weight: 700;
}
.trn-score {
  font-size: 12px; font-weight: 700; color: var(--accent2); min-width: 20px; text-align: right;
}
.trn-tbd   { color: var(--text-muted); font-style: italic; font-size: 12px; }
.trn-bye   {
  position: absolute; top: 4px; right: 6px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); background: var(--surface2); padding: 1px 5px; border-radius: 4px;
}

/* ── Modal résultat ─────────────────────────────────────────────── */
.trn-winner-btn { flex: 1; min-width: 100px; text-align: center; }
.trn-winner-btn.selected {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ── Phase 4 : Discord OAuth + profil ──────────────────────────────── */
/* .login-separator (le "ou" entre 2 modes de connexion affichés côte à côte) retirée le
   2026-08-19 — plus aucun usage : login.html présente désormais Discord/compte du site comme 2
   écrans séparés plutôt que 2 blocs empilés avec un séparateur entre eux. */

.btn-discord-login {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 10px 16px;
  background: #5865F2; color: #fff;
  border-radius: 8px; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  transition: background 0.15s;
}
.btn-discord-login:hover { background: #4752C4; }

/* Page de connexion : Discord mis en avant, compte du site relégué à un 2e bouton qui bascule
   vers un écran séparé (retour utilisateur 2026-08-18, revu le jour même — un simple lien qui
   dépliait le mot de passe AU MÊME ENDROIT ne convenait pas : il faut un vrai bouton + un écran
   à part, cf. #section-internal dans login.html). Discord reste le mode de connexion normal pour
   tout le monde, le compte du site n'est qu'un filet de secours. */
.btn-discord-login-primary { padding: 13px 16px; font-size: 15px; box-shadow: 0 2px 8px rgba(88,101,242,0.35); }
.btn-site-login { padding: 10px 16px; font-size: 13px; }
.link-back {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 12px; color: var(--text-muted); margin-bottom: 14px;
}
.link-back:hover { color: var(--text); }

/* Chips comptes CoC dans "Mon compte" */
.coc-link-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 6px;
}
.coc-link-chip .coc-name { font-weight: 600; flex: 1; }
.coc-link-chip .coc-tag  { font-size: 11px; color: var(--text-muted); }
.coc-link-chip .coc-th   {
  font-size: 11px; background: var(--accent); color: #fff;
  border-radius: 4px; padding: 2px 6px; font-weight: 600;
}
.coc-link-chip .coc-main-star { color: #f0c040; font-size: 14px; }
.btn-unlink {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 16px; padding: 0 2px;
  transition: color 0.15s;
}
.btn-unlink:hover { color: var(--accent); }

/* ── Phase 6 : Ressources YouTube ─────────────────────────────────────── */
/* align-items: flex-end (était center, retour utilisateur 2026-08-19) — les filtres (.wb-filter-group
   = label + select empilés) sont plus hauts qu'un simple bouton ; centrer les boutons sur cette
   hauteur totale les décalait visuellement par rapport au bas des select, là où l'œil les compare.
   flex-end aligne tout le monde sur le bas de la ligne — select ET boutons, cf. règle dédiée
   ci-dessous qui donne aux boutons directs de .res-toolbar EXACTEMENT le gabarit de .res-select
   (même padding/font-size, donc même hauteur rendue). Sans effet sur l'autre .res-toolbar du site
   (Vidéos) : tous ses éléments sont déjà de la même hauteur (pas de label empilé), flex-end y rend
   donc le même résultat que center. */
.res-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-bottom: 14px;
}
.res-toolbar > .btn { padding: 7px 10px; font-size: 12px; }
.res-search-wrap {
  display: flex; gap: 8px; flex: 1; min-width: 240px;
}
.res-search-input {
  flex: 1; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 13px;
}
.res-search-input:focus { outline: none; border-color: var(--accent2); }
.res-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.res-select {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 7px 10px;
  font-size: 12px; cursor: pointer;
}

.res-quick-tags {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.res-tag {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 12px; font-size: 12px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.res-tag:hover { background: var(--accent2); border-color: var(--accent2); color: #fff; }

.res-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  transition: opacity 0.2s;
}
.res-video-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.res-video-card:hover {
  border-color: var(--accent2); transform: translateY(-2px);
}
.res-thumb-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: #0d1117;
}
.res-thumb {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.2s;
}
.res-video-card:hover .res-thumb { transform: scale(1.04); }
.res-play-icon {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 32px; color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.15s;
}
.res-video-card:hover .res-play-icon { opacity: 1; }
.res-video-info {
  padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.res-video-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.res-video-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-muted); margin-top: auto;
}
.res-channel { font-weight: 500; color: var(--accent2); }

.spinner-sm {
  display: inline-block; width: 20px; height: 20px;
  border: 2px solid var(--border); border-top-color: var(--accent2);
  border-radius: 50%; animation: spin 0.7s linear infinite;
  vertical-align: middle; margin-right: 8px;
}

/* ── Banque de bases CoC (Ressources → sous-onglet Bases) ─────────────── */
/* Toggle Bases/Joueurs — clone visuel de .sub-tabs/.sub-tab-btn, classes distinctes exprès :
   .sub-tab-btn a un handler délégué générique attaché à toute la page, le réutiliser ici casserait
   les vrais sous-onglets de Ressources (Bases/Vidéos). */
.wb-view-toggle {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px; width: fit-content;
}
.wb-view-btn {
  padding: 6px 16px; background: none; border: none; border-radius: 6px;
  color: var(--text-muted); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all 0.15s;
}
.wb-view-btn:hover { color: var(--text); }
.wb-view-btn.active { background: var(--bg); color: var(--accent2); box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

/* Libellés au-dessus des filtres de la grille (retour utilisateur 2026-08-17 : les 4 filtres
   n'étaient pas assez explicites pris isolément, ex. "Toutes les bases" seul ne dit pas que
   c'est le filtre de CATÉGORIE). */
.wb-filter-group { display: flex; flex-direction: column; gap: 3px; }
.wb-filter-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); font-weight: 600; padding-left: 1px;
}

/* Petit feedback visuel au clic (retour utilisateur 2026-08-17, 3e lot) : rien ne montrait qu'un
   clic sur le bouton Actualiser avait bien été pris en compte. */
@keyframes wbPulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.wb-btn-pulse { animation: wbPulse 0.35s ease; }

.wb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  transition: opacity 0.2s;
}
.wb-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.wb-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.wb-card-body { cursor: pointer; display: flex; flex-direction: column; flex: 1; }
.wb-thumb-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden; background: #0d1117;
}
.wb-thumb-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(121,192,255,0.10), transparent 70%);
}
.wb-thumb-fallback-icon { font-size: 46px; opacity: 0.55; }
.wb-thumb-fallback-label { font-size: 11px; color: var(--text-muted); letter-spacing: 0.3px; }
.wb-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 1; }
.wb-badge {
  background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 20px;
}
/* Fraîcheur (âge de la base) — vert < 14j, neutre 14-30j (style badge par défaut), ambre > 30j */
.wb-badge.wb-age-fresh { background: rgba(63,185,80,0.85); }
.wb-badge.wb-age-stale { background: rgba(210,153,34,0.85); }
.wb-info { padding: 10px 12px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wb-title { font-size: 13px; font-weight: 600; color: var(--text); }
.wb-notes {
  font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.wb-meta-line { font-size: 11px; color: var(--text-muted); margin-top: auto; }
/* Pseudo Discord réel (@identifiant du compte, pas le nom d'affichage qui peut être arbitraire) —
   retour utilisateur 2026-08-17, 2e correction : affiché en petit et gris sous le nom d'affichage,
   sur la carte (wb-meta-line) ET dans la popup détail (wbd-meta). */
.wb-meta-username { font-size: 10px; color: var(--text-muted); opacity: .75; margin-top: 2px; }
/* Note universelle /10 (remplace le vote 👍/👎 partout, retour utilisateur 2026-08-17) — simple
   ligne d'info en pied de carte, plus de boutons cliquables ici : noter se fait depuis la popup
   détail (wbd-rating-wrap), pas directement sur la carte. */
.wb-rating-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text);
}
.wb-rating-count { color: var(--text-muted); font-weight: 400; }
/* Places réservées sur 5 (bases hors pack exclusif) — pendant du badge 🔒/🔓 des packs exclusifs,
   affiché juste à côté de la note dans .wb-rating-row plutôt que dans .wb-badges (celui-ci reste
   focalisé HDV/type/âge/exclusivité, cf. renderBasesGrid). */
.wb-reserve-badge {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
}
.wb-reserve-badge.wb-reserve-badge-mine { color: var(--success, #2ecc71); border-color: var(--success, #2ecc71); }
.wb-icon-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; padding: 2px 4px; transition: color 0.15s;
}
.wb-icon-btn:hover { color: var(--text); }
.wb-report-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; font-size: 12px;
}
/* Section repliable (ex. "Bases masquées") + zone à défilement interne limitée à ~5 lignes
   (retour utilisateur 2026-08-19) — la liste ne pousse plus le reste de la page vers le bas
   quel que soit le nombre de bases masquées ; ~62px = hauteur mesurée d'une .wb-report-row
   (padding + 2 lignes de texte + marge). */
/* Le contour délimitait initialement UNIQUEMENT la liste (.wb-scroll-5) — retour utilisateur
   2026-08-19 : le titre "Bases masquées", pourtant le vrai déclencheur du clic, restait hors de
   toute zone visuellement délimitée, sans indice qu'il est cliquable. Un seul contour englobe
   maintenant tout le bloc (titre + description + liste, cf. .wb-collapsible-card dans
   stats.html), et l'en-tête gagne un fond légèrement plus clair au survol — même teinte que la
   ligne 476 ci-dessus (#1d2430, "légèrement plus clair que --surface") — pour signaler la zone
   cliquable sans dépendre uniquement du curseur. */
.wb-collapsible-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
}
.wb-collapsible-header {
  cursor: pointer; user-select: none; display: flex;
  border-radius: 6px; padding: 4px 6px; margin: -4px -6px; transition: background 0.15s;
}
.wb-collapsible-header:hover { background: #1d2430; }
.wb-collapsible-header:hover h3 { color: var(--accent2); }
.wb-collapsible-chevron { color: var(--text-muted); font-size: 11px; transition: transform 0.15s; display: inline-block; }
.wb-collapsible-chevron.open { transform: rotate(90deg); }
.wb-scroll-5 { max-height: 310px; overflow-y: auto; padding-right: 4px; margin-top: 8px; }

/* « Ajout rapide » — une ligne par base (lien + image), générées dynamiquement par JS
   (retour utilisateur 2026-08-19, remplace le textarea unique "colle tous les liens"). */
.wb-rapide-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.wb-rapide-row input[type="text"] {
  flex: 1; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 10px; font-size: 13px;
}
.wb-rapide-img { width: 96px; flex-shrink: 0; }
.wb-rapide-img-btn { width: 100%; font-size: 11px; padding: 6px 4px; }
.wb-rapide-img-preview { position: relative; margin-top: 4px; }
.wb-rapide-img-thumb { width: 100%; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; }
.wb-rapide-img-remove {
  position: absolute; top: -6px; right: -6px; background: var(--danger, #e74c3c); color: #fff;
  border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; line-height: 18px;
  padding: 0; cursor: pointer;
}
.wb-rapide-img-status { font-size: 10px; color: var(--text-muted); margin-top: 2px; text-align: center; }
.wb-rapide-row-remove { flex-shrink: 0; }
.wb-player-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.wb-player-row:hover { border-color: var(--accent2); background: var(--surface); }
/* Surligne sa(ses) propre(s) ligne(s) dans le bilan défensif (retour utilisateur 2026-08-19) —
   fond teinté persistant (pas juste le survol) + petit badge "toi", pour ne pas dépendre de la
   seule couleur (accessibilité) et confirmer explicitement ce que la teinte signifie. */
.wb-player-row-me { border-color: var(--accent2); background: rgba(121,192,255,0.08); }
.wb-player-row-me:hover { background: rgba(121,192,255,0.14); }
.wb-me-badge {
  display: inline-block; margin-left: 4px; padding: 1px 6px;
  background: var(--accent2); color: var(--bg); border-radius: 4px;
  font-size: 10px; font-weight: 600; vertical-align: middle;
}
.wb-player-stat { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.wb-user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px 3px 12px; font-size: 12px;
}
.wb-user-chip button {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px;
}
.wb-user-result-row {
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.wb-user-result-row:hover { background: var(--surface); }

/* ── Formulaires de réglages des modules (Niveaux, Bienvenue…) ─────────────
   `.mf-form` : sur un <details> (réglages repliables, cf. Niveaux) ou sur une carte simple. */
.mf-hint { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.mf-form { padding: 0; margin-bottom: 12px; }
.mf-form > summary { padding: 12px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mf-body { display: grid; gap: 18px; padding: 4px 16px 16px; }
div.mf-form > .mf-body { padding-top: 16px; }
.mf-block { display: grid; gap: 10px; max-width: 640px; }
.mf-block + .mf-block { padding-top: 16px; border-top: 1px solid var(--border); }
.mf-block h3 { font-size: 13px; margin: 0; }
.mf-sub { display: grid; gap: 10px; padding-left: 24px; }
.mf-field { display: grid; gap: 4px; }
.mf-field > label { font-size: 12px; color: var(--text-muted); }
.mf-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.mf-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.mf-form select, .mf-form textarea, .mf-form input[type=number] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 6px 8px; font-size: 13px; font-family: inherit;
}
.mf-form input[type=color] {
  width: 44px; height: 30px; padding: 2px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.mf-form option { background: var(--surface); color: var(--text); }
.mf-form textarea { width: 100%; resize: vertical; }
.mf-form .mf-num, .lv-reward-level { width: 76px; }
.mf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-chips:empty { display: none; }
.mf-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.mf-actions > div:empty { display: none; }

/* ── Niveaux & XP (onglet Niveaux — module levels, lot E, plan.md §432) ── */
.lv-reward-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lv-board-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.lv-board-head h3 { font-size: 14px; margin: 0; }
.lv-board-head .btn { margin-left: auto; }
.lv-table td { vertical-align: middle; }
.lv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lv-rank { font-weight: 700; color: var(--text-muted); }
.lv-rank-1 { color: var(--gold); }
.lv-rank-2 { color: var(--silver); }
.lv-rank-3 { color: var(--bronze); }
.lv-member { display: inline-flex; align-items: center; gap: 10px; }
.lv-avatar {
  display: inline-block; width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: var(--border); object-fit: cover;
}
.lv-level {
  display: inline-block; min-width: 30px; padding: 2px 9px; border-radius: 999px;
  text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(247, 129, 102, 0.14); color: var(--accent);
}
.lv-bar { width: 150px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.lv-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.lv-bar-lbl { margin-top: 4px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Rôles-réactions (onglet — module reactionroles, lot E, plan.md §438) ── */
.rr-card { margin-bottom: 10px; }
.rr-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rr-badge {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.rr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rr-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 10px;
  border-radius: 999px; background: var(--bg); border: 1px solid var(--border);
}
.rr-chip-off { opacity: 0.5; text-decoration: line-through; }
.rr-chip-role { color: var(--text-muted); }
.rr-styles { display: flex; flex-wrap: wrap; gap: 14px; }
.modal .form-group .rr-styles label,
.modal .form-group .rr-pair label.rr-pair-active {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px;
  color: var(--text); cursor: pointer;
}
.rr-pair { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rr-pair .rr-pair-emoji { width: 76px; }
.rr-pair .rr-pair-label { flex: 1 1 150px; width: auto; }
.rr-pair select { flex: 1 1 150px; }

/* ── Modération (onglet — module moderation, lot E, plan.md §439) ── */
.md-step { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.md-step + .md-step { margin-top: 6px; }
.md-cases-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.md-cases-head h3 { font-size: 14px; margin: 0; }
.md-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.md-filters select, .md-filters input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 6px 8px; font-size: 13px; font-family: inherit;
}
.md-filters option { background: var(--surface); color: var(--text); }
.md-filters input[type=search] { width: 180px; }
.md-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text-muted);
}
.md-table td { vertical-align: top; }
.md-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.md-table .md-reason { min-width: 180px; max-width: 360px; white-space: normal; overflow-wrap: anywhere; }
.md-revoked td { opacity: 0.55; }

/* ── Rôles & permissions ──────────────────────────────────────────────── */
.role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 11px;
  font-size: 11px; font-weight: 600; color: #fff;
  white-space: nowrap; line-height: 1.5;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

/* Modal large pour l'éditeur de rôle */
.modal.modal-lg { max-width: 520px; width: 100%; }

/* Palette de couleurs */
.role-color-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.role-color-swatch {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .1s;
}
.role-color-swatch:hover { transform: scale(1.12); }
.role-color-swatch.selected {
  border-color: var(--text); box-shadow: 0 0 0 2px var(--accent2);
}

/* Matrice Voir / Agir */
.role-perm-matrix .perm-matrix-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.role-perm-matrix .perm-matrix-table th,
.role-perm-matrix .perm-matrix-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left;
}
.role-perm-matrix .perm-matrix-table th { color: var(--text-muted); font-weight: 600; }
.role-perm-matrix .perm-matrix-table th:nth-child(2),
.role-perm-matrix .perm-matrix-table th:nth-child(3) { text-align: center; width: 60px; }
.role-perm-matrix .perm-matrix-table input[type="checkbox"] { cursor: pointer; }

/* Listes de cases « rôles » (création de compte / affectation) */
.member-roles-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.role-check-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border);
}
.role-check-row:hover { background: var(--bg); }
.role-check-row.is-disabled { opacity: .45; cursor: not-allowed; }
.role-check-row input { cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════════
   Responsive — navigation défilante (pastilles) + adaptation par appareil
   ════════════════════════════════════════════════════════════════════════════ */

/* Barres de nav qui défilent horizontalement proprement (sections, onglets, sous-onglets) */
.scroll-x {
  overflow-x: auto; overflow-y: hidden;
  flex-wrap: nowrap !important;
  scrollbar-width: none;                 /* Firefox */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.scroll-x::-webkit-scrollbar { display: none; }   /* Chrome / Safari */
.scroll-x > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

/* Fondu latéral : indique qu'il reste des éléments à gauche / à droite */
.scroll-x.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
}
.scroll-x.fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26px);
          mask-image: linear-gradient(to right, transparent, #000 26px);
}
.scroll-x.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}

/* Header compact sur téléphone (le pseudo passe en retrait, libellé Accueil réduit) */
body.dev-phone header { padding: 8px 12px; gap: 6px; flex-wrap: wrap; }
body.dev-phone header h1 { font-size: 15px; line-height: 1.25; }
body.dev-phone .back-link { font-size: 0; padding: 4px 2px; }
body.dev-phone .back-link::before { content: "←"; font-size: 18px; }
body.dev-phone .auth-user { display: none; }

/* Confort tactile : cibles un peu plus grandes sur téléphone */
body.dev-phone .tab-btn { padding: 9px 14px; }

/* Icône + libellé d'un bouton de section (côte à côte sur PC / tablette) */
.sec-ico { margin-right: 5px; }

/* Empêche TOUT débordement horizontal du document (sinon, sur mobile, ça autorise un
   défilement latéral parasite ET casse le position:fixed de la barre du bas, qui se
   cale alors au bas du contenu). On bloque sur html ET body (le scroll mobile est sur html),
   on « clippe » le contenu de .main, et on contraint les barres défilantes.
   Les tableaux larges gardent leur propre défilement interne (.cwl-table-wrap, .table-wrap…). */
html.dev-phone, body.dev-phone { overflow-x: hidden; max-width: 100vw; }
body.dev-phone .main { overflow-x: clip; }
body.dev-phone .scroll-x { max-width: 100%; }

/* ── Téléphone : zone de navigation fixée en bas (sections + onglets + sous-onglets) ──
   Toutes les barres sont regroupées dans #bottom-bars (créé en JS), empilées en flex
   column : sous-onglets en haut, puis onglets, puis sections tout en bas. Tout au pouce. */
#bottom-bars { display: none; }
body.dev-phone #bottom-bars {
  display: flex; flex-direction: column;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Les barres déplacées dans la zone du bas repassent en statique (le conteneur est fixe) */
body.dev-phone #bottom-bars > .section-nav,
body.dev-phone #bottom-bars > .tabs,
body.dev-phone #bottom-bars > .sub-tabs,
body.dev-phone #bottom-bars > .wb-view-toggle {
  position: static; bottom: auto; margin: 0; z-index: auto; border-radius: 0;
  box-shadow: none; width: auto;   /* était "width: fit-content" en desktop pour .sub-tabs/.wb-view-toggle */
}
/* Sections : icônes + libellés répartis, tout en bas (pas de fondu : tout tient) */
body.dev-phone #bottom-bars > .section-nav {
  display: flex; gap: 2px; overflow: visible;
  padding: 3px 4px; border-top: 1px solid var(--border); background: var(--surface);
  -webkit-mask-image: none; mask-image: none;
}
body.dev-phone .section-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: none !important; background: none; border-radius: 10px;
  padding: 4px 2px; color: var(--text-muted);
}
body.dev-phone .section-btn .sec-ico { margin: 0; font-size: 17px; line-height: 1; }
body.dev-phone .section-btn .sec-lbl {
  font-size: 8.5px; line-height: 1; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dev-phone .section-btn.active { background: rgba(121,192,255,0.12); color: var(--accent2); }

/* Onglets & sous-onglets : MÊME rendu que .section-btn ci-dessus (icône au-dessus, libellé en
   dessous — retour utilisateur 2026-08-19 : « ce que tu as descendu en bas doit être affiché
   comme tout le reste sur tel »). Les <span class="sec-ico">/<span class="sec-lbl"> sont injectés
   au runtime par _splitIconLabel (cf. main.js, .tab-btn/.sub-tab-btn/.wb-view-btn n'ont pas ces
   spans dans le HTML statique, contrairement à .section-btn) — les règles ci-dessus les stylent
   donc déjà normalement, seul le conteneur + le bouton "brut" (avant JS, ou si Intl.Segmenter est
   indisponible) ont besoin d'une règle dédiée ici. Tailles réduites (retour utilisateur
   2026-08-19 : « pk aussi gros en hauteur ? » — jusqu'à 3 barres empilées avec le gabarit d'origine
   prenaient trop de place cumulée). */
body.dev-phone #bottom-bars > .tabs,
body.dev-phone #bottom-bars > .sub-tabs,
body.dev-phone #bottom-bars > .wb-view-toggle {
  display: flex; gap: 2px;
  padding: 3px 4px; background: var(--surface);
  border-top: 1px solid var(--border); border-bottom: none;
}
body.dev-phone #bottom-bars .tab-btn,
body.dev-phone #bottom-bars .sub-tab-btn,
body.dev-phone #bottom-bars .wb-view-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: none !important; background: none; border-radius: 10px;
  padding: 4px 2px; color: var(--text-muted); font-size: 8.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Toggle Parcourir/Bilan défensif/Admin : cardinalité fixe basse (2-3 choix connus d'avance,
   jamais plus) → remplissage égal de toute la largeur, comme .section-btn. */
body.dev-phone #bottom-bars .wb-view-btn {
  flex: 1 1 0; min-width: 0;
}
/* #main-tabs (.tab-btn) ET .sub-tabs (.sub-tab-btn) : cardinalité VARIABLE selon la section —
   jusqu'à 8 onglets pour Administration, jusqu'à 5 sous-onglets pour Stats (GDC/Ligues de guerre/
   Raids/Mode classé/Jeux de Clan). Retour utilisateur 2026-08-19 : « ça a cassé le menu
   administration car y'a bcp d'onglets » — un flex:1 1 0 générique écrasait les 8 boutons Admin à
   ~47px de large chacun → libellés tronqués illisibles ("Messages a…", "Ligues CW…") ; même risque
   pour les sous-onglets à 5 (non signalé sur capture mais même cause). flex-grow:1 remplit toute
   la largeur quand ça tient (2 onglets Statistiques/Compétitions, 2 sous-onglets Bases/Vidéos,
   comme avant) ; flex-shrink:0 empêche de descendre sous 72px → au-delà (Administration, et Stats
   si besoin), la barre défile horizontalement au lieu d'écraser, via .scroll-x/bindScrollFade déjà
   posés sur TOUTE barre .tabs/.sub-tabs par initResponsive() (fondu latéral inclus gratuitement) —
   jusqu'ici neutralisés par erreur par le flex:1 1 0 trop générique. */
body.dev-phone #bottom-bars .tab-btn,
body.dev-phone #bottom-bars .sub-tab-btn {
  flex: 1 0 72px;
}
body.dev-phone #bottom-bars .tab-btn .sec-ico,
body.dev-phone #bottom-bars .sub-tab-btn .sec-ico,
body.dev-phone #bottom-bars .wb-view-btn .sec-ico { font-size: 17px; line-height: 1; }
body.dev-phone #bottom-bars .tab-btn .sec-lbl,
body.dev-phone #bottom-bars .sub-tab-btn .sec-lbl,
body.dev-phone #bottom-bars .wb-view-btn .sec-lbl {
  font-size: 8.5px; line-height: 1; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.dev-phone #bottom-bars .tab-btn.active,
body.dev-phone #bottom-bars .sub-tab-btn.active,
body.dev-phone #bottom-bars .wb-view-btn.active {
  /* box-shadow: none — leur version desktop (.active) en pose une (0 1px 4px…) ; .section-btn.active,
     lui, n'en a jamais eu, donc rien à neutraliser côté section-nav plus haut. */
  background: rgba(121,192,255,0.12); color: var(--accent2); box-shadow: none;
}

/* Place pour la zone du bas (fallback ; affiné dynamiquement par JS selon le nb de barres) */
body.dev-phone .main { padding-bottom: 100px; }

/* ── Téléphone : longues listes (tableaux) → cartes empilées compactes ──────── */
body.dev-phone .card-table,
body.dev-phone .card-table tbody { display: block; width: 100%; }
body.dev-phone .card-table thead { display: none; }   /* en-têtes masqués : chaque valeur porte son libellé */
body.dev-phone .card-table tr {
  display: block; margin: 0 0 8px; padding: 7px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
body.dev-phone .card-table td {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 2px 0; border: none !important; text-align: right;
  white-space: normal; font-size: 12.5px; min-height: 0;
}
body.dev-phone .card-table td::before {
  content: attr(data-label); color: var(--text-muted); font-weight: 600;
  font-size: 10px; text-transform: uppercase; letter-spacing: .03em;
  text-align: left; flex: 0 0 auto; white-space: nowrap;
}
/* Cellules sans libellé (titre / actions / case à cocher) : pleine largeur, pas de préfixe */
body.dev-phone .card-table td:not([data-label]) { justify-content: flex-start; text-align: left; }
body.dev-phone .card-table td:not([data-label])::before { content: none; }
/* Titre de carte = nom du joueur / compte / rôle */
body.dev-phone .card-table td.card-title {
  font-weight: 700; font-size: 14px;
  border-bottom: 1px solid var(--border); padding-bottom: 5px; margin-bottom: 3px;
}
body.dev-phone .card-table td.card-actions { justify-content: flex-end; gap: 6px; padding-top: 6px; }
/* En-têtes de groupe (lignes colspan : « CWL Compétition · 109 ») */
body.dev-phone .card-table tr.cwl-group-header {
  padding: 6px 10px; background: var(--surface2);
}
body.dev-phone .card-table tr.cwl-group-header td { display: block; text-align: left; }
body.dev-phone .card-table tr.cwl-group-header td::before { content: none; }
/* Séparateur de roster (vue à plat, pas de header) : même traitement, !important pour
   gagner à coup sûr sur .card-table td (display:flex) et .cwl-table.card-dense tr
   (padding-right:60px) qui, sinon, réduisent la barre colorée à la largeur de son contenu
   au lieu de la laisser courir sur toute la largeur de la carte (retour utilisateur). */
body.dev-phone .card-table tr.cwl-group-header td,
body.dev-phone .card-table tr.cwl-group-sep td {
  width: 100% !important; padding-right: 0 !important;
}
body.dev-phone .card-table tr.cwl-group-sep td { display: block; text-align: left; }
body.dev-phone .card-table tr.cwl-group-sep td::before { content: none; }

/* Mode DENSE : nom en titre, puis les valeurs enchaînées sur 1-2 lignes (mini-libellés).
   ~12-15 items visibles d'un coup. Carte fine = séparation visuelle. Pas pour les logs. */
body.dev-phone .card-table.card-dense tr {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px;
  margin-bottom: 4px; padding: 5px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
}
body.dev-phone .card-table.card-dense td {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 0; border: none !important; font-size: 11.5px;
  text-align: left; white-space: nowrap;
}
body.dev-phone .card-table.card-dense td::before {
  content: attr(data-label); color: var(--text-muted); font-weight: 600;
  font-size: 8.5px; text-transform: uppercase; opacity: .7; letter-spacing: 0;
  flex: 0 0 auto;
}
body.dev-phone .card-table.card-dense td.card-title {
  flex: 1 1 100%; font-size: 13px; font-weight: 700; white-space: normal;
  border-bottom: none; padding: 0; margin: 0 0 2px;
}
body.dev-phone .card-table.card-dense td.card-actions { margin-left: auto; gap: 4px; }
/* Colonne « # » (rang) masquée sur mobile : peu utile, gagne de la place */
body.dev-phone .card-table td[data-label="#"] { display: none; }
/* En mode carte, neutralise les min-width/max-width des tables éditables (sinon débordent) */
body.dev-phone .card-table { min-width: 0 !important; max-width: 100% !important; }
/* Cartes éditables (card-plain) : la valeur (input/select) se cale à droite, libellé à gauche */
body.dev-phone .card-plain.card-table td { gap: 10px; }
body.dev-phone .card-plain.card-table td input,
body.dev-phone .card-plain.card-table td select { margin-left: auto; }

/* Inscriptions : actions (modifier / retirer) en haut à droite, alignées avec la case
   à cocher → on économise la ligne d'actions dédiée. */
body.dev-phone .cwl-table.card-dense tr { position: relative; padding-right: 60px; }
body.dev-phone .cwl-table.card-dense td.card-actions {
  position: absolute; top: 4px; right: 8px; margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase D — Finitions tactiles (téléphone)
   ════════════════════════════════════════════════════════════════════════════ */

/* Modals en « feuille » qui monte du bas (bottom sheet), pleine largeur */
body.dev-phone .modal-backdrop { align-items: flex-end; }
body.dev-phone .modal {
  width: 100%; max-width: 100%; min-width: 0;
  max-height: 92vh; border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: sheet-up .22s ease;
}
body.dev-phone .modal.modal-lg { max-width: 100%; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Cibles tactiles plus généreuses (hors cartes, qu'on garde denses) */
body.dev-phone .btn { padding: 9px 14px; }
body.dev-phone .btn-sm { padding: 7px 11px; font-size: 13px; }
body.dev-phone .card-table .btn-sm,
body.dev-phone .card-table .btn { padding: 5px 8px; font-size: 12px; }   /* compacts dans les cartes */
/* 16px sur les champs : évite le zoom automatique d'iOS au focus */
body.dev-phone input[type=text], body.dev-phone input[type=password],
body.dev-phone input[type=email], body.dev-phone input[type=number],
body.dev-phone select, body.dev-phone textarea { font-size: 16px; padding: 9px 11px; }
body.dev-phone .card-table input, body.dev-phone .card-table select { font-size: 13px; padding: 2px 4px; }

/* Le drag & drop ne fonctionne pas au doigt → poignée masquée sur téléphone
   (l'assignation se fait en touchant un joueur du vivier ou « + Ajouter » d'un clan) */
body.dev-phone .drag-handle { display: none; }

/* ── Compacité de l'onglet Comptes ─────────────────────────────────────────── */
.role-badge.role-more { background: #555; font-weight: 600; }
.acct-sub { font-size: 11px; color: var(--text-muted); font-weight: 400; }

/* Téléphone : actions des comptes en haut à droite (comme les inscriptions) →
   le nom + les boutons sur la 1ʳᵉ ligne, le reste (rôles/statut/login) en dessous. */
body.dev-phone .accounts-table.card-dense tr { position: relative; padding-right: 104px; }
body.dev-phone .accounts-table.card-dense td.card-actions {
  position: absolute; top: 5px; right: 7px; margin: 0; gap: 3px;
}
body.dev-phone .accounts-table.card-dense td.card-actions .btn { padding: 4px 6px; font-size: 12px; }
body.dev-phone .accounts-table.card-dense td.card-title { font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════════
   Lot A/B 2026-06-26 — compacité mobile (en-tête, filtres, Orga CWL, inscriptions)
   ════════════════════════════════════════════════════════════════════════════ */

/* A1 — En-tête sur UNE seule ligne sur téléphone ----------------------------- */
.lbl-icon { display: none; }                 /* libellé complet par défaut (PC) */
body.dev-phone .h1-long { display: none; }   /* nom du produit masqué sur tél (place à la section) */
body.dev-phone .lbl-full { display: none; }  /* « Déconnexion » → icône 🚪      */
body.dev-phone .lbl-icon { display: inline; }
body.dev-phone header { flex-wrap: nowrap; }
body.dev-phone header h1 {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La barre compte reste sur la même ligne (annule le renvoi en 2e ligne) */
body.dev-phone .auth-nav {
  order: 0; width: auto; margin-left: auto;
  padding-top: 0; border-top: none; gap: 6px; flex: 0 0 auto;
}
/* Les deux boutons icône (👤 compte, 🚪 déconnexion) = exactement la même taille */
body.dev-phone #btn-mon-compte,
body.dev-phone #btn-logout { font-size: 15px; padding: 6px 10px; line-height: 1; }

/* A2 — Panneau de filtres Stats repliable (replié par défaut sur tél) -------- */
.filter-toggle { display: none; }            /* visible seulement sur téléphone */
body.dev-phone .filter-block > .filter-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; cursor: pointer;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-weight: 600;
}
body.dev-phone .filter-block.filters-open > .filter-toggle { margin-bottom: 10px; }
body.dev-phone .filter-block:not(.filters-open) > .filter-row,
body.dev-phone .filter-block:not(.filters-open) > .presets-list { display: none; }
.filter-toggle .filter-toggle-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-toggle .filter-caret { color: var(--text-muted); font-size: 12px; flex: 0 0 auto; }
/* Bouton « Charger » sorti de la zone repliable → toujours visible. */
.filter-load-btn { margin-top: 10px; }
body.dev-phone .filter-block > .filter-load-btn { width: 100%; margin-top: 8px; }

/* A3 — En-tête Orga CWL allégé sur téléphone -------------------------------- */
body.dev-phone .cwl-header { margin-bottom: 4px; }
body.dev-phone .cwl-header select,
body.dev-phone .cwl-header .btn,
body.dev-phone .cwl-header .btn-sm { font-size: 12px; padding: 5px 8px; }
body.dev-phone #cwl-active-banner { font-size: 12px; padding: 6px 10px; margin-top: 6px; }

/* A4 — Pastille de niveau de ligue (repérage immédiat) ---------------------- */
.reg-league {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  background: rgba(88, 166, 255, 0.16); color: var(--accent, #58a6ff);
  font-weight: 600; font-size: 11px; line-height: 1.6; white-space: nowrap;
}
.reg-league-old {
  background: rgba(255, 255, 255, 0.06); color: var(--text-muted); font-style: italic;
}

/* ── Mise en évidence des stats clés (2026-06-27) ───────────────────────────── */
/* Étoiles moyennes : ressortent (or). Niveau de ligue : accent. Solo raids : vert (exploit). */
.stat-hl-star   { color: #f5b942; font-weight: 700; }
.stat-hl-league { color: var(--accent2, #a371f7); font-weight: 600; }
.stat-hl-solo   { color: var(--green, #3fb950); font-weight: 700; }
/* Fiabilité stat. : volontairement discrète (nuance de gris, pas mise en avant). */
.stat-rel       { color: var(--text-muted); font-size: 11px; font-weight: 400; }

/* ── Doublons même joueur dans un clan (composition) ────────────────────────── */
.cwl-player-row.cwl-dup { background: rgba(248, 81, 73, 0.13); border-radius: 6px; }
.cwl-dup-tag {
  font-size: 10px; font-weight: 700; color: var(--danger, #f85149);
  background: rgba(248, 81, 73, 0.18); padding: 0 5px; border-radius: 8px; white-space: nowrap;
}

/* ── Pages légales et pied de page légal (lot F, plan.md §443) ──────────────
   Mentions légales, confidentialité, conditions : des textes qu'on lit d'une traite, d'où une
   colonne étroite et un interlignage de lecture. Le pied de page y renvoie depuis les pages
   publiques (accueil, connexion, classement public). */
.site-legal {
  max-width: 860px; margin: 48px auto 0; padding: 18px 20px 28px;
  border-top: 1px solid var(--border);
  text-align: center; font-size: 12px; line-height: 1.6; color: var(--text-muted);
}
.site-legal[hidden] { display: none; }
.site-legal nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-bottom: 6px;
}
.site-legal a { color: var(--text-muted); text-underline-offset: 2px; }
.site-legal a:hover { color: var(--text); }
.site-legal p { max-width: 62ch; margin: 0 auto; }

.legal { max-width: 760px; margin: 0 auto; padding: 28px 20px 0; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.legal-nav a {
  padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.legal-nav a:hover { color: var(--text); }
.legal-nav a[aria-current="page"] {
  color: var(--text); border-color: var(--accent); background: var(--surface);
}
.legal h2 { font-size: clamp(22px, 4vw, 28px); line-height: 1.2; color: var(--text); text-wrap: balance; }
.legal-date { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.legal section { margin-top: 32px; scroll-margin-top: 16px; }
.legal h3 { margin-bottom: 10px; font-size: 16px; color: var(--text); text-wrap: balance; }
.legal h4 { margin: 18px 0 6px; font-size: 14px; color: var(--text); }
.legal p, .legal li { max-width: 70ch; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.legal p + p, .legal p + ul, .legal ul + p, .legal dl + p { margin-top: 10px; }
.legal ul { display: grid; gap: 5px; padding-left: 20px; }
.legal li::marker { color: var(--text-muted); }
/* Liens DANS le texte seulement : un simple `.legal a` (même poids que `.legal-nav a`, et placé
   après) teintait aussi les boutons de navigation entre les trois pages. */
.legal :is(p, li, dd) a { color: var(--accent2); }
.legal-summary {
  margin-top: 22px; padding: 16px 18px 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.legal-facts {
  display: grid; gap: 1px; margin-top: 12px; overflow: hidden;
  background: var(--border); border: 1px solid var(--border); border-radius: 10px;
}
.legal-facts > div {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px;
  padding: 10px 14px; background: var(--surface);
}
.legal-facts dt { font-size: 13px; color: var(--text-muted); }
.legal-facts dd { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.legal-table { margin-top: 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.legal-table table { width: 100%; border-collapse: collapse; }
/* white-space: normal — la règle générale `th, td` (tableaux de stats) interdit le retour à la
   ligne : les durées débordaient du cadre même sur ordinateur. */
.legal-table th, .legal-table td {
  padding: 9px 14px; border-bottom: 1px solid var(--border); white-space: normal;
  text-align: left; vertical-align: top; font-size: 13.5px; line-height: 1.5;
}
.legal-table th { font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface); }
.legal-table tbody tr:last-child td { border-bottom: 0; }
/* Adresse de contact pas encore réglée (.env) : visible, pour ne pas être oubliée. */
.legal-missing, .legal a.legal-missing { color: var(--warning); font-style: italic; }
@media (max-width: 520px) {
  .legal-facts > div { grid-template-columns: 1fr; gap: 2px; }
}