/* desert-medical : jetons de couleur (clair / sombre) et composants. */
:root {
  --fond: 250 247 242;        /* sable très clair */
  --surface: 255 255 255;
  --encre: 23 32 42;
  --encre-doux: 82 92 104;
  --ligne: 228 222 212;
  --marque: 15 118 110;       /* vert soin */
  --marque-fonce: 17 94 89;
  --sable: 243 233 216;
  --terre: 185 28 28;         /* rouge désert */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: 17 22 28;
    --surface: 26 33 41;
    --encre: 236 240 243;
    --encre-doux: 160 172 184;
    --ligne: 48 58 70;
    --marque: 45 212 191;
    --marque-fonce: 20 184 166;
    --sable: 40 36 30;
    --terre: 248 113 113;
    color-scheme: dark;
  }
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

:focus-visible { outline: 3px solid rgb(var(--marque)); outline-offset: 2px; border-radius: 6px; }

.btn-primaire {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: 0 1.25rem; border-radius: 999px;
  background: rgb(var(--marque)); color: #fff; font-weight: 600;
  transition: background-color .2s ease, transform .15s ease;
}
@media (prefers-color-scheme: dark) { .btn-primaire { color: rgb(var(--fond)); } }
.btn-primaire:hover { background: rgb(var(--marque-fonce)); }
.btn-primaire:active { transform: scale(.97); }

.lien-nav { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; border-radius: 999px; transition: background-color .2s; }
.lien-nav:hover { background: rgb(var(--sable)); }

.puce {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid rgb(var(--ligne)); background: rgb(var(--surface)); font-size: .875rem; font-weight: 500;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; touch-action: manipulation;
}
.puce:hover { border-color: rgb(var(--marque)); }
.puce[aria-pressed="true"] { background: rgb(var(--encre)); border-color: rgb(var(--encre)); color: rgb(var(--fond)); }

.carte-bloc { background: rgb(var(--surface)); border: 1px solid rgb(var(--ligne)); border-radius: 1.25rem; }

.pastille { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
.pastille::before { content: ""; width: .55rem; height: .55rem; border-radius: 999px; background: currentColor; }
.niv-0 { color: #0f766e; background: #ccfbf1; }
.niv-1 { color: #854d0e; background: #fef9c3; }
.niv-2 { color: #9a3412; background: #ffedd5; }
.niv-3 { color: #991b1b; background: #fee2e2; }
@media (prefers-color-scheme: dark) {
  .niv-0 { color: #5eead4; background: rgba(20,184,166,.15); }
  .niv-1 { color: #fde047; background: rgba(234,179,8,.15); }
  .niv-2 { color: #fdba74; background: rgba(249,115,22,.15); }
  .niv-3 { color: #fca5a5; background: rgba(239,68,68,.18); }
}

.chiffre { font-variant-numeric: tabular-nums; }

/* Fond « dunes » discret du bandeau d'accueil */
.dunes { background:
  radial-gradient(120% 60% at 10% 110%, rgb(var(--sable)) 0 55%, transparent 56%),
  radial-gradient(90% 50% at 85% 115%, rgb(var(--sable) / .7) 0 55%, transparent 56%); }

/* Carte */
#carte-france { height: min(72dvh, 680px); border-radius: 1.25rem; z-index: 0; background: #d9d9d9; }
@media (prefers-color-scheme: dark) { #carte-france { background: #2b2b2b; } }
.leaflet-container { font-family: Inter, system-ui, sans-serif; }
.infobulle-dm { background: rgb(var(--surface)); color: rgb(var(--encre)); border: 1px solid rgb(var(--ligne));
  border-radius: .75rem; padding: .5rem .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); font-size: .875rem; pointer-events: none;
  position: absolute; z-index: 500; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.leaflet-tile-pane { filter: grayscale(1) contrast(.85) brightness(1.08); }
@media (prefers-color-scheme: dark) { .leaflet-tile-pane { filter: grayscale(1) invert(1) contrast(.8) brightness(.85); } }

[x-cloak] { display: none !important; }

/* Repères numérotés de la recherche */
.pin-dm { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: rgb(var(--encre)); color: rgb(var(--fond));
  font: 600 12px/1 Inter, system-ui, sans-serif; border: 2px solid rgb(var(--surface)); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .15s, background-color .15s; }
.pin-dm.actif { background: rgb(var(--marque)); transform: scale(1.25); }