/* Identité Déclic Frontalier : bleu #185FA5, vert #1D9E75, marine #042C53.
   Contrastes vérifiés (WCAG 2.1 AA) : texte ≥ 4,5:1, bordures de contrôles ≥ 3:1.
   Polices système uniquement : aucune requête vers un service de polices tiers. */
:root {
  --bg:#f6f7fb; --bg-2:#eef1f8; --fg:#141a24; --muted:#525d6b; --card:#fff; --card-2:#f9fafc;
  --accent:#185FA5; --accent-2:#0F6E56; --on-accent:#fff; --accent-soft:#E6F1FB;
  --line:#dfe3ec; --control:#8a96a3; --warn:#8a5a00; --ok:#0b6b3a;
  --blob-1:#85B7EB; --blob-2:#9FE1CB; --blob-3:#B5D4F4;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.08);
  --radius:14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1117; --bg-2:#141924; --fg:#e8ebf1; --muted:#9da8b6; --card:#161b26; --card-2:#1b2130;
    --accent:#85B7EB; --accent-2:#5DCAA5; --on-accent:#0e1117; --accent-soft:#13263f;
    --line:#2a3242; --control:#6b7682; --warn:#e0b050; --ok:#5fd18f;
    --blob-1:#185FA5; --blob-2:#0F6E56; --blob-3:#0C447C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
img, svg { max-width:100%; }
a { color:var(--accent); text-underline-offset:2px; }
h1, h2, h3 { line-height:1.2; letter-spacing:-.01em; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--card); color:var(--fg); padding:8px 12px; border-radius:8px; z-index:100; }
.skip:focus { left:16px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 16px; }

/* En-tête */
.site-header { position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
.site-header .wrap { display:flex; align-items:center; gap:16px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--fg); text-decoration:none; }
.brand img { display:block; }
.brand-name span { font-weight:500; color:var(--muted); }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:20px; }
.site-nav a { color:var(--muted); text-decoration:none; font-size:.95rem; }
.site-nav a:hover { color:var(--fg); }
.site-nav .btn { color:var(--on-accent); }
@media (max-width:720px) { .site-nav a:not(.btn) { display:none; } }

/* Boutons */
button, .btn { font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:10px; border:1px solid var(--control); background:var(--card); color:var(--fg); cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
button:hover, .btn:hover { border-color:var(--accent); }
.btn-primary, button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn-primary:hover, button.primary:hover { transform:translateY(-1px); }
.btn-lg { padding:12px 22px; font-size:1.05rem; border-radius:12px; }
button[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
button:disabled { opacity:.6; cursor:not-allowed; }

/* Héros */
.hero { position:relative; overflow:hidden; padding:72px 0 56px; }
.hero-bg { position:absolute; inset:-20% -10% auto; height:140%; z-index:0; pointer-events:none; }
.blob { position:absolute; width:46vmax; height:46vmax; border-radius:50%; filter:blur(70px); opacity:.55; animation:drift 22s ease-in-out infinite alternate; }
.blob.b1 { background:var(--blob-1); left:-12vmax; top:-14vmax; }
.blob.b2 { background:var(--blob-2); right:-14vmax; top:-6vmax; animation-duration:26s; animation-delay:-6s; }
.blob.b3 { background:var(--blob-3); left:30%; top:18vmax; width:34vmax; height:34vmax; animation-duration:30s; animation-delay:-12s; opacity:.35; }
@keyframes drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(6vmax,4vmax,0) scale(1.12); } }
.hero .wrap { position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
@media (max-width:880px) { .hero .wrap { grid-template-columns:1fr; } .hero { padding-top:48px; } }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); padding:4px 10px; border-radius:999px; }
.hero h1 { font-size:clamp(2rem, 4.6vw, 3.2rem); margin:16px 0 14px; }
.grad { background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lead { font-size:1.15rem; color:var(--muted); margin:0 0 26px; max-width:34em; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.trust { display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:0; list-style:none; color:var(--muted); font-size:.9rem; }
.trust li::before { content:"✓ "; color:var(--ok); font-weight:700; }

/* Visuel 3D léger : carte en perspective qui suit le pointeur */
.scene { perspective:1100px; }
.tilt { position:relative; transform-style:preserve-3d; transform:rotateX(var(--rx, 8deg)) rotateY(var(--ry, -14deg)); transition:transform .25s ease-out; }
.mock { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:18px; transform:translateZ(0); }
.mock-head { display:flex; gap:6px; margin-bottom:14px; }
.mock-head span { width:10px; height:10px; border-radius:50%; background:var(--line); }
.mock h3 { margin:0 0 12px; font-size:1rem; }
.mock-item { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--card-2); font-size:.92rem; }
.mock-item .tick { flex:none; width:20px; height:20px; border-radius:6px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-size:.75rem; font-weight:800; }
.chip { position:absolute; padding:8px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); font-weight:700; font-size:.9rem; }
.chip small { display:block; font-weight:500; color:var(--muted); font-size:.75rem; }
.chip.c1 { top:-18px; right:-10px; transform:translateZ(70px); }
.chip.c2 { bottom:46px; left:-26px; transform:translateZ(110px); }
.chip.c3 { bottom:-16px; right:24px; transform:translateZ(50px); }
@media (max-width:880px) {
  .scene { max-width:520px; width:100%; margin:0 auto; padding:12px 18px 24px; }
  .tilt { --rx:6deg; --ry:-8deg; }
  .chip.c1 { right:0; } .chip.c2 { left:0; bottom:-14px; } .chip.c3 { display:none; }
}

/* Sections */
section { scroll-margin-top:72px; }
.section { padding:72px 0; }
.section.alt { background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-head { max-width:640px; margin:0 0 32px; }
.section-head h2 { font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 10px; }
.section-head p { color:var(--muted); margin:0; font-size:1.05rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.grid-2 { display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.grid-2 .card { margin:0; }
@media (max-width:880px) { .grid-3, .grid-2 { grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:12px; }
.grid-3 .card { margin:0; }
.step-num { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:800; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--on-accent); margin-bottom:12px; }
.card h3 { margin:0 0 6px; font-size:1.08rem; }
.card p { margin:0 0 8px; color:var(--muted); }
.card.link { text-decoration:none; color:inherit; display:block; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card.link:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); }
.card.link .more { color:var(--accent); font-weight:600; }

/* Assistant */
.assistant-shell { max-width:720px; }
.progress { height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin:0 0 14px; }
.progress span { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .35s ease; }
.q { font-weight:700; font-size:1.15rem; margin:0 0 14px; }
.q:focus { outline:none; }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.step { color:var(--muted); font-size:.85rem; margin-bottom:6px; }
.fade-in { animation:fade .3s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.rule h3 { margin:0 0 6px; font-size:1.02rem; }
.rule p { margin:0 0 8px; color:var(--fg); }
.badge { display:inline-block; font-size:.75rem; font-weight:600; color:var(--warn); border:1px solid var(--warn); border-radius:6px; padding:1px 6px; margin-bottom:8px; }
.badge.ok { color:var(--ok); border-color:var(--ok); }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.upsell { border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); background:linear-gradient(135deg, var(--accent-soft), var(--card)); }
.disc, .notice { color:var(--muted); font-size:.88rem; }
.notice { border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--fg); padding:12px 14px; border-radius:0 10px 10px 0; margin:16px 0; }

/* Tarifs */
.billing { display:inline-flex; padding:4px; border-radius:12px; background:var(--card); border:1px solid var(--line); margin-bottom:24px; }
.billing button { border:0; background:transparent; padding:8px 14px; }
.billing button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent); box-shadow:none; }
.save { font-size:.75rem; font-weight:700; color:var(--ok); margin-left:4px; }
.billing button[aria-pressed="true"] .save { color:inherit; }
.plans { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; }
@media (max-width:880px) { .plans { grid-template-columns:1fr; } }
.plan { position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; }
.plan.highlight { border:2px solid var(--accent); box-shadow:var(--shadow); }
.plan .tag { position:absolute; top:-12px; left:24px; background:var(--accent); color:var(--on-accent); font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.plan h3 { margin:0; font-size:1.15rem; }
.plan .pitch { color:var(--muted); margin:4px 0 16px; }
.price { font-size:2.2rem; font-weight:800; letter-spacing:-.02em; }
.price small { font-size:.95rem; font-weight:500; color:var(--muted); }
.plan ul { list-style:none; padding:0; margin:16px 0 22px; flex:1; }
.plan li { padding:5px 0 5px 26px; position:relative; }
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.price-note { color:var(--muted); font-size:.9rem; margin-top:16px; }

/* Formulaire de pré-inscription */
.waitlist { max-width:560px; }
form label { display:block; margin:10px 0 4px; font-weight:600; }
form label.check { font-weight:400; display:flex; gap:10px; align-items:flex-start; }
form label.check input { margin-top:5px; }
input[type="email"], select { font:inherit; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--control); background:var(--card); color:var(--fg); }
.form-status { margin-top:12px; font-weight:600; }

/* FAQ */
.faq details { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:600; }
.faq details p { color:var(--muted); margin:10px 0 0; }

/* Articles et pages de contenu */
.prose { max-width:720px; margin:0 auto; padding:32px 16px 40px; }
.prose h1 { font-size:clamp(1.7rem, 4vw, 2.4rem); margin:8px 0 10px; }
.prose h2 { margin-top:32px; font-size:1.35rem; }
.prose li { margin-bottom:6px; }
.prose .lead { color:var(--muted); font-size:1.1rem; }
.meta { color:var(--muted); font-size:.9rem; }
.crumbs { font-size:.9rem; color:var(--muted); }
.unconfirmed { border:1px solid var(--warn); border-radius:12px; padding:12px 16px; margin:16px 0; }
.unconfirmed strong:first-child { color:var(--warn); }
.cta-box { margin:36px 0 8px; padding:22px; border-radius:16px; background:linear-gradient(135deg, var(--accent-soft), var(--card)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cta-box h2 { margin:0 0 6px; font-size:1.2rem; }
.sources li { word-break:break-word; }

/* Pied de page */
footer { border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; padding:28px 0 48px; }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; }
footer p { margin:0; max-width:520px; }
footer nav { display:flex; flex-wrap:wrap; gap:16px; }

/* Apparition au défilement : uniquement si le JS est actif */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .tilt { transform:none; }
  .js .reveal { opacity:1; transform:none; }
}
@media print {
  .site-header, .hero, .section:not(#assistant), button, .actions, .skip, footer nav, .upsell { display:none !important; }
  body { background:#fff; color:#000; }
}
.brand, .site-nav .btn { white-space:nowrap; }
@media (max-width:420px) { .hide-sm { display:none; } .site-nav .btn { padding:7px 12px; } }