/* carto-territoire — socle de styles.
   Les couleurs sont des variables : le site hôte les redéfinit, le socle ne
   les impose pas. Les dimensions sont en rem, jamais en px, pour que le zoom
   navigateur à 200 % et 400 % ne casse rien. */

.carto {
  --carto-encre: #1f1d1a;
  --carto-douce: #6b665e;
  --carto-trait: #cfc9bf;
  --carto-fond: #f4f2ee;
  --carto-accent: #b4451f;
  --carto-maille: #bdb6aa;
}

/* Hauteur bornée, jamais 100vh : au zoom à 400 %, il ne resterait rien
   d'autre à l'écran. */
.carto-zone {
  height: clamp(300px, 60vh, 620px);
  background: var(--carto-fond);
  border: 1px solid var(--carto-trait);
  position: relative;
}
.carto-zone:focus-visible {
  outline: 3px solid var(--carto-accent);
  outline-offset: 2px;
}

/* Le fond de carte recule, le contraste est dépensé sur la donnée. */
.carto-maille { stroke: var(--carto-maille); fill: #fbfaf8; fill-opacity: 0;
                stroke-opacity: 1; }
.carto-point {
  stroke: #ffffff;
  fill: var(--carto-accent);
  /* Leaflet pose fill-opacity="0.2" en ATTRIBUT sur chaque tracé : sans cette
     ligne, les points sortent délavés et personne ne comprend pourquoi. */
  fill-opacity: 1;
  stroke-opacity: 1;
  cursor: pointer;
}
.carto-point:focus-visible {
  outline: 3px solid var(--carto-encre);
  outline-offset: 2px;
}
.carto-point.en-avant, .leaflet-interactive.en-avant {
  stroke: var(--carto-encre);
  stroke-width: 3;
}

/* Le voile de la molette coopérative. */
.carto-voile {
  position: absolute; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 29, 26, .55);
  color: #fff; font-size: 1.05rem; text-align: center; padding: 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity .18s;
}
.carto-voile.visible { opacity: 1; }

/* Infobulles : lisibles sur n'importe quel fond, donc opaques et cernées. */
.carto-bulle, .leaflet-tooltip {
  background: #fff; color: var(--carto-encre);
  border: 1px solid var(--carto-trait); border-radius: 0;
  box-shadow: none; font-size: .9rem; padding: .2rem .45rem;
}

/* Cibles tactiles : le plancher réglementaire est 24 px, l'usage demande 44.
   On élargit la zone sensible sans grossir le point. */
@media (pointer: coarse) {
  .carto-point { stroke-width: 14; stroke-opacity: .001; }
}

/* Légende : dans le flux sous la carte par défaut, jamais posée dessus quand
   l'écran est étroit. */
.carto-legende { margin: .6rem 0 0; font-size: .9rem; }
.carto-legende ul { list-style: none; padding: 0; margin: .3rem 0 0;
                    display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.carto-legende li { display: flex; align-items: center; gap: .4rem; }
.carto-pastille { width: 1rem; height: 1rem; border: 1px solid var(--carto-trait);
                  flex: 0 0 auto; }
/* Sans donnée : hors palette, hachuré, jamais confondu avec un zéro. */
.carto-pastille.sans-donnee {
  background: repeating-linear-gradient(45deg, #e8e6e1 0 3px, #fff 3px 6px);
}

.carto-meta { font-size: .85rem; color: var(--carto-douce); margin-top: .6rem; }
.carto-meta dt { font-weight: 600; display: inline; }
.carto-meta dd { display: inline; margin: 0 .8rem 0 .2rem; }

/* Le lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier. */
.carto-evitement {
  position: absolute; left: -9999px;
  background: var(--carto-encre); color: #fff; padding: .5rem .8rem; z-index: 900;
}
.carto-evitement:focus { left: .5rem; top: .5rem; position: absolute; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le tableau équivalent n'est pas un repli : c'est la source de vérité. */
.carto-liste { margin-top: 1rem; }
.carto-liste table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.carto-liste th, .carto-liste td {
  text-align: left; padding: .35rem .5rem;
  border-bottom: 1px solid var(--carto-trait);
}
.carto-liste tr.en-avant { background: var(--carto-fond); }
.carto-liste tr { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .carto-voile { transition: none; }
  .leaflet-pane, .leaflet-marker-icon, .leaflet-tile-container {
    transition: none !important;
  }
}

@media (max-width: 40rem) {
  .carto-zone { height: clamp(260px, 52vh, 420px); }
  .carto-legende ul { flex-direction: column; gap: .25rem; }
}

/* ------------------------------------------------ étiquettes de communes */
/* Sur un fond variable, le halo est le seul moyen fiable de tenir le
   contraste du texte. Pas de fond opaque : il masquerait la donnée. */
/* Sélecteur doublé à dessein : la feuille du site hôte est chargée après
   celle-ci, et une règle `.leaflet-tooltip` de même spécificité y remettrait
   un cadre blanc autour de chaque nom. */
.leaflet-tooltip.carto-etiquette, .carto-etiquette {
  background: none; border: none; box-shadow: none; padding: 0;
  color: var(--carto-encre); font-size: .72rem; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
.leaflet-tooltip.carto-etiquette::before,
.carto-etiquette::before { display: none; }

/* ----------------------------------------------------- fond de routes */
/* Le fond recule : gris sourd, jamais coloré. Le contraste se dépense sur
   la donnée, pas sur les routes. */
.carto-route-a, .carto-route-n, .carto-route-d, .carto-route-x {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* Ardoise bleutée, et non gris chaud : les bordures de communes sont dans un
   gris chaud, et deux gris chauds voisins se confondent — mesuré à 1,05:1 de
   contraste entre les deux, autant dire indiscernables. La teinte fait ici le
   travail que la seule clarté ne peut pas faire, et le rang le plus élevé
   passe 3:1 sur le fond. */
.carto-route-a { stroke: #7c8e9f; }
.carto-route-n { stroke: #8d9dac; }
.carto-route-d { stroke: #a4b1bd; }
.carto-route-x { stroke: #bcc6cf; }

/* Tuiles distantes : désaturées et éclaircies, pour que le fond reste un fond.
   Un fond de carte complet à pleine saturation concurrence la donnée. */
.carto-tuiles { filter: saturate(.55) brightness(1.06); }
@media (prefers-contrast: more) { .carto-tuiles { filter: none; } }

/* L'attribution d'un fond tiers : visible sur la carte, jamais cachée derrière
   un bouton, et affichée seulement quand le fond l'est. */
.carto-attribution {
  position: absolute; right: 0; bottom: 0; z-index: 700; margin: 0;
  background: rgba(255,255,255,.88); color: var(--carto-encre);
  font-size: .72rem; padding: .15rem .4rem;
  border-top: 1px solid var(--carto-trait);
  border-left: 1px solid var(--carto-trait);
}
.carto-attribution a { color: inherit; }

/* --------------------------------------------- symboles de catégorie */
.carto-symbole-hote { background: none; border: none; }
.carto-symbole {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  width: 17px; height: 17px; display: block; line-height: 0;
}
.carto-symbole svg { display: block; overflow: visible; }
.carto-symbole:focus-visible {
  outline: 3px solid var(--carto-encre); outline-offset: 3px; border-radius: 2px;
}
.carto-symbole-hote.en-avant .carto-symbole svg path,
.carto-symbole:hover svg path { stroke: var(--carto-encre); stroke-width: 2.4; }
.carto-symbole-hote.masque { opacity: .14; pointer-events: none; }
/* Cible tactile : 24 px est le plancher réglementaire, 44 l'usage. On
   élargit la zone sensible sans grossir le symbole. */
@media (pointer: coarse) {
  .carto-symbole { padding: 13px; margin: -13px; width: 43px; height: 43px; }
}

/* ------------------------------------------------- panneau de fiche */
/* Un panneau dans le flux, pas une bulle qui suit le curseur : une bulle
   disparaît dès qu'on veut la lire, masque la carte, et n'existe ni au
   doigt ni au clavier. */
.carto-fiche {
  border: 1px solid var(--carto-trait); border-left: 3px solid var(--carto-accent);
  padding: .7rem .9rem; margin: .7rem 0 0; min-height: 5.5rem;
  background: var(--carto-fond);
}
.carto-fiche h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.carto-fiche p { margin: .25rem 0; font-size: .92rem; }
.carto-fiche .carto-fiche-vide { color: var(--carto-douce); font-style: italic; }
.carto-fiche dl { margin: .4rem 0 0; font-size: .88rem; }
.carto-fiche dt { font-weight: 600; display: inline; }
.carto-fiche dd { display: inline; margin: 0 0 0 .25rem; }
.carto-fiche dd::after { content: ""; display: block; }
.carto-fiche .carto-fiche-source { color: var(--carto-douce); font-size: .82rem; }

.carto-pastille-svg { flex: 0 0 auto; line-height: 0; }
.carto-legende-titre { margin: 0 0 .2rem; font-weight: 600; font-size: .9rem; }

/* ------------------------------------------------------------------ l'eau */
/* Un bleu sourd, sous tout le reste : un repère, pas une donnée. En rural on
   se situe à une rivière et à un étang avant de se situer à une limite
   administrative. */
.carto-eau-plan  { fill: #cfdce4; stroke: #b4c7d2; fill-opacity: 1; }
.carto-eau-cours { stroke: #b4c7d2; fill: none; stroke-linecap: round; }

/* ------------------------------------------------------------ toponymes */
.carto-toponyme-hote { background: none; border: none; width: auto !important;
                       height: auto !important; margin: 0 !important; }
.carto-toponyme {
  display: block; white-space: nowrap; transform: translate(-50%, -50%);
  color: var(--carto-encre); pointer-events: none;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}
/* La hiérarchie se lit à la taille et à la graisse, pas seulement au fait
   d'être présent : une ville et un hameau ne se valent pas. */
.carto-toponyme-city    { font-size: .86rem; font-weight: 700; }
.carto-toponyme-town    { font-size: .78rem; font-weight: 700; }
.carto-toponyme-village { font-size: .72rem; font-weight: 600; }
.carto-toponyme-hamlet,
.carto-toponyme-locality,
.carto-toponyme-isolated_dwelling,
.carto-toponyme-farm    { font-size: .66rem; font-weight: 400;
                          color: var(--carto-douce); }