/* ══════════════════════════════════════════════════════════════════════════
   A-1 — /devis-atelier  (2026-08-11)
   Reprise verbatim du bloc <style> de « Devis atelier - production
   (Gutenberg-ready).html » (194 lignes), plus un bloc « états du
   formulaire » qui n'existe pas dans le mockup (confirmation, erreurs,
   honeypot) : le mockup délègue l'envoi à Forminator, ici le traitement
   est dans le thème. Voir functions.php §10.
   Tokens et primitives (.section, .wrap, .band--*, .eyebrow, .btn) :
   assets/edv-production.css.
   ══════════════════════════════════════════════════════════════════════════ */

/*── HERO pitch ──────────────────────────────────────────────────────────────*/
.dhero{ padding:var(--space-12) var(--gutter) var(--space-10); background:var(--color-kraft); }
.dhero__inner{ max-width:var(--maxw); margin-inline:auto; }
.dhero__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:end; margin-top:var(--space-6); }
.dhero h1{ font-size:var(--text-hero); line-height:.96; letter-spacing:-.025em; margin-bottom:var(--space-5); }
.dhero h1 em{ font-style:italic; color:var(--color-bordeaux); }
.dhero__lede{ font-family:var(--font-display); font-style:italic; font-size:var(--text-xl); line-height:1.4; color:var(--color-ink-2); max-width:36rem; margin-bottom:var(--space-5); text-wrap:pretty; }
.dhero__body{ font-size:var(--text-base); line-height:1.65; color:var(--color-ink-2); max-width:35rem; margin-bottom:var(--space-8); }
.dhero__cta{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.dhero__cta .tel{ font-family:var(--font-mono); font-weight:500; }
.engage{ background:var(--color-cream); border:var(--border-firm); padding:var(--space-6); margin:0; }
.engage .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-bordeaux); font-weight:700; padding-bottom:var(--space-4); border-bottom:var(--border-firm); }
.engage > div{ padding:var(--space-5) 0; border-bottom:var(--border-hair); }
.engage > div:last-child{ border-bottom:0; padding-bottom:0; }
.engage dt{ font-family:var(--font-display); font-size:var(--text-3xl); font-weight:400; line-height:1; letter-spacing:-.02em; }
.engage dt small{ font-size:var(--text-lg); color:var(--color-ink-3); }
.engage dd{ margin:var(--space-2) 0 0; font-size:var(--text-sm); color:var(--color-ink-2); line-height:1.5; }

/*── GARDE-FOUS (3 raisons) ──────────────────────────────────────────────────*/
.raisons h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-3); }
.raisons h2 em{ font-style:italic; color:var(--color-bordeaux); }
.raisons__intro{ font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); color:var(--color-ink-2); max-width:38rem; line-height:1.5; }
.raisons__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); margin-top:var(--space-10); }
.raison{ padding-top:var(--space-6); border-top:2px solid var(--color-line); }
.raison__head{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.raison__head .n{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--color-bordeaux); }
.raison__head .icon{ font-size:26px; color:var(--color-teal-deep); }
.raison h3{ font-size:var(--text-2xl); font-weight:500; line-height:1.1; margin-bottom:var(--space-3); }
.raison p{ font-size:var(--text-sm); line-height:1.65; color:var(--color-ink-2); text-wrap:pretty; }

/*── PROCESS (timeline) ──────────────────────────────────────────────────────*/
.process h2{ font-size:var(--text-3xl); line-height:1.05; margin-top:var(--space-5); }
.process h2 em{ font-style:italic; color:var(--color-bordeaux); }
.process__steps{ display:grid; grid-template-columns:1fr; margin-top:var(--space-10); border-top:2px solid var(--color-line); list-style:none; }
.process__steps li{ position:relative; padding:var(--space-8) 0 var(--space-6); border-bottom:var(--border-hair); }
.process__steps .dot{ position:absolute; top:-9px; left:0; width:16px; height:16px; border-radius:50%; background:var(--color-kraft); border:2px solid var(--color-bordeaux); }
.process__steps .t{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.22em; color:var(--color-bordeaux); margin-bottom:var(--space-3); }
.process__steps h3{ font-size:var(--text-xl); font-weight:500; line-height:1.15; margin-bottom:var(--space-3); }
.process__steps p{ font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2); max-width:30rem; text-wrap:pretty; }

/*── FORMATS (3 cartes) ──────────────────────────────────────────────────────
  Décision Romain 2026-08-11 : cartes conservées, montants retirés
  (SPEC §7 « pas de prix affichés côté entreprises »). .format__price
  porte désormais un critère, pas un chiffre — mêmes styles.
────────────────────────────────────────────────────────────────────────────*/
.formats__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-8); }
.formats__head h2{ font-size:var(--text-3xl); line-height:1.05; margin-top:var(--space-5); }
.formats__head h2 em{ font-style:italic; color:var(--color-bordeaux); }
.formats__head .note{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-ink-3); max-width:18rem; line-height:1.6; }
.formats__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.format{ background:var(--color-kraft); border:var(--border-firm); display:flex; flex-direction:column; position:relative; }
.format--featured{ border-top:4px solid var(--color-ochre); }
.format__pick{ position:absolute; top:var(--space-4); right:var(--space-4); padding:3px 8px; background:var(--color-cream); color:var(--color-bordeaux);
  border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.format__top{ padding:var(--space-6) var(--space-6) 0; }
.format .tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-bordeaux); font-weight:700; }
.format h3{ font-size:var(--text-2xl); font-weight:500; line-height:1.1; margin:var(--space-3) 0 var(--space-5); }
.format__price{ display:flex; align-items:baseline; gap:var(--space-3); padding-bottom:var(--space-5); border-bottom:var(--border-hair); flex-wrap:wrap; }
.format__price .amt{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:500; line-height:1.15; letter-spacing:-.02em; }
.format__price .sub{ font-family:var(--font-mono); font-size:11px; color:var(--color-ink-3); }
.format ul{ padding:var(--space-5) var(--space-6) var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); flex:1; }
.format li{ display:grid; grid-template-columns:14px 1fr; gap:var(--space-3); font-size:var(--text-sm); line-height:1.55; color:var(--color-ink-2); }
.format li::before{ content:"—"; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--color-bordeaux); padding-top:2px; }

/*── FORMULAIRE (récap sticky + form) ────────────────────────────────────────*/
.devis{ background:var(--color-kraft); border-top:var(--border-firm); }
.devis__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-10); }
.devis__head h2{ font-size:var(--text-4xl); line-height:1; margin-top:var(--space-5); }
.devis__head h2 em{ font-style:italic; color:var(--color-bordeaux); }
.devis__powered{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-ink-3);
  padding:6px 10px; border:var(--border-hair); background:var(--color-cream); align-self:center; }
.devis__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
/* DEVIS-V2 2.2 — écho de l'atelier/cycle d'origine, juste sous le titre */
.devis-origine{ font-size:var(--text-sm); color:var(--color-ink-2,var(--color-ink)); margin:calc(var(--space-5) * -1) 0 var(--space-6); }
.devis-origine strong{ color:var(--color-bordeaux); }
.devis-origine a{ margin-left:var(--space-2); text-decoration:underline; text-underline-offset:3px; }
.recap__card{ padding:var(--space-6); background:var(--color-cream); border:var(--border-firm); }
.recap__card .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-bordeaux); font-weight:700; margin-bottom:var(--space-4); }
.recap__card ol{ list-style:none; }
.recap__card li{ display:grid; grid-template-columns:28px 1fr; gap:var(--space-3); padding:var(--space-4) 0; border-bottom:var(--border-hair); }
.recap__card li:last-child{ border-bottom:0; }
.recap__card .ix{ font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--color-ink-3); padding-top:2px; }
.recap__card .tt{ font-family:var(--font-display); font-size:var(--text-md); font-weight:500; line-height:1.15; margin-bottom:2px; display:block; }
.recap__card .dd{ font-size:var(--text-xs); color:var(--color-ink-3); line-height:1.45; display:block; }
.recap__rgpd{ margin-top:var(--space-5); padding:var(--space-4); background:var(--color-kraft); border-left:2px solid var(--color-bordeaux); font-size:var(--text-xs); line-height:1.55; color:var(--color-ink-2); }
.recap__rush{ margin-top:var(--space-5); padding:var(--space-5); background:var(--color-teal-deep); color:var(--color-cream); }
.recap__rush .k{ color:var(--color-teal-soft); margin-bottom:var(--space-3); }
.recap__rush p{ font-family:var(--font-display); font-style:italic; font-size:var(--text-base); line-height:1.4; margin-bottom:var(--space-3); }
.recap__rush a{ color:var(--color-cream); font-family:var(--font-mono); font-size:var(--text-sm); letter-spacing:.06em; font-weight:700; text-underline-offset:4px; }

.devis-form{ background:var(--color-cream); border:var(--border-firm); padding:var(--space-8) var(--gutter); }
.devis-form__progress{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-8); padding-bottom:var(--space-5); border-bottom:var(--border-hair); }
.devis-form__progress .lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-ink-3); font-weight:700; }
.devis-form__bar{ flex:1; height:3px; background:var(--color-line-soft); }
.devis-form__bar span{ display:block; height:100%; background:var(--color-bordeaux); width:33%; transition:width .25s ease; }
.devis-form fieldset{ border:0; padding:0; margin:0 0 var(--space-8); }
.devis-form legend{ display:flex; align-items:center; gap:var(--space-3); width:100%; margin-bottom:var(--space-6); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-line); }
.devis-form legend .step{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background:var(--color-kraft); color:var(--color-ink-3); border:1.5px solid var(--color-line-soft);
  font-family:var(--font-mono); font-size:11px; font-weight:700; }
.devis-form legend .ttl{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; }
.field-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field.full{ grid-column:1/-1; }
.field > .label{ font-size:var(--text-sm); font-weight:700; color:var(--color-ink); }
.field > .label .opt{ font-weight:400; color:var(--color-ink-3); font-size:var(--text-xs); }
.field input, .field textarea{ font-family:var(--font-body); font-size:var(--text-base); color:var(--color-ink);
  padding:13px 15px; border:1.5px solid var(--color-line-soft); background:var(--color-kraft); border-radius:0; outline:none; min-height:48px; width:100%; }
.field input:focus, .field textarea:focus{ border-color:var(--color-bordeaux); box-shadow:0 0 0 3px rgba(112,21,17,.10); }
.field textarea{ resize:vertical; line-height:1.55; min-height:96px; }
.pills{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.pills label{ cursor:pointer; }
.pills label span{ display:inline-flex; padding:9px 15px; min-height:40px; align-items:center;
  font-size:var(--text-sm); font-weight:600; border:1.5px solid var(--color-line-soft); border-radius:var(--radius-pill); color:var(--color-ink); }
.pills input{ position:absolute; opacity:0; width:1px; height:1px; }
.pills input:checked + span{ background:var(--color-bordeaux); color:var(--color-cream); border-color:var(--color-bordeaux); }
.pills input:focus-visible + span{ outline:var(--focus-ring); outline-offset:2px; }
.checks{ display:grid; grid-template-columns:1fr; gap:var(--space-2); }
.checks label{ display:flex; align-items:center; gap:var(--space-3); padding:11px 14px; background:var(--color-kraft);
  border:1.5px solid var(--color-line-soft); cursor:pointer; min-height:44px; }
.checks input{ width:16px; height:16px; accent-color:var(--color-bordeaux); flex:none; }
.checks span{ font-size:var(--text-sm); color:var(--color-ink); line-height:1.3; }
.checks label:has(input:checked){ border-color:var(--color-bordeaux); }
/* DEVIS-V2 2.2 — cycle + ateliers du cycle, CSS pur (comme les filtres du catalogue) */
.cycle-choix{ display:flex; flex-direction:column; gap:var(--space-3); }
.cycle-option{ position:relative; }
.cycle-option input[type=radio]{ position:absolute; opacity:0; width:1px; height:1px; }
.cycle-option label.pill{ display:inline-flex; cursor:pointer; }
.cycle-option label.pill span{ display:inline-flex; padding:9px 15px; min-height:40px; align-items:center;
  font-size:var(--text-sm); font-weight:600; border:1.5px solid var(--color-line-soft); border-radius:var(--radius-pill); color:var(--color-ink); }
.cycle-option input:checked + label.pill span{ background:var(--color-bordeaux); color:var(--color-cream); border-color:var(--color-bordeaux); }
.cycle-option input:focus-visible + label.pill span{ outline:var(--focus-ring); outline-offset:2px; }
.cycle-ateliers{ display:none; margin:var(--space-3) 0 0 var(--space-5); padding:var(--space-3) 0 0 var(--space-4);
  border-left:2px solid var(--color-line-soft); grid-template-columns:1fr; gap:var(--space-2); }
.cycle-option input:checked ~ .cycle-ateliers{ display:grid; }
.cycle-ateliers label{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--color-ink); cursor:pointer; }
.cycle-ateliers input{ width:16px; height:16px; accent-color:var(--color-bordeaux); flex:none; }
.slider .row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--space-2);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-ink-3); }
.slider output{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:500; color:var(--color-bordeaux); letter-spacing:-.01em; }
.slider input[type=range]{ width:100%; accent-color:var(--color-bordeaux); }
.consent{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-5); background:var(--color-kraft);
  border:var(--border-hair); margin-top:var(--space-2); }
.consent input{ width:20px; height:20px; accent-color:var(--color-bordeaux); flex:none; margin-top:2px; }
.consent label{ font-size:var(--text-xs); line-height:1.55; color:var(--color-ink-2); }
.consent a{ color:var(--color-bordeaux); text-underline-offset:3px; }
.devis-form__submit{ display:flex; justify-content:flex-end; align-items:center; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-6); }
.devis-form__fine{ font-size:var(--text-xs); color:var(--color-ink-3); text-align:right; margin-top:var(--space-3); }
.rule{ border:0; border-top:var(--border-hair); margin:var(--space-8) 0; }

/*── ÉTATS DU FORMULAIRE — absents du mockup (Forminator les portait) ────────*/
.devis-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.devis-notice{ padding:var(--space-6); border:var(--border-firm); margin-bottom:var(--space-8); }
.devis-notice .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin-bottom:var(--space-3); }
.devis-notice p{ font-size:var(--text-base); line-height:1.6; }
.devis-notice--ok{ background:var(--color-teal-deep); color:var(--color-cream); border-color:var(--color-teal-deep); }
.devis-notice--ok .k{ color:var(--color-teal-soft); }
.devis-notice--ko{ background:var(--color-cream); border-left:4px solid var(--color-bordeaux); }
.devis-notice--ko .k{ color:var(--color-bordeaux); }
.devis-notice--ko ul{ margin:var(--space-3) 0 0 var(--space-5); font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2); }
.field--error input, .field--error textarea{ border-color:var(--color-bordeaux); background:rgba(112,21,17,.04); }

/*── FAQ ─────────────────────────────────────────────────────────────────────*/
.faq__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:start; }
.faq h2{ font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-4); }
.faq h2 em{ font-style:italic; color:var(--color-bordeaux); }
.faq__intro{ font-size:var(--text-sm); color:var(--color-ink-2); line-height:1.6; }
.faq__list details{ border-bottom:var(--border-hair); padding:var(--space-5) 0; }
.faq__list details:first-child{ border-top:2px solid var(--color-line); }
.faq__list summary{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-5); cursor:pointer; list-style:none; }
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary .q{ display:flex; gap:var(--space-4); align-items:baseline; font-family:var(--font-display); font-size:var(--text-lg); font-weight:500; line-height:1.3; color:var(--color-ink); }
.faq__list summary .q .n{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--color-bordeaux); flex:none; }
.faq__list summary .mark{ font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; color:var(--color-bordeaux); line-height:1; flex:none; }
.faq__list summary .mark::after{ content:"+"; }
.faq__list details[open] summary .mark::after{ content:"\2013"; }
.faq__list .answer{ padding:var(--space-4) 0 0 calc(11px + var(--space-4)); }
.faq__list .answer p{ font-size:var(--text-base); line-height:1.7; color:var(--color-ink-2); }

/*── ÉCHANGE DIRECT (bande bordeaux) ─────────────────────────────────────────*/
.echange__grid{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
.echange__grid > *{ min-width:0; }
.echange h2{ font-size:var(--text-3xl); line-height:1.02; margin:var(--space-5) 0 var(--space-5); }
.echange h2 em{ font-style:italic; color:var(--color-rose); }
.echange p{ font-size:var(--text-md); line-height:1.6; color:rgba(250,244,230,.88); max-width:34rem; }
.echange__contacts{ display:flex; flex-direction:column; gap:var(--space-4); }
.echange__contacts a{ font-family:var(--font-display); font-size:var(--text-2xl); color:var(--color-cream); text-decoration:none; display:inline-flex; align-items:center; gap:var(--space-3); min-width:0; overflow-wrap:anywhere; }
.echange__contacts a:hover{ text-decoration:underline; text-underline-offset:4px; }
.echange__contacts .icon{ font-size:22px; color:var(--color-rose); }
.echange__contacts span{ font-size:var(--text-sm); color:var(--color-rose); }

/*── RESPONSIVE — 640 / 768 / 1024 ───────────────────────────────────────────*/
@media (min-width:640px){
  .raisons__grid{ grid-template-columns:repeat(3,1fr); }
  .process__steps{ grid-template-columns:repeat(2,1fr); }
  .process__steps li{ padding-inline:var(--space-6) 0; border-bottom:0; border-right:var(--border-hair); }
  .process__steps li:nth-child(2n){ border-right:0; }
  .process__steps .dot{ left:var(--space-6); }
  .formats__grid{ grid-template-columns:repeat(3,1fr); }
  .field-grid{ grid-template-columns:1fr 1fr; }
  .checks{ grid-template-columns:1fr 1fr; }
  .faq__grid{ grid-template-columns:4fr 8fr; }
  .echange__grid{ grid-template-columns:7fr 5fr; }
}
@media (min-width:768px){
  .dhero__grid{ grid-template-columns:7fr 5fr; }
}
@media (min-width:1024px){
  .process__steps{ grid-template-columns:repeat(4,1fr); }
  .process__steps li{ border-right:var(--border-hair); }
  .process__steps li:nth-child(2n){ border-right:var(--border-hair); }
  .process__steps li:last-child{ border-right:0; }
  .devis__grid{ grid-template-columns:4fr 8fr; }
  .recap{ position:sticky; top:var(--header-h); }
}

/*── C4.3 - debordement horizontal mobile (echange__contacts, --text-2xl) ───*/
@media (max-width:640px){
  .echange__contacts a{ font-size:var(--text-lg); }
}