/*
 * Calendrier des disponibilités.
 * Appelée par le calendrier lui-même (template-parts/availability.php), juste avant lui : seules les pages
 * qui en affichent un la chargent, sans retarder l'affichage du haut de la page.
 */

/* ==========================================================================
   CALENDRIER DES DISPONIBILITÉS
   Jours libres, en option ou réservés (menu Disponibilités de l'administration). Le visiteur y
   choisit son arrivée et son départ ; les mois sont dessinés par assets/js/availability.js.
   ========================================================================== */
.avail{--day-h:48px;color:var(--ink)}
.avail [hidden]{display:none!important}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,2.4vw,32px)}
.cal-nav button{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--white);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:border-color .35s var(--ease),background-color .35s var(--ease),opacity .35s var(--ease)}
.cal-nav button:hover{border-color:var(--gold);background:var(--gold-soft)}
.cal-nav button[aria-disabled="true"]{opacity:.35;cursor:default;border-color:var(--line);background:var(--white)}
.cal-nav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}
.cal-range{margin:0;font-family:var(--f-title);font-size:1.15rem;color:var(--ink);text-transform:capitalize;text-align:center}
/* Règles précédées de .avail : le calendrier garde sa mise en page dans le texte d'une page (.prose). */
.cal-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.cal-wrap:empty{min-height:calc(var(--day-h) * 6 + 100px)}
.avail .cal h3{font-size:1.4rem;margin:0 0 14px;text-transform:capitalize}
.avail .cal table{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;margin:0;font-size:inherit}
.avail .cal th{font-family:var(--f-body);font-size:.78rem;font-weight:600;color:var(--muted);padding:6px 0;border:0;text-align:center}
.avail .cal td{padding:0;border:0;background:none}
/* Un jour : libre (blanc), en option (sable), réservé (rouge, barré, comme dans l'administration),
   passé (gris pâle, chiffre à peine plus soutenu : désactivé au premier coup d'œil). */
.day{position:relative;display:grid;place-items:center;width:100%;height:var(--day-h);padding:0;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);font:inherit;font-size:.95rem;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.day:hover{border-color:var(--gold)}
.day:focus-visible{outline:2px solid var(--ink);outline-offset:2px;z-index:1}
.day.option{background:#F6DDB4;border-color:#E8BE7A;color:#5c3d10}
.day.booked{background:#EBA3A3;border-color:#DF8E8E;color:#7A2222;text-decoration:line-through;text-decoration-color:rgba(122,34,34,.55);cursor:not-allowed}
.day.past{background:#F1F0ED;border-color:#E9E6E1;color:#A39E96;text-decoration:none;cursor:default}
.day[aria-current="date"]::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
/* Vos dates : arrivée et départ en or plein, jours entre les deux cerclés d'or (la couleur d'une
   option reste visible) ; pointillés pendant le choix du départ, en rouge si la plage croise une réservation. */
.day.is-in{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);font-weight:600}
.day.is-start,.day.is-end{background:var(--gold);border-color:var(--gold);box-shadow:none;color:var(--ink);font-weight:700}
.day.is-preview{border:1px dashed var(--gold-text)}
.day.is-blocked{border:1px dashed var(--error)}
.day.is-start.is-blocked{border-style:solid}
.avail .legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin:clamp(24px,3vw,36px) 0 0;padding:0;list-style:none;font-size:.92rem}
.avail .legend li{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0}
.avail .legend li::before{content:none}
.legend i{flex:none;width:20px;height:20px;border-radius:5px;border:1px solid var(--line);background:var(--white)}
.legend i.option{background:#F6DDB4;border-color:#E8BE7A}
.legend i.booked{background:#EBA3A3;border-color:#DF8E8E}
.legend i.sel{background:var(--gold);border-color:var(--gold)}
/* Barre de choix : dates retenues, durée, demande de devis. */
.avail__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(20px,2.4vw,28px);padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream)}
.avail__text{flex:1 1 360px;margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.avail__text strong{font-weight:600;color:var(--ink)}
.avail__notice{display:block;margin-bottom:4px;font-weight:600;color:var(--error)}
.avail__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.avail__clear{padding:6px 0;border:0;background:none;font:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:1px;text-decoration-color:var(--gold);text-underline-offset:.3em}
.avail__clear:hover{color:var(--gold-text);text-decoration-color:var(--gold-text)}
/* Sans JavaScript, ou si ses données manquent : la liste des dates prises remplace le calendrier. */
.avail__fallback h3{font-size:1.2rem;margin:0 0 10px}
.avail__fallback ul{margin:0 0 24px;padding-left:1.2em}
.js .avail:not(.is-broken) .avail__fallback,html:not(.js) .avail > :not(.avail__fallback),.avail.is-broken > :not(.avail__fallback){display:none}
/* Calendrier pas encore tenu : une invitation à écrire. */
.avail--empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:22px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream)}
.avail--empty p{flex:1 1 360px;margin:0}
@media (max-width:800px){
  .cal-wrap{grid-template-columns:1fr}
  .avail{--day-h:42px}
  /* Un seul mois : son nom est déjà au-dessus, entre les flèches ; le titre reste pour les lecteurs d'écran. */
  .avail .cal h3{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .avail__bar{padding:16px 18px}
  .avail__actions{width:100%}
  .avail__actions .btn{flex:1 1 auto;justify-content:center;text-align:center}
}