/* ========================================================
   Prise de rendez-vous (rendez-vous.html)
   ======================================================== */
.bk{padding-top:8px;}

/* ---------- fil d'ariane / stepper ---------- */
.bk-stepper{
  --p:0;
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  margin:0 auto 34px;max-width:760px;
}
.bk-stepper::before,.bk-stepper::after{
  content:"";position:absolute;top:19px;left:12.5%;height:2px;border-radius:2px;
}
.bk-stepper::before{right:12.5%;background:var(--border-strong);}
.bk-stepper::after{
  width:calc(75% * var(--p));background:var(--gradient);
  box-shadow:0 0 14px var(--cyan);transition:width .6s var(--ease);
}
.bk-step{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;color:var(--text-dim);cursor:default;padding:0;font:inherit;
}
.bk-step.done{cursor:pointer;}
.bk-dot{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border-strong);
  font:700 14px "Space Grotesk";transition:all .4s var(--ease);
}
.bk-dot svg{display:none;}
.bk-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;transition:color .3s;}
.bk-step.active .bk-dot{
  background:var(--gradient);border-color:transparent;color:#04060c;transform:scale(1.12);
  box-shadow:0 0 0 6px var(--cyan-soft),0 10px 30px -8px var(--cyan);
}
.bk-step.active .bk-label{color:var(--text);}
.bk-step.done .bk-dot{background:var(--cyan-soft);border-color:var(--cyan);color:var(--cyan);}
.bk-step.done .bk-dot span{display:none;}
.bk-step.done .bk-dot svg{display:block;}
.bk-step.done:hover .bk-label{color:var(--cyan);}

/* ---------- mise en page ---------- */
.bk-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);gap:26px;align-items:start;}
.bk-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:24px;
  padding:34px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.bk-card::before{
  content:"";position:absolute;inset:-1px -1px auto -1px;height:3px;background:var(--gradient);opacity:.9;
}
.bk-title{font:700 clamp(1.3rem,2.4vw,1.7rem)/1.2 "Space Grotesk";margin:0 0 6px;}
.bk-sub{color:var(--text-muted);font-size:14px;margin:0 0 24px;}

.bk-panel{display:none;}
.bk-panel.active{display:block;animation:bkIn .45s var(--ease);}
@keyframes bkIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---------- étape 1 : pôles ---------- */
.bk-services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.bk-service{
  --mx:50%;--my:50%;
  position:relative;text-align:left;padding:22px 18px 20px;border-radius:18px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  overflow:hidden;isolation:isolate;cursor:pointer;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease);
  animation:bkIn .5s var(--ease) both;
}
.bk-service:nth-child(2){animation-delay:.07s;}
.bk-service:nth-child(3){animation-delay:.14s;}
.bk-service::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx) var(--my),var(--cyan-soft),transparent 70%);
}
.bk-service:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow-md);}
.bk-service:hover::before{opacity:1;}
.bk-service .ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--cyan-soft);color:var(--cyan);transition:transform .4s var(--ease),background .3s,color .3s;
}
.bk-service:hover .ic{transform:rotate(-6deg) scale(1.08);}
.bk-service strong{display:block;font:700 16px "Space Grotesk";}
.bk-service span.d{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--text-muted);}
.bk-service .tick{
  position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--gradient);color:#04060c;
  transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}
.bk-service.selected{
  border-color:transparent;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--gradient) border-box;
  border:1.5px solid transparent;box-shadow:0 18px 44px -20px var(--cyan);
}
.bk-service.selected .ic{background:var(--gradient);color:#04060c;}
.bk-service.selected .tick{transform:scale(1);}

/* ---------- étape 2 : calendrier ---------- */
.bk-when{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:26px;align-items:start;}
.bk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.bk-cal-head strong{font:700 16px "Space Grotesk";text-transform:capitalize;}
.bk-nav{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--border);color:var(--text-muted);
  display:grid;place-items:center;background:var(--surface-2);transition:all .25s;
}
.bk-nav:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);}
.bk-nav:disabled{opacity:.3;pointer-events:none;}
.bk-dow,.bk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.bk-dow span{text-align:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding-bottom:8px;}
.bk-day{
  position:relative;aspect-ratio:1;border-radius:12px;border:1px solid transparent;background:var(--surface-2);
  color:var(--text);font:600 14px "Space Grotesk";display:grid;place-items:center;transition:all .25s var(--ease);
}
.bk-day.empty{background:none;pointer-events:none;}
.bk-day:disabled{background:none;color:var(--text-dim);opacity:.35;pointer-events:none;}
.bk-day:not(:disabled):not(.empty):hover{border-color:var(--cyan);transform:translateY(-2px);color:var(--cyan);}
.bk-day.today::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--cyan);}
.bk-day.selected,.bk-day.selected:hover{background:var(--gradient);color:#04060c !important;border-color:transparent;transform:scale(1.06);box-shadow:0 10px 26px -8px var(--cyan);}
.bk-day.selected::after{background:#04060c;}

.bk-slots-title{font:600 13px Inter;color:var(--text-muted);margin:0 0 12px;min-height:20px;}
.bk-slots-title strong{color:var(--cyan);text-transform:capitalize;}
.bk-group{margin-bottom:16px;}
.bk-group h4{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.bk-group h4::after{content:"";flex:1;height:1px;background:var(--border);}
.bk-slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.bk-slot{
  padding:11px 6px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);
  font:600 14px "Space Grotesk";color:var(--text);transition:all .25s var(--ease);
  animation:bkIn .35s var(--ease) both;
}
.bk-slot:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);}
.bk-slot.selected,.bk-slot.selected:hover{background:var(--gradient);color:#04060c !important;border-color:transparent;box-shadow:0 10px 26px -10px var(--cyan);}
.bk-slot:disabled{opacity:.3;text-decoration:line-through;pointer-events:none;}
.bk-empty{padding:22px 16px;border:1px dashed var(--border-strong);border-radius:14px;text-align:center;color:var(--text-dim);font-size:13px;}

/* ---------- étape 3 : champs flottants ---------- */
.bk-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.bk-field{position:relative;}
.bk-field.full{grid-column:1/-1;}
.bk-field input,.bk-field textarea{
  width:100%;padding:24px 42px 9px 16px;border-radius:14px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);font:500 15px Inter;outline:none;resize:vertical;
  transition:border-color .25s,box-shadow .25s;
}
.bk-field textarea{min-height:110px;padding-top:28px;}
.bk-field label{
  position:absolute;left:16px;top:17px;font-size:14px;color:var(--text-dim);pointer-events:none;
  transition:all .2s var(--ease);transform-origin:left;
}
.bk-field input:focus,.bk-field textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);}
.bk-field input:focus + label,.bk-field input:not(:placeholder-shown) + label,
.bk-field textarea:focus + label,.bk-field textarea:not(:placeholder-shown) + label{
  top:7px;font-size:11px;letter-spacing:.04em;color:var(--cyan);font-weight:600;
}
.bk-field .ok{
  position:absolute;right:14px;top:16px;color:var(--cyan);opacity:0;transform:scale(.4);transition:all .3s cubic-bezier(.3,1.6,.5,1);
}
.bk-field.valid .ok{opacity:1;transform:none;}
.bk-field.invalid input{border-color:#f87171;}

/* ---------- étape 4 : récapitulatif ---------- */
.bk-recap{border:1px solid var(--border);border-radius:18px;background:var(--surface-2);overflow:hidden;}
.bk-recap-row{display:flex;justify-content:space-between;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border);font-size:14px;}
.bk-recap-row:last-child{border-bottom:0;}
.bk-recap-row span:first-child{color:var(--text-dim);flex:none;}
.bk-recap-row span:last-child{font-weight:600;text-align:right;overflow-wrap:anywhere;}
.bk-legal{margin-top:14px;font-size:12.5px;color:var(--text-dim);}
.bk-legal a{color:var(--cyan);}

/* ---------- actions ---------- */
.bk-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px;}
.bk-actions .btn{min-width:130px;justify-content:center;}
.bk-actions #bkBack{margin-right:auto;}
.bk-actions .btn:disabled{opacity:.4;pointer-events:none;filter:saturate(.4);}
.bk-actions .btn-primary:not(:disabled){animation:bkPulse 2.4s ease-in-out 3;}
@keyframes bkPulse{0%,100%{box-shadow:0 10px 30px -10px var(--cyan);}50%{box-shadow:0 10px 44px -6px var(--violet);}}

/* ---------- ticket récapitulatif ---------- */
.bk-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;}
.bk-ticket{
  position:relative;border-radius:22px;padding:24px 22px 22px;
  background:linear-gradient(160deg,var(--surface),var(--surface-2));
  border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);
}
.bk-ticket::before,.bk-ticket::after{
  content:"";position:absolute;top:96px;width:20px;height:20px;border-radius:50%;background:var(--bg);
  border:1px solid var(--border-strong);
}
.bk-ticket::before{left:-11px;clip-path:inset(0 0 0 50%);}
.bk-ticket::after{right:-11px;clip-path:inset(0 50% 0 0);}
.bk-ticket-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:2px dashed var(--border-strong);}
.bk-ticket-top strong{font:700 15px "Space Grotesk";}
.bk-ticket-top small{display:block;font-size:11px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;}
.bk-ring{--v:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--cyan) calc(var(--v)*1%),var(--border) 0);position:relative;transition:--v .5s;}
.bk-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface);}
.bk-ring span{position:relative;font:700 12px "Space Grotesk";}
.bk-ticket-rows{display:flex;flex-direction:column;gap:16px;padding-top:22px;}
.bk-trow{display:flex;gap:12px;align-items:flex-start;}
.bk-trow .ti{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--surface-2);color:var(--text-dim);transition:all .4s var(--ease);}
.bk-trow small{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);}
.bk-trow b{display:block;margin-top:2px;font-size:14px;font-weight:600;color:var(--text-dim);font-style:italic;overflow-wrap:anywhere;}
.bk-trow.filled .ti{background:var(--gradient);color:#04060c;}
.bk-trow.filled b{color:var(--text);font-style:normal;animation:bkIn .4s var(--ease);}

.bk-how{display:flex;flex-direction:column;gap:12px;padding:6px 6px 0;}
.bk-how div{display:flex;gap:12px;align-items:flex-start;font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.bk-how i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--cyan-soft);color:var(--cyan);font:700 11px "Space Grotesk";font-style:normal;}
.bk-how strong{color:var(--text);}

/* ---------- succès ---------- */
.bk-success{text-align:center;padding:16px 4px 6px;}
.bk-check{width:96px;height:96px;margin:0 auto 20px;}
.bk-check circle{fill:var(--cyan-soft);stroke:var(--cyan);stroke-width:2;stroke-dasharray:283;stroke-dashoffset:283;animation:bkDraw .7s .1s var(--ease) forwards;}
.bk-check path{fill:none;stroke:var(--cyan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:bkDraw .5s .6s var(--ease) forwards;}
@keyframes bkDraw{to{stroke-dashoffset:0;}}
.bk-success h3{font:700 clamp(1.5rem,3vw,2rem)/1.2 "Space Grotesk";margin:0;}
.bk-success > p{color:var(--text-muted);max-width:480px;margin:12px auto 0;font-size:14.5px;line-height:1.6;}
.bk-success .bk-recap{max-width:440px;margin:24px auto 0;text-align:left;}
.bk-success .btn{margin-top:26px;}
#bkConfetti{position:fixed;inset:0;pointer-events:none;z-index:300;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .bk-grid{grid-template-columns:1fr;}
  .bk-side{position:static;order:-1;}
  .bk-how{display:none;}
  .bk-ticket{padding:16px 18px;}
  .bk-ticket::before,.bk-ticket::after{display:none;}
  .bk-ticket-top{padding-bottom:14px;}
  .bk-ticket-rows{flex-direction:row;flex-wrap:wrap;gap:12px 20px;padding-top:14px;}
  .bk-trow{flex:1 1 130px;}
  .bk-when{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .bk-card{padding:24px 18px;border-radius:20px;}
  .bk-services{grid-template-columns:1fr;}
  .bk-service{display:grid;grid-template-columns:48px 1fr;column-gap:14px;padding:16px;}
  .bk-service .ic{grid-row:span 2;margin:0;}
  .bk-service span.d{margin-top:2px;}
  .bk-fields{grid-template-columns:1fr;}
  .bk-label{display:none;}
  .bk-dot{width:34px;height:34px;}
  .bk-stepper::before,.bk-stepper::after{top:16px;}
  .bk-actions .btn{min-width:0;flex:1;}
  .bk-actions #bkBack{flex:0 0 auto;}
}
@media (prefers-reduced-motion:reduce){
  .bk-panel.active,.bk-service,.bk-slot,.bk-actions .btn-primary:not(:disabled){animation:none !important;}
  .bk-check circle,.bk-check path{animation-duration:.01s;animation-delay:0s;}
}
.bk-account-hint{margin:20px 0 0;font-size:13.5px;color:var(--text-muted);}
.bk-account-hint a{color:var(--cyan);font-weight:600;}
.bk-account-hint + .btn{margin-top:14px;}