/* Genere par gen_benchmark.py depuis benchmark-landing-v2/index.html.
   NE PAS editer a la main : toute modif doit partir de la page source. */

/* ==========================================================
   Taplio design system - tokens
   ========================================================== */
.bm-root {
  --brand-25:#F0F5FF; --brand-50:#ECEEFF; --brand-500:#316BFF;
  --brand-600:#3556E6; --brand-700:#2C58B6;
  --ink-900:#121212; --ink-700:#213856; --ink-500:#566F8F;
  --ink-400:#616366; --ink-300:#98A1AC; --ink-200:#CBCBCC;
  --line-100:#EFEFEF; --line-200:#E5E5E5; --line-panel:#E8EAF4;
  --surface-0:#FFF; --surface-50:#FBFBFB; --surface-100:#F6F6F6;
  --success-500:#31C52E;

  --font-display:"lemfont","Poppins","Inter",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;

  --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:28px; --radius-full:9999px;

  --shadow-card:2px 4px 8px rgba(0,0,0,.04);
  --shadow-block:0 1px 3px rgba(23,29,64,.05), 0 8px 20px -6px rgba(23,29,64,.10);
  --shadow-panel:0 2px 6px rgba(23,29,64,.05), 0 24px 48px -14px rgba(23,29,64,.16);
  --shadow-btn:0 1px 2px rgba(20,28,80,.16), 0 4px 12px rgba(53,86,230,.26);
  --shadow-btn-hover:0 1px 2px rgba(20,28,80,.18), 0 6px 16px rgba(53,86,230,.30);

  --ease:cubic-bezier(.22,1,.36,1);
  --container:1120px;
  --measure:720px;
}

.bm-root *, .bm-root *::before, .bm-root *::after { box-sizing:border-box; }
.bm-root {
  margin:0; font-family:var(--font-body); color:var(--ink-900);
  background:var(--surface-0); line-height:1.55; -webkit-font-smoothing:antialiased;
}

/* ==========================================================
   LAYOUT : chaque section est une colonne verticale centree.
   Aucun bloc gauche/droite, sur aucun breakpoint.
   ========================================================== */
.bm-root section {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:88px 24px;
}
.bm-root section.tint { background:var(--brand-25); }
.bm-root section.gray { background:var(--surface-50); }
.bm-root .stack {
  display:flex; flex-direction:column; align-items:center;
  width:100%; max-width:var(--container); gap:0;
}
.bm-root .head { max-width:var(--measure); display:flex; flex-direction:column; align-items:center; gap:14px; }

.bm-root h1, .bm-root h2, .bm-root h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; margin:0; }
.bm-root h1 { font-size:56px; line-height:1.14; max-width:17ch; }
.bm-root h2 { font-size:38px; line-height:1.22; max-width:20ch; }
.bm-root h3 { font-size:18px; line-height:1.3; letter-spacing:-.01em; }
.bm-root p { margin:0; }
.bm-root a { color:var(--brand-600); }

.bm-root .eyebrow {
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--brand-600);
}
.bm-root .lede { font-size:18px; line-height:1.55; color:var(--ink-400); max-width:60ch; }

/* ---------- Buttons ---------- */
.bm-root .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:56px; padding:0 32px; border:0; border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:17px; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:background 150ms var(--ease), box-shadow 150ms var(--ease);
}
.bm-root .btn--primary { background:var(--brand-600); color:#fff; box-shadow:var(--shadow-btn); }
.bm-root .btn--primary:hover { background:var(--brand-700); box-shadow:var(--shadow-btn-hover); }
.bm-root .cta {
  display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:36px;
}
.bm-root .cta-note { font-size:14px; color:var(--ink-300); }

.bm-root .pill {
  display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-400);
  background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-full);
  padding:7px 16px; box-shadow:var(--shadow-card);
}
.bm-root .dot { width:7px; height:7px; border-radius:50%; background:var(--success-500); }

/* ---------- Hero ---------- */
.bm-root .hero { padding-top:156px; background:linear-gradient(180deg,var(--brand-25) 0%,#fff 80%); }

/* ---------- App shots ---------- */
.bm-root figure {
  margin:48px 0 0; width:100%; max-width:var(--container);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.bm-root .shot {
  width:100%; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--line-panel); background:#fff; box-shadow:var(--shadow-panel);
}
.bm-root .shot img { display:block; width:100%; height:auto; }
.bm-root .shot.masked { position:relative; }
.bm-root .shot.masked::after {
  content:""; position:absolute; inset:auto 0 0 0; height:16%;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 70%, #fff 100%);
  pointer-events:none;
}
.bm-root figcaption { font-size:14px; color:var(--ink-300); max-width:56ch; }
.bm-root .lockline {
  display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body);
  font-size:13px; font-weight:600; color:var(--ink-700);
  background:#fff; border:1px solid var(--line-200); border-radius:var(--radius-full);
  padding:8px 16px; box-shadow:var(--shadow-card);
}

/* ---------- Voile du hero : flou progressif qui remonte, CTA par dessus ---------- */
.bm-root .shot.veiled { position:relative; }
.bm-root .veil-blur {
  position:absolute; left:0; right:0; bottom:0; top:28%; pointer-events:none;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 34%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 34%);
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.40) 34%,
    rgba(255,255,255,.80) 68%, rgba(255,255,255,.94) 100%);
}
.bm-root .veil-cta {
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:0 24px 44px;
}
@media (max-width:940px) {
  .bm-root .veil-blur { top:34%; }
  .bm-root .veil-cta { padding-bottom:24px; }
  .bm-root .veil-cta .btn { height:48px; padding:0 22px; font-size:15px; }
}

/* ---------- Card grids (centered content, never a left/right split) ---------- */
.bm-root .grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  width:100%; margin-top:48px;
}
.bm-root .grid.two { grid-template-columns:repeat(2,1fr); max-width:900px; }
.bm-root .card {
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background:#fff; border:1px solid var(--line-panel); border-radius:var(--radius-xl);
  padding:30px 26px; box-shadow:var(--shadow-card);
}
.bm-root .card p { color:var(--ink-400); font-size:15px; }
.bm-root .card .tag {
  font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--brand-600); background:var(--brand-50);
  padding:5px 12px; border-radius:var(--radius-full);
}
.bm-root .card .num {
  font-family:var(--font-display); font-size:18px; color:var(--brand-600);
  background:var(--brand-50); width:42px; height:42px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}

/* ---------- Mini visuels de section : formes seules, aucune valeur ---------- */
.bm-root .viz { width:100%; height:96px; margin-top:4px; display:flex; align-items:flex-end; justify-content:center; gap:6px; }

.bm-root .viz-brackets { align-items:center; gap:7px; }
.bm-root .viz-brackets i {
  display:block; height:26px; flex:1; border-radius:var(--radius-full);
  background:var(--surface-100); border:1px solid var(--line-200);
}
.bm-root .viz-brackets i.on { background:var(--brand-600); border-color:var(--brand-600); flex:1.35; }

.bm-root .viz-dist { flex-direction:column; align-items:stretch; justify-content:flex-end; gap:0; }
.bm-root .viz-dist .bars { display:flex; align-items:flex-end; gap:4px; height:66px; }
.bm-root .viz-dist .bars i { flex:1; border-radius:3px 3px 0 0; background:var(--brand-600); opacity:.22; }
.bm-root .viz-dist .bars i.on { opacity:.9; }
.bm-root .viz-dist .axis { display:flex; justify-content:space-between; margin-top:8px; }
.bm-root .viz-dist .axis span { font-size:9px; font-weight:600; letter-spacing:.08em; color:var(--ink-300); }

.bm-root .viz-mom { flex-direction:column; gap:10px; align-items:center; justify-content:center; }
.bm-root .viz-mom svg { width:100%; height:52px; }
.bm-root .viz-mom .chips { display:flex; gap:6px; }
.bm-root .viz-mom .chips b { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:3px 9px; border-radius:var(--radius-full); }
.bm-root .viz-mom .chips b.up { color:#1E8B2C; background:#E7F7E9; }
.bm-root .viz-mom .chips b.down { color:#C0344F; background:#FDECF0; }

.bm-root .viz-bars { align-items:flex-end; gap:10px; height:96px; }
.bm-root .viz-bars .col { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.bm-root .viz-bars i { display:block; width:100%; border-radius:5px 5px 0 0; background:var(--brand-600); }
.bm-root .viz-bars i.soft { background:var(--brand-500); opacity:.32; }
.bm-root .viz-bars small { font-size:9px; font-weight:600; letter-spacing:.05em; color:var(--ink-300); text-transform:uppercase; }

.bm-root .viz-heat { flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.bm-root .viz-heat div { display:flex; gap:5px; }
.bm-root .viz-heat span { width:20px; height:20px; border-radius:5px; background:var(--brand-600); }
.bm-root .viz-heat span.l1 { opacity:.10; } .bm-root .viz-heat span.l2 { opacity:.24; }
.bm-root .viz-heat span.l3 { opacity:.48; } .bm-root .viz-heat span.l4 { opacity:.85; }

/* ---------- Dark unlock section ---------- */
.bm-root .dark { background:var(--ink-900); color:#fff; }
.bm-root .dark h2 { color:#fff; }
.bm-root .dark .lede { color:var(--ink-200); }
.bm-root .dark .eyebrow { color:var(--brand-500); }
.bm-root .dark figcaption { color:var(--ink-300); }
.bm-root .dark .shot { border-color:rgba(255,255,255,.14); }
.bm-root .dark .lockline { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#fff; box-shadow:none; }
.bm-root .dark .btn--primary { background:#fff; color:var(--ink-900); box-shadow:none; }
.bm-root .dark .btn--primary:hover { background:var(--brand-25); }
.bm-root .dark .cta-note { color:var(--ink-300); }

/* ---------- 3x3 comparison grid : ou tu te places sur chaque metrique ---------- */
.bm-root .compare {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  width:100%; margin-top:48px;
}
.bm-root .cmp {
  display:flex; flex-direction:column; gap:12px; text-align:left;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); padding:22px 20px;
}
.bm-root .cmp-name { font-size:15px; font-weight:600; color:#fff; line-height:1.3; }
.bm-root .cmp-desc { font-size:13px; line-height:1.45; color:var(--ink-300); }
.bm-root .cmp-track { position:relative; height:74px; }
.bm-root .cmp-line {
  position:absolute; left:0; right:0; top:44px; height:4px; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.13) 0%, rgba(53,86,230,.75) 100%);
}
.bm-root .cmp-ticks { position:absolute; left:0; right:0; top:56px; display:flex; justify-content:space-between; }
.bm-root .cmp-ticks span { font-size:9px; font-weight:600; letter-spacing:.09em; color:rgba(255,255,255,.34); }
.bm-root .av {
  position:absolute; width:26px; height:26px; top:33px; border-radius:50%; overflow:hidden;
  transform:translateX(-50%); border:2px solid rgba(255,255,255,.34);
  filter:grayscale(1) brightness(1.15); opacity:.62;
}
.bm-root .av img { display:block; width:100%; height:100%; object-fit:cover; }
.bm-root .av.you {
  width:40px; height:40px; top:26px; border:2.5px solid var(--brand-500);
  filter:none; opacity:1; box-shadow:0 0 0 5px rgba(53,86,230,.22); z-index:2;
}
.bm-root .you-tag {
  position:absolute; top:0; transform:translateX(-50%); z-index:3;
  font-size:10px; font-weight:600; letter-spacing:.04em; color:#fff;
  background:var(--brand-600); padding:3px 9px; border-radius:var(--radius-full);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
@media (max-width:940px) { .bm-root .compare { grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.bm-root .faq { width:100%; max-width:820px; margin-top:44px; text-align:left; }
.bm-root details { border-bottom:1px solid var(--line-200); padding:20px 0; }
.bm-root details summary {
  font-family:var(--font-body); font-size:18px; font-weight:600;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:24px;
}
.bm-root details summary::-webkit-details-marker { display:none; }
.bm-root details summary::after { content:"+"; color:var(--brand-600); font-size:22px; line-height:1; }
.bm-root details[open] summary::after { content:"-"; }
.bm-root details p { margin-top:12px; color:var(--ink-400); font-size:16px; }

/* ---------- Final CTA ---------- */
.bm-root .cta-panel {
  width:100%; max-width:var(--container);
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:var(--brand-600); border-radius:var(--radius-2xl); padding:72px 40px; color:#fff;
}
.bm-root .cta-panel h2 { color:#fff; }
.bm-root .cta-panel .lede { color:#D6DEFF; }
.bm-root .cta-panel .btn--primary { background:#fff; color:var(--brand-600); box-shadow:none; }
.bm-root .cta-panel .btn--primary:hover { background:var(--brand-25); }
.bm-root .cta-panel .cta-note { color:#B9C6FF; }

.bm-root .footnote { font-size:13px; color:var(--ink-300); margin-top:24px; max-width:60ch; }

@media (max-width:940px) {
  .bm-root h1 { font-size:38px; } .bm-root h2 { font-size:28px; }
  .bm-root section { padding:60px 20px; }
  .bm-root .grid, .bm-root .grid.two { grid-template-columns:1fr; }
  .bm-root figure { margin-top:36px; }
}