/* WPMalter website UI kit — component styles built on the design tokens.
   Tokens come from ../../colors_and_type.css (semantic --wpm-* vars). */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--wpm-bg);
  color: var(--wpm-text-primary);
  font-family: var(--wpm-font-body);
  -webkit-font-smoothing: antialiased;
  transition: background var(--wpm-dur-base) var(--wpm-ease), color var(--wpm-dur-base) var(--wpm-ease);
}
a { color: inherit; text-decoration: none; }
.wpm-container { max-width: var(--wpm-container); margin: 0 auto; padding: 0 24px; }
.wpm-narrow { max-width: var(--wpm-container-narrow); margin: 0 auto; }
[data-lucide] { width: 1em; height: 1em; }
svg.lucide { width: 1em; height: 1em; vertical-align: -0.125em; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--wpm-font-body); font-weight:600; font-size:15px; line-height:1; padding:13px 22px; border-radius:var(--wpm-radius-sm); border:1px solid transparent; cursor:pointer; transition:var(--wpm-transition); white-space:nowrap; }
.btn-primary { background:var(--wpm-brand); color:#fff; }
.btn-primary:hover { background:var(--wpm-brand-hover); transform:translateY(-1px); box-shadow:var(--wpm-glow-brand); }
.btn-primary:active { background:var(--wpm-brand-active); transform:translateY(0); }
.btn-secondary { background:transparent; color:var(--wpm-text-primary); border-color:var(--wpm-border-strong); }
.btn-secondary:hover { border-color:var(--wpm-text-secondary); background:var(--wpm-surface-2); }
.btn-ghost { background:transparent; color:var(--wpm-brand-text); padding-left:8px; padding-right:8px; }
.btn-ghost:hover { color:var(--wpm-link-hover); }
.btn-peach { background:var(--wpm-accent-warm); color:#3a1404; }
.btn-peach:hover { filter:brightness(0.95); transform:translateY(-1px); box-shadow:var(--wpm-glow-peach); }

/* Warm-accent A/B: flip the whole accent from Peach (default) to Amber */
[data-accent="amber"] {
  --wpm-accent-warm: var(--wpm-amber-400);
  --wpm-accent-text: var(--wpm-amber-700);
  --wpm-accent-bg: rgba(245,166,35,0.16);
  --wpm-glow-peach: 0 8px 30px rgba(245,166,35,0.32);
}
[data-theme="dark"][data-accent="amber"] {
  --wpm-accent-text: #f0b54e;
  --wpm-glow-peach: 0 8px 40px rgba(245,166,35,0.38);
}
.btn-lg { padding:16px 30px; font-size:16px; }
.btn-block { width:100%; justify-content:center; }

/* ---------- pills ---------- */
.pill { display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:var(--wpm-radius-pill); font-size:13px; font-weight:600; }
.pill-brand { background:var(--wpm-brand-surface); color:var(--wpm-brand-text); }
.pill-peach { background:var(--wpm-accent-bg); color:var(--wpm-accent-text); }
.pill-success { background:var(--wpm-success-bg); color:var(--wpm-success-text); }
.pill-info { background:var(--wpm-info-bg); color:var(--wpm-info-text); }
.pill-dot { width:7px; height:7px; border-radius:50%; background:var(--wpm-success-500); }

/* ============================================================================
   HEADER / NAV
   Tokens (spec → semantic): ink-0=bg · ink-1=surface-1 · ink-2=surface-2
   ============================================================================ */
.nav { position:sticky; top:0; z-index:90; backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); background:color-mix(in srgb, var(--wpm-bg) 78%, transparent); border-bottom:1px solid transparent; transition:border-color var(--wpm-dur-base) var(--wpm-ease), background var(--wpm-dur-base) var(--wpm-ease); }
.nav.scrolled { border-bottom-color:var(--wpm-border-subtle); background:color-mix(in srgb, var(--wpm-bg) 86%, transparent); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px; }

/* brand */
.brand-mark { display:flex; align-items:center; gap:11px; font-family:var(--wpm-font-display); font-weight:700; font-size:20px; letter-spacing:-0.02em; color:var(--wpm-text-primary); flex-shrink:0; }
.brand-logo { height:26px; width:auto; display:block; }
.brand-logo-light { display:none; }
[data-theme="light"] .brand-logo-dark { display:none; }
[data-theme="light"] .brand-logo-light { display:block; }
.brand-glyph { width:32px; height:32px; border-radius:var(--wpm-radius-sm); background:var(--wpm-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:17px; letter-spacing:-0.04em; }
.brand-word b { color:var(--wpm-brand-400); }

/* nav center cluster */
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-item { position:relative; }
.nav-link { display:inline-flex; align-items:center; gap:7px; font-family:var(--wpm-font-body); font-size:14px; font-weight:500; color:var(--wpm-text-secondary); padding:9px 14px; border-radius:var(--wpm-radius-sm); background:none; border:none; cursor:pointer; transition:color var(--wpm-dur-fast) var(--wpm-ease); white-space:nowrap; }
.nav-link:hover, .nav-item.open > .nav-link { color:var(--wpm-text-primary); }
.nav-link .chev { display:inline-flex; align-items:center; font-size:14px; opacity:.65; transition:transform var(--wpm-dur-base) var(--wpm-ease); }
.nav-item.open > .nav-link .chev { transform:rotate(180deg); }
/* Le Déclic — flat, slightly emphasised, with brand dot */
.nav-link.is-declic { color:var(--wpm-text-primary); font-weight:600; }
.nav-link.is-declic:hover { color:var(--wpm-brand-300); }
.nav-link.is-declic .dot { width:6px; height:6px; border-radius:50%; background:var(--wpm-brand-400); box-shadow:0 0 0 4px var(--wpm-brand-surface); }

/* dropdown panel */
.nav-dropdown { position:absolute; top:calc(100% + 9px); left:0; min-width:332px; background:var(--wpm-surface-1); border:1px solid var(--wpm-border-subtle); border-radius:var(--wpm-radius-md); box-shadow:var(--wpm-shadow-lg); padding:8px; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity 150ms var(--wpm-ease), transform 150ms var(--wpm-ease); z-index:100; }
.nav-item.open > .nav-dropdown { opacity:1; transform:translateY(0); pointer-events:auto; }
.nav-dd-item { display:block; padding:10px 12px; border-radius:var(--wpm-radius-sm); transition:background var(--wpm-dur-fast) var(--wpm-ease); }
.nav-dd-item:hover { background:var(--wpm-surface-2); }
.nav-dd-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.nav-dd-title { font-family:var(--wpm-font-display); font-size:14px; font-weight:600; color:var(--wpm-text-primary); display:inline-flex; align-items:center; gap:7px; }
.nav-dd-title .ext { display:inline-flex; font-size:13px; color:var(--wpm-text-muted); }
.nav-dd-price { font-family:var(--wpm-font-mono); font-size:12px; font-weight:500; color:var(--wpm-brand-300); white-space:nowrap; }
.nav-dd-desc { font-size:12.5px; line-height:1.45; color:var(--wpm-text-muted); margin-top:3px; }

/* nav right */
.nav-right { display:flex; align-items:center; gap:12px; }
.theme-toggle { width:38px; height:38px; border-radius:var(--wpm-radius-sm); border:1px solid var(--wpm-border); background:var(--wpm-surface-1); color:var(--wpm-text-secondary); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; transition:var(--wpm-transition); flex-shrink:0; }
.theme-toggle:hover { color:var(--wpm-text-primary); border-color:var(--wpm-border-strong); }

/* burger (mobile) */
.nav-burger { display:none; width:42px; height:42px; border-radius:var(--wpm-radius-sm); border:1px solid var(--wpm-border); background:var(--wpm-surface-1); color:var(--wpm-text-primary); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; }
.nav-burger:hover { border-color:var(--wpm-border-strong); }

/* mobile slide-in menu */
.nav-scrim { position:fixed; inset:0; background:rgba(11,10,24,.55); backdrop-filter:blur(3px); z-index:110; opacity:0; pointer-events:none; transition:opacity var(--wpm-dur-base) var(--wpm-ease); }
.nav-scrim.open { opacity:1; pointer-events:auto; }
.nav-mobile { position:fixed; top:0; right:0; bottom:0; width:min(400px,88vw); background:var(--wpm-surface-1); border-left:1px solid var(--wpm-border); box-shadow:var(--wpm-shadow-xl); z-index:120; transform:translateX(100%); transition:transform var(--wpm-dur-slow) var(--wpm-ease); display:flex; flex-direction:column; }
.nav-mobile.open { transform:translateX(0); }
.nav-mobile-top { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--wpm-border-subtle); }
.nav-mobile-close { width:38px; height:38px; border-radius:var(--wpm-radius-sm); border:1px solid var(--wpm-border); background:none; color:var(--wpm-text-secondary); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-mobile-body { flex:1; overflow-y:auto; padding:12px 14px; }
.m-flat { display:flex; align-items:center; gap:9px; padding:14px 12px; font-family:var(--wpm-font-display); font-size:17px; font-weight:600; color:var(--wpm-text-primary); border-bottom:1px solid var(--wpm-border-subtle); }
.m-flat .dot { width:6px; height:6px; border-radius:50%; background:var(--wpm-brand-400); box-shadow:0 0 0 4px var(--wpm-brand-surface); }
.m-acc { border-bottom:1px solid var(--wpm-border-subtle); }
.m-acc-trigger { width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:14px 12px; font-family:var(--wpm-font-display); font-size:17px; font-weight:600; color:var(--wpm-text-primary); }
.m-acc-trigger .chev { display:inline-flex; font-size:18px; color:var(--wpm-text-muted); transition:transform var(--wpm-dur-base) var(--wpm-ease); }
.m-acc-item .t .ext { display:inline-flex; font-size:12px; color:var(--wpm-text-muted); }
.m-acc.open .m-acc-trigger .chev { transform:rotate(180deg); }
.m-acc-panel { overflow:hidden; max-height:0; transition:max-height var(--wpm-dur-slow) var(--wpm-ease); }
.m-acc-item { display:block; padding:11px 12px 11px 14px; }
.m-acc-item .t { font-size:14px; font-weight:600; color:var(--wpm-text-primary); display:flex; align-items:center; gap:7px; }
.m-acc-item .d { font-size:12.5px; color:var(--wpm-text-muted); margin-top:2px; }
.nav-mobile-foot { padding:18px 20px; border-top:1px solid var(--wpm-border-subtle); display:flex; flex-direction:column; gap:12px; }
.nav-mobile-foot .theme-row { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--wpm-text-secondary); }

/* ---------- sections ---------- */
.section { padding-block:var(--wpm-section-y); position:relative; }
.section-head { text-align:center; max-width:680px; margin:0 auto 56px; }
.section-head .wpm-overline { color:var(--wpm-brand-text); margin-bottom:14px; }
.eyebrow { color:var(--wpm-brand-text); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- hero ---------- */
.hero { position:relative; overflow:hidden; padding-top:80px; padding-bottom:96px; }
.hero-halo { position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero-halo::before { content:""; position:absolute; width:760px; height:760px; left:50%; top:-340px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(83,58,253,0.45), transparent 62%); filter:blur(110px); opacity:.9; }
.hero-inner { position:relative; z-index:1; text-align:center; }
.hero h1 { font-family:var(--wpm-font-display); font-weight:700; font-size:clamp(40px,6vw,72px); line-height:1.04; letter-spacing:-0.04em; margin:22px auto 20px; max-width:880px; }
.hero h1 .grad { background:linear-gradient(120deg,var(--wpm-brand-300),var(--wpm-brand-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lede { font-size:clamp(17px,2vw,20px); line-height:1.6; color:var(--wpm-text-secondary); max-width:620px; margin:0 auto 32px; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-trust { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:28px; }

/* ---------- proof bar ---------- */
.proof-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:36px; border-radius:var(--wpm-radius-lg); background:var(--wpm-surface-1); border:1px solid var(--wpm-border); box-shadow:var(--wpm-shadow-md); }
.proof-stat { text-align:center; }
.proof-stat .num { font-family:var(--wpm-font-display); font-weight:700; font-size:48px; line-height:1; letter-spacing:-0.04em; background:linear-gradient(135deg,var(--wpm-brand-300),var(--wpm-brand-500)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.proof-stat .lbl { font-size:13px; color:var(--wpm-text-muted); margin-top:8px; }

/* ---------- proof ticker (full-width infinite marquee) ---------- */
.proof-ticker { width:100%; overflow:hidden; border-top:1px solid var(--wpm-border-subtle); border-bottom:1px solid var(--wpm-border-subtle);
  background:color-mix(in srgb, var(--wpm-surface-1) 70%, transparent); padding:13px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display:flex; width:max-content; animation:ticker-scroll 34s linear infinite; }
.proof-ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-run { display:flex; flex-shrink:0; }
.ticker-item { display:inline-flex; align-items:center; gap:13px; padding:0 30px; white-space:nowrap;
  font-family:var(--wpm-font-display); font-weight:600; font-size:14.5px; letter-spacing:-0.005em; color:var(--wpm-text-secondary); }
.ticker-dot { width:5px; height:5px; border-radius:50%; background:var(--wpm-brand); flex-shrink:0; }
@keyframes ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation:none; } }

/* ---------- method ---------- */
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.method-card { position:relative; padding:32px 28px; border-radius:var(--wpm-radius-lg); background:var(--wpm-surface-1); border:1px solid var(--wpm-border); overflow:hidden; transition:var(--wpm-transition); }
.method-card:hover { transform:var(--wpm-lift); box-shadow:var(--wpm-shadow-lg); border-color:var(--wpm-border-strong); }
.method-num { font-family:var(--wpm-font-display); font-weight:700; font-size:96px; line-height:.8; letter-spacing:-0.05em; background:linear-gradient(135deg,var(--wpm-brand-400),transparent); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.55; position:absolute; top:6px; right:18px; }
.method-card h3 { font-family:var(--wpm-font-display); font-size:22px; letter-spacing:-0.015em; margin:0 0 10px; }
.method-card p { font-size:14px; line-height:1.65; color:var(--wpm-text-secondary); margin:0; }
.method-ico { width:44px; height:44px; border-radius:var(--wpm-radius-sm); background:var(--wpm-brand-surface); color:var(--wpm-brand-text); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:22px; }

/* ---------- pricing ---------- */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card { display:flex; flex-direction:column; padding:30px; border-radius:var(--wpm-radius-lg); background:var(--wpm-surface-1); border:1px solid var(--wpm-border); transition:var(--wpm-transition); }
.price-card:hover { transform:var(--wpm-lift); box-shadow:var(--wpm-shadow-lg); }
.price-card.featured { border-color:var(--wpm-brand); box-shadow:var(--wpm-glow-brand); position:relative; }
.price-card.featured::after { content:"Le plus choisi"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--wpm-brand); color:#fff; font-size:12px; font-weight:600; padding:5px 14px; border-radius:var(--wpm-radius-pill); white-space:nowrap; }
.price-card h3 { font-family:var(--wpm-font-display); font-size:21px; letter-spacing:-0.015em; margin:0 0 6px; }
.price-card .desc { font-size:13px; color:var(--wpm-text-muted); min-height:38px; margin-bottom:18px; }
.price-amt { font-family:var(--wpm-font-display); font-weight:700; font-size:44px; letter-spacing:-0.03em; }
.price-amt small { font-size:15px; font-weight:500; color:var(--wpm-text-muted); }
.price-feats { list-style:none; padding:0; margin:22px 0; display:flex; flex-direction:column; gap:12px; flex:1; }
.price-feats li { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--wpm-text-secondary); }
.price-feats .check { color:var(--wpm-success-text); flex-shrink:0; margin-top:1px; }

/* ---------- testimonials ---------- */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.testi-card { padding:26px; border-radius:var(--wpm-radius-lg); background:var(--wpm-surface-1); border:1px solid var(--wpm-border); display:flex; flex-direction:column; gap:16px; }
.stars { color:var(--wpm-peach-400); font-size:15px; letter-spacing:2px; }
.testi-card p { font-size:15px; line-height:1.6; color:var(--wpm-text-primary); margin:0; }
.testi-who { display:flex; align-items:center; gap:12px; margin-top:auto; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--wpm-brand-surface); color:var(--wpm-brand-text); display:flex; align-items:center; justify-content:center; font-weight:600; font-family:var(--wpm-font-display); }
.testi-who .name { font-weight:600; font-size:14px; }
.testi-who .role { font-size:12px; color:var(--wpm-text-muted); }

/* ---------- lead magnet ---------- */
.lead { position:relative; overflow:hidden; border-radius:var(--wpm-radius-lg); border:1px solid var(--wpm-border); background:var(--wpm-surface-1); padding:56px 48px; text-align:center; }
.lead::before { content:""; position:absolute; width:600px; height:600px; left:50%; bottom:-460px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,138,101,0.28), transparent 60%); filter:blur(110px); }
.lead-inner { position:relative; z-index:1; }
.lead h2 { font-family:var(--wpm-font-display); font-size:clamp(28px,4vw,40px); letter-spacing:-0.025em; margin:14px 0 12px; }
.lead form { display:flex; gap:10px; max-width:460px; margin:26px auto 0; }
.input { flex:1; background:var(--wpm-surface-2); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-sm); padding:13px 15px; color:var(--wpm-text-primary); font-family:var(--wpm-font-body); font-size:15px; transition:var(--wpm-transition); }
.input::placeholder { color:var(--wpm-text-muted); }
.input:focus { outline:none; border-color:var(--wpm-brand); box-shadow:var(--wpm-focus-ring); }
.lead .ok { color:var(--wpm-success-text); font-weight:600; margin-top:20px; display:flex; align-items:center; gap:8px; justify-content:center; }

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer { border-top:1px solid var(--wpm-border-subtle); padding-block:72px 28px; margin-top:var(--wpm-section-y); }
.footer-top { display:grid; grid-template-columns:minmax(230px,1.1fr) minmax(0,1.9fr) minmax(250px,300px); gap:56px; }

/* zone 1 — brand */
.footer-brand .brand-mark { font-size:24px; }
.footer-brand .brand-logo { height:30px; }
.footer-tag { font-family:var(--wpm-font-body); font-size:15px; line-height:1.55; color:var(--wpm-text-secondary); margin:18px 0 18px; max-width:280px; }
.footer-proof { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-family:var(--wpm-font-mono); font-size:12px; color:var(--wpm-text-muted); }
.footer-proof .sep { opacity:.5; }

/* zone 2 — nav columns */
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.footer-col h5 { font-family:var(--wpm-font-body); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--wpm-text-muted); margin:0 0 16px; }
.footer-col a { display:block; font-size:14px; color:var(--wpm-text-secondary); margin-bottom:11px; transition:color var(--wpm-dur-fast) var(--wpm-ease); width:fit-content; }
.footer-col a:hover { color:var(--wpm-text-primary); }

/* zone 3 — latest lead-magnet card */
.footer-resource { background:var(--wpm-surface-1); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-md); padding:18px; }
.footer-resource .eyebrow { display:block; font-size:11px; margin-bottom:10px; }
.footer-resource-row { display:flex; gap:13px; align-items:center; }
.footer-resource-cover { width:60px; height:60px; border-radius:var(--wpm-radius-sm); flex-shrink:0; border:1px solid var(--wpm-border); background-color:var(--wpm-surface-2); background-image:repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--wpm-brand-400) 22%, transparent) 7px 8px); display:flex; align-items:center; justify-content:center; color:var(--wpm-brand-300); }
.footer-resource-cover svg { width:22px; height:22px; }
.footer-resource-meta .t { font-family:var(--wpm-font-display); font-size:14.5px; font-weight:600; line-height:1.25; color:var(--wpm-text-primary); }
.footer-resource-meta .d { font-size:12px; line-height:1.45; color:var(--wpm-text-muted); margin-top:3px; }
.footer-resource-cta { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-size:13px; font-weight:600; color:var(--wpm-brand-300); }
.footer-resource-cta:hover { color:var(--wpm-brand-200); }
.footer-resource-cta svg { width:14px; height:14px; }

/* bottom bar */
.footer-bottom { margin-top:52px; padding-top:24px; border-top:1px solid var(--wpm-border-subtle); display:flex; justify-content:space-between; align-items:center; gap:18px 28px; flex-wrap:wrap; }
.footer-legal { display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; font-size:13px; color:var(--wpm-text-muted); }
.footer-legal .copy { color:var(--wpm-text-secondary); }
.footer-legal a { color:var(--wpm-text-muted); transition:color var(--wpm-dur-fast) var(--wpm-ease); }
.footer-legal a:hover { color:var(--wpm-text-secondary); }
.footer-socials { display:flex; gap:10px; }
.social-link { width:38px; height:38px; border-radius:var(--wpm-radius-sm); border:1px solid var(--wpm-border); display:flex; align-items:center; justify-content:center; color:var(--wpm-text-secondary); transition:var(--wpm-transition); }
.social-link svg { width:18px; height:18px; }
.social-link:hover { color:var(--wpm-brand-400); border-color:var(--wpm-brand-400); transform:translateY(-2px); }
.social-malt { font-family:var(--wpm-font-display); font-weight:700; font-size:15px; letter-spacing:-0.04em; }

/* ---------- modal ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(11,10,24,.62); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; animation:fade var(--wpm-dur-base) var(--wpm-ease); }
.modal { width:100%; max-width:440px; background:var(--wpm-surface-1); border:1px solid var(--wpm-border); border-radius:var(--wpm-radius-lg); padding:32px; box-shadow:var(--wpm-shadow-xl); animation:pop var(--wpm-dur-slow) var(--wpm-ease); }
.modal h3 { font-family:var(--wpm-font-display); font-size:24px; letter-spacing:-0.02em; margin:0 0 8px; }
.modal p { font-size:14px; color:var(--wpm-text-secondary); line-height:1.6; margin:0 0 22px; }
.modal label { display:block; font-size:13px; font-weight:500; margin-bottom:7px; color:var(--wpm-text-secondary); }
.modal .input { width:100%; margin-bottom:16px; }
.modal-close { float:right; background:none; border:none; color:var(--wpm-text-muted); cursor:pointer; font-size:20px; line-height:1; }
@keyframes fade { from { opacity:0; } }
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } }

/* ---------- hero CTA secondary + eyebrow ---------- */
.hero .eyebrow-pill { font-size:13px; }

/* ---------- prose / problem section ---------- */
.prose { max-width:720px; margin:0 auto; text-align:center; }
.prose .eyebrow { display:block; margin-bottom:14px; }
.prose h2 { font-family:var(--wpm-font-display); font-size:clamp(26px,3.6vw,38px); line-height:1.18; letter-spacing:-0.025em; margin:0 0 28px; }
.prose-body { text-align:left; max-width:620px; margin:0 auto; }
.prose-body p { font-size:17px; line-height:1.75; color:var(--wpm-text-secondary); margin:0 0 18px; }
.inline-link { color:var(--wpm-brand-text); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.inline-link:hover { color:var(--wpm-link-hover); }

/* ---------- system / piliers ---------- */
.system-intro { max-width:780px; margin:0 auto 52px; text-align:center; }
.system-intro h2 { font-family:var(--wpm-font-display); font-size:clamp(26px,3.6vw,38px); line-height:1.2; letter-spacing:-0.025em; margin:14px 0 16px; }
.system-intro .sub { font-size:17px; color:var(--wpm-text-secondary); }
.piliers { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.pilier { position:relative; padding:30px; border-radius:var(--wpm-radius-lg); background:var(--wpm-surface-1); border:1px solid var(--wpm-border); transition:var(--wpm-transition); display:flex; flex-direction:column; }
.pilier:hover { transform:var(--wpm-lift); box-shadow:var(--wpm-shadow-lg); border-color:var(--wpm-border-strong); }
.pilier.featured { border-color:var(--wpm-brand); box-shadow:var(--wpm-glow-brand); }
.pilier-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--wpm-font-mono); font-size:12px; color:var(--wpm-brand-text); margin-bottom:16px; }
.pilier-tag .n { width:26px; height:26px; border-radius:var(--wpm-radius-sm); background:var(--wpm-brand-surface); display:flex; align-items:center; justify-content:center; font-weight:600; }
.pilier.featured .pilier-tag .n { background:var(--wpm-brand); color:#fff; }
.pilier h3 { font-family:var(--wpm-font-display); font-size:20px; letter-spacing:-0.015em; margin:0 0 10px; }
.pilier p { font-size:14px; line-height:1.65; color:var(--wpm-text-secondary); margin:0 0 20px; }
.pilier-out { margin-top:auto; padding-top:16px; border-top:1px solid var(--wpm-border-subtle); display:flex; gap:9px; align-items:flex-start; font-size:14px; font-weight:600; color:var(--wpm-text-primary); }
.pilier-out .arrow { color:var(--wpm-brand-text); flex-shrink:0; }
.ai-chip { position:absolute; top:24px; right:24px; }

/* ---------- about ---------- */
.about-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; }
.about-photo { position:relative; display:block; width:100%; height:520px; border-radius:var(--wpm-radius-lg); overflow:hidden; background:var(--wpm-surface-1); border:1px solid var(--wpm-border); }
.about-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.about-photo-tag { position:absolute; left:14px; bottom:14px; z-index:1; white-space:nowrap; font-family:var(--wpm-font-mono); font-size:11px; color:#fff; background:rgba(11,10,24,.55); backdrop-filter:blur(6px); padding:6px 11px; border-radius:var(--wpm-radius-pill); border:1px solid rgba(255,255,255,.14); }
.about-photo-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.about-photo-ico { width:84px; height:84px; border-radius:50%; background:var(--wpm-brand-surface); color:var(--wpm-brand-text); display:flex; align-items:center; justify-content:center; font-size:38px; }
.about-photo-cap { font-family:var(--wpm-font-mono); font-size:12px; color:var(--wpm-text-muted); text-align:center; }
.about-text h2 { font-family:var(--wpm-font-display); font-size:clamp(28px,4vw,40px); letter-spacing:-0.025em; margin:14px 0 22px; }
.about-text p { font-size:16px; line-height:1.75; color:var(--wpm-text-secondary); margin:0 0 18px; }
.about-text p strong { color:var(--wpm-text-primary); font-weight:600; }
.about-signature { font-family:var(--wpm-font-display); font-size:17px; color:var(--wpm-brand-text); font-weight:600; }

/* ---------- testimonial expand ---------- */
.testi-card.tall { grid-column:span 2; }
.testi-more { background:none; border:none; color:var(--wpm-brand-text); font-weight:600; font-size:13px; cursor:pointer; padding:0; font-family:var(--wpm-font-body); align-self:flex-start; }
.testi-more:hover { color:var(--wpm-link-hover); }

/* ---------- three doors ---------- */
.doors { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.door { display:flex; flex-direction:column; padding:30px; border-radius:var(--wpm-radius-lg); background:var(--wpm-surface-1); border:1px solid var(--wpm-border); transition:var(--wpm-transition); }
.door:hover { transform:var(--wpm-lift); box-shadow:var(--wpm-shadow-lg); }
.door.featured { border-color:var(--wpm-brand); box-shadow:var(--wpm-glow-brand); position:relative; }
.door.featured::after { content:"Le plus impactant"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--wpm-brand); color:#fff; font-size:12px; font-weight:600; padding:5px 14px; border-radius:var(--wpm-radius-pill); white-space:nowrap; }
.door .kicker { font-family:var(--wpm-font-mono); font-size:12px; color:var(--wpm-text-muted); margin-bottom:14px; }
.door h3 { font-family:var(--wpm-font-display); font-size:20px; letter-spacing:-0.015em; margin:0 0 10px; }
.door .door-desc { font-size:14px; line-height:1.6; color:var(--wpm-text-secondary); margin:0 0 18px; flex:1; }
.door-price { font-family:var(--wpm-font-display); font-weight:700; font-size:34px; letter-spacing:-0.03em; margin-bottom:4px; }
.door-price small { font-size:14px; font-weight:500; color:var(--wpm-text-muted); }
.door-note { font-size:12px; color:var(--wpm-text-muted); margin-bottom:18px; }
.door-list { list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.door-list li { font-size:13px; line-height:1.5; color:var(--wpm-text-secondary); }
.door-list li b { color:var(--wpm-text-primary); font-weight:600; display:block; }

/* ---------- FAQ ---------- */
.faq { max-width:740px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--wpm-border); }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--wpm-font-display); font-size:18px; font-weight:600; letter-spacing:-0.01em; color:var(--wpm-text-primary); }
.faq-q .chev { color:var(--wpm-brand-text); transition:transform var(--wpm-dur-base) var(--wpm-ease); flex-shrink:0; }
.faq-q.open .chev { transform:rotate(180deg); }
.faq-a { overflow:hidden; max-height:0; transition:max-height var(--wpm-dur-slow) var(--wpm-ease); }
.faq-a-inner { padding:0 4px 22px; font-size:15px; line-height:1.7; color:var(--wpm-text-secondary); }

/* ---------- final CTA ---------- */
.cta-final { position:relative; overflow:hidden; text-align:center; border-radius:var(--wpm-radius-lg); border:1px solid var(--wpm-border); background:var(--wpm-surface-1); padding:64px 40px; }
.cta-final::before { content:""; position:absolute; width:720px; height:720px; left:50%; top:-360px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle, rgba(83,58,253,0.40), transparent 62%); filter:blur(110px); }
.cta-final-inner { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.cta-final h2 { font-family:var(--wpm-font-display); font-size:clamp(30px,4.4vw,46px); letter-spacing:-0.03em; margin:16px 0 14px; line-height:1.1; }
.cta-final p { font-size:16px; line-height:1.7; color:var(--wpm-text-secondary); margin:0 0 28px; }

@media (max-width:980px){
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .footer-resource { grid-column:1 / -1; max-width:420px; }
}
@media (max-width:900px){
  .nav-links, .nav-right .theme-toggle, .nav-right .btn { display:none; }
  .nav-burger { display:flex; }
}
@media (max-width:880px){
  .piliers, .doors, .about-grid { grid-template-columns:1fr; }
  .about-grid { gap:28px; }
  .testi-card.tall { grid-column:span 1; }
  .proof-bar { grid-template-columns:repeat(2,1fr); gap:32px 16px; }
  .method-grid, .pricing-grid, .testi-grid { grid-template-columns:1fr; }
  .lead form { flex-direction:column; }
}
@media (max-width:640px){
  .footer-top { grid-template-columns:1fr; gap:36px; }
  .footer-nav { gap:28px 24px; }
  .footer-resource { max-width:none; }
  .footer-bottom { flex-direction:column-reverse; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce){ * { animation:none !important; transition:none !important; } }