/* La visionneuse d'images (MSG-08 bis, retour d'Axel du 23/09/2026 — RM-224) : une modale Bootstrap
   unique, scène sombre et STABLE — sa hauteur ne dépend pas de l'image (85 vh sur bureau, plein écran
   sous 768 px par `modal-fullscreen-md-down`, comme Poulpit), l'image se pose dedans en `contain`.
   Jetons seulement : la scène est le secondaire de la marque poussé vers le noir. */
.media-viewer .modal-content { background: color-mix(in srgb, var(--brand-secondary) 45%, black); color: var(--brand-on-dark); border: 0; }
@media (min-width: 768px) {
    .media-viewer .modal-dialog { max-width: min(1040px, 94vw); }
    .media-viewer .modal-content { height: 85vh; border-radius: var(--brand-radius-card); overflow: hidden; }
}
.media-viewer .modal-header { gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid color-mix(in srgb, var(--brand-on-dark) 14%, transparent); }
.media-viewer .modal-title { flex: 1; min-width: 0; margin: 0; font-family: var(--brand-font-body); font-size: .82rem; font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-viewer-count { font-size: .74rem; color: var(--brand-on-dark-muted); white-space: nowrap; }
.media-viewer-download { color: var(--brand-on-dark); border: 1px solid color-mix(in srgb, var(--brand-on-dark) 40%, transparent); border-radius: var(--brand-radius-pill); white-space: nowrap; }
.media-viewer-download:hover, .media-viewer-download:focus-visible { color: var(--brand-on-dark); background: color-mix(in srgb, var(--brand-on-dark) 16%, transparent); }
.media-viewer .btn-close { margin: 0; }
/* La scène : l'image centrée, les flèches par-dessus. */
.media-viewer .modal-body { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; padding: .75rem; overflow: hidden; }
.media-viewer-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
/* Les flèches : un fond sombre de la marque et un liseré clair — elles se voient aussi sur une photo à fond blanc qui
   remplit la scène (retour d'Axel du 29/09, AJUST-21 : la flèche disparaissait sur les photos de produits). */
.media-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--brand-on-dark) 45%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--brand-secondary) 72%, transparent); color: var(--brand-on-dark); font-size: 1.7rem; line-height: 1; padding: 0 0 .2rem; cursor: pointer; }
.media-viewer-nav:hover, .media-viewer-nav:focus-visible { background: color-mix(in srgb, var(--brand-secondary) 90%, transparent); }
/* Au doigt (un écran tactile sans survol : téléphone, tablette), pas de flèches — on glisse, et la photo garde ses bords
   (recette d'Axel du 29/09, #956) ; la souris les garde, même dans une fenêtre étroite. */
@media (hover: none) and (pointer: coarse) {
    .media-viewer-nav { display: none; }
}
.media-viewer-prev { left: .75rem; }
.media-viewer-next { right: .75rem; }
/* L'entrée de l'image : un fondu à l'ouverture, un glissement dans le sens du geste ensuite. */
@keyframes media-viewer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes media-viewer-next { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes media-viewer-prev { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.media-viewer-media.is-in { animation: media-viewer-in .18s ease; }
.media-viewer-media.is-next { animation: media-viewer-next .18s ease; }
.media-viewer-media.is-prev { animation: media-viewer-prev .18s ease; }
@media (prefers-reduced-motion: reduce) {
    .media-viewer-media.is-in, .media-viewer-media.is-next, .media-viewer-media.is-prev { animation: none; }
}
/* Le zoom (AJUST-21, retour #953) : media_viewer.js pose --zoom-scale / --zoom-x / --zoom-y sur l'image. La scène garde
   les gestes pour elle (ni zoom de page ni défilement sous les doigts) ; un geste en cours suit le doigt sans retard,
   un double toucher ou un clic glisse en douceur. */
.media-viewer .modal-body { touch-action: none; }
.media-viewer-media { transform: translate(var(--zoom-x, 0px), var(--zoom-y, 0px)) scale(var(--zoom-scale, 1)); transition: transform .2s ease; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.media-viewer.is-zoomed .media-viewer-media { cursor: grab; }
.media-viewer .is-gesturing .media-viewer-media { transition: none; }
.media-viewer.is-zoomed .is-gesturing .media-viewer-media { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) {
    .media-viewer-media { transition: none; }
}
/* L'app installée sur iPhone : la visionneuse plein écran s'arrête sous la bande de l'heure, sa croix se touche (#933). */
@media (max-width: 767.98px) {
    .media-viewer .modal-content { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
}