@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; }