/* Page Réalisations */

/* Introduction de la galerie */
.real-intro { --gap: 24px clamp(40px, 6vw, 88px); align-items: end; margin-bottom: 48px; }
@media (min-width: 769px) {
  .real-h2 { font-size: 44px; line-height: 1.06; }
}
.real-intro__text { margin: 0; font: 400 17px/1.7 var(--font-body); color: var(--muted); }
.real-intro__text strong { font-weight: 700; color: var(--ink); }

.real-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 16px 0; margin-bottom: 24px; border-top: 1px solid var(--line);
  font: 600 14px/1 var(--font-body); color: var(--muted);
}

/* Mosaïque : une photo haute (2 rangées) toutes les trois vignettes */
.real-grid {
  --row: 252px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--row); grid-auto-flow: dense; gap: 16px;
}
.real-item--tall { grid-row: span 2; }

.real-item__link {
  position: relative; display: block; height: 100%;
  border-radius: 14px; overflow: hidden; background: var(--line); cursor: zoom-in;
}
.real-item__link img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.real-item__link:hover img,
.real-item__link:focus-visible img { transform: scale(1.05); }

.real-item__zoom {
  position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--brand);
  font: 400 20px/1 var(--font-body); transition: background .3s, color .3s;
}
.real-item__link:hover .real-item__zoom,
.real-item__link:focus-visible .real-item__zoom { background: var(--brand); color: #fff; }

@media (max-width: 1100px) {
  .real-grid { --row: 220px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .real-grid { --row: 150px; gap: 10px; }
  .real-item__link { border-radius: 10px; }
  .real-item__zoom { right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 8px; font-size: 17px; }
}