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