/* 20/10/2026 — Calendrier de disponibilité (fiche produit).
   Mobile d'abord : un seul mois, cibles tactiles 44px, aucune dépendance. */

.cy-field-row--replaced { display: none; }

.cy-cal {
  --cy-cal-free: #0f766e;
  --cy-cal-full: #cbd5e1;
  --cy-cal-low: #d97706;
  margin: 0 0 1rem;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  padding: .75rem;
  /* La carte de reservation est une colonne etroite en desktop : rien ne doit
     deborder, le nombre de mois est decide sur la largeur du CONTENEUR. */
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

/* ---- Les deux champs (retrait → retour) ---- */
.cy-cal__fields {
  display: flex;
  align-items: stretch;
  gap: .4rem;
  margin-bottom: .6rem;
}
.cy-cal__field {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: .45rem .6rem;
  border: 1.5px solid rgba(15, 23, 42, .14);
  border-radius: 12px;
  background: #f8fafc;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.cy-cal__field.is-active { border-color: var(--cy-cal-free); background: #fff; box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.cy-cal__field:focus-visible { outline: 2px solid var(--cy-cal-free); outline-offset: 2px; }
.cy-cal__k { color: #0f172a; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .62; }
.cy-cal__v { color: #0f172a; font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy-cal__field:not(.is-set) .cy-cal__v { font-weight: 500; opacity: .5; }
.cy-cal__sep { align-self: center; opacity: .4; font-size: .9rem; }

/* ---- Navigation ---- */
.cy-cal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .25rem;
}
.cy-cal__months { font-weight: 650; font-size: .95rem; color: #0f172a; text-align: center; flex: 1 1 auto; }
.cy-cal__arrow {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  color: #0f172a;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 50%;
  background: #fff;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  color: inherit;
}
.cy-cal__arrow:disabled { opacity: .3; cursor: default; }
.cy-cal__arrow:not(:disabled):hover { background: #f1f5f9; }

/* ---- Grille ---- */
.cy-cal__grids { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cy-cal__grids.is-double { grid-template-columns: 1fr 1fr; }
.cy-cal__mtitle { margin: 0 0 .3rem; font-size: .85rem; font-weight: 600; opacity: .7; text-align: center; }
.cy-cal__dow, .cy-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cy-cal__dow { margin-bottom: .2rem; }
.cy-cal__dow span { color: #0f172a; text-align: center; font-size: .72rem; font-weight: 600; opacity: .5; padding: .2rem 0; }
.cy-cal__grid { gap: 2px; }

.cy-cal__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.cy-cal__cell.is-pad { pointer-events: none; }
.cy-cal__cell.is-free { background: rgba(15, 118, 110, .08); color: #0f172a; font-weight: 550; }
.cy-cal__cell.is-free:hover { background: rgba(15, 118, 110, .2); }
.cy-cal__cell.is-full,
.cy-cal__cell.is-out { color: #94a3b8; cursor: default; background: transparent; }
.cy-cal__cell.is-full span { text-decoration: line-through; text-decoration-thickness: 1px; }
.cy-cal__cell.is-in,
.cy-cal__cell.is-preview { background: rgba(15, 118, 110, .16); border-radius: 0; }
.cy-cal__cell.is-start, .cy-cal__cell.is-end {
  background: var(--cy-cal-free); color: #fff; font-weight: 700;
}
.cy-cal__cell.is-start { border-radius: 10px 0 0 10px; }
.cy-cal__cell.is-end { border-radius: 0 10px 10px 0; }
.cy-cal__cell.is-start.is-end { border-radius: 10px; }
.cy-cal__cell:focus-visible { outline: 2px solid #0f766e; outline-offset: -2px; z-index: 1; }
.cy-cal__dot {
  position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--cy-cal-low);
}
.cy-cal__cell.is-start .cy-cal__dot, .cy-cal__cell.is-end .cy-cal__dot { background: #fff; }

/* ---- Pied ---- */
.cy-cal__hint { margin: .6rem 0 .35rem; font-size: .85rem; min-height: 1.2em; color: #0f172a; }
.cy-cal__legend {
  display: flex; flex-wrap: wrap; gap: .25rem .9rem;
  margin: 0; padding: 0; list-style: none;
  font-size: .75rem;
}
.cy-cal__legend li { display: flex; align-items: center; gap: .3rem; color: #0f172a; opacity: .78; }
.cy-cal__legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cy-cal__legend .is-free { background: rgba(15, 118, 110, .45); }
.cy-cal__legend .is-low { background: var(--cy-cal-low); }
.cy-cal__legend .is-full { background: #94a3b8; }
.cy-cal__reset {
  margin-top: .5rem; padding: .35rem 0;
  border: 0; background: none; font: inherit; font-size: .82rem;
  text-decoration: underline; cursor: pointer; opacity: .7; color: #0f172a;
}

@media (prefers-reduced-motion: reduce) {
  .cy-cal__field { transition: none; }
}