/* Variables (couleurs, thème clair / sombre), base de la page et des boutons */

:root {
    /* Charte : couleurs du logo JCI Joutes & Débats */
    --blue: #008cda;        /* bleu « JOUTES » */
    --blue-hover: #0072b3;  /* bleu un ton plus foncé (survol) */
    --teal: #36bcbc;        /* turquoise « DÉBATS » */
    --teal-dark: #1c9494;   /* turquoise foncé, lisible sous du texte blanc */
    --navy: #100e38;        /* bleu nuit « JCI » */

    /* Textes */
    --text: #333333;
    --text-strong: #334155;
    --text-soft: #475569;
    --text-muted: #64748b;

    --heading: var(--navy);  /* titres */
    --action: var(--blue);           /* bouton principal (Lancer le sujet) */
    --action-hover: var(--blue-hover);
    --action-line: var(--blue);      /* cadre pointillé du sujet tiré */

    /* Fonds et bordures */
    --page-bg: #ffffff;
    --card: #ffffff;         /* cartes, tableaux, champs de saisie */
    --btn-secondary: #475569;
    --surface: #f8fafc;
    --surface-alt: #edf2f7;
    --highlight: #e5f3fc;
    --highlight-border: #b3dcf4;
    --border: #e2e8f0;
    --border-strong: #cbd5e0;

    /* Camps */
    --pour: #16a34a;
    --pour-bg: #dcfce7;
    --contre: #dc2626;
    --contre-bg: #fee2e2;
    --pour-fill: var(--pour);    /* aplats colorés avec texte blanc (en-têtes, boutons) */
    --contre-fill: var(--contre);
    --pour-light: #4ade80;   /* variantes lisibles sur le fond sombre du chrono */
    --contre-light: #f87171;

    /* Écran du chronomètre */
    --timer-bg: #15133f;
    --timer-label: #94a3b8;
    --timer-digits: #5fd0d0;
    --timer-warning: #facc15;
    --timer-up: #ef4444;
    --timer-border: transparent;

    /* Formes */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    color-scheme: light;
}

/* Mode sombre : seulement sur demande, avec le bouton 🌙 / ☀️ (clair par défaut)
   (attribut data-theme posé dès le chargement par le script en tête de index.html) */
:root[data-theme="dark"] {
    /* Ambiance « bleu nuit JCI » : fond tiré du bleu nuit du logo, actions en turquoise */
    --blue: #3aa8e6;
    --blue-hover: #5cb8ec;
    --heading: #f0f0fb;
    --action: var(--teal-dark);
    --action-hover: #23a8a8;
    --action-line: var(--teal);

    --text: #e6e6f5;
    --text-strong: #ececfa;
    --text-soft: #b9b7dd;
    --text-muted: #9a97c8;

    --page-bg: #14123a;
    --card: #1f1d4d;
    --btn-secondary: #3d3a78;
    --surface: #1a1844;
    --surface-alt: #26245a;
    --highlight: #1c2f5e;
    --highlight-border: #2f4f8a;
    --border: #34316b;
    --border-strong: #45428a;

    /* Camps : texte adouci, aplats un ton plus soutenu (texte blanc dessus) */
    --pour: #5fd38d;
    --pour-fill: #1f9d55;
    --pour-bg: #173a2c;
    --contre: #f08a8a;
    --contre-fill: #d64545;
    --contre-bg: #44202a;

    /* Chrono : plus sombre que la page pour rester la pièce maîtresse */
    --timer-bg: #0a0920;
    --timer-border: #2a2860;
    --timer-label: #9a97c8;

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

/* Le logo contient du bleu nuit, illisible sur fond sombre : petit fond clair arrondi */
:root[data-theme="dark"] .page-logo {
    background: #f8fafc;
    border-radius: var(--radius);
    padding: 4px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Police du système : San Francisco (Mac, iPhone), Segoe UI (Windows), Roboto (Android)… rien à télécharger */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--page-bg);
    color: var(--text);
}

.hidden { display: none !important; }

/* Base commune à tous les boutons (et aux liens qui en ont l'apparence) */
button,
.btn {
    border: none;
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

button:disabled { cursor: not-allowed; }