/* galerie.css — styles spécifiques (design system commun dans base.css) */
.galerie-hero { background: var(--sla-dark); padding: 3.5rem 3rem; color: white; }
.galerie-hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 56px; text-transform: uppercase; line-height: 1; margin-bottom: 0.5rem; }
.galerie-hero p { font-size: 17px; opacity: 0.85; max-width: 760px; line-height: 1.6; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-item { margin: 0; border-radius: 12px; overflow: hidden; position: relative; background: var(--sla-dark); }
.gallery-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform 0.3s; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; color: white; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); }
@media (max-width: 860px) { .galerie-hero { padding: 2.5rem 1.25rem; } .galerie-hero h1 { font-size: 40px; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { grid-template-columns: 1fr; } }