/* ==================================================================
   CARTE DES MASSIFS FORESTIERS — classe `vatel-carte`
   Chargée uniquement sur les pages portant le shortcode.
   ------------------------------------------------------------------
   Reprend les jetons --vc-* déclarés sur `body` dans style.css, avec
   repli littéral pour rester correct si la feuille du thème change.
   ================================================================== */

.vatel-carte {
    margin-block: 0 1.5rem;
}

/* --- Chiffres clés ---------------------------------------------- */
.vatel-carte__chiffres {
    margin-block: 0 .8rem;
    font-size: 1.05em;
}

.vatel-carte__date {
    color: var(--vc-muted, #5f6875);
    font-size: .85em;
    white-space: nowrap;
}

/* --- Zone de carte ---------------------------------------------
   Avant activation : le visuel d'attente et le bouton. Après : la
   carte Leaflet occupe toute la zone.
   -------------------------------------------------------------- */
.vatel-carte__zone {
    position: relative;
    height: var(--vatel-carte-hauteur, 560px);
    background: var(--vc-wash, #f5f6f8);
    border: 1px solid var(--vc-rule, #e2e5ea);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.vatel-carte__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .35;
}

.vatel-carte__activer {
    position: relative;
    z-index: 1;
    padding: .8em 1.4em;
    border: 1px solid var(--vc-gold, var(--wp--preset--color--accent, #a88654));
    background: var(--vc-base, #fff);
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}

.vatel-carte__activer:hover,
.vatel-carte__activer:focus-visible {
    background: var(--vc-wash, #f5f6f8);
}

.vatel-carte__rgpd {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    margin: .8rem 1rem 0;
    text-align: center;
    font-size: .8em;
    line-height: 1.5;
    color: var(--vc-muted, #5f6875);
}

.vatel-carte__leaflet {
    position: absolute;
    inset: 0;
}

/* --- Marqueurs -------------------------------------------------
   `fill` et `stroke` plutôt que `background` : ce sont des cercles
   SVG dessinés par Leaflet, pas des éléments HTML.
   -------------------------------------------------------------- */
.vatel-carte__pt {
    fill: #2f6b3a;              /* vert forêt, cohérent avec la carte d'origine */
    fill-opacity: .65;
    stroke: #1e4526;
    stroke-width: 1.5;
}

.vatel-carte__pt--neuf {
    fill: var(--vc-gold, var(--wp--preset--color--accent, #a88654));
    fill-opacity: .8;
    stroke: #6f5426;
}

/* Cercle cliquable : curseur main. Les cercles sans fiche gardent le
   curseur par défaut, ce qui signale d'emblée qu'il n'y a rien à ouvrir. */
.vatel-carte__pt--lien {
    cursor: pointer;
}

/* Focus clavier : les cercles sont focalisables, l'anneau doit être visible
   par-dessus les tuiles. */
.vatel-carte__pt:focus-visible {
    outline: 2px solid var(--vc-ink, #1a2332);
    outline-offset: 2px;
}

/* Infobulle au survol. Fond opaque : elle se superpose aux tuiles.
   ------------------------------------------------------------------
   `width: max-content` n'est pas décoratif, il est indispensable.
   Leaflet compte sur `white-space: nowrap` pour que l'infobulle prenne
   la largeur naturelle de son contenu. En passant à `white-space: normal`
   pour autoriser le retour à la ligne, on retire cet appui : le
   conteneur d'infobulles (.leaflet-tooltip-pane) étant en position
   absolue sans largeur définie, la boîte se réduit alors à la largeur du
   mot le plus long — « Bourgogne- » coupé sur trois lignes.
   `max-content` rétablit la largeur naturelle, `max-width` la plafonne
   pour les longs libellés, et `min-width` évite les boîtes rachitiques
   sur un massif au nom court. */
.vatel-carte__tooltip {
    width: max-content;
    min-width: 11rem;
    max-width: 22rem;
    white-space: normal;
    background: var(--vc-base, #fff);
    border: 1px solid var(--vc-rule, #e2e5ea);
    border-left: 3px solid var(--vc-gold, var(--wp--preset--color--accent, #a88654));
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    color: inherit;
    font-size: .9em;
    line-height: 1.45;
    padding: .6em .8em;
}

/* Mise en forme du contenu : le nom en exergue, puis une ligne de
   caractéristiques, puis les essences. Trois lignes au lieu de cinq. */
.vatel-carte__tooltip .vatel-carte__nom,
.vatel-carte__popup .vatel-carte__nom {
    display: block;
    font-weight: 700;
    font-size: 1.05em;
    margin-bottom: .15em;
}

.vatel-carte__tooltip .vatel-carte__carac,
.vatel-carte__popup .vatel-carte__carac {
    display: block;
    color: var(--vc-muted, #5f6875);
}

.vatel-carte__tooltip .vatel-carte__essences,
.vatel-carte__popup .vatel-carte__essences {
    display: block;
    font-style: italic;
    margin-top: .15em;
}

/* Leaflet dessine la flèche de l'infobulle avec une bordure : on l'aligne
   sur la nôtre, dans les deux orientations puisque l'infobulle se retourne
   vers le bas quand elle manquerait de place en haut. */
.vatel-carte__tooltip.leaflet-tooltip-top::before {
    border-top-color: var(--vc-rule, #e2e5ea);
}

.vatel-carte__tooltip.leaflet-tooltip-bottom::before {
    border-bottom-color: var(--vc-rule, #e2e5ea);
}

/* Lien « Voir la fiche », présent dans la bulle sur écran tactile. */
.vatel-carte__lien {
    display: inline-block;
    margin-top: .4em;
    font-weight: 600;
}

.vatel-carte__popup .leaflet-popup-content {
    font-size: .9em;
    line-height: 1.5;
}

.vatel-carte__badge {
    display: inline-block;
    margin-top: .3em;
    padding: .1em .5em;
    background: var(--vc-gold, var(--wp--preset--color--accent, #a88654));
    color: #fff;
    font-size: .75em;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.vatel-carte__approx {
    color: var(--vc-muted, #5f6875);
    font-size: .85em;
}

/* --- Filtres ---------------------------------------------------- */
.vatel-carte__filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.5rem;
    margin-block: .8rem 0;
    padding: .8rem 1rem;
    background: var(--vc-wash, #f5f6f8);
    border-left: 3px solid var(--vc-gold, var(--wp--preset--color--accent, #a88654));
    font-size: .9em;
}

.vatel-carte__filtres label {
    display: flex;
    align-items: center;
    gap: .5em;
}

.vatel-carte__filtres select {
    font: inherit;
    padding: .3em .5em;
}

.vatel-carte__compteur {
    margin-left: auto;
    font-weight: 600;
}

/* --- Liste de repli --------------------------------------------- */
.vatel-carte__liste {
    margin-block: 1rem 0;
}

.vatel-carte__liste summary {
    cursor: pointer;
    font-weight: 600;
}

.vatel-carte__table {
    width: 100%;
    border-collapse: collapse;
    margin-block: .8rem 0;
    font-size: .9em;
}

.vatel-carte__table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 0 0 .5em;
    color: var(--vc-muted, #5f6875);
}

.vatel-carte__table th,
.vatel-carte__table td {
    padding: .45em .6em;
    border-bottom: 1px solid var(--vc-rule, #e2e5ea);
    text-align: left;
    vertical-align: top;
}

.vatel-carte__table thead th {
    border-bottom: 2px solid var(--vc-gold, var(--wp--preset--color--accent, #a88654));
}

.vatel-carte__mention {
    margin-block: .8rem 0;
    font-size: .8em;
    color: var(--vc-muted, #5f6875);
}

.vatel-carte__erreur {
    padding: .8em 1em;
    border-left: 3px solid #c62828;
    background: #ffebee;
    font-size: .9em;
}

/* --- Mobile ----------------------------------------------------- */
@media (max-width: 600px) {
    .vatel-carte__zone {
        height: min(var(--vatel-carte-hauteur, 560px), 70vh);
    }
    .vatel-carte__compteur {
        margin-left: 0;
    }
}

/* --- Impression ------------------------------------------------
   La carte n'a aucun sens sur papier : on imprime le tableau, qu'on
   déplie d'office.
   -------------------------------------------------------------- */
@media print {
    .vatel-carte__zone,
    .vatel-carte__filtres {
        display: none;
    }
    .vatel-carte__liste[open] summary,
    .vatel-carte__liste summary {
        list-style: none;
    }
    .vatel-carte__liste > *:not(summary) {
        display: revert;
    }
    .vatel-carte__table {
        break-inside: avoid;
    }
}