/**
 * Contrôles de la carte des fiches établissement (section "Situation").
 *
 * Les boutons de zoom sont fournis par l'API ; ceux de déplacement sont ajoutés
 * par single-map.js, l'API n'en proposant plus depuis la v3.22. Mêmes classes
 * et même présentation que sur la carte de la page Contact.
 *
 * Chargée après styles.min.css : la spécificité et l'ordre de cascade suffisent.
 */

/**
 * Le conteneur porte l'attribut hidden, qui le masque quand les feuilles de
 * styles sont désactivées : la carte, remplie d'éléments en position absolue par
 * l'API, recouvrirait sinon le texte de la fiche. Cette règle le réaffiche dès
 * que les styles sont actifs — toute règle d'auteur l'emporte sur le
 * [hidden] { display: none } de la feuille du navigateur.
 */
.single .situation .gmap[hidden] {
    display: block;
}

/**
 * Sans JavaScript, l'API Maps ne construit rien : le conteneur reste vide mais
 * conserve son aspect-ratio et son ombre portée, soit un grand rectangle vide.
 * Le repli textuel du <noscript> prend alors seul le relais.
 */
.no-js #gmap {
    display: none;
}

.single .situation .gmap .map-pan-control {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    grid-template-rows: repeat(3, 32px);
    gap: 2px;
    margin: 10px;
}

.single .situation .gmap .map-pan-button {
    background-color: #fff;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    /* single.scss impose 10px aux textes de la carte : les flèches seraient
       illisibles et la cible trop petite. */
    color: #3c4043;
    padding: 0;
}

.single .situation .gmap .map-pan-up    { grid-column: 2; grid-row: 1; }
.single .situation .gmap .map-pan-left  { grid-column: 1; grid-row: 2; }
.single .situation .gmap .map-pan-right { grid-column: 3; grid-row: 2; }
.single .situation .gmap .map-pan-down  { grid-column: 2; grid-row: 3; }

/* L'indicateur de focus du thème est supprimé sur les éléments de la carte. */
.single .situation .gmap .map-pan-button:focus-visible,
.single .situation .gmap button:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}