/* Page publique de réservation : les tons chauds du bandeau (craie,
   terre cuite, laiton) sur la typographie de l'ERP. */

.resa {
  --r-fond: #f6f1ea;
  --r-carte: #ffffff;
  --r-encre: #2a2622;
  --r-encre-2: #5c544b;
  --r-encre-3: #847a6f;
  --r-ligne: #e4dacd;
  --r-ligne-forte: #cdbfae;
  --r-accent: #9a5434;
  --r-accent-fonce: #7b4128;
  --r-accent-doux: #f6e7dd;
  --r-laiton: #b08530;
  --r-ok: #2f6b4f;
  --r-ok-doux: #e5f1ea;
  --r-erreur: #a3361f;
  --r-rayon: 12px;
  color-scheme: light;
  background: var(--r-fond);
  color: var(--r-encre);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.resa a { color: var(--r-accent); }
.resa a:hover { color: var(--r-accent-fonce); }

/* En-tête : le bandeau, puis le nom */
.resa-tete { background: var(--r-carte); border-bottom: 1px solid var(--r-ligne); }
.resa-bandeau {
  display: block; width: 100%; height: clamp(110px, 21vw, 250px);
  object-fit: cover; object-position: 42% 46%;
}
.resa-marque {
  margin: 0; padding: .7rem 16px; text-align: center;
  font-size: .78rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--r-encre-2);
}

.resa-main { width: 100%; max-width: 960px; margin: 0 auto; padding: 2rem 16px 4rem; flex: 1; }
.resa h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: -.015em; margin-bottom: .4rem; }
.resa-intro { max-width: 40rem; margin-bottom: 1.75rem; }
.resa-intro p { color: var(--r-encre-2); font-size: 1.05rem; margin: 0; }
.resa-note { color: var(--r-encre-3); font-size: .9rem; margin: 1rem 0 0; }
.resa-fac { color: var(--r-encre-3); font-weight: 400; font-size: .88em; }

/* Les types de rendez-vous */
.resa-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.resa-type {
  display: flex; gap: 1rem; align-items: flex-start; height: 100%;
  padding: 1.25rem 1.25rem 1.2rem; border-radius: var(--r-rayon);
  background: var(--r-carte); border: 1px solid var(--r-ligne); color: var(--r-encre); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.resa a.resa-type { color: var(--r-encre); }
.resa-type:hover { border-color: var(--r-accent); box-shadow: 0 6px 20px rgba(80, 50, 30, .08); transform: translateY(-1px); }
.resa-type:focus-visible { outline: 3px solid rgba(154, 84, 52, .35); outline-offset: 2px; }
.resa-ico {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--r-accent-doux); color: var(--r-accent);
}
.resa-type-txt { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.resa-type-nom { font-weight: 600; font-size: 1.08rem; }
.resa-type-meta { color: var(--r-accent-fonce); font-size: .9rem; font-weight: 500; }
.resa-type-desc { color: var(--r-encre-2); font-size: .93rem; }
.resa-fleche { flex: none; align-self: center; color: var(--r-accent); font-size: 1.3rem; transition: transform .15s; }
.resa-type:hover .resa-fleche { transform: translateX(3px); }

.resa-carte { background: var(--r-carte); border: 1px solid var(--r-ligne); border-radius: var(--r-rayon); padding: 1.5rem; }

/* Page d'un type */
.resa-retour { margin: 0 0 1rem; font-size: .92rem; }
.resa-retour a { text-decoration: none; }
.resa-titre { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.resa-titre h1 { margin-bottom: .2rem; }
.resa-meta { margin: 0; color: var(--r-accent-fonce); font-weight: 500; }
.resa-desc { margin: .3rem 0 0; color: var(--r-encre-2); }
.resa-alerte {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 8px;
  background: #fbe9e4; color: var(--r-erreur); border: 1px solid #efc3b7;
}
.resa-err { margin: 0 0 .75rem; color: var(--r-erreur); font-weight: 500; }
.resa .field-error { color: var(--r-erreur); }
.resa [aria-invalid="true"] { border-color: var(--r-erreur); }

.resa-etape {
  background: var(--r-carte); border: 1px solid var(--r-ligne); border-radius: var(--r-rayon);
  padding: 1.4rem 1.4rem 1.5rem; margin-bottom: 14px; scroll-margin-top: 12px;
}
.resa-etape h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin-bottom: 1rem; }
.resa-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--r-accent); color: #fff; font-size: .9rem; font-weight: 600; flex: none;
}

/* Les semaines et les heures */
.resa-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.resa-periode { margin: 0; font-weight: 600; text-align: center; }
.resa-periode:focus { outline: none; }
.resa-nav-btn {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none;
  border: 1px solid var(--r-ligne-forte); background: var(--r-carte); font-size: 1.5rem; line-height: 1; text-decoration: none;
}
.resa a.resa-nav-btn { color: var(--r-accent); }
.resa-nav-btn:hover { background: var(--r-accent-doux); border-color: var(--r-accent); }
.resa-nav-btn.is-off { color: var(--r-ligne-forte); border-color: var(--r-ligne); }
.resa-vide { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--r-fond); border-radius: 8px; color: var(--r-encre-2); }
.resa-jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; }
.resa-jour { border: 0; margin: 0; padding: 0; min-width: 0; }
.resa-jour-nom {
  display: block; width: 100%; padding: .45rem .25rem; margin-bottom: .5rem; text-align: center;
  font-weight: 600; font-size: .92rem; border-bottom: 2px solid var(--r-ligne);
}
.resa-jour-nom::first-letter { text-transform: uppercase; }
.resa-jour.is-passe .resa-jour-nom, .resa-jour.is-passe .resa-complet { color: var(--r-ligne-forte); }
.resa-jour.is-vide .resa-jour-nom { color: var(--r-encre-3); }
.resa-heures { display: flex; flex-direction: column; gap: 7px; }
.resa-heure { position: relative; display: block; }
.resa-heure input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.resa-heure span {
  display: block; padding: .55rem .3rem; text-align: center; border-radius: 8px;
  border: 1px solid var(--r-ligne-forte); background: var(--r-carte); color: var(--r-accent-fonce);
  font-weight: 500; font-variant-numeric: tabular-nums; transition: background .12s, border-color .12s;
}
.resa-heure:hover span { background: var(--r-accent-doux); border-color: var(--r-accent); }
.resa-heure input:checked + span { background: var(--r-accent); border-color: var(--r-accent); color: #fff; }
.resa-heure input:focus-visible + span { outline: 3px solid rgba(154, 84, 52, .35); outline-offset: 1px; }
.resa-complet { margin: 0; text-align: center; color: var(--r-encre-3); font-size: .88rem; padding: .5rem 0; }

/* Le formulaire */
.resa-champ { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.resa-champ legend { padding: 0; margin-bottom: .5rem; }
.resa .label, .resa .field > label { font-weight: 500; color: var(--r-encre); }
.resa-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; margin-bottom: 1rem; }
.resa-cp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-top: 1rem; }
.resa .field { margin-bottom: 0; }
.resa-etape > .field { margin-bottom: 1.1rem; }
.resa-connu { max-width: 26rem; }
.resa input:not([type="checkbox"]):not([type="radio"]), .resa select, .resa textarea {
  border-color: var(--r-ligne-forte); min-height: 46px; font-size: 1rem;
}
.resa input:focus, .resa select:focus, .resa textarea:focus { border-color: var(--r-accent); box-shadow: 0 0 0 3px rgba(154, 84, 52, .2); }
.resa .choice span { border-color: var(--r-ligne-forte); padding: .5rem .9rem; }
.resa .choice input:checked + span { background: var(--r-accent-doux); border-color: var(--r-accent); color: var(--r-accent-fonce); }
.resa .choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(154, 84, 52, .25); }
.resa-aide { display: block; margin: .45rem 0 0; color: var(--r-encre-3); font-size: .88rem; }
.resa-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.resa-envoi {
  background: var(--r-carte); border: 1px solid var(--r-ligne); border-radius: var(--r-rayon);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem;
}
.resa-choix { margin: 0; padding: .8rem 1rem; border-radius: 8px; background: var(--r-fond); color: var(--r-encre-2); }
.resa-choix.is-choisi { background: var(--r-accent-doux); color: var(--r-accent-fonce); }
.resa-accord { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; color: var(--r-encre-2); font-size: .95rem; }
.resa-accord input { margin-top: .2rem; accent-color: var(--r-accent); width: 20px; height: 20px; flex: none; }
.resa-btn {
  font: inherit; font-weight: 600; font-size: 1.05rem; color: #fff; background: var(--r-accent);
  border: 0; border-radius: 10px; padding: .95rem 1.6rem; cursor: pointer; align-self: flex-start; min-height: 52px;
  transition: background .15s;
}
.resa-btn:hover { background: var(--r-accent-fonce); }
.resa-btn:focus-visible { outline: 3px solid rgba(154, 84, 52, .4); outline-offset: 2px; }
.resa-envoi .resa-note { margin: 0; }

/* Barre du bas (téléphone) : l'heure choisie, pour continuer */
.resa-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom));
  background: var(--r-carte); border-top: 1px solid var(--r-ligne); box-shadow: 0 -6px 20px rgba(60, 40, 20, .1);
}
.resa-barre[hidden] { display: none; }
.resa-barre-txt { font-weight: 500; font-size: .95rem; }
.resa a.resa-barre-btn {
  flex: none; color: #fff; background: var(--r-accent); text-decoration: none; font-weight: 600;
  padding: .65rem 1.1rem; border-radius: 8px;
}
@media (min-width: 761px) { .resa-barre { display: none !important; } }

/* Merci */
.resa-merci { max-width: 38rem; margin: 0 auto; text-align: left; }
.resa-ok {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1rem;
  background: var(--r-ok-doux); color: var(--r-ok); font-size: 1.6rem; font-weight: 600;
}
.resa-recap { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 1.25rem 0; padding: 1rem 1.1rem; background: var(--r-fond); border-radius: 8px; }
.resa-recap dt { color: var(--r-encre-3); }
.resa-recap dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.resa-info { padding: .8rem 1rem; border-radius: 8px; background: #fbf3e2; color: #6e4e12; }

/* Pied */
.resa-pied { text-align: center; padding: 1.5rem 16px 2rem; color: var(--r-encre-3); font-size: .9rem; border-top: 1px solid var(--r-ligne); }
.resa-pied p { margin: .2rem 0; }
.resa-pied strong { color: var(--r-encre-2); }

@media (max-width: 760px) {
  .resa-main { padding-top: 1.25rem; padding-bottom: 6rem; }
  .resa-types { grid-template-columns: 1fr; }
  .resa-etape, .resa-envoi { padding: 1.1rem 1rem 1.2rem; }
  .resa-grille { grid-template-columns: 1fr; }
  .resa-cp { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .resa-jours { grid-template-columns: 1fr; gap: 14px; }
  .resa-jour-nom { text-align: left; padding: 0 0 .35rem; }
  .resa-jour.is-passe { display: none; }
  .resa-complet { text-align: left; padding: .1rem 0; }
  .resa-heures { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .resa-heure { flex: 0 0 calc((100% - 24px) / 4); }
  .resa-btn { align-self: stretch; }
  .resa-titre .resa-ico { display: none; }
  .resa-recap { grid-template-columns: 1fr; gap: .1rem; }
  .resa-recap dd { margin-bottom: .5rem; }
}
@media (max-width: 360px) {
  .resa-heure { flex-basis: calc((100% - 16px) / 3); }
}
@media (prefers-reduced-motion: reduce) {
  .resa-type, .resa-fleche, .resa-heure span { transition: none; }
}
.resa-choix.is-erreur { background: #fbe9e4; color: var(--r-erreur); font-weight: 500; }
.resa-de { margin: .9rem 0 0; padding: .7rem 1rem; border-radius: 8px; background: var(--r-ok-doux); color: var(--r-ok); font-weight: 500; }