111 lines
2.8 KiB
CSS
111 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ── Palette NAV V2 — Sobre institutionnel ─────────────────────────────── */
|
|
:root {
|
|
/* Fonds */
|
|
--nav-bg: #f8f6f1;
|
|
--nav-bg-alt: #eee9df;
|
|
--nav-surface: #ffffff;
|
|
|
|
/* Bleu nuit — 60% d'opacité sur les surfaces */
|
|
--nav-primary-raw: 26, 34, 56;
|
|
--nav-primary: rgba(26, 34, 56, 0.6);
|
|
--nav-primary-solid: #1a2238;
|
|
|
|
/* Accent safran */
|
|
--nav-accent: #f5b342;
|
|
--nav-accent-soft: rgba(245, 179, 66, 0.85);
|
|
|
|
/* Texte */
|
|
--nav-text: #1a2238;
|
|
--nav-text-muted: rgba(26, 34, 56, 0.55);
|
|
--nav-text-on-primary: #f8f6f1;
|
|
|
|
/* Typographie */
|
|
--nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
|
|
@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(--nav-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ── Dark mode ──────────────────────────────────────────────────────────── */
|
|
.dark {
|
|
--nav-bg: #111520;
|
|
--nav-bg-alt: #1e2538;
|
|
--nav-surface: #1a2238;
|
|
|
|
--nav-primary-raw: 200, 210, 240;
|
|
--nav-primary: rgba(200, 210, 240, 0.15);
|
|
--nav-primary-solid: #c8d2f0;
|
|
|
|
--nav-accent: #f5b342;
|
|
--nav-accent-soft: rgba(245, 179, 66, 0.85);
|
|
|
|
--nav-text: #e8ecf5;
|
|
--nav-text-muted: rgba(200, 210, 240, 0.55);
|
|
--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);
|
|
}
|