/* =====================================================================
   PAGE GALERIE — styles dédiés (complète styles.css)
   ===================================================================== */

.gal-head { background: var(--blanc); text-align: center; padding: clamp(140px, 17vh, 200px) var(--pad-x) clamp(50px, 6vw, 80px); }
.gal-head .wrap { max-width: 820px; }
.gal-head .eyebrow { justify-content: center; margin-bottom: 24px; }
.gal-head .eyebrow::before { display: none; }
.gal-head h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom: 22px; }
.gal-head h1 em { font-style: italic; color: var(--accent); }
.gal-head p { color: var(--cedre-2); font-size: clamp(1.05rem, 1.4vw, 1.24rem); }

/* — Filtre catégories — */
.gal-body { background: var(--cream); }
.gal-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(34px, 4vw, 56px); }
.gal-chip {
  font-family: var(--font-sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cedre-2); background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: .7em 1.4em; cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.gal-chip:hover { border-color: var(--accent); color: var(--accent); }
.gal-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* — Grille mosaïque ergonomique — */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 220px);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.4vw, 18px);
}
.gal-item {
  position: relative; overflow: hidden; border-radius: 3px; cursor: zoom-in;
  background: var(--cream-2);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .45s, box-shadow .4s;
}
.gal-item image-slot { width: 100% !important; height: 100% !important; transition: transform .8s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.gal-item:hover { box-shadow: 0 28px 56px -30px rgba(44,31,14,.55); }
.gal-item:hover image-slot { transform: scale(1.07); }
.gal-item .ov {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: flex-end; padding: 18px;
  background: linear-gradient(0deg, rgba(20,14,6,.62), transparent 55%);
  opacity: 0; transition: opacity .4s;
}
.gal-item:hover .ov { opacity: 1; }
.gal-item .ov .cap { color: #fff; }
.gal-item .ov .cap .k { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in oklch, var(--or) 82%, #fff); }
.gal-item .ov .cap .t { font-family: var(--font-display); font-size: 1.2rem; margin-top: 3px; }
.gal-item .zoom {
  position: absolute; top: 14px; right: 14px; z-index: 3; pointer-events: none;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(254,250,244,.92); display: grid; place-items: center;
  opacity: 0; transform: scale(.8); transition: opacity .35s, transform .35s;
}
.gal-item:hover .zoom { opacity: 1; transform: scale(1); }
.gal-item .zoom svg { width: 17px; height: 17px; stroke: var(--accent); fill: none; }
.gal-item.hide { display: none; }

/* tailles mosaïque */
.gi-wide { grid-column: span 2; }
.gi-tall { grid-row: span 2; }
.gi-big { grid-column: span 2; grid-row: span 2; }

@media (max-width: 860px) {
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .gi-big { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gi-big, .gi-wide { grid-column: span 2; }
  .gi-big, .gi-tall { grid-row: span 2; }
}