/* ==========================================================================
   WAKAME - Page « Réservation »

   Reprend les jetons de la landing page (--ink, --red, --paper, --brown,
   --gold…, définis dans wakame.css, chargée avant celle-ci) : fond sombre
   --ink en arrière-plan, panneau --paper posé dessus comme les cartes
   blanches du reste du site (.wk-book__card, .wk-sheet), rouge --red pour
   toute sélection/action primaire, --gold réservé aux repères ponctuels
   (aujourd'hui, ticket de confirmation).
   ========================================================================== */

/* ── Section fond ── */

/* Le visuel de fond vient de /admin/images (emplacement CMS
   « reservation_fond »), donc de Cloudinary et de nulle part ailleurs : le
   gabarit pose --resa-fond en style en ligne quand une image a été déposée
   (voir views/pages/reservation.ejs).

   Sans image, la page reste sur son crème uni : pas de repli sur un fichier de
   public/img, qui ferait croire à une image choisie alors que personne ne
   l'aurait déposée. Le voile sombre part avec l'image - il n'existe que pour
   rendre la carte lisible sur une photo. */
.resa-bg {
  height: 100vh;
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: var(--cream);
  background-image: var(--resa-fond, none);
  background-size: cover;
  background-position: center;
}

/* ── Retour ──
   Calé sur la vue, pas sur la carte : la réservation est une page pleine
   (layout-wakame-bare, sans en-tête de site), le coin haut-gauche de l'écran
   est donc libre et c'est là qu'on va chercher un retour.

   Pastille sombre translucide : le fond est une photo assombrie dont les
   valeurs varient d'un endroit à l'autre, une flèche nue y serait lisible
   par endroits seulement. */
.resa-retour {
  position: fixed;
  top: clamp(.75rem, 2.4vh, 1.5rem);
  left: clamp(.75rem, 2.4vw, 1.5rem);
  z-index: 50;
  display: grid;
  place-items: center;
  width: calc(110 * var(--u));      /* 44 px : cible tactile minimale */
  height: calc(110 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / .45);
  color: var(--cream);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / .3);
  backdrop-filter: blur(6px);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              transform .2s var(--ease);
}
.resa-retour:hover {
  background: var(--red);
  color: var(--paper);
  transform: translateX(-2px);      /* elle recule : le geste dit la direction */
}
.resa-retour .msr { font-size: calc(56 * var(--u)); }

/* ── Modal ── */

.resa-modal {
  background-color: var(--paper);
  width: min(900px, 100%);
  height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-panel);
  box-shadow: 0 24px 72px rgb(0 0 0 / .4);
}

/* ── Barre de progression ── */

.resa-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 3px;
  flex-shrink: 0;
}

.resa-prog-seg {
  background-color: rgb(45 20 8 / .12);
  transition: background-color .3s var(--ease);
}

.resa-prog-seg.done {
  background-color: var(--red);
}

/* ── En-tête ── */

.resa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgb(255 247 247 / .14);
  flex-shrink: 0;
}

.resa-header-left {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

/* Le logotype reprend la police de l'en-tête du site (« Edo SZ », jeton
   --f-display) et non celle des titres. Pas d'interlettrage : c'est une brosse,
   ses traits sont dessinés pour se toucher. La hauteur de ligne est ramenée à 1
   et le corps grossi d'autant - une brosse à 17 px n'est plus lisible - ce qui
   laisse l'en-tête à la hauteur qu'il avait. */
.resa-brand {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.resa-brand:hover {
  color: var(--cream);
}

.resa-step-indicator {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 247 247 / .55);
}

.resa-header-right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.resa-header-tag {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 247 247 / .55);
}

.resa-close {
  background: none;
  border: none;
  font-size: 0.95rem;
  color: rgb(255 247 247 / .7);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 1;
  transition: color 0.2s var(--ease);
}

.resa-close:hover {
  color: var(--cream);
}

/* ── Steps ── */

@keyframes resa-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.resa-step {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.resa-step.active {
  display: flex;
  animation: resa-fade-in 0.28s ease forwards;
}

.resa-step-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.8rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.resa-title {
  font-family: var(--f-hand);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.27;
  text-transform: uppercase;
  color: var(--brown);
  flex-shrink: 0;
}

.resa-title em {
  font-style: normal;
  color: var(--red);
}

/* ── Footer des étapes ── */

.resa-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 2.5rem;
  border-top: 1px solid rgb(45 20 8 / .12);
  gap: 1rem;
}

/* Pied d'étape à un seul bouton : sans cela, « space-between » le colle à
   gauche alors que le bouton d'action est à droite partout ailleurs. */
.resa-footer--fin { justify-content: flex-end; }

.resa-footer-hint {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
}

/* Le bouton d'étape est le bouton plein du site : il porte .wk-btn--fill
   (wakame.css, chargée avant cette feuille) et n'ajuste ici que sa taille,
   l'encart des étapes étant plus compact que les sections de l'accueil. Le
   rouge, le liseré, les dégradés, l'ombre, le survol et l'état désactivé
   viennent du composant : ils étaient recopiés à la main ici, et avaient déjà
   divergé (ombre plus courte, aucun dégradé). */
.resa-btn-next {
  min-height: 0;
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
  letter-spacing: .01em;
}

.resa-btn-back {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.85rem;
  background: none;
  border: none;
  color: rgb(45 20 8 / .55);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s var(--ease);
}

.resa-btn-back:hover {
  color: var(--red);
}

/* ─────────────────────────────────────
   ÉTAPE 1 - Calendrier
───────────────────────────────────── */

.resa-step1-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2.5rem;
  align-items: start;
}

.resa-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.resa-cal-month-label {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
}

.resa-cal-nav {
  background: none;
  border: 1px solid rgb(45 20 8 / .25);
  border-radius: var(--r-btn);
  color: var(--brown);
  width: 1.9rem;
  height: 1.9rem;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.resa-cal-nav:hover {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.resa-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.4rem;
}

.resa-cal-weekdays span {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
  text-align: center;
  padding: 0.3rem 0;
}

.resa-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 1.1rem;
  cursor: pointer;
  position: relative;
  color: var(--brown);
  border-radius: var(--r-btn);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  user-select: none;
}

.cal-day:hover:not(.closed):not(.empty):not(.selected) {
  background-color: rgb(45 20 8 / .08);
}

.cal-day.selected:hover {
  background-color: var(--red);
  color: var(--paper);
}

.cal-day.today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
}

.cal-day.selected {
  background-color: var(--red);
  color: var(--paper);
}

.cal-day.selected.today::after {
  background-color: var(--gold);
}

.cal-day.closed {
  color: rgb(45 20 8 / .35);
  cursor: not-allowed;
  text-decoration: line-through;
}

.cal-day.empty {
  cursor: default;
}

.resa-cal-legend {
  display: flex;
  gap: 1.4rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: .8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
}

.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
  display: inline-block;
  flex-shrink: 0;
}

.legend-closed-ex {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.62rem;
  text-decoration: line-through;
  color: rgb(45 20 8 / .35);
  display: inline-block;
}

.legend-sel {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background-color: var(--red);
  display: inline-block;
  flex-shrink: 0;
}

/* Panneau de sélection de date */

.resa-date-panel {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.resa-date-display {
  display: flex;
  flex-direction: column;
}

.resa-sub-label {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
  display: block;
  margin-bottom: 0.65rem;
}

.resa-date-big {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1.45rem;
  color: var(--brown);
  line-height: 1.3;
}

.resa-date-sub {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
  margin-top: 0.5rem;
}

/* ─────────────────────────────────────
   ÉTAPE 2 - Service & couverts
───────────────────────────────────── */

/* Recap bar (pills) */

.resa-recap-bar {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.resa-recap-pill {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
  border: 1px solid rgb(45 20 8 / .28);
  border-radius: var(--r-btn);
  padding: 0.28rem 0.75rem;
}

/* Blocs */

.resa-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

.resa-block-label {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
}

/* Préférences - comptoir du tapis, accessibilité, chaise haute.

   Ces questions ne sont pas décoratives : une préférence « impérativement au
   tapis » retire des créneaux de la grille, et l'étape 2 se recalcule à chaque
   clic (EF-8.6). D'où le libellé de bloc écrit en toutes lettres plutôt qu'une
   simple étiquette - le client doit comprendre ce qu'il change. */

.resa-block--prefs { gap: 0.5rem; }
.resa-block--couverts { margin-bottom: 1.2rem; }

/* Le calendrier en attente : il occupe toute la grille pour que les jours ne
   sautent pas d'une place quand ils arrivent. */
.cal-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgb(45 20 8 / .45);
}

.resa-choix {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.resa-choix-btn {
  border: 1px solid rgb(45 20 8 / .2);
  border-radius: 999px;
  background: transparent;
  padding: 0.5rem 1rem;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--brown);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.resa-choix-btn:hover:not(.active) { border-color: rgb(45 20 8 / .45); }

.resa-choix-btn.active {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

/* Le compte à rebours de la mise en attente : le client sait que sa table est
   tenue, et pour combien de temps encore (§8.5). Quand le délai tombe, le même
   emplacement porte le message de perte - au même endroit, pour qu'il ne
   puisse pas être manqué. */

.resa-hold {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-btn);
  background: rgb(45 20 8 / .05);
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgb(45 20 8 / .7);
  font-variant-numeric: tabular-nums;
}

.resa-hold--perdu {
  background: rgb(216 50 50 / .1);
  color: var(--red);
  font-weight: 600;
}

.resa-slots-note,
.resa-slots-chargement {
  margin: 0;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  color: rgb(45 20 8 / .55);
}

.resa-slot-tag {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .45);
}

.resa-slot.active .resa-slot-tag { color: rgb(255 247 247 / .75); }

/* Page « ma réservation » : le même gabarit, en plus court. */

.resa-modal--court { min-height: auto; }
.resa-ticket--seul { margin-top: 1.5rem; }

.resa-mr-note,
.resa-mr-chargement {
  margin-top: 1.2rem;
  font-family: var(--f-ui);
  font-size: 0.75rem;
  color: rgb(45 20 8 / .55);
}

/* Cartes de service */

.resa-service-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.resa-service-card {
  border: 1px solid rgb(45 20 8 / .2);
  border-radius: var(--r-card);
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.resa-service-card:hover:not(.active) {
  border-color: rgb(45 20 8 / .45);
}

.resa-service-card.active {
  background-color: var(--red);
  border-color: var(--red);
}

.resa-service-name {
  font-family: var(--f-hand);
  font-size: 1.2rem;
  text-transform: uppercase;
  color: var(--brown);
}

.resa-service-card.active .resa-service-name {
  color: var(--paper);
}

.resa-service-hours {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgb(45 20 8 / .5);
}

.resa-service-card.active .resa-service-hours {
  color: var(--cream);
}

/* Créneaux horaires */

.resa-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.resa-slot {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  border: 1px solid rgb(45 20 8 / .22);
  border-radius: var(--r-btn);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  color: var(--brown);
}

.resa-slot:hover:not(.active) {
  border-color: var(--red);
}

.resa-slot.active {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

/* Boutons couverts */

.resa-covers-grid {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.resa-cover-btn {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(45 20 8 / .22);
  border-radius: var(--r-btn);
  background: none;
  color: var(--brown);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.resa-cover-btn:hover:not(.active) {
  border-color: var(--red);
}

.resa-cover-btn.active {
  background-color: var(--red);
  border-color: var(--red);
  color: var(--paper);
}

.resa-covers-note {
  font-family: var(--f-ui);
  font-weight: 400;
  font-style: italic;
  font-size: 0.62rem;
  line-height: 1.6;
  color: rgb(45 20 8 / .5);
}

/* ─────────────────────────────────────
   ÉTAPE 3 - Coordonnées
───────────────────────────────────── */

.resa-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.resa-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.resa-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.resa-form-group-full {
  grid-column: 1 / -1;
}

.resa-form-label {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
}

/* Astérisque des champs obligatoires : même rouge que les sélections, et sa
   légende ouvre l'étape pour que le repère soit lu avant les champs. */
.resa-req {
  color: var(--red);
}

.resa-form-legend {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
  margin: 0;
}

.resa-form-input {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--brown);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgb(45 20 8 / .3);
  padding: 0.55rem 0;
  outline: none;
  transition: border-color 0.2s var(--ease);
  width: 100%;
}

.resa-form-input:focus {
  border-bottom-color: var(--red);
}

.resa-form-input::placeholder {
  color: rgb(45 20 8 / .4);
}

/* Champ mal rempli : le trait passe au rouge ET la raison s'écrit dessous. La
   couleur seule ne dit pas ce qui manque, et ne se voit pas de tous. */
.resa-form-input--erreur {
  border-bottom-color: var(--red);
}

.resa-form-erreur {
  margin: 0;
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--red);
}

.resa-textarea {
  resize: none;
  height: 4.5rem;
  line-height: 1.6;
  padding-top: 0.4rem;
}

.resa-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
}

.resa-checkbox {
  flex-shrink: 0;
  margin-top: 2px;
  width: 13px;
  height: 13px;
  accent-color: var(--red);
  cursor: pointer;
}

.resa-checkbox-text {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.68rem;
  line-height: 1.65;
  color: rgb(45 20 8 / .6);
}

.resa-link {
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}

.resa-link:hover {
  color: var(--red);
}

/* ─────────────────────────────────────
   ÉTAPE 4 - Confirmation
───────────────────────────────────── */

.resa-confirm-banner {
  background-color: rgb(255 204 0 / .1);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.resa-confirm-ref {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a37f00;
  margin: 0;
}

.resa-confirm-line {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--brown);
  margin: 0;
}

/* Ticket */

.resa-ticket {
  border: 1px solid rgb(45 20 8 / .18);
  border-radius: var(--r-card);
  padding: 1.6rem 1.8rem;
  flex-shrink: 0;
}

.resa-ticket-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.resa-ticket-date {
  font-family: var(--f-body);
  font-size: 1.3rem;
  color: var(--brown);
  line-height: 1.2;
}

.resa-ticket-time {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 1.1rem;
  color: #a37f00;
}

.resa-ticket-meta {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
}

.resa-ticket-who {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(45 20 8 / .12);
}

.resa-ticket-col {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.resa-ticket-col-label {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(45 20 8 / .5);
}

.resa-ticket-col-value {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--brown);
}

/* ─────────────────────────────────────
   Responsive - Mobile (≤ 768px)
───────────────────────────────────── */

@media (max-width: 768px) {

  .resa-bg {
    height: auto;
    min-height: 100vh;
    padding: 0;
    align-items: stretch;
    scroll-snap-align: none;
    flex-shrink: unset;
  }

  .resa-modal {
    height: auto;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }

  .resa-header {
    padding: 1rem 1.25rem;
  }

  /* Sur téléphone la carte occupe tout l'écran : la flèche ne se pose plus sur
     la photo mais sur l'en-tête crème de la carte. Elle inverse donc son
     contraste, et l'en-tête lui fait de la place - sans quoi elle recouvrirait
     le logotype. */
  .resa-retour {
    background: rgb(45 20 8 / .08);
    color: var(--brown);
    box-shadow: none;
    backdrop-filter: none;
  }
  .resa-retour:hover { background: var(--red); color: var(--paper); }
  .resa-header { padding-left: calc(120 * var(--u) + 1.25rem); }

  .resa-header-tag {
    display: none;
  }

  .resa-step-inner {
    padding: 1.4rem 1.25rem;
  }

  .resa-footer {
    padding: 0.9rem 1.25rem;
  }

  .resa-step1-layout {
    grid-template-columns: 1fr;
  }

  .resa-service-cards {
    grid-template-columns: 1fr;
  }

  .resa-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .resa-ticket-who {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------------------------
   Icônes  (Material Symbols Rounded, voir public/style/tokens.css)

   Croix de fermeture et chevrons du calendrier : la taille de caractère les
   dimensionne, le bouton leur donne leur cible.
   -------------------------------------------------------------------------- */
.resa-close .msr { font-size: calc(52 * var(--u)); }
.resa-cal-nav .msr { font-size: calc(56 * var(--u)); }

/* Les boutons d'étape portent leur flèche à côté du libellé. */
.resa-btn-back {
  display: inline-flex;
  align-items: center;
  gap: calc(16 * var(--u));
}