/* Zolt — landing publique · marque Zolt (Encre #0F1115, Volt #D4F53C, Alerte #C2412D) */

:root {
  --bg:#ffffff; --soft:#f2f3f5; --card:#ffffff;
  --ink:#0f1115; --ink2:#1e2127; --body:#3b3f47; --muted:#6a6f78; --faint:#9aa0a8;
  --line:#e7e8ec; --line2:#d8dade;
  --navy:#0f1115;                               /* encre : bandes sombres */
  --volt:#d4f53c; --volt-dark:#c3e62f; --volt-soft:#f3fbd0;
  --accent:#d4f53c; --accent-ink:#56660f; --accent-soft:#f3fbd0;  /* accent-ink = olive lisible sur clair */
  --danger:#c2412d; --danger-soft:#f9ece9;
  /* Palette de sévérité alignée sur le rapport (Élevé = rouge, distinct du Moyen ambre). */
  --crit:#9e1a0d; --high:#d92d20; --med:#c77908; --low:#0e9f6e; --info:#64748b;
  --font:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Unbounded","Instrument Sans",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --shadow:0 18px 50px -28px rgba(15,17,21,.26);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); color:var(--body); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); text-decoration:none; }
h1,h2,h3 { color:var(--ink); line-height:1.14; letter-spacing:-.4px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.ico { display:inline-flex; }
.ico svg { width:20px; height:20px; stroke-width:2; }

/* Highlight (soulignage volt) */
.hl { background:linear-gradient(transparent 58%, var(--volt) 0); padding:0 3px; }

/* --- Nav --- */
.nav { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:14px; height:68px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700;
  font-size:19px; color:var(--ink); letter-spacing:-.5px; }
.brand .logo { width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--ink); }
.brand .logo svg { width:21px; height:21px; }
.nav .links { margin-left:auto; display:flex; gap:28px; align-items:center; }
.nav .links a { color:var(--body); font-size:14.5px; font-weight:500; }
.nav .links a:hover { color:var(--ink); }
.nav .cta-mini { background:var(--volt); color:var(--ink) !important; padding:9px 16px; border-radius:9px;
  font-weight:700; }
.nav .cta-mini:hover { background:var(--volt-dark); }
/* Header transparent par-dessus le hero sombre, solidifié au scroll */
.nav.nav-over { position:fixed; top:0; left:0; right:0; background:transparent;
  border-bottom-color:transparent; transition:background .25s, border-color .25s; }
.nav.nav-over .brand { color:#fff; }
.nav.nav-over .brand .logo { background:rgba(255,255,255,.08); }
.nav.nav-over .links a { color:#d7dade; }
.nav.nav-over .links a:hover { color:#fff; }
.nav.nav-over .cta-mini { color:var(--ink) !important; }
.nav.nav-over.solid { background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom-color:var(--line); }
.nav.nav-over.solid .brand { color:var(--ink); }
.nav.nav-over.solid .brand .logo { background:var(--ink); }
.nav.nav-over.solid .links a { color:var(--body); }
.nav.nav-over.solid .links a:hover { color:var(--ink); }

/* --- Buttons --- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:16px; padding:15px 26px; border-radius:11px;
  border:none; background:var(--volt); color:var(--ink); transition:.16s; text-decoration:none; }
.btn:hover { background:var(--volt-dark); transform:translateY(-1px);
  box-shadow:0 12px 26px -12px rgba(212,245,60,.8); }
.btn.lg { font-size:17px; padding:17px 32px; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line2); }
.btn.ghost:hover { background:var(--soft); box-shadow:none; }
.btn .ico svg { width:19px; height:19px; }

/* --- Hero (pleine largeur, Encre, centré) --- */
.hero { position:relative; padding:124px 0 88px; overflow:hidden; background:var(--ink); color:#e9eaec; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:26px 26px, 52px 52px, 52px 52px;
  mask-image:radial-gradient(ellipse at 50% 8%,#000 8%,transparent 62%); }
.hero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(720px 460px at 82% -4%, rgba(212,245,60,.14), transparent 60%),
    radial-gradient(620px 440px at 10% 4%, rgba(212,245,60,.05), transparent 60%); }
.hero-center { position:relative; z-index:1; max-width:880px; margin:0 auto; text-align:center; }
.eyebrow-mono { display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:12px;
  letter-spacing:1.6px; text-transform:uppercase; color:#aeb2ba; margin-bottom:22px; }
.eyebrow-mono .dash { width:28px; height:3px; border-radius:2px; background:var(--volt); }
.hero h1 { font-family:var(--font); font-size:54px; font-weight:700; letter-spacing:-1.4px;
  line-height:1.1; margin:0 auto 18px; max-width:820px; color:#fff; }
.word-rot { color:var(--volt); display:inline-block; transition:opacity .25s ease; }
.h1-pair { white-space:nowrap; }
.hero .lead { font-size:18px; color:#c0c4cb; max-width:560px; margin:0 auto 30px; }
.trust { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; color:#c0c4cb; font-size:14px;
  margin-top:20px; }
.trust span { display:flex; align-items:center; gap:8px; }
.trust .ico svg { width:17px; height:17px; color:var(--volt); }
.trust b { color:#fff; font-weight:600; }

/* --- Scan card (centrée) --- */
.scanbox { position:relative; max-width:560px; margin:0 auto; text-align:left; background:var(--card);
  border:1px solid var(--line); border-radius:18px; padding:30px 28px;
  box-shadow:0 34px 80px -34px rgba(11,27,51,.42), 0 2px 8px -2px rgba(11,27,51,.08); }
.scan-badge { position:absolute; top:16px; right:16px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:5px 11px; border-radius:20px; box-shadow:0 6px 16px -6px rgba(14,159,110,.7); }

/* --- Barre de scan fine (hero sombre) --- */
.scanbar { display:flex; gap:8px; max-width:620px; margin:6px auto 0; background:#191c22;
  border:1px solid #2b2f37; border-radius:14px; padding:8px; box-shadow:0 20px 50px -30px rgba(0,0,0,.8); text-align:left; }
.scanbar input { flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:var(--font); font-size:15px; color:#fff; padding:12px 12px; }
.scanbar input::placeholder { color:#7d828b; }
.scanbar input + input { border-left:1px solid #2b2f37; }
.scanbar .btn { flex-shrink:0; white-space:nowrap; }
.scanbar-note { display:inline-flex; align-items:center; gap:8px; justify-content:center;
  color:#aeb2ba; font-size:13px; margin:14px auto 0; }
.scanbar-note .ico svg { width:15px; height:15px; color:var(--volt); }
@media (max-width:560px){
  .scanbar { flex-direction:column; gap:6px; padding:10px; }
  .scanbar input + input { border-left:none; border-top:1px solid #2b2f37; }
  .scanbar .btn { width:100%; justify-content:center; }
}

/* --- Aperçu produit (mockup qui dépasse en bas du hero) --- */
.hero-mock { max-width:800px; margin:48px auto 0; text-align:left; background:var(--card);
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 44px 84px -38px rgba(0,0,0,.68); }
.mock-bar { display:flex; align-items:center; gap:7px; padding:11px 16px; background:var(--soft);
  border-bottom:1px solid var(--line); }
.mock-bar .d { width:11px; height:11px; border-radius:50%; }
.mock-bar .d.r { background:#ff5f57; } .mock-bar .d.y { background:#febc2e; } .mock-bar .d.g { background:#28c840; }
.mock-url { margin-left:12px; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:12.5px; color:var(--muted); background:var(--card); border:1px solid var(--line);
  border-radius:7px; padding:4px 12px; }
.mock-url svg { width:12px; height:12px; color:var(--low); }
.mock-tag { margin-left:auto; display:inline-flex; align-items:center; font-family:var(--mono);
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  border:1px solid var(--volt); background:var(--volt-soft); border-radius:999px; padding:3px 10px; }
.mock-body { padding:24px 26px 22px; }
.mock-head { display:flex; align-items:center; gap:26px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.mock-score { text-align:center; flex-shrink:0; }
.mock-gauge { width:106px; height:106px; border-radius:50%; margin:0 auto;
  background:conic-gradient(var(--crit) 31%, var(--line) 0); display:grid; place-items:center; }
.mg-in { width:80px; height:80px; border-radius:50%; background:var(--card); display:flex;
  flex-direction:column; align-items:center; justify-content:center; }
.mg-in b { font-size:30px; color:var(--ink); line-height:1; }
.mg-in span { font-size:11px; color:var(--muted); font-family:var(--mono); }
.mock-grade { margin-top:9px; display:inline-block; font-family:var(--mono); font-size:11px; font-weight:700;
  color:#fff; background:var(--crit); border-radius:6px; padding:2px 10px; }
.mock-sum { flex:1; min-width:0; }
.mock-verdict { font-weight:700; font-size:17px; color:var(--ink); line-height:1.3; letter-spacing:-.2px; }
.mock-meta { margin-top:7px; display:flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:12px; color:var(--muted); }
.mock-meta svg { width:13px; height:13px; }
.mock-counts { margin-top:12px; display:flex; flex-wrap:wrap; gap:7px; }
.mc { font-family:var(--mono); font-size:11px; font-weight:700; border-radius:999px; padding:3px 10px; }
.mc.crit { color:var(--crit); background:rgba(158,26,13,.10); }
.mc.high { color:var(--high); background:rgba(217,45,32,.11); }
.mc.med { color:#b45309; background:rgba(217,119,6,.14); }
.mock-rows { display:grid; gap:8px; padding:18px 0 4px; }
.mock-row { display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:10px 13px; }
.mock-row .md { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.md.crit { background:var(--crit); } .md.high { background:var(--high); }
.md.med { background:var(--med); } .md.low { background:var(--low); }
.mr-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-row code { font-family:var(--mono); font-size:12px; background:var(--soft);
  border:1px solid var(--line); border-radius:4px; padding:0 4px; }
.mr-c { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--muted); flex-shrink:0; }
.mock-row em { font-style:normal; font-family:var(--mono); font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:20px; flex-shrink:0; }
em.crit { color:var(--crit); background:rgba(158,26,13,.10); }
em.high { color:var(--high); background:rgba(217,45,32,.11); }
em.med { color:#b45309; background:rgba(217,119,6,.14); }
em.low { color:var(--accent-ink); background:var(--accent-soft); }
.mock-foot { margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  padding:12px 15px; border-radius:10px; background:#0f1115; color:#dce1e6; }
.mf-l { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; }
.mf-l svg { width:15px; height:15px; color:var(--volt); }
.mf-r { font-family:var(--mono); font-size:12px; color:var(--volt); font-weight:700; }
.scanbox::before, .scanbox::after { content:""; position:absolute; width:22px; height:22px;
  border:2px solid var(--accent); }
.scanbox::before { top:-2px; left:-2px; border-right:0; border-bottom:0; border-radius:6px 0 0 0; }
.scanbox::after { bottom:-2px; right:-2px; border-left:0; border-top:0; border-radius:0 0 6px 0; }
.scanbox .title { display:flex; align-items:center; gap:9px; font-weight:700; color:var(--ink);
  font-size:17px; margin-bottom:4px; }
.scanbox .title .ico svg { color:var(--accent); width:20px; height:20px; }
.scanbox .hint { color:var(--muted); font-size:13px; margin-bottom:18px; }
.scanform { display:grid; gap:11px; }
.scanform input, .scanform select { width:100%; font-family:var(--font); font-size:15px; color:var(--ink);
  background:var(--bg); border:1px solid var(--line2); border-radius:11px; padding:14px 15px; outline:none;
  transition:.15s; }
.scanform input:focus, .scanform select:focus { border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(14,159,110,.14); }
.scanform input::placeholder { color:var(--faint); }
.legalnote { font-size:12px; color:var(--faint); margin-top:14px; line-height:1.5; }
.err { background:var(--danger-soft); border:1px solid #f6c6d1; color:#b4123c; padding:10px 13px;
  border-radius:9px; font-size:13.5px; margin-bottom:16px; }

/* --- Logo marquee --- */
.marquee-band { padding:54px 0 26px; }
.marquee-label { text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--faint); margin-bottom:24px; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; align-items:center; gap:92px; width:max-content;
  animation:scroll-x 44s linear infinite; }
.marquee-track img { height:32px; width:auto; opacity:.85; transition:opacity .2s; }
.marquee-track img:hover { opacity:1; }
@keyframes scroll-x { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee-track, .threat-track { animation:none; } }

/* --- Réseau de connexions (fond hero) --- */
.hero-net { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
  mask-image:radial-gradient(ellipse at 50% 28%,#000 4%,transparent 64%); }
.hero-net svg { width:100%; height:100%; }
.hero-net line { stroke:#ffffff; stroke-width:1; opacity:.1; }
.hero-net .flow { stroke:var(--volt); opacity:.5; stroke-dasharray:3 9;
  animation:net-dash 7s linear infinite; }
.hero-net circle { fill:#ffffff; opacity:.2; }
.hero-net .node-a { fill:var(--accent); animation:net-pulse 3.2s ease-in-out infinite; }
.hero-net .node-b { fill:var(--accent); animation:net-pulse 3.2s ease-in-out infinite 1.4s; }
@keyframes net-pulse { 0%,100% { opacity:.3; r:3; } 50% { opacity:.95; r:5; } }
@keyframes net-dash { to { stroke-dashoffset:-120; } }

/* --- Marquee de menaces (bloc en mouvement) --- */
.threats-band { padding:14px 0; background:var(--navy); overflow:hidden; }
.threats-mq { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.threats-band { padding:18px 0; }
.threat-track { display:flex; align-items:center; gap:40px; width:max-content;
  animation:scroll-x 55s linear infinite; }
.threat-track.rev { animation-direction:reverse; }
.threat { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; white-space:nowrap;
  border:1px solid rgba(255,255,255,.14); border-radius:30px; color:#dbe6f2; font-size:14px;
  font-weight:500; background:rgba(255,255,255,.03); }
.threat .ico svg { width:15px; height:15px; color:var(--volt); }

/* --- FAQ (accordéon animé) --- */
.faq { display:grid; gap:12px; max-width:780px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden;
  transition:box-shadow .18s, border-color .18s; }
.faq-item[open] { border-color:var(--line2); box-shadow:var(--shadow); }
.faq-item summary { cursor:pointer; padding:18px 22px; font-weight:600; color:var(--ink); font-size:15.5px;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .chev { color:var(--accent-ink); transition:transform .22s ease; flex-shrink:0; }
.faq-item[open] summary .chev { transform:rotate(180deg); }
.faq-body { padding:0 22px 20px; color:var(--muted); font-size:14.5px; line-height:1.65; }

/* --- Sections --- */
section.block { padding:70px 0; }
section.alt { background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px;
  color:var(--accent-ink); text-transform:uppercase; letter-spacing:2px; margin-bottom:14px; }
.eyebrow::before { content:""; width:22px; height:1.5px; background:var(--accent); }
.h2 { font-family:var(--font); font-size:31px; font-weight:700; margin:0 0 14px; letter-spacing:-.8px; }
.sub { color:var(--muted); font-size:17px; max-width:640px; margin:0 0 44px; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.step { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; }
.step .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.step .n { font-family:var(--mono); font-size:13px; color:var(--accent-ink); font-weight:700; }
.step .ic { width:44px; height:44px; border-radius:12px; background:var(--accent-soft);
  display:grid; place-items:center; color:var(--accent-ink); }
.step .ic svg { width:22px; height:22px; }
.step h3 { font-size:18px; margin:0 0 8px; }
.step p { color:var(--muted); font-size:14.5px; margin:0; }

/* Avatars */
.avatars { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.avatar .seg { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.avatar h3 { font-family:var(--font); letter-spacing:-.3px; }
.avatar > p { color:var(--muted); font-size:14px; margin:0 0 14px; }
.avatar { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px;
  transition:.18s; }
.avatar:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line2); }
.avatar .ic { width:48px; height:48px; border-radius:13px; background:var(--navy); color:#fff;
  display:grid; place-items:center; margin-bottom:16px; }
.avatar .ic svg { width:24px; height:24px; }
.avatar h3 { font-size:20px; margin:0 0 12px; }
.avatar .pain { display:flex; gap:9px; color:#9f1239; font-size:13.5px; background:var(--danger-soft);
  border-radius:10px; padding:11px 13px; margin:0 0 15px; }
.avatar .pain .ico svg { width:17px; height:17px; flex-shrink:0; margin-top:1px; }
.avatar ul { list-style:none; margin:0; padding:0; color:var(--body); font-size:14px; }
.avatar ul li { display:flex; gap:9px; align-items:flex-start; margin:9px 0; }
.avatar ul li .ico svg { width:16px; height:16px; color:var(--accent); flex-shrink:0; margin-top:3px; }

/* Checks grid */
.checks { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.check { display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; }
.check .ic { width:40px; height:40px; border-radius:11px; background:var(--accent-soft); flex-shrink:0;
  display:grid; place-items:center; color:var(--accent-ink); }
.check .ic svg { width:20px; height:20px; }
.check b { display:block; color:var(--ink); margin-bottom:3px; font-size:15px; }
.check span { color:var(--muted); font-size:13.5px; }

/* Reassurance */
.reassure { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rea { text-align:center; padding:20px; }
.rea .ic { width:52px; height:52px; border-radius:14px; background:var(--card); border:1px solid var(--line);
  display:grid; place-items:center; margin:0 auto 14px; color:var(--accent-ink); box-shadow:var(--shadow); }
.rea .ic svg { width:24px; height:24px; }
.rea h3 { font-size:17px; margin:0 0 6px; }
.rea p { color:var(--muted); font-size:14px; margin:0; }

/* Final CTA (bande navy pour le contraste) */
.finalcta { position:relative; overflow:hidden; background:var(--navy); color:#dce5f2;
  border-radius:24px; padding:58px 30px; text-align:center; }
.finalcta::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:24px 24px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000,transparent 72%); }
.finalcta > * { position:relative; z-index:1; }
.finalcta h2 { font-family:var(--font); color:#fff; font-size:30px; margin:0 0 14px; }
.finalcta p { color:#aab8cf; font-size:17px; margin:0 0 28px; }

/* Footer */
footer { border-top:1px solid var(--line); background:var(--soft); padding:50px 0 26px;
  color:var(--muted); font-size:14px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.foot-brand .brand { font-size:17px; margin-bottom:12px; }
.foot-brand p { max-width:330px; font-size:14px; color:var(--muted); margin:0; }
.foot-col h4 { color:var(--ink); font-size:12px; text-transform:uppercase; letter-spacing:.8px;
  margin:0 0 14px; font-family:var(--mono); }
.foot-col a { display:block; color:var(--muted); margin:9px 0; }
.foot-col a:hover { color:var(--accent-ink); }
.foot-bottom { margin-top:40px; padding-top:22px; border-top:1px solid var(--line2);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--faint); }
.foot-bottom a { color:var(--muted); }
@media (max-width:720px){ .foot-grid { grid-template-columns:1fr; gap:30px; } }

/* --- Responsive --- */
@media (max-width:980px){
  .steps,.checks { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .hero-sheet { padding:44px 18px 0; border-radius:20px; }
  .hero h1 { font-size:44px; }
  .nav .links a:not(.cta-mini) { display:none; }
}
@media (max-width:760px){
  .avatars, .reassure { grid-template-columns:1fr; }
  .steps, .checks { grid-template-columns:1fr; }
}
@media (max-width:600px){
  .wrap { padding:0 18px; }
  .hero { padding:100px 12px 60px; }
  .hero h1 { font-size:clamp(26px, 8.2vw, 33px); letter-spacing:-.5px; }
  .h1-br { display:none; }
  .hero .lead { font-size:16.5px; }
  .trust { gap:14px; row-gap:10px; }
  .scanbox { padding:24px 18px; }
  .mock-head { flex-direction:column; gap:16px; text-align:center; }
  .mock-counts { justify-content:center; }
  .mock-meta { justify-content:center; }
  .mr-c { display:none; }
  section.block { padding:52px 0; }
  .h2 { font-size:25px; } .sub { font-size:16px; margin-bottom:34px; }
  .finalcta { padding:42px 22px; border-radius:18px; }
  .finalcta h2 { font-size:26px; } .finalcta p { font-size:15.5px; }
  .avatar, .step { padding:24px; }
}

/* ===== Blog & pages de contenu ===== */
.pub { padding:50px 0 72px; }
.pub-head { max-width:760px; margin-bottom:34px; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.post-card { display:flex; flex-direction:column; gap:9px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:22px; text-decoration:none; transition:.16s; }
.post-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line2); }
.post-cat { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.9px; color:var(--accent-ink); }
.post-card h3 { font-size:17px; color:var(--ink); margin:0; line-height:1.3; }
.post-card p { font-size:13.5px; color:var(--muted); margin:0; flex:1; }
.post-meta { font-family:var(--mono); font-size:12px; color:var(--faint); display:flex; align-items:center; gap:7px; margin-top:2px; }
.post-meta .ico svg { width:14px; height:14px; }
.pub-cta { text-align:center; margin-top:56px; padding:48px 24px; background:var(--navy); color:#dce5f2; border-radius:20px; }
.pub-cta h2 { font-family:var(--font); color:#fff; font-size:25px; margin:0 0 10px; }
.pub-cta p { color:#aab8cf; margin:0 0 22px; }

/* Article */
.crumbs { font-family:var(--mono); font-size:12.5px; color:var(--muted); margin:6px 0 22px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--muted); } .crumbs .cur { color:var(--ink); }
.art-head { margin-bottom:22px; }
.art-head h1 { font-family:var(--font); font-size:37px; color:var(--ink); margin:10px 0; letter-spacing:-.5px; max-width:20ch; }
.art-meta { font-family:var(--mono); font-size:12.5px; color:var(--muted); display:flex; gap:8px; }
.tldr { background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:14px; padding:18px 20px; margin-bottom:32px; }
.tldr-label { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px; color:var(--accent-ink); margin-bottom:8px; }
.tldr-label .ico svg { width:15px; height:15px; }
.tldr p { margin:0; color:var(--ink); font-size:15.5px; }
.art-grid { display:grid; grid-template-columns:220px 1fr; gap:42px; align-items:start; }
.toc { position:sticky; top:90px; font-size:13.5px; }
.toc-title { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--faint); margin-bottom:10px; }
.toc ol { margin:0; padding-left:18px; display:grid; gap:7px; }
.toc a { color:var(--muted); } .toc a:hover { color:var(--accent-ink); }
.art-body { min-width:0; }
.art-body h2 { font-size:23px; color:var(--ink); margin:34px 0 12px; }
.art-section:first-child h2 { margin-top:0; }
.art-body p { color:var(--body); font-size:16px; line-height:1.75; max-width:68ch; }
.draft { display:flex; gap:9px; align-items:center; color:var(--faint); font-style:italic; font-size:14px;
  background:var(--soft); border:1px dashed var(--line2); border-radius:10px; padding:12px 14px; }
.draft .ico svg { width:16px; height:16px; }
.art-cta { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  margin-top:38px; padding:22px 24px; border:1px solid var(--line); border-radius:16px; background:var(--soft); }
.art-cta strong { color:var(--ink); display:block; } .art-cta p { margin:4px 0 0; color:var(--muted); font-size:14px; }

@media (max-width:860px){ .post-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){
  .art-grid { grid-template-columns:1fr; gap:22px; }
  .toc { position:static; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--soft); }
  .art-head h1 { font-size:31px; }
}
@media (max-width:600px){ .post-grid { grid-template-columns:1fr; } }

/* Listes dans le corps d'article (lorem/contenu) */
.art-body ul, .art-body ol { color:var(--body); font-size:16px; line-height:1.7; max-width:68ch; padding-left:22px; margin:12px 0; }
.art-body li { margin:6px 0; }
/* Scores en JetBrains Mono (marque) */
.mg-in b, .mock-grade { font-family:var(--mono); }

/* ===== Pages business (ressources) ===== */
.biz-hero { background:var(--ink); color:#e9eaec; padding:58px 0 58px; }
.biz-hero .wrap { max-width:820px; text-align:center; }
.crumbs-dark { justify-content:center; color:#9aa0a8; margin-bottom:18px; }
.crumbs-dark a { color:#9aa0a8; } .crumbs-dark .cur { color:#e9eaec; }
.biz-cat { display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--volt); margin-bottom:12px; }
.biz-hero h1 { font-family:var(--font); color:#fff; font-size:44px; font-weight:700; letter-spacing:-1px;
  line-height:1.1; margin:0 auto 14px; max-width:18ch; }
.biz-lead { color:#c0c4cb; font-size:18px; max-width:620px; margin:0 auto 26px; }
.biz-note { color:#9aa0a8; font-size:13px; display:inline-flex; gap:8px; align-items:center;
  justify-content:center; margin-top:16px; }
.biz-note .ico svg { width:15px; height:15px; color:var(--volt); }
@media (max-width:600px){ .biz-hero { padding:40px 0 46px; } .biz-hero h1 { font-size:30px; } }

/* Social proof (rangée d'avatars dans le hero) */
.social-proof { display:flex; align-items:center; gap:13px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.pfps { display:flex; }
.pfp { width:38px; height:38px; border-radius:50%; border:2px solid var(--ink); margin-left:-11px;
  overflow:hidden; display:grid; place-items:center; background:#dde6ea; }
.pfp:first-child { margin-left:0; }
.pfp svg { width:100%; height:100%; display:block; }
.sp-text { color:#c0c4cb; font-size:13.5px; }

/* CTA sous le bloc 3 étapes */
.how-cta { display:flex; align-items:center; gap:16px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.how-note { font-family:var(--mono); font-size:13px; color:var(--muted); }

/* ===== Offres / packs ===== */
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.pack { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px 24px;
  display:flex; flex-direction:column; gap:6px; }
.pack.feature { border-color:var(--ink); box-shadow:var(--shadow); position:relative; }
.pack .tagpop { position:absolute; top:-11px; left:24px; background:var(--volt); color:var(--ink);
  font-family:var(--mono); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.pack .pname { font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink); }
.pack .pprice { font-family:var(--mono); font-size:26px; font-weight:700; color:var(--ink); margin:4px 0; }
.pack .pprice small { font-size:13px; color:var(--muted); font-weight:400; }
.pack .pdesc { color:var(--muted); font-size:13.5px; margin-bottom:8px; }
.pack ul { list-style:none; margin:4px 0 18px; padding:0; color:var(--body); font-size:14px; flex:1; }
.pack ul li { display:flex; gap:9px; align-items:flex-start; margin:9px 0; }
.pack ul li .ico svg { width:16px; height:16px; color:var(--accent-ink); flex-shrink:0; margin-top:3px; }
.pack .btn { width:100%; justify-content:center; }
.pricing-note { text-align:center; color:var(--muted); font-size:13px; margin-top:18px; }
.addon { display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 26px; }
.addon .ap { font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink); white-space:nowrap; }
@media (max-width:820px){ .pricing { grid-template-columns:1fr; } }

/* Social proof : raccourcir le texte sur mobile */
@media (max-width:600px){ .sp-pre { display:none; } }

/* Bande « Ils nous font confiance » (logos clients) */
.trust-logos { padding:34px 0 4px; }
.tl-label { text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.tl-row { display:flex; gap:42px; align-items:center; justify-content:center; flex-wrap:wrap; }
.tl-row img { height:40px; width:auto; opacity:.82; }

/* Logos CMS dans les cartes avatar */
.avatar-cms { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line); }
.avatar-cms img { height:26px; width:auto; opacity:.85; }

/* CTA final : actions (WhatsApp + contact) */
.final-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.finalcta .btn.ghost { color:#fff; border-color:rgba(255,255,255,.22); }
.finalcta .btn.ghost:hover { background:rgba(255,255,255,.08); }

/* WooCommerce : glyphe avec marge interne → on l'agrandit pour équilibrer */
.avatar-cms img[alt="woocommerce" i] { height:52px; margin:-13px 0; }
.marquee-track img[alt="WooCommerce" i] { height:52px; }

/* ===== Écran d'analyse (overlay) ===== */
.scan-overlay { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  background:rgba(15,17,21,.97); opacity:0; visibility:hidden; transition:opacity .25s; padding:20px; }
.scan-overlay.on { opacity:1; visibility:visible; }
.so-card { width:100%; max-width:460px; text-align:center; color:#e9eaec; }
.so-logo { width:52px; height:52px; border-radius:13px; background:#191c22; display:grid; place-items:center; margin:0 auto 18px; }
.so-logo svg { width:28px; height:28px; }
.so-title { color:#fff; font-size:20px; margin:0 0 6px; }
.so-sub { color:#aeb2ba; font-size:13.5px; margin:0 0 22px; }
.so-bar { height:7px; border-radius:20px; background:#2b2f37; overflow:hidden; margin-bottom:22px; }
.so-bar > i { display:block; height:100%; width:0; background:var(--volt); border-radius:20px;
  transition:width 9.5s cubic-bezier(.2,.6,.1,1); }
.so-steps { list-style:none; margin:0; padding:0; text-align:left; display:grid; gap:11px; }
.so-step { display:flex; align-items:center; gap:11px; color:#7d828b; font-size:14px; transition:color .2s; }
.so-step::before { content:""; width:18px; height:18px; border-radius:50%; border:2px solid #3a3f47;
  flex-shrink:0; transition:.2s; }
.so-step.active { color:#e9eaec; } .so-step.active::before { border-color:var(--volt); }
.so-step.done { color:#e9eaec; } .so-step.done::before { background:var(--volt); border-color:var(--volt); }
@media (prefers-reduced-motion:reduce){ .so-bar > i { transition:width .3s; } }

/* ===== Chiffres clés (risque) ===== */
@property --rp { syntax:"<number>"; inherits:false; initial-value:0; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.stat { text-align:center; }
.ring { --rp:0; width:162px; height:162px; border-radius:50%; margin:0 auto 20px; position:relative;
  background:conic-gradient(var(--volt) calc(var(--rp)*1%), var(--line) 0); display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(212,245,60,0); transition:box-shadow .4s ease; }
#risques.in .ring { animation:ringfill 1.5s cubic-bezier(.22,1,.36,1) forwards; box-shadow:0 10px 34px -14px rgba(212,245,60,.7); }
@keyframes ringfill { to { --rp:var(--p); } }
.ring::before { content:""; position:absolute; inset:13px; border-radius:50%; background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line); }
.snum { position:relative; font-family:var(--display); font-weight:700; font-size:34px; color:var(--ink);
  line-height:1; letter-spacing:-1px; }
.slab { color:var(--body); font-size:14.5px; display:block; max-width:250px; margin:0 auto; }
/* Pastille de tendance */
.spark { margin-top:16px; display:flex; justify-content:center; }
.trend { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px;
  font-weight:600; color:var(--ink); text-transform:uppercase; letter-spacing:.04em;
  background:var(--volt-soft); border:1px solid var(--volt); border-radius:999px; padding:4px 11px; }
.trend svg { width:14px; height:14px; color:var(--ink); }
.stats-src { color:var(--faint); font-size:12.5px; font-family:var(--mono); margin-top:18px; }
@media (prefers-reduced-motion: reduce){
  .ring { --rp:var(--p); }
  #risques.in .ring { animation:none; }
}
@media (max-width:760px){ .stats { grid-template-columns:1fr; } }