/* Calendrier de réservation directe (page book.html) */
.calendrier {
  --cal-fond: #ffffff;
  --cal-encre: #1f2620;
  --cal-texte: #5f6660;
  --cal-sapin: #2c332d;
  --cal-sauge: #d5dccc;
  --cal-sauge-clair: #ebefe5;
  --cal-trait: #e2e6dc;
  --cal-eteint: #b6bcb3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
  font-size: 15px;
  color: var(--cal-texte);
}
@media (max-width: 991.98px) { .calendrier { grid-template-columns: minmax(0, 1fr); } }
.calendrier [hidden] { display: none !important; }
.calendrier button { font-family: inherit; }

.cal { background: var(--cal-fond); border: 1px solid var(--cal-trait); border-radius: 12px; padding: 20px; min-width: 0; }
.cal-tete { display: flex; justify-content: space-between; margin-bottom: 8px; }
.cal-nav { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--cal-trait); background: var(--cal-fond); color: var(--cal-encre); display: grid; place-items: center; cursor: pointer; padding: 0; }
.cal-nav:hover:not(:disabled) { background: var(--cal-sauge-clair); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-nav svg { width: 16px; height: 16px; }
.cal-mois-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 720px) { .cal-mois-grille { grid-template-columns: minmax(0, 1fr); } }
.cal-mois h3 { font-family: "Roboto", sans-serif; font-size: 14px; font-weight: 500; color: var(--cal-encre); text-align: center; margin: -36px 0 14px; height: 36px; line-height: 36px; text-transform: capitalize; pointer-events: none; }
.cal-jours-sem, .cal-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-jours-sem span { font-size: 12px; text-align: center; color: var(--cal-texte); padding-bottom: 6px; font-weight: 500; }
.cal-cellule { position: relative; height: 44px; padding: 2px 0; background-clip: content-box !important; display: grid; place-items: center; }
.cal-cellule.plage { background: var(--cal-sauge); }
.cal-cellule.plage-debut { background: linear-gradient(to right, transparent 50%, var(--cal-sauge) 50%); }
.cal-cellule.plage-fin { background: linear-gradient(to left, transparent 50%, var(--cal-sauge) 50%); }
.cal-cellule.apercu { background: var(--cal-sauge-clair); }
.cal-cellule.apercu.plage-debut { background: linear-gradient(to right, transparent 50%, var(--cal-sauge-clair) 50%); }
.cal-cellule.apercu-fin { background: linear-gradient(to left, transparent 50%, var(--cal-sauge-clair) 50%); }
.cal-vide { height: 44px; }
.cal-jour { width: 40px; height: 40px; border-radius: 8px; border: 0; padding: 0; background: transparent; color: var(--cal-encre); font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; transition: background-color .12s ease, color .12s ease; }
.cal-jour:hover:not([aria-disabled="true"]) { background: var(--cal-sauge-clair); }
.cal-jour:focus-visible { outline: 2px solid var(--cal-sapin); outline-offset: 2px; }
.cal-jour.aujourdhui::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.cal-jour[aria-disabled="true"] { color: var(--cal-eteint); cursor: not-allowed; }
.cal-jour.reserve { text-decoration: line-through; }
.cal-jour.depart-possible { color: var(--cal-encre); cursor: pointer; text-decoration: none; }
.cal-jour.borne, .cal-jour.borne:hover { background: var(--cal-sapin) !important; color: #fff; font-weight: 500; text-decoration: none; }
.cal-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cal-trait); font-size: 12.5px; }
.cal-legende span { display: inline-flex; align-items: center; gap: 8px; }
.cal-pastille { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 11px; font-style: normal; color: var(--cal-encre); border: 1px solid var(--cal-trait); }
.cal-pastille.p-sel { background: var(--cal-sapin); color: #fff; border-color: var(--cal-sapin); }
.cal-pastille.p-plage { background: var(--cal-sauge); border-color: var(--cal-sauge); }
.cal-pastille.p-res { color: var(--cal-texte); text-decoration: line-through; }
.cal-etat { font-size: 12.5px; margin: 10px 0 0; }
/* Dates non confirmées (chargement ou calendrier indisponible) : pas de légende « Disponible » */
.calendrier.cal-inconnu .cal-legende { display: none; }
.calendrier.cal-inconnu .cal-etat { font-size: 13px; color: var(--cal-encre); background: var(--cal-sauge-clair); border-radius: 8px; padding: 10px 12px; }

.cal-recap { background: var(--cal-fond); border: 1px solid var(--cal-trait); border-radius: 12px; padding: 20px; display: grid; gap: 16px; position: sticky; top: 90px; }
@media (max-width: 991.98px) { .cal-recap { position: static; } }
.cal-recap p { margin: 0; }
.cal-dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--cal-trait); border-radius: 10px; overflow: hidden; }
.cal-champ { padding: 10px 12px; border: 0; background: var(--cal-fond); text-align: left; color: var(--cal-encre); cursor: pointer; display: grid; gap: 2px; }
.cal-champ + .cal-champ { border-left: 1px solid var(--cal-trait); }
.cal-champ small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cal-texte); font-weight: 500; }
.cal-champ span { font-size: 14px; }
.cal-champ.actif { box-shadow: inset 0 -2px 0 var(--cal-sapin); }
.cal-champ:focus-visible { outline: 2px solid var(--cal-sapin); outline-offset: -2px; }
.cal-voyageurs { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-voy-titre { color: var(--cal-encre); font-weight: 500; font-size: 14px; }
.cal-voy-titre small { display: block; font-weight: 400; color: var(--cal-texte); font-size: 12px; }
.cal-pas { display: flex; align-items: center; gap: 10px; }
.cal-pas button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cal-trait); background: var(--cal-fond); color: var(--cal-encre); cursor: pointer; font-size: 17px; line-height: 1; padding: 0; }
.cal-pas button:disabled { opacity: .35; cursor: default; }
.cal-pas button:focus-visible { outline: 2px solid var(--cal-sapin); outline-offset: 2px; }
.cal-pas output { min-width: 1.5ch; text-align: center; color: var(--cal-encre); font-variant-numeric: tabular-nums; font-weight: 500; }
.cal-resume { font-size: 14px; color: var(--cal-encre); min-height: 1.6em; }
.cal-resume.aide { color: var(--cal-texte); }
.cal-prix { font-size: 13px; background: var(--cal-sauge-clair); border-radius: 8px; padding: 10px 12px; color: var(--cal-encre); }
.cal-prix strong { font-weight: 500; }
.cal-cta { border: 0; border-radius: 8px; padding: 13px 16px; background: var(--cal-sapin); color: #fff; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; cursor: pointer; }
.cal-cta:disabled { opacity: .4; cursor: not-allowed; }
.cal-cta:focus-visible, .cal-lien:focus-visible { outline: 2px solid var(--cal-sapin); outline-offset: 2px; }
.cal-lien { border: 0; background: none; padding: 0; color: var(--cal-texte); text-decoration: underline; font-size: 13px; cursor: pointer; justify-self: start; }

.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 0; list-style: none; }
@media (max-width: 767.98px) { .etapes { grid-template-columns: minmax(0, 1fr); } }
.etapes li { counter-increment: etape; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #2c332d; color: #2c332d; font-weight: 500; margin-bottom: 12px; }
.etapes h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }

/* Panneau du formulaire Tally : plein écran sur mobile, à droite sur ordinateur, sans bordure */
.cal-panneau-ouvert, .cal-panneau-ouvert body { overflow: hidden; }
.cal-panneau { position: fixed; inset: 0; z-index: 10000; }
.cal-panneau[hidden] { display: none; }
.cal-panneau-fond { position: absolute; inset: 0; background: rgba(31, 38, 32, .45); opacity: 0; transition: opacity .25s ease; }
.cal-panneau-boite { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; background: #e2eae2; /* fond du formulaire Tally */ display: flex; flex-direction: column; transform: translateY(24px); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.cal-panneau-boite:focus { outline: none; }
.cal-panneau.visible .cal-panneau-fond { opacity: 1; }
.cal-panneau.visible .cal-panneau-boite { transform: none; opacity: 1; }
.cal-panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 20px; padding-top: max(12px, env(safe-area-inset-top)); }
.cal-panneau-tete h2 { font-family: "Roboto", sans-serif; font-size: 16px; font-weight: 500; color: #1f2620; margin: 0; }
.cal-panneau-fermer { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); color: #1f2620; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cal-panneau-fermer:hover { background: #fff; }
.cal-panneau-fermer:focus-visible { outline: 2px solid #2c332d; outline-offset: 2px; }
.cal-panneau-fermer svg { width: 20px; height: 20px; }
.cal-panneau-cadre { flex: 1; width: calc(100% - 32px); margin: 0 16px; border: 0; display: block; }
@media (min-width: 768px) {
  .cal-panneau-boite { width: min(max(50%, 600px), 100%); transform: translateX(40px); box-shadow: -12px 0 40px rgba(31, 38, 32, .12); }
  .cal-panneau-tete { padding: 20px 20px 8px 32px; }
  .cal-panneau-cadre { width: calc(100% - 64px); margin: 0 32px; }
}
@media (prefers-reduced-motion: reduce) { .cal-panneau-fond, .cal-panneau-boite { transition: none; } }