/* =========================================================
   LES BERGERIES DE SÈTE — Calendrier des disponibilités
   Complète main.css : la grille du mois (.cal-grid, .cal-legend)
   y est déjà stylée, on n'ajoute ici que ce que le module apporte —
   la réglette des trois maisons, les onglets de vue et les états.
   ========================================================= */

/* Reprise des couleurs du guichet, pour n'avoir qu'un endroit à changer */
:root{
  --dispo-libre:#8FA057;
  --dispo-loue:#E4DED2;
  --dispo-loue-texte:#A8A293;
  --dispo-sejour:#C25A34;
}

/* ---- Onglets : vue d'ensemble / une bergerie ---- */
.dispo__vues{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.dispo__vue{
  font-family:var(--sans);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;line-height:1;
  padding:10px 15px;border:1px solid var(--line-action);border-radius:2px;
  background:transparent;color:var(--ink-soft);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.dispo__vue:hover{border-color:var(--pine);color:var(--pine)}
.dispo__vue.is-active{background:var(--pine);border-color:var(--pine);color:var(--cream)}

/* ---- Le guichet en vue d'ensemble prend toute la largeur ----
   Trente et un jours sur une ligne ne tiennent pas dans une demi-colonne :
   la maquette plaçait le texte à gauche et un calendrier étroit à droite,
   la réglette demande la rangée entière. */
.booking__grid.dispo-large{
  grid-template-columns:1fr;
  gap:clamp(30px,3.6vw,46px);
  align-items:stretch;
}
.booking__grid.dispo-large .booking__intro .lead{max-width:68ch}
.booking__grid.dispo-large .booking__reassure{max-width:640px}
.bmodule--villa.dispo-large{grid-template-columns:1fr;max-width:1100px}

/* En revanche la grille d'un mois ne doit pas s'étirer dans ce cadre large :
   des cases carrées de 130 px seraient ridicules. On la recentre. */
.dispo-large .cal-head,
.dispo-large .cal-grid{max-width:560px;margin-inline:auto}

/* ---- Réglette : les trois bergeries, un mois, un coup d'œil ---- */
.regl{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:12px;align-items:start;
}
.regl__noms{display:flex;flex-direction:column;gap:6px}
.regl__nom{
  height:30px;display:flex;flex-direction:column;justify-content:center;
  text-align:right;background:none;border:0;padding:0 4px 0 0;cursor:pointer;
  font-family:var(--serif);font-size:15px;color:var(--pine);line-height:1.15;
  white-space:nowrap;transition:color .25s var(--ease);
}
.regl__nom span{
  font-family:var(--sans);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);opacity:0;transition:opacity .25s var(--ease);
}
.regl__nom:hover{color:var(--terra)}
.regl__nom:hover span{opacity:1}
.regl__nom--tete{height:18px;cursor:default}

.regl__long{font-weight:inherit}
.regl__court{display:none;font-weight:inherit}

/* Le voile de droite dit que la bande continue au-delà du cadre */
.regl__defile{
  overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
}
/* pas de voile quand tout tient déjà dans le cadre */
@media(min-width:761px){.regl__defile{-webkit-mask-image:none;mask-image:none}}
.regl__piste{display:flex;flex-direction:column;gap:6px;min-width:560px}
.regl__jours,.regl__ligne{
  display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;
}
.regl__jours{height:18px}
.regl__j{
  font-size:9px;text-align:center;color:var(--ink-mute);font-weight:600;line-height:18px;
}
.regl__j.est-we{color:var(--terra)}
.regl__ligne{height:30px}
.regl__case{
  display:block;height:100%;border-radius:2px;background:var(--dispo-libre);
}
.regl__case.est-loue{
  background:var(--dispo-loue);
  background-image:linear-gradient(135deg,rgba(168,162,147,.30) 25%,transparent 25%,
                   transparent 50%,rgba(168,162,147,.30) 50%,rgba(168,162,147,.30) 75%,transparent 75%);
  background-size:6px 6px;
}
.regl__case.est-passe{background:var(--cream-3);opacity:.45}

/* ---- Pastilles : l'état du domaine à une date donnée ---- */
.dispo__coup-doeil{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.dispo__repere{
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);margin-right:4px;
}
.dispo__pastille{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;color:var(--ink-soft);
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;
}
.dispo__pastille b{
  font-weight:600;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
}
.dispo__pastille.est-libre b{color:#5F6E33}
.dispo__pastille.est-loue{background:var(--cream-2);color:var(--ink-mute)}
.dispo__pastille.est-loue b{color:var(--dispo-sejour)}
.dispo__pastille::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--dispo-libre);flex:none;
}
.dispo__pastille.est-loue::before{background:var(--dispo-sejour)}

/* ---- Messages ---- */
.dispo__aide{
  margin-top:10px;font-size:11.5px;line-height:1.55;color:var(--ink-mute);font-style:italic;
}
/* bout du calendrier : une invitation, pas une simple note */
.dispo__aide--horizon{
  color:var(--ink-soft);font-style:normal;
  border-left:2px solid var(--ocre);padding:2px 0 2px 11px;
}
.cal-head button:disabled{opacity:.32;cursor:default}
.cal-head button:disabled:hover{background:none;color:var(--ink-soft)}
.dispo__chargement,.dispo__etat{
  margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);
}
.dispo__chargement{color:var(--ink-mute);font-style:italic}
.dispo__etat{
  background:var(--cream-2);border-left:2px solid var(--terra);
  padding:11px 14px;border-radius:2px;
}
.dispo__etat--panne{border-left-color:var(--ocre)}

/* ---- Champs : les listes déroulantes du guichet ---- */
.bfield__saisie{
  width:100%;border:0;background:transparent;padding:0;
  font-family:var(--serif);font-size:16px;color:var(--pine);font-weight:500;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23928C7C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;padding-right:16px;
}
.bfield__saisie:focus{outline:2px solid var(--olive-soft);outline-offset:3px}
.bfield .v .v--vide{color:var(--ink-mute)}
.bfields--quatre{grid-template-columns:repeat(4,1fr)}

/* =========================================================
   GUICHET DU HERO
   La barre flottante devient cliquable : les deux champs de
   dates ouvrent le calendrier, les convives sont une vraie
   liste déroulante.
   ========================================================= */
.availbar__ouvre{cursor:pointer;transition:color .25s var(--ease)}
.availbar__ouvre:hover{color:var(--terra)}
.availbar__ouvre:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}
.availbar__select{
  width:100%;border:0;background:transparent;padding:0 16px 0 0;
  font-family:var(--serif);font-size:21px;color:var(--pine);font-weight:500;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23928C7C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;
}
.availbar__select:focus{outline:2px solid var(--terra);outline-offset:3px}

/* ---- Le calendrier en surimpression ---- */
.dispo-modale{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,4vw,32px);
  background:rgba(37,49,31,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:dispoFondu .22s var(--ease);
}
@keyframes dispoFondu{from{opacity:0}to{opacity:1}}
.dispo-modale__cadre{
  --pad:clamp(22px,3vw,34px);
  position:relative;background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--pad);
  width:100%;max-width:560px;max-height:92vh;overflow-y:auto;
}
.dispo-modale__fermer{
  position:absolute;top:10px;right:12px;width:34px;height:34px;
  border:0;background:none;cursor:pointer;border-radius:50%;
  font-size:24px;line-height:1;color:var(--ink-mute);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.dispo-modale__fermer:hover{background:var(--cream-2);color:var(--pine)}
.dispo-modale__titre{
  font-family:var(--serif);font-size:26px;color:var(--pine);
  font-weight:400;line-height:1.1;margin-bottom:6px;
}
.dispo-modale__sous{
  font-size:12px;line-height:1.55;color:var(--ink-mute);
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);
}
/* Le pied reste collé au bas du cadre : sur un écran de téléphone, le
   calendrier et son message poussaient le bouton d'envoi hors de vue. */
.dispo-modale__pied{
  position:sticky;bottom:calc(var(--pad) * -1);z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:20px;padding:16px 0 var(--pad);
  background:#fff;border-top:1px solid var(--line);
}
.dispo-modale__recap{
  font-family:var(--serif);font-size:15px;color:var(--pine);line-height:1.3;flex:1 1 200px;
}
.dispo-modale__pied .btn:disabled{opacity:.4;cursor:default}
.dispo-modale__pied .btn:disabled:hover{background:var(--terra);border-color:var(--terra)}
@media(max-width:600px){
  .dispo-modale{align-items:flex-end;padding:0}
  .dispo-modale__cadre{max-width:none;max-height:88vh;border-radius:var(--radius) var(--radius) 0 0}
  .dispo-modale__pied{flex-direction:column;align-items:stretch;gap:12px}
  .dispo-modale__pied .btn{width:100%}
  /* en colonne, la base flexible de 200 px porterait sur la hauteur :
     le récapitulatif creusait un vide sous lui */
  .dispo-modale__recap{flex:none}
}
@media(prefers-reduced-motion:reduce){.dispo-modale{animation:none}}

/* ---- Accessibilité : les jours se prennent aussi au clavier ---- */
.cal-grid .d[role="button"]:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.cal-grid .d.off{cursor:default}
.dispo__vue:focus-visible,.regl__nom:focus-visible{outline:2px solid var(--pine);outline-offset:2px}

/* ---- Le guichet reste atteignable sous le header fixe ---- */
#booking,#reserver,#guichet{scroll-margin-top:96px}

/* ---- Écrans étroits ---- */
@media(max-width:760px){
  .bfields--quatre{grid-template-columns:1fr 1fr}
  /* la colonne des noms se resserre mais ne quitte jamais sa ligne :
     une bande sans son libellé ne veut plus rien dire */
  .regl{gap:8px}
  .regl__nom{
    font-size:12px;line-height:1.15;white-space:normal;
    max-width:74px;align-items:flex-end;
  }
  .regl__nom span,.regl__long{display:none}
  .regl__court{display:block}
  /* les onglets tiennent alors sur deux rangs au lieu de quatre */
  .dispo__vue{font-size:9.5px;padding:9px 12px;letter-spacing:.1em}
  .regl__piste{min-width:430px}
}
@media(prefers-reduced-motion:reduce){
  .dispo__vue,.regl__nom,.regl__nom span{transition:none}
}

/* =========================================================
   Composition centrée
   Le guichet est un bloc autonome au milieu de la page : ses rangées
   se lisent mieux alignées sur un axe central que calées à gauche.
   La réglette garde en revanche ses noms de maisons contre leur piste :
   les centrer casserait la lecture ligne à ligne.
   ========================================================= */
.dispo__vues{justify-content:center}
.dispo__coup-doeil{justify-content:center}
.dispo__aide,
.dispo__aide--horizon,
.dispo__chargement{text-align:center}
/* la grille du mois et son en-tête étaient déjà recentrées en vue large ;
   on le fait ici sans condition, pour les vues d'une seule maison aussi */
.cal-head,
.cal-grid{margin-inline:auto}
/* le seul conteneur du module est .bmodule__cal (les 6 pages qui portent
   data-dispo-calendrier l'utilisent) */
.bmodule__cal{text-align:center}
/* les contenus internes restent lisibles : on ne centre que les rangées,
   pas le texte des cases ni les libellés de la réglette */
.bmodule__cal .regl__nom{text-align:right}
.bmodule__cal .dispo__etat{text-align:left}