ec9178be08
- composables/useMarkdown.ts : renderer MD léger (bold/italic/listes/titres) - ChatbotSheet.vue + trouver-du-taf.vue : v-html renderMd() sur messages bot - assets/css/main.css : styles .md-content globaux pour tous les chatbots - taff-header centré + phrase cible 'architectes indépendants, 70% de la profession' Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
124 lines
3.5 KiB
CSS
124 lines
3.5 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);
|
|
}
|
|
|
|
/* ── 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; }
|