/*
 * Agrandissement des cartes OSM de la galerie.
 *
 * Deux mecaniques, choisies par le modificateur pose sur le conteneur :
 *   .osm-resizable--flow    page album : la carte grandit dans le flux et
 *                           repousse les vignettes vers le bas ;
 *   .osm-resizable--overlay page photo : le panneau droit est trop etroit pour
 *                           gagner en largeur, la carte sort donc du flux et
 *                           deborde vers la gauche par-dessus la photo. Le
 *                           conteneur garde sa hauteur d'origine et sert de
 *                           cale, pour que le reste du panneau ne bouge pas.
 *
 * La taille de base est celle reglee dans l'administration du plugin : elle est
 * transmise en propriete personnalisee `--osm-h` par l'attribut `style` du
 * conteneur, seul point ou une valeur dynamique entre dans la feuille.
 */

.osm-resizable {
    position: relative;
}

.osm-resizable > #map {
    transition: width .3s ease, height .3s ease;
}

/* --- Bouton de bascule ---------------------------------------------------- */

/*
 * Le bouton est un frere du div de carte, jamais un enfant : place a
 * l'interieur, Leaflet capterait ses clics et ses glissers comme des
 * interactions de carte.
 */
.osm-resize-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    /* Au-dessus des panes Leaflet (400-700) et de ses controles (800-1000). */
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: #333;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease, background-color .18s ease;
}

.osm-resizable:hover .osm-resize-toggle,
.osm-resize-toggle:focus {
    opacity: 1;
}

.osm-resize-toggle:hover {
    background: #fff;
}

/*
 * Sans survol (tactile), le bouton resterait inatteignable : on le montre en
 * permanence, un peu attenue pour rester discret.
 */
@media (hover: none) {
    .osm-resize-toggle {
        opacity: .75;
    }
}

/*
 * La ou le survol pilote l'agrandissement, le bouton n'a plus de role : un clic
 * n'aurait aucun effet durable, puisque eloigner la souris refermerait aussitot
 * la carte. Il reste en place sur pointeur sans survol (tactile), ou il est le
 * seul moyen d'agir.
 */
@media (hover: hover) {
    .osm-resizable--hover .osm-resize-toggle {
        display: none;
    }
}

.osm-resize-toggle svg {
    display: block;
    width: 16px;
    height: 16px;
}

.osm-resize-toggle .osm-icon-collapse,
.osm-resizable.is-expanded .osm-resize-toggle .osm-icon-expand {
    display: none;
}

.osm-resizable.is-expanded .osm-resize-toggle .osm-icon-collapse {
    display: block;
}

/* --- Etat agrandi : page album, croissance dans le flux ------------------- */

/*
 * Les regles de base du plugin ciblent `#map` (specificite 1-0-0) ; ajouter
 * deux classes suffit a passer devant sans recourir a `!important`.
 */
.osm-resizable--flow.is-expanded > #map {
    width: 100%;
    height: min(calc(var(--osm-h, 200px) * 2.5), 70vh);
    /* Le plugin fait flotter la carte a gauche des vignettes quand une largeur
       fixe est reglee ; sur toute la largeur, ce flottement n'a plus de sens. */
    float: none;
}

/* --- Etat agrandi : page photo, recouvrement ancre ------------------------ */

.osm-resizable--overlay.is-expanded > #map {
    position: absolute;
    top: 0;
    /* Ancrage a droite : la carte grandit vers la gauche, au-dessus de la
       photo, plutot que de deborder hors de la fenetre. */
    right: 0;
    z-index: 900;
    width: min(640px, 80vw);
    height: min(calc(var(--osm-h, 200px) * 2.5), 70vh);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}