/* Galerie de la villa Alouette en mise en page de magazine : huit photos, ordre du DOM gardé (l'ordre visuel suit l'ordre logique).
   Spec : 05-SPEC-villa.md section 4. Photos bord à bord (`.plein`) en téléphone ; sur grand écran, grandes et petites en alternance,
   deux respirations pleine largeur. Valeurs : tokens.css seulement. Jamais de légende ni de zoom (consigne du bloc 2). */

.villa-galerie { margin-block-start: var(--rythme-l); }
.villa-galerie__grille { row-gap: var(--rythme-s); align-items: start; }

.villa-photo .cadre::after { content: ""; position: absolute; inset: 0; background: var(--voile-photo); pointer-events: none; }
.villa-photo .cadre img { object-position: var(--villa-cadrage, 50% 50%); }
.villa-photo--piscine { --villa-cadrage: 50% 62%; }
.villa-photo--nuit { --villa-cadrage: 45% 50%; }
.villa-photo--salon { --villa-cadrage: 50% 55%; }
.villa-photo--bureau { --villa-cadrage: 50% 45%; }

/* Téléphone : une photo par ligne, bord à bord, 4 / 3 sauf la terrasse du couchant en portrait 4 / 5 */
@media (max-width: 899px) {
  .villa-photo .cadre { --ratio: 4 / 3; }
  .villa-photo--terrasse .cadre { --ratio: var(--ratio-portrait); }
}

@media (min-width: 900px) {
  /* Rangée 1 : grande photo saignée à gauche, petit portrait calé en bas de la grande */
  .villa-photo--piscine { grid-column: 1 / 8; grid-row: 1; margin-inline-end: 0; }
  .villa-photo--terrasse { grid-column: 10 / 13; grid-row: 1; align-self: end; margin-inline: 0; }
  /* Rangée 2 : respiration pleine largeur */
  .villa-photo--nuit { grid-row: 2; margin-block: calc(var(--rythme-m) - var(--rythme-s)); }
  /* Rangée 3 : grande photo saignée à gauche, petite en bas à droite, légèrement descendue */
  .villa-photo--salon { grid-column: 1 / 8; grid-row: 3; margin-inline-end: 0; }
  .villa-photo--salle { grid-column: 9 / 13; grid-row: 3; align-self: end; margin-inline: 0; position: relative; inset-block-start: var(--rythme-xs); }
  /* Rangée 4 : petite en haut à gauche, grande saignée à droite et descendue */
  .villa-photo--cuisine { grid-column: 1 / 5; grid-row: 4; margin-inline: 0; }
  .villa-photo--chambre { grid-column: 6 / 13; grid-row: 4; margin-inline-start: 0; position: relative; inset-block-start: var(--rythme-xs); }
  /* Rangée 5 : respiration pleine largeur, la baie et la mer */
  .villa-photo--bureau { grid-row: 5; margin-block: calc(var(--rythme-m) - var(--rythme-s)) 0; }
}