/* ===========================================================================
   BOOKING + PAIEMENT — style-2026 · Salon Claude Daniel
   Marqueurs : booking-2026 / stripe-like / card-visual / dark-mode
   =========================================================================== */

.booking-page{background:var(--color-bg);color:var(--color-text);min-height:100vh}

/* Demo banner */
.demo-banner{
  background:linear-gradient(90deg, rgba(139,63,46,.18), rgba(201,160,98,.18));
  border-bottom:1px solid rgba(201,160,98,.32);
  color:var(--color-text);
  padding:10px var(--pad-x);
  text-align:center;
  font-size:.82rem;letter-spacing:.02em;
  position:sticky;top:0;z-index:80;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.demo-banner strong{color:var(--color-accent);font-weight:600;letter-spacing:.04em;margin-right:.4rem}
.demo-banner a{color:var(--color-accent);border-bottom:1px solid rgba(201,160,98,.4);padding-bottom:1px}
.demo-banner a:hover{color:var(--color-accent-hover)}
.demo-banner--bottom{position:relative;border-top:1px solid rgba(201,160,98,.32);border-bottom:0;margin-top:0}
.demo-banner--strong{background:linear-gradient(90deg, rgba(139,63,46,.35), rgba(201,160,98,.18))}
.demo-banner--strong em{color:#ffb8a8;font-style:normal;font-weight:600}

.booking-nav{position:relative;background:rgba(15,13,11,.85);border-bottom:1px solid rgba(201,160,98,.16)}
.booking-nav.nav{padding:14px 0}

.booking-main{padding:clamp(30px, 5vw, 60px) 0 80px}
.booking-container{max-width:1200px}

/* Stepper */
.stepper{
  list-style:none;padding:0;margin:0 0 36px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 14px;
}
.stepper__step{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;letter-spacing:.06em;
  color:var(--color-text-muted);
  position:relative;
}
.stepper__step + .stepper__step::before{
  content:"";display:inline-block;width:32px;height:1px;
  background:rgba(201,160,98,.25);margin-right:6px;
}
.stepper__num{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,160,98,.3);font-size:.8rem;
  background:transparent;font-weight:500;
  transition:all var(--d-fast) var(--ease);
}
.stepper__step.is-active{color:var(--color-accent)}
.stepper__step.is-active .stepper__num{
  background:var(--color-accent);color:#1A1714;border-color:var(--color-accent);
  font-weight:600;
}
.stepper__step.is-done .stepper__num{
  background:rgba(201,160,98,.18);color:var(--color-accent);border-color:var(--color-accent);
}

.booking-head{text-align:center;margin-bottom:clamp(28px, 5vw, 52px)}
.booking-head .kicker{justify-content:center}
.booking-head h1{margin-bottom:.8rem}
.booking-head .lead{max-width:540px;margin:0 auto;color:var(--color-text-muted)}

/* Grid */
.booking-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(28px, 4vw, 52px);
  align-items:start;
}
@media (max-width: 920px){
  .booking-grid{grid-template-columns:1fr}
}

.booking-form{display:flex;flex-direction:column;gap:24px}

.bk-fs{
  border:1px solid rgba(201,160,98,.18);
  border-radius:14px;
  padding:24px;
  margin:0;
  background:rgba(26,23,20,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  position:relative;
}
.bk-fs legend{
  padding:0 10px;margin-left:8px;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-accent);font-weight:500;
  background:var(--color-bg);
}

.bk-row{display:grid;gap:14px;margin-bottom:14px}
.bk-row:last-child{margin-bottom:0}
.bk-row--2{grid-template-columns:1fr 1fr}
@media (max-width: 520px){.bk-row--2{grid-template-columns:1fr}}

.bk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.bk-field:last-child{margin-bottom:0}
.bk-field > span{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-muted);font-weight:500;
}
.bk-field input,
.bk-field select,
.bk-field textarea{
  background:rgba(15,13,11,.6);
  color:var(--color-text);
  border:1px solid rgba(201,160,98,.18);
  border-radius:8px;
  padding:12px 14px;
  font:inherit;
  font-size:.95rem;
  transition:border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus{
  outline:none;
  border-color:var(--color-accent);
  background:rgba(15,13,11,.85);
  box-shadow:0 0 0 3px rgba(201,160,98,.16);
}
.bk-field textarea{resize:vertical;min-height:80px}
.bk-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A062' stroke-width='1.8'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}

/* Radio cards */
.presta-radio{display:grid;gap:10px}
.presta-radio--cols{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr))}
.presta-radio__card{
  position:relative;cursor:pointer;
  background:rgba(15,13,11,.4);
  border:1px solid rgba(201,160,98,.18);
  border-radius:10px;
  padding:14px 18px;
  transition:border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.presta-radio__card:hover{border-color:rgba(201,160,98,.5);background:rgba(26,23,20,.7);transform:translateY(-1px)}
.presta-radio__card input{position:absolute;opacity:0;pointer-events:none}
.presta-radio__card:has(input:checked){
  border-color:var(--color-accent);
  background:rgba(201,160,98,.10);
  box-shadow:inset 0 0 0 1px var(--color-accent);
}
.presta-radio__inner{display:flex;flex-direction:column;gap:4px}
.presta-radio__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.presta-radio__title{
  font-family:var(--font-display);font-size:1.04rem;
  color:var(--color-text);font-weight:400;
  font-variation-settings:"opsz" 24;
}
.presta-radio__price{
  font-family:var(--font-display);font-style:italic;
  color:var(--color-accent);
  font-size:1rem;
}
.presta-radio__desc{
  font-size:.82rem;color:var(--color-text-muted);
  margin:0;line-height:1.5;
}
.presta-radio__card--sm{padding:10px 14px}
.presta-radio__card--sm .presta-radio__title{font-size:.92rem}
.presta-radio__card--sm .presta-radio__desc{font-size:.74rem;margin-top:2px}

/* Pay modes */
.pay-modes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit, minmax(170px, 1fr))}
.pay-mode{
  position:relative;cursor:pointer;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:rgba(15,13,11,.4);
  border:1px solid rgba(201,160,98,.18);
  border-radius:10px;
  transition:all var(--d-fast) var(--ease);
}
.pay-mode input{position:absolute;opacity:0;pointer-events:none}
.pay-mode:has(input:checked){border-color:var(--color-accent);background:rgba(201,160,98,.10);box-shadow:inset 0 0 0 1px var(--color-accent)}
.pay-mode__icon{
  width:40px;height:40px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,160,98,.10);color:var(--color-accent);
  border-radius:8px;
}
.pay-mode__title{display:block;color:var(--color-text);font-weight:500;font-size:.92rem}
.pay-mode__hint{display:block;color:var(--color-text-muted);font-size:.76rem}

/* Card visual */
.card-visual{
  position:relative;
  border-radius:16px;
  aspect-ratio:1.586/1;
  max-width:420px;
  margin:0 0 12px;
  background:
    linear-gradient(135deg, #1F1A14, #0F0D0B 60%, #2D1F12);
  box-shadow:var(--shadow-3), 0 0 0 1px rgba(201,160,98,.22);
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--d-mid) var(--ease);
}
.card-visual::before{
  content:"";position:absolute;inset:-40%;z-index:0;
  background:conic-gradient(from 220deg at 50% 50%, rgba(201,160,98,.18), rgba(139,63,46,.12), transparent 50%, rgba(201,160,98,.18));
  animation:meshRotate 32s linear infinite;
  filter:blur(30px);
}
.card-visual__inner{
  position:relative;z-index:1;
  padding:22px 24px;
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;
  color:var(--color-text);
}
.card-visual__brand{
  font-family:var(--font-display);font-style:italic;font-size:.92rem;
  color:var(--color-accent);letter-spacing:.04em;
  text-transform:lowercase;
}
.card-visual__chip{
  width:40px;height:30px;border-radius:5px;
  background:linear-gradient(135deg, #D4A85C, #8B6722);
  position:relative;
  margin-top:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.card-visual__chip::before,
.card-visual__chip::after{
  content:"";position:absolute;background:rgba(0,0,0,.2);
}
.card-visual__chip::before{top:7px;left:4px;right:4px;height:1px}
.card-visual__chip::after{top:18px;left:4px;right:4px;height:1px}
.card-visual__number{
  font-family:"Courier New", ui-monospace, monospace;
  font-size:clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing:.16em;
  color:var(--color-text);
  margin:8px 0;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.card-visual__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
}
.card-visual__row > div{display:flex;flex-direction:column;gap:2px}
.card-visual__row span{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-text-muted);
}
.card-visual__row strong{
  font-family:"Courier New", ui-monospace, monospace;
  font-size:.85rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--color-text);
}
.card-visual__network{
  position:absolute;right:24px;bottom:22px;z-index:2;
  font-family:var(--font-body);
  font-size:1.1rem;font-weight:700;
  font-style:italic;
  color:var(--color-text);
  letter-spacing:.04em;
}

/* Checks */
.bk-checks{display:flex;flex-direction:column;gap:10px}
.bk-check{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.86rem;color:var(--color-text-muted);
  cursor:pointer;
  line-height:1.5;
}
.bk-check input{
  margin-top:3px;flex:0 0 auto;
  accent-color:var(--color-accent);
  width:16px;height:16px;
}
.bk-check a{color:var(--color-accent);border-bottom:1px solid rgba(201,160,98,.3)}

/* Actions */
.bk-actions{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}
.bk-actions .btn--gold{margin-left:auto}

.bk-secure{
  margin-top:14px;display:flex;align-items:center;gap:8px;
  font-size:.78rem;color:var(--color-text-muted);
}
.bk-secure svg{color:var(--color-accent)}
.bk-secure em{color:var(--color-accent);font-style:italic}

/* Recap */
.booking-recap{position:sticky;top:80px;height:fit-content}
@media (max-width: 920px){.booking-recap{position:static}}
.recap{
  background:rgba(26,23,20,.7);
  border:1px solid rgba(201,160,98,.18);
  border-radius:16px;
  padding:24px;
  display:flex;flex-direction:column;gap:10px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.recap__media{
  margin:-24px -24px 8px;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:16px 16px 0 0;
  position:relative;
}
.recap__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(15,13,11,.6));
  pointer-events:none;
}
.recap__media img{width:100%;height:100%;object-fit:cover}
.recap__title{
  font-family:var(--font-display);font-weight:400;
  font-size:1.4rem;
  margin:6px 0 2px;color:var(--color-text);
  font-variation-settings:"opsz" 36;
}
.recap__sub{
  font-size:.84rem;color:var(--color-text-muted);
  margin:0 0 14px;
}
.recap__row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 0;
  border-top:1px solid rgba(201,160,98,.12);
  font-size:.9rem;
}
.recap__row:first-of-type{border-top:0}
.recap__row span{color:var(--color-text-muted);font-size:.78rem;letter-spacing:.04em}
.recap__row strong{color:var(--color-text);font-weight:500;text-align:right}

.recap__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:14px 0 4px;
  margin-top:6px;
  border-top:1px solid rgba(201,160,98,.3);
}
.recap__total span{font-size:.84rem;color:var(--color-text-muted)}
.recap__total strong{
  font-family:var(--font-display);font-style:italic;
  font-size:1.8rem;color:var(--color-accent);
  letter-spacing:-.01em;
}
.recap__note{
  margin:.6rem 0 0;
  padding:12px 14px;
  background:rgba(201,160,98,.06);
  border:1px solid rgba(201,160,98,.18);
  border-radius:8px;
  font-size:.82rem;color:var(--color-text-muted);
  line-height:1.55;
}
.recap__note--gold strong{
  display:block;color:var(--color-accent);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:4px;font-weight:500;
}
.recap__small{margin:.4rem 0 0;font-size:.78rem;color:var(--color-text-muted);font-style:italic}

.recap__trust{
  list-style:none;padding:0;margin:1rem 0 0;
  display:flex;flex-direction:column;gap:8px;
}
.recap__trust li{
  display:flex;align-items:center;gap:10px;
  font-size:.82rem;color:var(--color-text-muted);
}
.recap__trust li span{color:var(--color-accent);font-size:.95rem}

/* Modal */
.modal{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity var(--d-mid) var(--ease), visibility var(--d-mid) var(--ease);
}
.modal.is-open{opacity:1;visibility:visible}
.modal__backdrop{
  position:absolute;inset:0;
  background:rgba(10,9,8,.84);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.modal__inner{
  position:relative;
  max-width:440px;width:100%;
  background:linear-gradient(180deg, #1F1A14, #0F0D0B);
  border:1px solid rgba(201,160,98,.25);
  border-radius:18px;
  padding:42px 32px 30px;
  text-align:center;
  transform:translateY(20px) scale(.96);
  transition:transform var(--d-slow) var(--ease);
  box-shadow:var(--shadow-3), 0 0 80px rgba(201,160,98,.15);
}
.modal.is-open .modal__inner{transform:none}
.modal__close{
  position:absolute;top:14px;right:18px;
  font-size:1.8rem;color:var(--color-text-muted);
  line-height:1;
  transition:color var(--d-fast) var(--ease);
}
.modal__close:hover{color:var(--color-accent)}
.modal__check{
  width:80px;height:80px;margin:0 auto 18px;
  color:var(--color-accent);
}
.modal__check svg{display:block}
.modal-circle{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 700ms var(--ease);
}
.modal-check{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 600ms var(--ease) 500ms;
}
.modal.is-open .modal-circle,
.modal.is-open .modal-check{stroke-dashoffset:0}

.modal__inner h3{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:1.8rem;
  margin:0 0 .6rem;color:var(--color-text);
  font-variation-settings:"opsz" 48;
}
.modal__sub{font-size:.95rem;color:var(--color-text-muted);margin:0 0 .4rem;line-height:1.55}
.modal__demo{font-size:.82rem;color:var(--color-accent-2);margin:0 0 1.4rem;font-style:italic}

/* ===========================================================================
   END booking-2026
   =========================================================================== */