/* ============================================================================
   Suvio — Landing page
   100 % tokens charte Suvio. Navy structure · bleu action · orange ponctuel.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --ink-900:#0B2545; --blue-700:#1F4FBF; --blue-600:#2D6CDF; --blue-500:#4F8AE8;
  --blue-200:#BFD3F4; --blue-100:#E8F0FC; --blue-50:#F4F8FE;
  --orange-600:#D9651A; --orange-500:#F07A1F; --orange-300:#F9B783;
  --orange-100:#FDEFE0; --orange-50:#FEF8F1;
  --paper:#FBFBFB; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --line:#EEF1F5; --line-strong:#E2E7EE; --ink-100:#F4F6FA; --ink-200:#E5E9F0;
  --ink-300:#C7CFDB; --ink-500:#7B8699; --ink-700:#3F4A5E;
  --ok:#1B8A5A; --ok-bg:#E6F4EC; --warn:#D97706; --warn-bg:#FDEACB;
  --bad:#C0392B; --bad-bg:#FBE8E5; --info:#1F6FB5; --info-bg:#E5EEF7;
  --font-sans:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(11,37,69,.04),0 1px 0 rgba(11,37,69,.02);
  --shadow-soft:0 1px 2px rgba(11,37,69,.05),0 8px 24px -8px rgba(11,37,69,.12);
  --shadow-pop:0 6px 20px rgba(11,37,69,.08);
  --shadow-lift:0 18px 48px -12px rgba(11,37,69,.18),0 6px 16px -8px rgba(11,37,69,.12);
  --shadow-focus:0 0 0 4px rgba(45,108,223,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1140px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink-900);
  font:400 16px/1.6 var(--font-sans);
  font-feature-settings:'tnum' 1,'ss01' 1,'cv11' 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p { margin:0; text-wrap:pretty; }
a { color:var(--blue-600); text-decoration:none; }
img { display:block; max-width:100%; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.eyebrow {
  font:600 12px/1.3 var(--font-sans); color:var(--blue-600);
  text-transform:uppercase; letter-spacing:.08em;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before { content:''; width:18px; height:1.5px; background:var(--blue-600); }
.eyebrow.warm { color:var(--orange-600); }
.eyebrow.warm::before { background:var(--orange-500); }
.eyebrow.center { justify-content:center; }
.eyebrow.center::before { display:none; }

/* ─── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 15px/1 var(--font-sans); border-radius:var(--r-md);
  padding:15px 22px; border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur,160ms) var(--ease), filter 160ms var(--ease),
             box-shadow 160ms var(--ease), background 160ms var(--ease);
  white-space:nowrap;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--ink-900); color:#fff; }
.btn-primary:hover { filter:brightness(1.12); box-shadow:0 8px 22px -8px rgba(11,37,69,.5); }
.btn-secondary { background:var(--surface); color:var(--ink-900); border-color:var(--line-strong); }
.btn-secondary:hover { border-color:var(--ink-300); background:var(--surface-2); }
.btn-blue { background:var(--blue-600); color:#fff; }
.btn-blue:hover { background:var(--blue-700); box-shadow:0 8px 22px -8px rgba(45,108,223,.6); }
.btn-ghost { background:transparent; color:var(--ink-700); padding:12px 14px; }
.btn-ghost:hover { color:var(--ink-900); }
.btn-lg { padding:17px 28px; font-size:16px; }
.btn:active { transform:scale(.985); }

/* ─── Header ──────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent; transition:border-color 200ms, box-shadow 200ms;
}
.nav::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(251,251,251,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.nav.scrolled { border-color:var(--line); box-shadow:0 1px 0 rgba(11,37,69,.03); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.nav-logo { display:flex; align-items:center; gap:9px; flex-shrink:0; }
.nav-logo img { height:30px; width:auto; max-width:none; flex:none; }
.nav-logo span { font:700 21px/1 var(--font-sans); color:var(--ink-900); letter-spacing:-.01em; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a.navlink {
  font:500 14.5px/1 var(--font-sans); color:var(--ink-700); white-space:nowrap;
  padding:10px 14px; border-radius:var(--r-sm); transition:color 140ms, background 140ms;
}
.nav-links a.navlink:hover { color:var(--ink-900); background:var(--ink-100); }
.nav-cta { display:flex; align-items:center; gap:6px; }
.nav-burger { display:none; }

/* ─── Hero ────────────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; padding:80px 0 96px; }
.hero::before {
  content:''; position:absolute; inset:0 0 auto 0; height:560px; z-index:0;
  background:linear-gradient(180deg, var(--orange-50) 0%, rgba(251,251,251,0) 62%);
  opacity:.7; pointer-events:none;
}
.hero-grid {
  position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:56px; align-items:center;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-pill);
  padding:7px 14px 7px 8px; font:500 13px/1 var(--font-sans); color:var(--ink-700);
  box-shadow:var(--shadow-card); margin-bottom:26px;
}
.hero-pill b { font-weight:600; color:var(--ink-900); }
.hero-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); }
.hero h1 {
  font:700 clamp(38px,5vw,58px)/1.06 var(--font-sans);
  letter-spacing:-.025em; color:var(--ink-900);
}
.hero h1 .accent { color:var(--blue-600); }
.hero-sub {
  font:400 19px/1.55 var(--font-sans); color:var(--ink-700);
  margin-top:22px; max-width:520px;
}
.hero-actions { display:flex; gap:12px; margin-top:34px; flex-wrap:wrap; }
.hero-meta {
  margin-top:26px; display:flex; align-items:center; gap:18px;
  font:400 13.5px/1.4 var(--font-sans); color:var(--ink-500); flex-wrap:wrap;
}
.hero-meta .mi { display:inline-flex; align-items:center; gap:7px; }
.hero-meta svg { width:16px; height:16px; color:var(--ok); }

/* ─── Phone mockup ────────────────────────────────────────────────────── */
.hero-visual { position:relative; display:flex; justify-content:center; }
.phone {
  position:relative; width:300px; background:var(--ink-900); border-radius:42px;
  padding:11px; box-shadow:var(--shadow-lift); z-index:2;
}
.phone-screen {
  background:var(--paper); border-radius:32px; overflow:hidden; height:620px;
  display:flex; flex-direction:column;
}
.float-card {
  position:absolute; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift); padding:16px 18px; z-index:3; width:212px;
}
.float-card.tl { top:54px; left:-46px; }
.float-card.br { bottom:84px; right:-40px; }
.float-card .fc-top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.float-card .fc-ic {
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.float-card .fc-ic svg { width:18px; height:18px; }
.float-card .fc-label { font:600 12px/1.2 var(--font-sans); color:var(--ink-900); }
.float-card .fc-sub { font:400 11px/1.3 var(--font-sans); color:var(--ink-500); margin-top:1px; }
.float-card .fc-stat { font:600 26px/1 var(--font-mono); color:var(--ink-900); letter-spacing:-.02em; }
.float-card .fc-bar { height:6px; border-radius:99px; background:var(--ink-100); margin-top:10px; overflow:hidden; }
.float-card .fc-bar i { display:block; height:100%; border-radius:99px; }

/* mini app screen (Présences) — fidèle à l'app réelle */
.appscr { font-family:var(--font-sans); display:flex; flex-direction:column; height:100%; }
.appscr-hd { padding:16px 15px 4px; }
.appscr-hd .hd-row { display:flex; align-items:flex-start; justify-content:space-between; }
.appscr-hd .t { font:700 20px/1 var(--font-sans); color:var(--ink-900); letter-spacing:-.01em; }
.appscr-hd .cal { width:30px; height:30px; border-radius:9px; background:var(--blue-100); color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.appscr-hd .cal svg { width:16px; height:16px; }
.appscr-hd .subsel { display:flex; align-items:center; gap:5px; margin-top:7px;
  font:600 10px/1.2 var(--font-sans); color:var(--ink-500); text-transform:uppercase; letter-spacing:.05em; }
.appscr-hd .subsel svg { width:11px; height:11px; color:var(--ink-300); }
.appdate {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--surface); box-shadow:var(--shadow-card); border-radius:var(--r-md);
  margin:10px 15px 0; padding:8px 10px;
}
.appdate .dcol { text-align:center; }
.appdate .d { font:700 13.5px/1.1 var(--font-sans); color:var(--ink-900); }
.appdate .dw { font:400 9.5px/1.2 var(--font-mono); color:var(--ink-300); margin-top:2px; }
.appdate .nav-b { width:28px; height:28px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--ink-500); }
.appdate .nav-b svg { width:18px; height:18px; }
.appchips { display:flex; gap:5px; padding:10px 15px 0; }
.appchips .c { flex:1; display:flex; align-items:center; justify-content:center; gap:3px;
  font:500 10px/1 var(--font-sans); padding:8px 4px; border-radius:99px;
  background:var(--surface); color:var(--ink-500); box-shadow:inset 0 0 0 1px var(--line-strong); white-space:nowrap; }
.appchips .c b { font:600 10px/1 var(--font-mono); color:var(--ink-700); }
.appchips .c.on { background:var(--blue-600); color:#fff; box-shadow:none; }
.appchips .c.on b { color:rgba(255,255,255,.78); }
.appchips .c.done { color:var(--ink-500); box-shadow:inset 0 0 0 1px var(--line-strong); background:var(--surface); }
.appchips .c.done b { color:var(--ink-500); }
.appchips .c.done svg { width:11px; height:11px; color:var(--ok); }
.encbar { margin:10px 15px 0; background:var(--surface); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); padding:10px 11px; }
.encbar .et { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:7px; }
.encbar .ec { font:500 8.5px/1.2 var(--font-mono); color:var(--ink-700); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.encbar .as { display:flex; align-items:center; gap:4px; font:500 9.5px/1 var(--font-sans); color:var(--ok); flex-shrink:0; }
.encbar .as::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--ok); }
.encbar .track { height:5px; border-radius:99px; background:var(--ink-100); overflow:hidden; }
.encbar .track i { display:block; height:100%; border-radius:99px; background:var(--blue-600); }
.quick { display:flex; align-items:center; gap:6px; padding:11px 16px 4px;
  font:600 11.5px/1.2 var(--font-sans); color:var(--blue-600); }
.quick svg { width:14px; height:14px; flex-shrink:0; }
.approws { padding:8px 15px 12px; display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.approw { display:flex; align-items:center; gap:8px; background:var(--surface);
  border-radius:var(--r-md); padding:8px 9px; box-shadow:var(--shadow-card); }
.approw .av { width:28px; height:28px; border-radius:99px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font:600 9.5px/1 var(--font-mono);
  background:var(--orange-100); color:var(--ink-900); }
.approw .av.b1 { background:var(--blue-100); color:var(--blue-600); }
.approw .av.s1 { background:#F5EFE6; color:var(--ink-900); }
.approw .nminfo { flex:1; min-width:0; }
.approw .nm { font:700 11.5px/1.2 var(--font-sans); color:var(--ink-900);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.approw .late { display:block; font:600 8.5px/1.1 var(--font-mono); color:var(--warn); margin-top:3px; }
.prabtns { display:flex; gap:3px; align-items:center; flex-shrink:0; }
.prabtns .b { width:22px; height:22px; border-radius:6px; font:700 9px/1 var(--font-mono);
  display:flex; align-items:center; justify-content:center; color:var(--ink-500);
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-strong); }
.prabtns .b.p { background:var(--ok-bg); color:var(--ok); box-shadow:inset 0 0 0 1.5px var(--ok); }
.prabtns .b.r { background:var(--warn-bg); color:var(--warn); box-shadow:inset 0 0 0 1.5px var(--warn); }
.prabtns .b.a { background:var(--bad-bg); color:var(--bad); box-shadow:inset 0 0 0 1.5px var(--bad); }
.prabtns .x { width:14px; text-align:center; font:300 13px/1 var(--font-sans); color:var(--ink-300); }

/* ─── Trust strip ─────────────────────────────────────────────────────── */
.trust { padding:30px 0 8px; }
.trust-lbl { text-align:center; font:500 12.5px/1.4 var(--font-sans); color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:22px; }
.trust-logos { display:flex; align-items:center; justify-content:center; gap:46px; flex-wrap:wrap;
  filter:grayscale(1); opacity:.62; }
.trust-logos img { height:34px; width:auto; }
.trust-logos img.sm { height:20px; }

/* ─── Section générique ───────────────────────────────────────────────── */
.section { padding:96px 0; }
.section.tight { padding:72px 0; }
.section-head { max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head.left { margin-left:0; text-align:left; }
.section-head h2 {
  font:700 clamp(28px,3.4vw,42px)/1.12 var(--font-sans);
  letter-spacing:-.02em; color:var(--ink-900); margin-top:16px;
}
.section-head p { font:400 18px/1.6 var(--font-sans); color:var(--ink-500); margin-top:18px; }
.section.alt { background:var(--surface); }
.section.navy { background:var(--ink-900); }

/* ─── Problème ────────────────────────────────────────────────────────── */
.prob-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prob-card {
  background:var(--surface); border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:var(--shadow-soft);
}
.prob-card .pc-ic {
  width:42px; height:42px; border-radius:11px; background:#fff; color:var(--bad);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  margin-bottom:18px;
}
.prob-card .pc-ic svg { width:21px; height:21px; }
.prob-card h3 { font:600 17px/1.35 var(--font-sans); color:var(--ink-900); margin-bottom:8px; }
.prob-card p { font:400 14.5px/1.55 var(--font-sans); color:var(--ink-500); }
.prob-foot {
  margin-top:36px; text-align:center; font:500 16px/1.6 var(--font-sans); color:var(--ink-700);
}
.prob-foot b { color:var(--ink-900); font-weight:600; }

/* ─── Bénéfices ───────────────────────────────────────────────────────── */
.benef-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.benef-card { text-align:left; }
.benef-card .bn {
  font:600 44px/1 var(--font-mono); color:var(--blue-600); letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:3px;
}
.benef-card .bn .u { font-size:24px; color:var(--blue-500); }
.benef-card h3 { font:600 16px/1.35 var(--font-sans); color:var(--ink-900); margin:14px 0 6px; }
.benef-card p { font:400 14px/1.55 var(--font-sans); color:var(--ink-500); }
.benef-card .rule { height:2px; width:40px; background:var(--orange-300); margin-bottom:18px; border-radius:2px; }

/* ─── Fonctionnalités (par bénéfice) ──────────────────────────────────── */
.feat-row { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:44px 0; }
.feat-row + .feat-row { border-top:1px solid var(--line); }
.feat-row.rev .feat-text { order:2; }
.feat-text .eyebrow { margin-bottom:18px; }
.feat-text h3 { font:700 clamp(24px,2.6vw,32px)/1.18 var(--font-sans); letter-spacing:-.02em;
  color:var(--ink-900); }
.feat-text p { font:400 16.5px/1.6 var(--font-sans); color:var(--ink-700); margin-top:16px; }
.feat-list { margin-top:36px; display:flex; flex-direction:column; gap:13px; }
.feat-list li { display:flex; gap:11px; align-items:flex-start; list-style:none;
  font:400 15px/1.5 var(--font-sans); color:var(--ink-700); }
.feat-list .ck { width:22px; height:22px; border-radius:7px; background:var(--ok-bg); color:var(--ok);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.feat-list .ck svg { width:13px; height:13px; }
.feat-text ul { padding:0; margin:36px 0 0; }
.feat-visual {
  background:var(--surface-2); border-radius:var(--r-xl); border:1px solid var(--line);
  padding:30px; min-height:320px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}

/* mini cards inside feature visuals */
.vcard { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-pop);
  padding:18px; width:100%; max-width:340px; }
.vcard .vh { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.vcard .vt { font:600 14px/1 var(--font-sans); color:var(--ink-900); }
.vrow { display:flex; align-items:center; justify-content:space-between; padding:9px 0;
  border-bottom:1px solid var(--line); }
.vrow:last-child { border-bottom:none; }
.vrow .l { font:400 13px/1.3 var(--font-sans); color:var(--ink-700); }
.vrow .v { font:600 13.5px/1 var(--font-mono); }
.kpi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:340px; }
.kpi-box { background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow-soft); padding:14px 15px; }
.kpi-box .k { font:600 26px/1 var(--font-mono); letter-spacing:-.02em; }
.kpi-box .kl { font:400 11.5px/1.3 var(--font-sans); color:var(--ink-500); margin-top:5px; }
.badge { display:inline-flex; align-items:center; gap:5px; font:600 11px/1 var(--font-sans);
  padding:5px 9px; border-radius:99px; }
.badge.ok { background:var(--ok-bg); color:var(--ok); }
.badge.warn { background:var(--warn-bg); color:var(--warn); }
.badge.info { background:var(--info-bg); color:var(--info); }

/* ─── Captures (screens) ──────────────────────────────────────────────── */
.shots { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.shot { border-radius:var(--r-xl); overflow:hidden; background:var(--surface);
  box-shadow:var(--shadow-soft); position:relative; display:flex; flex-direction:column; }
.shot .cap { position:static; z-index:2; margin-top:auto; padding:14px 24px 18px; background:var(--surface); }
.shot .cap .ct { font:600 15px/1.2 var(--font-sans); color:var(--ink-900); }
.shot .cap .cs { font:400 12.5px/1.3 var(--font-sans); color:var(--ink-500); margin-top:3px; }
.shot.big { grid-column:span 7; height:480px; display:flex; flex-direction:column; }
.shot.big .shot-canvas { flex:1; min-height:0; overflow:hidden; position:relative; }
.shot.big .shot-canvas::after { content:''; position:absolute; left:0; right:0; bottom:0; height:96px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--surface) 82%); z-index:2; pointer-events:none; }
.shot.big .cap { position:static; z-index:3; padding:14px 24px 18px; background:var(--surface); }
.shot.small { grid-column:span 5; min-height:340px; }
.shot.third { grid-column:span 4; min-height:280px; }
.shot-canvas { padding:24px 24px 0; display:flex; align-items:flex-start; justify-content:center; }

/* ─── Témoignages ─────────────────────────────────────────────────────── */
.tmoy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tmoy { background:var(--surface); border-radius:var(--r-lg); padding:26px 24px;
  box-shadow:var(--shadow-soft); display:flex; flex-direction:column; }
.tmoy .stars { display:flex; gap:2px; margin-bottom:16px; color:var(--orange-500); }
.tmoy .stars svg { width:15px; height:15px; }
.tmoy q { font:400 16px/1.6 var(--font-sans); color:var(--ink-900); quotes:none; flex:1; }
.tmoy q::before, .tmoy q::after { content:''; }
.tmoy .who { display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line); }
.tmoy .who .av { width:42px; height:42px; border-radius:99px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font:600 14px/1 var(--font-sans); color:#fff; }
.tmoy .who .n { font:600 14px/1.2 var(--font-sans); color:var(--ink-900); }
.tmoy .who .r { font:400 12.5px/1.3 var(--font-sans); color:var(--ink-500); margin-top:2px; }

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width:760px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--line-strong); }
.faq-q { width:100%; background:none; border:none; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px; font:600 17px/1.4 var(--font-sans); color:var(--ink-900); font-family:var(--font-sans); }
.faq-q .pm { width:26px; height:26px; flex-shrink:0; border-radius:8px; background:var(--ink-100);
  color:var(--ink-700); display:flex; align-items:center; justify-content:center;
  transition:transform 240ms var(--ease), background 200ms; }
.faq-item.open .faq-q .pm { background:var(--blue-100); color:var(--blue-600); transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 320ms var(--ease); }
.faq-a-inner { padding:0 4px 24px; font:400 15.5px/1.65 var(--font-sans); color:var(--ink-700); max-width:640px; }

/* ─── CTA final ───────────────────────────────────────────────────────── */
.cta-final { position:relative; overflow:hidden; }
.cta-box {
  background:var(--ink-900); border-radius:var(--r-xl); padding:64px 56px;
  text-align:center; position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; top:-40%; right:-10%; width:420px; height:420px;
  background:radial-gradient(circle, rgba(240,122,31,.22) 0%, rgba(240,122,31,0) 70%);
}
.cta-box::after {
  content:''; position:absolute; bottom:-50%; left:-8%; width:480px; height:480px;
  background:radial-gradient(circle, rgba(79,138,232,.20) 0%, rgba(79,138,232,0) 70%);
}
.cta-box h2 { position:relative; font:700 clamp(28px,3.4vw,40px)/1.14 var(--font-sans);
  letter-spacing:-.02em; color:#fff; }
.cta-box p { position:relative; font:400 18px/1.6 var(--font-sans); color:rgba(255,255,255,.72);
  margin:18px auto 0; max-width:480px; }
.cta-box .cta-actions { position:relative; display:flex; gap:12px; justify-content:center;
  margin-top:34px; flex-wrap:wrap; }
.cta-box .btn-secondary { background:transparent; color:#fff; border-color:rgba(255,255,255,.24); }
.cta-box .btn-secondary:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.cta-note { position:relative; margin-top:22px; font:400 13.5px/1.4 var(--font-sans);
  color:rgba(255,255,255,.5); }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.footer { background:var(--surface); border-top:1px solid var(--line); padding:64px 0 40px; }
.foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.foot-brand img { height:30px; margin-bottom:18px; }
.foot-brand p { font:400 14px/1.6 var(--font-sans); color:var(--ink-500); max-width:280px; }
.foot-col h4 { font:600 12px/1 var(--font-sans); color:var(--ink-900); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:16px; }
.foot-col a { display:block; font:400 14px/1 var(--font-sans); color:var(--ink-500);
  padding:8px 0; transition:color 140ms; }
.foot-col a:hover { color:var(--ink-900); }
.foot-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:48px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.foot-bottom .cofin { display:flex; align-items:center; gap:20px; filter:grayscale(1); opacity:.6; }
.foot-bottom .cofin img { height:26px; width:auto; }
.foot-bottom .cofin img.sm { height:16px; }
.foot-bottom small { font:400 13px/1.4 var(--font-sans); color:var(--ink-500); }

/* ─── Reveal animation ────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ─── Page Démo ───────────────────────────────────────────────────────── */
.demo-wrap { position:relative; overflow:hidden; }
.demo-wrap::before {
  content:''; position:absolute; inset:0 0 auto 0; height:520px; z-index:0;
  background:linear-gradient(180deg, var(--orange-50) 0%, rgba(251,251,251,0) 64%);
  opacity:.7; pointer-events:none;
}
.demo-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr;
  gap:64px; align-items:start; padding:64px 24px 96px; }
.demo-aside .eyebrow { margin-bottom:20px; }
.demo-aside h1 { font:700 clamp(32px,4vw,46px)/1.1 var(--font-sans); letter-spacing:-.025em; color:var(--ink-900); }
.demo-aside .lead { font:400 18px/1.6 var(--font-sans); color:var(--ink-700); margin-top:20px; max-width:440px; }
.demo-points { margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.demo-points li { list-style:none; display:flex; gap:13px; align-items:flex-start; }
.demo-points .di { width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; background:var(--blue-100); color:var(--blue-600); }
.demo-points .di svg { width:19px; height:19px; }
.demo-points .dt { font:600 15.5px/1.35 var(--font-sans); color:var(--ink-900); }
.demo-points .ds { font:400 13.5px/1.5 var(--font-sans); color:var(--ink-500); margin-top:3px; }
.demo-trust { margin-top:38px; padding-top:26px; border-top:1px solid var(--line); }
.demo-trust .dq { font:400 15.5px/1.6 var(--font-sans); color:var(--ink-700); font-style:italic; }
.demo-trust .dw { display:flex; align-items:center; gap:11px; margin-top:16px; }
.demo-trust .dw .av { width:38px; height:38px; border-radius:99px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font:600 13px/1 var(--font-sans);
  background:var(--orange-100); color:var(--ink-900); }
.demo-trust .dw .n { font:600 13.5px/1.2 var(--font-sans); color:var(--ink-900); }
.demo-trust .dw .r { font:400 12px/1.3 var(--font-sans); color:var(--ink-500); margin-top:2px; }

.demo-card { background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lift);
  padding:36px 34px; }
.demo-card .fh { font:700 21px/1.2 var(--font-sans); color:var(--ink-900); letter-spacing:-.01em; }
.demo-card .fsub { font:400 14px/1.5 var(--font-sans); color:var(--ink-500); margin:8px 0 26px; }
.fgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field.full { grid-column:1 / -1; }
.field label { font:600 12.5px/1 var(--font-sans); color:var(--ink-700); }
.field label .opt { font-weight:400; color:var(--ink-300); }
.field input, .field select, .field textarea {
  font:400 15px/1.4 var(--font-sans); color:var(--ink-900); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-md); padding:13px 14px;
  width:100%; transition:border-color 140ms, box-shadow 140ms; -webkit-appearance:none; appearance:none;
}
.field textarea { resize:vertical; min-height:92px; }
.field input::placeholder, .field textarea::placeholder { color:var(--ink-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--blue-600); box-shadow:var(--shadow-focus);
}
.field .selwrap { position:relative; }
.field .selwrap svg { position:absolute; right:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-300); pointer-events:none; }
.field select { padding-right:38px; cursor:pointer; }
.demo-card .submit { margin-top:8px; }
.demo-card .submit .btn { width:100%; }
.demo-card .legal { font:400 12px/1.5 var(--font-sans); color:var(--ink-500); margin-top:16px; text-align:center; }
.demo-card .legal a { color:var(--ink-700); text-decoration:underline; }
/* success state */
.demo-success { display:none; text-align:center; padding:24px 8px 12px; }
.demo-success.on { display:block; }
.demo-success .sx { width:60px; height:60px; border-radius:99px; background:var(--ok-bg); color:var(--ok);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.demo-success .sx svg { width:30px; height:30px; }
.demo-success h3 { font:700 22px/1.2 var(--font-sans); color:var(--ink-900); }
.demo-success p { font:400 15px/1.6 var(--font-sans); color:var(--ink-500); margin:12px auto 0; max-width:340px; }
.demo-form.hide { display:none; }

/* ─── Page Connexion ──────────────────────────────────────────────────── */
.auth { min-height:100vh; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.auth::before {
  content:''; position:absolute; inset:0 0 auto 0; height:50vh; z-index:0;
  background:linear-gradient(180deg, var(--orange-50) 0%, rgba(251,251,251,0) 70%);
  opacity:.7; pointer-events:none;
}
.auth-top { position:relative; z-index:1; padding:28px 0; }
.auth-main { position:relative; z-index:1; flex:1; display:flex; align-items:center;
  justify-content:center; padding:24px 24px 64px; }
.auth-card { width:100%; max-width:412px; }
.auth-brand { display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:28px; }
.auth-brand img { height:46px; width:auto; }
.auth-head { text-align:center; margin-bottom:26px; }
.auth-head h1 { font:700 26px/1.2 var(--font-sans); color:var(--ink-900); letter-spacing:-.02em; }
.auth-head p { font:400 15px/1.5 var(--font-sans); color:var(--ink-500); margin-top:8px; }
.auth-box { background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lift); padding:32px 30px; }
.auth-box .field { margin-bottom:18px; }
.auth-row { display:flex; align-items:center; justify-content:space-between; margin:2px 0 22px; gap:12px; }
.auth-check { display:flex; align-items:center; gap:8px; cursor:pointer; font:400 13.5px/1 var(--font-sans); color:var(--ink-700); }
.auth-check input { width:17px; height:17px; accent-color:var(--blue-600); cursor:pointer; margin:0; }
.auth-row a { font:600 13.5px/1 var(--font-sans); color:var(--blue-600); }
.auth-row a:hover { color:var(--blue-700); }
.auth-box .btn { width:100%; }
.pwwrap { position:relative; }
.pwwrap .toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--ink-500); padding:6px; display:flex;
  border-radius:8px; }
.pwwrap .toggle:hover { color:var(--ink-900); background:var(--ink-100); }
.pwwrap .toggle svg { width:18px; height:18px; }
.pwwrap input { padding-right:42px; }
.auth-error { display:none; align-items:center; gap:9px; background:var(--bad-bg); color:var(--bad);
  border-radius:var(--r-md); padding:11px 13px; font:500 13px/1.4 var(--font-sans); margin-bottom:18px; }
.auth-error.on { display:flex; }
.auth-error svg { width:17px; height:17px; flex-shrink:0; }
.auth-foot { text-align:center; margin-top:22px; font:400 14px/1.5 var(--font-sans); color:var(--ink-500); }
.auth-foot a { font-weight:600; color:var(--blue-600); }
.auth-legal { position:relative; z-index:1; text-align:center; padding:0 24px 32px;
  font:400 12.5px/1.5 var(--font-sans); color:var(--ink-300); }
.auth-legal a { color:var(--ink-500); }

/* ─── Pages légales ───────────────────────────────────────────────────── */
.legal-doc { position:relative; z-index:1; max-width:760px; margin:0 auto; padding:56px 24px 88px; }
.legal-doc .back { margin-bottom:28px; }
.legal-doc h1 { font:700 clamp(28px,4vw,40px)/1.12 var(--font-sans); letter-spacing:-.02em; color:var(--ink-900); }
.legal-doc .updated { font:400 13.5px/1.4 var(--font-sans); color:var(--ink-500); margin-top:12px; }
.legal-doc h2 { font:600 20px/1.3 var(--font-sans); color:var(--ink-900); margin:40px 0 12px; }
.legal-doc h3 { font:600 15.5px/1.4 var(--font-sans); color:var(--ink-900); margin:24px 0 8px; }
.legal-doc p, .legal-doc li { font:400 15.5px/1.7 var(--font-sans); color:var(--ink-700); }
.legal-doc p { margin:0 0 14px; }
.legal-doc ul { margin:0 0 14px; padding-left:22px; display:flex; flex-direction:column; gap:7px; }
.legal-doc a { color:var(--blue-600); }
.legal-doc .todo { background:var(--warn-bg); color:var(--warn); font-weight:600;
  padding:1px 7px; border-radius:6px; font-size:13.5px; }
.legal-doc .note { background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--r-md);
  padding:14px 16px; font:400 13.5px/1.6 var(--font-sans); color:var(--ink-700); margin:0 0 24px; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:980px){
  .demo-grid { grid-template-columns:1fr; gap:44px; padding:48px 24px 72px; }
  .hero-grid { grid-template-columns:1fr; gap:48px; }
  .hero-visual { order:-1; }
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; background:var(--surface);
    border-bottom:1px solid var(--line); padding:12px; gap:4px; box-shadow:var(--shadow-pop); }
  .nav-links.open a.navlink { padding:14px; }
  .nav-burger { display:inline-flex; }
  .feat-row, .feat-row.rev .feat-text { grid-template-columns:1fr; order:0; gap:32px; }
  .feat-visual { order:2; }
  .benef-grid { grid-template-columns:1fr 1fr; gap:28px 18px; }
  .prob-grid, .tmoy-grid { grid-template-columns:1fr; }
  .shots { grid-template-columns:1fr; }
  .shot.big,.shot.small,.shot.third { grid-column:span 1; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .float-card.tl { left:8px; top:24px; transform:scale(.9); }
  .float-card.br { right:8px; transform:scale(.9); }
}
@media (max-width:680px){
  .nav-burger { display:inline-flex; }
  .section { padding:64px 0; }
  .nav-signin { display:none; }
  .benef-grid { grid-template-columns:1fr 1fr; }
  .cta-box { padding:48px 28px; }
  .foot-grid { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; align-items:flex-start; }
  .float-card.tl { left:-12px; top:24px; transform:scale(.86); }
  .float-card.br { right:-12px; transform:scale(.86); }
  .fgrid { grid-template-columns:1fr; }
  .demo-card { padding:28px 22px; }
}