/* =========================================================
   Grille de la galerie : PARTAGÉE entre la page publique et l'aperçu du dashboard.
   Elle s'adapte à la largeur de son conteneur (container query), pas de l'écran :
   dans le dashboard, réduire l'aperçu à la taille d'un téléphone montre exactement le rendu mobile.
   Tailles : s = 1×1, wide = 2×1, tall = 1×2, big = 2×2 (colonnes × lignes)
   ========================================================= */
.gal-wrap { container-type: inline-size; width: 100%; }
.gal-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(130px, 19cqw, 290px);
    grid-auto-flow: dense; /* comble les trous automatiquement */
    gap: clamp(8px, 1.2cqw, 14px);
}
.gal-grid > li { position: relative; min-width: 0; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, .15); }
.gal-grid > li.wide { grid-column: span 2; }
.gal-grid > li.tall { grid-row: span 2; }
.gal-grid > li.big { grid-column: span 2; grid-row: span 2; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

@container (max-width: 640px) {
    .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44cqw; gap: 8px; }
    .gal-grid > li { border-radius: 12px; }
}