theme/aep: palette NAV V2 réelle (crème, bleu nuit 60 %, safran), clair par défaut, sombre sur .dark ou data-theme
L'ancien thème (sombre + rouge #c0392b) décrivait la V1 d'aep et n'a jamais été consommé. Source : 1 PROJETS/DEV/AEP/Cadrage/palette-nav-v2.md (validée 14/04/2026). Cascade AEP B3. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Jules (Fable)
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
b7f4f21b7c
commit
057de406c8
+75
-58
@@ -1,37 +1,91 @@
|
||||
/* ==========================================================================
|
||||
theme/aep.css — aep.trans-former.fr
|
||||
SOMBRE PAR DÉFAUT : le :root est la palette sombre, quelle que soit la
|
||||
préférence système. Seul un data-theme="light" explicite (toggle) bascule
|
||||
vers la variante claire.
|
||||
Accent : rouge #c0392b.
|
||||
Palette NAV V2 « Sobre institutionnel », validée par Jules le 14/04/2026
|
||||
(source : 1 PROJETS/DEV/AEP/Cadrage/palette-nav-v2.md) — c'est la palette
|
||||
EN PRODUCTION. La version précédente de ce fichier (sombre + rouge #c0392b)
|
||||
décrivait la V1 du site et n'a jamais été consommée ; remplacée le 25/09/2026
|
||||
(cascade AEP B3).
|
||||
|
||||
Règle propre à AEP : le bleu nuit #1a2238 s'emploie à 60 % d'opacité sur les
|
||||
surfaces (--primary) ; la version pleine ne sert qu'au texte (--text).
|
||||
Accent safran #f5b342 : texte SOMBRE dessus (--on-accent), jamais blanc
|
||||
(décision DS du 20/07 : le blanc sur un accent chaud échoue AA).
|
||||
|
||||
Clair par défaut. Sombre UNIQUEMENT sur bascule explicite : nav-carte pose la
|
||||
classe `.dark` sur <html> (localStorage `aep_theme`) ; `[data-theme="dark"]`
|
||||
est accepté aussi pour rester compatible avec le protocole DS. Pas de
|
||||
`prefers-color-scheme` automatique : le site n'en a jamais eu, en ajouter un
|
||||
changerait ce que voient les visiteurs — hors périmètre B3.
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-heading: var(--font-body);
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
|
||||
--bg: #f8f6f1;
|
||||
--bg-alt: #eee9df;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #eee9df;
|
||||
|
||||
--text: #1a2238;
|
||||
--text-muted: rgba(26, 34, 56, 0.55);
|
||||
--text-subtle: rgba(26, 34, 56, 0.45);
|
||||
|
||||
--border: rgba(26, 34, 56, 0.15);
|
||||
--border-strong: rgba(26, 34, 56, 0.35);
|
||||
|
||||
--primary: rgba(26, 34, 56, 0.6);
|
||||
--primary-hover: rgba(26, 34, 56, 0.75);
|
||||
--on-primary: #f8f6f1;
|
||||
|
||||
--accent: #f5b342;
|
||||
--on-accent: #1a2238;
|
||||
|
||||
--link: #1a2238;
|
||||
--link-hover: rgba(26, 34, 56, 0.75);
|
||||
|
||||
--focus-ring: #f5b342;
|
||||
|
||||
--success: #2f7a4f;
|
||||
--warning: #a16207;
|
||||
--danger: #b91c1c;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(26 34 56 / 0.08);
|
||||
--shadow-md: 0 4px 12px rgb(26 34 56 / 0.10);
|
||||
--shadow-lg: 0 12px 32px rgb(26 34 56 / 0.14);
|
||||
}
|
||||
|
||||
/* Sombre — bascule explicite seulement (classe .dark de nav-carte, ou data-theme) */
|
||||
:root.dark,
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
|
||||
--bg: #0d0d0d;
|
||||
--bg-alt: #131313;
|
||||
--surface: #181818;
|
||||
--surface-2: #202020;
|
||||
--bg: #111520;
|
||||
--bg-alt: #1e2538;
|
||||
--surface: #1a2238;
|
||||
--surface-2: #1e2538;
|
||||
|
||||
--text: #f2f2f2;
|
||||
--text-muted: #b5b5b5;
|
||||
--text-subtle: #8c8c8c;
|
||||
--text: #e8ecf5;
|
||||
--text-muted: rgba(200, 210, 240, 0.55);
|
||||
--text-subtle: rgba(200, 210, 240, 0.4);
|
||||
|
||||
--border: #262626;
|
||||
--border-strong: #3f3f3f;
|
||||
--border: rgba(200, 210, 240, 0.15);
|
||||
--border-strong: rgba(200, 210, 240, 0.35);
|
||||
|
||||
--primary: #c0392b;
|
||||
--primary-hover: #d64535;
|
||||
--on-primary: #ffffff;
|
||||
--primary: rgba(200, 210, 240, 0.15);
|
||||
--primary-hover: rgba(200, 210, 240, 0.25);
|
||||
--on-primary: #e8ecf5;
|
||||
|
||||
--accent: #c0392b;
|
||||
--on-accent: #ffffff;
|
||||
--accent: #f5b342;
|
||||
--on-accent: #111520;
|
||||
|
||||
--link: #e98b7f;
|
||||
--link-hover: #f2a99f;
|
||||
--link: #c8d2f0;
|
||||
--link-hover: #e8ecf5;
|
||||
|
||||
--focus-ring: #e98b7f;
|
||||
--focus-ring: #f5b342;
|
||||
|
||||
--success: #34d399;
|
||||
--warning: #fbbf24;
|
||||
@@ -41,40 +95,3 @@
|
||||
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
|
||||
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
|
||||
}
|
||||
|
||||
/* Variante claire — uniquement sur toggle explicite */
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
|
||||
--bg: #faf9f7;
|
||||
--bg-alt: #f1efec;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #eceae6;
|
||||
|
||||
--text: #171717;
|
||||
--text-muted: #4a4a4a;
|
||||
--text-subtle: #6d6d6d;
|
||||
|
||||
--border: #e2e0dc;
|
||||
--border-strong: #ada9a2;
|
||||
|
||||
--primary: #a93226;
|
||||
--primary-hover: #922b20;
|
||||
--on-primary: #ffffff;
|
||||
|
||||
--accent: #a93226;
|
||||
--on-accent: #ffffff;
|
||||
|
||||
--link: #a93226;
|
||||
--link-hover: #922b20;
|
||||
|
||||
--focus-ring: #a93226;
|
||||
|
||||
--success: #15803d;
|
||||
--warning: #a16207;
|
||||
--danger: #b91c1c;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
|
||||
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
|
||||
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user