/* ===== Variables + base ===== */
:root{
  --bg:#f7f7f4; --fg:#2b2b2b; --muted:#6e757c;
  --brand:#5a9a6a; --brand2:#bcd6c2; --gold:#c8ab55;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --maxw:1100px; --hdr-h:64px; --bd:#e7e7e7;
}
*,:before,:after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ===== Header (bannière) ===== */
.site-header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--bd)}
.site-header .hd{
  height:var(--hdr-h);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  max-width:var(--maxw); margin:0 auto; padding:0 16px;
}
/* Logo correctement borné */
.site-header .logo{display:inline-block; line-height:0}
.site-header .logo img{width:40px; height:40px; border-radius:8px; display:block}
/* Titre centré par le grid */
.hd-title{margin:0; text-align:center; font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Burger visible seulement en mobile */
.hd-burger,.hd-close{
  appearance:none; border:1px solid #ddd; background:#fff; border-radius:10px;
  padding:6px 10px; font-size:20px; line-height:1; cursor:pointer;
}
#navToggle{display:none}
@media (max-width: 900px){ #navToggle{display:inline-block} }

/* Drawer (menu latéral) */
.hd-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.2s; z-index:1200}
.hd-drawer{
  position:fixed; top:0; right:-320px; width:320px; height:100dvh; background:#fff; z-index:1300;
  box-shadow:-24px 0 48px rgba(0,0,0,.12); display:flex; flex-direction:column; transition:right .25s;
}
.drawer-top{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--bd)}
.drawer-nav{padding:10px; display:flex; flex-direction:column; gap:6px}
.drawer-nav a{padding:10px 12px; border-radius:10px}
/* états ouverts */
body.nav-open .hd-overlay{opacity:1; visibility:visible}
body.nav-open .hd-drawer{right:0}

/* ===== Hero ===== */
section{padding:3rem 20px}
.hero{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
@media (max-width:980px){ .hero{grid-template-columns:1fr; text-align:center} }
.h2{font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 .8rem}
h1{margin:.6rem 0 1rem; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.06; letter-spacing:-.02em}
.lead{max-width:58ch; color:var(--muted); margin:0}
.hero-cta{margin-top:1.2rem; display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-start}
@media (max-width:980px){ .hero-cta{justify-content:center} }
.btn{padding:14px 22px; border-radius:999px; font-weight:700; border:0; cursor:pointer; background:var(--brand); color:#fff; box-shadow:var(--shadow)}
.btn.ghost{background:#fff; color:var(--fg); border:1px solid rgba(0,0,0,.12); box-shadow:none}
.hero-photo img{width:100%; height:100%; object-fit:cover; border-radius:16px; box-shadow:var(--shadow)}

/* ===== Galerie cartes ===== */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:1rem}
.card{border:1px solid rgba(0,0,0,.12); border-radius:18px; overflow:hidden; background:#fff}
.gallery .card h3{margin:0; padding:10px 0; text-align:center; font-weight:600; background:rgba(240,240,240,.9); border-bottom:1px solid rgba(0,0,0,.12)}
.thumb{aspect-ratio:4/3}
.thumb img{width:100%; height:100%; object-fit:cover;}

/* ===== Tarifs (extraits utiles) ===== */
#tarifs .tc{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden}
#tarifs .tc__nav{ display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(0,0,0,.08); background:#f4f6f4}
#tarifs .tc__tab{appearance:none; border:0; background:transparent; padding:14px 10px; cursor:pointer; font-weight:800; color:#3b4a42; border-right:1px solid rgba(0,0,0,.06)}
#tarifs .tc__tab.is-active{background:#e7efe9; color:#1f2a24}
#tarifs .tc__content{padding:0 22px 22px}
#tarifs .tc__panel{display:none}
#tarifs .tc__panel.is-active{display:block}
#tarifs .tc__grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
#tarifs .tc__grid-2{display:grid; gap:18px; grid-template-columns:repeat(2,1fr)}
#tarifs .tc__card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:20px; text-align:center; min-height:360px; display:flex; flex-direction:column; justify-content:center; align-items:center}
#tarifs .tc__price span{font-size:3rem; font-weight:900; color:var(--brand)}
@media (max-width:900px){ #tarifs .tc__nav{grid-template-columns:1fr 1fr} #tarifs .tc__grid-3, #tarifs .tc__grid-2{grid-template-columns:1fr} }

/* ===== Dispos + Contact (essentiel) ===== */
.feature{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:18px; padding:20px; box-shadow:var(--shadow)}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.feature input,.feature select,.feature textarea{
  width:100%; padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,.16); background:#fff; color:var(--fg)
}
@media (max-width:900px){ .form-row{grid-template-columns:1fr} }
.dispos-contact{max-width:1200px; margin:60px auto; padding:0 20px}
.dispos-wrapper{display:flex; flex-direction:column; gap:20px; margin-top:20px}
@media (min-width:992px){ .dispos-wrapper{flex-direction:row; align-items:flex-start; justify-content:space-between} .calendar-box,.form-box{flex:1; max-width:48%} }

/* Calendrier compact */
.cal{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:12px}
.cal__hdr{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px}
.cal__label{font-weight:600}
.cal__nav{border:1px solid rgba(0,0,0,.12); background:#f6f7f6; border-radius:10px; padding:6px 10px; cursor:pointer}
.cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal__dow{text-align:center; font-size:.85rem; color:var(--muted)}
.day{min-height:44px; padding:8px; text-align:right; border-radius:10px; background:#fafafa; border:1px solid rgba(0,0,0,.06)}
.day--pad{opacity:.35}
.day.is-busy{background:#f3e9e9; color:#7a3a3a}

/* ===== Avis + footer (léger) ===== */
.avis-carousel{display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:1rem 0; scrollbar-width:none}
.avis-carousel::-webkit-scrollbar{display:none}
.avis-card{flex:0 0 80%; max-width:350px; background:#fff; border-radius:12px; padding:1.2rem; color:var(--fg); box-shadow:var(--shadow); scroll-snap-align:center}
.stars{color:var(--gold)}
footer{padding:3rem 20px; color:#61686f; border-top:1px solid rgba(0,0,0,.08)}
.foot{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* ===== Effet reveal basique ===== */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s}
[data-reveal].in{opacity:1; transform:none}

:root{ --hdr:64px; --maxw:1100px; --bd:#e7e7e7; --ink:#1f2a24; }

/* Barre */
.site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--bd); }
.site-header .hd{
  height:var(--hdr); max-width:var(--maxw); margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:12px;
  color:var(--ink);
}

/* Logo contraint */
.site-header .logo{ display:grid; place-items:center; width:44px; height:44px; }
.site-header .logo img{ width:32px; height:32px; border-radius:999px; display:block; }

/* Titre centré */
.hd-title{ margin:0; text-align:center; font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Burger */
.hd-burger,.hd-close{
  appearance:none; border:1px solid #ddd; background:#fff; border-radius:10px;
  width:44px; height:36px; display:grid; place-items:center; font-size:18px; cursor:pointer;
}
/* Burger visible seulement en ≤ 900px */
#navToggle{ display:none; }
@media (max-width:900px){ #navToggle{ display:grid; } }

/* Overlay + tiroir */
.hd-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s; z-index:1200; }
.hd-drawer{
  position:fixed; top:0; right:-320px; width:320px; height:100dvh; background:#fff;
  box-shadow:-24px 0 48px rgba(0,0,0,.12); display:flex; flex-direction:column; transition:right .25s; z-index:1300;
}
.drawer-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--bd); }
.drawer-nav{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.drawer-nav a{ padding:10px 12px; border-radius:10px; color:var(--ink); text-decoration:none; font-weight:600; }
.drawer-nav a:hover{ background:#f3f4f3; }
.drawer-foot{ margin-top:auto; padding:12px 16px; border-top:1px solid var(--bd); color:#475569; font-weight:600; }

/* État ouvert */
body.nav-open .hd-overlay{ opacity:1; visibility:visible; }
body.nav-open .hd-drawer{ right:0; }

/* Flou du contenu au menu ouvert */
.site-main{ transition:filter .2s, opacity .2s; }
body.nav-open .site-main{ filter:blur(6px); opacity:.4; }

/* Neutralisations nécessaires */
.wrap.nav, .nav-menu, .breadcrumbs, header + nav{ display:none !important; } /* barre legacy */
nav a, nav a:hover{ all:unset; } /* aucun style global sur nav */
/* Afficher le burger aussi sur ordinateur */
#navToggle{
  display:grid !important;           /* toujours visible */
  place-items:center;
  width:44px; height:36px;
  border:1px solid #ddd; border-radius:10px;
  background:#fff; font-size:18px; line-height:1; cursor:pointer;
}

/* Optionnel: s'il est recouvert */
.site-header{ z-index:1000; }
/* Fermé par défaut, quoi qu’il arrive */
.hd-drawer{
  position:fixed; top:0; right:-340px !important;
  width:340px; max-width:85vw; height:100dvh;
  background:#fff; box-shadow:-24px 0 48px rgba(0,0,0,.12);
  display:flex; flex-direction:column; z-index:1300; transition:right .25s;
  pointer-events:none;                    /* pas cliquable si fermé */
}
body.nav-open .hd-drawer{
  right:0 !important; pointer-events:auto; /* s’ouvre uniquement avec la classe */
}
.hd-overlay{ opacity:0; visibility:hidden; }
body.nav-open .hd-overlay{ opacity:1; visibility:visible; }

/* Sécurité: ne pas afficher un ancien nav horizontal */
.wrap.nav, .nav-menu, .breadcrumbs, header + nav{ display:none !important; }
.hero{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 15px 3rem;
  margin:0 auto;
  max-width:900px;
}
.hero > *{ margin-left:auto; margin-right:auto; }   /* centre chaque enfant */
.lead{ max-width:58ch; margin:0 auto; text-align:center; }
.hero-cta{ justify-content:center; }
h1{ margin-top:0; text-align:center; }

.site-header {
  position: fixed;   /* la barre reste fixée */
  top: 0;
  left: 0;
  width: 100%;       /* prend toute la largeur */
  z-index: 1000;     /* reste au-dessus du contenu */
  background: #fff;  /* évite que le fond soit transparent */
  border-bottom: 1px solid #ddd;
}

body {
  padding-top: 60px; /* adapte à la hauteur de ton header */
}
/* Cache la version desktop sur mobile */
@media (max-width: 768px) {
  #tarifs { 
    display: none !important;      /* cache le tableau classique */
  }
  #tarifs-mobile { 
    display: block !important;     /* affiche la version mobile */
  }
}

/* Cache la version mobile sur desktop */
@media (min-width: 769px) {
  #tarifs-mobile {
    display: none !important;
  }
}

/* Styles spécifiques version mobile */
#tarifs-mobile {
  margin: 40px auto;
  max-width: 600px;
  padding: 0 20px;
}

#tarifs-mobile .tarif-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  text-align: center;
}

#tarifs-mobile h3 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  color: var(--brand);
}

#tarifs-mobile .dates {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 8px;
}

#tarifs-mobile .price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--fg);
  margin: 6px 0;
}

#tarifs-mobile .promo {
  font-size: 0.95rem;
  color: #555;
  margin-top: 8px;
}

/* Bouton centré avec marge */
.btn-center {
  text-align: center;
  margin-top: 2rem;      /* espace au-dessus si besoin */
  margin-bottom: 2.5rem; /* petit espace en dessous */
}

.btn-center .btn {
  display: inline-block;
}
/* Section Le Cabanon en photo : grille 2 colonnes sur mobile */
@media (max-width: 768px) {
  #galeries .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 par ligne */
    gap: 12px; /* espace entre les onglets */
  }
}
.drawer-nav button {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2a24;
  cursor: pointer;
}

.drawer-nav button:hover,
.drawer-nav button:focus,
.drawer-nav button:active {
  background: none !important;
  color: #1f2a24 !important;
}

/* Menu drawer (fermé par défaut) */
.drawer-nav {
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quand le menu est ouvert */
body.nav-open .drawer-nav {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* États et fondu du tiroir */
.hd-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .25s; z-index:1200;
}
.hd-drawer{
  position:fixed; top:0; right:-320px; width:320px; height:100dvh; background:#fff; z-index:1300;
  box-shadow:-24px 0 48px rgba(0,0,0,.12);
  opacity:0; transform:translateX(16px); pointer-events:none;
  transition:right .25s, opacity .25s, transform .25s;
}
body.nav-open .hd-overlay{ opacity:1; visibility:visible; }
body.nav-open .hd-drawer{ right:0; opacity:1; transform:none; pointer-events:auto; }
.lead {
  max-width: 58ch;
  color: var(--muted);
  margin-bottom: 1.5rem; /* espace sous le texte */
}

/* état de fermeture progressive */
body.nav-closing .hd-overlay{ opacity:0; visibility:visible; }
body.nav-closing .hd-drawer{ right:0; opacity:0; transform:translateX(16px); pointer-events:none; }
/* Décalage pour que les ancres ne soient pas cachées par la bannière */
section, [id] {
  scroll-margin-top: 20px; /* ajuste selon la hauteur de ta bannière */
}


/* Ligne bouton + prix (comme avant) */
.form-actions{
  display:flex; align-items:center; gap:14px;
  margin-top: 10px;
}

/* Boîte prix (reprend l'ancien rendu) */
.price-box{
  display:inline-block;
  padding:8px 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.2);
  border-radius:10px;
  font-weight:600;
  color:#2b2b2b;
}
/* Boutons style tarifs/dispos */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: #4f8a5e;   /* vert cabanon */
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: background 0.2s ease, transform 0.15s ease;
}

.btn:hover {
    transform:translateY(-2px);
    filter:saturate(110%)
}



.env__video {
  width: 640px;      /* largeur fixe */
  height: 360px;     /* hauteur fixe (format 16:9) */
  max-width: 100%;   /* empêche de déborder sur petit écran */
  object-fit: cover; /* rogne si nécessaire, garde le cadre propre */
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: block;
  margin: 0 auto;    /* centre la vidéo */
}


.env__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* la photo/video remplit le cadre */
  object-position: center; /* centrage de l’image */
  display: block;
}
.equipements {
  max-width: 800px;
  margin: 15px auto 0 auto; /* petit espace au-dessus, aucun en dessous */
  padding: 0;
  text-align: center;
}

.equipements details {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  cursor: pointer;
  transition: 0.3s ease;
  margin: 0;
}

.equipements summary {
  font-weight: bold;
  font-size: 1.1rem;
  list-style: none;
  margin: 0;
}

.equipements ul {
  margin: 10px 0 0 0; /* espace uniquement quand la liste s’ouvre */
  padding: 0;
  list-style: none;
  text-align: left;
}

.wrap {
  margin-top: 20px; /* espace au-dessus */
}
/* ==== Lightbox ==== */
#lightbox{
  position: fixed;
  inset: 0;
  display: none;               /* caché par défaut */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  z-index: 2000;
  padding: 20px;
}
#lightbox.open{ display: flex; }

#lightbox img{
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;         /* toujours bien contenu */
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

#lightbox .lb-close{
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.9);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
#lightbox .lb-close:hover{ background:#fff; }

body.lightbox-open{ overflow:hidden; }  /* bloque le scroll fond */
/* Galerie par défaut : 3 colonnes (ordinateur) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

/* Sur téléphone : 2 colonnes */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* plus petit espace si tu veux */
  }
}
.hero {
  padding-top: 0.5rem;
}

.hero h1 {
  margin-top: 0;
}
section {
  padding: 2rem 20px;   /* avant c’était sûrement 3rem */
}

section + section {
  padding-top: 1rem;    /* réduit l’écart entre deux sections */
}
/* Lightbox */
#lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s; z-index:1400;
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img{ max-width:90vw; max-height:90vh; border-radius:12px; }
#lightbox .lb-close,
#lightbox .lb-prev,
#lightbox .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:50%;
  background:#fff; color:#000; font-size:28px; cursor:pointer;
  opacity:0.8;
}
#lightbox .lb-close{
  top:20px; right:20px; transform:none;
}
#lightbox .lb-prev{ left:20px; }
#lightbox .lb-next{ right:20px; }
#lightbox .lb-prev:hover,
#lightbox .lb-next:hover,
#lightbox .lb-close:hover{ opacity:1; }
body.lightbox-open{ overflow:hidden; }
.more-photos .plus-sign,
.less-photos .minus-sign {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  font-weight:bold;
  height:100%;
  color:var(--brand);
  background:#f5f5f5;
}

.hidden { display:none; }
.more-photos,.less-photos{display:flex;align-items:center;justify-content:center;cursor:pointer;background:#f0f0f0}
.more-photos .thumb,.less-photos .thumb{display:flex;align-items:center;justify-content:center;height:100%}
.plus-sign,.minus-sign{font-size:3rem;font-weight:700;color:#333}
.more-photos .thumb,
.less-photos .thumb {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f5f5;   /* couleur uniforme pour tout le carré */
}

.plus-sign,
.minus-sign {
  font-size:3rem;
  font-weight:700;
  color:var(--brand);   /* vert cabanon */
  line-height:1;
}
#lightbox{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.7); z-index:1400}
#lightbox.open{display:grid}
#lightbox img{max-width:90vw; max-height:85vh; border-radius:12px; background:#fff}
#lightbox .lb-close,#lightbox .lb-prev,#lightbox .lb-next{
  position:absolute; border:0; background:#fff; width:42px; height:42px; border-radius:10px; cursor:pointer;
}
#lightbox .lb-close{top:14px; right:14px}
#lightbox .lb-prev{left:14px; top:50%; transform:translateY(-50%)}
#lightbox .lb-next{right:14px; top:50%; transform:translateY(-50%)}
/* Ajuste la grille du header pour loger le CTA */
.site-header .hd{ grid-template-columns:auto 1fr auto auto; }

/* Bouton header discret, même DA */
.btn--sm{ padding:10px 16px; font-size:14px; border-radius:999px; }
.hd-cta{ margin-left:8px; }

/* Cacher le CTA header sur mobile (on garde le flottant) */
@media (max-width:900px){
  .hd-cta{ display:none; }
}

/* Bouton flottant bas-droite (mobile) */
.fab-cta{
  position:fixed; right:16px; bottom:16px; z-index:1600;
  display:none;
}
.fab-cta .btn{ box-shadow:var(--shadow); }

/* Visible seulement sur mobile */
@media (max-width:900px){
  .fab-cta{ display:block; }
}

/* Ne pas gêner le menu ouvert */
body.nav-open .fab-cta{ transform:translateY(120%); transition:transform .2s; }
/* Bouton flottant mobile */
.fab-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1600;
  display: none; /* caché par défaut */
}

/* Grand bouton flottant */
.btn-big {
  padding: 16px 28px;       /* plus grand que .btn classique */
  font-size: 1rem;          /* texte un peu plus gros */
  border-radius: 999px;     /* rond comme les autres */
  box-shadow: var(--shadow);
}

/* visible uniquement sur mobile */
@media (max-width: 900px) {
  .fab-cta { display: block; }
}

/* Masquer si le menu est ouvert */
body.nav-open .fab-cta {
  transform: translateY(120%);
  transition: transform .2s;
}
/* Grille explicite: logo | titre (vide) | Réserver | burger */
.site-header .hd{
  grid-template-columns: 44px 1fr auto auto !important;
  position: relative;
}

/* Titre centré absolu (déjà appliqué) */
.hd-title{
  position:absolute !important;
  left:50% !important; top:50% !important;
  transform:translate(-50%,-50%) !important;
}

/* Force les colonnes des boutons et évite le stretch */
.hd-cta{ 
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  white-space: nowrap !important;
  display: inline-flex !important;
}

#navToggle{
  grid-column: 4 !important;
  justify-self: end !important;
  align-self: center !important;
}
/* Cache le bouton Réserver du header uniquement sur mobile */
@media (max-width:768px){
  header .btn-reserver,
  header .cta-reserver,
  header .cta,
  header a[href*="reserver"],
  header a[href*="dispos"],
  header button[aria-label*="Réserver" i]{
    display:none !important;
  }
}
.flatpickr-day.flatpickr-disabled{
  color:#999 !important;
  background:#f5f5f5 !important;
  cursor:not-allowed;
}



/* === Booking Drawer v2 === */
#bk-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1900; }

.bk-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.bk-head h3{ font-size:1.05rem; margin:0; }
#bk-close{ border:0; background:#f3f3f3; width:36px; height:36px; border-radius:10px; cursor:pointer; }

.bk-block{ padding:12px 16px; border-bottom:1px solid #f0f0f0; }
.bk-row.between{ display:flex; align-items:center; justify-content:space-between; }
.bk-label{ font-weight:700; display:block; margin-bottom:6px; }
#bk-calendar{ padding:8px; }

/* Voyageurs counter */
.bk-counter{ display:inline-flex; align-items:center; gap:12px; background:#f7f7f7; border:1px solid #e6e6e6; border-radius:10px; padding:6px 10px; }
.bk-counter button{ width:28px; height:28px; border-radius:8px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.bk-counter span{ min-width:16px; text-align:center; font-weight:700; }
.bk-reset{ text-align:center; font-size:.9rem; color:#555; padding:10px 0; cursor:pointer; }

/* Étape 2 form + footer récap */
.bk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bk-grid label{ display:flex; flex-direction:column; gap:6px; font-size:.9rem; }
.bk-grid input{ border:1px solid #e2e2e2; border-radius:10px; padding:10px; }
.bk-footer{ position:sticky; bottom:0; background:#fff; border-top:1px solid #eee; padding:12px 16px; }
.bk-summary{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bk-total span{ color:#666; margin-right:8px; }
.bk-actions{ display:flex; gap:10px; justify-content:flex-end; }

@media (max-width:900px){
  #bk-drawer{ width:100%; right:-100%; border-radius:0; }
  .bk-grid{ grid-template-columns:1fr; }
}

/* Flatpickr: jours désactivés en GRIS */
.flatpickr-day.flatpickr-disabled{
  color:#9aa0a6 !important;
  background:#f0f0f0 !important;
  cursor:not-allowed;
  opacity:1 !important;
}


/* Grille 2 colonnes type maquette */
.bk-grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 16px;
}
.bk-field{ display:flex; flex-direction:column; gap:6px; }
.bk-field span{ font-size:13px; font-weight:600; color:#333; }
.bk-field input,
.bk-field select{
  border:1px solid #e2e2e2;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
}
@media (max-width:900px){
  .bk-grid2{ grid-template-columns:1fr; }
}

/* Empêche le débordement de la grille */
#bk-drawer{ overflow-x: hidden; }

/* Colonnes qui peuvent rétrécir */
.bk-grid2{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:12px 16px;
}

/* Les cellules acceptent de rétrécir */
.bk-field{ min-width:0; }

/* Champs bornés à la largeur dispo */
.bk-field input,
.bk-field select{
  width:100%;
  max-width:100%;
}

/* Option mobile: passe en 1 colonne si écran étroit */
@media (max-width:640px){
  .bk-grid2{ grid-template-columns:1fr; }
}
/* Boîte qui copie le style d’un input texte */
.bk-check .bk-box{
  width:100%;
  border:1px solid #e2e2e2;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  box-sizing:border-box;
  display:flex; align-items:center; gap:10px;
}

/* Case harmonisée */
.bk-check input[type="checkbox"]{
  width:18px; height:18px; margin:0;
  accent-color: var(--brand);
}

/* Boîte qui imite exactement un input texte */
.input-like{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px;                                 /* comme .feature input */
  border:1px solid rgba(0,0,0,.16);             /* idem */
  border-radius:12px;                            /* idem */
  background:#fff;
  box-sizing:border-box;
  min-height:44px;                               /* hauteur d'un input */
}

/* Case + texte */
.input-like input[type="checkbox"]{
  width:18px; height:18px; margin:0;
  accent-color: var(--brand);
}
.input-like span{
  font-size:14px; font-weight:600; color:#2b2b2b;
}

/* Empêche tout débordement et force l’étirement dans la grille */
.form-row > label{ width:100%; min-width:0; display:flex; flex-direction:column; gap:6px; }
/* Libellé de section sur toute la grille */
.section-label{
  grid-column: 1 / -1;
  font-weight: 700;
  margin: 0 0 8px;
}

/* Boîte qui imite un input texte */
.input-like{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px;
  border:1px solid rgba(0,0,0,.16);
  border-radius:12px;
  background:#fff;
  min-height:44px;
  box-sizing:border-box;
}
.input-like input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:var(--brand); }
.input-like span{ font-size:14px; font-weight:600; color:#2b2b2b; }
/* Forcer le label de section à occuper toute la ligne */
.full-row {
  grid-column: 1 / -1;  /* occupe 2 colonnes */
}

.section-label {
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}



.form-row.options-block .options-grid{
  grid-column: 1 / -1;              /* passe SOUS le titre */
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 cartes égales */
  gap: 12px;
}

/* Cartes cochables au même look que les champs */
.option-input{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:12px;
  border:1px solid rgba(0,0,0,.16);
  border-radius:12px; background:#fff; color:var(--fg);
}
.option-input input{ width:18px; height:18px; }
.option-input span{ flex:1; }

/* label de section au-dessus */
.bk-block .bk-label{ display:block; margin:0 0 8px; font-weight:700; }

/* même grille que les infos perso, sans débordement */
.bk-grid2{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px 16px;
}
.bk-grid2 > *{ width:100%; min-width:0; }
.bk-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }

/* rectangle identique aux inputs */
.bk-input-like{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid #e2e2e2;
  border-radius:10px;
  background:#fff;
  min-height:42px;
  box-sizing:border-box;
}
.bk-check input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:var(--brand); }
.bk-check .bk-input-like span{ font-size:14px; font-weight:600; color:#2b2b2b; }

/* Barre collée en bas du tiroir, prix + bouton */
.bk-sticky{
  position: sticky; bottom: 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:16px; padding:10px 12px;
  background:#fff; border:1px solid #e6e6e6; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); z-index:5;
}
.bk-price{
  padding:8px 12px; border:1px solid #ddd; border-radius:10px; background:#fff;
  font-weight:700; min-width:120px; text-align:right;
}
/* état désactivé du bouton */
.btn:disabled{ background:#ccc !important; color:#666 !important; cursor:not-allowed; box-shadow:none; }
.day.is-selected{ outline:2px solid var(--brand); background:#e7efe9; }
.day.in-range{ background:#f2f7f3; border-color:rgba(0,0,0,.12); }
#bk-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transition:opacity .25s;
  z-index:1200;
}
#bk-overlay.visible{opacity:1; visibility:visible;}


#bk-drawer.open{ right:0; }

.bk-head{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid #eee; margin-bottom:16px;
}
.bk-head h3{ margin:0; font-size:1.3rem; font-weight:700; }
#bk-close{
  border:0; background:none; font-size:24px; cursor:pointer;
}

.bk-body label{font-weight:600; display:block; margin-bottom:8px;}
#hotel-datepicker{
  width:100%; padding:12px; border:1px solid #ccc;
  border-radius:10px; margin-bottom:14px;
}
.price-box{
  display:inline-block; background:#f6f6f6; padding:10px 16px;
  border-radius:10px; margin-bottom:20px;
  font-weight:600;
}
#bk-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1900;}

#bk-drawer.open{right:0;}
.bk-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid #eee;}
#bk-close{border:0;background:#f3f3f3;width:36px;height:36px;
  border-radius:10px;cursor:pointer;font-size:20px;}

.bk-block{padding:16px 20px;border-bottom:1px solid #eee;}
.bk-label{font-weight:700;margin-bottom:8px;display:block;}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bk-row input,.bk-row select{
  padding:10px;border:1px solid #ccc;border-radius:8px;width:100%;
}
.bk-options{display:flex;gap:16px;flex-wrap:wrap;}
.bk-options label{display:flex;align-items:center;gap:6px;}

.bk-reset{text-align:center;color:#555;font-size:.9rem;cursor:pointer;margin-top:6px;}
.bk-reset:hover{text-decoration:underline;}

.bk-total{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  background:#f9f9f9;
  border-top:1px solid #eee;
}
#bk-price{font-weight:700;font-size:1.2rem;}
#bk-submit{
  background:#4f8a5e;color:#fff;border:0;padding:12px 22px;
  border-radius:10px;cursor:pointer;font-weight:600;
}
.flatpickr-day.high-season {
  background-color: #ffeccc;
  color: #222;
  border-radius: 6px;
}
/* === Informations personnelles : style exact === */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

.bk-field {
  display: flex;
  flex-direction: column;
}

.bk-field label {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  margin-bottom: 5px;
}

.bk-field input,
.bk-field select {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  font-size: 15px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.bk-field input:focus,
.bk-field select:focus {
  outline: none;
  border-color: #4f8a5e;
  box-shadow: 0 0 0 3px rgba(79,138,94,0.15);
}

/* Responsive */
@media (max-width: 600px) {
  .bk-grid {
    grid-template-columns: 1fr;
  }
}
/* === Barre sticky prix + bouton === */
.bk-sticky {
  position: sticky;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  z-index: 10;
}

.bk-price {
  flex: 1;
  text-align: right;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2b2b2b;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 10px;
  background: #fff;
}

#bk-submit {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

#bk-submit:hover {
  transform: translateY(-2px);
  filter: saturate(115%);
}
/* === Style boutons Options (ancien design) === */
.bk-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.bk-option {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 10px;
  background: #fff;
  padding: 12px 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.bk-option:hover {
  background: #f4f6f4;
}

.bk-option.active {
  border-color: var(--brand);
  background: #e7efe9;
  color: var(--brand);
  box-shadow: 0 0 0 2px rgba(90,154,106,0.2);
}
/* === Options (ancien design rectangulaire) === */
.bk-grid-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bk-option-btn {
  flex: 1 1 calc(50% - 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d1d1;
  border-radius: 10px;
  padding: 12px 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
  color: #2b2b2b;
}

.bk-option-btn:hover {
  background: #f8f8f8;
}

/* Effet activé */
.bk-option-input:checked + span,
.bk-option-btn input:checked + span {
  color: var(--brand);
  font-weight: 700;
}

/* Change l’aspect du bouton au clic */
.bk-option-input:checked ~ span {
  color: var(--brand);
}

.bk-option-input:checked ~ span::before {
  border-color: var(--brand);
}

.bk-option-input {
  display: none;
}

.bk-option-btn input:checked + span {
  color: var(--brand);
}

.bk-option-btn input:checked {
  accent-color: var(--brand);
  border-color: var(--brand);
}

.bk-option-btn:has(input:checked) {
  border-color: var(--brand);
  background: #e7efe9;
  color: var(--brand);
}
/* === SECTION OPTIONS (style original restitué) === */
.bk-block .bk-label {
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

.bk-grid-options {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Boutons rectangulaires avec ombre douce */
.bk-option-btn {
  flex: 1 1 calc(50% - 10px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  font-weight: 500;
  color: #2b2b2b;
}

/* Interaction */
.bk-option-btn:hover {
  background: #f8f8f8;
  border-color: rgba(0, 0, 0, .2);
}

/* Case */
.bk-option-btn input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  margin: 0;
  cursor: pointer;
}

/* Texte */
.bk-option-btn span {
  font-size: 15px;
}

/* État actif (coché) */
.bk-option-btn:has(input:checked) {
  border-color: var(--brand);
  background: #e7efe9;
  color: var(--brand);
  box-shadow: 0 2px 6px rgba(90, 154, 106, .25);
}
/* === Tiroir de réservation (amélioration responsive & alignement) === */



/* Bloc principal */
.bk-block {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  text-align: center; /* centrage du texte */
}

/* === CALENDRIER === */
#bk-calendar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.flatpickr-calendar {
  margin: 0 auto !important;
}

.flatpickr-innerContainer,
.flatpickr-days {
  width: auto !important;
  max-width: 100%;
}

/* Réinitialisation centrée */
#bk-reset {
  text-align: center;
  margin-top: 10px;
  color: #555;
  cursor: pointer;
}

/* === INFORMATIONS PERSONNELLES === */
.bk-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px 16px;
  margin-top: 12px;
}

.bk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bk-field input,
.bk-field select {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

/* === OPTIONS === */
.bk-grid-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  justify-content: center;
  align-items: stretch;
  margin-top: 10px;
}

.bk-option-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.bk-option-btn:hover {
  background: #f5f5f5;
}

.bk-option-input {
  width: 18px;
  height: 18px;
  margin: 0;
}

/* === STICKY BAR (prix + bouton) === */
.bk-sticky {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.bk-price {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 1rem;
}

.bk-submit {
  flex: 1;
  background: #4f8a5e;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  transition: 0.2s;
}

.bk-submit:hover {
  background: #417c52;
}

/* === Responsive mobile : tout parfaitement centré === */
@media (max-width: 600px) {
  #bk-drawer {
    padding: 0;
  }

  .bk-block {
    padding: 12px 10px;
  }

  .bk-sticky {
    flex-direction: column;
    gap: 10px;
  }

  .bk-price,
  .bk-submit {
    width: 100%;
  }

  .flatpickr-calendar {
    transform: scale(0.95); /* évite qu’il déborde légèrement */
  }
}
/* === Corrige padding du tiroir réservation === */
#bk-drawer {
  padding-bottom: 0 !important;
}

#bk-drawer .bk-sticky {
  margin-bottom: 0 !important;
}