/* =========================================================
   L'Afrim — Système de réservation (DÉMO, 100% front-end)
   Modale multi-étapes : cours → date → coordonnées → récap
   ========================================================= */

/* ---------- Overlay ---------- */
.bk-overlay{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,22,36,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
@media (min-width:720px){ .bk-overlay{ align-items:center; padding:24px; } }
.bk-overlay.is-open{ opacity:1; visibility:visible; }
body.bk-lock{ overflow:hidden; }

/* ---------- Modale ---------- */
.bk-modal{
  position:relative; width:100%; max-width:660px;
  max-height:94vh; max-height:94dvh;
  display:flex; flex-direction:column;
  background:var(--paper);
  border-radius:24px 24px 0 0;
  box-shadow:var(--shadow-lg);
  transform:translateY(48px); opacity:0;
  transition:transform .42s var(--ease), opacity .42s var(--ease);
  overflow:hidden;
}
@media (min-width:720px){ .bk-modal{ border-radius:24px; } }
.bk-overlay.is-open .bk-modal{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .bk-overlay,.bk-modal{ transition:none; } .bk-modal{ transform:none; }
}

/* ---------- En-tête ---------- */
.bk-head{ padding:24px 26px 0; flex:0 0 auto; position:relative; }
.bk-eyebrow{ font-family:var(--f-display); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.bk-title{ font-family:var(--f-display); color:var(--ink); font-size:1.4rem; line-height:1.15; margin-top:3px; }
.bk-close{
  position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink); background:var(--paper-2);
  font-size:1.6rem; line-height:1; transition:background .2s var(--ease), transform .25s var(--ease);
}
.bk-close:hover{ background:var(--blue-pale); transform:rotate(90deg); }

/* Indicateur d'étapes */
.bk-steps{ display:flex; gap:8px; margin-top:20px; }
.bk-steps li{ flex:1; display:flex; flex-direction:column; gap:8px; font-size:.72rem; font-weight:600; color:var(--slate-soft); letter-spacing:.01em; }
.bk-steps li > span{ height:4px; border-radius:99px; background:var(--line); transition:background .35s var(--ease); }
.bk-steps li.active{ color:var(--blue); }
.bk-steps li.active > span,.bk-steps li.done > span{ background:var(--blue); }
@media (max-width:520px){ .bk-steps li{ font-size:0; gap:0; } .bk-steps li > span{ height:5px; } }

/* ---------- Corps (défile) ---------- */
.bk-body{ padding:24px 26px; overflow-y:auto; flex:1 1 auto; -webkit-overflow-scrolling:touch; }
.bk-pane[hidden]{ display:none; }
.bk-pane{ animation:bkFade .4s var(--ease) both; }
@keyframes bkFade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .bk-pane{ animation:none; } }
.bk-label{ font-family:var(--f-display); font-weight:600; color:var(--ink); font-size:1.08rem; margin-bottom:16px; }
/* Le titre d'étape reçoit le focus pour l'annonce lecteur d'écran : pas de contour visible (élément non interactif) */
.bk-label:focus,.bk-success h3:focus{ outline:none; }
.bk-sublabel{ font-family:var(--f-display); font-weight:600; color:var(--ink); font-size:.92rem; margin:0 0 8px; }

/* ---------- Étape 1 : cours ---------- */
.bk-courses{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:480px){ .bk-courses{ grid-template-columns:1fr; } }
.bk-course{
  display:flex; gap:12px; align-items:flex-start; text-align:left;
  padding:14px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); transition:border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.bk-course:hover{ border-color:var(--blue-light); background:var(--blue-pale); }
.bk-course.is-sel{ border-color:var(--blue); background:var(--blue-pale); box-shadow:inset 0 0 0 1px var(--blue); }
.bk-course .ic{ width:34px; height:34px; flex:none; color:var(--blue); }
.bk-course .ic svg{ width:100%; height:100%; }
.bk-course b{ font-family:var(--f-display); color:var(--ink); font-size:.95rem; line-height:1.2; }
.bk-course small{ color:var(--slate); font-size:.8rem; line-height:1.4; display:block; margin-top:3px; }

/* ---------- Étape 2 : calendrier ---------- */
.bk-cal{ border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:16px; }
.bk-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.bk-cal-title{ font-family:var(--f-display); font-weight:600; color:var(--ink); text-transform:capitalize; }
.bk-cal-nav{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--paper-2); color:var(--ink); transition:background .2s var(--ease), color .2s var(--ease); }
.bk-cal-nav svg{ width:18px; height:18px; }
.bk-cal-nav:hover:not(:disabled){ background:var(--blue-pale); color:var(--blue); }
.bk-cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.bk-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.bk-dow{ text-align:center; font-size:.66rem; font-weight:700; color:var(--slate-soft); text-transform:uppercase; padding:6px 0; }
.bk-day{ aspect-ratio:1; border-radius:10px; display:grid; place-items:center; font-size:.86rem; font-weight:600; color:var(--ink); background:transparent; transition:background .15s var(--ease), color .15s var(--ease); }
.bk-day:hover:not(:disabled):not(.is-empty){ background:var(--blue-pale); }
.bk-day:disabled{ color:var(--line); cursor:not-allowed; }
.bk-day.is-empty{ visibility:hidden; pointer-events:none; }
.bk-day.is-today{ box-shadow:inset 0 0 0 1.5px var(--blue-light); }
.bk-day.is-sel{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }

/* Créneaux horaires */
.bk-slots-wrap{ margin-top:20px; }
.bk-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px; }
.bk-slot{ padding:11px 6px; border:1.5px solid var(--line); border-radius:10px; font-weight:600; color:var(--ink); font-size:.9rem; transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.bk-slot:hover{ border-color:var(--blue-light); background:var(--blue-pale); }
.bk-slot.is-sel{ border-color:var(--blue); background:var(--blue); color:#fff; }

/* ---------- Étape 3 : formulaire ---------- */
.bk-form{ display:grid; gap:16px; }
.bk-row{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width:480px){ .bk-row{ grid-template-columns:1fr; } }
.bk-field{ display:flex; flex-direction:column; gap:6px; }
.bk-field label{ font-size:.82rem; font-weight:600; color:var(--ink); }
.bk-field .req{ color:var(--blue); }
.bk-field input,.bk-field select,.bk-field textarea{
  font:inherit; font-size:.95rem; color:var(--ink); width:100%;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bk-field input::placeholder,.bk-field textarea::placeholder{ color:var(--slate-soft); }
.bk-field input:focus,.bk-field select:focus,.bk-field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(1,141,210,.15);
}
.bk-field textarea{ resize:vertical; min-height:84px; }
.bk-field.has-err input,.bk-field.has-err select{ border-color:#e23b4e; box-shadow:0 0 0 3px rgba(226,59,78,.12); }
.bk-err{ color:#e23b4e; font-size:.76rem; font-weight:600; display:none; }
.bk-field.has-err .bk-err{ display:block; }

/* ---------- Étape 4 : récapitulatif ---------- */
.bk-recap{ border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.bk-recap-row{ display:flex; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid var(--line); font-size:.92rem; }
.bk-recap-row:last-child{ border-bottom:none; }
.bk-recap-row .k{ color:var(--slate); flex:none; }
.bk-recap-row .v{ color:var(--ink); font-weight:600; text-align:right; }
.bk-note{ margin-top:16px; font-size:.8rem; color:var(--slate-soft); display:flex; gap:9px; align-items:flex-start; line-height:1.5; }
.bk-note svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--blue); }

/* ---------- Succès ---------- */
.bk-success{ text-align:center; padding:10px 4px; }
.bk-check{ width:78px; height:78px; margin:0 auto 18px; border-radius:50%; background:var(--blue-pale); display:grid; place-items:center; color:var(--blue); animation:bkPop .5s var(--ease) both; }
.bk-check svg{ width:42px; height:42px; }
@keyframes bkPop{ 0%{ transform:scale(.5); opacity:0;} 60%{ transform:scale(1.08);} 100%{ transform:scale(1); opacity:1;} }
@media (prefers-reduced-motion: reduce){ .bk-check{ animation:none; } }
.bk-success h3{ font-family:var(--f-display); color:var(--ink); font-size:1.45rem; }
.bk-success > p{ color:var(--slate); margin-top:8px; max-width:42ch; margin-inline:auto; }
.bk-ref{ display:inline-block; margin-top:16px; padding:9px 18px; border-radius:99px; background:var(--navy); color:#fff; font-family:var(--f-display); letter-spacing:.08em; font-weight:600; font-size:.95rem; }

/* ---------- Pied (boutons) ---------- */
.bk-foot{ display:flex; align-items:center; gap:12px; padding:16px 26px; border-top:1px solid var(--line); flex:0 0 auto; background:var(--paper); }
.bk-spacer{ flex:1; }
.bk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:99px; font-family:var(--f-display); font-weight:600; font-size:.95rem; transition:transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.bk-btn svg{ width:18px; height:18px; }
.bk-btn--primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
.bk-btn--primary:hover:not(:disabled){ background:var(--blue-deep); transform:translateY(-1px); }
.bk-btn--primary:disabled{ background:var(--line); color:var(--slate-soft); box-shadow:none; cursor:not-allowed; }
.bk-btn--ghost{ background:var(--paper-2); color:var(--ink); }
.bk-btn--ghost:hover{ background:var(--blue-pale); color:var(--blue); }