From 057de406c804315e09d28fb26f10941d61e461b1 Mon Sep 17 00:00:00 2001 From: "Jules (Fable)" Date: Fri, 25 Sep 2026 11:40:06 +0200 Subject: [PATCH] =?UTF-8?q?theme/aep:=20palette=20NAV=20V2=20r=C3=A9elle?= =?UTF-8?q?=20(cr=C3=A8me,=20bleu=20nuit=2060=20%,=20safran),=20clair=20pa?= =?UTF-8?q?r=20d=C3=A9faut,=20sombre=20sur=20.dark=20ou=20data-theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- theme/aep.css | 133 ++++++++++++++++++++++++++++---------------------- 1 file changed, 75 insertions(+), 58 deletions(-) diff --git a/theme/aep.css b/theme/aep.css index 69308bd..d639556 100644 --- a/theme/aep.css +++ b/theme/aep.css @@ -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 (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); -}