/* ==========================================================================
   Automatik — feuille de style unique
   Mobile d'abord (360px), puis 768px et 1200px.
   Police : Montserrat (variable, sous-ensemble latin) — SIL Open Font License 1.1.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-500-800.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Jetons
   -------------------------------------------------------------------------- */
:root {
  --ink: #051229;
  --brand: #5BA22C;
  --brand-strong: #3F7D1E;
  --paper: #F6F8F4;
  --tint: #EAF4E2;
  --muted: #5B6577;
  --line: #D9DFD3;
  --white: #FFFFFF;
  --error: #B3261E;

  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Arial, sans-serif;

  --step-1: 8px;
  --step-2: 16px;
  --step-3: 24px;
  --step-4: 32px;
  --step-5: 48px;
  --step-6: 64px;
  --step-8: 96px;

  --radius: 12px;
  --radius-sm: 8px;
  --wrap: 1100px;
  --tap: 48px;
  --transition: 180ms ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Le site est dessiné large. Sur téléphone, tout est réduit légèrement pour que
   la page tienne mieux à l'écran ; sur ordinateur, à 80 %, qui est l'échelle à
   laquelle elle se lit confortablement sans dézoomer le navigateur. */
html { zoom: 0.92; }

@media (min-width: 1100px) {
  html { zoom: 0.8; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
}

h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 var(--step-2); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-strong); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

ul, ol { margin: 0 0 var(--step-2); padding: 0; list-style: none; }
li { margin: 0; }

strong { font-weight: 700; }

svg { display: block; }

img { max-width: 100%; height: auto; }

[hidden] { display: none !important; }

::selection { background: var(--tint); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 20px;
}

.section { padding-block: var(--step-5); }
.section > .wrap > h2 { margin-bottom: var(--step-3); }

.section--dark {
  background: var(--ink);
  color: var(--white);
}
.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark p { color: #DDE7D6; }
.section--dark a { color: var(--white); }
.section--dark :focus-visible { outline-color: var(--white); }

.lede {
  font-size: 18px;
  color: var(--muted);
  max-width: none;
}
.section--dark .lede { color: #DDE7D6; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 20px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--ink);
  outline-offset: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--step-1);
  min-height: var(--tap);
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}
.btn--primary {
  background: var(--brand-strong);
  color: var(--white);
}
.btn--primary:hover { background: #336617; color: var(--white); }

.btn--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--white); }

.section--dark .btn--secondary,
.hero .btn--secondary {
  border-color: var(--white);
  color: var(--white);
}
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover { background: var(--white); color: var(--ink); }

.btn--quiet {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn--quiet:hover { border-color: var(--ink); color: var(--ink); }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--step-2);
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--white);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
}
.brand img { display: block; width: auto; height: 40px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-actions .btn { padding-inline: 16px; font-size: 15px; }

.site-nav { order: 3; width: 100%; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
}
.site-nav a {
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--brand); }

/* Menu mobile : les trois liens se replient derrière trois traits qui
   deviennent une croix à l'ouverture. */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--white);
  border: 2px solid var(--brand-strong);
  border-radius: var(--radius);
  color: var(--brand-strong);
  cursor: pointer;
  transition: background var(--transition);
}
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.nav-toggle:hover { background: var(--tint); }
.nav-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  padding-block: var(--step-5) var(--step-6);
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--step-3) var(--step-5);
}
.hero-grid > * { min-width: 0; }
/* Le titre du héros vit dans une colonne étroite : il a sa propre échelle,
   plus sobre que le h1 global, pour que le sous-titre et les boutons
   restent au-dessus de la ligne de flottaison en 1440 × 900. */
.hero h1 {
  color: var(--white);
  font-size: clamp(2rem, 1.1vw + 1.15rem, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-bottom: var(--step-3);
}
.hero-lede {
  font-size: 17px;
  line-height: 1.6;
  max-width: none;
  color: #DDE7D6;
  margin-bottom: var(--step-3);
}
.hero-reply {
  margin: var(--step-2) 0 0;
  font-size: 15px;
  color: #C9D6BF;
}
.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding-top: var(--step-3);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-promises li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--white);
  white-space: nowrap;
}
.hero-promises svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: #A8D98A;
}
.hero-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--brand);
  opacity: .18;
  pointer-events: none;
}

/* --- La fiche de l'outil mis en avant (élément signature) ---------------- */
.slip {
  --slip-pad: 22px;
  position: relative;
  margin: 0;
  padding: var(--slip-pad) var(--slip-pad) 0;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(5, 18, 41, .28), 0 2px 6px rgba(5, 18, 41, .10);
}
.slip-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}
.slip-logo {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
}
.slip-tool {
  margin: 16px 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.slip-sub {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.slip-rows { margin: 0; }
.slip-rows > div {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.slip-rows > div:last-child {
  padding-bottom: 14px;
  border-bottom: 0;
}
.slip-rows dt {
  padding-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.slip-rows dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}
.slip-rows dd.slip-value--key {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--brand-strong);
}
/* talon : le prix dans une bande teintée, sous une ligne de perforation */
.slip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-inline: calc(-1 * var(--slip-pad));
  padding: 14px var(--slip-pad) 16px;
  background: var(--tint);
  border-top: 1px dashed rgba(5, 18, 41, .28);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
.slip-terms {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.slip-price {
  flex: 0 0 auto;
  margin: 0;
  text-align: right;
}
.slip-price-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
}
.slip-price-value {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--brand-strong);
}

/* --------------------------------------------------------------------------
   Outils déjà construits
   -------------------------------------------------------------------------- */
.tools {
  display: grid;
  gap: var(--step-3);
  margin: var(--step-3) 0 0;
}
.tool-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: var(--step-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(5, 18, 41, .07);
}
.tool-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.tool-task { margin: 0; font-size: 15px; color: var(--muted); }
/* Chiffre clé de la carte : le gain, avant tout le reste. */
.tool-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.35;
}
.tool-stat-from { color: var(--muted); }
.tool-stat-arrow { color: var(--muted); }
.tool-stat-to { font-size: 17px; font-weight: 700; color: var(--brand-strong); }
.tool-stat-for { font-size: 13px; color: var(--muted); }
/* Avant / Après dans la carte : deux lignes étiquetées. */
.tool-gain {
  display: grid;
  gap: 12px;
  margin: 0;
}
.tool-gain-row { display: grid; gap: 2px; margin: 0; }
.tool-gain-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.tool-gain-label--after { color: var(--brand-strong); }
.tool-gain-text { font-size: 16px; line-height: 1.5; color: var(--ink); }
.tool-proof {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-strong);
}
.tool-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Catalogue des tâches (section de page)
   -------------------------------------------------------------------------- */
.section--catalog { background: var(--white); }

.catalog-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-strong);
}

/* Barre de recherche et appel à l'action, sur la même ligne. */
.catalog-search { margin-top: var(--step-2); }
.catalog-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  max-width: 860px;
}
.sheet-search { position: relative; flex: 1 1 280px; }
.catalog-cta {
  flex: 1 1 100%;
  min-height: 60px;
  padding-inline: 26px;
  border-radius: 999px;
}
@media (min-width: 560px) {
  .catalog-cta { flex: 0 0 auto; }
}
.sheet-input {
  width: 100%;
  min-height: 60px;
  padding: 16px 22px 16px 54px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(5, 18, 41, .06);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sheet-input::placeholder { color: #8A93A3; }
.sheet-input:hover { border-color: #C3CBBD; }
.sheet-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(91, 162, 44, .14), 0 10px 26px rgba(5, 18, 41, .06);
}
.sheet-search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--muted);
  pointer-events: none;
}

/* Mots-clés d'exemple : ils remplissent la recherche d'un clic. */
.catalog-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}
.catalog-examples-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.catalog-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.catalog-chip {
  min-height: 38px;
  padding: 6px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.catalog-chip:hover { border-color: var(--brand); color: var(--brand-strong); background: var(--tint); }

/* Intitulé de la sélection / du résultat de recherche, filé d'un filet. */
.sheet-count {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: none;
  margin: var(--step-3) 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet-count::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Les tâches les plus demandées : une grille courte, pas la liste entière. */
.catalog-top {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
}
.pick-item { display: grid; }
.pick-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 16px 46px 18px 18px;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(5, 18, 41, .04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pick-link:hover {
  border-color: var(--brand);
  box-shadow: 0 14px 30px rgba(5, 18, 41, .1);
  transform: translateY(-2px);
}
.pick-family {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-strong);
}
.pick-text { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pick-link:hover .pick-text { color: var(--brand-strong); }
/* La flèche suffit : douze fois « Décrire la tâche » faisait du bruit. */
.pick-arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform var(--transition), color var(--transition);
}
.pick-link:hover .pick-arrow { color: var(--brand-strong); transform: translateX(3px); }

@media (min-width: 700px) {
  .catalog-top { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .catalog-top { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* Les familles de tâches (résultats de recherche) */
@keyframes catalog-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.sheet-results:not([hidden]) { animation: catalog-fade 180ms ease-out both; }
.sheet-results { margin-top: var(--step-3); }
.sheet-group { margin-bottom: var(--step-4); }
.sheet-group:last-child { margin-bottom: 0; }
.sheet-group h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet-group h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.sheet-group ul { margin: 0; }
.sheet-item { border-bottom: 1px solid var(--line); }
.sheet-group li:last-child { border-bottom: 0; }
.sheet-item-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin-inline: -10px;
  padding: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.sheet-item-link:hover { background: var(--paper); }
.sheet-item-link:hover .sheet-item-text { color: var(--brand-strong); }
.sheet-item-text { min-width: 0; }
.sheet-item-action {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--transition);
}
.sheet-item-link:hover .sheet-item-action { color: var(--brand-strong); text-decoration: underline; }
.sheet-item[hidden],
.sheet-group[hidden],
.sheet-empty[hidden] { display: none; }
.sheet-empty {
  margin: var(--step-3) 0 0;
  padding: 16px 18px;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-2);
  margin-top: var(--step-5);
  padding: var(--step-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sheet-foot-text { display: grid; gap: 4px; max-width: 56ch; }
.sheet-foot p { margin: 0; font-size: 15px; color: var(--muted); }
.sheet-foot p.sheet-foot-title { font-size: 17px; font-weight: 700; color: var(--ink); }

/* Le seul appel à l'action du bas : WhatsApp, avec son icône. */
.sheet-foot-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-strong);
  text-decoration: none;
  background: var(--white);
  border: 2px solid var(--brand-strong);
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition);
}
.sheet-foot-wa svg { width: 20px; height: 20px; }
.sheet-foot-wa:hover { background: var(--brand-strong); color: var(--white); }

/* Deux colonnes de familles dès qu'il y a la place : 80 lignes restent
   lisibles sur mobile en une colonne, sans devenir interminables en large.
   Le flux en colonnes répartit les familles de tailles différentes sans
   laisser de grands trous comme le ferait une grille. */
@media (min-width: 768px) {
  .sheet-results {
    columns: 2;
    column-gap: var(--step-5);
  }
  .sheet-group { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Calculateur
   -------------------------------------------------------------------------- */
.calc {
  background: linear-gradient(180deg, #F1F8EC 0%, #E7F1DD 100%);
  border: 1px solid #D6E6C8;
  border-radius: var(--radius);
  padding: var(--step-3) 20px;
}
.calc-grid { display: grid; gap: var(--step-3); }

.calc-form {
  display: flex;
  flex-direction: column;
  padding: var(--step-2);
  background: var(--white);
  border: 1px solid #DCE8D4;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(5, 18, 41, .06);
}
.calc-pair { display: grid; gap: var(--step-2); }
.calc-pair + .calc-pair { margin-top: var(--step-2); }
.calc-form .field { margin-bottom: 0; }
.calc-form .field-hint { font-size: 13px; }

.calc-prompt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  padding: var(--step-3) var(--step-2);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(91, 162, 44, .3) 0%, rgba(91, 162, 44, 0) 58%),
    var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px rgba(5, 18, 41, .3);
}
.calc-prompt-icon {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--step-2);
  background: rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: #A8D98A;
}
.calc-prompt-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A8D98A;
}
.calc-prompt-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}
.calc-prompt-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #B9C7B2;
}

.field { margin-bottom: var(--step-3); }
.field:last-of-type { margin-bottom: 0; }
.field label,
.field legend,
.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
}
.field-hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.label-optional {
  font-weight: 500;
  color: var(--muted);
}

.input {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}
.input::placeholder { color: #767F8D; }
.input:hover { border-color: #B9C2B1; }
/* Un seul liseré au focus : la bordure fonce, un halo léger l'accompagne. */
.input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(5, 18, 41, .12);
}
textarea.input { min-height: 112px; resize: vertical; }
select.input { padding-right: 36px; }

.fieldset {
  margin: 0 0 var(--step-3);
  padding: 0;
  border: 0;
}
.fieldset legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.times-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
}
.times-row .input { padding-inline: 10px; }
.times-row select.input { padding-right: 30px; }

.calc-out {
  position: relative;
  overflow: hidden;
  padding: var(--step-3) var(--step-2);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(91, 162, 44, .3) 0%, rgba(91, 162, 44, 0) 58%),
    var(--ink);
  color: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 44px rgba(5, 18, 41, .3);
}
.calc-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A8D98A;
}
.calc-annual {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.calc-monthly {
  margin: 6px 0 0;
  font-size: 14px;
  color: #B9C7B2;
}

.calc-bars {
  display: grid;
  gap: 14px;
  margin: var(--step-3) 0 0;
}
.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: baseline;
}
.bar-label { font-size: 13px; color: #C9D5C1; }
.bar-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.bar-track {
  grid-column: 1 / -1;
  height: 10px;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 320ms ease;
}
.bar-fill--cost { background: rgba(255, 255, 255, .55); }
.bar-fill--tool { background: var(--brand); }

.calc-gain {
  margin-top: var(--step-3);
  padding: 14px 16px;
  background: rgba(91, 162, 44, .16);
  border: 1px solid rgba(168, 217, 138, .4);
  border-radius: var(--radius-sm);
}
.calc-gain-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A8D98A;
}
.calc-gain-value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.calc-pill {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #D8F0C6;
}
.calc-hours {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--step-2) 0 var(--step-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #DDE7D6;
}
.calc-hours svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #A8D98A;
}
.calc-note {
  margin: var(--step-2) 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--brand);
  font-size: 13.5px;
  line-height: 1.5;
  color: #C9D5C1;
}
.calc-out .btn { width: 100%; margin-top: var(--step-3); }

/* --------------------------------------------------------------------------
   Comment ça marche
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--step-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  padding-top: var(--step-2);
  border-top: 2px solid var(--line);
}
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-2);
  margin-bottom: var(--step-2);
}
.step-num {
  color: var(--brand);
  opacity: .32;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
}
.step-when {
  display: inline-block;
  margin: 0;
  padding: 4px 11px;
  background: var(--tint);
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.steps h3 { margin: 0 0 6px; font-size: 1.1rem; }
.steps p { margin: 0; font-size: 15px; color: var(--muted); }
.steps strong { color: var(--ink); }
.step--wide {
  padding: var(--step-3);
  background: var(--tint);
  border-top: 0;
  border-radius: var(--radius);
}
.step--wide .step-num { color: var(--brand-strong); opacity: .45; }
.step--wide .step-when {
  background: var(--brand-strong);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Prix
   -------------------------------------------------------------------------- */
.prices { display: grid; gap: var(--step-3); }
.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--step-4) var(--step-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(5, 18, 41, .07);
}
.price-card h3 { margin-bottom: 4px; }
.price-card .btn { align-self: flex-start; margin-top: auto; }
.price-tag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 3rem;
  margin-bottom: var(--step-2);
}
.price-value {
  font-size: clamp(2.4rem, 8vw, 3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.price-unit { font-size: 15px; font-weight: 700; color: var(--muted); }
.price-value--text { font-size: clamp(2.1rem, 5.2vw, 3rem); letter-spacing: -.02em; }
.price-list { margin: 0 0 var(--step-3); }
.price-list li {
  position: relative;
  padding: 8px 0 8px 30px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.plain-panel {
  padding: var(--step-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plain-panel h3 { font-size: 1.05rem; }
.plain-panel p { font-size: 15px; color: var(--muted); margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Garanties
   -------------------------------------------------------------------------- */
.pledge {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(5, 18, 41, .06);
  overflow: hidden;
}
.guarantees {
  display: grid;
  margin: 0;
}
.guarantees li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--step-3);
}
.guarantees li + li { border-top: 1px solid var(--line); }
.guarantee-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--brand-strong);
}
.guarantee-icon svg { width: 20px; height: 20px; }
.guarantees h3 { margin: 0 0 3px; font-size: 1rem; }
.guarantees p { margin: 0; font-size: 15px; color: var(--muted); }
.guarantees-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 12px var(--step-3);
  background: var(--tint);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.guarantees-note svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--brand-strong);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 16px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 16px no-repeat;
  transition: background-size var(--transition);
}
.faq details[open] summary::after {
  background-size: 16px 2px, 0 0;
}
.faq details p {
  margin: 0 0 var(--step-2);
  font-size: 16px;
  color: var(--muted);
  max-width: 68ch;
}
.faq details ul {
  display: grid;
  gap: 6px;
  margin: 0 0 var(--step-2);
  font-size: 16px;
  color: var(--muted);
}
.faq details li {
  position: relative;
  padding-left: 20px;
}
.faq details li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* --------------------------------------------------------------------------
   Formulaire (3 étapes)
   -------------------------------------------------------------------------- */
/* Page du formulaire : logo seul, sans navigation ni pied de page. */
.form-top {
  display: flex;
  justify-content: center;
  padding: var(--step-3) 20px 0;
}
.form-page { padding-block: var(--step-3) var(--step-5); }
.form-page .brief-panel {
  max-width: 560px;
  margin-inline: auto;
}
/* Appel final : bande teintée, panneau blanc, pour ne pas se fondre dans le
   pied de page sombre. */
.cta-final { background: var(--tint); }
.cta-final-inner {
  max-width: 820px;
  margin-inline: auto;
  padding: var(--step-3) 20px;
  background: var(--white);
  border: 1px solid #D6E6C8;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(5, 18, 41, .07);
  text-align: center;
}
.cta-final-inner p { margin-inline: auto; }
.cta-final .btn-row { justify-content: center; margin: var(--step-3) 0 var(--step-2); }
.cta-note { margin: 0; font-size: 15px; color: var(--muted); }
/* Colonne unique, sans cadre ni ombre : le formulaire repose sur le fond. */
.brief-panel h2,
.brief-panel h3,
.brief-panel p { color: var(--ink); }
.brief-panel .field-hint,
.brief-panel .wizard-progress,
.brief-panel .consent-line { color: var(--muted); }
.brief-panel a { color: var(--brand-strong); }
.wizard-progress {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.wizard-track {
  height: 3px;
  margin-bottom: var(--step-4);
  background: #E2E8DD;
  border-radius: 999px;
  overflow: hidden;
}
.wizard-track span {
  display: block;
  height: 100%;
  width: 33.333%;
  background: var(--brand-strong);
  transition: width var(--transition);
}
.wizard-step[hidden] { display: none; }
.wizard-step h3 {
  margin-bottom: var(--step-3);
  font-size: 1.5rem;
  letter-spacing: -.02em;
  outline: none;
}
.wizard-step h3:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.wizard-nav {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 10px;
  margin-top: var(--step-4);
}
.wizard-nav .btn { flex: 1 1 150px; }

/* Choix rapides : pastilles, plus compactes qu'une liste verticale. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid #CDD5C7;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chip:hover { border-color: #9DB08F; }
.chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.chip:has(input:focus-visible) {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(5, 18, 41, .22);
}
.chip:has(input[aria-invalid="true"]) { border-color: var(--error); }
.chip:has(input[aria-invalid="true"]):has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* Cases à cocher alignées comme les autres champs. */
.check-field .consent-line { margin: 0; }

/* Option payante : carte cliquable, mise en avant quand elle est cochée. */
label.option-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px;
  background: var(--white);
  border: 1px solid #CDD5C7;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.option-card input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand-strong);
}
.option-card-title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}
.option-card-price {
  flex: 0 0 auto;
  padding: 3px 9px;
  background: var(--tint);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--brand-strong);
}
.option-card:hover { border-color: #9DB08F; }
.option-card:has(input:checked) {
  border-color: var(--brand-strong);
  background: var(--tint);
}
.option-card:has(input:checked) .option-card-price { background: var(--white); }
.option-card:has(input:focus-visible) {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(5, 18, 41, .22);
}

/* Barre de prix fixe, ancrée en bas de l'écran. */
.price-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 3px solid var(--brand);
  box-shadow: 0 -8px 24px rgba(5, 18, 41, .18);
}
.price-bar[hidden] { display: none; }
.price-bar-inner {
  max-width: 560px;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--white);
}
@keyframes price-pop {
  from { opacity: .3; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.price-bar-inner.is-updated { animation: price-pop 260ms ease; }

p.confirm-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.confirm-note > span { display: block; }
.confirm-note > span + span { margin-top: 6px; }

.consent-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--step-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}
.consent-line input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--brand-strong);
}
.consent-line a { color: var(--brand-strong); }

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--error);
}
.field-error svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }

/* Erreur d'envoi : elle s'affiche au-dessus des boutons, et le bouton reste
   utilisable pour réessayer. */
.form-submit-error { margin: 4px 0 var(--step-2); }

/* Champ piège : hors de l'écran pour un humain, visible pour un robot. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.input[aria-invalid="true"] { border-color: var(--error); }
.input[aria-invalid="true"]:focus-visible {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* Aide contextuelle : pastille « ? » dans la légende + panneau explicatif. */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0;
  background: var(--white);
  border: 1px solid #B9C3B1;
  border-radius: 50%;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  vertical-align: 1px;
  cursor: help;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.help-btn:hover,
.help-btn[aria-expanded="true"] {
  background: var(--tint);
  border-color: var(--brand-strong);
  color: var(--brand-strong);
}
.help-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* `p.` pour passer devant la règle `.brief-panel p { color: var(--ink) }`. */
p.help-panel {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--paper);
  border-left: 3px solid var(--brand-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.help-panel[hidden] { display: none; }
.link-btn {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }
.link-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

.confirm { display: grid; gap: var(--step-2); }
.confirm h3 { font-size: 1.625rem; margin-bottom: 0; }
.confirm p { margin: 0; }

/* Sous-titre : délai et horaires de réponse, lus dans la config.
   `p.` pour passer devant `.brief-panel p { color: var(--ink) }`. */
p.confirm-lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

/* Bloc prix : plus grand que le récapitulatif, il porte la décision. */
.confirm-price {
  padding: 14px 16px;
  background: var(--tint);
  border: 1px solid #CFE3C1;
  border-radius: var(--radius);
}
.confirm-price-main {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}
p.confirm-price-detail {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

/* « Et maintenant ? » : les trois étapes qui suivent l'envoi. */
.confirm-next-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}
.confirm-steps {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
/* Pas de grille ici : `display:grid` sur un <ol> supprime les numéros. */
.confirm-steps li + li { margin-top: 8px; }
.confirm-steps li { overflow-wrap: anywhere; }
.confirm-steps li::marker {
  font-weight: 800;
  color: var(--brand-strong);
}

/* Actions de fin : pleine largeur sur mobile, côte à côte sur grand écran. */
.confirm-actions {
  display: grid;
  gap: 12px;
}
.confirm-actions .btn { width: 100%; }
/* `a.` pour passer devant `.brief-panel a { color: var(--brand-strong) }`. */
.brief-panel a.btn--primary { color: var(--white); }
.confirm-save {
  display: grid;
  gap: 6px;
}
.confirm-save .field-hint { margin: 0; text-align: center; }

@media (min-width: 560px) {
  .confirm-actions {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Boîte QR (ordinateur)
   Le contact et le QR sont fabriqués dans la page : rien n'est envoyé.
   -------------------------------------------------------------------------- */
.qr-dialog {
  width: min(360px, calc(100vw - 32px));
  max-width: none;
  padding: 24px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 64px rgba(5, 18, 41, .3);
}
.qr-dialog::backdrop { background: rgba(5, 18, 41, .55); }
.qr-dialog-title {
  margin: 0 0 6px;
  font-size: 1.125rem;
}
p.qr-dialog-help {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.qr-code { display: flex; justify-content: center; }
.qr-code svg {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
}
.qr-dialog-number {
  margin: 14px 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.qr-dialog-tel {
  display: block;
  margin-top: 4px;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
}
.qr-dialog .btn { width: 100%; }

/* Récapitulatif du formulaire sur l'écran de remerciement. */
.recap {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.recap > div {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.recap dt {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
/* Valeurs alignées à gauche : tous les textes commencent sur la même ligne
   verticale, et un texte long passe à la ligne au lieu de partir à droite. */
.recap dd {
  margin: 0;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Appel final
   -------------------------------------------------------------------------- */
.final-cta { text-align: left; }
.final-cta p { color: #DDE7D6; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #C9D6BF;
  padding-block: var(--step-5);
  font-size: 15px;
}
.site-footer a { color: var(--white); }
.footer-grid {
  display: grid;
  gap: var(--step-4);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.footer-brand img { height: 40px; width: auto; }
.footer-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #A8BC9C;
}
.footer-list li { margin-bottom: 6px; }
.footer-legal {
  margin-top: var(--step-4);
  padding-top: var(--step-2);
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 14px;
  color: #A8BC9C;
}
.footer-legal p { margin: 0 0 6px; }

/* --------------------------------------------------------------------------
   Pages légales
   -------------------------------------------------------------------------- */
.legal { padding-block: var(--step-4) var(--step-6); }
.legal h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: var(--step-2); }
.legal h2 {
  margin-top: var(--step-4);
  font-size: clamp(1.2rem, 3vw, 1.45rem);
}
.legal p, .legal li { max-width: 70ch; }
.legal ul { margin: 0 0 var(--step-2); }
.legal ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
}
.legal ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.legal-updated {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--step-3);
}
.legal-note {
  padding: var(--step-2) 16px;
  background: var(--tint);
  border-left: 4px solid var(--brand-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  color: #37452F;
}
.back-link { display: inline-block; margin-bottom: var(--step-2); font-weight: 700; }

/* --------------------------------------------------------------------------
   Points de rupture
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .header-actions { gap: 8px; }
  .header-actions .btn {
    padding-inline: clamp(6px, 2.2vw, 10px);
    font-size: clamp(11px, 3.2vw, 13px);
    min-height: 40px;
    white-space: nowrap;
  }
  .nav-toggle { display: inline-flex; }

  .site-nav { display: none; }
  .site-header.is-nav-open .site-nav {
    display: block;
    padding: 8px 0 4px;
    border-top: 1px solid var(--line);
  }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: 13px 0; font-size: 16px; border-bottom: 0; }
}

@media (max-width: 479px) {
  .site-header .wrap { gap: 8px; }
  .header-actions { gap: 6px; }
  .brand img { height: 30px; }
  .slip-logo { height: 32px; }
  .slip { margin-top: var(--step-1); }
  .slip-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .slip-price { text-align: right; }
}

@media (max-width: 379px) {
  .brand img { height: 28px; }
}

@media (min-width: 768px) {
  .section { padding-block: var(--step-5); }

  .site-header .wrap { flex-wrap: nowrap; }
  .site-nav { order: 0; width: auto; margin-left: auto; margin-right: 16px; }
  .site-nav a { font-size: 15px; }

  .hero { padding-block: var(--step-6) 40px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; align-items: start; gap: 6px var(--step-5); }
  .hero-promises { grid-column: 1 / -1; }

  .calc { padding: var(--step-4); }
  .calc-pair { grid-template-columns: 1fr 1fr; }

  .prices { grid-template-columns: 1.06fr .94fr; align-items: stretch; }

  .tools { grid-template-columns: 1fr 1fr; }
  /* Nombre impair de cartes : la dernière prend toute la largeur, avec
     Avant / Après côte à côte pour garder des lignes courtes. */
  .tool-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tool-card:last-child:nth-child(odd) .tool-gain {
    grid-template-columns: 1fr 1fr;
    gap: var(--step-3);
  }

  .steps { grid-template-columns: 1fr 1fr; gap: var(--step-5) var(--step-4); }
  .step { padding-top: var(--step-3); }
  .step-num { font-size: 3.25rem; }
  .step--wide { grid-column: 1 / -1; padding: var(--step-4); }
  .step--wide p { max-width: 72ch; }

  .cta-final-inner { padding: var(--step-4); }

  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }

  .guarantees { grid-template-columns: 1fr 1fr; }
  .guarantees li:nth-child(odd) { border-right: 1px solid var(--line); }
  .guarantees li:nth-child(2) { border-top: 0; }
}

@media (min-width: 1000px) {
  .hero .btn-row { flex-wrap: nowrap; }
  .hero .btn-row .btn { flex: 0 1 auto; padding-inline: 16px; font-size: 15px; white-space: nowrap; }
  .calc-grid { grid-template-columns: .95fr 1.05fr; align-items: stretch; gap: var(--step-4); }
  .calc-pair { grid-template-columns: 1fr; }
  .calc-form { justify-content: center; }
  .calc-prompt { align-self: stretch; }
  .calc-out { display: flex; flex-direction: column; }
  .calc-out .btn { margin-top: auto; }
}

@media (min-width: 1200px) {
  .wrap { padding-inline: 24px; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 6px var(--step-5); }
  .slip { --slip-pad: var(--step-4); }
}

/* Échelle typographique de bureau : la même sobriété que le titre du héros,
   partout sur le site. Les tailles mobiles ne bougent pas. */
@media (min-width: 768px) {
  h1 { font-size: clamp(2rem, 1.2vw + 1.2rem, 2.8rem); }
  h2 { font-size: clamp(1.5rem, .6vw + 1.25rem, 2rem); }
  .lede { font-size: 17px; }
  .legal h1 { font-size: clamp(1.8rem, .8vw + 1.2rem, 2.2rem); }
  .legal h2 { font-size: clamp(1.2rem, .3vw + 1.1rem, 1.35rem); }
  .calc-annual { font-size: clamp(2.6rem, 3.4vw, 3rem); }
  .price-value,
  .price-value--text { font-size: clamp(2.2rem, 2vw, 2.6rem); }
}

/* --------------------------------------------------------------------------
   Mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================================
   Composants ajoutés (confiance et conversion)
   Aucune règle ci-dessous ne cible .calc* ni .tools / .tool-*.
   ========================================================================== */

/* --- Héros : lien secondaire vers le catalogue des tâches ----------------- */
.hero-alt-link {
  margin: 0 0 var(--step-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}
.hero-alt-link a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.hero-alt-link strong { font-weight: 800; letter-spacing: .01em; }
.hero-alt-link a:hover { text-decoration-thickness: 2px; }

/* --- Chapeau des sections ------------------------------------------------- */
.section > .wrap > .lede { margin-bottom: var(--step-4); }

/* --- Problèmes reconnus --------------------------------------------------- */
.pain-grid { display: grid; gap: var(--step-4); }
.pain-grid > div > h2 { margin-bottom: var(--step-2); }
.pain-grid .lede { margin-bottom: var(--step-3); }

.pain-list { display: grid; gap: 10px; margin: 0; }
.pain-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.45;
}
.pain-list svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--brand-strong);
}

.pain-note {
  margin: var(--step-3) 0 0;
  padding: 14px 16px;
  background: var(--tint);
  border-left: 4px solid var(--brand-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  color: #37452F;
}
.pain-note a { font-weight: 700; }

/* --- Transparence --------------------------------------------------------- */
.facts { display: grid; gap: var(--step-2); margin: 0; }
.facts li {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.facts h3 { margin: 0 0 6px; font-size: 1rem; }
.facts p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* --- Prix : repères de complexité ---------------------------------------- */
.price-notes { display: grid; gap: var(--step-3); margin-top: var(--step-4); }
.price-note {
  padding: var(--step-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.price-note h3 { margin: 0 0 8px; font-size: 1rem; }
.price-note p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.price-note ul { margin: 0; }
.price-note li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.price-note li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

/* --- FAQ : invitation finale --------------------------------------------- */
.faq-more { margin: var(--step-3) 0 0; font-size: 15px; color: var(--muted); }
.faq-more a { font-weight: 700; }

/* --- Barre d'action mobile ----------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(5, 18, 41, .12);
}
.mobile-cta .btn { flex: 1 1 auto; }
.mobile-cta-wa {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 2px solid var(--brand-strong);
  border-radius: var(--radius);
  color: var(--brand-strong);
}
.mobile-cta-wa svg { width: 22px; height: 22px; }
.mobile-cta-wa:hover { background: var(--tint); color: var(--brand-strong); }

@media (min-width: 768px) {
  .pain-grid { grid-template-columns: 1fr 1.1fr; align-items: start; gap: var(--step-5); }
  .facts { grid-template-columns: 1fr 1fr; gap: var(--step-3); }
}

@media (min-width: 900px) {
  .price-notes { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .mobile-cta { display: none; }
}