/* ══════════════════════════════════════════════════════════════════
   GROOMLY — le tunnel de réservation, /reserver

   Le hero, les boutons et les tokens : voir pages.css.

   POURQUOI CE TUNNEL EXISTE
   Reserver etait possible uniquement dans l'application, ou dans
   l'espace proprietaire — c'est-a-dire derriere un compte. Un visiteur
   qui decouvre Groomly devait donc s'inscrire AVANT de savoir ce que
   son logement coute et si un creneau existe. Ici il compose sa
   demande d'abord, et ne cree son compte qu'au moment de valider.

   CE QUI EST ENVOYE AU SERVEUR
   Rien avant la derniere etape. Les quatre premieres vivent dans le
   navigateur ; la cinquieme appelle POST /api/logements puis
   POST /api/menages — exactement les memes points d'entree que
   l'espace proprietaire et l'application. Aucun chemin de reservation
   parallele n'a ete cree : il n'y a qu'une seule verite.
   ══════════════════════════════════════════════════════════════════ */

.rs {
  position: relative; isolation: isolate;
  background: var(--pg-fond); border-top: 1px solid var(--pg-trait);
  padding: 40px 20px 90px;
}
@media (min-width: 900px) { .rs { padding: 54px 24px 110px; } }
.rs .pg-halo span:nth-child(1) {
  top: -10%; right: -12%; width: 46vw; height: 46vw; max-width: 540px; max-height: 540px;
  background: radial-gradient(circle, rgba(244,63,94,.12) 0%, rgba(244,63,94,0) 70%);
}

/* ══ LE FIL D'ETAPES ═══════════════════════════════════════════
   Une liste ordonnee : l'ordre est une information, et un lecteur
   d'ecran doit l'entendre. « aria-current="step" » designe l'etape
   en cours, c'est l'attribut prevu pour cela. */
.rs-fil { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 0 0 26px; padding: 0; }
.rs-fil li { display: flex; align-items: center; gap: 8px; }
.rs-fil li + li::before {
  content: ""; width: 14px; height: 1px; background: var(--pg-trait);
}
.rs-pas {
  display: inline-flex; align-items: center; gap: 7px;
  /* Gris CLAIR pour une etape a venir, c'etait 2,48 de contraste sur
     le fond : illisible. Les trois etats se distinguent autrement —
     a venir en gris, faite en encre pleine, en cours en rose. */
  font-size: .8rem; font-weight: 600; color: var(--pg-gris);
  padding: 6px 10px; border-radius: 99px; border: 1px solid transparent;
}
.rs-pas b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #eeeef2; color: var(--pg-gris); font-size: .7rem; font-weight: 800;
}
.rs-pas-fait { color: var(--pg-encre); }
.rs-pas-fait b { background: rgba(16,185,129,.16); color: #047857; }
[aria-current="step"] .rs-pas {
  color: #be123c; border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.06);
}
[aria-current="step"] .rs-pas b { background: var(--pg-rose-fonce); color: #fff; }
.rs-libelle { display: none; }
@media (min-width: 760px) { .rs-libelle { display: inline; } }

/* ══ LA GRILLE : formulaire + panneau de prix ══════════════════ */
.rs-grille { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
.rs-grille > * { min-width: 0; }
@media (min-width: 980px) { .rs-grille { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 28px; } }

.rs-carte {
  background: var(--pg-blanc); border: 1px solid var(--pg-trait);
  border-radius: 22px; padding: 26px 22px 28px;
  box-shadow: 0 30px 64px -46px rgba(20, 20, 45, .4);
}
@media (min-width: 640px) { .rs-carte { padding: 32px 30px 34px; } }

.rs-etape[hidden] { display: none; }
.rs-etape h2 {
  margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 800;
  letter-spacing: -.035em; color: var(--pg-encre); text-wrap: balance;
}
.rs-etape > p { margin: 10px 0 0; font-size: .95rem; line-height: 1.6; color: var(--pg-gris); max-width: 56ch; }

.rs-champs { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
@media (min-width: 620px) { .rs-deux { grid-template-columns: 1fr 1fr; } }

.rs-champ { display: flex; flex-direction: column; gap: 7px; }
.rs-champ label, .rs-legende {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pg-gris);
}
.rs-saisie {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  border: 1px solid var(--pg-trait); background: var(--pg-blanc);
  font: inherit; font-size: 1rem; color: var(--pg-encre);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rs-saisie:focus {
  outline: none; border-color: rgba(244,63,94,.45);
  box-shadow: 0 0 0 4px rgba(244,63,94,.1);
}
.rs-saisie:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; }
/* Un champ invalide ne se signale pas qu'en rouge : la couleur seule
   exclut les daltoniens. Le message texte sous le champ fait foi. */
.rs-saisie[aria-invalid="true"] { border-color: #b91c1c; }
.rs-erreur { font-size: .82rem; font-weight: 600; color: #b91c1c; }
.rs-erreur[hidden] { display: none; }
.rs-aide { font-size: .8rem; color: var(--pg-gris); }

/* ── Les deux engagements de l'etape 5 ───────────────────────────
   Deux cases distinctes, et pas une seule : la renonciation au droit
   de retractation doit etre exprimee a part de l'acceptation des
   conditions generales (art. L.221-25 du Code de la consommation).
   Elles sont donc visuellement separees, pas empilees sans air. */
.rs-engagements {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--pg-trait);
  display: flex; flex-direction: column; gap: 14px;
}
.rs-engagement {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; font-size: .88rem; line-height: 1.55;
  color: var(--pg-encre);
}
.rs-engagement input[type="checkbox"] {
  /* 20 px, et non la taille par defaut de 13 px : au pouce, une case
     de 13 px se rate une fois sur trois. */
  width: 20px; height: 20px; flex: none; margin: 1px 0 0;
  accent-color: var(--pg-rose-fonce); cursor: pointer;
}
.rs-engagement input:focus-visible {
  outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px;
}
.rs-engagement a { color: var(--pg-rose-fonce); font-weight: 600; }
.rs-engagement a:hover { text-decoration: underline; }
#rs-erreur-engagements[hidden] { display: none; }

/* ── Choix en cartes (type de logement, créneau) ─────────────── */
.rs-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 620px) { .rs-choix { grid-template-columns: repeat(4, 1fr); } }
.rs-choix-2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .rs-choix-2 { grid-template-columns: 1fr 1fr; } }

.rs-opt {
  /* « position: relative » n'est pas decoratif : le bouton radio est
     pose en absolu a l'interieur. Sans reference ici, il se calerait
     sur la section entiere et pourrait elargir la page. */
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border-radius: 14px; cursor: pointer; text-align: center;
  border: 1px solid var(--pg-trait); background: var(--pg-blanc);
  font-size: .88rem; font-weight: 600; color: var(--pg-encre);
  transition: border-color .2s ease, background .2s ease, transform .2s var(--pg-sortie);
}
.rs-opt svg { width: 22px; height: 22px; color: var(--pg-gris); }
.rs-opt small { font-size: .75rem; font-weight: 500; color: var(--pg-gris); }
.rs-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rs-opt:hover { border-color: var(--pg-gris-clair); }
.rs-opt:has(input:checked) {
  border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.06); color: #be123c;
}
.rs-opt:has(input:checked) svg { color: var(--pg-rose-fonce); }
.rs-opt:has(input:focus-visible) { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; }

/* ── Surface ─────────────────────────────────────────────────── */
.rs-surface { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.rs-surface b {
  font-size: 2rem; font-weight: 800; letter-spacing: -.04em; color: var(--pg-encre);
  font-variant-numeric: tabular-nums;
}
/* « > » obligatoire : sans lui, ce selecteur (0,1,1) attrape aussi le
   <span> du chiffre, qui vit DANS le <b>, et le rend plus petit que son
   unite — « 45 » minuscule a cote d'un « m² » enorme. */
.rs-surface > span { font-size: .95rem; color: var(--pg-gris); }
.rs-curseur { width: 100%; height: 26px; accent-color: var(--pg-rose-fonce); }
.rs-curseur:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 4px; }
.rs-bornes { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--pg-gris); }
.rs-palier { flex: 1; text-align: center; font-weight: 650; color: #be123c; font-size: .8rem; }

/* ── Prestations ─────────────────────────────────────────────── */
.rs-prestas { display: flex; flex-direction: column; gap: 9px; }
.rs-presta {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--pg-trait); background: var(--pg-blanc);
  transition: border-color .2s ease, background .2s ease;
}
.rs-presta:hover { border-color: var(--pg-gris-clair); }
.rs-presta:has(input:checked) { border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.05); }
.rs-presta:has(input:focus-visible) { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; }
.rs-presta input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--pg-rose-fonce); }
.rs-presta-txt { flex: 1; min-width: 0; }
.rs-presta-txt b { display: block; font-size: .95rem; font-weight: 700; color: var(--pg-encre); }
.rs-presta-txt span { display: block; margin-top: 2px; font-size: .82rem; color: var(--pg-gris); }
.rs-presta-prix { flex: none; font-size: .9rem; font-weight: 800; color: var(--pg-rose-fonce); }
.rs-presta-fixe { cursor: default; background: var(--pg-fond); }

.rs-lits { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; padding-left: 4px; }
.rs-lits[hidden] { display: none; }
.rs-lit { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--pg-gris); }
.rs-lit input { width: 64px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--pg-trait); font: inherit; color: var(--pg-encre); }

/* ── Récapitulatif ───────────────────────────────────────────── */
.rs-recap { display: flex; flex-direction: column; gap: 0; margin-top: 22px; }
.rs-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: .92rem; }
.rs-ligne + .rs-ligne { border-top: 1px solid var(--pg-trait); }
.rs-ligne span { color: var(--pg-gris); }
.rs-ligne b { color: var(--pg-encre); font-weight: 700; text-align: right; }
.rs-modifier {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 650; color: var(--pg-rose-fonce); text-decoration: underline;
  text-underline-offset: 3px;
}
.rs-modifier:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; border-radius: 4px; }

/* ── Barre de navigation du tunnel ───────────────────────────── */
.rs-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--pg-trait); }
.rs-retour {
  background: none; border: 0; padding: 10px 4px; cursor: pointer; font: inherit;
  font-size: .92rem; font-weight: 600; color: var(--pg-gris);
}
.rs-retour:hover { color: var(--pg-encre); }
.rs-retour:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; border-radius: 6px; }
.rs-suivant { margin-left: auto; border: 0; cursor: pointer; font: inherit; }
.rs-suivant[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ══ LE PANNEAU DE PRIX ════════════════════════════════════════ */
.rs-panneau {
  border: 1px solid var(--pg-trait); border-radius: 22px; overflow: hidden;
  background: var(--pg-blanc);
  box-shadow: 0 26px 56px -46px rgba(20, 20, 45, .38);
}
@media (min-width: 980px) { .rs-panneau { position: sticky; top: calc(var(--nv-hauteur, 68px) + 24px); } }

.rs-ecran {
  padding: 24px 22px 20px; text-align: center;
  background: linear-gradient(165deg, rgba(244,63,94,.10), rgba(139,92,246,.08) 70%, rgba(255,255,255,0));
  border-bottom: 1px solid var(--pg-trait);
}
.rs-quoi { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #be123c; }
.rs-total {
  margin: 7px 0 0; font-size: clamp(2.2rem, 6vw, 2.8rem); font-weight: 900;
  letter-spacing: -.05em; color: var(--pg-encre); line-height: 1; font-variant-numeric: tabular-nums;
}
.rs-duree { margin: 9px 0 0; font-size: .9rem; color: var(--pg-gris); }
.rs-devis {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 11px;
  background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.32);
  font-size: .82rem; line-height: 1.5; color: #8a5a08;
}
.rs-devis[hidden] { display: none; }
.rs-detail { padding: 16px 22px 4px; }
.rs-mention { margin: 0; padding: 12px 22px 22px; font-size: .76rem; line-height: 1.55; color: var(--pg-gris); }

/* ══ ETATS DE FIN ══════════════════════════════════════════════ */
.rs-message {
  margin-top: 22px; padding: 18px 20px; border-radius: 14px;
  font-size: .92rem; line-height: 1.6;
  border: 1px solid var(--pg-trait); background: var(--pg-fond); color: var(--pg-gris);
}
.rs-message[hidden] { display: none; }
.rs-message b { display: block; color: var(--pg-encre); font-weight: 700; margin-bottom: 5px; }
.rs-message-erreur { border-color: rgba(185,28,28,.35); background: rgba(185,28,28,.05); color: #7f1d1d; }
.rs-message-ok { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.07); color: #065f46; }

.rs-comptes { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
@media (min-width: 620px) { .rs-comptes { grid-template-columns: 1fr 1fr; } }
.rs-compte {
  display: block; padding: 20px; border-radius: 16px; text-decoration: none;
  border: 1px solid var(--pg-trait); background: var(--pg-blanc);
  transition: border-color .2s ease, transform .2s var(--pg-sortie), box-shadow .2s ease;
}
.rs-compte:hover { border-color: rgba(244,63,94,.35); transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(20,20,45,.35); }
.rs-compte b { display: block; font-size: 1rem; font-weight: 700; color: var(--pg-encre); }
.rs-compte span { display: block; margin-top: 6px; font-size: .87rem; line-height: 1.55; color: var(--pg-gris); }

@media (prefers-reduced-motion: reduce) {
  .rs-opt, .rs-presta, .rs-saisie, .rs-compte { transition: none; }
  .rs-compte:hover { transform: none; }
}

/* ══ LES LOGEMENTS DEJA ENREGISTRES ════════════════════════════
   Visible seulement pour qui est connecte et en a au moins un. Le
   bloc est marque « hidden » dans le gabarit ; reserver.js le devoile
   apres avoir lu /api/logements.

   Il ne s'agit pas d'un raccourci de confort. Chez Groomly les
   prestations appartiennent au LOGEMENT, pas a la reservation :
   ressaisir l'adresse d'un appartement deja enregistre creait un
   SECOND logement identique, et la liste de l'espace proprietaire se
   remplissait de doublons a chaque reservation. */
.rs-connus { margin-top: 22px; }
.rs-connus[hidden] { display: none; }
.rs-connus-liste { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 620px) { .rs-connus-liste { grid-template-columns: 1fr 1fr; } }

.rs-connu {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 15px 16px; border-radius: 15px; cursor: pointer; text-align: left;
  border: 1px solid var(--pg-trait); background: var(--pg-blanc); font: inherit;
  transition: border-color .2s ease, transform .2s var(--pg-sortie), box-shadow .2s ease;
}
.rs-connu:hover {
  border-color: rgba(244,63,94,.4); transform: translateY(-2px);
  box-shadow: 0 18px 36px -28px rgba(20,20,45,.38);
}
.rs-connu:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; }
.rs-connu-icone {
  flex: none; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(244,63,94,.08); color: var(--pg-rose-fonce);
}
.rs-connu-icone svg { width: 18px; height: 18px; }
/* Le texte porte une CLASSE. Un « .rs-connu span » viserait aussi la
   pastille et ecraserait son « display: flex » : l'icone se collerait
   dans le coin. Ce piege a deja coute trois corrections sur ce site. */
.rs-connu-txt { min-width: 0; flex: 1; }
.rs-connu-txt b {
  display: block; font-size: .95rem; font-weight: 700; color: var(--pg-encre);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rs-connu-txt span {
  display: block; margin-top: 3px; font-size: .81rem; line-height: 1.5; color: var(--pg-gris);
}
.rs-connu-prix {
  flex: none; font-size: .9rem; font-weight: 800; color: var(--pg-rose-fonce);
  font-variant-numeric: tabular-nums;
}

.rs-autre {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 11px 16px; border-radius: 12px; cursor: pointer; font: inherit;
  font-size: .88rem; font-weight: 650; color: var(--pg-encre);
  border: 1px dashed var(--pg-trait); background: none;
  transition: border-color .2s ease, background .2s ease;
}
.rs-autre svg { width: 16px; height: 16px; color: var(--pg-gris); }
.rs-autre:hover { border-color: var(--pg-gris-clair); background: var(--pg-fond); }
.rs-autre:focus-visible { outline: 2px solid var(--pg-rose-fonce); outline-offset: 2px; }
.rs-autre[hidden] { display: none; }

#rs-nouveau[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rs-connu, .rs-autre { transition: none; }
  .rs-connu:hover { transform: none; }
}