/* Les quatre villas : quatre chapitres de magazine, sans carte ni bordure ni ombre. Photo grande, texte aligné en bas de la photo,
   capacité en trois chiffres Fraunces séparés par un filet vertical. Spec : 05-SPEC-accueil.md section 4.
   Un chapitre est une grille de 12 colonnes pleine largeur (même trame que .ed) : les colonnes se lisent depuis la droite en hébreu. */

.grille-villas { grid-column: 1 / -1; display: grid; row-gap: var(--rythme-m); }

.carte--lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--gouttiere-ed);
  margin-inline: calc(-1 * var(--ed-marge-eff));
  padding-inline: var(--ed-marge-eff);
}

/* Photo : le cadre réserve la place, le voile uniforme de 8 % est posé par-dessus */
.carte__photo { margin-block-end: var(--e5); }
.carte__photo .cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--voile-photo);
  pointer-events: none;
}
/* Téléphone : photo bord à bord, ratio du chapitre ; le point de visée garde la villa dans le recadrage vertical */
@media (max-width: 899px) { .carte--lien .cadre { --ratio: var(--ratio-chapitre); } }
.villa--alouette .cadre img { object-position: 64% 30%; }
.villa--hirondelle .cadre img { object-position: 42% 50%; }

.carte__corps { display: grid; gap: var(--e6); }
.carte__tete { display: grid; gap: var(--e3); align-content: start; }
.carte__rang {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0;
  color: var(--dominante);
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: var(--ls-surtitre);
}
.carte__faits { display: grid; gap: var(--e5); justify-items: start; align-content: start; }

/* Capacité : un chiffre Fraunces, son unité en capitales espacées dessous, un filet fin entre les trois */
.capacite { display: flex; flex-wrap: wrap; row-gap: var(--e4); margin: 0; }
.capacite > span {
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding-inline: var(--e4);
  border-inline-start: var(--filet-ed);
}
.capacite > span:first-child { padding-inline-start: 0; border-inline-start: 0; }
.capacite .chiffre {
  font-family: var(--police-titre);
  font-size: var(--t-chiffre);
  font-weight: 500;
  line-height: var(--lh-affiche);
  letter-spacing: var(--ls-titre);
}
.capacite .unite {
  color: var(--sourdine);
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: var(--ls-surtitre);
  text-transform: uppercase;
}
html[lang="he"] .capacite .unite { text-transform: none; }

@media (min-width: 900px) {
  .carte--lien { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .carte__photo { margin-block-end: 0; }

  /* 01 Tourterelle : photo verticale sur cinq colonnes, texte en face, aligné sur le bas de la photo */
  .villa--tourterelle .carte__photo { grid-column: 2 / 7; margin-inline: 0; }
  .villa--tourterelle .carte__corps { grid-column: 8 / 13; align-self: end; }

  /* 02 Alouette : photo de toute la largeur, le texte dessous en deux blocs (nom à gauche, chiffres à droite) */
  .villa--alouette .carte__photo { grid-column: 1 / -1; }
  .villa--alouette .carte__corps { display: contents; }
  .villa--alouette .carte__tete { grid-column: 1 / 7; grid-row: 2; align-self: end; margin-block-start: var(--e7); }
  .villa--alouette .carte__faits { grid-column: 8 / 13; grid-row: 2; align-self: end; margin-block-start: var(--e7); }

  /* 03 Hirondelle : photo saignée du côté de la fin, texte au début */
  .villa--hirondelle .carte__photo { grid-column: 6 / 13; margin-inline-start: 0; }
  .villa--hirondelle .carte__corps { grid-column: 1 / 6; grid-row: 1; align-self: end; }

  /* 04 Perdrix : photo saignée du côté du début, texte étroit en face */
  .villa--perdrix .carte__photo { grid-column: 1 / 9; margin-inline-end: 0; }
  .villa--perdrix .carte__corps { grid-column: 9 / 13; align-self: end; }
}
@media (max-width: 899px) { .capacite > span { padding-inline: var(--e3); } }