/* ============================================================= 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 : blurple + aciers sur surfaces sombres uniformes ; classical : encre + or sur papier, blocs transparents finement cernés ; modernist : bordures noires 2px partout (leçons comprises), le rouge n'apparaît qu'en touches (titres de leçon, boutons, numéros) ; flux : graphite + lime, panneaux plats sans arrondi ni ombre, mono JetBrains en signature. Pas de codage rose/ambre/vert hérité des thèmes historiques. Valeurs sources : les maquettes d'origine (dossier nouveaux_themes, supprimé après intégration — les palettes sont documentées dans .claude/skills/theme-contract/SKILL.md). (attention : jamais de « étoile-slash » dans un commentaire !) ============================================================= */ /* ============================================================= 1. NOCTURNE — sombre profond, accent « blurple », Inter. Toutes les cartes = même surface #232532 cernée de #3f424d ; la hiérarchie se joue dans les nuances de blurple et d'acier. ============================================================= */ html[data-theme="nocturne"] { --body-bg: #161826; --body-bg-solid: #161826; --body-text: #e9e9ed; --muted-text: #9397ab; --accent: #9184d9; --accent-strong: #b5abfc; --accent-soft: #2b2741; --accent-blue: #b5abfc; --texte-lecon-exemple: #cfd3e5; --link-hover: #d2cefd; --h1-text: #f3f5fe; --container-bg: #232532; --container-blur: 0px; --container-border: 1px solid #3f424d; --container-shadow: 0 0 0 1px #3f424d, 0 6px 18px rgba(0, 0, 0, 0.55); --container-shadow-hover: 0 0 0 1px #595d6c, 0 10px 30px rgba(0, 0, 0, 0.65); --card-h2-bg: rgba(145, 132, 217, 0.10); --card-h2-border: #3f424d; --card-h2-accent: #9184d9; --card-h2-text: #e4e7f5; /* pas de filet gauche (signature historique) : bordure normale ; la leçon se signale par un halo blurple (règle plus bas) */ --card-h2-border-left: 1px solid #3f424d; --lecon-border-left: 1px solid #796cbf; --lecon-h2-border-left: 1px solid #796cbf; --exercice-h2-border-left: 1px solid #3f424d; --exemple-h2-border-left: 1px solid #3f424d; /* leçon = l'important : surface teintée blurple + cerne blurple, reconnaissable au premier coup d'œil parmi les cartes acier */ --lecon-bg: #262839; --lecon-accent: #b5abfc; --lecon-border: 1px solid #796cbf; --lecon-h2-bg: rgba(145, 132, 217, 0.22); --lecon-h2-text: #d2cefd; /* exercice = l'accent de base */ --exercice-bg: #232532; --exercice-accent: #9184d9; --exercice-border: 1px solid #3f424d; --exercice-h2-bg: rgba(145, 132, 217, 0.10); --exercice-h2-text: #d2cefd; /* boutons façon maquette : contour accent, fond transparent */ --exercice-btn-bg: rgba(145, 132, 217, 0.06); --exercice-btn-bg-hover: rgba(145, 132, 217, 0.20); --exercice-btn-shadow: inset 0 0 0 1px #796cbf; /* exemple = l'acier neutre */ --exemple-bg: #232532; --exemple-accent: #75798c; --exemple-border: 1px solid #3f424d; --exemple-h2-bg: rgba(147, 151, 171, 0.10); --exemple-h2-text: #cfd3e5; --table-border: rgba(233, 233, 237, 0.14); --table-head-bg: transparent; --table-head-text: #b2b6ca; --table-row-even-bg: rgba(255, 255, 255, 0.03); --btn-bg: rgba(145, 132, 217, 0.06); --btn-bg-hover: rgba(145, 132, 217, 0.20); --btn-text: #b5abfc; --btn-shadow: inset 0 0 0 1px #796cbf; /* bord supérieur uni = meta theme-color (#161826) */ --navbar-bg: #161826; --navbar-text: #e9e9ed; --navbar-shadow: 0 1px 0 #3f424d; --navbar-hover-bg: rgba(145, 132, 217, 0.16); --link-color: #d2cefd; --dropdown-bg: rgba(41, 43, 49, 0.97); --dropdown-link-color: #cfd3e5; --dropdown-link-hover-bg: rgba(145, 132, 217, 0.18); --dropdown-blur: blur(16px); --dropdown-mobile-bg: rgba(28, 30, 42, 0.98); --balise-code: #d2cefd; --code-bg: #292b31; --code-border: #3f424d; --font-titres: 'Inter', system-ui, sans-serif; --font-corps: 'Inter', system-ui, sans-serif; --radius-carte: 14px; --radius-bloc: 8px; --radius-bouton: 8px; --navbar-liens-taille: 13px; --editor-bar-bg: #292b31; --editor-bar-text: #b2b6ca; --editor-bar-border: #3f424d; --note-cahier-accent: #9184d9; --note-cahier-text: #d2cefd; } /* Nocturne : sans filet gauche, la leçon rayonne — surface et cerne blurple (variables ci-dessus) + halo diffus autour de la carte entière et derrière son bandeau de titre */ html[data-theme="nocturne"] .lecon { box-shadow: 0 0 28px rgba(145, 132, 217, 0.22), 0 6px 18px rgba(0, 0, 0, 0.55); } html[data-theme="nocturne"] .lecon .h2-lecon { box-shadow: 0 0 24px rgba(145, 132, 217, 0.30); } /* ============================================================= 2. CLASSICAL — papier, encre et or ; Cormorant + Lora. Blocs transparents finement cernés d'encre (pas de cartes blanches) ; seule la dorure distingue les registres. ============================================================= */ html[data-theme="classical"] { --body-bg: #f3f2f2; --body-bg-solid: #f3f2f2; --body-text: #201f1d; --muted-text: #7d7979; --accent: #b68235; --accent-strong: #7d5411; --accent-soft: #fff3e4; --accent-blue: #a06f24; --texte-lecon-exemple: #605d5d; --link-hover: #7d5411; --h1-text: #201f1d; /* blocs transparents sur le papier, cernés d'encre à 16 % */ --container-bg: transparent; --container-blur: 0px; --container-border: 1px solid rgba(32, 31, 29, 0.16); --container-shadow: none; --container-shadow-hover: 0 3px 10px rgba(45, 43, 43, 0.16); --card-h2-bg: transparent; --card-h2-border: rgba(32, 31, 29, 0.16); --card-h2-accent: #b68235; --card-h2-text: #201f1d; /* pas de filet gauche (signature historique) : cerne d'encre ; la leçon porte un filet doré sous son titre (règle plus bas) */ --card-h2-border-left: 1px solid rgba(32, 31, 29, 0.16); --lecon-border-left: 4px double #b68235; --lecon-h2-border-left: 1px solid rgba(32, 31, 29, 0.16); --exercice-h2-border-left: 1px solid rgba(32, 31, 29, 0.16); --exemple-h2-border-left: 1px solid rgba(32, 31, 29, 0.16); /* leçon = le registre doré plein : lavis doré + double filet or, immédiatement distinct des blocs cernés d'encre */ --lecon-bg: rgba(182, 130, 53, 0.06); --lecon-accent: #b68235; --lecon-border: 4px double #b68235; --lecon-h2-bg: #fff3e4; --lecon-h2-text: #7d5411; /* exercice = l'or en filigrane */ --exercice-bg: transparent; --exercice-accent: #b68235; --exercice-border: 1px solid rgba(32, 31, 29, 0.16); --exercice-h2-bg: rgba(182, 130, 53, 0.08); --exercice-h2-text: #7d5411; /* boutons façon maquette : contour or, fond transparent */ --exercice-btn-bg: rgba(182, 130, 53, 0.04); --exercice-btn-bg-hover: rgba(182, 130, 53, 0.14); --exercice-btn-shadow: inset 0 0 0 1px #b68235; /* exemple = le registre gris encre */ --exemple-bg: transparent; --exemple-accent: #9b9797; --exemple-border: 1px solid rgba(32, 31, 29, 0.16); --exemple-h2-bg: #eae9e9; --exemple-h2-text: #605d5d; --table-border: rgba(32, 31, 29, 0.20); --table-head-bg: transparent; --table-head-text: #201f1d; --table-row-even-bg: rgba(32, 31, 29, 0.04); --btn-bg: rgba(182, 130, 53, 0.04); --btn-bg-hover: rgba(182, 130, 53, 0.14); --btn-text: #7d5411; --btn-shadow: inset 0 0 0 1px #b68235; /* bord supérieur uni = meta theme-color (#f3f2f2) */ --navbar-bg: #f3f2f2; --navbar-text: #201f1d; --navbar-shadow: 0 1px 0 rgba(32, 31, 29, 0.16); --navbar-hover-bg: rgba(182, 130, 53, 0.12); --link-color: #a06f24; --dropdown-bg: rgba(243, 242, 242, 0.98); --dropdown-link-color: #201f1d; --dropdown-link-hover-bg: #fff3e4; --dropdown-blur: blur(12px); --dropdown-mobile-bg: rgba(243, 242, 242, 0.99); --balise-code: #7d5411; --code-bg: #eae9e9; --code-border: rgba(32, 31, 29, 0.16); --font-titres: 'Cormorant Garamond', Georgia, serif; --font-corps: 'Lora', Georgia, serif; --radius-carte: 7px; --radius-bloc: 4px; --radius-bouton: 4px; --navbar-liens-taille: 14px; --editor-bar-bg: #eae9e9; --editor-bar-text: #605d5d; --editor-bar-border: rgba(32, 31, 29, 0.16); --note-cahier-accent: #b68235; --note-cahier-text: #7d5411; } /* Classical : les titres serif gagnent à être un peu plus grands */ html[data-theme="classical"] h1 { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3rem); } /* Classical : sans filet gauche, la leçon s'annonce par son double filet or et son lavis doré (variables ci-dessus) ; le bandeau de titre garde un cadre d'encre fin + filet doré dessous, pour ne pas doubler le double filet de la carte */ html[data-theme="classical"] .lecon .h2-lecon { border: 1px solid rgba(32, 31, 29, 0.16); border-bottom: 2px solid #b68235; } /* ============================================================= 3. MODERNIST — 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="modernist"] { --body-bg: #f3f2f2; --body-bg-solid: #f3f2f2; --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: #f3f2f2; --container-blur: 0px; --container-border: 2px solid #201e1d; --container-shadow: none; --container-shadow-hover: none; --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: #f3f2f2; --lecon-accent: #201e1d; --lecon-border: 2px solid #201e1d; --lecon-h2-bg: #ec3013; --lecon-h2-text: #ffffff; /* exercice : bandeau noir plein (chip « exercice ») */ --exercice-bg: #f3f2f2; --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: none; /* exemple : contour simple, gris encre */ --exemple-bg: #f3f2f2; --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: #f3f2f2; --btn-shadow: none; /* bord supérieur uni = meta theme-color (#f3f2f2) ; le trait noir de 2px se fait via l'ombre, donc PAS au bord supérieur */ --navbar-bg: #f3f2f2; --navbar-text: #201e1d; --navbar-shadow: 0 2px 0 #201e1d; --navbar-hover-bg: rgba(236, 48, 19, 0.12); --link-color: #ae1800; --dropdown-bg: #f3f2f2; --dropdown-link-color: #201e1d; --dropdown-link-hover-bg: rgba(236, 48, 19, 0.12); --dropdown-blur: blur(0px); --dropdown-mobile-bg: #f3f2f2; --balise-code: #ae1800; --code-bg: #eae9e9; --code-border: #201e1d; --font-titres: 'Archivo', system-ui, sans-serif; --font-corps: 'Archivo', system-ui, sans-serif; --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; --note-cahier-accent: #ec3013; --note-cahier-text: #9e3526; } /* Modernist : signatures typographiques (uppercase, graisse forte) */ html[data-theme="modernist"] h1, html[data-theme="modernist"] h2 { text-transform: uppercase; letter-spacing: -0.01em; } html[data-theme="modernist"] h1 { font-weight: 800; } html[data-theme="modernist"] .titres_menu, html[data-theme="modernist"] .navbar .brand { text-transform: uppercase; letter-spacing: 0.04em; } /* Le dropdown et le sommaire modernist prennent un cadre noir net */ html[data-theme="modernist"] .dropdown-content, html[data-theme="modernist"] .sommaire-panneau, html[data-theme="modernist"] .theme-menu-panneau { border: 2px solid #201e1d; box-shadow: 6px 6px 0 rgba(32, 30, 29, 0.14); } /* 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="modernist"] .sommaire-panneau a.lien-lecon { color: #ec3013; } /* Modernist : 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="modernist"] .lecon { box-shadow: 6px 6px 0 rgba(32, 30, 29, 0.14); } /* ============================================================= 4. FLUX — sombre graphite, accent lime #c6f24e, angles vifs ; Space Grotesk (titres) + Inter (corps) + JetBrains Mono. Panneaux plats #23272e cernés de #343a43, aucun arrondi, aucune ombre ; boutons pleins lime à encre sombre #141619. Les registres se distinguent par la teinte du bandeau h2 : leçon = lime appuyé, exercice = lime en filigrane, exemple = turquoise #7fd6c4 (la couleur des chaînes de la maquette). ============================================================= */ html[data-theme="flux"] { --body-bg: #1c1f24; --body-bg-solid: #1c1f24; --body-text: #e9ecef; --muted-text: #8c939d; --accent: #c6f24e; --accent-strong: #8fd11e; --accent-soft: rgba(198, 242, 78, 0.10); --accent-blue: #7fd6c4; --texte-lecon-exemple: #ced3d9; --link-hover: #c6f24e; --h1-text: #f2f4f6; --container-bg: #23272e; --container-blur: 0px; --container-border: 1px solid #343a43; --container-shadow: none; /* pas d'ombre dans flux : le survol éclaircit juste le cerne */ --container-shadow-hover: 0 0 0 1px #454c57; --card-h2-bg: #2a2f37; --card-h2-border: #343a43; --card-h2-accent: #c6f24e; --card-h2-text: #e9ecef; /* pas de filet gauche (signature historique) : cerne graphite ; la leçon est marquée aux coins par deux équerres lime (plus bas) */ --card-h2-border-left: 1px solid #343a43; --lecon-border-left: 1px solid rgba(198, 242, 78, 0.55); --lecon-h2-border-left: 1px solid rgba(198, 242, 78, 0.55); --exercice-h2-border-left: 1px solid #343a43; --exemple-h2-border-left: 1px solid #343a43; /* leçon = l'important : cerne lime sur toute la carte + équerres, seule carte non graphite de la page */ --lecon-bg: #23272e; --lecon-accent: #c6f24e; --lecon-border: 1px solid rgba(198, 242, 78, 0.55); --lecon-h2-bg: rgba(198, 242, 78, 0.16); --lecon-h2-text: #d9f77f; /* exercice = le lime en filigrane, boutons lime translucide (voir --btn-*) */ --exercice-bg: #23272e; --exercice-accent: #c6f24e; --exercice-border: 1px solid #343a43; --exercice-h2-bg: rgba(198, 242, 78, 0.07); --exercice-h2-text: #d9f77f; --exercice-btn-bg: rgba(198, 242, 78, 0.14); --exercice-btn-bg-hover: rgba(198, 242, 78, 0.24); --exercice-btn-shadow: inset 0 0 0 1px rgba(198, 242, 78, 0.35); /* exemple = le turquoise, pour rester distinguable de la leçon */ --exemple-bg: #23272e; --exemple-accent: #7fd6c4; --exemple-border: 1px solid #343a43; --exemple-h2-bg: rgba(127, 214, 196, 0.10); --exemple-h2-text: #a8e4d7; --table-border: rgba(233, 236, 239, 0.14); --table-head-bg: transparent; --table-head-text: #b4bac2; --table-row-even-bg: rgba(255, 255, 255, 0.03); /* Le lime plein est trop agressif à l'oeil : tous les boutons du thème passent en lime translucide + texte lime sur le graphite, cerne lime léger pour rester définis (plutôt que le fill saturé à encre). */ --btn-bg: rgba(198, 242, 78, 0.14); --btn-bg-hover: rgba(198, 242, 78, 0.24); --btn-text: #d9f77f; --btn-shadow: inset 0 0 0 1px rgba(198, 242, 78, 0.35); /* bord supérieur uni = meta theme-color (#1c1f24) ; le trait de séparation se fait via l'ombre, pas au bord supérieur */ --navbar-bg: #1c1f24; --navbar-text: #e9ecef; --navbar-shadow: 0 1px 0 #343a43; --navbar-hover-bg: rgba(198, 242, 78, 0.12); --link-color: #d9f77f; --dropdown-bg: rgba(35, 39, 46, 0.97); --dropdown-link-color: #ced3d9; --dropdown-link-hover-bg: rgba(198, 242, 78, 0.12); --dropdown-blur: blur(12px); --dropdown-mobile-bg: rgba(28, 31, 36, 0.98); --balise-code: #c6f24e; --code-bg: #1c1f24; --code-border: #343a43; --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; --editor-bar-bg: #2a2f37; --editor-bar-text: #8c939d; --editor-bar-border: #343a43; --note-cahier-accent: #c6f24e; --note-cahier-text: #d9f77f; } /* Flux : titres resserrés façon Space Grotesk de la maquette */ html[data-theme="flux"] h1, html[data-theme="flux"] h2 { letter-spacing: -0.02em; } /* Flux : sans filet gauche, la leçon est marquée aux coins par deux équerres lime (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 #c6f24e; border-left: 2px solid #c6f24e; } html[data-theme="flux"] .lecon::after { bottom: 0; right: 0; border-bottom: 2px solid #c6f24e; border-right: 2px solid #c6f24e; } /* ============================================================= 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; }