/* =============================================================================
   Le calendrier de période : deux dates qui se choisissent ensemble.

   La mécanique est dans javascript/calendrier.js, qui décrit aussi le balisage.
   Ici, la façon dont il se voit :

     • le CHAMP a l'air d'un champ de la charte (.input) et dit ce qui est
       choisi — « Du 2 mars au 28 août 2027 », ou ce qu'il attend ;
     • la BOÎTE s'ouvre dessous, dans le flux quand l'écran est étroit : une
       surcouche flottante serait coupée par le défilement d'un formulaire ;
     • les jours entre le début et la fin forment une BANDE continue : le
       remplissage est carré au milieu, arrondi aux deux bouts, et les deux
       bornes prennent l'accent plein. C'est ce qui fait lire une période
       plutôt que deux dates ;
     • rien ne se valide tout seul : le bouton du bas ferme, et lui seul.

   Les deux mois côte à côte dès qu'il y a la place — on choisit souvent une
   période à cheval sur deux mois, et retourner la page pour voir la fin fait
   perdre le début de vue.
   ============================================================================= */

.calendrier {
  position: relative;
  display: grid;
  gap: .35rem;
}

/* ---------- le champ ------------------------------------------------------- */

.calendrier__champ {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .62rem .8rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color var(--dur) var(--ease);
}

.calendrier__champ:hover {
  border-color: var(--text-3);
}

.calendrier__champ[aria-expanded="true"] {
  border-color: var(--accent);
}

.calendrier__champ svg {
  flex: none;
  color: var(--text-3);
}

/* Ce qui n'est pas encore choisi se lit comme un texte d'attente, pas comme une
   valeur. */
.calendrier__dit--vide {
  color: var(--text-3);
}

/* ---------- la boîte ------------------------------------------------------- */

.calendrier__boite {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  padding: .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
}

.calendrier__boite[hidden] {
  display: none;
}

/* Sur un écran étroit, la boîte prend la largeur du champ et pousse ce qui
   suit : flottante, elle sortait de l'écran par la droite. */
@media (max-width: 560px) {
  .calendrier__boite {
    position: static;
    width: 100%;
  }
}

.calendrier__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}

.calendrier__fleche {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.calendrier__fleche:hover:not([disabled]) {
  border-color: var(--line-strong);
  color: var(--text);
}

.calendrier__fleche[disabled] {
  opacity: .38;
  cursor: default;
}

.calendrier__mois {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin: 0;
  font-size: .9rem;
  font-weight: 650;
  color: var(--text);
  text-align: center;
}

.calendrier__grilles {
  display: flex;
  gap: 1.4rem;
}

.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 2.1rem);
  gap: 2px;
}

.calendrier__jourlab {
  display: grid;
  place-items: center;
  height: 1.6rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-3);
}

/* ---------- les jours ------------------------------------------------------ */

.calendrier__jour {
  position: relative;
  display: grid;
  place-items: center;
  height: 2.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  border-radius: var(--r-control);
}

.calendrier__jour:hover:not([disabled]):not(.est-borne) {
  background: var(--surface-2);
}

.calendrier__jour[disabled] {
  color: var(--text-3);
  opacity: .45;
  cursor: default;
}

.calendrier__jour--vide {
  visibility: hidden;
}

/* Aujourd'hui : un point sous le chiffre, qui ne se confond avec aucune
   sélection. */
.calendrier__jour.est-aujourdhui::after {
  content: "";
  position: absolute;
  bottom: .22rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-3);
}

/* La bande : carrée au milieu pour que les jours se touchent, et ce sont les
   bornes qui l'arrondissent. Les deux pixels d'écart entre cases sont
   rattrapés par une ombre latérale, sinon la bande se lirait en pointillé. */
.calendrier__jour.est-dedans {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 0;
  box-shadow: -2px 0 0 var(--accent-soft), 2px 0 0 var(--accent-soft);
}

.calendrier__jour.est-borne {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
}

.calendrier__jour.est-borne.est-aujourdhui::after {
  background: var(--on-accent);
}

.calendrier__jour.est-debut {
  border-radius: var(--r-control) 0 0 var(--r-control);
  box-shadow: 2px 0 0 var(--accent-soft);
}

.calendrier__jour.est-fin {
  border-radius: 0 var(--r-control) var(--r-control) 0;
  box-shadow: -2px 0 0 var(--accent-soft);
}

/* Une seule date choisie, ou le début et la fin le même jour : la pilule est
   ronde des deux côtés et ne traîne aucune bande. */
.calendrier__jour.est-debut.est-fin,
.calendrier__jour.est-seule {
  border-radius: var(--r-control);
  box-shadow: none;
}

.calendrier__jour:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ---------- le pied -------------------------------------------------------- */

.calendrier__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}

/* Ce qu'on a choisi, écrit : on valide ce qu'on lit, pas ce qu'on croit avoir
   cliqué. */
.calendrier__resume {
  margin: 0;
  font-size: .82rem;
  color: var(--text-2);
}

.calendrier__resume b {
  color: var(--text);
  font-weight: 620;
}

.calendrier__gestes {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .calendrier__champ,
  .calendrier__fleche {
    transition: none;
  }
}