/* ============================================================
   Le module de réservation (/reservation/public/reserver.php)
   dans la peau du site « Nuit ». Chargé APRÈS la feuille du
   module (RESA_HABILLAGE_FEUILLES), avec commun.css avant lui.
   Ne s'applique que si le module est habillé (body.resa-habille).
   ============================================================ */
.resa-habille .resa{max-width:880px;margin:0 auto;padding:150px 24px 100px;background:transparent;color:var(--texte);font:400 17px/1.6 var(--ui)}
.resa-habille .resa h1{font:700 clamp(38px,4.8vw,66px)/1 var(--titres);color:var(--ivoire);letter-spacing:-.04em;margin-bottom:16px}
.resa-habille .resa h1::before{content:"Réserver";display:flex;align-items:center;gap:12px;margin-bottom:22px;font:600 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--or);
  padding-left:52px;background:linear-gradient(var(--or),var(--or)) 0 50%/40px 1px no-repeat,linear-gradient(var(--or),var(--or)) 36px calc(50% + 0px)/4px 4px no-repeat}
.resa-habille .resa h2{font:700 24px var(--titres);color:var(--ivoire);letter-spacing:-.02em}
.resa-habille .resa .sous{color:var(--texte);font-size:clamp(17px,1.4vw,19px);margin-bottom:34px}
.resa-habille .resa a{color:var(--ivoire)}

/* le fil des étapes */
.resa-habille .resa .fil{gap:6px;margin-bottom:30px;font:600 13.5px var(--ui);color:var(--discret)}
.resa-habille .resa .fil span,.resa-habille .resa .fil b{padding:9px 14px;border-radius:10px;border:1px solid transparent}
.resa-habille .resa .fil b{color:var(--ivoire);border-color:var(--filet);background:rgba(242,237,227,.04)}
.resa-habille .resa .fil span::after{display:none}
.resa-habille .resa .fil span:empty{display:none}

/* les échanges */
.resa-habille .resa .choix{gap:12px}
.resa-habille .resa .carte{border:1px solid var(--filet);border-radius:14px;padding:22px 24px;background:rgba(242,237,227,.03);color:var(--texte);
  transition:border-color .4s,transform .4s var(--sortie),background .4s}
.resa-habille .resa .carte:hover,.resa-habille .resa .carte:focus-visible{border-color:var(--or);transform:translateY(-3px);background:rgba(200,165,108,.06);box-shadow:none}
.resa-habille .resa .carte .titre{font:700 21px var(--titres);color:var(--ivoire);letter-spacing:-.02em}
.resa-habille .resa .carte .meta{font:500 14px var(--ui);color:var(--or)}
.resa-habille .resa .carte p{color:var(--texte);font-size:15.5px;margin-top:8px}

/* les jours et les créneaux */
.resa-habille .resa .jour{border:1px solid var(--filet);border-radius:14px;padding:18px 20px;background:rgba(242,237,227,.03)}
.resa-habille .resa .jour .quand{font:700 18px var(--titres);color:var(--ivoire)}
.resa-habille .resa .creneau{border:1px solid color-mix(in srgb,var(--or) 45%,var(--filet));border-radius:10px;background:none;color:var(--ivoire);padding:10px 18px;font:600 16px var(--ui)}
.resa-habille .resa .creneau:hover,.resa-habille .resa .creneau:focus-visible{background:var(--or);color:#1A130C;border-color:var(--or);transform:translateY(-2px)}

/* le formulaire */
.resa-habille .resa label{color:var(--ivoire);font:600 14px var(--ui)}
.resa-habille .resa .aide{color:var(--discret)}
.resa-habille .resa input[type=text],.resa-habille .resa input[type=email],.resa-habille .resa input[type=tel],
.resa-habille .resa select,.resa-habille .resa textarea{background:rgba(242,237,227,.04);color:var(--ivoire);border:1px solid #6E6153;border-radius:10px;min-height:48px}
.resa-habille .resa select option{background:#1F1915}
.resa-habille .resa input:focus,.resa-habille .resa select:focus,.resa-habille .resa textarea:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(200,165,108,.18)}
.resa-habille .resa .erreur{color:#F0A08F}
.resa-habille .resa .champ.faux input,.resa-habille .resa .champ.faux select,.resa-habille .resa .champ.faux textarea{border-color:#F0A08F}

.resa-habille .resa .btn{background:var(--or);color:#1A130C;border-radius:6px;padding:14px 24px;font:600 15px var(--ui);min-height:48px}
.resa-habille .resa .btn:hover{filter:none;background:#E0C48F}
.resa-habille .resa .btn.pale{background:rgba(242,237,227,.06);color:var(--ivoire);border:1px solid rgba(242,237,227,.18)}
.resa-habille .resa .retour{color:var(--or);font-weight:600}

/* messages et récapitulatif */
.resa-habille .resa .bandeau{background:rgba(242,237,227,.04);border:1px solid var(--filet);border-left:3px solid var(--or);border-radius:12px;color:var(--texte)}
.resa-habille .resa .bandeau.bien{border-left-color:#5FBF6E}
.resa-habille .resa .bandeau.mal{border-left-color:#F0A08F}
.resa-habille .resa .bandeau strong{color:var(--ivoire);font:700 18px var(--titres)}
.resa-habille .resa .recap{background:rgba(242,237,227,.03);border:1px solid var(--filet);border-radius:12px}
.resa-habille .resa .recap .ligne span:first-child{color:var(--discret)}
.resa-habille .resa .recap .ligne span:last-child{color:var(--ivoire);font-weight:600}
.resa-habille .resa .vide{color:var(--texte)}
.resa-habille .resa .vide a{color:var(--or)}

/* le pied du module : celui du site le remplace */
.resa-habille .resa > footer{display:none}

@media (max-width:640px){
  .resa-habille .resa{padding:120px 18px 70px}
  .resa-habille .resa .fil span,.resa-habille .resa .fil b{padding:7px 10px}
}