/*
 * Calendrier des disponibilités — grille de mois toujours COMPLÈTE.
 * À charger APRÈS flex_cal.css. Remplace les anciennes règles « .month-1 … .month-12 »
 * par des requêtes de conteneur : le nombre de colonnes dépend de la largeur réellement
 * disponible (et non plus de l'orientation de l'écran), et on n'affiche que des lignes
 * pleines : 6+6, 5+5, 4+4, 3+3, 2+2, ou 1 mois.
 */

/* 100vw compte la barre de défilement : la page débordait et se décalait à gauche */
body#calPerso { width: 100%; }

/* La zone du calendrier prend toute la largeur (sinon elle se réduit à la taille de son contenu) */
body#calPerso > main {
  box-sizing: border-box;
  width: 100%;
}

#DisponibiliteEtTarifs {
  box-sizing: border-box;
  width: calc(100% - 20px);
  max-width: 1900px;
  margin-left: auto;
  margin-right: auto;
}

#full-calendrier {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* La largeur de cette zone décide de la grille */
#cal-central {
  container-type: inline-size;
  container-name: calendrier;
  min-width: 0;
}

.calendar-container {
  --cal-mois: 230px;
  --cal-colonnes: 1;
  display: grid;
  grid-template-columns: repeat(var(--cal-colonnes), var(--cal-mois));
  justify-content: center;
  align-content: start;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
}

.calendar-container .month-block {
  display: none;
  box-sizing: border-box;
  width: var(--cal-mois);
  min-width: 0;
  height: var(--cal-mois);
  min-height: 0;
  margin: 0;
}

/* 1 mois (téléphone) */
.calendar-container .month-1 { display: flex; }

/* 2 colonnes : 4 mois */
@container calendrier (min-width: 510px) {
  .calendar-container { --cal-colonnes: 2; }
  .calendar-container :is(.month-2, .month-3, .month-4) { display: flex; }
}

/* 3 colonnes : 6 mois */
@container calendrier (min-width: 760px) {
  .calendar-container { --cal-colonnes: 3; }
  .calendar-container :is(.month-5, .month-6) { display: flex; }
}

/* 4 colonnes : 8 mois */
@container calendrier (min-width: 990px) {
  .calendar-container { --cal-colonnes: 4; }
  .calendar-container :is(.month-7, .month-8) { display: flex; }
}

/* 5 colonnes : 10 mois */
@container calendrier (min-width: 1220px) {
  .calendar-container { --cal-colonnes: 5; }
  .calendar-container :is(.month-9, .month-10) { display: flex; }
}

/* 6 colonnes : 12 mois */
@container calendrier (min-width: 1450px) {
  .calendar-container { --cal-colonnes: 6; }
  .calendar-container :is(.month-11, .month-12) { display: flex; }
}

/* Très grands écrans : mois plus grands */
@container calendrier (min-width: 1700px) {
  .calendar-container { --cal-mois: 270px; }
}

/* Le sous-titre s'aligne sur le cadre du calendrier */
body#calPerso > main > .sstitre {
  box-sizing: border-box;
  width: calc(100% - 20px);
  max-width: 1900px;
  margin-left: auto;
  margin-right: auto;
}