/* NewleadGen — landing page styles.
   Hand-written, no build step: wrangler serves public/ straight from the edge. */

:root {
  --ink:        #0a1020;
  --ink-soft:   #1d2740;
  --muted:      #5a6683;
  --line:       #e4e8f2;
  --bg:         #ffffff;
  --bg-soft:    #f6f8fd;
  --brand:      #1b5cff;
  --brand-dark: #0f3fc4;
  --brand-soft: #eaf0ff;
  --accent:     #ffb020;
  --dark:       #080f21;
  --dark-2:     #101a35;
  --radius:     14px;
  --wrap:       1140px;
  --font-head:  "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:  "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo .word {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; }
h2 { font-size: clamp(27px, 3.4vw, 40px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.lead  { font-size: clamp(17px, 1.8vw, 20px); color: var(--muted); }
.clean { list-style: none; margin: 0; padding: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.on-dark .eyebrow, .dark-section .eyebrow { color: #8fb0ff; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  box-shadow: 0 8px 22px rgba(27, 92, 255, .28);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(27, 92, 255, .36); }
.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.btn-light { background: #fff; color: var(--ink); }
.btn-ghost-light { border-color: rgba(255,255,255,.3); color: #fff; background: transparent; }
.btn-ghost-light:hover { background: rgba(255,255,255,.08); }
.btn-lg { padding: 17px 32px; font-size: 16.5px; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 70px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo .word { font-size: 20px; font-weight: 800; }
.logo .word b { color: var(--brand); font-weight: 800; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--brand); text-decoration: none; }
.nav .btn { margin-left: 8px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* Below ~560px the logo and the full CTA label no longer fit the 70px row.
   .btn is nowrap and flex items default to min-width:auto, so the button
   cannot shrink — left alone it is pushed off the right edge of the screen.
   Shorten the label, tighten the row, and let the wordmark ellipsise so the
   button is never the thing that overflows. */
.nav-cta .cta-short { display: none; }
@media (max-width: 560px) {
  .nav { gap: 12px; }
  .logo { min-width: 0; }
  .logo svg { flex: 0 0 auto; }
  .logo .word {
    font-size: 18px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav .btn { padding: 11px 15px; font-size: 14px; }
  .nav-cta .cta-full { display: none; }
  .nav-cta .cta-short { display: inline; }
}
/* 320px (iPhone SE 1st gen) needs the 40px page gutter cut as well, or the
   header row is still ~21px too wide for the viewport. */
@media (max-width: 380px) {
  .wrap { width: min(100% - 24px, var(--wrap)); }
  .logo svg { width: 28px; height: 28px; }
  .logo .word { font-size: 15.5px; }
  .nav .btn { padding: 10px; font-size: 13px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: radial-gradient(1100px 520px at 70% -10%, #17306e 0%, transparent 60%), var(--dark);
  color: #fff;
  padding-block: clamp(56px, 8vw, 96px) clamp(60px, 8vw, 100px);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 .hl {
  background: linear-gradient(120deg, #6c9bff, #46e0c4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { color: #b8c4de; max-width: 56ch; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  font-size: 13.5px; font-weight: 600; color: #cfdaf3; margin-bottom: 22px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #46e0c4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: #9fb0d0; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points svg { flex: none; }

/* Hero card */
.hero-card {
  background: linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 26px;
  backdrop-filter: blur(6px);
}
.hero-card h3 { color: #fff; font-size: 16px; margin-bottom: 4px; }
.hero-card .cap { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #8fa3c8; font-weight: 700; }
.hero-card ul { margin: 18px 0 0; }
.hero-card li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1);
}
.hero-card li:first-child { border-top: 0; padding-top: 6px; }
.hero-card .n {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(27,92,255,.25); border: 1px solid rgba(108,155,255,.45);
  color: #a8c2ff; font-size: 13px; font-weight: 800; font-family: var(--font-head);
}
.hero-card .t { color: #e7ecf7; font-size: 15px; font-weight: 600; line-height: 1.4; }
.hero-card .s { color: #92a3c4; font-size: 13.5px; display: block; font-weight: 400; margin-top: 2px; }

/* ── Sections ─────────────────────────────────────────────────────────── */
section { padding-block: clamp(56px, 7vw, 92px); }
.soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.dark-section { background: var(--dark); color: #fff; }
.dark-section h2 { color: #fff; }
.dark-section .lead { color: #b0bcd6; }

.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { margin-bottom: 14px; }

/* Stat strip */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats-strip li { background: #fff; padding: 24px 22px; }
.stats-strip b { display: block; font-family: var(--font-head); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.stats-strip span { font-size: 14px; color: var(--muted); }
/* minmax(0,…) so a cell can never be forced wider than its share by a long
   word: "partenaire" alone is 176px at 28px, and a 2-column cell is under that
   on every phone width, which clipped the text. One column below 560px. */
@media (max-width: 820px) { .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stats-strip li { padding: 18px 20px; }
  .stats-strip b { font-size: 25px; }
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; position: relative;
}
.step .num {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Feature cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: #c9d6f7; box-shadow: 0 10px 30px rgba(10,16,32,.06); }
.card .ico {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Compare table */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.col {
  border-radius: var(--radius); padding: 28px 26px;
  border: 1px solid var(--line); background: #fff;
}
.col.win { border-color: var(--brand); box-shadow: 0 14px 40px rgba(27,92,255,.12); position: relative; }
.col.win .tag {
  position: absolute; top: -12px; left: 26px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; font-family: var(--font-head); letter-spacing: .02em;
}
.col h3 { margin-bottom: 18px; font-size: 17px; }
.col li { display: flex; gap: 11px; padding: 10px 0; font-size: 15.5px; color: var(--ink-soft); align-items: flex-start; }
.col li svg { flex: none; margin-top: 3px; }
.col.lose li { color: var(--muted); }

/* Sector chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
  font-size: 14.5px; color: #d3dcef; font-weight: 500;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (max-width: 960px) { .form-grid { grid-template-columns: 1fr; } }
.form-side h2 { margin-bottom: 14px; }
.form-side .checklist { margin-top: 26px; }
.form-side .checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px;
}
.form-side .checklist li:first-child { border-top: 0; }
.form-side .checklist svg { flex: none; margin-top: 3px; }

.form-panel {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 18px 50px rgba(10,16,32,.07);
}
.form-panel > .cap {
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); font-family: var(--font-head);
}
.form-panel > h3 { margin: 6px 0 22px; font-size: 21px; }

.fieldset-head {
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--brand);
  margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--line);
}
.fieldset-head:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}
.field label span[aria-hidden] { color: var(--brand); }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
  font-family: var(--font-body); font-size: 15.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235a6683' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px; cursor: pointer;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(27,92,255,.14);
}
.field input:user-invalid, .field select:user-invalid {
  border-color: #d93b3b; box-shadow: 0 0 0 3px rgba(217,59,59,.12);
}

.consent { display: flex; gap: 11px; align-items: flex-start; margin: 20px 0 18px; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--brand); cursor: pointer; }
.consent label { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

.form-panel .btn-primary { width: 100%; }
.form-foot { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.form-msg { margin: 14px 0 0; font-size: 14.5px; min-height: 0; }
.form-msg.error { color: #c02626; background: #fdeeee; border: 1px solid #f4c9c9; border-radius: 10px; padding: 11px 14px; }

/* Honeypot: off-screen, never focusable, invisible to humans. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
details summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; font-size: 16.5px; color: var(--ink);
}
details summary::-webkit-details-marker { display: none; }
details summary:hover { color: var(--brand); }
details .chev {
  flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
details[open] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
details p { margin: 0 0 20px; font-size: 15.5px; color: var(--muted); max-width: 70ch; }

/* ── Final CTA ────────────────────────────────────────────────────────── */
.final .box {
  position: relative; overflow: hidden;
  background: radial-gradient(800px 380px at 20% 0%, #1b3c86 0%, transparent 65%), var(--dark);
  border-radius: 22px; padding: clamp(36px, 5vw, 64px); text-align: center; color: #fff;
}
.final h2 { color: #fff; margin-bottom: 14px; }
.final .lead { color: #b8c4de; max-width: 60ch; margin-inline: auto; }
.final .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding-block: 48px 28px; background: var(--bg-soft); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
/* Two columns stop working well before the grid runs out of room: at 620px a
   column is ~274px, and the "Demander des RDV" button alone needs 199px while
   contact@newleadgen.fr needs 164px. Below that they overflow their column, so
   go single-column rather than letting the button hang off the page. */
@media (max-width: 620px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }
.footer nav a { overflow-wrap: anywhere; }
.footer nav { display: flex; flex-direction: column; gap: 9px; }
.footer .col-title { font-family: var(--font-head); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.footer nav a { color: var(--muted); font-size: 14.5px; }
.footer nav a:hover { color: var(--brand); text-decoration: none; }
.footer .tag { font-size: 14.5px; margin-top: 12px; max-width: 34ch; }
.bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px;
}

/* ── Thank-you page ───────────────────────────────────────────────────── */
.thanks { display: grid; place-items: center; min-height: 76vh; padding-block: clamp(48px, 8vw, 100px); text-align: center; }
.thanks .inner { max-width: 620px; }
.thanks .tick {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); margin: 0 auto 24px;
}
.thanks ol { text-align: left; margin: 28px auto 30px; max-width: 460px; padding-left: 0; list-style: none; counter-reset: t; }
.thanks ol li {
  counter-increment: t; position: relative; padding: 12px 0 12px 40px;
  border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink-soft);
}
.thanks ol li:first-child { border-top: 0; }
.thanks ol li::before {
  content: counter(t); position: absolute; left: 0; top: 12px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-head); font-weight: 800; font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}