/* Padel Club — theme.css
 * Surcharges du MODE CLAIR (jour), partagées par TOUTES les pages.
 * Le mode sombre (nuit) reste le défaut : variables d'origine de chaque page.
 * Activé par <html data-theme="light"> (posé par theme.js). Beaucoup de règles
 * ciblent des classes communes (.input, .btn, .card…) pour rattraper les
 * couleurs codées « en dur » qui ne suivaient pas les variables.
 */
:root[data-theme="light"] {
  color-scheme: light;
  --bg1: #eef3fa; --bg2: #dbe6f5; --bg: #eef3fa;
  --panel: #ffffff; --panel-2: #eef2f8;
  --line: rgba(15, 23, 42, .14);
  --txt: #0f1b2d; --muted: #51617a;
  --accent: #477310; --accent2: #0369a1; --accent-dark: #ffffff;
}

/* Fond de page (certaines pages codent le fond en dur) */
:root[data-theme="light"] body { background: #eef3fa !important; color: #0f1b2d; }

/* Champs de saisie / listes déroulantes (fond sombre codé en dur → clair) */
:root[data-theme="light"] .input,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: #ffffff !important; color: #0f1b2d !important; border-color: rgba(15, 23, 42, .18) !important;
}
:root[data-theme="light"] ::placeholder { color: #64748b; opacity: 1; }
:root[data-theme="light"] option { background: #fff; color: #0f1b2d; }

/* Boutons */
:root[data-theme="light"] .btn { background: #e8eef7; color: #0f1b2d; border-color: rgba(15, 23, 42, .14); }
:root[data-theme="light"] .btn:hover { filter: brightness(.98); }
:root[data-theme="light"] .btn.primary { background: linear-gradient(135deg, #6aa80a, #4d7c0f) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 18px rgba(77, 124, 15, .28); }
:root[data-theme="light"] .btn.danger, :root[data-theme="light"] .btn.small.danger { color: #b91c1c; }

/* Un lien reste un lien, mais le bleu ciel du mode nuit ne tient pas sur du
   blanc. Même rôle, teinte tenue pour le jour. */
:root[data-theme="light"] a { color: #0369a1; }
:root[data-theme="light"] .lg-accent { color: #6d28d9; }

/* Cartes / conteneurs */
:root[data-theme="light"] .card { background: #ffffff; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
:root[data-theme="light"] .lg-tint { background: linear-gradient(180deg, rgba(139, 92, 246, .08), rgba(255, 255, 255, .55)) !important; border-color: rgba(120, 80, 200, .25) !important; }
/* La pastille neutre prend la teinte de la marque — mais une pastille
   « attention » ou « erreur » garde la sienne, sinon un avertissement
   s'affiche en vert et ne prévient plus de rien. */
:root[data-theme="light"] .badge:not(.ok):not(.warn):not(.err):not(.don) {
  background: rgba(77, 124, 15, .14); color: #36690b;
}
:root[data-theme="light"] .chip { background: #eef2f8; color: #0f1b2d; border-color: rgba(15, 23, 42, .12); }
:root[data-theme="light"] .inst { background: #fff; }
:root[data-theme="light"] td, :root[data-theme="light"] th { border-color: rgba(15, 23, 42, .1); }
:root[data-theme="light"] tr.me td { background: rgba(77, 124, 15, .08); }

/* Modale + démo guidée (accueil) */
:root[data-theme="light"] .modal { background: linear-gradient(180deg, #ffffff, #f1f5f9) !important; border-color: rgba(15, 23, 42, .12); box-shadow: 0 -18px 50px rgba(15, 23, 42, .18); }
:root[data-theme="light"] .modal-back { background: rgba(15, 23, 42, .42); }
:root[data-theme="light"] .modal-x { background: rgba(15, 23, 42, .06); color: #0f1b2d; border-color: rgba(15, 23, 42, .14); }
:root[data-theme="light"] .demo-card { background: #f4f7fb; border-color: rgba(15, 23, 42, .1); }
:root[data-theme="light"] .fake-tag { color: #a16207; background: rgba(161, 98, 7, .1); border-color: rgba(161, 98, 7, .25); }
:root[data-theme="light"] .demo-dots i { background: rgba(15, 23, 42, .18); }
:root[data-theme="light"] .demo-dots i.on { background: #4d7c0f; }

/* Changelog */
:root[data-theme="light"] #changelog .cl-ver { background: rgba(77, 124, 15, .14); color: #3f7d00; }

/* Écran de jeu mini (chrono, matchs) */
:root[data-theme="light"] .clock { color: #2f6b00 !important; }
:root[data-theme="light"] .match, :root[data-theme="light"] .prev-round, :root[data-theme="light"] .cap-card { background: #fff; }

/* Bouton flottant de thème */
#theme-fab { transition: background .15s; }
:root[data-theme="light"] #theme-fab { background: rgba(15, 23, 42, .07); border-color: rgba(15, 23, 42, .18); }