#galerie { background: var(--cream); }
.galerie-intro { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
.galerie-intro h2 { margin-bottom: 1rem; }
.galerie-intro p { color: var(--ink-soft); }
/* Grille uniforme : chaque carte a le même format portrait, ce qui garantit
   assez de place pour le texte au dos (même pour les photos paysage). */
.galerie-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.galerie-grid figure {
  position: relative; cursor: pointer;
  aspect-ratio: 4 / 5;
  perspective: 1200px; background: transparent;
}
.flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(.3,.7,.3,1);
  border-radius: var(--radius);
}
figure.flipped .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 4px 18px var(--shadow);
  border: 1px solid rgba(238,154,28,0.18);
}
.flip-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pastille « retourner » visible dès le départ */
.flip-hint {
  position: absolute; right: 0.7rem; bottom: 0.7rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(247, 239, 219, 0.92); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(45, 42, 36, 0.28);
  transition: transform 0.4s, background 0.3s;
}
.flip-hint svg { width: 1.05rem; height: 1.05rem; }
.galerie-grid figure:hover .flip-hint,
.galerie-grid figure:focus-visible .flip-hint { transform: rotate(-90deg); background: var(--cream); }
.flip-back {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.4rem; text-align: center;
  background-color: var(--green); color: var(--cream-soft);
  background-image: var(--noise), radial-gradient(circle at 28% 20%, rgba(255,248,230,0.25), transparent 58%);
  background-blend-mode: soft-light, soft-light;
}
.galerie-grid figure:nth-child(3n+2) .flip-back { background-color: var(--wine); }
.galerie-grid figure:nth-child(3n)   .flip-back { background-color: var(--orange-deep); }
.flip-back h3 { color: var(--cream); font-style: italic; margin-bottom: 0.6rem; font-size: clamp(1rem, 2.6vw, 1.25rem); }
.flip-back p { color: rgba(251, 246, 233, 0.92); font-size: clamp(0.8rem, 2.1vw, 0.92rem); line-height: 1.5; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
}