/* ============================================
   DEMO.CSS — Styles & correctifs dédiés au Showroom
   Dréa Digital · dreadigital.fr
   ============================================ */

/* ─────────────────────────────────────────────
   LIGHTBOX — FIX MOBILE
   Problème : width:1000px dans main.css force
   un ratio paysage sur toutes les images, même
   les carrées (400×400). Quand max-width:90vw
   réduit la largeur sur mobile sans recalculer
   la hauteur, l'image s'écrase.
   Fix : width:auto + les deux max en même temps
   → le navigateur choisit le facteur limitant
   et maintient le ratio natif de chaque image.
───────────────────────────────────────────── */
.lightbox__img--sized {
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;   /* filet de sécurité */
}

/* Bouton fermeture plus accessible sur mobile */
@media (max-width: 768px) {
    .lightbox__img--sized {
        max-width: 96vw;
        max-height: 82vh;
    }

    .lightbox__close {
        top: 12px;
        right: 16px;
        font-size: 32px;
        line-height: 1;
        padding: 4px 8px;  /* zone de tap plus grande */
    }
}