/**
 * Widget flottant "informations" : accessibilité de l'ouverture et de la
 * fermeture.
 *
 * Chargé après styles.min.css. Les sélecteurs ci-dessous ont une spécificité
 * strictement supérieure à ceux du thème parent, ce qui les fait gagner à tous
 * les points de rupture sans avoir à répliquer ses media queries ni recourir
 * à !important.
 */

/* Le déclencheur remplace le <svg> cliquable et occupe toute la pastille. */
.informations-popin .informations-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.informations-popin.is-active .informations-toggle {
    display: none;
}

/**
 * Le survol ouvre toujours le panneau. Mais après une fermeture explicite
 * (croix, Échap, clic extérieur), la souris est encore sur le widget : sans
 * cette classe le CSS le rouvrirait aussitôt et la fermeture serait sans
 * effet. .is-dismissed suspend l'ouverture au survol jusqu'à ce que la souris
 * quitte le widget — le JS la retire alors. Répond aussi à WCAG 1.4.13, qui
 * exige qu'un contenu apparu au survol puisse être masqué.
 */
.informations-popin.is-dismissed:hover {
    width: 60px;
    height: 60px;
    overflow: visible;
}

.informations-popin.is-dismissed:hover .informations-popin-content {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.informations-popin.is-dismissed:hover .informations-toggle {
    display: flex;
}

/**
 * Le déclencheur occupe toute la pastille fermée : une fois le panneau ouvert,
 * il recouvrirait le contenu. Le thème parent masque déjà l'icône au survol, on
 * masque ici le bouton qui la porte.
 */
.informations-popin:not(.is-dismissed):hover .informations-toggle {
    display: none;
}

/**
 * Bouton de fermeture : le thème parent ne l'affiche qu'en dessous de 700px,
 * il n'était donc jamais utilisable sur desktop.
 */
.informations-popin.is-active button.close-informations-popin,
.informations-popin:not(.is-dismissed):hover button.close-informations-popin {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cible d'au moins 44px de côté, l'icône n'en faisant que 15. */
    width: 44px;
    height: 44px;
    padding: 0;
    top: 5px;
    right: 5px;
    z-index: 1;
}

.informations-popin.is-active {
    cursor: default;
}

.informations-popin .informations-toggle:focus-visible,
.informations-popin button.close-informations-popin:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}