/* Feuille commune aux pages Connexion, Espace client et Réserver.
   Charte Siestoo (crème, or, anthracite · Playfair Display + Inter), mise en
   page épurée : grands titres, petites étiquettes en capitales espacées,
   filets fins, boutons pleins anthracite. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --cream: #FAF8F3;
  --light: #F0EBE1;
  --gold: #B8975A;
  --gold-light: #D4B896;
  --dark: #2A2A2A;
  --mid: #5A5A5A;
  --white: #FFFFFF;
  --filet: rgba(42, 42, 42, 0.12);
  --filet-fort: rgba(42, 42, 42, 0.28);
  --ok: #4F7A55;
  --err: #A4453A;
}
html { -webkit-text-size-adjust: 100%; }
/* Un élément marqué « hidden » reste caché, même si sa classe (.btn…) impose un affichage. */
[hidden] { display: none !important; }
body { font-family: 'Inter', sans-serif; background: var(--cream); color: var(--dark);
       line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: 68px; padding: 0 5%;
       display: flex; align-items: center; justify-content: space-between; gap: 1rem;
       background: rgba(250, 248, 243, 0.96); backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--filet); }
/* Pas de « gap » : il s'appliquerait aussi entre « Sies » et « too ». */
.nav-logo svg { width: 40px; height: 40px; margin-right: 10px; flex-shrink: 0; }
.nav-logo { display: flex; align-items: center; text-decoration: none;
            font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--dark); }
.nav-logo span { color: var(--gold); }
.nav-liens { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-liens a { text-decoration: none; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
               text-transform: uppercase; color: var(--mid); transition: color .2s; }
.nav-liens a:hover, .nav-liens a.actif { color: var(--dark); }
/* Bouton « Espace client » et version téléphone du menu : assets/nav.css */

/* ---------- Typographie ---------- */
.etiquette { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.titre { font-family: 'Playfair Display', serif; font-weight: 600; line-height: 1.15;
         font-size: clamp(2rem, 4.5vw, 3.4rem); }
.titre em { font-style: italic; color: var(--gold); font-weight: 400; }
.chapo { color: var(--mid); max-width: 560px; font-size: 0.98rem; }
.mono { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); }

.page { width: min(1180px, 90%); margin: 0 auto; padding: 4.5rem 0 5rem; }
.page-etroite { width: min(560px, 90%); }
.entete { display: grid; gap: 1rem; margin-bottom: 3rem; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
       padding: 0.95rem 1.6rem; border: 1px solid var(--dark); background: var(--dark); color: var(--cream);
       font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
       text-decoration: none; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.btn:hover { background: #111; }
.btn[disabled], .btn.inactif { opacity: 0.4; cursor: not-allowed; }
.btn-or { background: var(--gold); border-color: var(--gold); color: var(--white); }
.btn-or:hover { background: #9d7d45; }
.btn-ligne { background: transparent; color: var(--dark); }
.btn-ligne:hover { background: var(--dark); color: var(--cream); }
.btn-plein { width: 100%; }
.lien { background: none; border: 0; padding: 0; cursor: pointer; color: var(--dark);
        text-decoration: underline; text-underline-offset: 3px; font-size: 0.85rem; }
.lien:hover { color: var(--gold); }

/* ---------- Formulaires ---------- */
.champ { display: grid; gap: 0.45rem; }
.champ > span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 0.85rem 0.95rem; border: 1px solid var(--filet-fort); background: var(--white);
  font: inherit; font-size: 0.95rem; color: var(--dark); border-radius: 0; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
.champs { display: grid; gap: 1.1rem; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .champs-2 { grid-template-columns: 1fr; } }
.mdp { position: relative; }
.mdp button { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
              background: none; border: 0; cursor: pointer; font-size: 0.7rem; letter-spacing: 0.1em;
              text-transform: uppercase; color: var(--mid); }
.separateur { display: flex; align-items: center; gap: 1rem; color: var(--mid); font-size: 0.66rem;
              letter-spacing: 0.2em; text-transform: uppercase; margin: 1.4rem 0; }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: var(--filet); }
.statut { font-size: 0.86rem; min-height: 1.2em; }
.statut.err { color: var(--err); }
.statut.ok { color: var(--ok); }
.note { font-size: 0.8rem; color: var(--mid); }
.encart { border: 1px solid var(--filet); background: var(--white); padding: 1.1rem 1.25rem; font-size: 0.9rem; }
.encart.alerte { border-color: var(--gold-light); background: #FBF4E6; }
.encart.erreur { border-color: #E3B9B2; background: #FBF0EE; color: var(--err); }

/* ---------- Onglets (connexion / inscription) ---------- */
.onglets { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--filet); margin-bottom: 2rem; }
.onglets button { background: none; border: 0; padding: 0.9rem; cursor: pointer; font-size: 0.7rem;
                  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid);
                  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.onglets button[aria-selected="true"] { color: var(--dark); border-color: var(--dark); }

/* ---------- Catalogue ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.25rem; }
.filtres button { background: none; border: 1px solid var(--filet-fort); padding: 0.55rem 1rem; cursor: pointer;
                  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); }
.filtres button[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--cream); }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 3rem 2rem; }
@media (max-width: 400px) { .grille { grid-template-columns: 1fr; } }
.carte { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.carte-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--light); }
.carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte:hover .carte-img img { transform: scale(1.04); }
.carte-num { position: absolute; top: 1rem; left: 1rem; background: var(--cream); padding: 0.3rem 0.6rem;
             font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; }
.carte-dispo { position: absolute; bottom: 1rem; left: 1rem; background: rgba(250, 248, 243, 0.94);
               padding: 0.35rem 0.7rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
               text-transform: uppercase; display: none; align-items: center; gap: 0.45rem; }
.carte-dispo.vu { display: inline-flex; }
.carte-dispo i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.carte-dispo i.bientot { background: var(--gold); }
.carte-dispo i.complet { background: var(--err); }
.carte-corps { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; padding-top: 1.1rem;
               border-bottom: 1px solid var(--filet); padding-bottom: 1rem; }
.carte-nom { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 600; }
.carte-prix { font-family: 'Playfair Display', serif; font-size: 1.15rem; text-align: right; align-self: end; }
.carte-prix small { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: var(--mid); }
.carte-lieu, .carte-resume { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
.carte-resume { grid-column: 1 / -1; letter-spacing: 0.06em; text-transform: none; font-size: 0.84rem; }
.carte-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 0.9rem;
                 font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.carte-actions .fleche { color: var(--gold); }

/* ---------- Tunnel de réservation ---------- */
.tunnel-barre { background: var(--white); border-bottom: 1px solid var(--filet); }
.tunnel-barre-in { width: min(1280px, 94%); margin: 0 auto; min-height: 84px; display: flex; align-items: center; gap: 2rem; }
.retour { display: inline-flex; align-items: center; gap: 0.7rem; background: none; border: 0; cursor: pointer;
          font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); text-decoration: none; white-space: nowrap; }
.retour:hover { color: var(--dark); }
.retour svg { width: 18px; height: 18px; }
.etapes { flex: 1; display: flex; justify-content: center; gap: 2.5rem; list-style: none; }
.etape { display: flex; align-items: center; gap: 0.8rem; font-size: 0.74rem; letter-spacing: 0.16em;
         text-transform: uppercase; color: var(--mid); }
.etape b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
           background: var(--light); color: var(--mid); font-weight: 500; font-size: 0.8rem; letter-spacing: 0; flex-shrink: 0; }
.etape.faite b { background: var(--gold); color: var(--white); }
.etape.faite b::before { content: ''; width: 12px; height: 6px; border-left: 2px solid currentColor;
                         border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
.etape.faite b span { display: none; }
.etape.encours { color: var(--dark); font-weight: 600; }
.etape.encours b { background: var(--dark); color: var(--white); }
.tunnel-espace { width: 110px; }
/* Tablette et téléphone : les quatre noms restent visibles, en petit, sous les ronds. */
@media (max-width: 900px) {
  .tunnel-espace { display: none; }
  .etapes { gap: 0; justify-content: space-between; min-width: 0; max-width: 420px; margin: 0 auto; }
  .etape { flex: 1 1 0; flex-direction: column; gap: 0.3rem; min-width: 0; text-align: center;
           font-size: 0.62rem; letter-spacing: 0.06em; color: #8A8378; }
  .etape b { width: 30px; height: 30px; font-size: 0.75rem; }
  .etape.encours { color: var(--dark); font-weight: 600; }
  .etape .etape-nom { white-space: nowrap; }
}
@media (max-width: 480px) {
  .tunnel-barre-in { gap: 0.25rem; min-height: 72px; padding: 0.55rem 0; }
  .retour { padding: 0.5rem 0.25rem; }
  .retour span { display: none; }
  .etape { font-size: 0.58rem; letter-spacing: 0.04em; }
  .etape b { width: 26px; height: 26px; }
}

.tunnel { width: min(1180px, 90%); margin: 0 auto; padding: 3.5rem 0 5rem;
          display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 3.5rem; align-items: start; }
@media (max-width: 960px) { .tunnel { grid-template-columns: 1fr; gap: 2.5rem; } .resume { order: -1; } }
.volet[hidden] { display: none; }
.volet .entete { margin-bottom: 2rem; }
.volet .titre { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.25rem;
           padding-top: 1.5rem; border-top: 1px solid var(--filet); }

.resume { background: var(--white); border: 1px solid var(--filet); position: sticky; top: 90px; }
.resume-img { aspect-ratio: 16 / 10; background: var(--light); overflow: hidden; }
.resume-img img { width: 100%; height: 100%; object-fit: cover; }
.resume-corps { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: 1rem; }
.resume-nom { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.lignes { display: grid; gap: 0.55rem; border-top: 1px solid var(--filet); padding-top: 1rem; font-size: 0.88rem; }
.ligne { display: flex; justify-content: space-between; gap: 1rem; }
.ligne span:first-child { color: var(--mid); }
.ligne.total { border-top: 1px solid var(--filet); padding-top: 0.8rem; margin-top: 0.3rem; font-weight: 600; }
.ligne.total span:last-child { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--gold); }
/* Montants à régler à la réservation, sous le récapitulatif. */
.lignes-bloc { display: grid; gap: 0.55rem; margin-top: 0.4rem; padding: 0.9rem 1rem; background: var(--light); }
.lignes-bloc .mono { font-size: 0.64rem; margin-bottom: 0.1rem; }
.lignes-bloc .ligne.total { border-top: 1px solid var(--filet-fort); }

/* Choix du type de séjour (La Mouffe : moyenne ou courte durée). */
.duree-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.5rem; }
.duree-choix button { text-align: left; padding: 0.9rem 1.1rem; border: 1px solid var(--filet-fort); background: var(--white);
                      cursor: pointer; display: grid; gap: 0.2rem; transition: border-color .2s, box-shadow .2s; }
.duree-choix button b { font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.duree-choix button span { font-size: 0.78rem; color: var(--mid); }
.duree-choix button[aria-checked="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: #FBF7EE; }
@media (max-width: 480px) { .duree-choix { grid-template-columns: 1fr; } }

.resume-detail { display: none; }
/* Écran étroit : le résumé passe au-dessus, en bandeau compact et non collant ;
   le détail des prix est replié sur une ligne, qu'un tap déplie. */
@media (max-width: 960px) {
  .resume-detail { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%;
                   background: none; border: 0; border-top: 1px solid var(--filet); padding: 0.7rem 0 0.1rem;
                   font: inherit; font-size: 0.85rem; color: var(--dark); cursor: pointer; text-align: left; }
  .resume-detail strong { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--gold); }
  .resume-detail .fl { flex: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
  .resume-detail .fl::after { content: ' ▾'; }
  .resume.ouvert .resume-detail .fl::after { content: ' ▴'; }
  .resume .lignes { display: none; }
  .resume.ouvert .lignes { display: grid; }
  /* Détail déplié : toute la largeur pour les montants, la photo s'efface. */
  .resume.ouvert { grid-template-columns: 1fr; }
  .resume.ouvert .resume-img { display: none; }
  .resume { position: static; display: grid; grid-template-columns: 140px 1fr; }
  .resume-img { aspect-ratio: auto; height: 100%; min-height: 120px; }
  .resume-corps { padding: 1rem 1.1rem; gap: 0.6rem; }
  .resume-nom { font-size: 1.2rem; }
  .resume .lignes { padding-top: 0.6rem; gap: 0.3rem; font-size: 0.8rem; }
  .resume .note { display: none; }
}
@media (max-width: 480px) { .resume { grid-template-columns: 96px 1fr; } }

/* ---------- Calendrier ---------- */
.dates { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--filet-fort); background: var(--white); margin-bottom: 1.5rem; }
.dates div { padding: 0.9rem 1.1rem; }
.dates div + div { border-left: 1px solid var(--filet); }
.dates b { display: block; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mid); font-weight: 600; }
.dates span { font-family: 'Playfair Display', serif; font-size: 1.15rem; }
.dates span.vide { color: var(--mid); font-family: 'Inter', sans-serif; font-size: 0.9rem; }
.cal { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 640px) { .cal { grid-template-columns: 1fr; } .cal .cal-mois + .cal-mois { display: none; } }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cal-nav button { width: 38px; height: 38px; border: 1px solid var(--filet-fort); background: var(--white); cursor: pointer; font-size: 1.1rem; }
.cal-nav button[disabled] { opacity: 0.3; cursor: default; }
.cal-titre { font-family: 'Playfair Display', serif; font-size: 1.1rem; text-transform: capitalize; margin-bottom: 0.8rem; text-align: center; }
.cal-jours { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-jours span { text-align: center; font-size: 0.64rem; letter-spacing: 0.12em; color: var(--mid); padding-bottom: 0.5rem; }
/* Disponibilités : vert sauge (libre) et rouge rosé (réservé), clairs et mats.
   Mêmes teintes que le calendrier de la fiche logement (index.html). */
.cal-d { aspect-ratio: 1; display: grid; place-items: center; font-size: 0.85rem; border: 0; background: none; border-radius: 3px; }
.cal-d.passe { color: #C4BFB5; }
.cal-d.occupe { background: #F3E1DD; color: #A8665A; text-decoration: line-through; text-decoration-color: rgba(168, 102, 90, 0.45); }
.cal-d.libre { background: #E3EEE2; color: #2F5A3A; cursor: pointer; }
.cal-d.libre:hover { background: #D2E4D1; outline: 1px solid #7FA884; outline-offset: -1px; }
.cal-d.dans { background: #EFD9A2; color: #5E4A1E; }
.cal-d.borne { background: var(--dark); color: var(--white); }
.cal-legende { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 1.2rem; font-size: 0.72rem; color: var(--mid); }
.cal-legende i { display: inline-block; width: 12px; height: 12px; margin-right: 0.4rem; vertical-align: -2px; border-radius: 2px; }
.cal-legende i.l { background: #E3EEE2; border: 1px solid #BDD5BF; }
.cal-legende i.o { background: #F3E1DD; border: 1px solid #E2C2BB; }
.cal-legende i.s { background: var(--dark); border: 1px solid var(--dark); }
.cal-message { margin-top: 1.25rem; }

/* ---------- Espace client ---------- */
.bloc { border-top: 1px solid var(--dark); padding-top: 1.5rem; margin-top: 3rem; }
.bloc h2 { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.5rem; margin-bottom: 1.25rem; }
.resas { display: grid; gap: 1rem; }
.resa { display: grid; grid-template-columns: 120px 1fr auto; gap: 1.25rem; align-items: center;
        background: var(--white); border: 1px solid var(--filet); padding: 0.9rem; }
.resa img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; }
.resa-nom { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; }
.resa-dates { font-size: 0.86rem; color: var(--mid); }
.pastille { display: inline-block; padding: 0.3rem 0.65rem; font-size: 0.64rem; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid currentColor; white-space: nowrap; }
.pastille.demande { color: var(--mid); }
.pastille.attente { color: var(--gold); }
.pastille.prepaye { color: var(--ok); }
.pastille.confirmee { color: var(--white); background: var(--ok); border-color: var(--ok); }
.pastille.annulee { color: var(--err); }
@media (max-width: 600px) { .resa { grid-template-columns: 84px 1fr; } .resa img { width: 84px; } .resa .pastille { grid-column: 2; justify-self: start; } }
.vide-etat { border: 1px dashed var(--filet-fort); padding: 2rem; text-align: center; color: var(--mid); display: grid; gap: 1rem; justify-items: center; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--filet); padding: 2rem 5%; display: flex; justify-content: space-between;
        flex-wrap: wrap; gap: 1rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--dark); }

.cache-robot { position: absolute; left: -9999px; }

/* ---- Téléphone : zones de clic d'au moins ~40 px de haut ---- */
@media (max-width: 720px) {
  .mdp button { padding: 0.7rem 0.6rem; right: 0.2rem; }
  .pied a { display: inline-block; padding: 0.6rem 0.2rem; }
  .note .lien, p .lien { display: inline-block; padding: 0.5rem 0; }
  .page { padding: 3rem 0 4rem; }
  .entete { margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }