/*
 * 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 : il grandit donc avec le
 * réglage de taille, et le mode de contraste renforcé le reprend. Une image
 * échappe à l'un comme à l'autre.
 */
.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 certains moteurs exposent 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;
}

/*
 * La hauteur du panneau est portée par une variable : la hauteur de l'image
 * s'en déduit, et un site qui change l'une change les deux. Les deux
 * déclarations se suivent pour les moteurs qui ignorent l'unité tenant compte
 * des barres d'interface mobiles.
 */
.discovery-dialogue-panneau {
    --discovery-dialogue-hauteur: 90vh;
    --discovery-dialogue-hauteur: 90dvh;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-4);
    width: min(var(--discovery-large-max), 100%);
    max-height: var(--discovery-dialogue-hauteur);
    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;
}

/*
 * L'image est bornée en hauteur comme en largeur, et garde ses proportions :
 * une photo en hauteur tient dans la fenêtre, et le défilement du panneau
 * reste réservé à sa description.
 *
 * Le plafond est la hauteur du panneau moins la place du titre, de la légende,
 * du bouton de description, du pied et des marges intérieures. Le plancher de
 * douze rem garde l'image lisible sur une fenêtre très basse, où le panneau
 * défile alors de nouveau.
 *
 * La variable permet à un site d'imposer son propre plafond.
 */
.discovery-dialogue-image {
    display: block;
    max-width: 100%;
    max-block-size: var(--discovery-dialogue-image-max, max(12rem, calc(var(--discovery-dialogue-hauteur, 90vh) - 19rem)));
    height: auto;
    margin-inline: auto;
}

/*
 * Un dialogue sans description n'a ni bouton de divulgation ni pied : la place
 * ainsi rendue revient à l'image, qui occupe alors la hauteur du panneau moins
 * le seul titre, la légende et les marges intérieures.
 */
.discovery-dialogue-panneau:not(:has(.discovery-dialogue-description)) .discovery-dialogue-image {
    max-block-size: var(--discovery-dialogue-image-max, max(12rem, calc(var(--discovery-dialogue-hauteur, 90vh) - 11rem)));
}

.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 : une commande se distingue ainsi plus nettement qu'avec la
   couleur de bordure ordinaire, qui y tient 4,06:1 pour le seuil de 3:1 du
   critère WCAG 1.4.11. */

/*
 * L'affichage n'est déclaré que sur l'état visible : la règle du navigateur
 * qui masque les éléments porteurs de l'attribut hidden garde ainsi la main.
 * Le bouton de divulgation est écrit masqué et révélé par le script, et reste
 * masqué là où aucun script ne s'exécute.
 */
.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;
}