JulesandClaude Sonnet 5
0903b8989b
- package.json : dépendance @transformer/ui (git+https design-system.git) - nuxt.config.ts : css tokens.css + theme/aep.css chargés avant main.css - assets/css/main.css : --nav-bg/-bg-alt/-surface/-primary/-accent/-text/ -text-muted/-font deviennent des alias var(--role) DS ; focus ring sur var(--focus-ring). --nav-primary-raw, --nav-primary-solid, --nav-accent-soft et --nav-text-on-primary restent des valeurs propres à nav-carte (pas d'équivalent DS fiable en sombre — --nav-text-on-primary sert de contraste à la fois sur --nav-primary translucide et --nav-primary-solid opaque, deux fonds dont la légèreté s'inverse en sombre ; aliaser sur --on-primary DS cassait le contraste du logo AEP et de ~10 boutons en sombre, testé au pixel et reverti) - tailwind.config.js : couleurs nav.* pointent vers les variables --nav-* (pas de darkMode:'class' ajouté — aucune classe dark: Tailwind en usage) Vérifié : npm run build OK, diff pixel avant/après < 0.5% sur home + agences en clair/sombre (bruit = badge Nuxt Devtools, pas les tokens). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
140 lines
4.6 KiB
CSS
140 lines
4.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ── Palette NAV V2 — Sobre institutionnel ─────────────────────────────── */
|
|
/* --nav-* sont désormais des ALIAS vers les rôles @transformer/ui (tokens.css
|
|
+ theme/aep.css, chargés avant ce fichier dans nuxt.config.ts).
|
|
--nav-primary-raw, --nav-primary-solid et --nav-text-on-primary restent des
|
|
valeurs PROPRES à nav-carte (non aliasées) :
|
|
- le DS n'a pas de triplet RGB (--nav-primary-raw) ;
|
|
- le --text du DS en sombre (#e8ecf5) ne correspond pas à la teinte bleu
|
|
nuit voulue ici pour --nav-primary-solid (#c8d2f0) ;
|
|
- --nav-text-on-primary sert de texte de contraste à la fois sur
|
|
--nav-primary (translucide, alias DS) ET sur --nav-primary-solid (opaque,
|
|
propre à nav-carte) — deux fonds dont la légèreté s'inverse en sombre
|
|
(translucide ≈ fond sombre, solid = lavande claire). Le rôle --on-primary
|
|
du DS ne colle qu'au premier cas ; l'aliaser cassait le contraste du AEP
|
|
logo, des boutons trouver-du-taf, BandeauBas, SimulateurFeature,
|
|
FicheDetail (texte clair sur --primary-solid clair en sombre — testé au
|
|
pixel le 25/09, illisible). Gardé littéral = identique à la prod avant B3.
|
|
Idem --nav-accent-soft, sans équivalent DS. (B3-M0, 2026-09-25) */
|
|
:root {
|
|
/* Fonds */
|
|
--nav-bg: var(--bg);
|
|
--nav-bg-alt: var(--bg-alt);
|
|
--nav-surface: var(--surface);
|
|
|
|
/* Bleu nuit — 60% d'opacité sur les surfaces */
|
|
--nav-primary-raw: 26, 34, 56;
|
|
--nav-primary: var(--primary);
|
|
--nav-primary-solid: #1a2238;
|
|
|
|
/* Accent safran */
|
|
--nav-accent: var(--accent);
|
|
--nav-accent-soft: rgba(245, 179, 66, 0.85);
|
|
|
|
/* Texte */
|
|
--nav-text: var(--text);
|
|
--nav-text-muted: var(--text-muted);
|
|
--nav-text-on-primary: #f8f6f1;
|
|
|
|
/* Typographie */
|
|
--nav-font: var(--font-body);
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
background-color: var(--nav-bg);
|
|
color: var(--nav-text);
|
|
font-family: var(--nav-font);
|
|
}
|
|
}
|
|
|
|
/* ── Leaflet overrides ──────────────────────────────────────────────────── */
|
|
.leaflet-container {
|
|
background: var(--nav-bg-alt);
|
|
font-family: var(--nav-font);
|
|
}
|
|
|
|
/* Clusters markercluster */
|
|
.marker-cluster-small,
|
|
.marker-cluster-medium,
|
|
.marker-cluster-large {
|
|
background-color: rgba(26, 34, 56, 0.25) !important;
|
|
}
|
|
.marker-cluster-small div,
|
|
.marker-cluster-medium div,
|
|
.marker-cluster-large div {
|
|
background-color: var(--nav-primary) !important;
|
|
color: var(--nav-text-on-primary) !important;
|
|
font-family: var(--nav-font);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Focus ring accessibilité */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--focus-ring);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── Dark mode ──────────────────────────────────────────────────────────── */
|
|
.dark {
|
|
--nav-bg: var(--bg);
|
|
--nav-bg-alt: var(--bg-alt);
|
|
--nav-surface: var(--surface);
|
|
|
|
--nav-primary-raw: 200, 210, 240;
|
|
--nav-primary: var(--primary);
|
|
--nav-primary-solid: #c8d2f0;
|
|
|
|
--nav-accent: var(--accent);
|
|
--nav-accent-soft: rgba(245, 179, 66, 0.85);
|
|
|
|
--nav-text: var(--text);
|
|
--nav-text-muted: var(--text-muted);
|
|
--nav-text-on-primary: #111520;
|
|
}
|
|
|
|
.dark body {
|
|
background-color: var(--nav-bg);
|
|
color: var(--nav-text);
|
|
}
|
|
|
|
/* Leaflet overrides dark */
|
|
.dark .leaflet-container {
|
|
background: var(--nav-bg-alt);
|
|
}
|
|
|
|
.dark .leaflet-control-layers {
|
|
background: var(--nav-surface);
|
|
color: var(--nav-text);
|
|
border-color: var(--nav-bg-alt);
|
|
}
|
|
|
|
.dark .leaflet-control-layers label {
|
|
color: var(--nav-text);
|
|
}
|
|
|
|
.dark .leaflet-popup-content-wrapper {
|
|
background: var(--nav-surface);
|
|
color: var(--nav-text);
|
|
}
|
|
|
|
.dark .leaflet-popup-tip {
|
|
background: var(--nav-surface);
|
|
}
|
|
|
|
/* ── Rendu Markdown chatbot (useMarkdown composable) ────────────────────── */
|
|
.md-content { font-size: inherit; line-height: 1.6; }
|
|
.md-content p { margin: 0 0 0.5em; }
|
|
.md-content p:last-child { margin-bottom: 0; }
|
|
.md-content strong, .md-h1, .md-h2, .md-h3 { font-weight: 700; }
|
|
.md-h2 { font-size: 0.9375em; display: block; margin-bottom: 0.25em; }
|
|
.md-h3 { font-size: 0.875em; display: block; }
|
|
.md-content em { font-style: italic; }
|
|
.md-list { margin: 0.375em 0 0.375em 1em; padding: 0; list-style: disc; }
|
|
.md-list li { margin-bottom: 0.2em; }
|
|
.md-link { text-decoration: underline; opacity: 0.85; }
|
|
.md-link:hover { opacity: 1; }
|