/* ═══════════════════════════════════════════════════════
   Prepapython — Jetons de couleur, sombre et clair
   ═══════════════════════════════════════════════════════

   SOURCE UNIQUE. Aucune autre feuille, aucune page, aucun script ne doit
   redefinir une couleur : tout passe par une variable declaree ici. C'est
   la condition pour qu'un changement de theme soit complet — une seule
   valeur ecrite en dur ailleurs reste sombre sur fond clair, et devient
   illisible.

   Le theme sombre reprend EXACTEMENT les valeurs qui existaient avant
   l'introduction du theme clair : rien ne devait bouger pour les eleves
   deja installes dans leurs habitudes.

   Le theme clair suit la palette « GitHub Light », contrepartie directe du
   « GitHub Dark » dont venaient les couleurs d'origine. Ses teintes sont
   calculees pour rester lisibles sur fond blanc (contraste AA), la ou une
   simple inversion aurait donne un jaune et un vert delaves.

   Les nuances proches ne sont PAS fusionnees (--yellow, --yellow-2,
   --yellow-3, --amber existent separement) : les fusionner aurait modifie
   le rendu sombre, ce qu'on s'interdit.
*/

:root {
    color-scheme: dark;

    /* ---- Surfaces ---- */
    --bg:            #0d1117;   /* fond general */
    --bg-deep:       #010409;   /* corps de l'editeur, le plus sombre */
    --bg-term:       #0a0f14;   /* terminal et zone de sortie */
    --bg-topbar:     #0d141a;   /* barre d'outils de l'editeur */
    --panel:         #161b22;   /* entete, colonnes, cartes */
    --panel-2:       #21262d;   /* survol, boutons discrets */
    --bg-soft:       #12171f;   /* intermediaire bg / panel */
    --code-bg:       #1a1a2e;   /* encarts « Le piege » des rappels de cours */
    --border:        #30363d;

    /* ---- Texte ---- */
    --text:          #e6edf3;
    --muted:         #8b949e;
    --gutter:        #484f58;   /* numeros de ligne */
    --gutter-2:      #586069;

    /* ---- Accents ---- */
    --blue:          #58a6ff;
    --accent:        #1f6feb;   /* remplissage des boutons principaux */
    --accent-hover:  #388bfd;
    --on-accent:     #ffffff;   /* texte pose SUR un accent */

    --green:         #3fb950;
    --green-strong:  #2ea043;
    --green-soft:    #7ee787;   /* sortie de code */

    --yellow:        #d29922;
    --yellow-2:      #e3b341;
    --yellow-3:      #f0c030;
    --amber:         #fbbf24;
    --brown:         #92400e;   /* extremite des degrades ambres */

    --red:           #f85149;
    --red-soft:      #f87171;
    --red-strong:    #da3633;
    --red-pale:      #ffa198;

    --purple:        #bc8cff;
    --purple-2:      #c084fc;

    --orange:        #fb923c;
    --orange-2:      #f97316;

    --cyan:          #22d3ee;

    /* Gris neutres apparus au fil de l'eau dans des styles en ligne. */
    --gris:          #888888;
    --gris-clair:    #c9d1d9;

    /* Voile pose sur le contenu (chargement, calque). Derive du fond pour
       suivre le theme au lieu d'assombrir une page claire. */
    --voile:         color-mix(in srgb, var(--bg) 93%, transparent);
    /* Rayure des tableaux : un blanc tres dilue sur fond sombre, un noir
       tres dilue sur fond clair — d'ou une variable et non une opacite. */
    --rayure:        #ffffff08;

    /* ---- Nuances apparues au fil de l'eau, gardees distinctes pour ne
            rien changer au rendu sombre ---- */
    --panel-3:       #1c2128;   /* survol des lignes de journal (admin) */
    --code-border:   #2a2a3e;   /* bordure des encarts --code-bg */
    --memo-bg:       #0a0e14;   /* sortie du memento */
    --memo-border:   #1a2233;
    --red-2:         #f84922;   /* fond du bouton « Solution » */
    --teal:          #2dd4bf;   /* lien « Code a la plage » */
    --amber-2:       #f59e0b;   /* lien « Classement » */
    --amber-3:       #d97706;   /* bouton « Envoyer les relances » */
    --on-green:      #04260f;   /* texte pose SUR un aplat vert */
    --bilan-sql:     #1a1200;   /* entete du bilan, teinte SQL */
    --bilan-py:      #1a0a0a;   /* entete du bilan, teinte Python */
    --ombre:         #00000088;
    --pdf-bg:        #000000;   /* fond derriere le lecteur de PDF : il doit
                                   detacher le bord des pages blanches */
    --marque-paypal: #0070ba;

    /* ---- Couleurs de marque : identiques dans les deux themes ---- */
    --marque-whatsapp:  #25d366;
    --marque-tiktok:    #ff0050;
    --marque-instagram: #e4405f;
}

:root[data-theme="light"] {
    color-scheme: light;

    /* ---- Surfaces ---- */
    --bg:            #ffffff;
    --bg-deep:       #f6f8fa;
    --bg-term:       #f6f8fa;
    --bg-topbar:     #eef1f4;
    --panel:         #f6f8fa;
    --panel-2:       #eaeef2;
    --bg-soft:       #f6f8fa;
    --code-bg:       #eef1f7;
    --border:        #d0d7de;

    /* ---- Texte ---- */
    --text:          #1f2328;
    --muted:         #656d76;
    --gutter:        #6e7781;
    --gutter-2:      #6e7781;

    /* ---- Accents ----
       Sur fond blanc, les tons vifs du theme sombre tombent sous le seuil
       de lisibilite : on prend les equivalents fonces de la meme famille. */
    --blue:          #0969da;
    --accent:        #0969da;
    --accent-hover:  #0a58ca;
    --on-accent:     #ffffff;

    --green:         #1a7f37;
    --green-strong:  #116329;
    --green-soft:    #116329;

    --yellow:        #9a6700;
    --yellow-2:      #9a6700;
    --yellow-3:      #8a5d00;
    --amber:         #9a6700;
    --brown:         #7d4e00;

    --red:           #cf222e;
    --red-soft:      #d1242f;
    --red-strong:    #a40e26;
    --red-pale:      #d1242f;

    --purple:        #8250df;
    --purple-2:      #8250df;

    --orange:        #bc4c00;
    --orange-2:      #bc4c00;

    --cyan:          #0e7490;

    --gris:          #6e7781;
    --gris-clair:    #424a53;

    --voile:         color-mix(in srgb, var(--bg) 93%, transparent);
    --rayure:        #00000008;
    --panel-3:       #eaeef2;
    --code-border:   #d8dee9;
    --memo-bg:       #f6f8fa;
    --memo-border:   #d0d7de;
    --red-2:         #cf222e;
    --teal:          #0e7490;
    --amber-2:       #9a6700;
    --amber-3:       #8a5d00;
    --on-green:      #ffffff;
    --bilan-sql:     #fdf6e3;
    --bilan-py:      #fdeeee;
    --ombre:         #1f232833;
    --pdf-bg:        #525659;
}

/* Le navigateur choisit pour qui n'a jamais choisi. Un choix explicite
   pose data-theme sur <html> et l'emporte sur cette regle. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) {
        color-scheme: light;

        --bg:            #ffffff;
        --bg-deep:       #f6f8fa;
        --bg-term:       #f6f8fa;
        --bg-topbar:     #eef1f4;
        --panel:         #f6f8fa;
        --panel-2:       #eaeef2;
        --bg-soft:       #f6f8fa;
        --code-bg:       #eef1f7;
        --border:        #d0d7de;

        --text:          #1f2328;
        --muted:         #656d76;
        --gutter:        #6e7781;
        --gutter-2:      #6e7781;

        --blue:          #0969da;
        --accent:        #0969da;
        --accent-hover:  #0a58ca;
        --on-accent:     #ffffff;

        --green:         #1a7f37;
        --green-strong:  #116329;
        --green-soft:    #116329;

        --yellow:        #9a6700;
        --yellow-2:      #9a6700;
        --yellow-3:      #8a5d00;
        --amber:         #9a6700;
        --brown:         #7d4e00;

        --red:           #cf222e;
        --red-soft:      #d1242f;
        --red-strong:    #a40e26;
        --red-pale:      #d1242f;

        --purple:        #8250df;
        --purple-2:      #8250df;

        --orange:        #bc4c00;
        --orange-2:      #bc4c00;

        --cyan:          #0e7490;

        --gris:          #6e7781;
        --gris-clair:    #424a53;

        --voile:         color-mix(in srgb, var(--bg) 93%, transparent);
        --rayure:        #00000008;
        --panel-3:       #eaeef2;
        --code-border:   #d8dee9;
        --memo-bg:       #f6f8fa;
        --memo-border:   #d0d7de;
        --red-2:         #cf222e;
        --teal:          #0e7490;
        --amber-2:       #9a6700;
        --amber-3:       #8a5d00;
        --on-green:      #ffffff;
        --bilan-sql:     #fdf6e3;
        --bilan-py:      #fdeeee;
        --ombre:         #1f232833;
        --pdf-bg:        #525659;
    }
}

/* ═══════════════════════════════════════════════════════
   Bouton de bascule
   ═══════════════════════════════════════════════════════
   Pose par js/theme.js dans l'entete de la page, ou en flottant si la
   page n'a pas d'entete (pages d'accueil, mentions legales).
*/
.theme-bascule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.theme-bascule:hover { background: var(--panel-2); border-color: var(--muted); }
.theme-bascule:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Pages sans entete : le bouton flotte en bas a droite. */
.theme-bascule--flottant {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9998;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* Le soleil ne s'affiche qu'en sombre, la lune qu'en clair : le bouton
   montre la destination, pas l'etat courant. */
.theme-bascule .t-clair { display: none; }
.theme-bascule .t-sombre { display: inline; }
:root[data-theme="light"] .theme-bascule .t-clair { display: inline; }
:root[data-theme="light"] .theme-bascule .t-sombre { display: none; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-bascule .t-clair { display: inline; }
    :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-bascule .t-sombre { display: none; }
}

/* Le basculement ne doit pas etre une transition sur toute la page : sur
   une longue liste d'exercices, animer chaque fond coute cher. On se
   contente du fond general et du texte. */
@media (prefers-reduced-motion: no-preference) {
    body { transition: background-color .18s ease, color .18s ease; }
}