/*
 * 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;
}


/*
 * Le bouton qui enveloppe une image ne porte aucune présentation propre :
 * l'image qu'il contient est celle de la page, à la taille voulue par celui
 * qui l'a posée, et rien ne doit signaler qu'un bouton l'entoure.
 *
 * Le rendu en bloc remplace le rendu en ligne du bouton : sur une ligne de
 * texte, le bouton laisse un dégagement sous l'image et sa largeur s'ajuste à
 * son contenu, ce qui empêche une image posée à toute la largeur d'occuper sa
 * colonne.
 *
 * Les trois autres déclarations neutralisent le rendu que les navigateurs
 * appliquent aux boutons : leur apparence propre, leur police et leur
 * alignement, tous distincts de ceux du texte environnant.
 *
 * Le curseur en main et l'anneau de focus clavier sont conservés. Le premier
 * ne change rien à l'apparence de la page et signale l'image consultable à
 * qui emploie une souris ; le second n'apparaît qu'à la navigation au
 * clavier, par la règle globale du thème.
 */
.discovery-image-enveloppe {
    display: block;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    appearance: none;
}


/*
 * Le bouton accompagnant une image de contenu porte un symbole et non une
 * reproduction : l'image figure déjà juste avant lui dans le document.
 */
.discovery-image-contenu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--discovery-space-2);
    min-inline-size: var(--discovery-cible-min, 2.75rem);
    min-block-size: var(--discovery-cible-min, 2.75rem);
    margin-block-start: var(--discovery-space-2);
    padding: var(--discovery-space-2);
    border: 1px solid var(--discovery-color-muted);
    border-radius: var(--discovery-radius-sm);
}

/*
 * Le symbole suit la taille du texte et sa couleur : une image ne serait ni
 * redimensionnable par la personne, ni reprise par le mode de contraste
 * renforcé.
 */
.discovery-dialogue-symbole {
    color: var(--discovery-color-text);
    font-size: var(--discovery-text-lg);
    line-height: 1;
}


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

.discovery-dialogue {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--discovery-space-4);
}

/*
 * État fermé. Le masquage est obtenu par visibility plutôt que par le
 * display none qu'impose l'attribut hidden : les deux retirent l'élément de
 * l'arbre d'accessibilité, mais WebKit expose un dialogue modal masqué par
 * display none, que les lecteurs d'écran annoncent alors comme un élément de
 * la page.
 */
.discovery-dialogue[hidden] {
    display: flex;
    visibility: hidden;
}

.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(var(--discovery-large-max), 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-corps {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-3);
    min-width: 0;
}

.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);
}


/* =============================================================
   Description repliée
   ============================================================= */

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

.discovery-dialogue-divulgation {
    align-self: start;
}

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


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

   Les commandes se posent sur le panneau, dont le fond est celui des surfaces
   du thème. Leur bordure emploie la couleur atténuée, qui atteint 8,79:1 sur
   cette surface, là où la couleur de bordure ordinaire tombe à 2,63:1, sous
   le seuil de 3:1 du critère WCAG 1.4.11. */

/*
 * L'affichage n'est déclaré que sur l'état visible. Une déclaration portée
 * par la classe seule primerait sur la règle du navigateur qui masque les
 * éléments porteurs de l'attribut hidden : le bouton de divulgation, écrit
 * masqué et révélé par le script, resterait visible en son absence alors
 * qu'il ne commanderait rien.
 */
.discovery-dialogue-fermer:not([hidden]),
.discovery-dialogue-fermer-pied:not([hidden]),
.discovery-dialogue-remonter:not([hidden]),
.discovery-dialogue-divulgation:not([hidden]) {
    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-muted);
    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-intitule {
    line-height: var(--discovery-line-tight);
}

.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;
}