/**
 * ================================================================
 * FICHIER : lightbox_commune.css
 * EMPLACEMENT : 2027_B2B/_theme/lightbox_commune.css
 * SHORT_DESC : Habillage commun de toutes les lightbox d'images (verre fumé, flèches aux bords, transitions, diaporama)
 * DESCRIPTION : Styles des classes posées par _theme/lightbox_commune.js sur chaque lightbox du site.
 *               Chargé après theme.css et la CSS de la page (template.php) ; sélecteurs préfixés par « :root body »
 *               pour passer devant les règles des pages (y compris leurs survols et leurs media queries)
 *               sans !important. Le verre fumé reprend les variables --fume_* de la section VERRE_FUME de
 *               theme.css (directive n° 1532), avec leurs replis (sans backdrop-filter, moins de transparence).
 *
 * SOMMAIRE :
 *   - VARIABLES           : Teintes des deux familles de lightbox
 *   - FOND                : Verre fumé semi-transparent
 *   - BOUTONS_ORIGINE     : Boutons de la page gardés dans la mise en page, à taille nulle
 *   - FLECHES             : Grandes zones collées aux bords de la fenêtre
 *   - DIAPORAMA           : Bouton lecture / pause et barre de progression
 *   - TRANSITION          : Entrée de chaque nouvelle image
 *   - MINIATURES          : Bandes rapprochées du bas de la fenêtre
 *   - RESPONSIVE          : Téléphone
 *
 * MODIFICATIONS :
 *   - 15/10/2026 02:16 : Création (Dialogue n° 1585 de JaxX, Claude) — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* VARIABLES =========================================================== */
/*
 * Deux familles :
 *   - lightbox aux couleurs du thème (fiche réalisation, exemples Web Express, tchat) : fumé du thème (--fume_teinte),
 *     clair en mode clair, texte en --encre ;
 *   - lightbox à texte blanc (diaporama d'article, galeries Web Express, visionneuse de l'atelier) : fumé sombre
 *     dans tous les thèmes, pour que leurs légendes et compteurs blancs restent lisibles.
 */
:root
{
    --lightbox_commune_sombre: rgba(12, 12, 16, 0.66);
    --lightbox_commune_duree_entree: 420ms;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    :root
    {
        --lightbox_commune_sombre: rgba(12, 12, 16, 0.93);
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)
{
    :root
    {
        --lightbox_commune_sombre: #0c0c10;
    }
}

:root body .lightbox_commune
{
    --lightbox_commune_teinte: var(--lightbox_commune_sombre);
    --lightbox_commune_encre: #ffffff;
    --lightbox_commune_voile: rgba(0, 0, 0, 0.28);
}

@supports (color: color-mix(in srgb, red 50%, blue))
{
    :root body :is( .realisation_lightbox, .webexpress_exemples_lightbox, .jarvis_visionneuse ).lightbox_commune
    {
        --lightbox_commune_teinte: var(--fume_teinte);
        --lightbox_commune_encre: var(--encre, #ffffff);
    }

    html.bright_mode body :is( .realisation_lightbox, .webexpress_exemples_lightbox, .jarvis_visionneuse ).lightbox_commune
    {
        --lightbox_commune_voile: rgba(255, 255, 255, 0.42);
    }
}
/* VARIABLES =========================================================== */

/* FOND ================================================================ */
:root body .lightbox_commune
{
    background: var(--fume_degrade, none), var(--lightbox_commune_teinte);
    -webkit-backdrop-filter: var(--fume_flou, blur(18px));
    backdrop-filter: var(--fume_flou, blur(18px));
}

:root body .lightbox_commune::backdrop
{
    background: transparent;
}

/* Galeries Web Express : le voile est un calque à part (.webexpress_lightbox_fond), il reçoit le fumé à la place du conteneur */
:root body .lightbox_commune.webexpress_lightbox
{
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

:root body .lightbox_commune .lightbox_commune_fond
{
    background: var(--fume_degrade, none), var(--lightbox_commune_teinte);
    -webkit-backdrop-filter: var(--fume_flou, blur(18px));
    backdrop-filter: var(--fume_flou, blur(18px));
}
/* FOND ================================================================ */

/* BOUTONS_ORIGINE ===================================================== */
/* Les boutons Précédent / Suivant de chaque page restent en place (grilles inchangées) mais ne prennent plus de place :
   les flèches du module relaient leurs clics. Le bouton « Fermer » n'est pas concerné. */
:root body .lightbox_commune .lightbox_commune_origine
{
    width: 0;
    min-width: 0;
    height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    font-size: 0;
    opacity: 0;
    pointer-events: none;
}

:root body .lightbox_commune .lightbox_commune_bouton[hidden]
{
    display: none;
}
/* BOUTONS_ORIGINE ===================================================== */

/* FLECHES ============================================================= */
/* Bande cliquable sur toute la hauteur utile, collée au bord ; pastille en verre fumé au centre */
:root body .lightbox_commune .lightbox_commune_nav
{
    position: absolute;
    top: 64px;
    bottom: var(--lightbox_commune_bas, 72px);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 8vw, 120px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--lightbox_commune_encre);
    cursor: pointer;
    transition: background-color var(--duree, 0.25s) var(--easing, ease);
    -webkit-tap-highlight-color: transparent;
}

:root body .lightbox_commune .lightbox_commune_precedent
{
    left: 0;
}

:root body .lightbox_commune .lightbox_commune_suivant
{
    right: 0;
}

:root body .lightbox_commune .lightbox_commune_precedent:hover
{
    background: linear-gradient(to right, var(--lightbox_commune_voile), transparent);
}

:root body .lightbox_commune .lightbox_commune_suivant:hover
{
    background: linear-gradient(to left, var(--lightbox_commune_voile), transparent);
}

:root body .lightbox_commune .lightbox_commune_pastille
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: var(--fume_degrade, none), var(--lightbox_commune_teinte);
    -webkit-backdrop-filter: var(--fume_flou, blur(18px));
    backdrop-filter: var(--fume_flou, blur(18px));
    box-shadow: var(--fume_ombre, 0 10px 34px rgba(0, 0, 0, 0.42));
    transition: transform 180ms var(--easing, ease), border-color var(--duree, 0.25s) var(--easing, ease);
}

:root body .lightbox_commune .lightbox_commune_nav:hover .lightbox_commune_pastille
{
    border-color: var(--accent, #c9a227);
    transform: scale(1.08);
}

:root body .lightbox_commune .lightbox_commune_nav:focus-visible
{
    outline: none;
}

:root body .lightbox_commune .lightbox_commune_nav:focus-visible .lightbox_commune_pastille
{
    outline: 2px solid var(--accent, #c9a227);
    outline-offset: 3px;
}

/* Image zoomée : seules les pastilles restent cliquables, le reste de la bande laisse déplacer l'image */
:root body .lightbox_commune.lightbox_zoom_plein_ecran .lightbox_commune_nav
{
    pointer-events: none;
    background: transparent;
}

:root body .lightbox_commune.lightbox_zoom_plein_ecran .lightbox_commune_pastille
{
    pointer-events: auto;
}
/* FLECHES ============================================================= */

/* DIAPORAMA =========================================================== */
:root body .lightbox_commune .lightbox_commune_diaporama
{
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: var(--fume_degrade, none), var(--lightbox_commune_teinte);
    -webkit-backdrop-filter: var(--fume_flou, blur(18px));
    backdrop-filter: var(--fume_flou, blur(18px));
    box-shadow: var(--fume_ombre, 0 10px 34px rgba(0, 0, 0, 0.42));
    color: var(--lightbox_commune_encre);
    cursor: pointer;
    transition: border-color var(--duree, 0.25s) var(--easing, ease), transform 180ms var(--easing, ease);
}

:root body .lightbox_commune .lightbox_commune_diaporama:hover,
:root body .lightbox_commune .lightbox_commune_diaporama:focus-visible
{
    border-color: var(--accent, #c9a227);
    outline: none;
    transform: scale(1.06);
}

:root body .lightbox_commune .lightbox_commune_icone_pause,
:root body .lightbox_commune.lightbox_commune_diaporama_actif .lightbox_commune_icone_lecture
{
    display: none;
}

:root body .lightbox_commune.lightbox_commune_diaporama_actif .lightbox_commune_icone_pause
{
    display: block;
}

:root body .lightbox_commune.lightbox_commune_diaporama_actif .lightbox_commune_diaporama
{
    border-color: var(--accent, #c9a227);
    color: var(--accent, #c9a227);
}

/* Barre de progression jusqu'à l'image suivante, sur le bord haut de la fenêtre */
:root body .lightbox_commune .lightbox_commune_progression
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 3px;
    background: var(--accent, #c9a227);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
}

:root body .lightbox_commune .lightbox_commune_progression.lightbox_commune_progression_active
{
    opacity: 1;
    animation: lightbox_commune_progression var(--lightbox_commune_duree, 4500ms) linear both;
}

@keyframes lightbox_commune_progression
{
    from
    {
        transform: scaleX(0);
    }
    to
    {
        transform: scaleX(1);
    }
}

/* Tchat : son compteur est en haut à gauche, il se décale à droite du bouton diaporama */
:root body .jarvis_visionneuse.lightbox_commune .jarvis_visionneuse_compteur
{
    padding-left: 70px;
}
/* DIAPORAMA =========================================================== */

/* TRANSITION ========================================================== */
/* Propriétés individuelles translate / scale : elles se cumulent avec le transform posé par le zoom (lightbox_zoom.js) */
:root body .lightbox_commune .lightbox_commune_entree.lightbox_commune_depuis_droite
{
    animation: lightbox_commune_entree_droite var(--lightbox_commune_duree_entree) cubic-bezier(0.22, 0.8, 0.25, 1) both;
}

:root body .lightbox_commune .lightbox_commune_entree.lightbox_commune_depuis_gauche
{
    animation: lightbox_commune_entree_gauche var(--lightbox_commune_duree_entree) cubic-bezier(0.22, 0.8, 0.25, 1) both;
}

@keyframes lightbox_commune_entree_droite
{
    from
    {
        opacity: 0;
        translate: 32px 0;
        scale: 0.985;
    }
    to
    {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes lightbox_commune_entree_gauche
{
    from
    {
        opacity: 0;
        translate: -32px 0;
        scale: 0.985;
    }
    to
    {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes lightbox_commune_fondu
{
    from
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}
/* TRANSITION ========================================================== */

/* MINIATURES ========================================================== */
/* Fiche réalisation : la bande descend tout en bas, l'image garde l'espace restant */
:root body .realisation_lightbox_avec_miniatures.lightbox_commune[open]
{
    padding-bottom: 6px;
}

:root body .realisation_lightbox.lightbox_commune .lightbox_commune_miniatures
{
    align-self: end;
}

/* Exemples Web Express */
:root body .webexpress_exemples_lightbox.lightbox_commune[open]
{
    padding-bottom: 6px;
}

:root body .webexpress_exemples_lightbox.lightbox_commune .lightbox_commune_miniatures
{
    align-self: end;
}

/* Tchat */
:root body .jarvis_visionneuse.lightbox_commune .lightbox_commune_miniatures
{
    padding-bottom: 6px;
}

/* Galeries Web Express : bande déjà collée au bas, marge intérieure réduite */
:root body .webexpress_lightbox.lightbox_commune .lightbox_commune_miniatures
{
    padding-bottom: 6px;
}

/* Visionneuse de l'atelier */
:root body .dialogue_visionneuse.lightbox_commune .lightbox_commune_miniatures
{
    bottom: 6px;
}

:root body .dialogue_visionneuse.dialogue_galerie_multiple.lightbox_commune
{
    padding-bottom: 82px;
}
/* MINIATURES ========================================================== */

/* RESPONSIVE ========================================================== */
@media (max-width: 640px)
{
    :root body .lightbox_commune .lightbox_commune_nav
    {
        top: 60px;
        width: 52px;
    }

    :root body .lightbox_commune .lightbox_commune_pastille
    {
        width: 42px;
        height: 42px;
    }

    :root body .lightbox_commune .lightbox_commune_pastille svg
    {
        width: 22px;
        height: 22px;
    }

    :root body .lightbox_commune .lightbox_commune_diaporama
    {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
    }

    :root body .jarvis_visionneuse.lightbox_commune .jarvis_visionneuse_compteur
    {
        padding-left: 60px;
    }
}

@media (prefers-reduced-motion: reduce)
{
    :root body .lightbox_commune .lightbox_commune_entree.lightbox_commune_depuis_droite,
    :root body .lightbox_commune .lightbox_commune_entree.lightbox_commune_depuis_gauche
    {
        animation: lightbox_commune_fondu 200ms ease both;
    }

    :root body .lightbox_commune .lightbox_commune_nav,
    :root body .lightbox_commune .lightbox_commune_pastille,
    :root body .lightbox_commune .lightbox_commune_diaporama
    {
        transition: none;
    }

    :root body .lightbox_commune .lightbox_commune_nav:hover .lightbox_commune_pastille,
    :root body .lightbox_commune .lightbox_commune_diaporama:hover
    {
        transform: none;
    }
}
/* RESPONSIVE ========================================================== */