/**
 * RH-17 — carte de localisation OpenStreetMap (remplace l'iframe Google Maps).
 *
 * Sobriete voulue : la carte est un reperage, pas un element de decor. Aucune
 * couleur de charte n'est appliquee aux tuiles a ce stade — les tuiles OSM
 * standard ne sont pas personnalisables. La bascule vers un fournisseur de
 * tuiles stylees ne touchera que `data-tiles` cote JS, pas cette feuille.
 */

/* La hauteur arrive de PHP par la variable `--rh-map-h` (et non par un
   `min-height` en style inline, qui écraserait les media queries ci-dessous). */
.rh-map {
  position: relative;
  width: 100%;
  min-height: var(--rh-map-h, 320px);
  background: #e8e6e1; /* fond neutre pendant le chargement des tuiles */
  overflow: hidden;
}

/* Pleine largeur « full-bleed » : la carte sort de son conteneur parent sans
   qu'on ait a toucher la structure Greenshift (row > row-column > carte).
   100vw + marge negative centree = bord a bord, quelle que soit la colonne. */
.rh-map--full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Le conteneur Leaflet occupe toute la boite. */
.rh-map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Teinte de la carte.

   Les tuiles OSM standard sont des images : on ne peut pas redefinir la couleur
   des routes ou masquer des etiquettes (ca demanderait un fournisseur de tuiles
   vectorielles). En revanche un filtre CSS suffit pour une teinte d'ensemble —
   niveaux de gris, desaturation, virage colore — **sans compte ni cle API**.

   Le filtre ne s'applique qu'au calque des tuiles : le marqueur, les controles
   de zoom et l'attribution gardent leurs couleurs et restent lisibles.
   --------------------------------------------------------------------------- */
.rh-map .leaflet-tile-pane {
  filter: var(--rh-map-filter, none);
}

/* « charte » — LE preset du projet : rampe a 4 couleurs.
   Le filtre SVG (injecte par PHP) ramene les tuiles a leur luminance puis
   remappe les tons : traits marques -> rouge #F54E16, tons moyens -> saumon
   #FF9EA2, tons clairs -> gris clair, fonds -> blanc. Les deux neutres sont ce
   qui empeche la carte de virer entierement au rouge : ils occupent les grandes
   surfaces, le rouge et le saumon restent des accents.
   Un `sepia()` ou un `hue-rotate()` ne sait pas viser une couleur precise ;
   une matrice SVG, oui.

   Le `contrast()` en amont reste necessaire : les tuiles OSM sont
   majoritairement claires, donc sans etalement de la luminance tout se tasse
   dans le haut de la plage. Dose plus bas qu'en mono (1.25 au lieu de 1.45) :
   avec du gris et du blanc, il n'y a plus besoin de forcer autant. */
.rh-map[data-tint='charte'] .leaflet-tile-pane {
  filter: contrast(1.25) brightness(0.97) url(#rh-map-duotone);
}

/* Variante sans neutres : rouge + saumon + blanc rose, franchement plus
   affirmee. C'etait le premier essai — conserve au cas ou. */
.rh-map[data-tint='charte-mono'] .leaflet-tile-pane {
  filter: contrast(1.45) brightness(0.88) url(#rh-map-duotone-mono);
}

/* Marqueur aux couleurs de la charte : l'icone bleue par defaut de Leaflet
   jure avec le saumon/rouge. On utilise un pin SVG qui herite sa couleur du
   theme (`--theme-palette-color-1` = rouge #F54E16), donc il suivra la charte
   si elle evolue. */
.rh-map__marker {
  color: var(--theme-palette-color-1, #f54e16);
  line-height: 0;
}

.rh-map__marker svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgba(1, 20, 18, 0.35));
}

/* Presets neutres, conserves : utiles si la carte doit s'effacer. */
.rh-map[data-tint='grayscale'] {
  --rh-map-filter: grayscale(1) contrast(0.95);
}

/* « soft » : desature et legerement eclairci — la carte passe au second plan. */
.rh-map[data-tint='soft'] {
  --rh-map-filter: saturate(0.3) brightness(1.06) contrast(0.9);
}

/* Repli sans JavaScript : un lien utilisable plutot qu'un bloc vide. */
.rh-map__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: inherit;
  padding: 24px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}

/* Invite de zoom. Le zoom molette est desactive au chargement pour ne pas
   capturer le scroll de la page (une carte qui avale le scroll casse la
   navigation) — mais l'invite ne doit PAS polluer la carte en permanence :
   elle n'apparait qu'au moment ou l'utilisateur tente reellement de zoomer,
   puis s'effondre. Au repos, la carte est nue. */
.rh-map__hint {
  position: absolute;
  z-index: 500;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(31, 31, 30, 0.82);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Affichee uniquement pendant une tentative de zoom molette. */
.rh-map.is-hinting .rh-map__hint {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .rh-map__hint {
    white-space: normal;
    max-width: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rh-map__hint {
    transition: none;
  }
}

/* Attribution OpenStreetMap : obligatoire (licence ODbL), donc lisible —
   on ajuste seulement la taille, on ne la masque jamais. */
.rh-map .leaflet-control-attribution {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.85);
}

.rh-map .leaflet-control-attribution a {
  text-decoration: underline;
}

/* Le focus clavier doit rester visible sur les controles de zoom. */
.rh-map .leaflet-control-zoom a:focus-visible {
  outline: 2px solid #1f1f1e;
  outline-offset: 2px;
}

/* Sur petit écran, une carte haute mange tout l'écran et coupe la lecture :
   on la borne à 55% de la hauteur de fenêtre sans jamais dépasser la hauteur
   demandée. */
@media (max-width: 767px) {
  .rh-map {
    min-height: min(var(--rh-map-h, 320px), 55vh);
  }
}

/* Mouvement reduit : on neutralise les transitions de Leaflet (zoom, panoramique).
   La carte reste pleinement utilisable, elle ne s'anime plus. */
@media (prefers-reduced-motion: reduce) {
  .rh-map .leaflet-fade-anim .leaflet-tile,
  .rh-map .leaflet-zoom-anim .leaflet-zoom-animated {
    transition: none !important;
  }
}