/* ── /reserver — composants de réservation ─────────────────────
   S'appuie sur assets/souffle.css (tokens --nuit/--brume/--mauve/--aube/--ivoire,
   .btn, .lab, .sechead, .mention). Aucun composant bk-* ne dépend de .in :
   le contenu est injecté après le passage de l'observer. */

#reservation .sechead h1{
  font-size:clamp(1.9rem,4vw,3rem); line-height:1.18; margin:0; color:#FFFFFF;
}
#reservation .sechead .bk-prix{ color:var(--aube); font-weight:500; font-variant-numeric:tabular-nums; }

/* ── indicateur d'étapes (dérivé de .dd, souffle.css) ── */
.bk-steps{
  list-style:none; margin:clamp(2.2rem,5vw,3.4rem) auto 0; padding:0;
  width:min(680px,100%); display:flex; justify-content:space-between; position:relative;
  counter-reset:none;
}
.bk-steps::before{
  content:""; position:absolute; left:14px; right:14px; top:14px; height:1px;
  background:rgba(244,240,233,.12);
}
.bk-steps::after{
  content:""; position:absolute; left:14px; top:14px; height:1px; width:calc(100% - 28px);
  background:linear-gradient(90deg, var(--mauve), var(--aube));
  transform-origin:left; transform:scaleX(var(--bk-avancement,0));
  transition:transform .8s var(--ease);
}
.bk-steps li{
  position:relative; z-index:1; display:grid; justify-items:center; gap:.55rem;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:#FFFFFF;
}
.bk-steps li i{
  font-style:normal; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.66rem; letter-spacing:0;
  background:var(--nuit); border:1px solid rgba(244,240,233,.25);
  font-variant-numeric:tabular-nums;
  transition:border-color .4s, background .4s, color .4s, box-shadow .4s;
}
.bk-steps li.on{ color:var(--aube); }
.bk-steps li.on i{
  border-color:var(--aube); color:var(--aube);
  box-shadow:0 0 12px rgba(228,196,168,.35);
}
.bk-steps li.done i{
  background:var(--aube); border-color:var(--aube); color:#1A1526;
}
@media(max-width:559.9px){ .bk-steps li span{ display:none; } }

/* ── panneaux ── */
.bk-panneaux{ width:min(680px,100%); margin:clamp(2rem,4.5vw,3rem) auto 0; position:relative; }
.bk-step{ animation:bkrise .7s var(--ease) both; }
@keyframes bkrise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.bk-titre{
  font-size:clamp(1.25rem,2.6vw,1.7rem); color:#FFFFFF; margin:0 0 1.6rem;
  text-align:center; outline:none;
}

/* ── étape 1 · tuiles lieu (modèle .progr > a, souffle.css) ── */
.bk-tuiles{ display:grid; gap:1rem; }
@media(min-width:560px){ .bk-tuiles{ grid-template-columns:1fr 1fr; } }
.bk-tuile{
  font:inherit; text-align:left; cursor:pointer; color:var(--ivoire);
  display:grid; gap:.5rem; align-content:start; padding:1.5rem 1.4rem 1.6rem;
  background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.1);
  border-radius:3px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:border-color .45s, transform .6s var(--ease), background .45s;
}
.bk-tuile:hover{ border-color:rgba(228,196,168,.5); transform:translateY(-5px); }
.bk-tuile[aria-pressed="true"]{
  border-color:var(--aube); background:rgba(228,196,168,.07);
  box-shadow:0 0 18px rgba(228,196,168,.12);
}
.bk-tuile em{
  font-style:normal; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--aube); font-weight:500;
}
.bk-tuile strong{
  font-family:Optima,Candara,sans-serif; font-weight:400; font-size:1.18rem; color:#FFFFFF;
}
.bk-tuile span{ font-size:.85rem; color:#FFFFFF; line-height:1.6; }
.bk-tous{ text-align:center; margin:1.5rem 0 0; }

/* lien discret réutilisé partout */
.bk-lien{
  font:inherit; background:none; border:none; padding:0; cursor:pointer;
  color:#FFFFFF; font-size:.82rem;
  border-bottom:1px solid rgba(244,240,233,.25); padding-bottom:.15rem;
  transition:color .3s, border-color .3s;
}
.bk-lien:hover{ color:var(--aube); border-color:rgba(228,196,168,.5); }

/* ── étape 2 · créneaux ── */
.bk-filtre, .bk-rappel{
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  margin:0 0 1.8rem;
}
.bk-chip{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aube);
  border:1px solid rgba(228,196,168,.4); border-radius:999px; padding:.42rem .95rem .38rem;
  background:rgba(23,21,40,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.bk-jour{ margin:1.9rem 0 .9rem; }
.bk-jour:first-child{ margin-top:0; }
.bk-jour h3{
  font-size:1.02rem; color:#FFFFFF; font-weight:400; margin:0 0 .85rem;
  padding-bottom:.55rem; border-bottom:1px solid rgba(244,240,233,.1);
}
.bk-slots{ display:flex; flex-wrap:wrap; gap:.6rem; }
.bk-slot{
  font:inherit; cursor:pointer; color:var(--ivoire);
  font-size:.88rem; font-variant-numeric:tabular-nums;
  min-height:44px; padding:.6rem 1.15rem; border-radius:999px;
  background:none; border:1px solid rgba(244,240,233,.22);
  display:inline-flex; align-items:center; gap:.5rem;
  transition:border-color .3s, background .3s, color .3s, transform .3s var(--ease);
}
.bk-slot:hover{ border-color:var(--aube); color:var(--aube); transform:translateY(-1px); }
.bk-slot .bk-lieu-tag{ font-size:.68rem; letter-spacing:.08em; color:#FFFFFF; }
.bk-slot .bk-reste{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mauve); }
.bk-slot:hover .bk-lieu-tag{ color:rgba(228,196,168,.7); }
.bk-pager{ display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; margin:2.2rem 0 1rem; }
.bk-panneaux .mention{ text-align:center; display:block; margin-top:1.2rem; }

/* état vide */
.bk-vide{
  text-align:center; padding:2.6rem 1rem; border:1px dashed rgba(244,240,233,.16);
  border-radius:3px; color:#FFFFFF; line-height:1.8;
}
.bk-vide p{ margin:0 0 1.4rem; }

/* ── étape 3 · formulaire ── */
.bk-form{ display:grid; gap:1.15rem; }
@media(min-width:560px){
  .bk-form{ grid-template-columns:1fr 1fr; }
  .bk-form .bk-champ:nth-child(3), .bk-form .bk-champ:nth-child(4){ grid-column:auto; }
  .bk-form .bk-err, .bk-form .bk-actions{ grid-column:1 / -1; }
}
.bk-champ{ display:grid; gap:.5rem; }
.bk-champ label{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--aube); font-weight:500;
}
.bk-champ input{
  font:inherit; color:var(--ivoire); font-size:.95rem;
  background:rgba(23,21,40,.42); border:1px solid rgba(244,240,233,.14);
  border-radius:3px; padding:.85rem 1rem; width:100%;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:border-color .3s, background .3s;
}
.bk-champ input:focus{ outline:none; border-color:var(--aube); background:rgba(23,21,40,.6); }
.bk-champ input.bk-invalide{ border-color:rgba(224,122,122,.65); }
.bk-actions{ display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; margin-top:1.2rem; }

/* ── étape 4 · récapitulatif (pointillés façon .carte/.fil) ── */
.bk-recap{ list-style:none; margin:0 0 1.4rem; padding:0; }
.bk-recap li{
  display:flex; align-items:baseline; gap:.9rem; padding:.8rem 0;
  border-top:1px solid rgba(244,240,233,.07); font-size:.92rem;
}
.bk-recap li:first-child{ border-top:none; }
.bk-recap .k{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:#FFFFFF; flex-shrink:0; padding-top:.2rem;
}
.bk-recap .fil{
  flex:1; border-bottom:1px dotted rgba(244,240,233,.22); transform:translateY(-4px);
}
.bk-recap .v{ color:#FFFFFF; text-align:right; }
.bk-recap .v b{ color:var(--aube); font-weight:500; font-variant-numeric:tabular-nums; }

/* ── erreurs / chargement ── */
.bk-err{
  text-align:center; color:#E8B4B4; font-size:.88rem; line-height:1.7;
  margin:1rem 0 0;
}
.bk-etat{ text-align:center; padding:1.5rem 0; }
.bk-etat .bk-skel{
  height:44px; border-radius:999px; margin:0 auto .8rem; max-width:520px;
  background:linear-gradient(100deg, rgba(23,21,40,.42) 40%, rgba(124,107,166,.14) 50%, rgba(23,21,40,.42) 60%);
  background-size:200% 100%;
  animation:bkshimmer 1.4s linear infinite;
}
.bk-etat .bk-skel:nth-child(2){ max-width:420px; }
.bk-etat .bk-skel:nth-child(3){ max-width:470px; }
@keyframes bkshimmer{ from{ background-position:120% 0; } to{ background-position:-80% 0; } }
.bk-etat p{ color:#FFFFFF; font-size:.88rem; margin:.6rem 0 1.2rem; line-height:1.8; }
.bk-etat .bk-fatal-titre{ color:#FFFFFF; font-size:1.05rem; font-family:Optima,Candara,sans-serif; }
.bk-etat .bk-actions{ margin-top:.4rem; }

/* ── noscript ── */
.bk-noscript{
  text-align:center; color:#FFFFFF; line-height:2.4;
  padding:2rem 1rem; border:1px dashed rgba(244,240,233,.16); border-radius:3px;
  width:min(680px,100%); margin:2rem auto 0;
}

/* ── reduced motion : états finaux forcés ── */
@media (prefers-reduced-motion:reduce){
  .bk-step, .bk-tuile, .bk-slot, .bk-etat .bk-skel{ opacity:1; transform:none; animation:none; }
  .bk-steps::after{ transition:none; }
}