/* ==========================================================================
   CNX — système de design partagé (landing, inscription, outil)
   Direction retenue le 27/09/2026 : langage visuel de Conversifi (fond blanc,
   Poppins, boutons noirs, composants sobres), avec l'identité CNX en accent :
   le prune, le logo en trois cases, les noms en cases monospace et les scores.
   Polices auto-hébergées (fonts/) : la CSP interdit Google Fonts, et charger
   leur CDN transmettrait l'IP du visiteur, ce qui jure avec la promesse RGPD.
   ========================================================================== */

@font-face{font-family:Poppins;font-weight:300;font-style:normal;font-display:swap;src:url(fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/plexmono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plexmono-600.woff2) format("woff2")}

:root{
  /* Surfaces */
  --bg:#FFFFFF;
  --bg-muted:#FAFAFA;
  --bg-sunken:#F4F4F5;
  /* Encre */
  --ink:#171717;
  --ink-2:#404040;
  --ink-3:#737373;
  --ink-4:#A3A3A3;
  /* Filets */
  --line:#E5E7EB;
  --line-2:#F0F0F0;
  /* Action : le noir, comme la référence */
  --black:#0A0A0A;
  --black-hover:#262626;
  /* Accent CNX : le prune */
  --accent:#3D2A3A;          /* surfaces sombres, en-têtes de maquettes */
  --accent-deep:#2C1F2B;
  --accent-mid:#7A4F73;      /* texte accentué : 6,6:1 sur blanc */
  --accent-wash:rgba(122,79,115,.10);
  --accent-glow:rgba(122,79,115,.18);
  /* Sémantique des scores (inchangée depuis l'origine de CNX) */
  --ok:#187C4E;   --ok-wash:#E7F5EE;
  --mid:#8D661E;  --mid-wash:#F7EEDB;
  --ko:#B83227;   --ko-wash:#FBE9E7;
  /* Typographie */
  --font:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Formes */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,16,16,.05);
  --shadow:0 4px 14px rgba(16,16,16,.06);
  --shadow-lg:0 22px 50px rgba(44,31,43,.14);
  --container:1200px;
  --gutter:clamp(20px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.15;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-mid);outline-offset:3px;border-radius:4px}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Logo : trois cases ---------- */
.logo{display:inline-flex;gap:5px;color:var(--ink)}
.logo span{width:30px;height:30px;display:grid;place-items:center;border:2px solid currentColor;border-radius:6px;font:600 15px/1 var(--mono)}
.logo--sm span{width:24px;height:24px;font-size:12px;border-width:1.5px;border-radius:5px}
.logo--inv{color:#fff}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--r-sm);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--black);color:#fff}
.btn--primary:hover{background:var(--black-hover)}
.btn--secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{border-color:#D4D4D8;background:var(--bg-muted)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--bg-sunken)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#F4F4F5}
.btn--lg{height:56px;padding:0 30px;font-size:18px}
.btn--block{width:100%}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- Pastilles, badges ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:13px;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--accent-mid);box-shadow:0 0 0 4px var(--accent-wash)}
.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-mid)}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap}
.badge--ok{background:var(--ok-wash);color:var(--ok)}
.badge--mid{background:var(--mid-wash);color:var(--mid)}
.badge--ko{background:var(--ko-wash);color:var(--ko)}
.badge--neutral{background:var(--bg-sunken);color:var(--ink-2)}
.badge--accent{background:var(--accent-wash);color:var(--accent-mid)}

/* ---------- Signature CNX : noms en cases, scores ---------- */
.lbox{display:inline-flex;gap:3px}
.lbox b{width:21px;height:24px;display:grid;place-items:center;border:1.5px solid currentColor;border-radius:4px;font:600 12px/1 var(--mono)}
.score{font:600 18px/1 var(--mono);font-variant-numeric:tabular-nums}
.score--ok{color:var(--ok)} .score--mid{color:var(--mid)} .score--ko{color:var(--ko)}

/* ---------- Titres de section ---------- */
.shead{text-align:center;max-width:760px;margin:0 auto 52px}
.shead h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em}
.shead p{margin-top:14px;font-size:18px;color:var(--ink-3)}
.shead .eyebrow{margin-bottom:14px}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section--muted{background:var(--bg-muted);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.section--tight{padding:64px 0}

/* ---------- Cartes ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card--pad{padding:28px}

/* ---------- Surlignage (motif des témoignages de la référence) ---------- */
mark{background:var(--accent-wash);color:var(--accent-mid);padding:1px 4px;border-radius:4px;font-weight:500}

/* ---------- Accordéon FAQ ---------- */
.faq{display:grid;gap:12px;max-width:800px;margin:0 auto}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .15s,box-shadow .15s}
.faq details[open]{border-color:#D4D4D8;box-shadow:var(--shadow)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:16px;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding:0 22px 20px;color:var(--ink-2);font-size:15px;line-height:1.7}

/* ---------- Champs ---------- */
.field{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--ink-2)}
.input,.field input,.field textarea,.field select{width:100%;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:15px;font-weight:400;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field textarea{height:auto;padding:12px 14px;resize:vertical}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent-mid);box-shadow:0 0 0 3px var(--accent-wash)}
.input::placeholder,.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}

/* ---------- Apparition au défilement ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}