/* Panneau « Votre séjour » de la page Alouette et « Prix par nuit », passe luxe : ni carte, ni ombre, ni pastille. Un filet vertical borde le panneau,
   des filets fins séparent ses blocs, les dates et les prix sont en Fraunces, l'étiquette « Exemple » est le suffixe discret d'editorial.css.
   Le seul accent franc de la vue est le bouton principal ; le point des dates retenues est la marque de temps (DESIGN.md).
   Valeurs : tokens.css seulement. Spec : 05-SPEC-villa.md sections 5.2 et 5.3. */

.villa-sejour { display: flex; flex-direction: column; gap: var(--e5); padding-block-start: var(--e5); border-block-start: var(--filet-ed); }
.villa-sejour__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e3); }
.villa-sejour__note { margin-block-start: var(--e3); font-size: var(--t-micro); color: var(--sourdine); }
.exemple[hidden] { display: none; }

/* Chaque bloc après le titre est séparé par un filet ; le reste de la hauteur du panneau se répartit entre les blocs (jamais un seul grand vide) */
.villa-dates, .villa-resume, .villa-minimum { display: grid; flex: 1 1 auto; align-content: center; padding-block-start: var(--e5); border-block-start: var(--filet-ed); }
.villa-resume { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }

/* Arrivée et départ : point d'accent (marque de temps), libellé en capitales, valeur en Fraunces, aide en petit */
.villa-dates { gap: var(--e5); }
.villa-date { display: grid; grid-template-columns: var(--e2) minmax(0, 1fr); column-gap: var(--e3); }
.villa-date::before { content: ""; grid-row: 1 / span 2; margin-block-start: var(--e3); inline-size: var(--e2); block-size: var(--e2); border-radius: 50%; background: var(--cal-retenue-point); }
.villa-date--vide::before { display: none; }
.villa-date dt, .villa-date dd { grid-column: 2; }
.villa-date dt { font-size: var(--t-surtitre); font-weight: 600; letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--sourdine); }
.villa-date__valeur { display: block; margin-block-start: var(--e1); font-family: var(--police-titre); font-size: var(--t-sous-titre); font-weight: 500; line-height: var(--lh-sous-titre); text-wrap: balance; }
.villa-date__valeur--vide { font-family: var(--police-texte); font-size: var(--t-corps); font-weight: 400; color: var(--sourdine); }
.villa-date__aide { display: block; margin-block-start: var(--e1); font-size: var(--t-micro); color: var(--sourdine); }

/* Nuits en Fraunces, saison en petit dessous (hauteur réservée par le script : les deux se masquent ensemble) */
.villa-nuits { font-family: var(--police-titre); font-size: var(--t-sous-titre); font-weight: 500; line-height: var(--lh-sous-titre); }
.villa-saison { font-size: var(--t-micro); color: var(--sourdine); }
.villa-nuits[hidden], .villa-saison[hidden] { display: none; }

.villa-minimum { grid-template-columns: var(--icone-s) minmax(0, 1fr); gap: var(--e2); align-items: start; align-content: center; }
.villa-minimum svg { inline-size: var(--icone-s); block-size: var(--icone-s); margin-block-start: var(--e1); color: var(--info); }

/* Actions : le bouton principal est calé en bas du panneau */
.villa-actions { display: grid; gap: var(--e3); margin-block-start: auto; padding-block-start: var(--e5); border-block-start: var(--filet-ed); }
.villa-actions .btn { inline-size: 100%; min-block-size: var(--hauteur-bouton); }
.villa-actions .villa-sejour__note { margin-block: calc(-1 * var(--e1)) 0; text-align: center; }

/* ---- Prix par nuit : trois colonnes à filet, la saison des dates choisies porte un trait épais ET le libellé « Vos dates » ---- */
.villa-tarifs { display: grid; gap: var(--e5); }
.villa-tarifs__note { font-size: var(--t-micro); color: var(--sourdine); }
.villa-prix { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
.villa-prix__ligne { display: grid; align-content: start; gap: var(--e3); }
/* Le filet occupe toujours la hauteur de l'anneau : passer à 3 px ne déplace rien */
.villa-prix__filet { block-size: var(--anneau); }
.villa-prix__ligne--vos-dates .villa-prix__filet { border-block-start: var(--anneau) solid var(--dominante); }
.villa-prix__nom { display: grid; min-inline-size: 0; }
.villa-prix__libelle { font-weight: 600; }
.villa-prix__periode { font-size: var(--t-micro); color: var(--sourdine); }
.villa-prix__vos { font-size: var(--t-micro); font-weight: 600; color: var(--dominante); }
.villa-prix__vos[hidden] { display: none; }
.villa-prix__montant { display: grid; justify-items: start; }
.villa-prix__mention { font-size: var(--t-micro); color: var(--sourdine); }
.villa-prix__chiffre { display: flex; flex-wrap: wrap; align-items: baseline; font-family: var(--police-titre); font-size: var(--t-sous-titre); font-weight: 500; line-height: var(--lh-sous-titre); }

@media (min-width: 900px) {
  .villa-prix { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gouttiere-ed); }
  .villa-tarifs { grid-column: 1 / 9; grid-row: 2; }
  /* Le panneau couvre les deux rangées (calendrier puis prix) : filet vertical à son bord de début, boutons calés en bas au niveau des prix */
  .villa-sejour { grid-column: 9 / 13; grid-row: 1 / span 2; align-self: stretch; padding-block-start: 0; padding-inline-start: var(--e6); border-block-start: 0; border-inline-start: var(--filet-ed); }
}