Jules (Fable)andClaude Fable 5.1
057de406c8
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>
98 lines
3.0 KiB
CSS
98 lines
3.0 KiB
CSS
/* ==========================================================================
|
|
theme/aep.css — aep.trans-former.fr
|
|
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: #111520;
|
|
--bg-alt: #1e2538;
|
|
--surface: #1a2238;
|
|
--surface-2: #1e2538;
|
|
|
|
--text: #e8ecf5;
|
|
--text-muted: rgba(200, 210, 240, 0.55);
|
|
--text-subtle: rgba(200, 210, 240, 0.4);
|
|
|
|
--border: rgba(200, 210, 240, 0.15);
|
|
--border-strong: rgba(200, 210, 240, 0.35);
|
|
|
|
--primary: rgba(200, 210, 240, 0.15);
|
|
--primary-hover: rgba(200, 210, 240, 0.25);
|
|
--on-primary: #e8ecf5;
|
|
|
|
--accent: #f5b342;
|
|
--on-accent: #111520;
|
|
|
|
--link: #c8d2f0;
|
|
--link-hover: #e8ecf5;
|
|
|
|
--focus-ring: #f5b342;
|
|
|
|
--success: #34d399;
|
|
--warning: #fbbf24;
|
|
--danger: #f87171;
|
|
|
|
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
|
|
--shadow-md: 0 4px 12px rgb(0 0 0 / 0.45);
|
|
--shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
|
|
}
|