/* ============================================================
   MODULE DE RÉSERVATION WEBBAY — habillage commun
   Fichier IDENTIQUE chez tous les clients : ne rien y écrire de
   spécifique. Les couleurs et les polices viennent de `theme.css`,
   le seul fichier à adapter d'un client à l'autre.

   Variables attendues du thème :
     --ink --card --line --line-soft --cream --muted --faint
     --f-titre       police des titres
     --titre-casse   uppercase ou none
     --accent        couleur d'accent (fond des éléments actifs)
     --accent-ink    couleur du texte posé SUR l'accent
     --alerte        couleur des messages d'erreur
   ============================================================ */

.bk-page { min-height: 100vh; padding: 7.5rem 1.25rem 5rem; }
.bk-shell { max-width: 820px; margin: 0 auto; width: 100%; }

.bk-titre {
  font-family: var(--f-titre); text-transform: var(--titre-casse, uppercase);
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: 0.01em;
}
.bk-lede { color: var(--muted); line-height: 1.65; margin-top: 1.1rem; max-width: 60ch; }
.bk-note { font-size: 13px; color: var(--faint); line-height: 1.6; }

/* ---------- Fil des étapes ---------- */
.bk-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2.5rem 0 2rem; }
.bk-step {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  border: 1px solid var(--line-soft); background: transparent;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--faint); transition: all 0.25s ease;
}
.bk-step__num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; border: 1px solid currentColor;
}
.bk-step.est-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
.bk-step.est-faite { color: var(--cream); border-color: var(--line); cursor: pointer; }
.bk-step.est-faite:hover { border-color: var(--cream); }

/* ---------- Panneaux ---------- */
.bk-panneau { display: none; }
.bk-panneau.est-visible { display: block; animation: bkFade 0.35s ease; }
@keyframes bkFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bk-panneau.est-visible { animation: none; } }

/* Titres d'étape (« Quelle prestation ? »…). Par défaut la police des grands titres ;
   un thème peut les passer dans une autre police avec les variables --sous-titre-*. */
.bk-sous-titre {
  font-family: var(--f-sous-titre, var(--f-titre));
  text-transform: var(--sous-titre-casse, var(--titre-casse, uppercase));
  letter-spacing: var(--sous-titre-espace, 0.03em);
  font-weight: var(--sous-titre-graisse, inherit);
  font-size: var(--sous-titre-taille, 1.25rem); margin-bottom: 1.1rem;
}

/* ---------- Étape 1 : prestations ---------- */
.bk-zones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.6rem; }
.bk-presta-liste { display: grid; gap: 0.7rem; }
.bk-presta {
  display: flex; align-items: flex-start; gap: 1rem; width: 100%; text-align: left;
  padding: 1rem 1.15rem; border-radius: 0.9rem;
  border: 1px solid var(--line-soft); background: var(--card);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.bk-presta:hover { border-color: var(--line); transform: translateY(-2px); }
.bk-presta.est-choisie { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bk-presta__corps { flex: 1; min-width: 0; }
.bk-presta__nom { font-weight: 600; color: var(--cream); }
.bk-presta__detail { font-size: 13px; color: var(--faint); margin-top: 3px; line-height: 1.5; }
.bk-presta__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.55rem; }
.bk-chip {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--faint);
}
/* Tarif d'une prestation. Par défaut la police des grands titres ; un thème peut le
   passer dans une autre police avec les variables --prix-*. */
.bk-presta__prix {
  font-family: var(--f-prix, var(--f-titre));
  font-size: var(--prix-taille, 1.2rem);
  letter-spacing: var(--prix-espace, 0.02em);
  font-weight: var(--prix-graisse, inherit);
  color: var(--cream); white-space: nowrap;
}

/* ---------- Sélection multiple (étape 1) ---------- */
/* Barre de sélection — elle reprend la couleur d'accent du salon, celle du
   filtre actif, de la bordure de la prestation retenue et du bouton. Blanc et
   accent s'inversent simplement : la barre devient pleine là où les cartes sont
   blanches, sans introduire de teinte qui n'existe pas ailleurs sur le site. */
.bk-selection {
  position: sticky; bottom: 1rem; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.2rem; margin-top: 1.75rem; padding: 1rem 1.2rem;
  border-radius: 1rem;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.45);
  animation: bkMonte 0.28s ease;
}
@keyframes bkMonte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.bk-selection__corps { flex: 1; min-width: 220px; }
.bk-selection__titre {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-ink) 72%, var(--accent));
  margin-bottom: 0.5rem;
}
.bk-selection__liste { display: flex; flex-wrap: wrap; gap: 0.45rem; }

/* Le bilan : la durée en petit, le tarif en grand. C'est le chiffre qui décide,
   il ne peut pas rester une mention grise en bas de la barre. */
.bk-selection__bilan {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem;
  margin-left: auto; text-align: right; flex: none;
}
.bk-selection__cumul { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.bk-selection__compte {
  font-size: 12px; letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--accent-ink) 75%, var(--accent));
}
.bk-selection__prix {
  font-family: var(--f-titre); font-size: 1.35rem; line-height: 1.1;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.bk-selection__acompte {
  margin: 0.15rem 0 0; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--accent-ink) 78%, var(--accent));
}

@media (max-width: 33rem) {
  .bk-selection__bilan { align-items: flex-start; text-align: left; margin-left: 0; }
  .bk-selection__cumul { align-items: flex-start; }
  .bk-selection #selection-valider { width: 100%; justify-content: center; }
}

/* Sur la barre pleine, le bouton s'inverse à son tour : il ne peut plus se
   fondre dans un fond de sa propre couleur. */
.bk-selection .btn-jaune {
  background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink);
}
.bk-selection .btn-jaune:hover {
  background: color-mix(in srgb, var(--accent-ink) 88%, var(--accent));
}

.bk-puce {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.5rem 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent);
  background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--accent-ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.bk-puce:hover {
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
}
.bk-puce span:last-child { font-size: 15px; line-height: 1; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) { .bk-selection { animation: none; } }

/* Coche sur la prestation retenue */
/* La pastille de sélection est un élément de la rangée, pas une vignette posée
   par-dessus : elle se range à droite du tarif au lieu de le recouvrir. La place
   lui est réservée en permanence, pour que rien ne bouge à la sélection. */
.bk-presta::after {
  content: "✓";
  flex: none; align-self: center;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--accent-ink);
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bk-presta.est-choisie::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bk-presta::after { transition: none; }
}

/* Détail des tarifs sous le récapitulatif */
.bk-recap__valeur { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bk-recap__detail { font-size: 12.5px; font-style: italic; color: var(--faint); }

/* ---------- Étape 2 : calendrier ---------- */
.bk-cal { border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--card); padding: 1.2rem; }
.bk-cal__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
/* Mois du calendrier : gras et plus grand, dans la police des titres d'étape du thème. */
.bk-cal__mois {
  font-family: var(--f-sous-titre, var(--f-titre));
  text-transform: var(--sous-titre-casse, var(--titre-casse, uppercase));
  letter-spacing: var(--sous-titre-espace, 0.04em);
  font-weight: 700; font-size: 1.4rem; color: var(--cream);
}
.bk-cal__nav {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--cream); background: transparent;
  transition: background 0.25s ease, opacity 0.25s ease;
}
.bk-cal__nav:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
.bk-cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.bk-cal__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-cal__jourdesem {
  text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); padding-bottom: 6px;
}
.bk-jour {
  aspect-ratio: 1; border-radius: 0.6rem; border: 1px solid transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 14px; font-weight: 600; color: var(--cream); background: transparent;
  transition: all 0.2s ease;
}
.bk-jour:disabled { color: var(--faint); opacity: 0.35; cursor: not-allowed; }
.bk-jour__pastille { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.bk-jour:not(:disabled):hover { border-color: var(--line); }
.bk-jour.est-choisi { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
.bk-jour.est-choisi .bk-jour__pastille { background: var(--accent-ink); }

/* ---------- Étape 3 : créneaux ---------- */
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.6rem; }
.bk-slot {
  padding: 0.75rem 0.5rem; border-radius: 0.7rem; text-align: center;
  border: 1px solid var(--line-soft); background: var(--card);
  font-weight: 600; font-size: 14.5px; color: var(--cream);
  transition: all 0.2s ease;
}
.bk-slot:hover { border-color: var(--line); transform: translateY(-2px); }
.bk-slot.est-choisi { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }

/* ---------- Étape 4 : formulaire & récapitulatif ---------- */
.bk-recap {
  border: 1px solid var(--line-soft); border-radius: 0.9rem; background: var(--card);
  padding: 1.2rem 1.35rem;
}
.bk-recap__ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 0.5rem 0; font-size: 14.5px; color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.bk-recap__ligne:last-child { border-bottom: 0; }
.bk-recap__ligne strong { color: var(--cream); font-weight: 600; text-align: right; }

.bk-form { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.bk-form__duo { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .bk-form__duo { grid-template-columns: 1fr 1fr; } }
.bk-check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 14px; color: var(--muted); line-height: 1.55; }
.bk-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.bk-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Barre d'actions ---------- */
.bk-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 2rem; }

/* ---------- États ---------- */
.bk-vide, .bk-erreur {
  border: 1px dashed var(--line); border-radius: 0.9rem;
  padding: 1.1rem 1.25rem; font-size: 14px; line-height: 1.6; color: var(--muted);
}
.bk-erreur { border-style: solid; border-color: var(--alerte); }
.bk-charge { color: var(--faint); font-size: 14px; padding: 1rem 0; }

.bk-bandeau-demo {
  border: 1px dashed var(--line); border-radius: 0.9rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 0.85rem 1.1rem; font-size: 13px; line-height: 1.55; color: var(--muted);
  margin-bottom: 2rem;
}

/* ---------- Confirmation ---------- */
.bk-succes__pastille {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); margin-bottom: 1.6rem;
}

/* Avis d'acompte, juste avant le bouton d'envoi. */
.bk-acompte {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.bk-acompte strong { color: var(--cream); font-weight: 600; }

/* Pastille « acompte » sur une prestation qui en demande un. */
.bk-chip--acompte {
  border-color: var(--accent);
  color: var(--accent);
}

/* Bandeau « on se souvient de vous », au-dessus du formulaire. */
.bk-connue {
  margin-bottom: 1.2rem;
  font-size: 13.5px;
  color: var(--muted);
}
.bk-lien {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--cream); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.bk-lien:hover { color: var(--accent); }

/* Écran de confirmation : il se suffit à lui-même, on efface l'introduction. */
.bk-shell.est-confirme > .eyebrow,
.bk-shell.est-confirme > .bk-titre,
.bk-shell.est-confirme > .bk-lede { display: none; }

/* ---------- Modale de confirmation (back-office) ---------- */
.bk-modale {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(15, 12, 10, 0.55);
  animation: bkVoile 0.18s ease;
}
.bk-modale[hidden] { display: none; }
@keyframes bkVoile { from { opacity: 0; } to { opacity: 1; } }

.bk-modale__carte {
  width: 100%; max-width: 30rem;
  border: 1px solid var(--line); border-radius: 1rem;
  background: var(--card); padding: 1.6rem 1.7rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  animation: bkFade 0.22s ease;
}
.bk-modale__titre {
  font-family: var(--f-titre); text-transform: var(--titre-casse, uppercase);
  letter-spacing: 0.03em; font-size: 1.15rem; color: var(--cream);
}
.bk-modale__texte {
  margin-top: 0.7rem; color: var(--muted); font-size: 14.5px; line-height: 1.6;
}
.bk-modale__actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .bk-modale, .bk-modale__carte { animation: none; }
}

/* Un élément marqué hidden doit disparaître, même quand une classe lui impose un
   display (grid, flex…) : la règle du navigateur perd face à une classe, et le
   bloc reste visible. Piège rencontré sur le formulaire d ajout de prestation. */
[hidden] { display: none !important; }

/* Recherche de cliente : la liste des résultats se pose sous le champ.
   La carte qui l'entoure reçoit son propre contexte d'empilement, sinon la carte
   suivante peut se peindre par-dessus et couper la liste en deux. */
.carte-cliente { position: relative; z-index: 20; }

.rdv-resultats {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: 4px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0.6rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
  max-height: 15rem; overflow-y: auto;
}
.rdv-resultat {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border: 0; border-radius: 0.4rem;
  background: transparent; color: var(--cream); font: inherit; cursor: pointer;
}
.rdv-resultat:hover, .rdv-resultat:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.rdv-resultat__nom { font-weight: 600; font-size: 14px; }
.rdv-resultat__coord {
  font-size: 12.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- « À savoir avant de réserver » ----------
   Texte fixé par le salon sur une prestation. Il occupe toute la largeur de la
   liste, même quand elle est en grille. */
.bk-avis {
  grid-column: 1 / -1;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.bk-avis + .bk-avis { margin-top: 0.6rem; }
#avis-reservation { margin-top: 1.5rem; }
.bk-avis__titre {
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: var(--cream);
}
.bk-avis__texte { white-space: pre-line; }

/* ---------- Conditions d'annulation (empreinte bancaire) ----------
   Plus appuyé que les encadrés « À savoir » : c'est un engagement, la cliente
   doit l'avoir lu avant d'enregistrer sa carte. Texte à taille de lecture. */
.bk-conditions {
  margin-top: 1.5rem;
  padding: 1.15rem 1.25rem 1.1rem;
  border: 2px solid var(--accent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  font-size: 15px;
  line-height: 1.6;
  color: var(--cream);
}
.bk-conditions p { margin: 0 0 0.6rem; }
.bk-conditions__titre {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cream);
}
.bk-conditions ul { margin: 0.2rem 0 0.8rem; padding-left: 1.15rem; list-style: disc; }
.bk-conditions li { margin-bottom: 0.4rem; padding-left: 0.15rem; }
.bk-conditions li::marker { color: var(--accent); }
/* Pages courtes centrées (lien de garantie) : les conditions restent alignées à
   gauche, sinon les puces et la case à cocher se décalent. */
.bk-page--court .bk-conditions { text-align: left; margin-top: 1.75rem; }
.bk-page--court .bk-actions { justify-content: center; }
.bk-conditions__carte {
  margin: 0.7rem 0.2rem 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
.bk-conditions__accord {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
}

/* ---------- Écrans de confirmation : centrés, à la hauteur de la fenêtre ----------
   box-sizing: border-box, sinon le remplissage s'ajoute aux 100vh et la page
   défile pour rien. 100dvh suit la barre d'adresse mobile qui se replie. Si le
   contenu dépasse (très petit écran), min-height laisse défiler plutôt que de
   couper les boutons. */
.bk-page.est-confirme,
.bk-page--court {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.bk-page.est-confirme { padding: 6rem 1.25rem 2rem; }   /* sous la barre de navigation fixe */
.bk-page--court { padding: 2.5rem 1.25rem; }
.bk-shell.est-confirme .bk-panneau[data-etape="5"] { padding-top: 0; }
.bk-page.est-confirme .bk-succes__pastille { margin-left: auto; margin-right: auto; }
.bk-page.est-confirme .bk-lede,
.bk-page--court .bk-lede,
.bk-page.est-confirme .bk-note { margin-left: auto; margin-right: auto; max-width: 60ch; }
.bk-page.est-confirme .bk-recap { max-width: 520px; margin-left: auto; margin-right: auto; text-align: left; }
.bk-page.est-confirme .bk-recap.mt-8 { margin-top: 1.6rem; }
.bk-page.est-confirme .bk-actions { justify-content: center; margin-top: 1.6rem; }
.bk-page.est-confirme .bk-note.mt-6 { margin-top: 1rem; }
@media (max-width: 640px) {
  .bk-page.est-confirme { padding-top: 5.25rem; padding-bottom: 1.25rem; }
  .bk-page.est-confirme .bk-succes__pastille { width: 54px; height: 54px; margin-bottom: 1rem; }
  .bk-page.est-confirme .bk-lede { margin-top: 0.6rem; }
  .bk-page.est-confirme .bk-actions { gap: 0.6rem; }
  .bk-page--court .brand { margin-bottom: 1.5rem; }
}

/* Écrans courts (iPhone SE, 667 px) : tout doit tenir sans défiler, on resserre. */
@media (max-height: 720px) {
  .bk-page.est-confirme { padding-top: 5rem; padding-bottom: 0.75rem; }
  .bk-page.est-confirme .bk-succes__pastille { width: 40px; height: 40px; margin-bottom: 0.6rem; }
  .bk-page.est-confirme .bk-succes__pastille svg { width: 1.25rem; height: 1.25rem; }
  .bk-page.est-confirme .bk-titre { font-size: 1.9rem; }
  .bk-page.est-confirme .bk-lede { margin-top: 0.4rem; font-size: 0.9rem; }
  .bk-page.est-confirme .bk-recap { padding: 0.55rem 1rem; }
  .bk-page.est-confirme .bk-recap.mt-8 { margin-top: 0.9rem; }
  .bk-page.est-confirme .bk-recap__ligne { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .bk-page.est-confirme .bk-actions { margin-top: 0.9rem; gap: 0.5rem; }
  .bk-page.est-confirme .bk-actions a { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .bk-page.est-confirme .mt-3 { margin-top: 0.4rem; }
  .bk-page.est-confirme .bk-note.mt-6 { margin-top: 0.5rem; font-size: 12px; line-height: 1.45; }
}

/* Page de retour de paiement : la ligne du rendez-vous et la mention finale.
   Sans ces règles, l'heure et la prestation se collaient (« 14h00Nanoblading »). */
.bk-lede p + p { margin-top: 0.8rem; }
.bk-lede .rdv { color: var(--cream); font-weight: 600; }
.bk-lede .rdv span { display: block; margin-top: 0.15rem; font-weight: 400; color: var(--muted); }
.bk-lede .fin { font-size: 13px; line-height: 1.55; color: var(--faint); }

/* Onglet de famille sélectionné : le compteur « (8) » prend la couleur du libellé,
   sinon il se fond dans le fond coloré. */
.filter-btn.active .bk-note { color: inherit; opacity: 0.85; }

/* Formulaire de modification d'un rendez-vous, déplié sous sa ligne d'agenda. */
.bk-modif {
  padding: 0.9rem 1rem; margin: 0.2rem 0 0.6rem;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0.6rem; background: var(--card);
}

/* ---------- Back-office : titres de rubrique ----------
   « Semaine du… », « Poser un rendez-vous », « Clientes »… se confondaient avec le
   texte : même corps de police, même graisse. Plus grands, gras, et marqués d'une
   barre de couleur, ils découpent la page en rubriques qu'on repère d'un coup d'œil.
   Limité au back-office : la même classe sert aussi sur la page de réservation. */
.bk-admin h2.bk-sous-titre,
.bk-admin h3.bk-sous-titre {
  /* Même police que les titres d'étape du thème (Inter chez Joliicils). */
  font-family: var(--f-sous-titre, var(--f-titre));
  text-transform: var(--sous-titre-casse, var(--titre-casse, uppercase));
  letter-spacing: var(--sous-titre-espace, 0.03em);
}
.bk-admin h2.bk-sous-titre {
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--cream);
  padding-left: 0.85rem;
  border-left: 4px solid var(--accent);
  margin-bottom: 1.4rem;
}
.bk-admin h2.bk-sous-titre.mt-10 { margin-top: 3rem; }
/* Titres des jours dans l'agenda : un cran au-dessus du texte, sans concurrencer la rubrique. */
.bk-admin h3.bk-sous-titre {
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--cream);
}