/* Habillage du parcours devis : palette et typographies du site EYWA. */
:root {
  --green:#203d30; --green-light:#2c503e; --green-dark:#152b22;
  --cream:#f8f7f3; --gold:#e6ce83; --text:#243c30;
  --muted:#657068; --border:#dcded6; --radius:4px;
  --sans:'DM Sans',Arial,sans-serif; --serif:'Fraunces',Georgia,serif;
}
body { font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button, input, textarea, select { font-family:var(--sans); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.quote-header, .top-bar {
  width:min(1280px,calc(100% - 96px)); min-height:88px; margin:auto;
  padding:0; display:flex; justify-content:space-between; align-items:center;
  background:var(--cream); border-bottom:1px solid var(--border); text-align:left;
}
.quote-header::before { display:none; }
.brand-logo, .top-bar .logo { color:var(--green); font:400 32px/1 var(--serif); letter-spacing:.22em; text-decoration:none; }
.quote-home { font-size:13px; text-decoration:none; }
.quote-home span { margin-left:16px; }
.quote-intro { width:min(1280px,calc(100% - 96px)); margin:0 auto; padding:48px 0 38px; }
.quote-eyebrow { color:var(--green); font-size:11px; font-weight:600; letter-spacing:.16em; margin:0 0 18px; line-height:1.5; }
.quote-intro h1 { color:var(--green); font:400 clamp(32px,3.6vw,48px)/1.12 var(--serif); letter-spacing:-.035em; margin:0 0 16px; }
.quote-intro > p:last-child { color:var(--muted); font-size:15px; line-height:1.65; }
.quote-workspace { width:min(1280px,calc(100% - 96px)); margin:0 auto 64px; display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:clamp(32px,5vw,76px); }
.quote-form main { width:100%; max-width:none; padding:0; min-width:0; }
.quote-story { position:sticky; top:28px; }
.quote-story > img { display:block; width:100%; height:290px; object-fit:cover; border-radius:4px 4px 0 0; }
.quote-story-copy { padding:30px 34px; background:#edf0e9; border-radius:0 0 4px 4px; }
.quote-story-copy h2 { font:400 32px/1.15 var(--serif); letter-spacing:-.025em; margin:0 0 16px; }
.quote-story-copy > p:not(.quote-eyebrow) { max-width:370px; font-size:14px; line-height:1.7; color:var(--muted); margin-bottom:20px; }
.quote-story-copy a { font-size:13px; text-underline-offset:5px; }
.quote-story-copy a span { margin-left:14px; }
.form-card { padding:32px; border:1px solid var(--border); border-radius:4px; box-shadow:none; }
.step.active { padding-bottom:0; }
.fq-title, .question, .success-title { font:400 28px/1.18 var(--serif); letter-spacing:-.025em; color:var(--green); }
.fq-title { margin-bottom:28px; }
.question-sub { line-height:1.65; margin-top:10px; }
.fq-label { font-size:14px; font-weight:500; }
.fq-hint { color:var(--muted); opacity:1; line-height:1.65; }
.fq-divider { border-top-width:1px; margin:26px 0; }
.fq-barista-name { font-weight:500; line-height:1.5; }
.fq-barista-sub { line-height:1.6; }
.fq-avatar { background:#edf0e9; color:var(--green); font-weight:500; }
.step-btn, .stepper-center { border-width:1px; }
.stepper-val, .guest-input { font-size:22px; font-weight:500; }
.qp { border-radius:4px; font:400 13px var(--sans); }
.btn-row { position:static; width:100%; transform:none; margin-top:26px; padding:0; border:0; box-shadow:none; background:transparent; }
.btn-fq, .btn-next, .btn-cta, .btn-back, .btn-pay, .btn-contact, .btn-sm { min-height:48px; border-radius:4px; font-weight:500; }
.btn-fq, .btn-cta { background:var(--gold); color:var(--green-dark); }
.btn-fq:hover, .btn-cta:hover { background:#ecd99e; }
.type-opt, .perso-card, .breakdown, .payment-note, .success-detail { border-radius:4px; }
.price-amount { font:400 64px/1.1 var(--serif); letter-spacing:-.04em; }
.quote-form footer { width:100%; border-top:1px solid var(--border); padding:24px; margin-top:auto; }
.quote-result .container { max-width:1280px; width:calc(100% - 96px); padding:0 0 64px; }
.quote-result .quote-intro { width:100%; }
.quote-result .layout { grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,76px); }
.quote-result .hero { height:auto; aspect-ratio:1/1; border-radius:4px; }
.quote-result .thumb { border-radius:4px; }
.devis-card, .bottom, .rev-card { border:1px solid var(--border); border-radius:4px; box-shadow:none; }
.card-head, .card-body, .upsells { padding:28px; }
.card-title { font:400 30px/1.18 var(--serif); letter-spacing:-.025em; }
.price-box, .avail, .upsell-item, .upsell-thumb { border-radius:4px; }
.price-num { font:400 52px/1.1 var(--serif); letter-spacing:-.04em; }
.bottom h2 { font:400 27px/1.2 var(--serif); }
.top-bar .btn-outline-w { color:var(--green); border:1px solid var(--border); }
.top-bar .btn-outline-w:hover { background:#edf0e9; }
.rev-grid { grid-template-columns:1fr; }
input:focus-visible + .slider { outline:2px solid var(--green); outline-offset:4px; }
@media(max-width:850px) {
  .quote-header,.top-bar,.quote-intro,.quote-workspace { width:calc(100% - 40px); }
  .quote-result .container { width:calc(100% - 40px); }
  .quote-workspace { gap:26px; grid-template-columns:.85fr 1fr; }
  .form-card { padding:24px; }
  .quote-story-copy { padding:24px; }
  .quote-story-copy h2 { font-size:28px; }
}
@media(max-width:680px) {
  .quote-header,.top-bar { min-height:74px; }
  .brand-logo,.top-bar .logo { font-size:27px; }
  .quote-intro { padding:32px 0 26px; }
  .quote-workspace, .quote-result .layout { grid-template-columns:1fr; gap:24px; }
  .quote-story { position:static; grid-row:2; }
  .quote-story > img { height:230px; }
  .quote-workspace { margin-bottom:36px; }
  .quote-result .gallery { position:static; }
  .quote-result .hero { aspect-ratio:4/3; }
  .card-head,.card-body,.upsells { padding:24px; }
  .fq-title,.question { font-size:26px; }
  .top-actions .btn-gold { font-size:12px; padding:8px 12px; }
}
@media print {
  body { background:white; }
  .top-bar,.quote-result .gallery,.upsells,.reviews,.bottom,.btn-pay,.pay-note { display:none; }
  .quote-result .container { width:100%; padding:0; }
  .quote-result .layout { display:block; }
  .quote-intro { padding:16px 0; }
  .quote-intro h1 { font-size:30px; }
  .devis-card { break-inside:avoid; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.perso-card::before { background:linear-gradient(180deg,rgba(15,35,24,.12),rgba(15,35,24,.86)); }
.perso-sub { color:rgba(255,255,255,.9); }

/* Formulaire centré, sans visuel latéral. */
.quote-form .quote-intro { max-width:680px; text-align:center; }
.quote-form .quote-workspace { display:block; max-width:600px; }

/* En-tête compact et accents dorés pour guider le parcours. */
.quote-form .quote-header { min-height:58px; }
.quote-form .brand-logo { font-size:25px; }
.quote-form .quote-intro { padding:24px 0 22px; }
.quote-form .quote-intro .quote-eyebrow { margin-bottom:10px; font-size:10px; }
.quote-form .quote-intro h1 { font-size:clamp(29px,3vw,38px); margin-bottom:10px; }
.quote-form .quote-intro > p { color:var(--muted); font-size:14px; line-height:1.5; }
.quote-reassurance { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 20px; list-style:none; margin:15px 0 0; padding:0; color:var(--green); font-size:11px; }
.quote-reassurance li::before { content:'✓'; color:#9a7729; margin-right:6px; }
.quote-form .form-card { border-color:#cbb77b; border-radius:7px; box-shadow:0 7px 25px rgba(32,61,48,.035); }
.quote-form .dots-nav { gap:19px; margin-bottom:26px; padding:3px; }
.quote-form .dot { width:9px; height:9px; background:#dcded6; }
.quote-form .dot.done, .quote-form .dot.active { background:#ba953b; }
.quote-form .dot.active { width:9px; border-radius:50%; box-shadow:0 0 0 5px #f2e7c8; }
.quote-form .btn-next { background:var(--gold); color:var(--green-dark); }
.quote-form .btn-next:hover { background:#ecd99e; }
.quote-help { margin:20px 0 0; text-align:center; font-size:12px; line-height:1.8; color:var(--muted); }
.quote-help a { color:var(--green); text-underline-offset:4px; white-space:nowrap; }
@media(max-width:680px) {
  .quote-form .quote-header { min-height:54px; }
  .quote-form .quote-intro { padding:20px 0; }
  .quote-reassurance { gap:8px 12px; font-size:10px; }
  .quote-form .form-card { padding:24px; }
}

/* Une hauteur d’écran : seules les questions longues défilent, jamais les actions. */
body.quote-form { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
.quote-form .quote-header { flex-shrink:0; min-height:50px; margin:0 auto; }
.quote-form .quote-intro { flex-shrink:0; padding:14px 0 12px; }
.quote-form .quote-intro .quote-eyebrow, .quote-form .quote-intro > p:not(.quote-eyebrow) { display:none; }
.quote-form .quote-intro h1 { font-size:27px; margin:0; }
.quote-form .quote-intro h1 br { display:none; }
.quote-form .quote-intro h1 br::after { content:' '; }
.quote-form .quote-reassurance { margin-top:8px; }
.quote-form .quote-workspace { flex:1; min-height:0; display:flex; margin:0 auto 16px; }
.quote-form main { display:flex; flex-direction:column; min-height:0; }
.quote-form .form-card { display:flex; flex-direction:column; flex:1; min-height:0; padding:22px 28px 0; }
.quote-form .dots-nav { flex-shrink:0; margin-bottom:18px; }
.quote-form .step.active { display:flex; flex-direction:column; flex:1; min-height:0; animation:none; }
.quote-form .step-content { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; padding:3px 5px 8px; }
.quote-form .step-actions { flex-shrink:0; display:flex; gap:10px; padding:14px 0; border-top:1px solid var(--border); background:white; }
.quote-form .step-actions > button { margin:0!important; min-height:46px; }
.quote-form .step-actions .back-link { width:auto; flex:0 0 90px; order:-1; }
.quote-form .fq-title { font-size:25px; margin-bottom:18px; }
.quote-form .fq-section { margin-bottom:16px; }
.quote-form .fq-divider { margin:16px 0; }
.quote-form .fq-barista { margin-bottom:12px; }
.quote-form .fq-hint { font-size:11.5px; }
.quote-form .stepper-center, .quote-form .step-btn { height:48px; }
.quote-form .quote-help, .quote-form > footer { display:none; }
@media(max-width:680px) {
  .quote-form .quote-header { min-height:46px; }
  .quote-form .brand-logo { font-size:22px; }
  .quote-form .quote-intro { padding:12px 0; }
  .quote-form .quote-intro h1 { font-size:23px; }
  .quote-form .quote-intro h1 br { display:block; }
  .quote-form .form-card { padding:18px 18px 0; }
  .quote-form .fq-title, .quote-form .question { font-size:23px; }
  .quote-form .quote-workspace { margin-bottom:max(10px,env(safe-area-inset-bottom)); }
}
@media(max-height:650px) {
  .quote-form .quote-intro { padding:8px 0; }
  .quote-form .quote-intro h1 { font-size:21px; }
  .quote-form .quote-reassurance { display:none; }
  .quote-form .dots-nav { margin-bottom:12px; }
}
.quote-form .quote-workspace { align-items:stretch; }
.quote-form main { height:100%; }

/* Récapitulatif : les détails commencent dès le haut de la page. */
.quote-result .layout { padding-top:28px; }
.quote-result .result-intro { margin-bottom:22px; }
.quote-result .result-intro .quote-eyebrow { margin-bottom:10px; }
.quote-result .result-intro h1 { color:var(--green); font:400 clamp(28px,3vw,38px)/1.15 var(--serif); letter-spacing:-.025em; }
.quote-result .card-head { padding-top:22px; }
.quote-result .top-bar { min-height:64px; }
/* Réservation : même identité et actions toujours accessibles. */
body.quote-booking { height:100vh; height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.quote-booking .top { width:min(1280px,calc(100% - 40px)); margin:0 auto; min-height:50px; padding:0; background:var(--cream); border-bottom:1px solid var(--border); flex-shrink:0; }
.quote-booking .logo { font:400 25px/1 var(--serif); letter-spacing:.22em; color:var(--green); }
.quote-booking .phases { flex-shrink:0; background:var(--cream); border:0; padding:14px 20px; }
.quote-booking .phase { font-size:12px; }
.quote-booking .phase-dot { width:24px; height:24px; border-width:1px; }
.quote-booking .phase.active .phase-dot { background:var(--gold); border-color:var(--gold); }
.quote-booking .main { flex:1; min-height:0; padding:0 20px 14px; }
.quote-booking .card { display:flex; flex-direction:column; flex:1; min-height:0; max-width:600px; padding:22px 26px 0; border:1px solid #cbb77b; border-radius:7px; box-shadow:0 7px 25px rgba(32,61,48,.035); }
.quote-booking .dots-row { flex-shrink:0; justify-content:flex-start; gap:17px; margin-bottom:18px; padding:4px; }
.quote-booking .dot.active { background:#ba953b; box-shadow:0 0 0 4px #f2e7c8; }
.quote-booking .dot.done { background:#ba953b; opacity:1; }
.quote-booking .step { flex:1; min-height:0; flex-direction:column; }
.quote-booking .booking-content { flex:1; min-height:0; overflow:auto; scrollbar-width:thin; padding:3px 4px 12px; }
.quote-booking .step-title { font:400 28px/1.16 var(--serif); letter-spacing:-.025em; }
.quote-booking .step-sub { margin-top:10px; margin-bottom:20px; line-height:1.6; }
.quote-booking .welcome-box { text-align:left; padding:0; }
.quote-booking .event-summary { background:#edf0e9; border-radius:4px; }
.quote-booking input, .quote-booking textarea, .quote-booking .radio-opt, .quote-booking .check-opt, .quote-booking .payment-methods-note { border-radius:4px; border-width:1px; }
.quote-booking .btn-row { position:static; transform:none; width:auto; flex-shrink:0; margin:0; padding:14px 0; border:0; border-top:1px solid var(--border); border-radius:0; box-shadow:none; background:#fff; }
.quote-booking .btn-next, .quote-booking .btn-pay-final { border-radius:4px; background:var(--gold); color:var(--green-dark); font-weight:500; min-height:48px; }
.quote-booking .btn-back { border-radius:4px; font-weight:500; }
.quote-booking .total-bar { position:static; flex-shrink:0; box-shadow:none; padding:10px max(20px,calc((100vw - 548px)/2)); background:var(--cream); }
.quote-booking .total-amount { font:400 25px/1.2 var(--serif); }
@media(max-width:480px) {
  .quote-booking .phase-label { display:inline; font-size:11px; }
  .quote-booking .card { padding:18px 16px 0; }
  .quote-booking .step-title { font-size:25px; }
}
@media(min-width:681px) { .quote-result .result-intro { padding-top:22px; } }
.quote-result .top-actions .btn-outline-w { display:inline-flex; }
@media(max-width:680px) {
  .quote-result .layout > .gallery { order:2; }
  .quote-result .top-bar { gap:12px; }
  .quote-result .top-bar .logo { font-size:23px; }
  .quote-result .top-actions { gap:6px; }
  .quote-result .top-actions .btn-sm { min-height:40px; padding:8px; font-size:10px; }
}
/* Première étape : la carte épouse le contenu sans vide avant le bouton. */
.quote-form .form-card:has(#s1.active) { flex:0 1 auto; max-height:100%; }
.quote-form #s1.active { flex:0 1 auto; }
.quote-form #s1 .step-content { flex:0 1 auto; }
.quote-form #s1 .fq-barista { margin-bottom:0; }

.quote-form #time-select { width:100%; min-height:48px; padding:12px 10px; border:1px solid var(--border); border-radius:4px; background:white; color:var(--text); font:400 15px var(--sans); }
.quote-form #custom-time { margin-top:12px; }
.quote-form #custom-time .input-label { display:block; margin-bottom:6px; }
.quote-form .picker-trigger { width:100%; min-height:48px; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; background:white; color:var(--green); border:1px solid var(--border); border-radius:4px; font:400 14px var(--sans); cursor:pointer; text-align:left; }
.quote-form .picker-trigger:hover { border-color:var(--green); background:var(--cream); }
.quote-picker { position:fixed; inset:0; margin:auto; width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:24px; overflow:auto; color:var(--green); background:var(--cream); border:1px solid #cbb77b; border-radius:12px; box-shadow:0 20px 70px #152b2233; }
.quote-picker::backdrop { background:rgba(21,43,34,.12); backdrop-filter:none; }
.picker-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.picker-heading h2 { font:400 25px/1.2 var(--serif); margin:0; }
.quote-picker button { font-family:var(--sans); cursor:pointer; color:var(--green); }
.picker-close { flex:none; width:36px; height:36px; border:1px solid var(--border); border-radius:50%; background:transparent; font-size:24px; }
.calendar-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.calendar-nav > button { width:36px; height:36px; background:white; border:1px solid var(--border); border-radius:4px; font-size:24px; }
.calendar-selects { display:flex; gap:5px; }
.calendar-selects select { max-width:130px; padding:8px 4px; border:0; color:var(--green); background:transparent; font:500 14px var(--sans); }
.calendar-week,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.calendar-week { text-align:center; color:var(--muted); font-size:11px; margin-bottom:8px; }
.calendar-days button { aspect-ratio:1; border:1px solid transparent; border-radius:50%; background:transparent; font-size:14px; }
.calendar-days button[aria-current] { border-color:#ba953b; }
.calendar-days button:disabled,.calendar-nav button:disabled { opacity:.25; cursor:default; }
.calendar-days button:hover:not(:disabled),.time-grid button:hover { background:#edf0e9; border-color:var(--green); }
.calendar-days button[aria-pressed=true],.time-grid button[aria-pressed=true] { background:var(--green); color:white; }
.picker-note { color:var(--muted); font:400 12px/1.6 var(--sans); margin:12px 0; }
.time-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.time-grid button { padding:10px 4px; min-height:40px; border:1px solid var(--border); border-radius:5px; background:white; font-size:13px; }
.precise-time { margin-top:18px; border-top:1px solid var(--border); padding-top:14px; font-size:12px; }
.precise-time summary { cursor:pointer; }
.precise-time > div { display:flex; gap:10px; margin-top:12px; }
.precise-time input { min-width:0; flex:1; }
.precise-time button { padding:10px 16px; border:0; background:var(--gold); border-radius:4px; }
@media(max-width:380px){ .quote-picker { padding:18px; } .picker-heading h2 { font-size:22px; } .calendar-selects select { max-width:105px; } }
/* Toutes les étapes épousent leur contenu ; la hauteur d’écran reste une limite. */
.quote-form .form-card { flex:0 1 auto; max-height:100%; }
.quote-form .step.active, .quote-form .step-content { flex:0 1 auto; }
.quote-booking .card { flex:0 1 auto; max-height:100%; }
.quote-booking .step, .quote-booking .booking-content { flex:0 1 auto; }

.event-group-label { margin:14px 0 9px; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.quote-form button.type-opt { font-family:var(--sans); color:var(--text); background:white; text-align:left; min-height:46px; padding:12px; }
.quote-form button.type-opt.selected { background:#edf0e9; border-color:var(--green); }
.quote-form .event-other { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }