/* =========================================================
   devis.css — parcours « devis en 2 minutes » (/devis)
   Styles scopés (.devis-* / body.devis-page) : ne touchent
   rien du reste du site. Réutilise les tokens de styles.css.
   ========================================================= */

:root{ --devis-bar-h: 4px; }

/* la barre de progression fixe occupe les 4px du haut : on décale le body */
body.devis-page{ padding-top: var(--devis-bar-h); }

/* page tunnel : header statique (il défile avec la page, pas de sticky
   transparent qui laisserait passer le contenu dessous) */
body.devis-page .header{ position: static; }

/* ---- Barre de progression ---- */
.devis-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--devis-bar-h);
  background: var(--green-border);
  z-index: 200;
}
.devis-progress-fill{
  display: block;
  height: 100%;
  width: 16.6667%;
  background: var(--green);
  border-radius: 0 999px 999px 0;
  transition: width .45s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .devis-progress-fill{ transition: none; }
}

/* ---- Colonne centrale ---- */
.devis-shell{
  max-width: 660px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: clamp(24px, 4vw, 44px);
  padding-bottom: clamp(56px, 8vw, 96px);
  /* la colonne remplit l'écran : sur une étape courte, le footer reste sous la ligne de flottaison */
  min-height: calc(100vh - 4rem);
  min-height: calc(100dvh - 4rem);
}

/* ---- En-tête du parcours ---- */
.devis-head{ margin-bottom: clamp(18px, 3vw, 26px); }
.devis-head h1{
  font-size: clamp(1.7rem, 4.4vw, 2.5rem);
  letter-spacing: -0.03em;
  margin: 0 0 .5rem;
}
.devis-sub{
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
  max-width: 46ch;
}
.devis-shell.is-final .devis-sub{ display: none; }

/* ---- Ligne méta : retour + compteur ---- */
.devis-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.devis-back{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink-muted);
  padding: .5rem .2rem;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.devis-back[hidden]{ display: none; }
.devis-back:hover{ color: var(--green); }
.devis-back:hover .devis-back-arrow{ transform: translateX(-3px); }
.devis-back-arrow{ display: inline-block; transition: transform .25s var(--ease); }
.devis-back:focus-visible{ outline: 3px solid rgba(27,58,45,.4); outline-offset: 2px; }
.devis-counter{
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  white-space: nowrap;
}
.devis-counter[hidden]{ display: none; }

/* ---- Écrans du wizard ---- */
.devis-stage{ position: relative; }
/* nos écrans sont des <section> : on neutralise le padding-block global
   (section{padding-block:clamp(72px,10vw,140px)} de styles.css) */
.devis-step{ display: none; padding: 0; }
.devis-step.is-active{ display: block; }
@media (prefers-reduced-motion: no-preference){
  .devis-step.is-active{ animation: devis-in .34s var(--ease) both; }
}
@keyframes devis-in{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: none; }
}

.devis-q{
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(18px, 3vw, 28px);
}
.devis-q:focus{ outline: none; }
.devis-q-hint{
  margin: -0.6rem 0 1.2rem;
  color: var(--ink-muted);
  font-size: .92rem;
}

/* ---- Options ---- */
.devis-opts{ display: grid; gap: .7rem; }
.devis-opts--grid{
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
}
@media (min-width: 560px){
  .devis-opts--grid{ grid-template-columns: repeat(3, 1fr); }
}

.devis-opt{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--green-border);
  border-radius: var(--r-lg);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), transform .12s var(--ease);
}
.devis-opt:hover{
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: var(--sh-2);
}
.devis-opt:active{ transform: translateY(1px); }
.devis-opt:focus-visible{
  outline: 3px solid rgba(27,58,45,.4);
  outline-offset: 2px;
}
.devis-opt.is-selected{
  border-color: var(--green);
  background: var(--green-soft);
  box-shadow: 0 0 0 1px var(--green) inset;
}

/* variante « tuile » (grille métier) : icône + libellé, empilés */
.devis-opt--tile{
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  min-height: 112px;
  padding: 1.05rem 1.05rem 1.1rem;
  font-size: 1.02rem;
}
.devis-opt-ico{
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--green-soft);
  color: var(--green);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.devis-opt-ico svg{ width: 23px; height: 23px; }
.devis-opt--tile:hover .devis-opt-ico,
.devis-opt--tile.is-selected .devis-opt-ico{
  background: var(--green);
  color: #FAFAF8;
}

/* variante « ligne » (choix uniques et multi) : libellé + repère à droite */
.devis-opt--row{
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: 1rem 1.15rem;
  font-size: 1.05rem;
}
.devis-opt-note{
  color: var(--ink-muted);
  font-weight: 400;
  font-family: var(--sans);
  font-size: .92em;
}
.devis-opt.is-selected .devis-opt-note{ color: var(--green-3); }

/* repère de sélection (pastille ronde = choix unique) */
.devis-opt-mark{
  flex: none;
  position: relative;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.devis-opt--check .devis-opt-mark{ border-radius: 7px; }
.devis-opt:hover .devis-opt-mark{ border-color: var(--green-3); }
.devis-opt.is-selected .devis-opt-mark{
  background: var(--green);
  border-color: var(--green);
}
.devis-opt.is-selected .devis-opt-mark::after{
  content: "";
  position: absolute;
  left: 8px; top: 4px;
  width: 5px; height: 10px;
  border: solid #FAFAF8;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.devis-continue-row{ margin-top: clamp(20px, 3vw, 28px); }
.devis-continue-row .btn{ width: 100%; justify-content: center; }
@media (min-width: 560px){
  .devis-continue-row .btn{ width: auto; }
}

/* ---- Écran final ---- */
.devis-result{
  background: var(--green);
  color: #FAFAF8;
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: 0 30px 60px -34px rgba(15,23,21,.5);
}
.devis-result .eyebrow{ color: rgba(250,250,248,.82); }
.devis-result .eyebrow::before{ background: rgba(250,250,248,.5); }
.devis-final-title{
  color: #FAFAF8;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 .8rem;
}
.devis-final-title:focus{ outline: none; }
.devis-final-sub{
  color: rgba(250,250,248,.9);
  margin: 0;
  font-size: 1rem;
}

/* récap des réponses */
.devis-recap{
  display: grid;
  gap: .35rem;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}
.devis-recap li{
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: .6rem .1rem;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.devis-recap li:last-child{ border-bottom: 0; }
.devis-recap-k{
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-muted);
  flex: none;
}
.devis-recap-v{ color: var(--ink); text-align: right; font-weight: 500; }

/* champs de contact */
.devis-fields{
  display: grid;
  gap: 1.05rem;
  margin-top: clamp(24px, 4vw, 34px);
}
.devis-field{ display: flex; flex-direction: column; gap: .4rem; }
.devis-muted{
  color: var(--ink-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.devis-field input{
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: .85rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  width: 100%;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.devis-field input::placeholder{ color: var(--ink-muted); }
.devis-field input:focus{
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(27,58,45,.12);
}

/* Écran 1 : champ métier en saisie libre (un peu plus grand) + état invalide si vide */
.devis-field--metier input{ font-size: 1.1rem; padding: 1rem 1.15rem; }
.devis-step.is-invalid .devis-field--metier input{
  border-color: #C2185B;
  box-shadow: 0 0 0 3px rgba(194,24,91,.14);
}

/* consentement RGPD */
.devis-consent{
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.devis-consent:hover{ border-color: var(--green-border); }
.devis-consent:has(input:checked){ background: var(--green-soft); border-color: var(--green); }
.devis-consent input{
  accent-color: var(--green);
  width: 18px; height: 18px;
  margin-top: .12rem;
  flex: none;
}
.devis-consent-note{
  font-size: .84rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: -.35rem 0 0;
}
.devis-consent-note .inline-link{
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.devis-submit-row{ margin-top: .4rem; }
.devis-submit-row .btn{ width: 100%; justify-content: center; }
@media (min-width: 560px){
  .devis-submit-row .btn{ width: auto; }
}
.devis-fields .form-feedback{ margin-top: .2rem; }