/* ── Réservation native ──────────────────────────────────────────────
   Deux règles qui gouvernent tout ce fichier :

   1. TOUT TIENT DANS L'ÉCRAN. Le bloc occupe au plus la hauteur visible
      (100svh, qui exclut la barre d'URL mobile), et une seule étape est
      affichée à la fois. La « scène » a une hauteur stable : la page ne
      se réagence pas d'une étape à l'autre, donc plus besoin de faire
      défiler pour retrouver les boutons.

   2. On reste chez Parhelion. Couleurs, polices et intitulés viennent des
      variables du site. Seuls les angles sont légèrement adoucis
      (--bk-radius) pour que les cartes et boutons paraissent moins bruts.
*/

.booking {
  --bk-radius: 7px;
  --bk-gap: clamp(8px, 1.5vh, 14px);
  --bk-pad: clamp(12px, 2vh, 19px);
  --bk-card-title: clamp(16px, 2.3vh, 21px);

  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
  /* Le bloc est centré, son contenu reste aligné à gauche : un formulaire
     centré caractère par caractère serait illisible. */
  text-align: left;

  /* Le parcours tient dans la hauteur visible, sans jamais la dépasser.
     Plafonné pour ne pas devenir démesuré sur un grand écran. */
  height: min(calc(100svh - var(--bk-chrome, 150px)), 620px);
  min-height: 390px;

  display: flex;
  flex-direction: column;

  /* Laisse la place à la barre de navigation fixe quand on s'y replace. */
  scroll-margin-top: var(--bk-nav-offset, 96px);
}

/* Densité réduite : appliquée par booking.js quand l'écran est vraiment
   court (petit mobile, paysage) plutôt que de laisser déborder. */
.booking.is-dense {
  --bk-gap: 7px;
  --bk-pad: 10px;
  --bk-card-title: 16px;
  margin-top: 18px;
}

/* Sur écran court, l'en-tête de la section prend une place qu'on récupère
   pour le parcours : l'accroche disparaît et le titre se resserre.
   `#reserver` cible uniquement cette section, pas le reste du site. */
#reserver:has(.booking.is-dense) .section-title {
  font-size: clamp(26px, 4.5vh, 38px);
  margin-bottom: 8px;
}

#reserver:has(.booking.is-dense) .section-lead {
  display: none;
}

/* Cette section n'a pas besoin du grand espace de fin : il pousserait le
   parcours hors de l'écran. */
#reserver.block {
  padding-bottom: clamp(48px, 8vh, 140px);
}

/* Chaque pixel récupéré en haut est un pixel de plus pour le parcours.
   Le grand numéro décoratif est le premier à partir : il ne porte aucune
   information, et il coûte 50 px de hauteur. */
#reserver .section-num {
  display: none;
}

/* Section centrée, comme la section Contact du site : c'est le traitement
   que Parhelion réserve déjà à ses formulaires (`.contact` est en
   `text-align: center`, avec son accroche et son formulaire en `margin: auto`).
   Sans ça, le parcours se retrouve collé à gauche d'une zone plus large. */
#reserver {
  text-align: center;
}

#reserver .section-title {
  margin-bottom: 12px;
}

#reserver .section-lead {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.booking [hidden] {
  display: none !important;
}

/* ── Fil d'étapes ── */
.bk-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(14px, 2.4vh, 22px);
  flex-shrink: 0;
}

.bk-step-bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--line-2);
  transform-origin: left;
  transition: background 0.5s var(--ease);
}

.bk-step-label {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.5s var(--ease);
}

.bk-step.is-done .bk-step-bar,
.bk-step.is-current .bk-step-bar {
  background: var(--accent);
}

.bk-step.is-current .bk-step-label {
  color: var(--accent);
}

/* ── Scène : une étape visible à la fois, hauteur stable ── */
.bk-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

.bk-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bk-gap);
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease),
    visibility 0.4s;
}

.bk-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Étape précédente : sort par le haut, pour donner le sens du parcours. */
.bk-panel.is-past {
  transform: translateY(-10px);
}

/* Dernier recours : si malgré la densité réduite le contenu ne rentre
   vraiment pas (très petit écran en paysage), on défile dans le panneau
   plutôt que de couper le contenu. */
.bk-panel.is-scrollable {
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
}

.bk-legend {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vh, 24px);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.bk-legend-sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-left: 8px;
  vertical-align: 2px;
}

.bk-included {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--text-4);
  margin: 0;
}

.bk-opt {
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-4);
}

/* ── Carte : base commune ── */
.bk-cat,
.bk-pack,
.bk-addon {
  position: relative;
  text-align: left;
  background: var(--field);
  border: 1px solid var(--line-3);
  border-radius: var(--bk-radius);
  color: var(--text);
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.bk-cat:hover,
.bk-pack:hover,
.bk-addon:hover {
  border-color: var(--card-hover-line);
  background: var(--card-hover-bg);
  transform: translateY(-1px);
}

.bk-cat:active,
.bk-pack:active,
.bk-addon:active {
  transform: translateY(0);
}

.bk-cat[aria-checked="true"],
.bk-pack[aria-checked="true"],
.bk-addon[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--card-hover-bg);
}

/* ── Étape 1 : catégories ── */
.bk-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bk-gap);
  flex-shrink: 0;
}

.bk-cat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--bk-pad);
}

.bk-cat-name {
  font-family: var(--serif);
  font-size: var(--bk-card-title);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 7px;
}

.bk-cat-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
}

/* ── Étape 2 : formules ── */
.bk-packs {
  display: grid;
  gap: var(--bk-gap);
  flex-shrink: 0;
}

.bk-pack {
  display: grid;
  gap: 8px;
  padding: var(--bk-pad);
}

.bk-pack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.bk-pack-name {
  font-family: var(--serif);
  font-size: var(--bk-card-title);
  font-weight: 600;
  line-height: 1.1;
}

.bk-pack-price {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: calc(var(--bk-card-title) - 2px);
  color: var(--accent);
  white-space: nowrap;
}

.bk-pack-from {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-right: 6px;
}

/* Ce qui est compris : une seule ligne dense plutôt qu'une liste à puces.
   C'est ce qui permet aux trois formules de tenir dans l'écran. */
.bk-pack-includes {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}

.bk-pack-includes b {
  font-weight: 400;
  color: var(--accent);
  opacity: 0.75;
  margin: 0 5px;
}

/* ── Étape 3 : options ── */
.bk-addons {
  display: grid;
  gap: max(8px, calc(var(--bk-gap) - 4px));
  flex-shrink: 0;
}

.bk-addon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(12px, calc(var(--bk-pad) - 6px)) var(--bk-pad);
  font-size: 14.5px;
}

.bk-addon-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.bk-addon-price {
  font-size: 13.5px;
  color: var(--text-3);
}

.bk-addon-mark {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-3);
  border-radius: calc(var(--bk-radius) - 3px);
  font-size: 11px;
  color: transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    color 0.3s var(--ease);
}

.bk-addon[aria-pressed="true"] .bk-addon-mark {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
  animation: bk-pop 0.35s var(--ease);
}

@keyframes bk-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Étapes 4 & 5 : champs ── */
.bk-fields {
  display: grid;
  gap: var(--bk-gap);
  flex-shrink: 0;
}

.bk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bk-gap);
}

/* On reprend .field du site, en ajustant seulement l'angle et la densité. */
.booking .field { gap: 6px; }

.booking .field input,
.booking .field select,
.booking .field textarea {
  border-radius: var(--bk-radius);
  padding: max(10px, calc(var(--bk-pad) - 8px)) 15px;
}

.booking .field textarea {
  min-height: 0;
  resize: none;
}

.booking .field-label {
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* ── Dates : début, fin, créneau ──
   Les champs affichés dépendent de la formule (voir needsEndDate / needsSlot
   dans le catalogue) : `data-fields` porte leur nombre, posé par booking.js. */
.bk-row--dates[data-fields="1"] {
  /* Une date seule : on la borne, sinon elle s'étire sur toute la largeur. */
  grid-template-columns: minmax(0, 240px);
}

.bk-row--dates[data-fields="2"] {
  grid-template-columns: 1fr 1fr;
}

.bk-row--dates[data-fields="3"] {
  grid-template-columns: 1fr 1fr 1.2fr;
}

/* Créneau neutralisé quand le tournage court sur plusieurs jours :
   « Matin » n'a plus de sens sur trois jours. */
.bk-row--dates .field.is-disabled {
  opacity: 0.45;
}

.bk-row--dates .field.is-disabled .select-wrap {
  cursor: not-allowed;
}

.booking .field select:disabled {
  cursor: not-allowed;
}

/* ── Lieu : suggestions d'adresses ── */
.bk-place {
  position: relative;
}

.bk-place-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 5px;
  /* Opaque : le panneau passe au-dessus des champs suivants. */
  background: #17140F;
  border: 1px solid var(--line-3);
  border-radius: var(--bk-radius);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}

.bk-place-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 216px;
  overflow-y: auto;
}

.bk-place-item {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: calc(var(--bk-radius) - 3px);
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.bk-place-item.is-active {
  background: var(--card-hover-bg);
}

.bk-place-main {
  font-size: 14px;
  color: var(--text);
}

.bk-place-secondary {
  font-size: 12px;
  color: var(--text-4);
}

/* Attribution exigée par Google dès que ses suggestions sont affichées
   ailleurs que sur une carte. */
.bk-place-credit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 5px 0 1px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}

.bk-google {
  flex-shrink: 0;
}

/* ── Récapitulatif (dernière étape) ── */
.bk-recap {
  border: 1px solid var(--line-2);
  border-radius: var(--bk-radius);
  padding: max(13px, calc(var(--bk-pad) - 5px)) var(--bk-pad);
  background: rgba(201, 169, 97, 0.035);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.bk-recap-detail {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-4);
  flex: 1;
  min-width: 180px;
}

.bk-recap-total {
  font-family: var(--serif);
  font-size: clamp(22px, 3vh, 30px);
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
}

.bk-recap-total small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ── Pied : estimation + navigation ── */
.bk-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(12px, 2vh, 18px);
  padding-top: clamp(11px, 1.8vh, 16px);
  border-top: 1px solid var(--line);
}

.bk-estimate {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-right: auto;
}

.bk-estimate-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-4);
}

.bk-estimate-value {
  font-family: var(--serif);
  font-size: clamp(19px, 2.6vh, 24px);
  color: var(--accent);
  line-height: 1;
}

.bk-estimate-value small {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* Le montant fait un léger fondu quand il change : le visiteur voit que
   son choix a eu un effet, sans que ça saute aux yeux. */
.bk-estimate-value.is-updating {
  animation: bk-fade-up 0.4s var(--ease);
}

@keyframes bk-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.bk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Angles adoucis sur les boutons, sans toucher au .btn-gold du site */
.booking .btn-gold {
  border-radius: var(--bk-radius);
  padding: 14px 30px;
  transition: background 0.25s var(--ease), opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.booking .btn-gold:not(:disabled):hover {
  transform: translateY(-1px);
}

.booking .btn-gold:not(:disabled):active {
  transform: translateY(0);
}

.bk-back {
  padding: 14px 24px;
  background: transparent;
  border: 1px solid var(--line-3);
  border-radius: var(--bk-radius);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.bk-back:hover {
  border-color: var(--accent);
  color: var(--text);
}

.bk-foot .form-note {
  order: -1;
  flex: 1 1 auto;
  min-width: 150px;
  font-size: 12.5px;
}

/* ── Confirmation ── */
.bk-panel--done {
  text-align: center;
  align-items: center;
}

.bk-done-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  display: grid;
  place-items: center;
  color: var(--accent);
  animation: bk-pop 0.5s var(--ease);
}

.bk-done-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4vh, 34px);
  font-weight: 600;
  margin: 0;
}

.bk-done-ref {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
}

.bk-done-ref b {
  color: var(--accent);
  font-weight: 400;
  letter-spacing: 0.1em;
}

.bk-done-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-3);
  max-width: 420px;
  margin: 0 auto;
}

/* ── Signature Klyprs ── */
.bk-powered {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: clamp(10px, 1.6vh, 15px) 0 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.bk-powered span:last-child {
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.bk-klyprs-logo { flex-shrink: 0; }

/* ── Écrans étroits ── */
@media (max-width: 720px) {
  .booking {
    --bk-card-title: clamp(15px, 2.1vh, 18px);
    margin-top: 22px;
  }

  /* Les catégories passent en colonne : plus lisible au pouce. */
  .bk-cats { grid-template-columns: 1fr; }

  /* Deux champs côte à côte deviennent illisibles sous 720 px…
     …sauf les champs courts (date/créneau, téléphone/société) : les empiler
     coûtait une ligne entière, et le parcours ne rentrait plus. */
  .bk-row { grid-template-columns: 1fr; }
  .bk-row--tight { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Début et fin côte à côte (champs courts), créneau en dessous sur toute
     la largeur : trois colonnes de dates sur 375 px sont inutilisables. */
  .bk-row--dates[data-fields="1"] { grid-template-columns: 1fr; }
  .bk-row--dates[data-fields="2"] { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bk-row--dates[data-fields="3"] { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Trois champs sur 375 px : le créneau descend sur sa propre ligne. */
  .bk-row--dates[data-fields="3"] #bk-slot-field { grid-column: 1 / -1; }

  /* Créneau : intitulé à gauche du menu plutôt qu'au-dessus. Le champ passe
     de 71 à 48 px — c'est ce qui permet d'ajouter la date de fin sans que
     l'étape déborde. */
  #bk-slot-field {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
  }

  /* La zone « votre projet » n'a pas besoin de deux lignes visibles sur
     mobile : le texte défile à la saisie, comme dans n'importe quelle appli. */
  .booking .field textarea {
    height: 46px;
  }

  /* Fil d'étapes réduit aux barres : sur 375 px, cinq intitulés côte à côte
     sont illisibles de toute façon, et ils coûtent une ligne entière. */
  .bk-steps { gap: 5px; }
  .bk-step-label { display: none; }
  .bk-step.is-current .bk-step-label {
    display: block;
    position: absolute;
    left: 0;
    margin-top: 7px;
    font-size: 9.5px;
    letter-spacing: 0.16em;
  }
  .bk-step { position: relative; }

  /* Le prix reste sur la même ligne que le nom : passer en colonne
     ajoutait une ligne par formule. */
  .bk-pack-head { gap: 10px; }

  /* Deux lignes suffisent à donner le contenu de la formule ; au-delà, on
     mangerait la place des boutons. Le détail complet est au récapitulatif. */
  .bk-pack-includes {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Pied sur deux lignes au lieu de trois : l'estimation et la note se
     partagent la première, les boutons occupent la seconde. */
  .bk-foot {
    gap: 10px;
  }
  .bk-estimate {
    margin-right: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
  }
  .bk-foot .form-note {
    order: 0;
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 11.5px;
  }
  .bk-actions { margin-left: 0; flex-basis: 100%; }
  .bk-actions .btn-gold { flex: 1; }

  .bk-recap { gap: 10px; }
  .bk-recap-detail { min-width: 0; flex-basis: 100%; }
}

/* ── Écrans courts mais larges (téléphone en paysage, petit portable) ──
   Ici la hauteur manque mais la largeur est abondante : on cesse d'empiler
   et on répartit en colonnes. C'est ce qui permet au parcours de tenir dans
   390 px de haut sans rien faire défiler. */
@media (max-height: 560px) and (min-width: 700px) {
  .booking {
    /* On ne force plus de hauteur minimale : la place disponible commande. */
    min-height: 0;
    margin-top: 10px;
    /* En dessous du plancher habituel : à cette hauteur, chaque pixel
       d'espacement se paie sur le contenu. */
    --bk-gap: 7px;
    --bk-pad: 10px;
  }

  /* Le titre passe en petit : il reste pour situer, sans manger l'écran. */
  #reserver .section-title {
    font-size: clamp(20px, 5vh, 28px);
    margin-bottom: 8px;
  }
  #reserver .section-lead { display: none; }

  /* Les trois formules tiennent sur une seule rangée. */
  .bk-packs { grid-template-columns: repeat(3, 1fr); }
  .bk-pack-head { flex-direction: column; gap: 2px; }
  .bk-pack-price { align-self: flex-start; }
  .bk-pack-includes {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Options sur deux colonnes, et resserrées : certaines formules en
     proposent cinq, ce qui fait trois rangées. */
  .bk-addons { grid-template-columns: repeat(2, 1fr); }
  .bk-addon {
    padding: 8px 12px;
    font-size: 13px;
  }
  .bk-addon-price { font-size: 12px; }
  .bk-addon-mark { width: 16px; height: 16px; }
  .bk-included { font-size: 11px; }

  /* Les champs se répartissent sur autant de colonnes que la largeur le
     permet : `display: contents` dissout les rangées pour que chaque champ
     devienne une cellule. Sur 844 px, les quatre champs tiennent sur une
     seule ligne — c'est ce qui fait la différence à cette hauteur. */
  /* Agencement explicite sur quatre colonnes. On a préféré ça à des
     colonnes égales calculées : à cette hauteur il faut du compact, mais
     un menu « Journée entière » tronqué dans 130 px n'est pas acceptable. */
  .bk-fields {
    grid-template-columns: repeat(4, 1fr);
    align-content: start;
  }

  /* Les rangées se dissolvent pour que chaque champ devienne une cellule :
     les quatre champs de l'étape « contact » tiennent ainsi sur une ligne. */
  .bk-row { display: contents; }

  /* …sauf la rangée des dates, qui garde ses trois colonnes à elle et
     occupe toute la largeur : le créneau a besoin de sa place. */
  .bk-row--dates {
    display: grid;
    grid-column: 1 / -1;
  }
  .bk-row--dates[data-fields="1"] { grid-template-columns: minmax(0, 200px); }
  .bk-row--dates[data-fields="2"] { grid-template-columns: 1fr 1fr; }
  .bk-row--dates[data-fields="3"] { grid-template-columns: 1fr 1fr 1.2fr; }

  /* Lieu et projet se partagent la rangée suivante, à deux colonnes
     chacun — une adresse a besoin de largeur. */
  .bk-place { grid-column: span 2; }
  .bk-fields > .field:last-child { grid-column: span 2; }

  .bk-recap { grid-column: 1 / -1; }

  /* La zone « votre projet » s'aligne sur la hauteur des autres champs. */
  .booking .field textarea { height: 40px; }

  /* Champs plus ramassés : à cette hauteur, 4 px de remplissage par champ
     décident si l'étape rentre ou non. */
  .booking .field { gap: 4px; }
  .booking .field input,
  .booking .field select,
  .booking .field textarea {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .booking .field-label { font-size: 9px; letter-spacing: 0.14em; }

  /* L'intitulé de l'étape disparaît : le fil d'étapes indique déjà où l'on
     est, et ces 30 px sont ce qui permet à l'étape de tenir. */
  .bk-legend { display: none; }

  /* Pied ramené à une seule ligne compacte. */
  .bk-steps { margin-bottom: 6px; }
  .bk-foot {
    margin-top: 8px;
    padding-top: 8px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  /* La mention « estimation indicative » est déjà dans le récapitulatif. */
  .bk-foot .form-note { display: none; }
  .booking .btn-gold { padding: 10px 22px; }
  .bk-back { padding: 10px 18px; }
  .bk-powered { margin-top: 6px; font-size: 9px; }

  /* Le détail chiffré passe à la trappe : seul le total compte ici, le
     détail reste dans l'email. */
  .bk-recap-detail { display: none; }

  .bk-fields .field textarea { min-height: 0; }

  /* Le fil d'étapes se réduit aux barres. */
  .bk-step-label { display: none; }
  .bk-step.is-current .bk-step-label {
    display: block;
    position: absolute;
    left: 0;
    margin-top: 5px;
    font-size: 9px;
  }
  .bk-step { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-panel,
  .bk-cat,
  .bk-pack,
  .bk-addon,
  .booking .btn-gold {
    transition-duration: 0.01ms;
  }
  .bk-panel { transform: none; }
  .bk-addon[aria-pressed="true"] .bk-addon-mark,
  .bk-done-mark,
  .bk-estimate-value.is-updating {
    animation: none;
  }
}