/* ==========================================================================
   ESPACE MABIN — 03 MODULES
   Overlays, modales, panneaux lateraux, panier, lightbox, toasts, cookies.
   ========================================================================== */

/* ==========================================================================
   SOCLE COMMUN DES OVERLAYS
   ========================================================================== */
.overlay{
  position:fixed;inset:0;z-index:940;
  background:rgba(9,20,12,.68);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,34px);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ease),visibility .32s;
}
.overlay.open{opacity:1;visibility:visible}

.modal{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  width:min(100%,620px);
  max-height:min(88vh,900px);
  display:flex;flex-direction:column;
  transform:translateY(22px) scale(.985);
  transition:transform .38s var(--ease);
}
.overlay.open .modal{transform:none}
.modal-lg{width:min(100%,980px)}
.modal-sm{width:min(100%,460px)}

.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:24px clamp(20px,3vw,32px);
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.modal-head h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.modal-head .eyebrow{margin-bottom:8px}
.modal-close{
  width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);font-size:1.05rem;
  transition:background-color .22s,color .22s,border-color .22s;
}
.modal-close:hover{background:var(--surface-2);color:var(--danger);border-color:var(--danger)}
.modal-body{padding:clamp(20px,3vw,32px);overflow-y:auto;flex:1}
.modal-foot{
  padding:18px clamp(20px,3vw,32px);
  border-top:1px solid var(--line);
  display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;
  background:var(--surface-2);flex-shrink:0;
}

/* ==========================================================================
   PANNEAU LATERAL (connexion / reservations)
   ========================================================================== */
.side-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:950;
  width:min(100%,420px);
  background:var(--surface);
  border-left:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .42s var(--ease);
}
.side-panel.open{transform:none}
.sp-head{
  padding:26px clamp(20px,3vw,30px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.sp-body{padding:clamp(20px,3vw,30px);overflow-y:auto;flex:1;display:grid;gap:22px;align-content:start}
.sp-links{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.sp-links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;font-size:.9rem;color:var(--ink-2);
  border-bottom:1px solid var(--line-soft);
  transition:color .22s,padding-left .22s;
}
.sp-links a:hover{color:var(--gold);padding-left:6px}
.sp-links a::after{content:"→";color:var(--gold);opacity:.6}
.sp-sep{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
.sp-sep::before,.sp-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.sp-social{display:grid;gap:10px}
.sp-social button{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px;border:1px solid var(--line);
  font-size:.8rem;font-weight:500;color:var(--ink);
  transition:background-color .22s,border-color .22s;
}
.sp-social button:hover{background:var(--surface-2);border-color:var(--line-strong)}

/* ==========================================================================
   PANNEAU DES TARIFS (resultat de recherche)
   ========================================================================== */
.rate-summary{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:14px 18px;background:var(--surface-2);
  border:1px solid var(--line);margin-bottom:24px;
  font-size:.8rem;color:var(--muted);
}
.rate-summary b{color:var(--ink);font-weight:600}
.rate-opt{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  padding:20px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .25s,box-shadow .25s;
}
.rate-opt + .rate-opt{margin-top:12px}
.rate-opt:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.rate-opt.picked{border-color:var(--btn);background:var(--btn-soft)}
.rate-opt-thumb{width:88px;height:66px;flex-shrink:0;object-fit:cover;background:var(--surface-3)}
.rate-opt-main{flex:1;min-width:180px}
.rate-opt-main h4{font-family:var(--serif);font-size:1.1rem;font-weight:600}
.rate-opt-main p{font-size:.78rem;color:var(--muted);margin-top:4px}
.rate-opt-price{text-align:right;margin-left:auto}
.rate-opt-price b{display:block;font-family:var(--serif);font-size:1.18rem;color:var(--gold);font-weight:600}
.rate-opt-price small{font-size:.68rem;color:var(--muted)}
.rate-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:18px;background:var(--forest);color:#fff;margin-top:20px;
}
.rate-total span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.rate-total b{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--gold-2)}
@media (max-width:520px){
  .rate-opt-thumb{width:100%;height:120px}
  .rate-opt-price{text-align:left;margin-left:0}
}

/* ==========================================================================
   FICHE CHAMBRE
   ========================================================================== */
.rd-hero{height:clamp(200px,30vw,300px);overflow:hidden;background:var(--surface-3);flex-shrink:0}
.rd-hero img{width:100%;height:100%;object-fit:cover}
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px}
.rd-specs{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.rd-specs li{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;color:var(--muted)}
.rd-specs li b{color:var(--ink);font-weight:600}
.rd-specs svg{width:17px;height:17px;flex-shrink:0;color:var(--gold);margin-top:2px}
.rd-price-box{border:1px solid var(--line);background:var(--surface-2);padding:20px}
.rd-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0}
.rd-price-row + .rd-price-row{border-top:1px solid var(--line-soft)}
.rd-price-row span{font-size:.76rem;color:var(--muted);letter-spacing:.06em}
.rd-price-row b{font-family:var(--serif);font-size:1.14rem;font-weight:600;color:var(--gold)}
@media (max-width:600px){.rd-grid{grid-template-columns:1fr}}

/* ==========================================================================
   COMMANDE / PANIER
   ========================================================================== */
.cart-list{display:grid;gap:10px;margin-bottom:18px}
.cart-empty{
  padding:34px 20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line-strong);font-size:.88rem;
}
.cart-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;border:1px solid var(--line);background:var(--surface);
}
.cart-row img{width:52px;height:52px;object-fit:cover;flex-shrink:0;background:var(--surface-3)}
.cart-row-main{flex:1;min-width:0}
.cart-row-main b{display:block;font-size:.88rem;font-weight:600}
.cart-row-main small{font-size:.74rem;color:var(--muted)}
.cart-qty{display:flex;align-items:center;gap:9px;flex-shrink:0}
.cart-qty button{
  width:26px;height:26px;border:1px solid var(--line);display:grid;place-items:center;
  font-size:.9rem;transition:border-color .2s,color .2s;
}
.cart-qty button:hover{border-color:var(--gold);color:var(--gold)}
.cart-qty output{min-width:18px;text-align:center;font-size:.86rem;font-variant-numeric:tabular-nums}
.cart-del{color:var(--muted);font-size:1rem;transition:color .2s;flex-shrink:0}
.cart-del:hover{color:var(--danger)}
.cart-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 18px;background:var(--forest);color:#fff;
}
.cart-total span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.cart-total b{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--gold-2)}

.pay-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:18px}
.pay{
  border:1px solid var(--line);background:var(--surface);
  padding:14px 12px;text-align:center;
  transition:border-color .22s,background-color .22s;
}
.pay:hover{border-color:var(--gold)}
.pay.on{border-color:var(--btn);background:var(--btn-soft)}
.pay b{display:block;font-size:.8rem;font-weight:600}
.pay small{font-size:.66rem;color:var(--muted)}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox{
  position:fixed;inset:0;z-index:960;
  background:rgba(6,14,8,.95);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.lightbox.open{opacity:1;visibility:visible}
.lb-img{max-width:min(1180px,92vw);max-height:82vh;object-fit:contain;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.lb-cap{
  position:absolute;bottom:clamp(20px,5vh,48px);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.82);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;padding:0 20px;
}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.2rem;
  background:rgba(255,255,255,.06);
  transition:background-color .22s,border-color .22s;
}
.lb-btn:hover{background:rgba(255,255,255,.18);border-color:#fff}
.lb-prev{left:clamp(10px,3vw,34px)}
.lb-next{right:clamp(10px,3vw,34px)}
.lb-close{
  position:absolute;top:clamp(14px,3vh,28px);right:clamp(14px,3vw,34px);
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.1rem;
  transition:background-color .22s;
}
.lb-close:hover{background:rgba(255,255,255,.18)}
.lb-count{
  position:absolute;top:clamp(14px,3vh,28px);left:clamp(14px,3vw,34px);
  color:rgba(255,255,255,.62);font-size:.74rem;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   LECTEUR VIDEO
   Meme fond que la lightbox. Toutes les videos du site sont en 16/9 : la
   largeur commande, la hauteur est bornee pour laisser respirer le titre.
   ========================================================================== */
.videobox{
  position:fixed;inset:0;z-index:965;
  background:rgba(6,14,8,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
  padding:clamp(16px,4vh,40px);
}
.videobox.open{opacity:1;visibility:visible}
.vb-inner{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.vb-player{
  display:block;background:#000;
  width:min(1100px,90vw);max-height:74vh;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.vb-meta{text-align:center;max-width:640px}
.vb-meta h3{color:#fff;font-size:.95rem;font-weight:600}
.vb-meta p{color:rgba(255,255,255,.68);font-size:.8rem;margin-top:6px;line-height:1.6}
@media (max-width:640px){
  .vb-player{width:100%;max-height:62vh}
}

/* ==========================================================================
   TOASTS
   ========================================================================== */
.toast-stack{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:980;display:grid;gap:9px;width:min(420px,92vw);
}
.toast{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:var(--forest);color:#fff;
  border-left:3px solid var(--gold);
  box-shadow:var(--shadow-lg);
  font-size:.86rem;
  animation:toastIn .38s var(--ease);
}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--danger)}
.toast.out{animation:toastOut .32s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(12px)}}

/* ==========================================================================
   BANDEAU COOKIES
   ========================================================================== */
.cookie{
  position:fixed;left:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,26px);
  z-index:930;width:min(430px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);padding:22px;
  transform:translateY(140%);transition:transform .5s var(--ease);
}
.cookie.show{transform:none}
.cookie h4{font-family:var(--serif);font-size:1.06rem;font-weight:600;margin-bottom:9px}
.cookie p{font-size:.8rem;color:var(--muted);line-height:1.65}
.cookie-actions{display:flex;gap:9px;margin-top:16px;flex-wrap:wrap}
.cookie-actions .btn{flex:1;min-width:120px;padding:11px 14px;font-size:.62rem}

/* ==========================================================================
   MENTIONS LEGALES
   ========================================================================== */
.legal-body h4{font-family:var(--serif);font-size:1.1rem;font-weight:600;margin:22px 0 8px}
.legal-body h4:first-child{margin-top:0}
.legal-body p{font-size:.87rem;color:var(--muted);line-height:1.8}
.legal-body ul{padding-left:20px;margin:8px 0;color:var(--muted);font-size:.87rem;line-height:1.8}

/* ==========================================================================
   ETAPES DE RESERVATION
   ========================================================================== */
.steps{display:flex;gap:0;margin-bottom:26px;border:1px solid var(--line)}
.step{
  flex:1;padding:13px 10px;text-align:center;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);
  position:relative;
}
.step + .step{border-left:1px solid var(--line)}
.step.on{background:var(--forest);color:#fff}
.step.done{color:var(--gold)}
.step.done::after{content:" ✓"}

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */
.confirm-ico{
  width:66px;height:66px;margin:0 auto 20px;
  border-radius:50%;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold);font-size:1.7rem;
}
.confirm-ref{
  display:inline-block;margin-top:16px;padding:10px 20px;
  background:var(--surface-2);border:1px dashed var(--line-strong);
  font-family:var(--serif);font-size:1.1rem;letter-spacing:.14em;color:var(--gold);
}