/* Page Villa Alouette, passe luxe : tête de page, capacités, tête et grille de la section Disponibilités.
   Spec : 05-SPEC-villa.md sections 2, 3 et 5. Valeurs : tokens.css seulement. La galerie est dans villa-galerie.css, le calendrier dans
   villa-calendrier.css, le panneau du séjour et les prix dans villa-sejour.css, « La villa » dans villa-presentation.css.
   Les classes de la grille (.ed, .rang, .filet, .surtitre, .nom-ed, .titre-ed, .lien-ed) viennent d'editorial.css. */

/* ---- Tête de page : retour, filet, surtitre, nom très grand, phrase, lien vers les dates ---- */
.villa-tete { padding-block-start: var(--rythme-m); }
.villa-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  justify-self: start;
  min-block-size: var(--cible);
  color: var(--dominante);
  font-size: var(--t-micro);
  font-weight: 600;
  text-decoration: none;
}
.villa-retour::before {
  content: "";
  flex: none;
  inline-size: var(--e2);
  block-size: var(--e2);
  border-block-end: var(--trait-champ) solid currentColor;
  border-inline-start: var(--trait-champ) solid currentColor;
  transform: rotate(45deg);
}
.villa-retour:hover { text-decoration: underline; }
.villa-tete__filet { margin-block-start: var(--e5); }
/* Le picto passe avant le trait du surtitre ; la couleur reste la dominante, jamais l'accent */
.villa-surtitre { margin-block-start: var(--e6); }
.villa-surtitre .picto { order: -1; }
.villa-nom { margin-block-start: var(--e4); }
.villa-phrase { margin-block-start: var(--e4); color: var(--sourdine); }
.villa-voir { justify-self: start; margin-block-start: var(--e4); }

/* ---- Capacités : quatre grands chiffres séparés par un filet vertical, le libellé reste le terme de la liste de définitions ---- */
.villa-capacites { margin-block-start: var(--rythme-m); }
.villa-capacite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.villa-capacite > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--e3);
  padding-block: var(--e5);
  padding-inline: var(--e4);
  border-inline-start: var(--filet-ed);
}
.villa-capacite > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
.villa-capacite > div:nth-child(n + 3) { border-block-start: var(--filet-ed); }
.villa-capacite dd {
  font-family: var(--police-titre);
  font-size: var(--t-affiche);
  font-weight: 500;
  line-height: var(--lh-affiche);
  letter-spacing: var(--ls-affiche);
}
.villa-capacite .unite { font-size: var(--t-sous-titre); letter-spacing: 0; color: var(--sourdine); }
.villa-capacite dt {
  color: var(--sourdine);
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: var(--ls-surtitre);
  text-transform: uppercase;
}

/* ---- Disponibilités : tête (titre, badge, introduction) et grille calendrier, séjour, prix ---- */
.villa-dispo { margin-block-start: var(--rythme-l); scroll-margin-block-start: var(--e4); }
.villa-dispo__titre { margin-block-start: var(--e6); }
.villa-dispo__badge { justify-self: start; margin-block-start: var(--e4); }
.villa-dispo__intro { margin-block-start: var(--e4); color: var(--sourdine); }
.villa-dispo__grille { margin-block-start: var(--rythme-s); row-gap: var(--rythme-s); align-items: start; }

@media (min-width: 900px) {
  .villa-retour { grid-column: 1 / 5; }
  .villa-surtitre { grid-column: 1 / 9; }
  .villa-nom { grid-column: 1 / 10; grid-row: 4; }
  .villa-phrase { grid-column: 1 / 6; grid-row: 5; }
  .villa-voir { grid-column: 10 / 13; grid-row: 4; align-self: end; margin-block-start: 0; }

  .villa-capacite { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .villa-capacite > div:nth-child(odd) { padding-inline-start: var(--e4); border-inline-start: var(--filet-ed); }
  .villa-capacite > div:nth-child(n + 3) { border-block-start: 0; }
  .villa-capacite > div:first-child { padding-inline-start: 0; border-inline-start: 0; }

  .villa-dispo__titre { grid-column: 1 / 9; grid-row: 2; }
  .villa-dispo__badge { grid-column: 10 / 13; grid-row: 2; align-self: end; margin-block-start: 0; }
  .villa-dispo__intro { grid-column: 1 / 9; }
}