/**
 * Bloc Carte.
 *
 * Les marqueurs sont des `L.divIcon` : du HTML, donc stylable ici — c'est tout
 * l'intérêt de dessiner la carte nous-mêmes plutôt que de laisser le plugin OSM
 * la rendre. Chaque marqueur reçoit `--atb-marker-size` et `--atb-marker-color`
 * en style inline ; ce fichier ne fait que les mettre en forme.
 *
 * Les valeurs sont écrites à plat, sans `color-mix()` ni imbrication `& {}` :
 * ce CSS part sur le front, où d'anciens Safari nous ont déjà coûté une barre
 * de header (cf. docs). Rien ici n'a besoin de syntaxe récente.
 */

/* Le bloc est un conteneur flex vertical et la carte, l'élément qui grandit.
   C'est ce qui rend les deux voies possibles :
     · hauteur « 100 % » dans le champ → `.atb-map--stretch` ci-dessous ;
     · une classe utilitaire (`atb-min-h-full`, `atb-h-screen`, `atb-grow`…)
       posée sur le bloc → la carte suit toute seule.
   Sans l'un ni l'autre, le bloc reste dimensionné par son contenu et la carte
   vaut exactement `--atb-map-height` : le comportement par défaut ne change
   pas. */
.atb-map {
    display: flex;
    flex-direction: column;
}

.atb-map__canvas {
    /* `min-height` et non `height` : c'est un plancher, pas un plafond — sans
       quoi la carte ne pourrait jamais s'étirer. */
    min-height: var(--atb-map-height, 420px);
    flex: 1 1 auto;
    width: 100%;
    position: relative;
    background: #e9eaec; /* le gris de Leaflet, le temps que les tuiles arrivent */
    border-radius: inherit;
    overflow: hidden;
}

/* Hauteur « 100 % » : le bloc devient l'élément élastique de sa colonne et
   remplit ce que les autres blocs laissent. Les colonnes d'une même ligne étant
   déjà étirées à la plus haute (`align-items: stretch` par défaut sur
   `.atb-row`), la carte s'aligne sur la colonne voisine.

   Le plancher `--atb-map-min-height` n'est pas décoratif : dès que les colonnes
   se replient l'une sous l'autre — sur mobile, ou quand `min_width` déclenche le
   retour à la ligne —, il n'y a plus de voisine à égaler et la carte
   s'effondrerait à zéro. */
.atb-map--stretch {
    flex: 1 1 auto;
}

/* Leaflet pose z-index 400+ sur ses panes : sans ce contexte d'empilement, une
   carte passe au-dessus d'un header collant ou d'une modale. */
.atb-map__canvas .leaflet-pane,
.atb-map__canvas .leaflet-top,
.atb-map__canvas .leaflet-bottom {
    z-index: 1;
}

.atb-map__canvas .leaflet-container {
    height: 100%;
    width: 100%;
    font: inherit;
    background: transparent;
}

.atb-map--static .atb-map__canvas .leaflet-container {
    cursor: default;
}

/* ── Marqueurs ─────────────────────────────────────────────────────────── */

.atb-map-marker {
    --atb-marker-color: var(--atb-primary, #0099dd);
    display: block;
    position: relative;
    background: none;
    border: 0;
}

.atb-map-marker__shape {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--atb-marker-size, 32px);
    height: var(--atb-marker-size, 32px);
    background: var(--atb-marker-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.atb-map-marker--dot .atb-map-marker__shape {
    border-radius: 50%;
}

.atb-map-marker--square .atb-map-marker__shape {
    border-radius: 2px;
}

/* La goutte : un disque plus une pointe en triangle CSS. Le triangle plutôt
   qu'un carré pivoté parce que sa hauteur est calculable — le JS doit poser
   `iconAnchor` exactement sur la pointe, sinon le marqueur ne désigne pas le
   point qu'il prétend désigner. Hauteur totale = taille × 1.4. */
.atb-map-marker--pin .atb-map-marker__shape {
    border-radius: 50%;
}

.atb-map-marker--pin .atb-map-marker__shape::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: calc(var(--atb-marker-size, 32px) * -0.22);
    margin-top: calc(var(--atb-marker-size, 32px) * -0.14);
    border-left: calc(var(--atb-marker-size, 32px) * 0.22) solid transparent;
    border-right: calc(var(--atb-marker-size, 32px) * 0.22) solid transparent;
    border-top: calc(var(--atb-marker-size, 32px) * 0.54) solid var(--atb-marker-color);
}

/* Ni pastille colorée ni ombre rectangulaire : dans ces deux modes, l'icône ou
   l'image EST le marqueur. L'ombre passe par `drop-shadow`, qui épouse le tracé
   au lieu d'ombrer une boîte. */
.atb-map-marker--icon .atb-map-marker__shape,
.atb-map-marker--image .atb-map-marker__shape {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}

/* La couleur se donne à l'ICÔNE, par `color` — jamais par un `fill` en CSS.
   `Icon_Options::colorize()` a déjà transformé les vrais `fill` en
   `currentColor` tout en préservant `fill="none"` et les `stroke`, qui sont des
   intentions de tracé. Un `fill: currentColor` global écraserait ce travail et
   remplirait les icônes au trait. Conséquence voulue : une icône dessinée en
   traits colorés garde ses traits, la couleur choisie ne la déforme pas. */
.atb-map-marker--icon .atb-map-marker__shape {
    color: var(--atb-marker-color);
    /* `Icon_Options` rend un `<svg height="1em">` et Font Awesome un `<i>` :
       les deux se dimensionnent par `font-size`. Un pourcentage se résoudrait
       contre l'enveloppe `.atgf-icon`, qui s'ajuste elle-même à son contenu —
       l'icône restait minuscule (12 px mesurés pour 44 demandés). */
    font-size: var(--atb-marker-size, 32px);
    line-height: 1;
}

.atb-map-marker--icon .atgf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.atb-map-marker--icon svg,
.atb-map-marker--icon img {
    height: 1em;
    width: auto;
    display: block;
}

.atb-map-marker--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Bulle ─────────────────────────────────────────────────────────────── */

.atb-map__canvas .leaflet-popup-content {
    margin: .75rem 1rem;
    font: inherit;
    line-height: 1.45;
}

.atb-map__canvas .leaflet-popup-content p:last-child {
    margin-bottom: 0;
}

/* ── Garde-molette ─────────────────────────────────────────────────────── */

/* Le message qui apparaît quand on fait défiler la page au-dessus de la carte :
   sans lui, l'utilisateur ne peut pas deviner qu'il faut tenir Ctrl. */
.atb-map__hint {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background: rgba(25, 39, 67, .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
}

.atb-map__canvas.is-hinting .atb-map__hint {
    opacity: 1;
    visibility: visible;
}

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

/* ── Repli sans JavaScript ─────────────────────────────────────────────── */

.atb-map__fallback {
    padding: 1rem;
}

.atb-map__list {
    margin: 0 0 .75rem;
    padding-left: 1.2rem;
}