/* ============================================================= THEMES.CSS — les 4 nouveaux thèmes du site ------------------------------------------------------------- Chaque thème est un bloc html[data-theme="…"] qui redéfinit TOUTES les variables du contrat déclaré dans couleur.css. Les deux thèmes « historiques » restent dans couleur.css : - historique-clair = :root - historique-sombre = .dark Les thèmes sombres (historique-sombre, nocturne, flux) portent AUSSI la classe .dark sur (Ace, highlight.js, CSS existant). Fidélité aux maquettes : chaque thème garde SA palette propre — nocturne : nuit indigo texturée, violet fumé, bleu sidéral et rose nocturne ; aquarelle : crème lumineux, lavis pêche et bleu brume, cartes douces et translucides ; moderniste : bordures noires 2px partout (leçons comprises), le rouge n'apparaît qu'en touches (titres de leçon, boutons, numéros) ; flux : noir bleuté texturé, orange + bleu + turquoise + vert, panneaux à angles droits et lumières localisées, mono JetBrains en signature. Pas de codage rose/ambre/vert hérité des thèmes historiques. Direction artistique : docs/direction-artistique-themes.md. Contrat technique : .agents/skills/theme-contract/SKILL.md et sa copie .claude/skills/theme-contract/SKILL.md. (attention : jamais de « étoile-slash » dans un commentaire !) ============================================================= */ /* ============================================================= 1. NOCTURNE — le pendant sombre d'Aquarelle ; Quicksand + DM Sans. Une nuit indigo texturée de poussière d'étoiles reçoit des brumes violettes, bleu sidéral et rose nocturne désaturé. La leçon est la seule surface violette dense ; exercices et exemples restent plus transparents et prennent chacun une température propre. ============================================================= */ html[data-theme="nocturne"] { --body-bg: radial-gradient(circle at 14% 27%, rgba(248, 246, 255, 0.52) 0 1px, rgba(196, 188, 235, 0.14) 1.5px, transparent 2.6px), radial-gradient(circle at 32% 57%, rgba(224, 228, 252, 0.42) 0 1.1px, rgba(170, 180, 224, 0.12) 1.6px, transparent 2.7px), radial-gradient(circle at 49% 19%, rgba(244, 240, 255, 0.48) 0 0.9px, rgba(192, 181, 233, 0.13) 1.4px, transparent 2.5px), radial-gradient(circle at 61% 47%, rgba(216, 222, 250, 0.40) 0 1px, rgba(164, 177, 224, 0.11) 1.5px, transparent 2.6px), radial-gradient(circle at 75% 63%, rgba(241, 237, 255, 0.46) 0 1.2px, rgba(188, 178, 230, 0.13) 1.7px, transparent 2.8px), radial-gradient(circle at 94% 27%, rgba(225, 231, 253, 0.44) 0 0.9px, rgba(173, 187, 229, 0.12) 1.4px, transparent 2.5px), radial-gradient(circle at 4% 54%, rgba(226, 224, 246, 0.34) 0 0.9px, rgba(172, 177, 220, 0.09) 1.4px, transparent 2.2px), radial-gradient(circle at 23% 66%, rgba(202, 210, 240, 0.30) 0 0.8px, rgba(156, 170, 216, 0.08) 1.3px, transparent 2.1px), radial-gradient(circle at 45% 53%, rgba(231, 224, 249, 0.28) 0 0.7px, rgba(183, 170, 224, 0.08) 1.2px, transparent 2px), radial-gradient(circle at 52% 78%, rgba(216, 220, 246, 0.32) 0 0.9px, rgba(162, 174, 219, 0.08) 1.4px, transparent 2.2px), radial-gradient(circle at 72% 91%, rgba(225, 218, 245, 0.26) 0 0.8px, rgba(180, 166, 219, 0.07) 1.3px, transparent 2.1px), radial-gradient(circle at 97% 60%, rgba(207, 215, 243, 0.31) 0 0.8px, rgba(158, 172, 218, 0.08) 1.3px, transparent 2.1px), radial-gradient(circle at 7% 17%, rgba(232, 229, 248, 0.24) 0 0.7px, transparent 1.3px), radial-gradient(circle at 18% 39%, rgba(181, 185, 221, 0.18) 0 0.8px, transparent 1.4px), radial-gradient(circle at 29% 12%, rgba(213, 207, 239, 0.20) 0 0.6px, transparent 1.2px), radial-gradient(circle at 41% 29%, rgba(166, 177, 217, 0.16) 0 0.7px, transparent 1.3px), radial-gradient(circle at 56% 9%, rgba(226, 222, 245, 0.20) 0 0.8px, transparent 1.4px), radial-gradient(circle at 67% 35%, rgba(178, 170, 218, 0.16) 0 0.6px, transparent 1.2px), radial-gradient(circle at 78% 16%, rgba(207, 211, 239, 0.22) 0 0.7px, transparent 1.3px), radial-gradient(circle at 91% 42%, rgba(184, 177, 222, 0.18) 0 0.8px, transparent 1.4px), radial-gradient(circle at 12% 72%, rgba(171, 183, 220, 0.14) 0 0.7px, transparent 1.3px), radial-gradient(circle at 36% 83%, rgba(213, 207, 239, 0.16) 0 0.6px, transparent 1.2px), radial-gradient(circle at 63% 69%, rgba(176, 168, 216, 0.14) 0 0.8px, transparent 1.4px), radial-gradient(circle at 86% 79%, rgba(198, 205, 235, 0.16) 0 0.7px, transparent 1.3px), radial-gradient(900px 600px at 12% 2%, rgba(105, 91, 166, 0.25), transparent 68%), radial-gradient(820px 580px at 92% 14%, rgba(60, 82, 132, 0.21), transparent 68%), radial-gradient(680px 520px at 52% 86%, rgba(91, 73, 125, 0.14), transparent 70%), linear-gradient(160deg, #0d0f19 0%, #141625 46%, #1b1c2b 100%); --body-bg-solid: #171927; --body-text: #ebe9f0; --muted-text: #a5a5b5; --accent: #9187c0; --accent-strong: #c0bae3; --accent-soft: #29273d; --accent-blue: #aab4d3; --texte-lecon-exemple: #dedce7; --link-hover: #ded8ff; --h1-text: #f2eff8; --container-bg: rgba(29, 31, 46, 0.80); --container-blur: 14px; --container-border: 1px solid rgba(148, 142, 184, 0.22); --container-shadow: 0 10px 28px rgba(3, 4, 10, 0.34), 0 2px 8px rgba(3, 4, 10, 0.24); --container-shadow-hover: 0 16px 38px rgba(3, 4, 10, 0.42), 0 3px 10px rgba(3, 4, 10, 0.30); --card-h2-bg: linear-gradient(125deg, rgba(72, 86, 117, 0.82) 0%, rgba(78, 72, 105, 0.80) 54%, rgba(97, 79, 117, 0.74) 100%); --card-h2-border: rgba(151, 144, 188, 0.28); --card-h2-accent: #aaa4d2; --card-h2-text: #f1eef8; /* Aucun filet gauche : Nocturne distingue la leçon par une bordure lavande claire 3px, un cerne et des halos assortis renforcés au survol. */ --card-h2-border-left: 1px solid rgba(151, 144, 188, 0.28); --lecon-border-left: 3px solid rgba(201, 193, 238, 0.96); --lecon-h2-border-left: 3px solid rgba(201, 193, 238, 0.96); --exercice-h2-border-left: 1px solid rgba(83, 107, 157, 0.52); --exemple-h2-border-left: 1px solid rgba(153, 107, 133, 0.26); /* leçon = aplat violet dense et légèrement plus lumineux */ --lecon-bg: linear-gradient(145deg, rgba(61, 50, 84, 0.98) 0%, rgba(50, 43, 70, 0.97) 52%, rgba(39, 43, 61, 0.97) 100%); --lecon-accent: #c9c1ee; --lecon-border: 3px solid rgba(201, 193, 238, 0.96); --lecon-h2-bg: linear-gradient(125deg, #7c60a4 0%, #685990 54%, #505b82 100%); --lecon-h2-text: #f8f5ff; /* exercice = bleu sidéral profond, à luminosité intermédiaire */ --exercice-bg: linear-gradient(155deg, rgba(17, 29, 50, 0.92), rgba(29, 40, 61, 0.76)); --exercice-accent: #a9b8de; --exercice-border: 1px solid rgba(83, 107, 157, 0.52); --exercice-h2-bg: linear-gradient(125deg, #263d68 0%, #3a4e78 56%, #525b82 100%); --exercice-h2-text: #f4f3fa; --exercice-btn-bg: linear-gradient(135deg, #675d91 0%, #4f5378 100%); --exercice-btn-bg-hover: linear-gradient(135deg, #71669b 0%, #595d84 100%); --exercice-btn-shadow: 0 6px 18px rgba(3, 10, 13, 0.34); /* exemple = vieux rose graphite, plus chaud et volontairement feutré */ --exemple-bg: linear-gradient(155deg, rgba(44, 34, 46, 0.60), rgba(41, 38, 48, 0.40)); --exemple-accent: #c09aad; --exemple-border: 1px solid rgba(153, 107, 133, 0.26); --exemple-h2-bg: linear-gradient(125deg, rgba(89, 58, 77, 0.76) 0%, rgba(77, 61, 80, 0.68) 58%, rgba(65, 64, 82, 0.62) 100%); --exemple-h2-text: #e9e4ea; --table-border: rgba(167, 162, 207, 0.22); --table-head-bg: linear-gradient(135deg, #465475 0%, #625477 100%); --table-head-text: #f4f1fa; --table-row-even-bg: rgba(145, 135, 192, 0.08); --btn-bg: linear-gradient(135deg, #675d91 0%, #4f5378 100%); --btn-bg-hover: linear-gradient(135deg, #71669b 0%, #595d84 100%); --btn-text: #fffdfd; --btn-shadow: 0 6px 18px rgba(3, 10, 13, 0.34); /* Bord supérieur uni, identique au meta theme-color. */ --navbar-bg: #151725; --navbar-text: #ebe9f0; --navbar-shadow: 0 1px 0 rgba(142, 135, 181, 0.24), 0 4px 16px rgba(3, 4, 10, 0.30); --navbar-hover-bg: rgba(145, 135, 192, 0.16); --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: #c5c0e9; --dropdown-bg: rgba(29, 30, 45, 0.96); --dropdown-link-color: #e4e1ec; --dropdown-link-hover-bg: rgba(122, 112, 169, 0.24); --dropdown-blur: blur(20px); --dropdown-mobile-bg: rgba(22, 23, 36, 0.98); --balise-code: #c7b9ef; --code-bg: #141622; --code-border: #3d4058; --code-bg-solid: #141622; --font-titres: 'Quicksand', 'DM Sans', 'Poppins', system-ui, sans-serif; --font-corps: 'DM Sans', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace; --radius-carte: 26px; --radius-bloc: 16px; --radius-bouton: 999px; --navbar-liens-taille: 14px; /* Chrome bleu lunaire plus clair que le code, sans effet néon. */ --editor-bar-bg: linear-gradient(135deg, #3f486c 0%, #555274 100%); --editor-bar-text: #f2f1f7; --editor-bar-border: #686d91; --schema-halo: #202231; --note-cahier-accent: #b7afe1; --note-cahier-text: #d9d3f2; --reponse-juste: #75d9a4; --reponse-fausse: #f18b99; --reponse-juste-bg: rgba(117, 217, 164, 0.10); --reponse-fausse-bg: rgba(241, 139, 153, 0.10); --qcm-choisi-bg: linear-gradient(135deg, #675d91 0%, #4f5378 100%); --qcm-choisi-text: #fffdfd; --qcm-choisi-border: #8f86b9; } /* Le fond forme une nuit continue : textures et halos ne redémarrent pas à chaque hauteur d'écran pendant le défilement. */ html[data-theme="nocturne"] body { background-attachment: fixed; } /* Les lavis transparents doivent laisser voir la nuit texturée. */ html[data-theme="nocturne"] .container > .exercice, html[data-theme="nocturne"] .container > .exemple { background-color: transparent; } /* Les grands arrondis des cartes ne doivent pas réduire la zone de code. */ html[data-theme="nocturne"] pre code { border-radius: calc(var(--radius-bloc) / 2); } /* Ace conserve sa coloration syntaxique sombre, mais sa surface cobalt est ramenée à l'encre du thème pour éviter une rupture visuelle trop gaming. */ html[data-theme="nocturne"] .ace-cobalt, html[data-theme="nocturne"] .ace-cobalt .ace_scroller { background-color: var(--code-bg-solid); } html[data-theme="nocturne"] .ace-cobalt .ace_gutter { background: var(--container-bg); color: var(--muted-text); } /* Signature de la leçon : bordure lavande claire 3px, profondeur indigo, cerne et halos lavande renforcés au survol, sans filet gauche historique. */ html[data-theme="nocturne"] .lecon { box-shadow: inset 0 1px 0 rgba(232, 227, 248, 0.16), inset 0 -1px 0 rgba(104, 88, 155, 0.22), 0 0 0 4px rgba(201, 193, 238, 0.30), 0 14px 32px rgba(2, 3, 9, 0.50), 0 5px 20px rgba(174, 156, 216, 0.28), 0 0 30px rgba(174, 156, 216, 0.20); } html[data-theme="nocturne"] .lecon:hover { box-shadow: inset 0 1px 0 rgba(232, 227, 248, 0.20), inset 0 -1px 0 rgba(104, 88, 155, 0.28), 0 0 0 5px rgba(201, 193, 238, 0.38), 0 16px 36px rgba(2, 3, 9, 0.54), 0 6px 22px rgba(174, 156, 216, 0.34), 0 0 34px rgba(174, 156, 216, 0.24); } html[data-theme="nocturne"] .lecon .h2-lecon { box-shadow: inset 0 1px 0 rgba(232, 227, 248, 0.14), 0 0 32px rgba(174, 156, 216, 0.22); } /* ============================================================= 2. AQUARELLE — clair, moderne et apaisant ; Quicksand + DM Sans. Un papier crème reçoit de grands halos pêche et bleu brume. Les surfaces restent lumineuses et légèrement translucides, avec une couleur propre à chaque famille de carte : pêche pour les leçons, bleu brume pour les exercices, crème pour les exemples. ============================================================= */ html[data-theme="aquarelle"] { --body-bg: repeating-linear-gradient(112deg, rgba(61, 82, 92, 0.025) 0px, rgba(61, 82, 92, 0.025) 1px, transparent 1px, transparent 6px), repeating-linear-gradient(18deg, rgba(255, 255, 255, 0.11) 0px, rgba(255, 255, 255, 0.11) 1px, transparent 1px, transparent 9px), radial-gradient(920px 620px at 5% 3%, rgba(245, 177, 153, 0.38), transparent 65%), radial-gradient(880px 680px at 96% 8%, rgba(157, 184, 199, 0.36), transparent 66%), radial-gradient(720px 540px at 18% 76%, rgba(188, 204, 196, 0.22), transparent 68%), radial-gradient(760px 580px at 88% 72%, rgba(246, 193, 169, 0.24), transparent 68%), radial-gradient(640px 480px at 52% 42%, rgba(255, 233, 204, 0.22), transparent 70%), linear-gradient(150deg, #fffaf4 0%, #fbf6ef 48%, #f3f7f7 100%); --body-bg-solid: #fbf5ee; --body-text: #414b50; --muted-text: #69757a; --accent: #587382; --accent-strong: #405b69; --accent-soft: #e7eef0; --accent-blue: #587382; --texte-lecon-exemple: #4b5356; --link-hover: #9a5f57; --h1-text: #465f6b; --container-bg: rgba(255, 252, 248, 0.68); --container-blur: 12px; --container-border: 1px solid rgba(75, 105, 118, 0.16); --container-shadow: 0 8px 24px rgba(60, 82, 92, 0.07), 0 2px 7px rgba(60, 82, 92, 0.04); --container-shadow-hover: 0 14px 34px rgba(60, 82, 92, 0.12), 0 3px 9px rgba(60, 82, 92, 0.06); --card-h2-bg: linear-gradient(125deg, rgba(190, 211, 218, 0.64) 0%, rgba(226, 235, 234, 0.54) 48%, rgba(242, 213, 203, 0.46) 100%); --card-h2-border: rgba(75, 105, 118, 0.18); --card-h2-accent: #587382; --card-h2-text: #465f6b; /* Aucun filet gauche : Aquarelle distingue la leçon par un cerne pêche et deux halos diffus autour de toute la carte. */ --card-h2-border-left: 1px solid rgba(75, 105, 118, 0.18); --lecon-border-left: 2px solid rgba(183, 101, 88, 0.62); --lecon-h2-border-left: 2px solid rgba(183, 101, 88, 0.62); --exercice-h2-border-left: 1px solid rgba(86, 117, 132, 0.28); --exemple-h2-border-left: 1px solid rgba(137, 116, 94, 0.20); /* leçon = le seul aplat coloré : un lavis pêche laiteux sur toute la carte */ --lecon-bg: linear-gradient(145deg, rgba(250, 214, 201, 0.78) 0%, rgba(255, 239, 229, 0.80) 54%, rgba(248, 222, 213, 0.76) 100%); --lecon-accent: #a95348; --lecon-border: 2px solid rgba(183, 101, 88, 0.62); --lecon-h2-bg: linear-gradient(125deg, #eda592 0%, #f2b7a3 52%, #f7d0c0 100%); --lecon-h2-text: #5c302e; /* exercice = surface claire translucide, lavée de bleu brume et de crème */ --exercice-bg: linear-gradient(155deg, rgba(255, 253, 249, 0.66), rgba(224, 235, 237, 0.48)); --exercice-accent: #587382; --exercice-border: 1px solid rgba(86, 117, 132, 0.28); --exercice-h2-bg: linear-gradient(125deg, rgba(181, 205, 214, 0.76) 0%, rgba(219, 231, 233, 0.62) 56%, rgba(247, 221, 210, 0.40) 100%); --exercice-h2-text: #3f5966; --exercice-btn-bg: linear-gradient(135deg, #587582 0%, #45626f 100%); --exercice-btn-bg-hover: linear-gradient(135deg, #5c7884 0%, #4d6b78 100%); --exercice-btn-shadow: 0 6px 16px rgba(55, 82, 94, 0.22); /* exemple = le plus discret : crème neutre presque transparent */ --exemple-bg: linear-gradient(155deg, rgba(255, 253, 247, 0.58), rgba(245, 237, 225, 0.38)); --exemple-accent: #806c58; --exemple-border: 1px solid rgba(137, 116, 94, 0.20); --exemple-h2-bg: linear-gradient(125deg, rgba(231, 217, 198, 0.58) 0%, rgba(246, 237, 223, 0.50) 56%, rgba(229, 216, 211, 0.42) 100%); --exemple-h2-text: #65594e; --table-border: rgba(77, 106, 119, 0.20); --table-head-bg: linear-gradient(135deg, #d5e4e7 0%, #f6e4dc 100%); --table-head-text: #405b67; --table-row-even-bg: rgba(226, 235, 235, 0.42); --btn-bg: linear-gradient(135deg, #587582 0%, #45626f 100%); --btn-bg-hover: linear-gradient(135deg, #5c7884 0%, #4d6b78 100%); --btn-text: #fffdfb; --btn-shadow: 0 6px 16px rgba(55, 82, 94, 0.22); /* Bord supérieur uni, identique au meta theme-color. */ --navbar-bg: #e7ecec; --navbar-text: #405762; --navbar-shadow: 0 2px 16px rgba(58, 81, 91, 0.13); --navbar-hover-bg: rgba(75, 108, 122, 0.12); --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: #4e6c7a; --dropdown-bg: rgba(255, 250, 247, 0.94); --dropdown-link-color: #414b50; --dropdown-link-hover-bg: rgba(190, 211, 217, 0.38); --dropdown-blur: blur(20px); --dropdown-mobile-bg: rgba(248, 248, 245, 0.98); --balise-code: #8b5b58; --code-bg: rgba(226, 235, 236, 0.72); --code-border: rgba(78, 108, 122, 0.24); --code-bg-solid: #fbfdfc; --font-titres: 'Quicksand', 'DM Sans', 'Poppins', system-ui, sans-serif; --font-corps: 'DM Sans', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace; --radius-carte: 26px; --radius-bloc: 16px; --radius-bouton: 999px; --navbar-liens-taille: 14px; /* Chrome bleu brume clair et uniforme ; sa bordure le sépare des zones de code blanches sans assombrir l'ensemble. */ --editor-bar-bg: #d9e8eb; --editor-bar-text: #344e59; --editor-bar-border: #a3bdc5; --schema-halo: #fff7f2; --note-cahier-accent: #b76558; --note-cahier-text: #71443d; --reponse-juste: #287852; --reponse-fausse: #b13d50; --reponse-juste-bg: rgba(40, 120, 82, 0.10); --reponse-fausse-bg: rgba(177, 61, 80, 0.09); --qcm-choisi-bg: linear-gradient(135deg, #587582 0%, #45626f 100%); --qcm-choisi-text: #fffdfb; --qcm-choisi-border: #385461; } /* Le fond se comporte comme un papier continu : les halos ne repartent pas à chaque écran lors du défilement. */ html[data-theme="aquarelle"] body { background-attachment: fixed; } /* Le fond générique des cartes ne doit pas opacifier les lavis très légers des exercices et exemples : le papier texturé reste visible au travers. */ html[data-theme="aquarelle"] .container > .exercice, html[data-theme="aquarelle"] .container > .exemple { background-color: transparent; } /* Le rayon pilule convient aux boutons, pas au fond généré par highlight.js dans un bloc de code : il masquerait les lignes courtes. */ html[data-theme="aquarelle"] pre code { border-radius: calc(var(--radius-bloc) / 2); } /* Signature de la leçon : deux lavis très diffus, pêche puis bleu brume, autour du cerne complet de la carte. */ html[data-theme="aquarelle"] .lecon { box-shadow: 0 0 0 5px rgba(119, 157, 171, 0.15), 0 18px 44px rgba(61, 86, 96, 0.16), 0 0 38px rgba(226, 151, 129, 0.16); } html[data-theme="aquarelle"] .lecon:hover { box-shadow: 0 0 0 6px rgba(119, 157, 171, 0.20), 0 22px 50px rgba(61, 86, 96, 0.20), 0 0 44px rgba(226, 151, 129, 0.20); } /* ============================================================= 3. MODERNISTE — brutaliste clair, Archivo, aucuns coins arrondis. Bordures noires 2px PARTOUT, leçons comprises ; le rouge #ec3013 n'apparaît qu'en touches : bandeau de titre des leçons, boutons, numéros, liens. ============================================================= */ html[data-theme="moderniste"] { --body-bg: repeating-linear-gradient(0deg, transparent 0 31px, rgba(32, 30, 29, 0.035) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(32, 30, 29, 0.035) 31px 32px), #e9e7e4; --body-bg-solid: #e9e7e4; --body-text: #201e1d; --muted-text: #605d5d; --accent: #ec3013; --accent-strong: #ae1800; --accent-soft: #fff2ef; --accent-blue: #ec3013; --texte-lecon-exemple: #444141; --link-hover: #ae1800; --h1-text: #201e1d; --container-bg: #f8f7f5; --container-blur: 0px; --container-border: 2px solid #201e1d; --container-shadow: 3px 3px 0 rgba(32, 30, 29, 0.24); --container-shadow-hover: 5px 5px 0 rgba(32, 30, 29, 0.30); --card-h2-bg: transparent; --card-h2-border: #201e1d; --card-h2-accent: #ec3013; --card-h2-text: #201e1d; /* pas de filet gauche (signature historique) : cadre noir uniforme ; la leçon se détache par une ombre décalée nette (règle plus bas) */ --card-h2-border-left: 1px solid #201e1d; --lecon-border-left: 2px solid #201e1d; --lecon-h2-border-left: 2px solid #201e1d; --exercice-h2-border-left: 2px solid #201e1d; --exemple-h2-border-left: 2px solid #201e1d; /* leçon : cadre noir comme les autres, seul le bandeau de titre porte le rouge (équivalent du chip « définition » plein) */ --lecon-bg: #fffdfa; --lecon-accent: #201e1d; --lecon-border: 2px solid #201e1d; --lecon-h2-bg: #ec3013; --lecon-h2-text: #ffffff; /* exercice : bandeau noir plein (chip « exercice ») */ --exercice-bg: #f8f7f5; --exercice-accent: #201e1d; --exercice-border: 2px solid #201e1d; --exercice-h2-bg: #201e1d; --exercice-h2-text: #f3f2f2; --exercice-btn-bg: #ec3013; --exercice-btn-bg-hover: #dd2b0f; --exercice-btn-shadow: 2px 2px 0 rgba(32, 30, 29, 0.68); /* exemple : contour simple, gris encre */ --exemple-bg: #f0efed; --exemple-accent: #201e1d; --exemple-border: 2px solid #201e1d; --exemple-h2-bg: transparent; --exemple-h2-text: #201e1d; --table-border: rgba(32, 30, 29, 0.5); --table-head-bg: transparent; --table-head-text: #201e1d; --table-row-even-bg: rgba(32, 30, 29, 0.04); --btn-bg: #ec3013; --btn-bg-hover: #dd2b0f; --btn-text: #fffdfa; --btn-shadow: 2px 2px 0 rgba(32, 30, 29, 0.68); /* bord supérieur uni = meta theme-color (#e9e7e4) ; le trait noir de 2px se fait via l'ombre, donc PAS au bord supérieur */ --navbar-bg: #e9e7e4; --navbar-text: #201e1d; --navbar-shadow: 0 2px 0 #201e1d, 0 7px 0 rgba(32, 30, 29, 0.09); --navbar-hover-bg: rgba(236, 48, 19, 0.12); /* navbar claire comme le corps : les boutons rouges du thème conviennent */ --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: #ae1800; --dropdown-bg: #f8f7f5; --dropdown-link-color: #201e1d; --dropdown-link-hover-bg: rgba(236, 48, 19, 0.12); --dropdown-blur: blur(0px); --dropdown-mobile-bg: #f8f7f5; --balise-code: #ae1800; --code-bg: #eae9e9; --code-border: #201e1d; --code-bg-solid: #eae9e9; --font-titres: 'Archivo', system-ui, sans-serif; --font-corps: 'Archivo', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, 'Liberation Mono', monospace; --radius-carte: 0px; --radius-bloc: 0px; --radius-bouton: 0px; --navbar-liens-taille: 12px; --editor-bar-bg: #201e1d; --editor-bar-text: #f3f2f2; --editor-bar-border: #201e1d; --schema-halo: #f8f7f5; /* moderniste : surface des cartes, pour détacher les poids des arêtes */ --note-cahier-accent: #ec3013; --note-cahier-text: #9e3526; /* correction des QCM : le rouge du thème pour le faux, un vert plat pour le juste */ --reponse-juste: #0f7a3d; --reponse-fausse: #ec3013; --reponse-juste-bg: rgba(15, 122, 61, 0.08); --reponse-fausse-bg: rgba(236, 48, 19, 0.07); /* aplat rouge + cerne noir 2px, comme les boutons du thème */ --qcm-choisi-bg: #ec3013; --qcm-choisi-text: #f3f2f2; --qcm-choisi-border: #201e1d; } /* Moderniste : signatures typographiques (uppercase, graisse forte) */ html[data-theme="moderniste"] h1, html[data-theme="moderniste"] h2 { text-transform: uppercase; letter-spacing: -0.01em; } html[data-theme="moderniste"] h1 { font-weight: 800; } /* Moderniste architectural : le titre de chapitre devient une masse noire centrée, prolongée par une barre rouge verticale. */ html[data-theme="moderniste"] .container > h1 { position: relative; box-sizing: border-box; width: min(880px, 78%); margin-right: auto; margin-left: auto; padding: 18px 28px; color: var(--lecon-h2-text); background: var(--body-text); text-align: center; } html[data-theme="moderniste"] .container > h1::after { position: absolute; top: 0; right: -14px; width: 10px; height: 100%; margin: 0; background: var(--accent); } html[data-theme="moderniste"] .titres_menu, html[data-theme="moderniste"] .navbar .brand { text-transform: uppercase; letter-spacing: 0.04em; } /* Le dropdown et le sommaire moderniste prennent un cadre noir net */ html[data-theme="moderniste"] .dropdown-content, html[data-theme="moderniste"] .sommaire-panneau, html[data-theme="moderniste"] .theme-menu-panneau { border: 2px solid #201e1d; box-shadow: 6px 6px 0 rgba(32, 30, 29, 0.28); } /* Le blanc du bandeau de leçon (lecon-h2-text) serait invisible dans le sommaire flottant : on y garde le rouge pour les leçons */ html[data-theme="moderniste"] .sommaire-panneau a.lien-lecon { color: #ec3013; } /* Moderniste : sans filet gauche, la leçon se détache par une ombre portée décalée, nette et sans flou (même geste que les panneaux) */ html[data-theme="moderniste"] .lecon { background: var(--lecon-bg); box-shadow: 6px 6px 0 rgba(32, 30, 29, 0.34); } html[data-theme="moderniste"] .lecon:hover { box-shadow: 8px 8px 0 rgba(32, 30, 29, 0.38); } /* Les exercices occupent le plan intermédiaire ; les exemples, plus discrets, restent presque posés sur la page. Toutes les ombres restent franches. */ html[data-theme="moderniste"] .exercice { background: var(--exercice-bg); box-shadow: 4px 4px 0 rgba(32, 30, 29, 0.28); } html[data-theme="moderniste"] .exercice:hover { box-shadow: 6px 6px 0 rgba(32, 30, 29, 0.34); } html[data-theme="moderniste"] .exemple { background: var(--exemple-bg); box-shadow: 2px 2px 0 rgba(32, 30, 29, 0.20); } html[data-theme="moderniste"] .exemple:hover { box-shadow: 4px 4px 0 rgba(32, 30, 29, 0.26); } /* Moderniste mécanique : les cartes avancent d'un cran au survol. Le tempo court et linéaire évoque un assemblage physique plutôt qu'un flottement. */ html[data-theme="moderniste"] .lecon, html[data-theme="moderniste"] .exercice, html[data-theme="moderniste"] .exemple { transition: opacity 0.55s ease-out, transform 0.12s linear, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.12s linear; } html[data-theme="moderniste"] .lecon:hover, html[data-theme="moderniste"] .exercice:hover, html[data-theme="moderniste"] .exemple:hover { transform: translate(-2px, -2px); } /* Les actions reprennent exactement le geste mécanique de la maquette : décalées au repos, immobiles au survol, elles glissent dans leur ombre uniquement pendant la pression. */ html[data-theme="moderniste"] .btn, html[data-theme="moderniste"] .btn-connexion, html[data-theme="moderniste"] .sommaire-bouton, html[data-theme="moderniste"] .retour-haut, html[data-theme="moderniste"] .exercice .btn-valider { box-shadow: 4px 4px 0 var(--body-text); transform: translate(-1px, -1px); transition: transform 0.08s linear, box-shadow 0.08s linear; } html[data-theme="moderniste"] .btn:hover, html[data-theme="moderniste"] .sommaire-bouton:hover, html[data-theme="moderniste"] .retour-haut:hover { background: var(--btn-bg); } html[data-theme="moderniste"] .btn-connexion:hover { background: var(--navbar-btn-bg); } html[data-theme="moderniste"] .exercice .btn-valider:hover { background: var(--exercice-btn-bg); } html[data-theme="moderniste"] .btn:active, html[data-theme="moderniste"] .btn-connexion:active, html[data-theme="moderniste"] .sommaire-bouton:active, html[data-theme="moderniste"] .retour-haut:active, html[data-theme="moderniste"] .exercice .btn-valider:active { box-shadow: 1px 1px 0 var(--body-text); transform: translate(2px, 2px); } @media screen and (max-width: 700px) { html[data-theme="moderniste"] .container > h1 { width: calc(100% - 14px); padding: 16px 18px; } } @media (prefers-reduced-motion: reduce) { html[data-theme="moderniste"] .lecon, html[data-theme="moderniste"] .exercice, html[data-theme="moderniste"] .exemple, html[data-theme="moderniste"] .btn, html[data-theme="moderniste"] .btn-connexion, html[data-theme="moderniste"] .sommaire-bouton, html[data-theme="moderniste"] .retour-haut { transition: none; } } /* Les blocs de code n'ont pas de cadre dans le thème moderniste. */ html[data-theme="moderniste"] pre:has(> code:not(.console):not(.test_assert)) { box-shadow: none; } /* ============================================================= 4. FLUX — poste de commande graphite froid, angles vifs ; Space Grotesk (titres) + Inter (corps) + JetBrains Mono. Le fond sans grille porte seulement trois halos bleus très diffus. L'orange signale les leçons, le bleu électrique les actions, exercices et Pyodide, le turquoise les exemples, le vert la validation, l'orange clair les introductions et le code en ligne. Les surfaces restent presque noires, les lumières sont localisées, les bordures h2 sont complètes et les tables ont un en-tête uni. ============================================================= */ html[data-theme="flux"] { --body-bg: radial-gradient(940px 680px at 94% 4%, rgba(48, 110, 137, 0.10), transparent 72%), radial-gradient(820px 620px at 4% 58%, rgba(35, 86, 145, 0.060), transparent 74%), radial-gradient(720px 560px at 66% 94%, rgba(33, 111, 146, 0.050), transparent 72%), linear-gradient(155deg, #090a0c 0%, #111318 50%, #171a1e 100%); --body-bg-solid: #111318; --body-text: #e8edf2; --muted-text: #919ba8; --accent: #3ddcff; --accent-strong: #4ba8ff; --accent-soft: rgba(61, 220, 255, 0.10); --accent-blue: #3ddcff; --texte-lecon-exemple: #d5dbe2; --link-hover: #3ddcff; --h1-text: #f4f8fb; --container-bg: rgba(9, 13, 19, 0.92); --container-blur: 10px; --container-border: 1px solid #232d37; --container-shadow: 0 14px 36px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.025); --container-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.38), 0 0 24px rgba(61, 220, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04); --card-h2-bg: linear-gradient(105deg, rgba(61, 220, 255, 0.11), rgba(31, 123, 255, 0.08) 58%, rgba(145, 155, 168, 0.05)); --card-h2-border: #2b3945; --card-h2-accent: #3ddcff; --card-h2-text: #eef5f7; /* pas de filet gauche (signature historique) : cerne graphite ; la leçon est marquée aux coins par deux équerres orange (plus bas) */ --card-h2-border-left: 1px solid #2b3945; --lecon-border-left: 1px solid rgba(255, 122, 33, 0.82); --lecon-h2-border-left: 1px solid rgba(255, 122, 33, 0.82); --exercice-h2-border-left: 1px solid rgba(61, 220, 255, 0.36); --exemple-h2-border-left: 1px solid rgba(73, 227, 193, 0.28); /* leçon = orange néon, cerne complet et équerres techniques */ --lecon-bg: linear-gradient(145deg, rgba(31, 21, 18, 0.96), rgba(15, 18, 24, 0.95) 62%, rgba(18, 23, 31, 0.92)); --lecon-accent: #ff7a21; --lecon-border: 1px solid rgba(255, 122, 33, 0.82); --lecon-h2-bg: linear-gradient(105deg, rgba(255, 106, 22, 0.46), rgba(255, 138, 61, 0.18) 64%, rgba(16, 24, 30, 0.24)); --lecon-h2-text: #fff1e7; /* exercice = cyan électrique vers bleu, langage visuel de l'action */ --exercice-bg: linear-gradient(145deg, rgba(7, 14, 20, 0.97), rgba(10, 13, 22, 0.96)); --exercice-accent: #3ddcff; --exercice-border: 1px solid rgba(61, 220, 255, 0.28); --exercice-h2-bg: linear-gradient(105deg, rgba(61, 220, 255, 0.21), rgba(31, 123, 255, 0.13) 70%, rgba(11, 18, 27, 0.28)); --exercice-h2-text: #bcefff; --exercice-btn-bg: linear-gradient(135deg, rgba(61, 220, 255, 0.22), rgba(31, 123, 255, 0.18)); --exercice-btn-bg-hover: linear-gradient(135deg, rgba(61, 220, 255, 0.34), rgba(31, 123, 255, 0.28)); --exercice-btn-shadow: inset 0 0 0 1px rgba(61, 220, 255, 0.50), 0 0 18px rgba(61, 220, 255, 0.10); /* exemple = turquoise néon sombre, plus discret que les deux cartes d'action */ --exemple-bg: linear-gradient(145deg, rgba(7, 16, 16, 0.96), rgba(8, 13, 18, 0.95)); --exemple-accent: #49e3c1; --exemple-border: 1px solid rgba(73, 227, 193, 0.22); --exemple-h2-bg: linear-gradient(105deg, rgba(73, 227, 193, 0.16), rgba(61, 220, 255, 0.05) 74%, rgba(11, 17, 23, 0.28)); --exemple-h2-text: #baf5e8; --table-border: rgba(129, 157, 176, 0.24); --table-head-bg: #15242c; --table-head-text: #ecf8f6; --table-row-even-bg: rgba(61, 220, 255, 0.035); /* Les actions génériques sont des surfaces bleues opaques, comme dans les autres thèmes : Sommaire et retour en haut ne laissent plus voir la page. */ --btn-bg: linear-gradient(135deg, #176a83 0%, #174f7b 100%); --btn-bg-hover: linear-gradient(135deg, #1e819d 0%, #1f65a0 100%); --btn-text: #e9faff; --btn-shadow: inset 0 0 0 1px rgba(86, 209, 255, 0.36), 0 8px 22px rgba(8, 59, 82, 0.32); /* bord supérieur uni = meta theme-color (#0f131a) ; le trait de séparation se fait via l'ombre, pas au bord supérieur */ --navbar-bg: #0f131a; --navbar-text: #edf2f5; --navbar-shadow: 0 1px 0 #293440, 0 8px 24px rgba(0, 0, 0, 0.22); --navbar-hover-bg: rgba(61, 220, 255, 0.11); /* navbar graphite comme les panneaux : les boutons du thème conviennent */ --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: #80ddff; --dropdown-bg: rgba(13, 18, 25, 0.96); --dropdown-link-color: #d5dce3; --dropdown-link-hover-bg: rgba(61, 220, 255, 0.12); --dropdown-blur: blur(18px); --dropdown-mobile-bg: rgba(9, 13, 19, 0.98); --balise-code: #ff9a57; --code-bg: rgba(8, 12, 17, 0.88); --code-border: #293a47; --code-bg-solid: #090d13; --font-titres: 'Space Grotesk', system-ui, sans-serif; --font-corps: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --radius-carte: 0px; --radius-bloc: 0px; --radius-bouton: 0px; --navbar-liens-taille: 13px; /* Chrome cyan/bleu plus clair que le corps des panneaux. */ --editor-bar-bg: linear-gradient(105deg, #122d37 0%, #192b3d 58%, #182a44 100%); --editor-bar-text: #bcefff; --editor-bar-border: #356577; --schema-halo: #10151d; --note-cahier-accent: #3ddcff; --note-cahier-text: #bcefff; /* QCM : vert franc pour la validation, corail pour l'erreur. */ --reponse-juste: #45e39f; --reponse-fausse: #ff6f5e; --reponse-juste-bg: rgba(69, 227, 159, 0.09); --reponse-fausse-bg: rgba(255, 111, 94, 0.10); /* Un choix coché est une action : aplat cyan et encre sombre. */ --qcm-choisi-bg: #3ddcff; --qcm-choisi-text: #071319; --qcm-choisi-border: #3ddcff; } /* Les halos et les surfaces restent fixes pendant le défilement : la page se comporte comme un même poste de commande continu. */ html[data-theme="flux"] body { background-attachment: fixed; } /* Flux : titres resserrés et lumière froide très localisée. */ html[data-theme="flux"] h1, html[data-theme="flux"] h2 { letter-spacing: -0.02em; } /* Les introductions reprennent l'accent orange des leçons pour que leur titre ressorte nettement sans rejoindre le bleu des zones d'action. */ html[data-theme="flux"] .introduction h3, html[data-theme="flux"] .introduction h4 { color: var(--lecon-accent); } /* Dans la leçon, les sous-titres reprennent son orange ; le code en ligne emploie une variante orange plus claire pour garder son contraste. */ html[data-theme="flux"] .lecon h3, html[data-theme="flux"] .lecon h4 { color: var(--lecon-accent); } html[data-theme="flux"] h1 { text-shadow: 0 0 28px rgba(61, 220, 255, 0.14); } html[data-theme="flux"] h1::after { box-shadow: 0 0 12px rgba(255, 122, 33, 0.50), 0 0 26px rgba(61, 220, 255, 0.20); } /* Chaque famille reçoit son propre halo uniquement au survol. */ html[data-theme="flux"] .lecon:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 0 30px rgba(255, 122, 33, 0.18), inset 0 0 0 1px rgba(255, 122, 33, 0.28); } html[data-theme="flux"] .exercice:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 0 30px rgba(61, 220, 255, 0.13), inset 0 0 0 1px rgba(61, 220, 255, 0.16); } html[data-theme="flux"] .exemple:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 0 28px rgba(73, 227, 193, 0.11), inset 0 0 0 1px rgba(73, 227, 193, 0.13); } html[data-theme="flux"] .btn:hover, html[data-theme="flux"] .btn-connexion:hover { filter: brightness(1.12); } /* Ace conserve sa coloration syntaxique sombre, mais le cobalt disparaît au profit de l'encre bleutée du thème et de lignes actives cyan. */ html[data-theme="flux"] .ace-cobalt, html[data-theme="flux"] .ace-cobalt .ace_scroller { background-color: var(--code-bg-solid); } html[data-theme="flux"] .ace-cobalt .ace_gutter { background: #111822; color: #758799; border-right: 1px solid var(--code-border); } html[data-theme="flux"] .ace-cobalt .ace_marker-layer .ace_active-line, html[data-theme="flux"] .ace-cobalt .ace_gutter-active-line { background: rgba(61, 220, 255, 0.065); } /* Flux : sans filet gauche, la leçon est marquée aux coins par deux équerres orange (haut-gauche et bas-droit), façon plan technique */ html[data-theme="flux"] .lecon { position: relative; } html[data-theme="flux"] .lecon::before, html[data-theme="flux"] .lecon::after { content: ""; position: absolute; width: 20px; height: 20px; pointer-events: none; } html[data-theme="flux"] .lecon::before { top: 0; left: 0; border-top: 2px solid #ff7a21; border-left: 2px solid #ff7a21; filter: drop-shadow(0 0 5px rgba(255, 122, 33, 0.52)); } html[data-theme="flux"] .lecon::after { bottom: 0; right: 0; border-bottom: 2px solid #ff7a21; border-right: 2px solid #ff7a21; filter: drop-shadow(0 0 5px rgba(255, 122, 33, 0.52)); } /* ============================================================= 5. Ajustements communs aux nouveaux thèmes ============================================================= */ /* Les images SVG des cours supposent souvent un fond clair : sur les thèmes sombres, on leur assure un support lisible (déjà le cas en historique-sombre via le fond des cartes translucides). */ html[data-theme="nocturne"] .imagecentree img, html[data-theme="flux"] .imagecentree img { background: #ffffff; padding: 8px; } html[data-theme="moderniste"] .sommaire-bouton, html[data-theme="moderniste"] .retour-haut, html[data-theme="flux"] .sommaire-bouton, html[data-theme="flux"] .retour-haut { border-radius: var(--radius-bouton); }