/*
 * Dialogue d'image du thème Discovery.
 *
 * Apparence du bouton portant la vignette et du dialogue qu'il commande.
 *
 * Les symboles des commandes sont produits ici, sur des éléments masqués aux
 * technologies d'assistance. Chaque bouton porte par ailleurs un intitulé
 * textuel, visible ou masqué visuellement : le symbole n'est jamais le seul
 * porteur de sens.
 *
 * Les symboles sont écrits en séquences d'échappement plutôt qu'en
 * caractères littéraux, ce qui rend la feuille indépendante de son encodage.
 */


/* =============================================================
   Bouton déclencheur
   ============================================================= */

.discovery-dialogue-declencheur {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.discovery-dialogue-declencheur img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =============================================================
   Dialogue
   ============================================================= */

/*
 * L'affichage n'est déclaré que sur l'état ouvert. Une règle d'affichage
 * portée par la classe seule primerait sur la règle du navigateur qui masque
 * les éléments porteurs de l'attribut hidden, et le dialogue resterait
 * visible à l'état fermé.
 */
.discovery-dialogue:not([hidden]) {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--discovery-space-4);
}

.discovery-dialogue-fond {
    position: absolute;
    inset: 0;
    background-color: var(--discovery-color-background);
    opacity: 0.85;
}

.discovery-dialogue-panneau {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-4);
    width: min(60rem, 100%);
    max-height: 90vh;
    max-height: 90dvh;
    padding: var(--discovery-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--discovery-color-text);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-md);
}


/* =============================================================
   En-tête du dialogue
   ============================================================= */

.discovery-dialogue-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--discovery-space-4);
}

.discovery-dialogue-titre {
    margin: 0;
    font-size: var(--discovery-text-xl);
    line-height: var(--discovery-line-tight);
}


/* =============================================================
   Corps du dialogue
   ============================================================= */

.discovery-dialogue-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.discovery-dialogue-legende {
    margin: var(--discovery-space-3) 0 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-dialogue-texte {
    margin-block-start: var(--discovery-space-3);
}


/* =============================================================
   Commandes
   ============================================================= */

.discovery-dialogue-fermer,
.discovery-dialogue-fermer-pied,
.discovery-dialogue-remonter,
.discovery-dialogue-divulgation {
    display: inline-flex;
    align-items: center;
    gap: var(--discovery-space-2);
    padding: var(--discovery-space-2) var(--discovery-space-3);
    color: var(--discovery-color-text);
    background: none;
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-sm);
    cursor: pointer;
}

.discovery-dialogue-fermer {
    flex: 0 0 auto;
}

.discovery-dialogue-pied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-3);
    padding-block-start: var(--discovery-space-3);
    border-block-start: 1px solid var(--discovery-color-border);
}


/* =============================================================
   Symboles des commandes
   ============================================================= */

.discovery-dialogue-icone {
    line-height: 1;
}

.discovery-dialogue-fermer .discovery-dialogue-icone::before,
.discovery-dialogue-fermer-pied .discovery-dialogue-icone::before {
    content: "\2715";
}

.discovery-dialogue-remonter .discovery-dialogue-icone::before {
    content: "\2191";
}

.discovery-dialogue-divulgation .discovery-dialogue-icone::before {
    content: "\002B";
}

.discovery-dialogue-divulgation[aria-expanded="true"] .discovery-dialogue-icone::before {
    content: "\2212";
}


/* =============================================================
   Verrouillage du défilement de la page
   ============================================================= */

/*
 * Le défilement du document est neutralisé tant qu'un dialogue est ouvert,
 * afin que la molette et le geste tactile agissent sur le panneau et non sur
 * la page placée derrière.
 */
.discovery-dialogue-actif {
    overflow: hidden;
}