/* Landing lead-gen — mobile-first, léger (<10 KB). */
:root{
  --accent:#0b6cf2; --accent-d:#0950b8; --ink:#1a1f29; --muted:#5b6472;
  --bg:#f6f8fb; --card:#fff; --ok:#1a8f4a; --line:#e2e8f0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}

/* HERO + FORM : ordre VISUEL au-dessus de la flottaison.
   Le H1 et le résumé sont en haut du DOM (bon pour le SEO),
   mais on garde le formulaire visible d'emblée via cet agencement. */
.hero{padding:28px 0 8px}
.hero h1{font-size:1.7rem;line-height:1.25;margin:.2em 0}
.lead{font-size:1.05rem;color:var(--muted);margin:.4em 0 0}

@media(min-width:760px){
  .hero{padding-top:40px}
  .hero h1{font-size:2.1rem}
}

/* CLICK-TO-CALL (conversion principale en pay-per-call) */
.callbar{margin:18px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.callbtn{display:inline-flex;align-items:center;gap:8px;background:var(--ok);color:#fff;
  text-decoration:none;font-size:1.25rem;font-weight:800;padding:15px 22px;border-radius:12px;
  box-shadow:0 6px 20px rgba(26,143,74,.28)}
.callbtn:hover{background:#15723b}
.callnote{font-weight:700;color:var(--ink)}
@media(min-width:760px){ .callbtn{font-size:1.4rem} }

/* Barre d'appel collante (mobile uniquement) */
.sticky-call{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  text-align:center;background:var(--ok);color:#fff;text-decoration:none;
  font-size:1.1rem;font-weight:800;padding:14px;box-shadow:0 -4px 16px rgba(0,0,0,.15)}
@media(max-width:759px){
  .sticky-call{display:block}
  body{padding-bottom:60px}  /* éviter que la barre masque le footer */
}

/* Carte formulaire */
.cta{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin:18px 0 8px;box-shadow:0 6px 24px rgba(16,30,54,.06)}
.cta h2{margin:.1em 0;font-size:1.25rem}
.cta-sub{margin:.2em 0 14px;color:var(--muted)}
.lead-form{display:grid;gap:12px}
.lead-form label{display:grid;gap:4px;font-size:.92rem;font-weight:600}
.lead-form input,.lead-form textarea{
  font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fbfdff;width:100%}
.lead-form input:focus,.lead-form textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.consent{font-weight:400 !important;font-size:.82rem !important;color:var(--muted);
  grid-template-columns:auto 1fr;align-items:start;gap:8px}
.consent input{width:auto;margin-top:3px}
.consent a{color:var(--accent)}
button{background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:13px 16px;font-size:1.05rem;font-weight:700;cursor:pointer}
button:hover{background:var(--accent-d)}
.reassure{margin:2px 0 0;font-size:.8rem;color:var(--ok);text-align:center}

/* Honeypot : invisible, piège à bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Article */
.content{padding:18px 0;max-width:70ch}
.content h2{font-size:1.3rem;margin-top:1.4em}
.content p{margin:.7em 0}
.content ul{padding-left:1.2em}

.foot{border-top:1px solid var(--line);margin-top:24px;padding:18px 0 40px;
  color:var(--muted);font-size:.85rem}
.foot nav a{color:var(--muted)}

/* Navigation entre les pages de contenu (maillage interne SEO) */
.pagenav{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 0;padding:14px 0;
  border-top:1px solid var(--line);font-size:.95rem}
.pagenav a{color:var(--accent);text-decoration:none;font-weight:600}
.pagenav a:hover{text-decoration:underline}
.backbtn{display:inline-block;margin-top:1.2em;font-weight:700;color:var(--accent);text-decoration:none}
.backbtn:hover{text-decoration:underline}
.content table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.95rem}
.content th,.content td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.content th{background:#eef3fb}

/* Sous-titre hero */
.subhead{font-size:1.15rem;font-weight:600;color:var(--ink);margin:.3em 0 0}

/* Barre de confiance */
.trustbar{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:0;
  font-size:.92rem;font-weight:600;color:var(--ink)}
.trustbar li{color:var(--ok)}

/* How it works */
.how{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:18px 0;
  box-shadow:0 6px 24px rgba(16,30,54,.06)}
.how h2{margin:.1em 0 .4em;font-size:1.25rem}
.how ol{margin:0;padding-left:1.2em}
.how li{margin:.5em 0}

/* Disclosure (E-E-A-T / légal) */
.disclosure{font-size:.8rem;color:var(--muted);margin:.6em 0;max-width:70ch}

/* Diagramme (schéma pompe) */
figure.diagram{margin:18px 0;text-align:center}
figure.diagram img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px}
figure.diagram figcaption{font-size:.85rem;color:var(--muted);margin-top:6px}