/* * VAL — coexistence du menu mobile/latéral et de MediaBox. * * Quand le menu est ouvert alors qu'un dialog MediaBox est déjà actif, * le thème assombrit #page-wrapper (opacity: .35) en plus du voile Lity. * Cela assombrit aussi le bandeau fixe #header. On supprime donc cette * seconde opacité et on laisse une fenêtre transparente de 60 px en haut * du backdrop MediaBox, correspondant à la hauteur du bandeau. */ html.lity-active body.is-menu-visible #page-wrapper { opacity: 1 !important; } html.lity-active body.is-menu-visible dialog.box_mediabox::backdrop, html.lity-active body.is-menu-visible dialog.box_mediabox::before { background: linear-gradient( to bottom, transparent 0, transparent 60px, rgba(0, 0, 0, .72) 60px, rgba(0, 0, 0, .72) 100% ) !important; } /* * Ouverture animée des images MediaBox : le zoom depuis la miniature sert * déjà de continuité visuelle. Le spinner natif est donc masqué uniquement * pendant le chargement d'une image ouverte depuis une miniature. * Les autres types de contenus MediaBox gardent leur loader. */ html.val-mediabox-image-opening dialog.box_mediabox .lity-loader { display: none !important; } /* * La classe d'ouverture est posée dès le clic, avant même que Lity ait créé * et peint sa légende. Celle-ci ne peut donc plus apparaître une première * fois, être masquée par le JS, puis réapparaître : on supprime le flash. */ html.val-mediabox-image-opening dialog.box_mediabox .lity-image-caption.expanded { opacity: 0 !important; transition: opacity 160ms ease-out !important; } /* * Une fois l'image complètement en place, une seule transition CSS fait * apparaître la légende. Pas d'animation JS sur opacity : cela évite le * second départ de la transition CSS au moment du passage de relais. */ html.val-mediabox-image-opening.val-mediabox-caption-visible dialog.box_mediabox .lity-image-caption.expanded { opacity: 1 !important; } /* * Les commandes de groupe n'apparaissent pas avant que l'image ait fini son * trajet depuis la miniature. Comme pour la légende, la classe est déjà * présente sur avant leur création : aucun flash au premier affichage. * Ceci ne s'applique qu'à l'ouverture initiale, jamais à Next/Previous. */ html.val-mediabox-image-opening dialog.box_mediabox .lity-group-start-stop, html.val-mediabox-image-opening dialog.box_mediabox .lity-group-current { opacity: 0 !important; transition: opacity 160ms ease-out !important; } html.val-mediabox-image-opening.val-mediabox-controls-visible dialog.box_mediabox .lity-group-start-stop, html.val-mediabox-image-opening.val-mediabox-controls-visible dialog.box_mediabox .lity-group-current { opacity: 1 !important; } /* * Ouverture d'une image : le voile MediaBox n'apparaît plus d'un coup avant * le zoom. Il reste transparent pendant la préparation de la destination, * puis monte progressivement en même temps que la miniature s'agrandit. * Durée identique au fondu de fond de l'overlay vidéo VAL. */ html.val-mediabox-image-opening dialog.box_mediabox::before { opacity: 0 !important; transition: opacity 420ms ease-out !important; } html.val-mediabox-image-opening.val-mediabox-backdrop-visible dialog.box_mediabox::before { opacity: 1 !important; } /* * Fermeture animée vers la miniature : le clone VAL est le seul contenu * visuel. La figure Lity reste présente dans le layout et poursuit sa * fermeture native en arrière-plan ; cela supprime le double zoom-out visible * avec les PNG/WebP transparents sans modifier Lity lui-même. */ .val-mediabox-return-native-hidden .lity-image-figure { visibility: hidden !important; }