/* Inspiré de Two-Month Range Picker par cnippet-dev (21st.dev, https://21st.dev/@cnippet-dev/components/v-calendar-9), licence non indiquée. Réécriture vanilla, aucun code d'origine.
   Calendrier « deux mois, nuits comptées » de la page Alouette, passe luxe : posé sur le fond de page (ni carte, ni ombre, ni rayon), cases libres signalées
   par un filet bas, occupées hachurées, arrivée et départ en carrés pleins, plage en bande, refus, légende, messages, allumage.
   Valeurs : tokens.css seulement (jetons cal-*, durées, traits) ; les dérivés locaux --villa-* sont construits depuis des jetons. */

.villa-calendrier {
  --villa-pas: calc(var(--d-micro) / 18);
  --villa-sans: calc(0 * var(--d-micro));
  --villa-eteint: var(--opacite-eteint);
  --villa-dessous: var(--e1);
  position: relative;
}

/* Navigation de mois : 390 seulement, posée sur la ligne du titre du mois (outil : contour et rayon conservés) */
.villa-nav { display: none; position: relative; z-index: 1; justify-content: space-between; margin-block-end: calc(-1 * var(--cible)); pointer-events: none; }
.villa-nav__bouton {
  display: grid;
  place-items: center;
  inline-size: var(--cible);
  block-size: var(--cible);
  padding: 0;
  background: var(--fond);
  color: var(--dominante);
  border: var(--trait-champ) solid var(--dominante);
  border-radius: var(--rayon-m);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color var(--d-micro) linear;
}
.villa-nav__bouton:hover { background: var(--dominante-douce); }
.villa-nav__bouton[aria-disabled="true"] { background: var(--dominante-pale); color: var(--sourdine); cursor: default; }
.villa-nav__bouton svg { inline-size: calc(var(--icone-s) + var(--trait-fort)); block-size: calc(var(--icone-s) + var(--trait-fort)); }

/* Les deux mois : la même hauteur pour juillet (5 lignes) et août (6 lignes), réservée avant le script */
.villa-mois-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rythme-xs); }
.villa-mois { min-block-size: calc(var(--cible) + var(--e3) + var(--e5) + 6 * var(--champ-h)); }
.villa-mois[hidden] { display: none; }
.villa-table { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.villa-table caption {
  margin-block-end: var(--e3);
  border-block-end: var(--filet-ed);
  block-size: var(--cible);
  font-family: var(--police-titre);
  font-size: var(--t-sous-titre);
  font-weight: 500;
  line-height: var(--cible);
  text-align: start;
  color: var(--encre);
}
.villa-table th {
  block-size: var(--e5);
  padding: 0;
  font-size: var(--t-surtitre);
  font-weight: 600;
  letter-spacing: var(--ls-surtitre);
  text-transform: uppercase;
  color: var(--sourdine);
}
.villa-jour, .villa-vide { block-size: var(--champ-h); padding: 0; text-align: center; }

/* Case : le <td> porte la bande de la plage, le <button> de 44 px porte l'état. Chiffres tabulaires (Fraunces n'a pas tnum). */
.villa-jour button {
  position: relative;
  display: block;
  inline-size: calc(100% - var(--trait-fort));
  block-size: var(--cible);
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: var(--encre);
  border: 0;
  border-block-end: var(--trait) solid var(--cal-libre-bord);
  border-radius: 0;
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  font-variant-numeric: tabular-nums lining-nums;
  cursor: pointer;
  transition-property: opacity, background-color, color, border-color;
  transition-duration: var(--d-court), var(--d-micro), var(--d-micro), var(--d-micro);
  transition-timing-function: var(--ease-entree), linear, linear, linear;
  transition-delay: calc(var(--villa-rang, 0) * var(--villa-pas)), var(--villa-sans), var(--villa-sans), var(--villa-sans);
}
.villa-jour--libre button:hover { background: var(--cal-libre-survol); }

/* Occupée : fond pâle, chiffre en encre, bande hachurée en bas de case seulement. Cliquable seulement comme départ possible. */
.villa-jour--occupe button { background: var(--cal-occupe-fond); border-color: transparent; }
.villa-jour--occupe button::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: var(--hachure);
  background: repeating-linear-gradient(135deg, var(--cal-occupe-hachure) 0 var(--trait), transparent var(--trait) var(--e1));
}
.villa-jour--occupe button[aria-disabled="true"] { cursor: not-allowed; }

/* Arrivée et départ : carré plein outremer, texte blanc, point blanc sous le chiffre. Plage : bande douce, bords arrondis à chaque ligne. */
.villa-jour--arrivee, .villa-jour--depart, .villa-jour--plage { background: var(--cal-plage-fond); }
.villa-jour--arrivee button, .villa-jour--depart button { background: var(--cal-selection-fond); color: var(--cal-selection-texte); border-color: var(--cal-selection-fond); }
.villa-jour--arrivee button::before, .villa-jour--depart button::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: var(--e1);
  inline-size: var(--villa-dessous);
  block-size: var(--villa-dessous);
  border-radius: 50%;
  background: var(--cal-selection-point);
  translate: -50% 0;
}
.villa-jour--plage button { background: transparent; border-color: transparent; }
.villa-jour--plage button:hover { background: var(--dominante-pale); }
.villa-jour--bord-debut { border-start-start-radius: var(--rayon-s); border-end-start-radius: var(--rayon-s); }
.villa-jour--bord-fin { border-start-end-radius: var(--rayon-s); border-end-end-radius: var(--rayon-s); }

/* Refus : contour de 2 px couleur attention sur la case cliquée. État d'écran « selection » : anneau posé par classe, sans clavier. */
.villa-jour .villa-jour__bouton--refuse { border: var(--trait-fort) solid var(--attention); }
.villa-jour .villa-jour__bouton--focus-etat { outline: var(--anneau) solid var(--dominante); outline-offset: var(--anneau-decalage); }

/* Allumage : les cases libres montent à pleine opacité une à une (le rang est posé par le script) */
.villa-eteint .villa-jour--libre button { opacity: var(--villa-eteint); }

/* Légende, aide et erreur sous la grille : les échantillons reprennent les nouvelles cases */
.villa-legende { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-block-start: var(--e4); font-size: var(--t-micro); font-weight: 600; color: var(--sourdine); }
.villa-legende li { display: inline-flex; align-items: center; gap: var(--e2); }
.villa-echantillon { position: relative; flex: none; inline-size: var(--icone-m); block-size: var(--icone-m); overflow: hidden; }
.villa-echantillon--libre { border-block-end: var(--trait) solid var(--cal-libre-bord); }
.villa-echantillon--occupe { background: var(--cal-occupe-fond); }
.villa-echantillon--occupe::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: var(--e1); background: repeating-linear-gradient(135deg, var(--cal-occupe-hachure) 0 var(--trait), transparent var(--trait) var(--e1)); }
.villa-echantillon--selection { background: var(--cal-selection-fond); }
.villa-echantillon--selection::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: var(--e1); inline-size: var(--villa-dessous); block-size: var(--villa-dessous); border-radius: 50%; background: var(--cal-selection-point); translate: -50% 0; }

.villa-messages { min-block-size: var(--champ-h); margin-block-start: var(--e3); }
.villa-aide, .villa-erreur { display: flex; align-items: flex-start; gap: var(--e2); }
.villa-aide { color: var(--sourdine); }
.villa-erreur { color: var(--attention); font-weight: 600; }
.villa-aide[hidden], .villa-erreur[hidden] { display: none; }
.villa-aide svg, .villa-erreur svg { flex: none; inline-size: var(--icone-s); block-size: var(--icone-s); margin-block-start: var(--e1); }
.villa-sans-js { margin-block-start: var(--e3); color: var(--sourdine); }

@media (max-width: 759px) {
  .villa-nav { display: flex; }
  .villa-mois-liste { grid-template-columns: minmax(0, 1fr); }
  .villa-table caption { text-align: center; }
  .villa-table th { letter-spacing: var(--ls-micro); }
}

@media (prefers-reduced-motion: reduce) {
  .villa-jour button, .villa-nav__bouton { transition: none; }
  .villa-eteint .villa-jour--libre button { opacity: 1; }
}

@media (min-width: 900px) {
  .villa-calendrier { grid-column: 1 / 9; padding-inline-end: var(--e4); }
}