/* ============================================================
   Pygmalion Visual — demande de devis
   ============================================================ */

/* ---------- HEADER ---------- */
#head{ background:var(--navy); color:var(--cream); padding-top:26px; padding-right:32px; padding-bottom:80px; }
.head-title{ padding:90px 32px 0 24px; }
.head-tag{ font-style:italic; font-size:13px; color:rgba(246,242,232,0.6); margin-bottom:14px; }
h1.disp{ font-family:var(--disp); font-size:clamp(40px,7.5vw,88px); line-height:0.95; letter-spacing:-0.01em; }
.head-lede{ max-width:540px; margin-top:26px; font-size:16px; line-height:1.75; color:rgba(246,242,232,0.8); }
@media (max-width:820px){ .head-title{ padding-top:56px; } }

/* ---------- QUIZ SECTION ---------- */
#quiz{ position:relative; isolation:isolate; background:var(--paper); padding-bottom:120px; }
#quiz::before{
  content:''; position:absolute; top:0; left:0; right:0; height:210px;
  background:
    radial-gradient(ellipse 55% 100% at 32% 0%, rgba(201,106,62,0.06), transparent 65%),
    linear-gradient(to bottom, rgba(18,21,102,0.8) 0%, rgba(18,21,102,0.2) 55%, transparent 100%);
  pointer-events:none; z-index:-1;
}

.form-shell{ padding:230px 32px 0 24px; max-width:640px; }
@media (max-width:820px){ .form-shell{ padding-top:150px; } }
.progress-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.progress-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; opacity:0.55; }
.progress-track{ height:1px; background:var(--line-on-cream); margin-bottom:56px; position:relative; }
.progress-fill{ position:absolute; top:0; left:0; height:1px; background:var(--rust); width:16.66%; transition:width .35s ease; }

.step{ display:none; }
.step.active{ display:block; animation:fadein .4s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.step h2{ font-family:var(--disp); font-size:clamp(24px,3.6vw,34px); line-height:1.18; margin-bottom:8px; max-width:480px; }
.step-sub{ font-size:13px; opacity:0.55; margin-bottom:32px; max-width:440px; line-height:1.6; }

.chip-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.chip{
  border:1px solid var(--line-on-cream); background:none; color:var(--navy);
  font-family:var(--sans); font-size:13.5px; padding:10px 18px; cursor:pointer;
  transition:border-color .2s, background .2s, color .2s;
}
.chip:hover{ border-color:var(--navy); }
.chip.selected{ border-color:var(--navy); background:var(--navy); color:var(--cream); }
.hint{ font-size:12px; opacity:0.5; margin-top:16px; }

.field{ margin-bottom:28px; max-width:480px; }
.field label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; opacity:0.5; margin-bottom:8px; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-on-cream);
  color:var(--navy); font-family:var(--sans); font-size:15px; padding:8px 0; outline:none; resize:none;
}
.field input:focus, .field textarea:focus{ border-color:var(--rust); }
.field input::placeholder, .field textarea::placeholder{ color:rgba(18,21,102,0.32); }
.error-msg{ font-size:12px; color:var(--rust); margin-top:6px; display:none; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
@media (max-width:560px){ .two-col{ grid-template-columns:1fr; } }

.block-title{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.05em; opacity:0.5; margin:28px 0 12px; }
.block-title:first-child{ margin-top:0; }

.recap{ border-top:1px solid var(--line-on-cream); margin-bottom:36px; max-width:520px; }
.recap-row{ display:flex; justify-content:space-between; gap:20px; padding:12px 0; font-size:13.5px; border-bottom:1px solid var(--line-on-cream); }
.recap-row span:first-child{ opacity:0.5; font-family:var(--mono); font-size:11px; letter-spacing:0.04em; flex:0 0 110px; }
.recap-row span:last-child{ text-align:right; }

.nav-row{ display:flex; align-items:center; gap:22px; margin-top:8px; flex-wrap:wrap; }
.btn{
  font-family:var(--sans); font-size:13.5px; padding:12px 26px; cursor:pointer;
  border:1px solid var(--navy); background:var(--navy); color:var(--cream); transition:opacity .2s;
}
.btn:hover{ opacity:0.85; }
.btn-ghost{ background:none; color:var(--navy); border:none; padding:12px 4px; cursor:pointer; font-family:var(--sans); font-size:13.5px; }
.btn-ghost:hover{ color:var(--rust); opacity:1; }

.done{ display:none; }
.done.active{ display:block; animation:fadein .5s ease; }
.done h2{ font-family:var(--disp); font-size:clamp(28px,4.5vw,42px); margin-bottom:16px; }
.done p{ font-size:15px; line-height:1.7; max-width:440px; opacity:0.75; }
.done .done-link{ display:inline-block; margin-top:24px; font-size:13.5px; color:var(--rust); text-decoration:none; border-bottom:1px solid var(--rust); padding-bottom:2px; }

/* ---------- AFTER / REASSURANCE ---------- */
#after{ position:relative; isolation:isolate; background:var(--navy); color:var(--cream); padding-bottom:80px; }
#after::before{
  content:''; position:absolute; top:0; left:0; right:0; height:210px;
  background:
    radial-gradient(ellipse 55% 100% at 68% 0%, rgba(31,92,99,0.09), transparent 65%),
    linear-gradient(to bottom, rgba(250,249,249,0.8) 0%, rgba(250,249,249,0.2) 55%, transparent 100%);
  pointer-events:none; z-index:-1;
}
.after-head{ padding:230px 32px 48px 24px; }
@media (max-width:820px){ .after-head{ padding-top:150px; } }
.after-head h2{ font-family:var(--disp); font-size:clamp(30px,4.6vw,48px); line-height:0.98; }
.after-head p{ max-width:420px; font-size:14px; line-height:1.7; opacity:0.72; margin-top:16px; }

.after-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; padding:10px 32px 0 24px; }
.after-step{ padding-top:20px; border-top:1px solid var(--line-on-navy); }
.after-num{ font-family:var(--disp); font-size:13px; color:var(--rust); letter-spacing:0.04em; margin-bottom:12px; display:block; }
.after-step p{ font-size:13.5px; line-height:1.65; color:rgba(246,242,232,0.78); max-width:220px; }
@media (max-width:820px){ .after-steps{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
#footcta{ background:var(--navy); color:var(--cream); padding:60px 32px 40px 24px; }