:root {
    /* Brand palette */
    --navy-950: #0A1626;
    --navy-900: #0F1F33;
    --navy-800: #152C46;
    --navy-700: #1E3A5F;   /* primary */
    --navy-600: #2A4870;
    --navy-500: #3A5A85;
    --accent: #2563EB;      /* electric blue accent */
    --accent-hover: #1D4ED8;
    --accent-soft: #E0EBFF;
    --accent-glow: rgba(37, 99, 235, 0.22);

    --ink-900: #0B1220;
    --ink-700: #2A3550;
    --ink-500: #5C6985;
    --ink-400: #8492AE;
    --ink-300: #B7C0D4;

    --bg: #FFFFFF;
    --bg-soft: #F6F8FC;
    --bg-tint: #EEF2F9;
    --line: #E4E9F2;
    --line-strong: #D2DAE8;

    --green: #15A36A;
    --amber: #C77A00;
    --red:   #C73B3B;

    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;

    --shadow-sm: 0 1px 2px rgba(15,31,51,0.04), 0 1px 1px rgba(15,31,51,0.03);
    --shadow:    0 1px 2px rgba(15,31,51,0.05), 0 8px 24px -8px rgba(15,31,51,0.08);
    --shadow-lg: 0 4px 8px rgba(15,31,51,0.06), 0 24px 60px -12px rgba(15,31,51,0.18);

    --maxw: 1200px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
    font-size: 16px;
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }
  h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; font-weight: 700; }
  p { margin: 0; }

  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ---------- NAV ---------- */
  .nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--navy-900);
    font-size: 18px;
  }
  .logo-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    display: grid; place-items: center;
    position: relative;
    box-shadow: 0 2px 6px rgba(15,31,51,0.18), inset 0 -1px 0 rgba(255,255,255,0.08);
  }
  .logo-mark::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 4px;
    background:
      linear-gradient(135deg, var(--accent) 0%, transparent 55%),
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.7), transparent 60%);
    opacity: 0.95;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
  }
  .nav-links a {
    font-size: 14px;
    color: var(--ink-700);
    font-weight: 500;
  }
  .nav-links a:hover { color: var(--accent); }
  .nav-links a.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    background: var(--navy-700);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--navy-800);
  }
  @media (max-width: 760px) {
    .nav-links a:not(.nav-cta) { display: none; }
  }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(1100px 600px at 80% -10%, rgba(37,99,235,0.18), transparent 60%),
      radial-gradient(700px 500px at 10% 30%, rgba(37,99,235,0.10), transparent 60%),
      linear-gradient(180deg, #0B1B30 0%, #0A1626 100%);
    color: #fff;
    padding: 90px 0 80px;
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
  }
  .hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .hero { padding: 64px 0 56px; }
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37,99,235,0.14);
    border: 1px solid rgba(37,99,235,0.32);
    color: #BFD3FF;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }

  .hero h1 {
    font-size: clamp(38px, 5.2vw, 60px);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 22px 0 18px;
    font-weight: 800;
  }
  .hero h1 .accent {
    background: linear-gradient(180deg, #7CA6FF 0%, #2563EB 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-sub {
    font-size: 18px;
    color: #B7C5DD;
    max-width: 540px;
    line-height: 1.55;
  }
  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    margin-top: 36px;
    color: #8EA0BF;
    font-size: 13.5px;
  }
  .hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .hero-meta-item svg { color: var(--accent); }

  /* ---------- DASHBOARD MOCKUP ---------- */
  .dash-wrap {
    position: relative;
  }
  .dash-wrap::before {
    content: "";
    position: absolute;
    inset: -8% -4% -10% -4%;
    background: radial-gradient(ellipse at 60% 50%, var(--accent-glow), transparent 70%);
    filter: blur(20px);
    z-index: -1;
  }
  .dash {
    background: #FBFCFE;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.6),
      0 0 0 1px rgba(255,255,255,0.05);
    display: grid;
    grid-template-columns: 168px 1fr;
    min-height: 440px;
    font-size: 12px;
    color: var(--ink-900);
    transform: perspective(1400px) rotateY(-2deg) rotateX(2deg);
    transform-origin: center;
  }
  .dash-side {
    background: var(--navy-900);
    color: #B7C5DD;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dash-side .brand {
    display: flex; align-items: center; gap: 8px;
    color: #fff;
    font-weight: 700;
    padding: 8px 8px 14px;
    font-size: 13px;
  }
  .dash-side .brand-mark {
    width: 22px; height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--accent), #7CA6FF);
  }
  .dash-side .section-label {
    color: #5B6E8E;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 8px 6px;
    font-weight: 600;
  }
  .dash-side .item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: #B7C5DD;
  }
  .dash-side .item.active {
    background: rgba(37,99,235,0.18);
    color: #fff;
    border-left: 2px solid var(--accent);
    padding-left: 6px;
  }
  .dash-side .item svg { width: 14px; height: 14px; opacity: 0.9; }

  .dash-main { display: flex; flex-direction: column; min-width: 0; }
  .dash-topbar {
    height: 44px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: #fff;
  }
  .dash-topbar .crumbs { color: var(--ink-500); font-size: 12px; }
  .dash-topbar .crumbs strong { color: var(--ink-900); font-weight: 600; }
  .dash-topbar .actions { display: flex; align-items: center; gap: 8px; }
  .dash-btn {
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .dash-btn.ghost {
    background: var(--bg-soft);
    color: var(--ink-700);
    border: 1px solid var(--line);
  }

  .dash-content { padding: 16px; flex: 1; background: #FBFCFE; min-width: 0; }
  .dash-h { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; }

  .dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  .stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
  }
  .stat .label { font-size: 10.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;}
  .stat .value { font-size: 18px; font-weight: 700; margin-top: 6px; letter-spacing: -0.01em;}
  .stat .delta { font-size: 11px; margin-top: 4px; color: var(--green); font-weight: 600;}
  .stat .delta.neg { color: var(--red); }
  .stat .spark { margin-top: 6px; }

  .dash-table {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .dash-table .row {
    display: grid;
    grid-template-columns: 1.2fr 1.6fr 0.9fr 1fr 0.6fr;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
  }
  .dash-table .row:last-child { border-bottom: 0; }
  .dash-table .head {
    background: var(--bg-soft);
    color: var(--ink-500);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .dash-table .num { color: var(--ink-900); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11px;}
  .dash-table .client { color: var(--ink-900); font-weight: 500;}
  .dash-table .client small { display: block; color: var(--ink-500); font-weight: 400; font-size: 10.5px;}
  .dash-table .amount { font-family: 'JetBrains Mono', monospace; font-weight: 600; text-align: right; font-size: 11px;}
  .pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
  }
  .pill::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
  }
  .pill.paid { background: #E7F6EE; color: #157A4C; }
  .pill.sent { background: #E0EBFF; color: #1F4FBF; }
  .pill.draft { background: #EEF1F7; color: #4F5B73; }
  .pill.over  { background: #FBE7E7; color: #A82A2A; }

  .row-actions { display: flex; justify-content: flex-end; gap: 6px; color: var(--ink-400);}
  .row-actions svg { width: 14px; height: 14px;}

  /* ---------- SECTIONS ---------- */
  section { padding: 96px 0; }
  @media (max-width: 760px) { section { padding: 64px 0; } }

  .section-head { text-align: center; max-width: 720px; margin: 0 auto 56px;}
  .section-head .eyebrow-light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .section-head h2 {
    font-size: clamp(28px, 3.6vw, 40px);
    margin: 18px 0 14px;
    color: var(--navy-900);
  }
  .section-head p {
    color: var(--ink-500);
    font-size: 17px;
    line-height: 1.6;
  }

  /* Feature grid */
  .feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  @media (max-width: 980px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .feat-grid { grid-template-columns: 1fr; } }

  .feat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
    position: relative;
  }
  .feat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--line-strong);
  }
  .feat-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    display: grid; place-items: center;
    margin-bottom: 18px;
  }
  .feat-icon svg { width: 22px; height: 22px; }
  .feat-card h3 {
    font-size: 17px;
    color: var(--navy-900);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .feat-card p {
    color: var(--ink-500);
    font-size: 14.5px;
    line-height: 1.55;
  }

  /* Spotlight */
  .spotlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .spotlight.reverse { direction: rtl; }
  .spotlight.reverse > * { direction: ltr; }
  @media (max-width: 900px) {
    .spotlight { grid-template-columns: 1fr; gap: 40px;}
    .spotlight.reverse { direction: ltr; }
    .spotlight .illus-wrap { order: 2; }
  }

  .spot-eyebrow {
    color: var(--accent-hover);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }
  .spotlight h2 {
    font-size: clamp(28px, 3.4vw, 38px);
    color: var(--navy-900);
    margin-bottom: 18px;
  }
  .spotlight > div > p.lede {
    font-size: 17px;
    color: var(--ink-500);
    line-height: 1.65;
    margin-bottom: 24px;
  }
  .bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
  .bullets li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 15px;
    color: var(--ink-700);
    line-height: 1.55;
  }
  .bullets li .check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    display: grid; place-items: center;
    margin-top: 1px;
  }
  .bullets li .check svg { width: 12px; height: 12px; stroke-width: 3; }

  .badge-conform {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #1D4ED8);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    margin-top: 28px;
    box-shadow: 0 6px 18px -6px var(--accent-glow);
  }
  .badge-conform svg { width: 14px; height: 14px; }

  /* Illustration containers */
  .illus {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, #FCFDFF 0%, #F2F6FC 100%);
    box-shadow: var(--shadow);
    padding: 22px;
    aspect-ratio: 5 / 4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Debours mock */
  .receipt {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 12px;
  }
  .receipt-img {
    width: 80px; aspect-ratio: 3/4;
    border-radius: 6px;
    background: repeating-linear-gradient(0deg, #fff 0 14px, #F2F6FC 14px 16px);
    border: 1px dashed var(--line-strong);
    position: relative;
    flex-shrink: 0;
  }
  .receipt-img::before {
    content: "REÇU";
    position: absolute; top: 8px; left: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-400);
  }
  .receipt-img::after {
    content: ""; position: absolute; bottom: 10px; right: 6px;
    width: 26px; height: 16px;
    background: var(--ink-300);
    clip-path: polygon(0 60%, 30% 60%, 30% 0, 70% 0, 70% 60%, 100% 60%, 50% 100%);
    opacity: 0.4;
  }
  .receipt-body { flex: 1; min-width: 0; }
  .receipt-body .row { display: flex; justify-content: space-between; font-size: 12px; padding: 3px 0; color: var(--ink-700);}
  .receipt-body .row span:first-child { color: var(--ink-500);}
  .receipt-body .row.bold { font-weight: 700; color: var(--navy-900); border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 7px; font-size: 13px;}
  .receipt-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #E0EBFF, #C7DAFF);
    color: var(--accent-hover);
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.04em;
  }
  .receipt-tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
  }

  .progress {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
  }
  .progress-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--ink-500); margin-bottom: 8px;
  }
  .progress-head strong { color: var(--navy-900); font-size: 13px;}
  .progress-bar {
    height: 8px; background: var(--bg-tint);
    border-radius: 999px; overflow: hidden;
  }
  .progress-bar-fill {
    height: 100%; width: 65%;
    background: linear-gradient(90deg, var(--accent) 0%, #7CA6FF 100%);
    border-radius: 999px;
  }
  .progress-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-500); margin-top: 8px; font-family: 'JetBrains Mono', monospace;}
  .progress-foot strong { color: var(--accent-hover); font-weight: 700; }

  /* Comptabilité mock — file rows */
  .file-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-sm);
  }
  .file-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    display: grid; place-items: center;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  .file-card.csv .file-icon { background: #E7F6EE; color: #157A4C;}
  .file-card.bal .file-icon { background: #FFF4DB; color: #8A5800;}
  .file-meta { flex: 1; min-width: 0;}
  .file-meta .title { font-weight: 600; font-size: 13.5px; color: var(--navy-900);}
  .file-meta .sub { font-size: 11.5px; color: var(--ink-500); font-family: 'JetBrains Mono', monospace;}
  .file-card .dl { color: var(--ink-400); }
  .file-card .dl svg { width: 18px; height: 18px;}

  /* E-facturation mock */
  .spot-efact {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 900px) { .spot-efact { grid-template-columns: 1fr;} }
  .pdp-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
  }
  .pdp-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
  }
  .pdp-node {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--bg-soft);
    text-align: center;
  }
  .pdp-node.center {
    background: linear-gradient(135deg, var(--accent), #1D4ED8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 24px -8px var(--accent-glow);
  }
  .pdp-node .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; font-weight: 600;}
  .pdp-node .name { font-weight: 700; font-size: 15px; margin-top: 4px; letter-spacing: -0.01em;}
  .pdp-arrow { color: var(--accent); width: 24px; height: 12px;}
  .pdp-targets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;}
  .pdp-target {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    display: flex; align-items: center; gap: 8px;
    background: #fff;
  }
  .pdp-target .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);}

  /* 3-col docs row */
  .docs-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 900px) { .docs-grid { grid-template-columns: 1fr; gap: 16px;} }

  .doc-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
  }
  .doc-card h3 {
    font-size: 18px;
    color: var(--navy-900);
    margin: 18px 0 8px;
    letter-spacing: -0.01em;
  }
  .doc-card p {
    color: var(--ink-500);
    font-size: 14.5px;
    line-height: 1.55;
  }
  .doc-visual {
    height: 110px;
    border-radius: 10px;
    background: linear-gradient(180deg, #F6F8FC, #ECF1FA);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
  }

  .lang-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; justify-content: center; }
  .lang-chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy-900);
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-sm);
  }
  .lang-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  .template-strip {
    display: flex; gap: 8px; padding: 14px;
    width: 100%; justify-content: center;
  }
  .template-thumb {
    width: 38px; height: 64px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
  }
  .template-thumb::before {
    content: "";
    position: absolute; top: 6px; left: 6px; right: 6px;
    height: 3px; background: var(--ink-300); border-radius: 2px;
  }
  .template-thumb::after {
    content: "";
    position: absolute; top: 14px; left: 6px; right: 6px; bottom: 10px;
    background:
      linear-gradient(180deg, var(--ink-300) 0 1px, transparent 1px) 0 0/100% 5px;
    opacity: 0.7;
  }
  .template-thumb.t2::before { background: var(--accent); }
  .template-thumb.t3 { border-top: 6px solid var(--accent); }
  .template-thumb.t3::before { top: 12px; }
  .template-thumb.t4::before { background: var(--navy-900); }

  .num-mock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-900);
    background: #fff;
    border: 1px solid var(--line);
    padding: 8px 14px;
    border-radius: 8px;
    letter-spacing: 0.04em;
    box-shadow: var(--shadow-sm);
  }
  .num-mock .accent-num { color: var(--accent); }
  .num-mock .lock {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--green);
    background: #E7F6EE;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    font-family: 'Inter';
  }

  /* Security section */
  .security {
    background:
      radial-gradient(1100px 600px at 80% 100%, rgba(37,99,235,0.18), transparent 60%),
      radial-gradient(700px 500px at 5% 0%, rgba(37,99,235,0.10), transparent 60%),
      linear-gradient(180deg, #0F1F33 0%, #0A1626 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .security::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    pointer-events: none;
  }
  .security-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
  }
  @media (max-width: 980px) {
    .security-inner { grid-template-columns: 1fr; gap: 40px; }
  }
  .security h2 { font-size: clamp(28px, 3.6vw, 42px); color: #fff; margin-bottom: 16px;}
  .security p.lede { color: #B7C5DD; font-size: 17px; max-width: 480px; line-height: 1.6;}

  .score {
    display: flex; align-items: center; gap: 18px;
    margin-top: 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 22px;
    max-width: 360px;
    backdrop-filter: blur(6px);
  }
  .score-num {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(180deg, #fff, #BFD3FF);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .score-meta { font-size: 13px; color: #B7C5DD; line-height: 1.45;}
  .score-meta strong { color: #fff; }

  .badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 560px) { .badges { grid-template-columns: 1fr; } }
  .sec-badge {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    backdrop-filter: blur(6px);
  }
  .sec-badge .ico {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 8px;
    background: rgba(37,99,235,0.18);
    color: #7CA6FF;
    display: grid; place-items: center;
    border: 1px solid rgba(37,99,235,0.28);
  }
  .sec-badge .ico svg { width: 18px; height: 18px;}
  .sec-badge .t { font-weight: 600; font-size: 14px; color: #fff; letter-spacing: -0.01em;}
  .sec-badge .s { font-size: 12px; color: #8EA0BF; margin-top: 3px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em;}

  /* Footer */
  .footer {
    background: #0A1626;
    color: #8EA0BF;
    padding: 56px 0 32px;
  }
  .footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  @media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } }

  .footer .logo { color: #fff;}
  .footer-tag {
    color: #8EA0BF;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 14px;
    max-width: 260px;
  }
  .footer-col h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #B7C5DD;
    margin-bottom: 14px;
    font-weight: 600;
  }
  .footer-col a {
    display: block;
    font-size: 14px;
    color: #8EA0BF;
    padding: 4px 0;
  }
  .footer-col a:hover { color: #fff; }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-flag {
    display: inline-flex; align-items: center; gap: 6px;
    color: #B7C5DD;
    font-size: 12.5px;
  }
  .footer-flag .fr {
    width: 18px; height: 12px; border-radius: 2px;
    background: linear-gradient(90deg, #0055A4 0 33%, #fff 33% 66%, #EF4135 66%);
    display: inline-block;
  }

  /* ── SCREENSHOT FRAMES ─────────────────────────────────────── */
  .sf {
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: var(--bg-soft);
    position: relative;
  }
  .sf-bar {
    height: 32px;
    background: #F0F2F5;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    flex-shrink: 0;
  }
  .sf-bar span {
    width: 10px; height: 10px; border-radius: 50%; display: block;
  }
  .sf-bar .r { background: #FF5F57; }
  .sf-bar .y { background: #FEBC2E; }
  .sf-bar .g { background: #28C840; }
  .sf img {
    width: 100%;
    display: block;
    border-radius: 0;
  }
  /* gif animé — pause au hover si l'utilisateur le souhaite */
  .sf img[src$=".gif"] { cursor: default; }

  /* Pair de screenshots côte à côte */
  .sf-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  @media (max-width: 860px) { .sf-pair { grid-template-columns: 1fr; } }

  /* Screenshot pleine largeur */
  .sf.sf-wide { width: 100%; max-width: 680px; }

  /* Section Factures */
  .spot-invoices {
    padding: 80px 0;
    background: var(--bg);
  }
  .spot-invoices .container { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 64px; align-items: center; }
  @media (max-width: 900px) { .spot-invoices .container { grid-template-columns: 1fr; } }

/* ── Correctifs inline styles → classes ─────────────────────── */
.logo { gap: 0 !important; }
.logo-img { height: 44px; width: auto; display: block; }
.logo-img-footer { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); }
.nav-login { font-size: 14px; font-weight: 500; color: var(--ink-700); }
.section-bg-soft { background: var(--bg-soft); }
.strong-navy { color: var(--navy-900); }
.doc-visual-gif { height: auto !important; padding: 0 !important; overflow: hidden !important; }
.doc-visual-gif img { width: 100%; display: block; border-radius: 10px; }
.score-sub { font-size: 18px; color: #B7C5DD; font-weight: 600; letter-spacing: 0; }


/* ── Demo page ─────────────────────────────────────────────── */
.demo-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .demo-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px 32px 80px;
    gap: 80px;
    align-items: start;
  }
  @media (max-width: 860px) {
    .demo-main { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px 60px; }
  }

  /* Colonne gauche */
  .demo-pitch { position: sticky; top: 100px; }
  .demo-pitch .eyebrow-light {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 20px;
  }
  .demo-pitch h1 {
    font-size: clamp(28px, 3.5vw, 42px);
    color: var(--navy-900);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }
  .demo-pitch p {
    color: var(--ink-500);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
  }
  .demo-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .demo-bullets li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14.5px; color: var(--ink-700); line-height: 1.45;
  }
  .demo-bullets li .check {
    flex-shrink: 0; width: 20px; height: 20px;
    background: var(--accent-soft); border-radius: 50%;
    display: grid; place-items: center;
    color: var(--accent); margin-top: 1px;
  }
  .demo-bullets li .check svg { width: 11px; height: 11px; stroke-width: 2.5; }

  /* Colonne droite — formulaire */
  .demo-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
  }
  @media (max-width: 500px) { .demo-card { padding: 24px 20px; } }

  .demo-card h2 {
    font-size: 20px;
    color: var(--navy-900);
    margin-bottom: 28px;
    letter-spacing: -0.02em;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  @media (max-width: 500px) { .form-row { grid-template-columns: 1fr; } }

  .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .form-group label {
    font-size: 13px; font-weight: 600; color: var(--ink-700);
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-family: inherit;
    font-size: 14.5px;
    color: var(--navy-900);
    background: var(--bg-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
  }
  .form-group textarea { resize: vertical; min-height: 100px; }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    background: #fff;
  }
  .form-group input::placeholder,
  .form-group textarea::placeholder { color: var(--ink-400); }

  .form-hint { font-size: 12px; color: var(--ink-400); margin-top: 2px; }

  .btn-submit {
    width: 100%;
    padding: 13px 24px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .1s;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: -0.01em;
  }
  .btn-submit:hover { background: var(--accent-hover); }
  .btn-submit:active { transform: scale(0.99); }
  .btn-submit:disabled { background: var(--ink-400); cursor: not-allowed; }

  .form-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
    gap: 16px;
  }
  .form-success .success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: #E7F6EE;
    display: grid; place-items: center;
    color: #15A36A;
  }
  .form-success .success-icon svg { width: 28px; height: 28px; stroke-width: 2.5; }
  .form-success h3 { font-size: 20px; color: var(--navy-900); margin: 0; }
  .form-success p { color: var(--ink-500); font-size: 15px; margin: 0; line-height: 1.55; }

  .form-error {
    display: none;
    background: #FFF1F1;
    border: 1px solid #FFC9C9;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13.5px;
    color: #C73B3B;
    margin-top: 12px;
  }
.demo-footer {
  border-top: 1px solid var(--line);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-400);
}
.link-accent { color: var(--accent); }

/* ── Bientot page ───────────────────────────────────────────── */
.bientot-page { min-height: 100vh; display: flex; flex-direction: column; }
.bientot-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 20px; }
.bientot-box { text-align: center; max-width: 480px; }
.bientot-icon { width: 64px; height: 64px; background: #EEF2F9; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 24px; color: var(--accent); }
.bientot-title { font-size: 28px; color: var(--navy-900); letter-spacing: -0.03em; margin: 0 0 12px; }
.bientot-desc { color: var(--ink-500); font-size: 16px; line-height: 1.6; margin: 0 0 32px; }
.bientot-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bientot-btn-primary { padding: 11px 20px; background: var(--navy-700); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.bientot-btn-secondary { padding: 11px 20px; background: var(--bg-tint); color: var(--navy-700); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* ── Animations scroll ────────────────────────────────────────────────────── */
.anim-ready {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.anim-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero : copie depuis la gauche, visuel depuis la droite */
.hero-copy.anim-ready  { transform: translateX(-30px); }
.hero-visual.anim-ready { transform: translateX(30px); }
.hero-copy.is-visible,
.hero-visual.is-visible { transform: translateX(0); }

/* Spotlights : alternés gauche/droite */
.spotlight.anim-ready        { transform: translateY(36px); }
.spotlight.reverse.anim-ready { transform: translateY(36px); }

/* ── Zoom débours ─────────────────────────────────────────────────────────── */
.sf-zoomable {
  cursor: zoom-in;
  overflow: hidden;
}
.sf-zoomable img {
  transition: transform 0.25s ease;
  will-change: transform;
}
.sf-zoomable.sf-zoom-active {
  cursor: zoom-out;
}
.sf-zoomable img.sf-zoomed {
  transform: scale(1.55) !important;
  cursor: zoom-out;
}

/* ── Débours — layout vertical pleine largeur ─────────────────────────────── */
.debours-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 40px;
}
@media (max-width: 860px) {
  .debours-header { grid-template-columns: 1fr; gap: 24px; }
}
.debours-bullets { margin: 0; }
.debours-sf {
  width: 100%;
  max-width: 100%;
}
.debours-sf img {
  width: 100%;
  display: block;
}

/* ── Hero animations ──────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.hero .eyebrow {
  animation: fadeRight 0.5s ease both;
  animation-delay: 0.05s;
}
.hero h1 {
  animation: fadeUp 0.6s ease both;
  animation-delay: 0.15s;
}
.hero .hero-sub {
  animation: fadeUp 0.6s ease both;
  animation-delay: 0.28s;
}
.hero .hero-meta {
  animation: fadeUp 0.5s ease both;
  animation-delay: 0.4s;
}
.hero .hero-cta {
  animation: fadeUp 0.5s ease both;
  animation-delay: 0.52s;
}
.hero-visual {
  animation: fadeLeft 0.7s ease both;
  animation-delay: 0.2s;
}

/* Supprime les classes anim-ready/is-visible pour hero (déjà géré par CSS) */
.hero .hero-copy.anim-ready,
.hero .hero-visual.anim-ready {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE TARIFS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero */
.tarifs-hero {
  background: var(--navy-900);
  padding: 100px 0 72px;
  text-align: center;
}
.tarifs-hero-inner { max-width: 680px; margin: 0 auto; }
.tarifs-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 16px 0 18px;
  animation: fadeUp 0.6s ease both 0.1s;
}
.tarifs-sub {
  color: #94A3B8;
  font-size: 18px;
  line-height: 1.6;
  animation: fadeUp 0.6s ease both 0.25s;
}
.tarifs-hero .eyebrow-light { animation: fadeUp 0.5s ease both 0s; }

/* Grille plans */
.tarifs-plans-section { padding: 72px 0 40px; }
.tarifs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .tarifs-grid { grid-template-columns: 1fr; } }

/* Carte plan */
.plan-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
.plan-card:hover {
  box-shadow: 0 12px 40px rgba(15,30,60,0.12);
  transform: translateY(-4px);
}
.plan-card-pro {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(37,99,235,0.13);
}
.plan-popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 99px;
}
.plan-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.plan-badge-free { background: #F1F5F9; color: #64748B; }
.plan-badge-pro  { background: #EFF6FF; color: var(--accent); }
.plan-badge-unl  { background: #F5F3FF; color: #7C3AED; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-amount { font-size: 40px; font-weight: 800; color: var(--navy-900); letter-spacing: -0.03em; }
.plan-period { font-size: 14px; color: var(--ink-400); }
.plan-desc { font-size: 14px; color: var(--ink-400); line-height: 1.5; margin-top: 6px; }
.plan-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-600); }
.plan-feat-off { color: var(--ink-300) !important; }
.pcheck {
  width: 18px; height: 18px; flex-shrink: 0;
  background: #ECFDF5; border-radius: 50%;
  display: grid; place-items: center; margin-top: 1px;
}
.pcheck svg { width: 10px; height: 10px; stroke: #10B981; stroke-width: 3; }
.pcheck-off { background: #F8FAFC; }
.pcheck-off svg { stroke: #CBD5E1; }

.plan-btn {
  display: block;
  text-align: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.plan-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }
.plan-btn-pro { background: var(--accent); color: #fff; }
.plan-btn-pro:hover { background: #1D4ED8; }
.plan-btn-outline { background: transparent; color: var(--navy-900); border: 1.5px solid var(--line-strong); }
.plan-btn-outline:hover { background: var(--bg-tint); }
.plan-btn-light { border-color: rgba(255,255,255,0.3); color: #fff; }
.plan-btn-light:hover { background: rgba(255,255,255,0.1); }

.tarifs-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-300);
  margin-top: 32px;
}

/* FAQ */
.tarifs-faq-section { padding: 72px 0; background: var(--bg-soft); }
.tarifs-faq-inner { max-width: 960px; margin: 0 auto; }
.tarifs-faq-title {
  text-align: center;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -0.03em;
  margin-bottom: 48px;
}
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}
.faq-item h3 { font-size: 15px; font-weight: 700; color: var(--navy-900); margin-bottom: 8px; }
.faq-item p  { font-size: 14px; color: var(--ink-500); line-height: 1.6; margin: 0; }

/* CTA final */
.tarifs-cta-section { background: var(--navy-900); padding: 80px 0; text-align: center; }
.tarifs-cta-inner { max-width: 560px; margin: 0 auto; }
.tarifs-cta-section h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.tarifs-cta-section p { color: #94A3B8; font-size: 16px; margin-bottom: 32px; }
.tarifs-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Nav active */
.nav-active { color: var(--accent) !important; font-weight: 600; }