/**
 * Visionneuse unique du site.
 *
 * Préfixe : .lenain-lightbox
 * Le markup est construit par assets/js/lightbox.js, qui sert les trois
 * usages : galerie de chantier, visuels à encart de référence, photos
 * d'article. Apparence héritée de la visionneuse du bloc « Galerie du
 * chantier » — mêmes commandes, mêmes tailles, même fond (spec
 * SPECS-REAL-LIGHTBOX-METIERS §2).
 *
 * Mise en page : une colonne de trois bandes — en-tête (fermeture), scène
 * (la photo, qui prend tout le reste) et barre basse. Les commandes ne
 * recouvrent donc jamais la photo, et la scène n'a pas à réserver de place au
 * jugé : la colonne flex la lui donne.
 *
 * La barre basse est à son tour un empilement de deux rangs — la légende sur
 * toute la largeur, puis les commandes —, à toutes les largeurs d'écran.
 *
 * Deux dispositions de flèches coexistent, la classe étant posée par le
 * script (voir lightbox.js, « Disposition des flèches ») :
 *   --nav-bas   : flèches dans la barre basse, de part et d'autre du compteur.
 *   --nav-cotes : flèches sur les côtés, la scène se retirant d'autant.
 *
 * « Aux côtés » sert aussi aux fenêtres basses et larges — un téléphone
 * couché —, où la bande de fermeture et la barre basse s'allègent pour rendre
 * à la photo la hauteur qu'elles lui prenaient (voir la fin de la feuille).
 */

.lenain-lightbox {
    /*
     * Toutes les mesures de la visionneuse dérivent de ces quatre-là : une
     * marge de bord, un diamètre de commande, une taille de glyphe et une
     * gouttière, chacune fluide entre un plancher tactile et un plafond de
     * maquette. Aucun palier, donc aucune media query.
     */
    --lp-lightbox-marge: clamp(12px, 3vw, 24px);
    --lp-lightbox-commande: clamp(44px, 11vw, 52px);
    --lp-lightbox-icone: clamp(14px, 3.5vw, 18px);
    --lp-lightbox-gap: clamp(12px, 3vw, 24px);
    --lp-lightbox-trait: 2px;

    /*
     * La zone de légende a une hauteur constante, réservée pour le cas le
     * plus haut raisonnable — deux lignes —, sans quoi une légende d'une
     * ligne, de deux, ou absente ferait monter et descendre les flèches et
     * le compteur d'une photo à l'autre.
     */
    --lp-lightbox-legende-lignes: 2;
    --lp-lightbox-legende-interligne: 1.4;
    --lp-lightbox-legende-hauteur: calc(
        var(--wp--preset--font-size--sm) * var(--lp-lightbox-legende-interligne) * var(--lp-lightbox-legende-lignes)
    );

    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--lp-lightbox-fond);
    color: var(--wp--preset--color--white);
}

/*
 * La colonne n'est posée qu'à l'ouverture : `display` sur le dialog fermé
 * l'emporterait sur le `display: none` de la feuille du navigateur.
 */
.lenain-lightbox[open] {
    display: flex;
    flex-direction: column;
}

.lenain-lightbox::backdrop {
    /* Le dialog couvre l'écran et porte seul la teinte : pas de double voile. */
    background: none;
}

.lenain-lightbox:focus-visible {
    outline: none;
}

/* ------------------------------------------------------------ Les trois bandes */

.lenain-lightbox__header {
    display: flex;
    flex: none;
    justify-content: flex-end;
    padding: var(--lp-lightbox-marge) var(--lp-lightbox-marge) 0;
}

.lenain-lightbox__stage {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    /* Sans ce plancher nul, la scène refuserait de descendre sous la photo. */
    min-height: 0;
    padding: var(--lp-lightbox-marge);
    box-sizing: border-box;
    cursor: zoom-out;
}

/*
 * Deux rangs : la légende, puis les commandes. Les séparer plutôt que de
 * glisser la légende entre les flèches lui laisse toute la largeur — sur un
 * téléphone, prise dans la rangée des boutons, il ne lui restait qu'un tiers
 * de l'écran.
 */
.lenain-lightbox__bar {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--lp-lightbox-gap) / 3);
    padding: 0 var(--lp-lightbox-marge) var(--lp-lightbox-marge);
}

.lenain-lightbox__commandes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lp-lightbox-gap);
    min-height: var(--lp-lightbox-commande);
}

/* ------------------------------------------------------------------ La photo */

/*
 * Dimensions laissées libres, bornées par la scène : c'est l'algorithme de
 * dimensionnement des éléments remplacés qui réduit la photo en conservant
 * son rapport, sans jamais la rogner ni l'étirer. Une hauteur imposée (par
 * exemple `height: 100%`) briserait ce calcul : la largeur serait écrêtée par
 * `max-width` sans que la hauteur suive, et la boîte cesserait d'épouser la
 * photo. `object-fit: contain` n'est que la ceinture de sécurité — la boîte
 * a déjà le bon rapport.
 */
.lenain-lightbox__image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    border-radius: var(--lp-radius-sm);
    cursor: default;
}

/* ----------------------------------------------------- Commandes et décor */

.lenain-lightbox__nav {
    position: relative;
    flex: none;
    width: var(--lp-lightbox-commande);
    height: var(--lp-lightbox-commande);
    border: var(--lp-lightbox-trait) solid color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

/*
 * Le chevron est sur un pseudo-élément séparé : posé sur le bouton lui-même,
 * le masque effacerait sa bordure.
 */
.lenain-lightbox__nav::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--lp-lightbox-icone);
    height: var(--lp-lightbox-icone);
    margin: auto;
    background-color: var(--wp--preset--color--white);
    -webkit-mask: url("../img/arrow-right.svg") center / contain no-repeat;
            mask: url("../img/arrow-right.svg") center / contain no-repeat;
}

.lenain-lightbox__nav--prev::before {
    transform: rotate(180deg);
}

.lenain-lightbox__nav:hover,
.lenain-lightbox__nav:focus-visible {
    border-color: var(--wp--preset--color--rose);
    background: var(--wp--preset--color--rose);
}

.lenain-lightbox__close {
    position: relative;
    flex: none;
    width: var(--lp-lightbox-commande);
    height: var(--lp-lightbox-commande);
    border: 0;
    border-radius: 50%;
    background: var(--wp--preset--color--white);
    cursor: pointer;
    transition: background-color 0.25s ease;
}

/* La croix : deux barres croisées, une par pseudo-élément. */
.lenain-lightbox__close::before,
.lenain-lightbox__close::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--lp-lightbox-icone);
    height: var(--lp-lightbox-trait);
    margin: auto;
    background: var(--wp--preset--color--anthracite);
}

.lenain-lightbox__close::before {
    transform: rotate(45deg);
}

.lenain-lightbox__close::after {
    transform: rotate(-45deg);
}

.lenain-lightbox__close:hover,
.lenain-lightbox__close:focus-visible {
    background: var(--wp--preset--color--rose);
}

.lenain-lightbox__close:hover::before,
.lenain-lightbox__close:hover::after,
.lenain-lightbox__close:focus-visible::before,
.lenain-lightbox__close:focus-visible::after {
    background: var(--wp--preset--color--white);
}

/* Prise de focus lisible sur le fond sombre comme sur la pastille blanche. */
.lenain-lightbox__nav:focus-visible,
.lenain-lightbox__close:focus-visible {
    outline: var(--lp-lightbox-trait) solid var(--wp--preset--color--white);
    outline-offset: var(--lp-lightbox-trait);
}

.lenain-lightbox__counter {
    margin: 0;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.14em;
}

/*
 * Hauteur figée à deux lignes, quelle que soit la légende : c'est elle qui
 * tient les commandes immobiles pendant qu'on parcourt la série. Le
 * rognage à deux lignes n'enlève rien au texte, qui reste entier dans le
 * DOM pour les technologies d'assistance.
 */
.lenain-lightbox__caption {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lp-lightbox-legende-lignes);
    overflow: hidden;
    width: 100%;
    max-width: 60ch;
    height: var(--lp-lightbox-legende-hauteur);
    margin: 0;
    font-size: var(--wp--preset--font-size--sm);
    line-height: var(--lp-lightbox-legende-interligne);
    text-align: center;
    /* Un mot plus long que la colonne déborderait sur un écran étroit. */
    overflow-wrap: break-word;
}

/*
 * Série entièrement sans légende : rien à réserver, la classe est posée par
 * le script à l'ouverture. La hauteur reste constante d'une photo à l'autre.
 */
.lenain-lightbox--sans-legende .lenain-lightbox__caption {
    display: none;
}

/* ------------------------------------------- Disposition « flèches aux côtés » */

/*
 * Les flèches quittent le flux de la barre pour se caler à mi-hauteur du
 * dialog ; la scène se retire de leur encombrement — une marge de bord, le
 * diamètre, une gouttière — pour que la photo ne passe jamais dessous.
 */
.lenain-lightbox--nav-cotes .lenain-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.lenain-lightbox--nav-cotes .lenain-lightbox__nav--prev {
    left: var(--lp-lightbox-marge);
}

.lenain-lightbox--nav-cotes .lenain-lightbox__nav--next {
    right: var(--lp-lightbox-marge);
}

.lenain-lightbox--nav-cotes .lenain-lightbox__stage {
    padding-inline: calc(var(--lp-lightbox-marge) * 2 + var(--lp-lightbox-commande));
}

/* ------------------------------------------------- Fenêtre basse et large */

/*
 * Seule media query de la feuille, et elle est difficile à éviter : aucune
 * unité fluide ne sait dire « ici la hauteur est la ressource rare ». Sur un
 * téléphone couché (667 x 375), l'en-tête et la barre basse mangeaient la
 * moitié de l'écran pour laisser 145 px de photo, pendant que 500 px de
 * largeur restaient vides. Les bornes sont celles de la disposition « aux
 * côtés » côté script (lightbox.js, COTES) : mêmes fenêtres, mêmes règles.
 *
 * Les allègements sont réservés à « aux côtés », car ce sont ses gouttières
 * latérales — marge + diamètre de commande — qui garantissent que la photo ne
 * passe jamais sous la croix de fermeture devenue flottante. En mode « bas »
 * forcé (débogage), la mise en page d'origine est conservée telle quelle.
 */
@media (min-width: 600px) and (max-height: 500px) {
    /*
     * Une ligne de légende au lieu de deux : la hauteur reste constante d'une
     * photo à l'autre — c'est tout ce que la barre demande —, et les 20 px
     * ainsi rendus vont à la photo. Le texte entier reste dans le DOM.
     */
    .lenain-lightbox--nav-cotes {
        --lp-lightbox-legende-lignes: 1;
    }

    /*
     * La croix quitte le flux et se pose dans le coin : sa bande ne prend plus
     * de hauteur alors qu'elle ne portait qu'un bouton.
     */
    .lenain-lightbox--nav-cotes .lenain-lightbox__header {
        position: absolute;
        top: 0;
        right: 0;
        padding-bottom: 0;
    }

    /*
     * Les flèches étant parties aux côtés, ce rang ne porte plus que le
     * compteur : lui réserver le diamètre d'une commande n'a plus de sens.
     */
    .lenain-lightbox--nav-cotes .lenain-lightbox__commandes {
        min-height: 0;
    }

    /* Marges de bord réduites de moitié là où la hauteur est comptée. */
    .lenain-lightbox--nav-cotes .lenain-lightbox__bar {
        padding-bottom: calc(var(--lp-lightbox-marge) / 2);
    }

    .lenain-lightbox--nav-cotes .lenain-lightbox__stage {
        padding-block: calc(var(--lp-lightbox-marge) / 2);
    }
}

/* ----------------------------------------------------------- Déclencheurs */

/* Une photo d'article s'ouvre au clic : le curseur l'annonce. */
.lenain-lightbox-trigger {
    cursor: zoom-in;
}

.lenain-lightbox-trigger:focus-visible {
    outline: 2px solid var(--wp--preset--color--rose);
    outline-offset: 4px;
}

/*
 * Blocage du défilement de l'arrière-plan : la classe est posée par
 * lightbox.js sur l'élément racine le temps de l'ouverture.
 */
html.lenain-lightbox-verrou {
    overflow: hidden;
}