/**
 * Cartes at_map (front). Repris du bloc Carte du builder (atb-map.css), sous des classes atgf- : get-field rend la
 * carte sans le builder (règle « get-field indépendant »).
 *
 * Les marqueurs sont des `L.divIcon` : du HTML, stylable ici. Chacun reçoit `--atgf-marker-size` et
 * `--atgf-marker-color` en style inline.
 *
 * Écrit à plat, sans `color-mix()` ni imbrication `& {}` : cette feuille part sur le front, où d'anciens Safari nous
 * ont déjà coûté une barre de header.
 *
 * Variables publiques : --atgf-map-height (420px), --atgf-map-min-height (240px), --atgf-map-marker-color,
 * --atgf-map-radius, --atgf-map-hint-bg.
 */

/* Socle en spécificité nulle (aussi imprimé avec la 1re carte, #atgf-map-base, cette feuille partant en pied de
   page) : Dimensions, utilitaires et CSS perso gagnent. */
:where(.atgf-map) {
    display: flex;
    flex-direction: column;
    position: relative;
    height: var(--atgf-map-height, 420px);
    min-height: var(--atgf-map-min-height, 240px);
    border-radius: var(--atgf-map-radius, 0);
}

.atgf-map__canvas {
    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;
}

/* Leaflet pose z-index 400+ sur ses panes : sans ce contexte, une carte passe au-dessus d'un header collant ou d'une
   modale. */
.atgf-map__canvas.leaflet-container {
    z-index: 0;
    font: inherit;
}

.atgf-map__canvas .leaflet-pane,
.atgf-map__canvas .leaflet-top,
.atgf-map__canvas .leaflet-bottom {
    z-index: 1;
}

.atgf-map__canvas .leaflet-popup-pane {
    z-index: 2;
}

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

/* ── Teinte du fond (filtre sur les tuiles, jamais sur les marqueurs ni les bulles) ─────────────────── */

.atgf-map--tint-gray .leaflet-tile-pane {
    filter: grayscale(1) contrast(.95);
}

.atgf-map--tint-sepia .leaflet-tile-pane {
    filter: sepia(.55) saturate(.85) contrast(.95);
}

.atgf-map--tint-dark .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7);
}

.atgf-map--tint-dark .atgf-map__canvas {
    background: #1d2125;
}

@media (prefers-color-scheme: dark) {
    .atgf-map--tint-auto .leaflet-tile-pane {
        filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7);
    }

    .atgf-map--tint-auto .atgf-map__canvas {
        background: #1d2125;
    }
}

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

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

.atgf-map-marker:focus-visible {
    outline: none;
}

.atgf-map-marker:focus-visible .atgf-map-marker__shape {
    outline: 3px solid #fff;
    box-shadow: 0 0 0 5px #1d2327;
}

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

.atgf-map-marker--dot .atgf-map-marker__shape {
    border-radius: 50%;
    border: 2px solid #fff;
    box-sizing: border-box;
}

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

/* La goutte : un disque plus une pointe en triangle CSS, dont la hauteur est calculable — le JS pose `iconAnchor`
   exactement sur la pointe. Hauteur totale = taille × 1.4. Le point blanc rappelle le repère attendu. */
.atgf-map-marker--pin .atgf-map-marker__shape {
    border-radius: 50%;
}

.atgf-map-marker--pin .atgf-map-marker__shape::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36%;
    height: 36%;
    margin: -18% 0 0 -18%;
    border-radius: 50%;
    background: #fff;
}

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

/* Icône ou image : elles SONT le marqueur, sans pastille ; l'ombre épouse le tracé (drop-shadow). */
.atgf-map-marker--icon .atgf-map-marker__shape,
.atgf-map-marker--image .atgf-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 va à l'ICÔNE par `color`, jamais par un `fill` global (Icon_Options::colorize a déjà mis les vrais
   remplissages en currentColor en gardant fill="none" et les traits). Taille par font-size : un svg height="1em" et
   un <i> Font Awesome s'y règlent tous deux. */
.atgf-map-marker--icon .atgf-map-marker__shape {
    color: var(--atgf-marker-color);
    font-size: var(--atgf-marker-size, 32px);
    line-height: 1;
}

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

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

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

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

.atgf-map__canvas .leaflet-popup-content-wrapper {
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
}

.atgf-map__canvas .leaflet-popup-content {
    margin: 0;
    font: inherit;
    line-height: 1.45;
    min-width: 180px;
}

.atgf-map-popup {
    padding: .75rem 1rem;
}

.atgf-map-popup > :first-child {
    margin-top: 0;
}

.atgf-map-popup > :last-child {
    margin-bottom: 0;
}

.atgf-map-popup p {
    margin: 0 0 .4rem;
}

.atgf-map-popup__img {
    display: block;
    width: calc(100% + 2rem);
    max-width: none;
    height: auto;
    max-height: 140px;
    object-fit: cover;
    margin: -.75rem -1rem .6rem;
}

.atgf-map-popup__text {
    margin-bottom: .4rem;
}

.atgf-map-popup__links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
}

.atgf-map-popup__links a {
    font-weight: 600;
}

/* ── Contrôles (plein écran, me localiser) ─────────────────────────────── */

.atgf-map__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: #fff;
    color: #1d2327;
    cursor: pointer;
}

.atgf-map__btn:hover,
.atgf-map__btn:focus-visible {
    background: #f4f4f4;
}

.atgf-map__btn svg {
    width: 16px;
    height: 16px;
}

.atgf-map__btn + .atgf-map__btn {
    border-top: 1px solid #ccc;
}

.atgf-map__btn:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.atgf-map__btn:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.atgf-map__btn.is-busy svg {
    animation: atgf-map-spin 1s linear infinite;
}

@keyframes atgf-map-spin {
    to { transform: rotate(360deg); }
}

.atgf-map__me {
    fill: #2271b1;
    fill-opacity: 1;
    stroke: #fff;
    stroke-width: 3;
}

.atgf-map__acc {
    fill: #2271b1;
    fill-opacity: .12;
    stroke: #2271b1;
    stroke-opacity: .4;
    stroke-width: 1;
}

/* Plein écran : API native (:fullscreen) ou boîte fixée (iPhone). */
.atgf-map:fullscreen,
.atgf-map.is-fullscreen {
    height: 100%;
    width: 100%;
    max-height: none;
    border-radius: 0;
    background: #e9eaec;
}

.atgf-map.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    height: 100vh;
    height: 100dvh;
}

.atgf-map-lock,
.atgf-map-lock body {
    overflow: hidden;
}

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

.atgf-map__hint {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    color: #fff;
    background: var(--atgf-map-hint-bg, rgba(25, 39, 67, .6));
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
}

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

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

    .atgf-map__btn.is-busy svg {
        animation: none;
    }
}

/* ── Accessibilité : lien « Passer la carte », liste des lieux ─────────── */

.atgf-map__sr,
.atgf-map__skip:not(:focus) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.atgf-map__skip:focus {
    position: absolute;
    z-index: 4;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #fff;
    color: #1d2327;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.atgf-map__end {
    position: absolute;
    bottom: 0;
}

.atgf-map__places:not(.atgf-map__sr) {
    margin: .75rem 0 0;
    padding-left: 1.2rem;
}

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

.atgf-map__fallback {
    padding: 1rem;
}

/* Regroupement des lieux proches (Leaflet.markercluster, pastilles maison) : la couleur des marqueurs, un halo. */
.atgf-map-cluster {
    background: none;
    border: 0;
}

.atgf-map-cluster span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--atgf-map-marker-color, var(--atgf-primary, #0099dd)) 88%, black);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--atgf-map-marker-color, var(--atgf-primary, #0099dd)) 30%, transparent);
    color: #fff;
    font: 700 14px/1 system-ui, sans-serif;
    transition: transform .15s;
}

.atgf-map-cluster.is-m span { transform: scale(1.12); }
.atgf-map-cluster.is-l span { transform: scale(1.25); }
.atgf-map-cluster:hover span { transform: scale(1.3); }

/* Lieu mis en avant (liste de contenus liée) */
.leaflet-marker-icon.is-atgf-hl {
    z-index: 10000 !important;
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--atgf-map-marker-color, var(--atgf-primary, #0099dd)) 70%, transparent));
    transform-origin: 50% 100%;
}

.leaflet-marker-icon.is-atgf-off {
    display: none;
}

/* Élément d'une liste liée signalé par son lieu (clic sur la carte) */
[data-atgf-obj].is-atgf-hl {
    outline: 2px solid var(--atgf-primary, #0099dd);
    outline-offset: 3px;
}