/* =============================================================
THÈME UNIQUE (clair & sombre) – version modernisée
-------------------------------------------------------------
✱ Default : thème clair (variables dans :root)
✱ Dark : ajoutez `class="dark"` sur /
-------------------------------------------------------------
➜ Couleur identitaire : bleu ardoise #456177
➜ Style : moderne, dégradés subtils, ombres douces.
Aucune couleur « en dur » hors des palettes ci-dessous.
➜ Direction artistique commune : docs/direction-artistique-themes.md
============================================================= */
/* Police d'affichage des titres : Poppins, chargée via dans le
(préconnexion) — plus de @import bloquant ici. */
/* -----------------------------
1. PALETTE — LIGHT (par défaut)
----------------------------- */
:root {
/* Bases — fond en dégradé doux (remplace l'image + parallaxe)
+ deux halos colorés très discrets en haut de page pour donner du relief */
--body-bg: radial-gradient(1100px 520px at 88% -180px, rgba(225, 29, 72, 0.05), transparent 60%),
radial-gradient(900px 520px at -10% 360px, rgba(47, 93, 138, 0.07), transparent 55%),
linear-gradient(160deg, #f7fafc 0%, #eef2f7 45%, #e7edf3 100%);
/* Couleur unie sous le dégradé : Safari ne sait pas échantillonner un dégradé
pour teinter l'overscroll et la barre du navigateur, il lui faut une vraie couleur */
--body-bg-solid: #e7edf3;
--body-text: #243240;
--muted-text: #5b6b7a;
/* Couleur identitaire (bleu ardoise) + accent vif pour les liens */
--accent: #456177;
--accent-strong: #34495e;
--accent-soft: #eaf0f5;
--accent-blue: #2f5d8a;
--texte-lecon-exemple: var(--accent-blue);
--link-hover: #1d4b78;
/* Titre principal (h1) */
--h1-text: #2f4456;
/* Conteneurs génériques (cartes) */
--container-bg: rgba(255, 255, 255, 0.92);
--container-blur: 6px;
--container-border: 1px solid rgba(69, 97, 119, 0.10);
--container-shadow: 0 4px 20px rgba(45, 70, 95, 0.08),
0 1px 3px rgba(45, 70, 95, 0.05);
--container-shadow-hover: 0 12px 32px rgba(45, 70, 95, 0.14),
0 2px 6px rgba(45, 70, 95, 0.07);
/* En-têtes h2 dans les cartes (hors .lecon) */
--card-h2-bg: linear-gradient(135deg, var(--accent-soft) 0%, rgba(255, 255, 255, 0.6) 100%);
--card-h2-border: rgba(69, 97, 119, 0.18);
--card-h2-accent: var(--accent);
--card-h2-text: #2f4456;
/* Conteneurs .lecon (leçon importante) */
--lecon-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(254, 245, 246, 0.9));
--lecon-accent: #e11d48;
--lecon-border: 1px solid rgba(225, 29, 72, 0.20);
--lecon-h2-bg: linear-gradient(135deg, rgba(225, 29, 72, 0.12) 0%, rgba(225, 29, 72, 0.02) 100%);
--lecon-h2-text: #b01435;
/* Conteneurs .exercice (bleu identitaire : « à vous de jouer ») */
--exercice-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 246, 252, 0.9));
--exercice-accent: #2f5d8a;
--exercice-border: 1px solid rgba(47, 93, 138, 0.22);
--exercice-h2-bg: linear-gradient(135deg, rgba(47, 93, 138, 0.12) 0%, rgba(47, 93, 138, 0.02) 100%);
--exercice-h2-text: #1d4b78;
--exercice-btn-bg: linear-gradient(135deg, #3d7ab2 0%, #2b5a8a 100%);
--exercice-btn-bg-hover: linear-gradient(135deg, #4a8ac2 0%, #33689c 100%);
--exercice-btn-shadow: 0 4px 14px rgba(47, 93, 138, 0.35);
/* Conteneurs .exemple (ambre : aparté illustratif) */
--exemple-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(254, 249, 240, 0.9));
--exemple-accent: #d97706;
--exemple-border: 1px solid rgba(217, 119, 6, 0.22);
--exemple-h2-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.10) 0%, rgba(217, 119, 6, 0.02) 100%);
--exemple-h2-text: #b45309;
/* Filet accent à gauche (4px) — signature des thèmes historiques
UNIQUEMENT : les 4 autres thèmes le remplacent par leur bordure
normale et signalent la leçon à leur manière (halo nocturne,
lavis aquarelle, ombre décalée moderniste, équerres flux) */
--card-h2-border-left: 4px solid var(--card-h2-accent);
--lecon-border-left: 4px solid var(--lecon-accent);
--lecon-h2-border-left: 4px solid var(--lecon-accent);
--exercice-h2-border-left: 4px solid var(--exercice-accent);
--exemple-h2-border-left: 4px solid var(--exemple-accent);
/* Tables */
--table-border: rgba(69, 97, 119, 0.18);
--table-head-bg: linear-gradient(135deg, #dde7f0 0%, #cfdcea 100%);
--table-head-text: #2f4456;
--table-row-even-bg: rgba(69, 97, 119, 0.05);
/* Boutons */
--btn-bg: linear-gradient(135deg, #4f6e86 0%, #3a5063 100%);
--btn-bg-hover: linear-gradient(135deg, #5a7c95 0%, #45607a 100%);
--btn-text: #ffffff;
--btn-shadow: 0 4px 14px rgba(52, 73, 94, 0.30);
/* Navigation — dégradé vertical : le bord supérieur reste uniformément #456177,
la couleur du , pour fusionner avec la barre du navigateur */
--navbar-bg: linear-gradient(180deg, #456177 0%, #34495e 100%);
--navbar-text: #f4f8fb;
--navbar-shadow: 0 2px 14px rgba(20, 35, 50, 0.20);
--navbar-hover-bg: rgba(255, 255, 255, 0.14);
/* Bouton Connexion / Déconnexion : il vit sur la navbar, pas sur le fond
de page, et ne peut donc pas toujours se contenter des --btn-* (une navbar
très contrastée avec le corps pourrait rendre le bouton invisible).
Ici la navbar est de la même famille que les boutons : on les reprend. */
--navbar-btn-bg: var(--btn-bg);
--navbar-btn-bg-hover: var(--btn-bg-hover);
--navbar-btn-text: var(--btn-text);
--navbar-btn-shadow: var(--btn-shadow);
--link-color: #2f4456;
--dropdown-bg: rgba(255, 255, 255, 0.96);
--dropdown-link-color: #2f4456;
--dropdown-link-hover-bg: var(--accent-soft);
--dropdown-blur: blur(20px);
--dropdown-mobile-bg: rgba(245, 248, 251, 0.98);
/* Balises en ligne */
--balise-code: #c0392b;
--code-bg: rgba(69, 97, 119, 0.08);
--code-border: rgba(69, 97, 119, 0.20);
/* Même fond, mais opaque : à utiliser dès qu'un est posé sur une
surface colorée (choix de QCM sélectionné, carte de correction), sinon
le fond translucide prend la couleur du bouton et la balise disparaît */
--code-bg-solid: #f0f2f4;
/* -----------------------------------------------------------
Contrat étendu (système à 6 thèmes — voir themes.css)
Chaque thème DOIT redéfinir l'ensemble de ces variables.
----------------------------------------------------------- */
/* Polices */
--font-titres: 'Poppins', 'Segoe UI', sans-serif;
--font-corps: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', 'Trebuchet MS', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',
Menlo, Consolas, 'Liberation Mono', monospace;
/* Rayons (moderniste et flux les mettent à 0 : angles vifs) */
--radius-carte: 20px; /* grandes cartes (.container > div) */
--radius-bloc: 12px; /* h2 de cartes, pre, panneaux, dropdowns */
--radius-bouton: 10px; /* boutons */
/* Navbar modernisée */
--navbar-liens-taille: 14px;
/* Bandeau des éditeurs Pyodide (Exécuter / Sauvegarder / Effacer) */
--editor-bar-bg: linear-gradient(135deg, #dde7f0 0%, #cfdcea 100%);
--editor-bar-text: #2f4456;
--editor-bar-border: rgba(69, 97, 119, 0.18);
/* Note « À faire dans le cahier » */
--schema-halo: #ffffff; /* historique-clair : surface des cartes, pour détacher les poids des arêtes */
--note-cahier-accent: #2f5d8a;
--note-cahier-text: #1d4b78;
/* Correction des QCM : vert = juste, rouge = faux.
Sémantique, donc rouge/vert dans TOUS les thèmes (seule la nuance
s'adapte au fond) — l'élève doit repérer ses erreurs d'un coup d'œil. */
--reponse-juste: #1a9850;
--reponse-fausse: #e11d48;
--reponse-juste-bg: rgba(26, 152, 80, 0.10);
--reponse-fausse-bg: rgba(225, 29, 72, 0.08);
/* Choix sélectionné dans un QCM : un aplat franc (jamais un simple
filigrane), pour que l'élève voie sans hésiter ce qu'il a coché */
--qcm-choisi-bg: linear-gradient(135deg, #4f6e86 0%, #3a5063 100%);
--qcm-choisi-text: #ffffff;
--qcm-choisi-border: #34495e;
}
/* -----------------------------
2. PALETTE — DARK (override)
----------------------------- */
.dark {
--body-bg: radial-gradient(1100px 520px at 88% -180px, rgba(244, 63, 94, 0.09), transparent 60%),
radial-gradient(900px 520px at -10% 360px, rgba(110, 148, 179, 0.12), transparent 55%),
linear-gradient(165deg, #0f2438 0%, #0c1d30 55%, #0a1726 100%);
--body-bg-solid: #0a1726;
--body-text: #e7eef5;
--muted-text: #9fb2c4;
--accent: #6e94b3;
--accent-strong: #8fb3cf;
--accent-soft: rgba(110, 148, 179, 0.14);
--accent-blue: #9cc6e6;
--texte-lecon-exemple: #dbeaf7;
--link-hover: #bcdcf3;
--h1-text: #eaf2fa;
--container-bg: rgba(24, 40, 58, 0.78);
--container-blur: 8px;
--container-border: 1px solid rgba(255, 255, 255, 0.08);
--container-shadow: 0 6px 24px rgba(0, 0, 0, 0.40),
0 1px 3px rgba(0, 0, 0, 0.30);
--container-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.50),
0 2px 6px rgba(0, 0, 0, 0.35);
--card-h2-bg: linear-gradient(135deg, rgba(110, 148, 179, 0.18) 0%, rgba(110, 148, 179, 0.04) 100%);
--card-h2-border: rgba(255, 255, 255, 0.12);
--card-h2-accent: #6e94b3;
--card-h2-text: #eaf2fa;
--lecon-bg: linear-gradient(180deg, rgba(30, 44, 60, 0.7), rgba(46, 26, 32, 0.7));
--lecon-accent: #f43f5e;
--lecon-border: 1px solid rgba(244, 63, 94, 0.30);
--lecon-h2-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.22) 0%, rgba(244, 63, 94, 0.05) 100%);
--lecon-h2-text: #ffb3c1;
--exercice-bg: linear-gradient(180deg, rgba(30, 44, 60, 0.7), rgba(22, 40, 62, 0.7));
--exercice-accent: #7db8e8;
--exercice-border: 1px solid rgba(125, 184, 232, 0.30);
--exercice-h2-bg: linear-gradient(135deg, rgba(125, 184, 232, 0.18) 0%, rgba(125, 184, 232, 0.05) 100%);
--exercice-h2-text: #bcdcf3;
--exercice-btn-bg: linear-gradient(135deg, #3a76ab 0%, #24507c 100%);
--exercice-btn-bg-hover: linear-gradient(135deg, #4787bd 0%, #2c5e8f 100%);
--exercice-btn-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
--exemple-bg: linear-gradient(180deg, rgba(30, 44, 60, 0.2), rgba(46, 38, 24, 0.2));
--exemple-accent: #fbbf24;
--exemple-border: 1px solid rgba(251, 191, 36, 0.28);
--exemple-h2-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.04) 100%);
--exemple-h2-text: #fde68a;
/* Filet accent à gauche (signature historique — voir :root) */
--card-h2-border-left: 4px solid var(--card-h2-accent);
--lecon-border-left: 4px solid var(--lecon-accent);
--lecon-h2-border-left: 4px solid var(--lecon-accent);
--exercice-h2-border-left: 4px solid var(--exercice-accent);
--exemple-h2-border-left: 4px solid var(--exemple-accent);
--table-border: rgba(255, 255, 255, 0.14);
--table-head-bg: linear-gradient(135deg, #1e3247 0%, #16283a 100%);
--table-head-text: #eaf2fa;
--table-row-even-bg: rgba(255, 255, 255, 0.04);
--btn-bg: linear-gradient(135deg, #4f6e86 0%, #3a5063 100%);
--btn-bg-hover: linear-gradient(135deg, #5e8199 0%, #46627b 100%);
--btn-text: #f4f8fb;
--btn-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
--navbar-bg: linear-gradient(180deg, #456177 0%, #34495e 100%);
--navbar-text: #e7eef5;
--navbar-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
--navbar-hover-bg: rgba(255, 255, 255, 0.10);
/* navbar de la même famille que les boutons : voir :root */
--navbar-btn-bg: var(--btn-bg);
--navbar-btn-bg-hover: var(--btn-bg-hover);
--navbar-btn-text: var(--btn-text);
--navbar-btn-shadow: var(--btn-shadow);
--link-color: #cfe1f0;
--dropdown-bg: rgba(18, 32, 47, 0.92);
--dropdown-link-color: #dce8f3;
--dropdown-link-hover-bg: rgba(110, 148, 179, 0.20);
--dropdown-blur: blur(24px);
--dropdown-mobile-bg: rgba(16, 28, 41, 0.98);
--balise-code: #ff8a80;
--code-bg: rgba(255, 255, 255, 0.07);
--code-border: rgba(255, 255, 255, 0.14);
--code-bg-solid: #263648;
/* Contrat étendu (voir :root) — valeurs explicites pour le thème sombre */
--font-titres: 'Poppins', 'Segoe UI', sans-serif;
--font-corps: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', 'Trebuchet MS', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',
Menlo, Consolas, 'Liberation Mono', monospace;
--radius-carte: 20px;
--radius-bloc: 12px;
--radius-bouton: 10px;
--navbar-liens-taille: 14px;
/* Le bandeau et les en-têtes de panneau doivent se DÉTACHER du corps
de code (--code-bg-solid) : en thème sombre, la convention des
éditeurs est un « chrome » plus clair que la surface de code.
L'ancien dégradé, plus sombre que le corps, ne délimitait rien. */
--editor-bar-bg: linear-gradient(135deg, #34506c 0%, #2a4157 100%);
--editor-bar-text: #d5e8f7;
--editor-bar-border: rgba(255, 255, 255, 0.22);
--schema-halo: #1b2a3a; /* historique-sombre : surface des cartes, pour détacher les poids des arêtes */
--note-cahier-accent: #7db8e8;
--note-cahier-text: #9cc6e6;
--reponse-juste: #4ade80;
--reponse-fausse: #ff6b81;
--reponse-juste-bg: rgba(74, 222, 128, 0.12);
--reponse-fausse-bg: rgba(255, 107, 129, 0.12);
--qcm-choisi-bg: linear-gradient(135deg, #4f6e86 0%, #3a5063 100%);
--qcm-choisi-text: #ffffff;
--qcm-choisi-border: #8fb3cf;
}
/* =============================================================
3. RÈGLES COMMUNES (utilisent les variables ci-dessus)
============================================================= */
/* Transition douce lors du changement de thème */
body,
.container > div,
.navbar,
.dropdown-content,
table th,
table td,
code {
transition: background-color 0.35s ease, color 0.35s ease,
border-color 0.35s ease, box-shadow 0.35s ease;
}
/* -------- BODY -------- */
body {
background: var(--body-bg);
/* après le shorthand, qui sinon la remettrait à transparent */
background-color: var(--body-bg-solid);
background-repeat: no-repeat;
background-size: cover;
color: var(--body-text);
}
/* -------- TITRE PRINCIPAL -------- */
h1 {
color: var(--h1-text);
}
/* Filet d'accent dégradé sous le titre */
h1::after {
content: "";
display: block;
width: 80px;
height: 4px;
margin: 14px auto 0;
border-radius: 4px;
background: linear-gradient(90deg, var(--accent), var(--lecon-accent));
}
code {
color: var(--balise-code);
background: var(--code-bg);
border: 1px solid var(--code-border);
}
/* -------- TEXTES ACCENTUÉS -------- */
.exemple,
.demonstration,
.lecon {
color: var(--texte-lecon-exemple);
}
/* -------- CONTENEURS GÉNÉRIQUES -------- */
.container > div {
background-color: var(--container-bg);
backdrop-filter: blur(var(--container-blur));
-webkit-backdrop-filter: blur(var(--container-blur));
}
/* Bordure + ombrage pour les conteneurs « classiques »
(hors cartes thématiques : leçon, exercice, exemple, introduction) */
.container > div:not(.lecon):not(.exercice):not(.exemple):not(.introduction) {
border: var(--container-border);
box-shadow: var(--container-shadow);
}
/* Léger relief au survol */
.container > div:not(.lecon):hover {
box-shadow: var(--container-shadow-hover);
}
/* Titre dans les conteneurs (hors cartes thématiques à h2 coloré) */
.container > div:not(.lecon):not(.exercice):not(.exemple) h2 {
background: var(--card-h2-bg);
border: 1px solid var(--card-h2-border);
border-left: var(--card-h2-border-left);
color: var(--card-h2-text);
box-shadow: none;
}
/* -------- CONTENEUR .LECON -------- */
.lecon {
background: var(--lecon-bg);
border: var(--lecon-border);
border-left: var(--lecon-border-left);
box-shadow: var(--container-shadow);
}
.lecon:hover {
box-shadow: var(--container-shadow-hover);
}
.lecon .h2-lecon {
background: var(--lecon-h2-bg);
border: var(--lecon-border);
border-left: var(--lecon-h2-border-left);
color: var(--lecon-h2-text);
}
/* -------- CONTENEUR .EXERCICE --------
Même construction que .lecon, en bleu identitaire */
.exercice {
background: var(--exercice-bg);
border: var(--exercice-border);
/* border-left: 4px solid var(--exercice-accent); */
box-shadow: var(--container-shadow);
}
.exercice:hover {
box-shadow: var(--container-shadow-hover);
}
.exercice .h2-exercice {
background: var(--exercice-h2-bg);
border: var(--exercice-border);
border-left: var(--exercice-h2-border-left);
color: var(--exercice-h2-text);
}
/* Le bouton « Exécuter » adopte le bleu de sa carte */
.exercice .btn-valider {
background: var(--exercice-btn-bg);
box-shadow: var(--exercice-btn-shadow);
}
.exercice .btn-valider:hover {
background: var(--exercice-btn-bg-hover);
}
/* -------- CONTENEUR .EXEMPLE --------
Aparté illustratif, en ambre */
.exemple {
background: var(--exemple-bg);
border: var(--exemple-border);
/* border-left: 4px solid var(--exemple-accent); */
box-shadow: var(--container-shadow);
}
.exemple:hover {
box-shadow: var(--container-shadow-hover);
}
.exemple .h2-exemple {
background: var(--exemple-h2-bg);
border: var(--exemple-border);
border-left: var(--exemple-h2-border-left);
color: var(--exemple-h2-text);
}
/* -------- CONTENEUR .INTRODUCTION --------
Non délimitée, dans tous les thèmes : le texte d'introduction
coule directement sur le fond de page, sans carte (ni fond, ni
bordure, ni ombre). Le padding hérité de .container > div est
conservé pour rester aligné avec les cartes qui suivent. */
.container > div.introduction {
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.container > div.introduction:hover {
box-shadow: none;
}
/* -------- LIENS / MENU -------- */
a {
color: var(--link-color);
}
.container a:hover {
color: var(--link-hover);
}
.navbar {
background: var(--navbar-bg);
color: var(--navbar-text);
box-shadow: var(--navbar-shadow);
}
.navbar .brand,
.titres_menu {
color: var(--navbar-text);
}
.dropdown-content {
background-color: var(--dropdown-bg);
backdrop-filter: var(--dropdown-blur);
-webkit-backdrop-filter: var(--dropdown-blur);
box-shadow: 0 12px 32px rgba(20, 35, 50, 0.22);
}
.dropdown-content a {
color: var(--dropdown-link-color);
}
.dropdown-content a:hover {
background-color: var(--dropdown-link-hover-bg);
}
/* -------- TABLES -------- */
table th,
table td {
border: 1px solid var(--table-border);
}
table th {
background: var(--table-head-bg);
color: var(--table-head-text);
}
table tr:nth-child(even) {
background-color: var(--table-row-even-bg);
}
/* -------- BOUTONS -------- */
.btn {
background: var(--btn-bg);
color: var(--btn-text);
box-shadow: var(--btn-shadow);
}
.btn:hover {
background: var(--btn-bg-hover);
}
/* -------- RÉSPONSIVE -------- */
@media screen and (max-width: 1300px) {
.nav-links { background: var(--navbar-bg); }
.dropdown-content { background-color: var(--dropdown-mobile-bg); }
}
/* =============================================================
FIN DU FICHIER ❦
============================================================= */