/* Layout : une colonne centrée de 1200 px ; des cartes produit qui flottent autour du titre ; sections aérées sur fond blanc. */
:root {
  --bg: #ffffff;
  --bg-2: #f7f7fa;
  --ink: #0d0d12;
  --ink-2: #363d4f;
  --muted: #5d6475;
  --line: #e7e9ef;
  --line-strong: #d0d5dd;
  --accent: #f2c94c;
  --accent-deep: #e0b53a;
  --accent-soft: #fcf2d2;
  --accent-ring: rgb(242 201 76 / 45%);
  --ok: #0a7346;
  --ok-soft: #e3f4ea;
  --wait: #975600;
  --wait-soft: #fcefd9;
  --no: #c0181f;
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r-card: calc(20 * var(--u));
  --nav-h: calc(90 * var(--u));
  --shadow-card: 0 1px calc(2 * var(--u)) rgb(16 24 40 / 5%), 0 calc(14 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgb(16 24 40 / 16%);
  --shadow-float: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgb(16 24 40 / 5%), 0 calc(20 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) rgb(16 24 40 / 26%);
}


* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 calc(16 * var(--u))/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
a { color: inherit; text-underline-offset: calc(3 * var(--u)); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--ink); }
.wrap { max-width: calc(1200 * var(--u)); margin: 0 auto; padding-inline: max(calc(16 * var(--u)), 4vw); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); letter-spacing: -0.01em; }
svg.i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Le surligneur : une bande jaune sous le mot clé, le texte reste à l'encre. */
.mark { background-image: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 90%, transparent 90%); background-repeat: no-repeat; background-size: 100% 100%; padding-inline: 0.05em; margin-inline: -0.05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mark--solid { background-image: linear-gradient(transparent 14%, var(--accent) 14%, var(--accent) 96%, transparent 96%); color: var(--ink); padding-inline: 0.12em; margin-inline: 0; }
@keyframes sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

/* Libellé de section */
.label { display: inline-block; font: 400 calc(12.5 * var(--u))/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sec { padding-block: calc(128 * var(--u)); position: relative; }
.sec-head { display: grid; justify-items: center; max-width: calc(900 * var(--u)); margin: 0 auto calc(28 * var(--u)); text-align: center; }
.sec-head h2 { margin-top: calc(10 * var(--u)); font-size: clamp(calc(34 * var(--u)), 4.4vw, calc(58 * var(--u))); line-height: 1.07; letter-spacing: -0.04em; }
.sec-head p { max-width: 62ch; margin-top: calc(9 * var(--u)); color: var(--ink-2); font-size: calc(19.3 * var(--u)); line-height: 1.38; }
.sec-head--tight { margin-bottom: calc(16 * var(--u)); }
/* En-tête alignée à gauche, fond gris (sections reprises de G) */
.head { display: grid; gap: calc(14 * var(--u)); max-width: calc(720 * var(--u)); margin-bottom: calc(44 * var(--u)); }
.head h2 { font-size: clamp(calc(34 * var(--u)), 4.1vw, calc(54 * var(--u))); line-height: 1.04; letter-spacing: -0.04em; }
.head p { font-size: calc(17.5 * var(--u)); color: var(--ink-2); max-width: 60ch; }
.head .sec-note { font-size: calc(13.5 * var(--u)); color: var(--muted); }
.sec--alt { background: var(--bg-2); }

/* Boutons en pilule, avec anneau */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); min-height: calc(52 * var(--u)); padding-inline: calc(24 * var(--u)); border-radius: calc(999 * var(--u)); font: 600 calc(15.5 * var(--u))/1 var(--sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .15s, box-shadow .15s, background-color .15s; }
.btn--primary { background: var(--ink); color: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--accent-ring), 0 calc(10 * var(--u)) calc(22 * var(--u)) calc(-12 * var(--u)) rgb(13 13 18 / 55%); }
.btn--primary:hover { transform: translateY(-1px); background: #26272e; box-shadow: 0 0 0 calc(5 * var(--u)) var(--accent-ring), 0 calc(14 * var(--u)) calc(26 * var(--u)) calc(-12 * var(--u)) rgb(13 13 18 / 55%); }
.pill-form .btn--primary { box-shadow: none; }
.btn--ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-2); }
.btn--sm { min-height: max(44px, calc(44 * var(--u))); padding-inline: calc(18 * var(--u)); font-size: calc(14 * var(--u)); }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 0 0 calc(4 * var(--u)) rgb(255 255 255 / 25%); }

/* ============ Navigation ============ */
/* Barre collante de hauteur nulle : elle flotte au-dessus du hero sans le décaler. */
.site-head { position: sticky; top: 0; z-index: 50; height: 0; }
.site-head .wrap { padding-top: calc(14 * var(--u)); transition: padding-top .3s; }
.site-head.is-scrolled .wrap { padding-top: calc(8 * var(--u)); }
section[id], figure[id] { scroll-margin-top: calc(96 * var(--u)); }
html.menu-open { overflow: hidden; }
.site-head::before { content: ""; position: fixed; inset: 0; background: rgb(13 13 18 / 28%); opacity: 0; pointer-events: none; transition: opacity .2s; }
html.menu-open .site-head::before { opacity: 1; pointer-events: auto; }
.nav { position: relative; display: flex; align-items: center; gap: calc(20 * var(--u)); max-width: calc(1200 * var(--u)); min-height: calc(76 * var(--u)); margin-inline: auto; padding: 0 calc(12 * var(--u)) 0 calc(26 * var(--u)); border: 1px solid var(--line); border-radius: calc(999 * var(--u)); background: rgb(255 255 255 / 86%); color: var(--ink); -webkit-backdrop-filter: blur(calc(10 * var(--u))); backdrop-filter: blur(calc(10 * var(--u))); box-shadow: 0 1px calc(2 * var(--u)) rgb(16 24 40 / 4%); transition: max-width .35s cubic-bezier(.3,.7,.2,1), min-height .3s, box-shadow .3s, background-color .3s; }
.site-head.is-scrolled .nav { max-width: calc(980 * var(--u)); min-height: calc(62 * var(--u)); background: rgb(255 255 255 / 92%); box-shadow: 0 1px calc(2 * var(--u)) rgb(16 24 40 / 6%), 0 calc(14 * var(--u)) calc(34 * var(--u)) calc(-18 * var(--u)) rgb(16 24 40 / 32%); }
.logo { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); flex: none; min-height: max(44px, calc(44 * var(--u))); font: 700 calc(21 * var(--u))/1 var(--display); letter-spacing: -0.035em; text-decoration: none; color: inherit; }
.logo svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.nav-links { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-inline: auto; }
.nav-link { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); min-height: max(44px, calc(44 * var(--u))); padding-inline: calc(15 * var(--u)); border: 0; border-radius: calc(999 * var(--u)); background-color: transparent; color: var(--ink-2); font: 600 calc(14.5 * var(--u))/1 var(--sans); text-decoration: none; cursor: pointer;
  background-image: linear-gradient(transparent 55%, var(--accent) 55%, var(--accent) 77%, transparent 77%); background-repeat: no-repeat; background-position: calc(15 * var(--u)) 0; background-size: 0 100%;
  transition: background-size .4s cubic-bezier(.3,.7,.2,1), background-color .15s, color .15s; }
.nav-link:hover, .nav-link[aria-expanded="true"] { background-color: var(--bg-2); color: var(--ink); }
.nav-link.is-active { color: var(--ink); background-size: calc(100% - calc(30 * var(--u))) 100%; }
.nav-link[aria-controls].is-active { background-size: calc(100% - calc(50 * var(--u))) 100%; }
.nav-link .chev { width: calc(14 * var(--u)); height: calc(14 * var(--u)); transition: transform .2s; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.acts { display: flex; align-items: center; gap: calc(8 * var(--u)); flex: none; }
.login { display: inline-flex; align-items: center; min-height: max(44px, calc(44 * var(--u))); padding-inline: calc(12 * var(--u)); font-weight: 600; font-size: calc(14.5 * var(--u)); text-decoration: none; color: inherit; }
.nav-cta { min-height: calc(46 * var(--u)); padding-inline: calc(18 * var(--u)); font-size: calc(14.5 * var(--u)); background: #fff; border-color: var(--line-strong); color: var(--ink); transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s; }
.nav-cta svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.nav-cta:hover { border-color: var(--ink-2); }
.nav.cta-on .nav-cta { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--accent-ring); }
.menu-btn { display: none; width: max(44px, calc(44 * var(--u))); height: max(44px, calc(44 * var(--u))); flex: none; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.menu-btn svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.menu-btn .ic-x, .menu-btn[aria-expanded="true"] .ic-menu { display: none; }
.menu-btn[aria-expanded="true"] .ic-x { display: block; }

/* Menu Produit */
.mega { position: absolute; top: calc(100% + calc(10 * var(--u))); left: 50%; translate: -50% 0; width: min(calc(780 * var(--u)), calc(100vw - calc(32 * var(--u)))); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: calc(8 * var(--u)); padding: calc(8 * var(--u)); border: 1px solid var(--line); border-radius: calc(22 * var(--u)); background: #fff; color: var(--ink); box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(16 24 40 / 6%), 0 calc(28 * var(--u)) calc(60 * var(--u)) calc(-26 * var(--u)) rgb(16 24 40 / 38%); }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-12 * var(--u)); height: calc(12 * var(--u)); }
.mega-list { list-style: none; margin: 0; padding: calc(4 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: calc(2 * var(--u)); }
.mega-list a { display: grid; grid-template-columns: calc(38 * var(--u)) minmax(0, 1fr); gap: calc(12 * var(--u)); align-items: start; padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); color: var(--ink); text-decoration: none; }
.mega-list a:hover, .mega-list a:focus-visible { background: var(--bg-2); }
.mi { width: calc(38 * var(--u)); height: calc(38 * var(--u)); display: grid; place-items: center; border-radius: calc(11 * var(--u)); background: var(--accent-soft); color: var(--ink); }
.mi svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.mega-list b { display: block; font-weight: 600; font-size: calc(14.5 * var(--u)); line-height: 1.3; }
.mega-list small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.45; color: var(--muted); }
.mega-feature { display: grid; gap: calc(14 * var(--u)); align-content: start; padding: calc(18 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--ink); color: #f4f4f6; text-decoration: none; }
.mf-top { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font: 400 calc(11.5 * var(--u))/1 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: #a3a7b1; }
.mf-top::before { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(3 * var(--u)) rgb(242 201 76 / 22%); }
.mf-title { font: 700 calc(18 * var(--u))/1.25 var(--display); letter-spacing: -0.02em; }
.mf-rows { display: grid; gap: calc(8 * var(--u)); }
.mf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(10 * var(--u)); align-items: center; padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: rgb(255 255 255 / 6%); font-size: calc(13 * var(--u)); }
.mf-row .fav { box-shadow: 0 0 0 1px rgb(255 255 255 / 25%); }
.mf-more { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 600; font-size: calc(13.5 * var(--u)); color: var(--accent); }
.mf-more svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); transition: transform .2s; }
.mega-feature:hover .mf-more svg { transform: translateX(calc(3 * var(--u))); }

/* Menu mobile */
.m-panel { position: absolute; top: calc(100% + calc(10 * var(--u))); left: 0; right: 0; max-height: calc(100dvh - calc(110 * var(--u))); overflow: auto; overscroll-behavior: contain; display: grid; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); border: 1px solid var(--line); border-radius: calc(24 * var(--u)); background: #fff; color: var(--ink); box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgb(16 24 40 / 6%), 0 calc(28 * var(--u)) calc(60 * var(--u)) calc(-26 * var(--u)) rgb(16 24 40 / 38%); }
.m-panel .label { padding: calc(10 * var(--u)) calc(10 * var(--u)) 0; }
.m-panel .mega-list { grid-template-columns: minmax(0, 1fr); padding: 0; }
.m-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.m-links a { display: flex; align-items: center; min-height: calc(52 * var(--u)); padding-inline: calc(16 * var(--u)); border: 1px solid var(--line); border-radius: calc(14 * var(--u)); font-weight: 600; text-decoration: none; color: var(--ink); }
.m-links a:hover { background: var(--bg-2); }
.m-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(8 * var(--u)); padding-top: calc(6 * var(--u)); }
.m-acts .btn { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .mega:not([hidden]), .m-panel:not([hidden]) { animation: drop .2s cubic-bezier(.2,.7,.2,1); }
}
@keyframes drop { from { opacity: 0; transform: translateY(calc(-6 * var(--u))); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-link, .site-head .wrap { transition: none; }
}

@media (max-width: 1080px) {
  .nav-links, .login { display: none; }
  .menu-btn { display: grid; }
  .nav { gap: calc(10 * var(--u)); padding-left: calc(20 * var(--u)); }
  .acts { margin-left: auto; }
}
@media (max-width: 720px) {
  :root { --nav-h: calc(78 * var(--u)); }
  .nav { min-height: calc(64 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(18 * var(--u)); }
  .site-head.is-scrolled .nav { min-height: calc(56 * var(--u)); }
  .nav-cta { min-height: max(44px, calc(44 * var(--u))); padding-inline: calc(14 * var(--u)); }
  .nav-cta svg { display: none; }
  .m-acts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .nav-cta { display: none; }
}

/* ============ Hero ============ */
.hero { position: relative; overflow: hidden; padding-top: var(--nav-h); padding-bottom: calc(40 * var(--u)); }
.hero-bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 46% at 50% 18%, var(--accent-soft), transparent 70%),
    linear-gradient(rgb(16 24 40 / 4.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(16 24 40 / 4.5%) 1px, transparent 1px);
  background-size: auto, calc(101 * var(--u)) calc(101 * var(--u)), calc(101 * var(--u)) calc(101 * var(--u));
  -webkit-mask: linear-gradient(#000 70%, transparent);
          mask: linear-gradient(#000 70%, transparent); }
.hero-in { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: calc(26 * var(--u)); padding-top: calc(176 * var(--u)); }
.hero h1 { font-size: clamp(calc(44 * var(--u)), 5.9vw, calc(84 * var(--u))); line-height: 1.04; letter-spacing: -0.04em; }
.hero h1 .hl { position: relative; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .mark { animation: sweep 0.9s cubic-bezier(.3,.7,.2,1) 0.35s both; }
}
.hero .sub { font-size: calc(19 * var(--u)); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.pill-form { display: flex; align-items: center; gap: calc(8 * var(--u)); width: min(calc(560 * var(--u)), 100%); padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--line-strong); border-radius: calc(999 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) var(--accent-ring), var(--shadow-card); margin-top: calc(6 * var(--u)); }
.pill-form svg { color: var(--muted); }
.pill-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: calc(16 * var(--u)); min-height: calc(48 * var(--u)); }
.pill-form:focus-within { border-color: var(--ink); }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--u)) calc(22 * var(--u)); font-size: calc(14 * var(--u)); color: var(--ink-2); }
.trust span { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
.trust svg { color: var(--ok); stroke-width: 2.4; width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.see-example { font-size: calc(14 * var(--u)); color: var(--muted); }

/* Cartes flottantes */
.floaters { position: absolute; inset: 0; max-width: calc(1360 * var(--u)); margin: 0 auto; pointer-events: none; z-index: 1; }
.fl { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: calc(16 * var(--u)); box-shadow: var(--shadow-float); padding: calc(14 * var(--u)) calc(16 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--ink-2); }
.fl.pill { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); border-radius: calc(999 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); font-size: calc(13 * var(--u)); white-space: nowrap; }
.fl b { color: var(--ink); font-weight: 600; }
.fl-1 { top: calc(150 * var(--u)); left: 1.5%; width: calc(246 * var(--u)); transform: rotate(-4deg); }
.fl-2 { top: calc(178 * var(--u)); right: 3%; transform: rotate(5deg); }
.fl-3 { top: calc(400 * var(--u)); left: 2.5%; transform: rotate(4deg); }
.fl-4 { top: calc(372 * var(--u)); right: 0.5%; width: calc(252 * var(--u)); transform: rotate(3.5deg); }
.fl-5 { top: calc(600 * var(--u)); left: 4%; width: calc(250 * var(--u)); transform: rotate(-4.5deg); }
.fl-6 { top: calc(650 * var(--u)); right: 7%; transform: rotate(5deg); }
.fl-head { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 400 calc(11.5 * var(--u))/1 var(--mono); color: var(--muted); margin-bottom: calc(10 * var(--u)); }
.fav { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); display: grid; place-items: center; font: 700 calc(10 * var(--u))/1 var(--sans); color: #fff; background: #111; }
img.fav { object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgb(13 13 18 / 10%); }
.fl-q { font: 400 calc(13 * var(--u))/1.5 var(--mono); color: var(--ink); white-space: pre-line; }
.u { background: linear-gradient(var(--ok), var(--ok)) 0 100% / 100% calc(2 * var(--u)) no-repeat; padding-bottom: 1px; }
.chip { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.chip svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.6; }
.chip--ok { background: var(--ok-soft); color: var(--ok); }
.chip--wait { background: var(--wait-soft); color: var(--wait); }
.chip--acc { background: var(--accent-soft); color: var(--ink); }
.dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(4 * var(--u)) var(--accent-soft); }
.fl s { color: var(--muted); }
.fl-title { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); font-weight: 600; color: var(--ink); font-size: calc(13 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.fl-title span { font-weight: 400; color: var(--muted); font-size: calc(11.5 * var(--u)); }
.mini-row { display: grid; grid-template-columns: minmax(0, 1fr) calc(44 * var(--u)) calc(44 * var(--u)); gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) 0; border-top: 1px solid var(--line); align-items: baseline; }
.mini-row b { text-align: right; font-family: var(--mono); font-weight: 400; font-size: calc(12.5 * var(--u)); }
.mini-row b.win { justify-self: end; background: var(--accent); color: var(--ink); font-weight: 600; border-radius: calc(4 * var(--u)); padding-inline: calc(4 * var(--u)); margin-right: calc(-4 * var(--u)); }
.mini-row--h { border-top: 0; padding-top: 0; font-size: calc(11 * var(--u)); color: var(--muted); }
.mini-row--h b { font-family: var(--sans); font-size: calc(11 * var(--u)); color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(4 * var(--u)); text-align: center; margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.week span { display: grid; gap: calc(4 * var(--u)); justify-items: center; font-size: calc(10 * var(--u)); color: var(--muted); }
.week b { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(7 * var(--u)); display: grid; place-items: center; font: 600 calc(11 * var(--u))/1 var(--sans); color: var(--ink); background: var(--bg-2); }
.week .ok b { background: var(--ok-soft); color: var(--ok); }
.week .alert b { background: var(--wait-soft); color: var(--wait); box-shadow: 0 0 0 calc(2 * var(--u)) var(--wait); }
.week .today b { background: var(--accent); color: var(--ink); }
.fl-3 b { background: var(--accent); color: var(--ink); border-radius: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(5 * var(--u)); }
.fl-note { font-size: calc(11.5 * var(--u)); color: var(--ink-2); }
.tick { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: var(--ok); display: grid; place-items: center; color: #fff; }
.tick svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 3; }

/* Démo : la page livrée, dans un cadre */
.demo { position: relative; z-index: 2; margin-top: calc(88 * var(--u)); }
.frame { padding: calc(10 * var(--u)); border: 1px solid var(--line); border-radius: calc(28 * var(--u)); background: rgb(255 255 255 / 70%); box-shadow: var(--shadow-card); }
.frame-in { border-radius: calc(20 * var(--u)); overflow: hidden; border: 1px solid var(--line); background: #fff; position: relative; }
.browser-bar { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(16 * var(--u)); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.browser-bar .dots { display: flex; gap: calc(6 * var(--u)); }
.browser-bar .dots i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #dcdde3; }
.browser-bar .addr { flex: 1; min-width: 0; max-width: calc(520 * var(--u)); margin-inline: auto; padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); background: #fff; border: 1px solid var(--line); font: 400 calc(12.5 * var(--u))/1.2 var(--mono); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-bar .addr b { background: var(--accent); color: var(--ink); font-weight: 400; border-radius: calc(3 * var(--u)); padding-inline: calc(2 * var(--u)); }
.video-tag { position: absolute; right: calc(22 * var(--u)); bottom: calc(22 * var(--u)); display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: rgb(13 13 18 / 88%); color: #fff; font-size: calc(13 * var(--u)); backdrop-filter: blur(calc(6 * var(--u))); }
.video-tag .play { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); }
.video-tag .play svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: currentColor; stroke: none; margin-left: calc(2 * var(--u)); }
.video-tag small { display: block; color: #b9bcc5; font-size: calc(11.5 * var(--u)); }

/* DA de Brandsearch (capturée) */
.bs { --bs-accent: #155dfc; --bs-bg: #f2f1f0; --bs-text: #181b20; --bs-line: #e6e4e1; background: var(--bs-bg); color: var(--bs-text); font-family: Inter, system-ui, sans-serif; }
.bs-head { display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(14 * var(--u)) calc(36 * var(--u)); background: #fff; border-bottom: 1px solid var(--bs-line); }
.bs-head b { font-weight: 700; letter-spacing: -0.02em; margin-right: auto; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.bs-head b i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--bs-accent); }
.bs-head .bs-mark { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); }
.bs-head .bs-link { font-size: calc(13 * var(--u)); color: #4b4f57; }
.bs-btn { display: inline-flex; align-items: center; background: var(--bs-accent, #155dfc); color: #fff; font-weight: 600; font-size: calc(13 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u)); white-space: nowrap; font-family: Inter, sans-serif; }
.bs-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: calc(40 * var(--u)); padding: calc(44 * var(--u)) calc(36 * var(--u)); align-items: start; }
.bs-pill { justify-self: start; font-size: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); background: #fff; border: 1px solid var(--bs-line); }
.bs-left { display: grid; gap: calc(18 * var(--u)); }
.bs-left h3 { font-family: Inter, sans-serif; font-weight: 700; font-size: calc(34 * var(--u)); line-height: 1.1; letter-spacing: -0.03em; }
.bs-sub { color: #4b4f57; font-size: calc(15 * var(--u)); }
.bs-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.bs-keys div { background: #fff; border: 1px solid var(--bs-line); border-radius: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.bs-keys b { font-size: calc(24 * var(--u)); letter-spacing: -0.02em; }
.bs-keys span { font-size: calc(12 * var(--u)); color: #4b4f57; }
.bs-pay { background: #fff; border: 1px solid var(--bs-line); border-radius: calc(12 * var(--u)); overflow: hidden; }
.bs-pay h4 { font-family: Inter, sans-serif; font-size: calc(16 * var(--u)); letter-spacing: -0.015em; padding: calc(14 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--bs-line); }
.bs-pay table { width: 100%; border-collapse: collapse; font-size: calc(14 * var(--u)); }
.bs-pay th { text-align: left; font-weight: 500; font-size: calc(12 * var(--u)); color: #4b4f57; padding: calc(9 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid var(--bs-line); }
.bs-pay td { padding: calc(11 * var(--u)) calc(18 * var(--u)); border-bottom: 1px solid #efeeec; vertical-align: top; }
.bs-pay tr:last-child td { border-bottom: 0; }
.bs-pay td small { display: block; font-size: calc(11.5 * var(--u)); color: #4b4f57; }
.bs-pay .win { color: var(--bs-accent); font-weight: 600; }
.bs-foot { padding: 0 calc(36 * var(--u)) calc(28 * var(--u)); font-size: calc(12 * var(--u)); color: #4b4f57; }

/* Bandeau de chiffres */
.band { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding-block: calc(72 * var(--u)); margin-top: calc(96 * var(--u)); }
.band::before, .band::after { content: ""; position: absolute; width: calc(520 * var(--u)); height: calc(520 * var(--u)); background: rgb(255 255 255 / 4%); transform: rotate(32deg); border-radius: calc(40 * var(--u)); }
.band::before { left: calc(-180 * var(--u)); top: calc(-260 * var(--u)); }
.band::after { right: calc(-160 * var(--u)); bottom: calc(-300 * var(--u)); transform: rotate(-24deg); }
.band .wrap { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.band .stat { display: grid; justify-items: center; text-align: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(24 * var(--u)); }
.band .stat + .stat { border-left: 1px solid rgb(255 255 255 / 14%); }
.band .stat b { font: 700 clamp(calc(48 * var(--u)), 5.4vw, calc(72 * var(--u)))/1 var(--display); letter-spacing: -0.04em; color: var(--accent); }
.band .stat span { font-weight: 500; font-size: calc(16 * var(--u)); max-width: 24ch; color: rgb(255 255 255 / 86%); }

/* Captures produit */
/* Statut court avec point (installation) */
.st { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12 * var(--u)); color: var(--ink-2); white-space: nowrap; }
.st::before { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #a3a8b5; }
.st--ok::before { background: var(--ok); } .st--wait::before { background: var(--wait); }
/* ============ La preuve : copie de la maquette de référence ============
   Mesures relevées sur la référence (écran 1536 × 864), écrites N × --u. --u vaut 1 px sur tablette et mobile ;
   sur écran large, min(largeur / 1536, hauteur / 864) : la section entière, navigation comprise, tient dans la fenêtre. */
.pv { --pv-amber: #e3a03a; position: relative; overflow: hidden; padding-block: 88px 64px; }
.pv__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pv .wrap { position: relative; max-width: none; padding-inline: max(calc(16 * var(--u)), 2.4vw); }
.pv-head { display: grid; justify-items: center; text-align: center; }
.pv-tag { display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--accent-soft); color: #3a3a40; font: 500 calc(13 * var(--u))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.pv-head h2 { margin-top: calc(10 * var(--u)); font-size: calc(58 * var(--u)); line-height: 1.07; letter-spacing: -0.04em; }
.pv-head p { margin-top: calc(9 * var(--u)); font-size: calc(19.3 * var(--u)); line-height: 1.38; color: var(--ink-2); }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)) calc(23 * var(--u)); width: min(100%, calc(1324 * var(--u))); margin: calc(27 * var(--u)) auto 0; }
.pv-card { display: grid; align-content: start; gap: calc(5 * var(--u)); margin: 0; padding: calc(12 * var(--u)) calc(23 * var(--u)) calc(19 * var(--u)) calc(25 * var(--u)); border: 1px solid #eceef2; border-radius: calc(26 * var(--u)); background: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 calc(16 * var(--u)) calc(40 * var(--u)) calc(-24 * var(--u)) rgb(16 24 40 / 20%); }
.pv-card__head { display: flex; align-items: center; gap: calc(18 * var(--u)); min-height: calc(44 * var(--u)); padding-left: calc(6 * var(--u)); }
.pv-card__head h3 { font-size: calc(22 * var(--u)); letter-spacing: -0.03em; }
.pv-card__head > span:last-child { margin-left: auto; color: var(--muted); font-size: calc(13 * var(--u)); text-align: right; }
.pv-ico { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); flex: none; border-radius: calc(12 * var(--u)); background: var(--accent-soft); color: var(--pv-amber); }
.pv-ico svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-ico--fill svg { fill: currentColor; stroke: none; }
.pv-ico--lg { width: calc(57 * var(--u)); height: calc(57 * var(--u)); border-radius: calc(14 * var(--u)); }
.pv-ico--lg svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.pv-box { overflow: hidden; border: 1px solid #e6e8ee; border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 1px calc(2 * var(--u)) rgb(16 24 40 / 4%); }

/* La comparaison */
.pv-table { width: 100%; border-collapse: collapse; table-layout: fixed; color: var(--ink); font-size: calc(14 * var(--u)); }
.pv-table th:nth-child(1) { width: 27.2%; } .pv-table th:nth-child(2) { width: 25.1%; } .pv-table th:nth-child(3) { width: 24.5%; } .pv-table th:nth-child(4) { width: 23.2%; }
.pv-table th { height: calc(31 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(21 * var(--u)); border-bottom: 1px solid #e6e8ee; background: #f6f7f9; font-size: calc(13.8 * var(--u)); font-weight: 500; text-align: left; }
.pv-table td { padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(21 * var(--u)); border-bottom: 1px solid #eceef2; line-height: 1.3; vertical-align: middle; white-space: nowrap; }
.pv-table tr:last-child td { border-bottom: 0; padding-block: calc(5 * var(--u)); }
.pv-table small { display: block; color: var(--muted); font: 400 calc(11 * var(--u))/1.25 var(--mono); }
.pv-table .mono { font: 400 calc(13.5 * var(--u))/1.3 var(--mono); }
.pv-table s { color: var(--muted); text-decoration-color: var(--muted); }
.pv-ok { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--ok-soft); color: var(--ok); font-size: calc(12.5 * var(--u)); font-weight: 600; white-space: nowrap; }
.pv-ok svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 2.6; }
.pv-off { display: inline-grid; grid-template-columns: calc(6 * var(--u)) auto; justify-content: start; align-items: center; column-gap: calc(10 * var(--u)); color: var(--ink-2); font-size: calc(12.8 * var(--u)); }
.pv-off::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #a3a8b5; }
.pv-off small { grid-column: 1 / -1; margin-top: calc(3 * var(--u)); color: var(--muted); font: 400 calc(11 * var(--u))/1.2 var(--sans); }

/* Les extraits officiels */
.pv-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(19 * var(--u)); }
.pv-quote { display: grid; align-content: start; padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) calc(17 * var(--u)); border: 1px solid #e6e8ee; border-radius: calc(14 * var(--u)); background: #fff; box-shadow: 0 1px calc(3 * var(--u)) rgb(16 24 40 / 6%); }
.pv-quote__src { display: flex; align-items: center; gap: calc(9 * var(--u)); height: calc(24 * var(--u)); color: #4b5160; font-size: calc(13.9 * var(--u)); }
.pv-quote__src img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); }
.pv-quote__src svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-left: auto; color: var(--muted); }
.pv-quote b { margin-top: calc(6 * var(--u)); font-size: calc(16.5 * var(--u)); font-weight: 700; line-height: 1.35; }
.pv-quote p { color: var(--ink-2); font-size: calc(12.9 * var(--u)); line-height: 1.32; letter-spacing: -0.012em; }
.pv-quote .pv-price { margin-top: calc(8 * var(--u)); color: var(--ink); font-size: calc(15.6 * var(--u)); line-height: 1; }
.pv-price strong { display: inline-block; padding-bottom: calc(3 * var(--u)); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% calc(4.5 * var(--u)) no-repeat; font: 700 calc(23 * var(--u))/1 var(--sans); letter-spacing: -0.01em; }
.pv-quote .pv-period { margin-top: calc(5 * var(--u)); color: var(--ink); font-size: calc(14.7 * var(--u)); }
.pv-ok--lg { justify-self: start; height: calc(29 * var(--u)); margin-top: calc(8 * var(--u)); padding: 0 calc(14 * var(--u)); font-size: calc(13.8 * var(--u)); }

/* Les changements suspects */
.pv-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(23 * var(--u)); padding: calc(13 * var(--u)) calc(24 * var(--u)) calc(13 * var(--u)) calc(25 * var(--u)); }
.pv-alert__body { display: grid; justify-items: start; }
.pv-alert b { margin-top: calc(3 * var(--u)); font-size: calc(18.4 * var(--u)); font-weight: 700; line-height: 1.25; }
.pv-wait { display: inline-flex; align-items: center; height: calc(24 * var(--u)); margin-top: calc(5 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--wait-soft); color: var(--wait); font-size: calc(13.8 * var(--u)); font-weight: 600; }
.pv-move { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(7 * var(--u)); }
.pv-move s { color: var(--muted); font: 600 calc(26 * var(--u))/1 var(--display); text-decoration-color: var(--muted); }
.pv-move strong { font: 700 calc(33 * var(--u))/1 var(--display); letter-spacing: -0.03em; }
.pv-arrow { width: calc(32 * var(--u)); height: calc(12 * var(--u)); fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-alert .pv-note { margin-top: calc(6 * var(--u)); color: var(--ink-2); font-size: calc(13.8 * var(--u)); }
.pv-acts { display: flex; flex-wrap: wrap; gap: calc(15 * var(--u)); margin-top: calc(7 * var(--u)); }
.pv-acts .fake-btn { min-height: calc(39 * var(--u)); padding-inline: calc(26 * var(--u)); font-size: calc(14.7 * var(--u)); }

/* Votre DA, reprise */
.pv-da { padding: 0 calc(31 * var(--u)) calc(6 * var(--u)) calc(28 * var(--u)); }
.pv-da__row { display: grid; grid-template-columns: calc(191 * var(--u)) minmax(0, 1fr) auto; align-items: center; column-gap: calc(12 * var(--u)); min-height: calc(38 * var(--u)); border-top: 1px solid #eceef2; color: var(--ink); font-size: calc(14.2 * var(--u)); line-height: 1.3; }
.pv-da__row:first-child { min-height: calc(42 * var(--u)); border-top: 0; }
.pv-da__row:nth-child(3) { min-height: calc(51 * var(--u)); }
.pv-da__row:last-child { min-height: calc(57 * var(--u)); }
.pv-sw { display: inline-flex; align-items: center; gap: calc(13 * var(--u)); font: 400 calc(13.8 * var(--u)) var(--mono); }
.pv-sw i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(13 13 18 / 12%); }
.pv-pages { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); height: calc(25 * var(--u)); padding: 0 calc(12 * var(--u)); border: 1px solid #e6e8ee; border-radius: calc(999 * var(--u)); background: #fff; color: var(--ink-2); font-size: calc(13.6 * var(--u)); white-space: nowrap; }
.pv-pages::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--ok); }
.pv-da .bs-btn { height: calc(37 * var(--u)); padding: 0 calc(28 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(15 * var(--u)); }

/* Écran large : la section occupe la fenêtre et suit son échelle, la pastille passe sous la navigation flottante. */
@media (min-width: 1081px) {
  .pv { min-height: 100svh; padding-block: calc(84 * var(--u)) calc(8 * var(--u)); }
}
@media (min-width: 1081px) {
  .site-head.is-scrolled .wrap { max-width: calc(1400 * var(--u)); }
  .site-head.is-scrolled .nav { max-width: min(80vw, calc(1240 * var(--u))); min-height: calc(56 * var(--u)); }  /* navigation large, comme sur la référence */
}
@media (max-width: 1080px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); width: min(100%, calc(720 * var(--u))); }
  .pv-br { display: none; }
}
@media (max-width: 620px) {
  .pv { padding-block: calc(84 * var(--u)) calc(56 * var(--u)); }
  .pv-head h2 { font-size: calc(38 * var(--u)); }
  .pv-head p { font-size: calc(17 * var(--u)); }
  .pv-card { padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(20 * var(--u)); }
  .pv-card__head { flex-wrap: wrap; gap: calc(10 * var(--u)) calc(12 * var(--u)); padding-left: 0; }
  .pv-card__head h3 { font-size: calc(21 * var(--u)); }
  .pv-card__head > span:last-child { flex-basis: 100%; margin-left: 0; text-align: left; }
  .pv-ex { grid-template-columns: minmax(0, 1fr); }
  .pv-table thead { display: none; }
  .pv-table, .pv-table tbody, .pv-table tr, .pv-table td { display: block; }
  .pv-table { table-layout: auto; }
  .pv-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(6 * var(--u)) calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid #eceef2; }
  .pv-table tr:last-child { border-bottom: 0; }
  .pv-table td, .pv-table tr:last-child td { padding: 0; border: 0; white-space: normal; }
  .pv-table td:first-child, .pv-table td:last-child { grid-column: 1 / -1; }
  .pv-table td:first-child { font-weight: 600; }
  .pv-table td[data-l]::before { content: attr(data-l); display: block; color: var(--muted); font: 400 calc(11 * var(--u))/1.4 var(--sans); }
  .pv-alert { grid-template-columns: minmax(0, 1fr); row-gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); }
  .pv-da { padding: calc(4 * var(--u)) calc(14 * var(--u)); }
  .pv-da__row, .pv-da__row:first-child, .pv-da__row:nth-child(3), .pv-da__row:last-child { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: calc(8 * var(--u)) 0; }
  .pv-da__row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
.fake-btn { display: inline-flex; align-items: center; min-height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; border: 1px solid var(--line-strong); background: #fff; }
.fake-btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Étapes */
/* ============ Méthode : fiches épinglées ============ */
.board { position: relative; overflow: hidden; padding: calc(36 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
.board::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(13 13 18 / 7%) 1px, transparent 1px); background-size: 100% calc(32 * var(--u)); background-position: 0 calc(4 * var(--u)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); pointer-events: none; }
.board__inner { position: relative; max-width: calc(1000 * var(--u)); height: calc(860 * var(--u)); margin: 0 auto; }
.board__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.board__path path { fill: none; stroke: #c3c8d1; stroke-width: 2; stroke-dasharray: 8 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) { .board__path path { animation: march 3s linear infinite; } }
@keyframes march { to { stroke-dashoffset: -140; } }
.pins { margin: 0; padding: 0; list-style: none; }
.pin-card { position: absolute; z-index: 1; width: calc(290 * var(--u)); padding: calc(8 * var(--u)); border: 1px solid var(--line); border-radius: calc(24 * var(--u)); background: #fff; box-shadow: var(--shadow-card); transform: rotate(var(--tilt)); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.pin-card:hover { z-index: 3; transform: rotate(0deg) scale(1.04); box-shadow: var(--shadow-float); }
.pin-card:nth-child(1) { top: 0; left: 12%; --tilt: -5deg; }
.pin-card:nth-child(2) { top: calc(110 * var(--u)); right: 12%; --tilt: 5deg; }
.pin-card:nth-child(3) { top: calc(390 * var(--u)); left: 12%; --tilt: -5deg; }
.pin-card:nth-child(4) { top: calc(500 * var(--u)); right: 10%; --tilt: 5deg; }
/* L'épingle : une tête jaune, le point de la marque */
.pin { display: block; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(8 * var(--u)) auto calc(20 * var(--u)); border-radius: 50%; background: var(--accent); box-shadow: inset 0 calc(-3 * var(--u)) 0 rgb(13 13 18 / 14%), 0 calc(3 * var(--u)) calc(6 * var(--u)) rgb(13 13 18 / 26%); }
.pin-card__panel { display: grid; align-content: start; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u)); border: 1px solid var(--line); border-radius: calc(16 * var(--u)); background: var(--bg-2); }
.pin-card__num { margin-bottom: calc(10 * var(--u)); font: 700 calc(46 * var(--u))/1 var(--display); letter-spacing: -0.045em; color: var(--ink); }
.pin-card h3 { font-size: calc(22 * var(--u)); line-height: 1.1; letter-spacing: -0.025em; }
.pin-card p { font-size: calc(14.5 * var(--u)); line-height: 1.5; color: var(--ink-2); }
.pin-card .you { display: inline-flex; align-items: center; justify-self: start; margin-top: calc(4 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); background: #fff; color: var(--ink); font-size: calc(12.5 * var(--u)); font-weight: 600; }
.pin-card--signal .pin-card__panel { border-color: rgb(224 181 58 / 35%); background: var(--accent-soft); }
.pin-card--neutral .you { background: var(--accent-soft); }
.pin-card--ink .pin-card__panel { border-color: var(--ink); background: var(--ink); color: #fff; }
.pin-card--ink .pin-card__num { color: var(--accent); }
.pin-card--ink p { color: rgb(255 255 255 / 74%); }
.pin-card--ink .you { background: var(--accent); }
@media (max-width: 860px) {
  .board { padding-inline: calc(16 * var(--u)); }
  .board__inner { height: auto; }
  .board__path { display: none; }
  .pins { display: grid; justify-items: center; gap: calc(26 * var(--u)); }
  .pins .pin-card { position: relative; inset: auto; width: min(calc(360 * var(--u)), 100%); }  /* annule le placement des fiches sur desktop */
  .pin-card:nth-child(odd) { --tilt: -2deg; }
  .pin-card:nth-child(even) { --tilt: 2deg; }
}
.mini-sw { display: flex; gap: calc(6 * var(--u)); }
.mini-sw i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; border: 1px solid var(--line); }
.mini-list { width: 100%; display: grid; gap: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); }
.mini-list div { display: flex; justify-content: space-between; align-items: center; padding: calc(6 * var(--u)) calc(10 * var(--u)); background: #fff; border: 1px solid var(--line); border-radius: calc(8 * var(--u)); }
.mini-list .on { border-color: var(--ink); box-shadow: 0 0 0 calc(3 * var(--u)) var(--accent-soft); }

/* Exemples : trois concurrents, trois verdicts. Mise en page inspirée d'un bloc Shadcnblocks. */
.vt-sec { overflow-x: clip; }
.vt-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: calc(64 * var(--u)); align-items: start; }
.vt-bleed { --bleed: calc(66 * var(--u)); margin-left: calc(-1 * var(--bleed));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(66 * var(--u))), linear-gradient(180deg, #000 55%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 calc(66 * var(--u))), linear-gradient(180deg, #000 55%, transparent 98%);
  mask-composite: intersect; }
.vt-card { background: #fff; border: 1px solid var(--line); border-radius: calc(14 * var(--u)); overflow: hidden; box-shadow: 0 1px calc(2 * var(--u)) rgb(16 24 40 / 4%); }
.vt { width: 100%; border-collapse: collapse; font-size: calc(13.5 * var(--u)); }
.vt th { text-align: left; font: 500 calc(12 * var(--u))/1.2 var(--sans); color: var(--muted); background: var(--bg-2); padding: calc(13 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--line); white-space: nowrap; }
.vt th:first-child { padding-left: calc(66 * var(--u)); }
.vt td { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.vt td:first-child { padding-left: calc(16 * var(--u)); font-weight: 500; }
.vt .ref { display: inline-block; width: calc(40 * var(--u)); margin-right: calc(10 * var(--u)); font: 400 calc(11.5 * var(--u))/1 var(--mono); color: var(--muted); }
.vt .crit { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.vt .fav { display: inline-grid; flex: none; }
.vt .m-fav, .vt .m-name, .vt .m-pill { display: none; }
.vpill { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u)); border: 1px solid; border-radius: calc(999 * var(--u)); font: 500 calc(12 * var(--u))/1 var(--sans); white-space: nowrap; }
.vpill::before { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: currentColor; }
.vpill--ok { color: var(--ok); background: var(--ok-soft); border-color: rgb(10 115 70 / 20%); }
.vpill--wait { color: var(--wait); background: var(--wait-soft); border-color: rgb(151 86 0 / 22%); }
.vpill--off { color: var(--muted); background: #f1f2f5; border-color: var(--line); }
.vpill--out { color: var(--muted); background: #fff; border-color: var(--line-strong); border-style: dashed; }
.vpill--out::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.vals { display: inline-flex; align-items: baseline; gap: calc(8 * var(--u)); font: 400 calc(13 * var(--u))/1.35 var(--mono); }
.vals b { font-weight: 400; color: var(--ink); }
.vals .them { display: inline-flex; align-items: baseline; gap: calc(7 * var(--u)); color: var(--ink-2); }
.vals i { font: 400 calc(11.5 * var(--u))/1 var(--sans); font-style: normal; color: var(--muted); }
.vals small { font: 600 calc(11 * var(--u))/1 var(--sans); color: var(--wait); }
.vals s { color: var(--muted); text-decoration-color: var(--ink-2); }
.vals .na { color: var(--muted); }
.cname { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 500; }
.vt-copy { display: grid; gap: calc(22 * var(--u)); align-content: start; padding-top: calc(4 * var(--u)); }
.vt-copy h2 { font-size: clamp(calc(40 * var(--u)), 4.6vw, calc(62 * var(--u))); line-height: 1.02; letter-spacing: -0.045em; }
.vt-lede { font-size: calc(18.5 * var(--u)); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.vt-checks { list-style: none; margin: calc(10 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)) calc(24 * var(--u)); }
.vt-checks li { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr); gap: calc(10 * var(--u)); align-items: start; font-size: calc(15.5 * var(--u)); font-weight: 500; line-height: 1.4; }
.vt-checks svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); stroke-width: 1.6; }
.vt-src { margin-top: calc(10 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--line); font-size: calc(12.5 * var(--u)); line-height: 1.5; color: var(--muted); }

/* Installation */
.install { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(64 * var(--u)); align-items: center; }
.avatar svg, .face svg { width: 100%; height: 100%; display: block; }

/* Avis (exemples), repris de G */
.voices { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(20 * var(--u)); }
.voice-col { display: grid; gap: calc(20 * var(--u)); }
.voice { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.voice blockquote { margin: 0; flex: 1; font-size: calc(16 * var(--u)); line-height: 1.6; }
.voice--big { padding: calc(36 * var(--u)); justify-content: space-between; }
.voice--big blockquote { font: 600 calc(28 * var(--u))/1.3 var(--display); letter-spacing: -0.025em; }
.voice--big blockquote::before { content: "«\00a0"; }
.voice--big blockquote::after { content: "\00a0»"; }
.ex-chip { align-self: flex-end; margin-bottom: calc(-6 * var(--u)); font: 500 calc(11 * var(--u))/1 var(--sans); color: var(--muted); border: 1px dashed var(--line-strong); border-radius: calc(999 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)); }
.who { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.who b { display: block; font-weight: 600; font-size: calc(14.5 * var(--u)); }
.who small { display: block; color: var(--muted); font-size: calc(13 * var(--u)); }
.avatar { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; overflow: hidden; flex: none; display: block; }
.voice--big .avatar { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }

/* Illustration de l'installation en appel */
.call { position: relative; margin: 0; padding: calc(20 * var(--u)); border-radius: calc(26 * var(--u)); background: radial-gradient(120% 90% at 20% 0%, var(--accent-soft), #eef0f4 62%); border: 1px solid var(--line); }
.call-win { border-radius: calc(16 * var(--u)); overflow: hidden; background: #141519; color: #e9e9ec; box-shadow: var(--shadow-float); }
.call-top { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: #b9bcc5; border-bottom: 1px solid #26272e; }
.call-top .rec { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(3 * var(--u)) rgb(242 201 76 / 25%); }
.call-top .call-time { margin-left: auto; font: 400 calc(11.5 * var(--u))/1 var(--mono); }
.call-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(128 * var(--u)); gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); }
.share { border-radius: calc(10 * var(--u)); background: #1d1e24; border: 1px solid #2a2b33; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.share-bar { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid #2a2b33; font-size: calc(11.5 * var(--u)); color: #a7aab3; }
.share-bar .dots { display: flex; gap: calc(5 * var(--u)); }
.share-bar .dots i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #3a3b44; }
.code { margin: 0; flex: 1; padding: calc(12 * var(--u)) calc(14 * var(--u)); font: 400 calc(11.5 * var(--u))/1.7 var(--mono); color: #e6e6ea; white-space: pre; overflow-x: auto; }
.code .c { color: #8b8f99; }
.code .s { color: var(--accent); }
.code .k { color: #fff; font-weight: 600; }
.share-ok { margin: 0; padding: calc(9 * var(--u)) calc(12 * var(--u)); border-top: 1px solid #2a2b33; }
.share-ok .st { color: #d9dbe0; }
.share-ok .st--ok::before { background: #3fcf8e; }
.tiles { display: grid; gap: calc(10 * var(--u)); }
.tile { position: relative; border-radius: calc(10 * var(--u)); background: #23242b; display: grid; place-items: center; min-height: calc(112 * var(--u)); overflow: hidden; }
.tile.speaking { box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--accent); }
.face { width: calc(66 * var(--u)); height: calc(66 * var(--u)); border-radius: 50%; overflow: hidden; display: block; }
.tile-name { position: absolute; left: calc(7 * var(--u)); bottom: calc(7 * var(--u)); font-size: calc(10.5 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: calc(6 * var(--u)); background: rgb(0 0 0 / 55%); color: #fff; }
.call-ctrl { display: flex; justify-content: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) 0 calc(14 * var(--u)); }
.call-ctrl span { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #2a2b33; color: #e9e9ec; }
.call-ctrl span.on { background: var(--accent); color: var(--ink); }
.call-ctrl span.end { width: auto; padding-inline: calc(14 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(12 * var(--u)); }
.call-ctrl svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.call .callcard { position: absolute; right: calc(24 * var(--u)); bottom: calc(-30 * var(--u)); background: #fff; border: 1px solid var(--line); border-radius: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); box-shadow: var(--shadow-float); display: grid; gap: calc(4 * var(--u)); font-size: calc(13 * var(--u)); min-width: calc(210 * var(--u)); transform: rotate(-2deg); }
@media (max-width: 1000px) {
  .call .callcard { position: static; transform: none; margin-top: calc(14 * var(--u)); justify-self: start; width: max-content; max-width: 100%; }
}
@media (max-width: 720px) {
  .call { padding: calc(10 * var(--u)); border-radius: calc(20 * var(--u)); }
  .call-body { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tile { min-height: calc(96 * var(--u)); }
}
.callcard b { font-weight: 600; }
.callcard span { color: var(--muted); font-size: calc(12 * var(--u)); }
.install-txt { display: grid; gap: calc(20 * var(--u)); justify-items: start; }
.install-txt h2 { font-size: clamp(calc(34 * var(--u)), 3.8vw, calc(50 * var(--u))); line-height: 1.08; letter-spacing: -0.035em; }
.install-txt p { font-size: calc(17 * var(--u)); color: var(--ink-2); max-width: 50ch; }
.plat { display: grid; gap: calc(10 * var(--u)); width: 100%; }
.plat div { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--line); border-radius: calc(14 * var(--u)); font-size: calc(14.5 * var(--u)); }
.plat div span:last-child { color: var(--muted); text-align: right; }

/* Tarifs */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(22 * var(--u)); align-items: stretch; }
.plan { border: 1px solid var(--line); border-radius: var(--r-card); padding: calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); background: #fff; }
.plan--hl { border: 1.5px solid var(--ink); box-shadow: 0 0 0 calc(5 * var(--u)) var(--accent-ring), var(--shadow-card); }
.plan h3 { font-size: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.plan .tag, .free-strip .tag { margin-left: auto; font: 600 calc(11.5 * var(--u))/1 var(--sans); color: var(--ink); background: var(--accent); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); letter-spacing: 0; }
.free-strip .tag { margin-left: 0; }
.plan .tag--muted { color: var(--muted); background: var(--bg-2); }
.price { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.price b { font: 700 calc(58 * var(--u))/1 var(--display); letter-spacing: -0.045em; }
.price span { color: var(--muted); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
.plan li { display: flex; gap: calc(10 * var(--u)); align-items: baseline; }
.plan li svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: calc(3 * var(--u)); border-radius: 50%; background: var(--accent); color: var(--ink); flex: none; transform: translateY(calc(3 * var(--u))); stroke-width: 3; }
.plan li small { color: var(--muted); }
.plan > .btn, .plan > .note { margin-top: auto; }
.plan--off { background: var(--bg-2); }
.plan--off .price b { color: var(--muted); }
.note { font-size: calc(13.5 * var(--u)); color: var(--muted); }

/* Questions, reprises de G */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: calc(56 * var(--u)); align-items: start; }
.faq-grid .head { position: sticky; top: calc(32 * var(--u)); margin-bottom: 0; }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: calc(20 * var(--u)); min-height: calc(70 * var(--u)); font: 700 calc(19 * var(--u))/1.3 var(--display); letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u)); display: grid; place-items: center; background: #fff; border: 1px solid var(--line); font: 400 calc(18 * var(--u))/1 var(--sans); }
.faq details[open] summary::after { content: "−"; background: var(--accent); border-color: var(--accent); }
.faq details p { padding-bottom: calc(24 * var(--u)); color: var(--ink-2); max-width: 62ch; }

/* Appel final, repris de G */
.final { background: var(--ink); color: #fff; padding-block: calc(96 * var(--u)); position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: -40% auto auto -10%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgb(242 201 76 / 14%), transparent); pointer-events: none; }
.final .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: calc(48 * var(--u)); align-items: end; }
.final h2 { font-size: clamp(calc(32 * var(--u)), 3.8vw, calc(50 * var(--u))); line-height: 1.06; letter-spacing: -0.04em; }
.final p { color: #c3c5cb; margin-top: calc(14 * var(--u)); max-width: 52ch; }
.trial { display: flex; gap: calc(8 * var(--u)); width: 100%; }
.field { flex: 1; min-width: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: calc(50 * var(--u)); padding-inline: calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; color: var(--muted); }
.field input { border: 0; outline: 0; background: transparent; width: 100%; font-size: calc(16 * var(--u)); min-height: calc(46 * var(--u)); color: var(--ink); }
.field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.final .btn { min-height: calc(50 * var(--u)); padding-inline: calc(20 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(15 * var(--u)); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-deep); }
.final .note { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); color: #a3a7b1; }

/* Pied */
.foot { border-top: 1px solid var(--line); padding-block: calc(48 * var(--u)) calc(56 * var(--u)); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(48 * var(--u)); }
.foot p { font-size: calc(13.5 * var(--u)); color: var(--muted); margin-top: calc(14 * var(--u)); max-width: 40ch; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
.foot h4 { font-size: calc(13 * var(--u)); font-weight: 600; margin-bottom: calc(10 * var(--u)); }
.foot-cols a { display: flex; align-items: center; min-height: max(44px, calc(44 * var(--u))); font-size: calc(14 * var(--u)); color: var(--ink-2); text-decoration: none; }
.foot-cols a:hover { color: var(--ink); }

/* ============ Responsive ============ */
@media (max-width: 1240px) {
  .floaters { display: none; }
  .hero-in { padding-top: calc(96 * var(--u)); }
}
@media (max-width: 1000px) {
  .bs-body { grid-template-columns: minmax(0, 1fr); gap: calc(24 * var(--u)); }
  .voices, .faq-grid, .final .wrap { grid-template-columns: minmax(0, 1fr); }
  .faq-grid .head { position: static; }
  .install { grid-template-columns: minmax(0, 1fr); gap: calc(40 * var(--u)); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: calc(520 * var(--u)); margin: 0 auto; }
}
@media (max-width: 720px) {
  .hero-in { padding-top: calc(64 * var(--u)); gap: calc(22 * var(--u)); }
  .hero h1 { font-size: calc(40 * var(--u)); }
  .hero h1 .hl { white-space: normal; }
  .hero .sub { font-size: calc(17 * var(--u)); }
  .pill-form { flex-direction: column; align-items: stretch; border-radius: calc(22 * var(--u)); padding: calc(8 * var(--u)); }
  .pill-form > svg { display: none; }
  .pill-form input { padding-inline: calc(12 * var(--u)); }
  .demo { margin-top: calc(56 * var(--u)); }
  .frame { padding: calc(6 * var(--u)); border-radius: calc(20 * var(--u)); }
  .bs-head { padding: calc(12 * var(--u)) calc(16 * var(--u)); }
  .bs-head .bs-link { display: none; }
  .bs-body { padding: calc(24 * var(--u)) calc(16 * var(--u)); }
  .bs-left h3 { font-size: calc(26 * var(--u)); }
  .bs-foot { padding: 0 calc(16 * var(--u)) calc(20 * var(--u)); }
  .video-tag { position: static; margin: 0 calc(12 * var(--u)) calc(12 * var(--u)); }
  .band .wrap { grid-template-columns: minmax(0, 1fr); gap: calc(28 * var(--u)); }
  .band .stat + .stat { border-left: 0; border-top: 1px solid rgb(255 255 255 / 22%); padding-top: calc(28 * var(--u)); }
  .sec { padding-block: calc(80 * var(--u)); }
  .sec-head { margin-bottom: calc(44 * var(--u)); }
  .bs-pay th, .bs-pay td { padding-inline: calc(12 * var(--u)); }
  .bs-pay td:first-child { white-space: nowrap; }
  .trial { flex-direction: column; }
  .voice--big { padding: calc(26 * var(--u)); }
  .voice--big blockquote { font-size: calc(22 * var(--u)); }
  .final { padding-block: calc(64 * var(--u)); }
  .head { margin-bottom: calc(32 * var(--u)); }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Exemples en tableau : tablette et mobile */
@media (max-width: 1180px) {
  .vt-grid { grid-template-columns: minmax(0, 1fr); gap: calc(44 * var(--u)); }
  .vt-copy { order: -1; max-width: calc(640 * var(--u)); }
  .vt-bleed { max-width: calc(calc(820 * var(--u)) + var(--bleed)); }
}
@media (max-width: 720px) {
  .vt-bleed { margin-left: 0; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 98%); mask-image: linear-gradient(180deg, #000 60%, transparent 98%); }
  .vt .ref, .vt th:nth-child(2), .vt td:nth-child(2), .vt th:nth-child(4), .vt td:nth-child(4) { display: none; }
  .vt .m-pill { display: inline-flex; margin-top: calc(6 * var(--u)); }
  .vt .m-fav { display: inline-grid; }
  .vt .m-name { display: block; margin-top: calc(2 * var(--u)); font: 400 calc(11.5 * var(--u))/1.3 var(--sans); color: var(--muted); }
  .vt th, .vt td, .vt th:first-child, .vt td:first-child { padding-inline: calc(10 * var(--u)); }
  .vt td, .vt th { white-space: normal; }
  .vt .crit { align-items: flex-start; }
  .vals { display: grid; gap: calc(3 * var(--u)); }
  .vt-copy h2 { font-size: calc(40 * var(--u)); }
  .vt-checks { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Une section par écran ============
   --u vaut 1 px de la maquette (écran 1536 × 864). Sur écran large, la page entière suit l'échelle de la fenêtre :
   chaque section tient dans l'écran avec la navigation. Les cibles tactiles gardent 44 px au minimum. */
:root { --u: 1px; }
@media (min-width: 1081px) {
  :root { --u: clamp(0.6875px, min(100vw / 1536, 100svh / 864), 1.25px); }
  .hero { min-height: 100svh; padding-bottom: calc(16 * var(--u)); }
  .sec { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: calc(90 * var(--u)) calc(16 * var(--u)); }
  .sec > .wrap { width: 100%; }
  .demo-sec .demo { margin-top: 0; }
}
@media (max-width: 1080px) {
  #methode, #exemples, #tarifs, .demo-sec { padding-top: 40px; }
}

/* Étiquette de section : la pastille de « La preuve » */
.sec .label, .demo-sec .label { display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: 999px; background: var(--accent-soft); color: #3a3a40; font: 500 calc(13 * var(--u))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }

/* Vagues jaunes en fond, alternées d'une section à l'autre */
.sec { isolation: isolate; overflow: hidden; }
.sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ribbons) center / cover no-repeat; scale: var(--rx, 1) var(--ry, 1); }

/* Méthode : quatre fiches sur une rangée, en quinconce */
@media (min-width: 861px) {
  .board__inner { max-width: calc(1324 * var(--u)); height: calc(410 * var(--u)); }
  .pin-card:nth-child(n) { top: 0; right: auto; left: calc((100% - calc(290 * var(--u))) * var(--i) / 3); }
  .pin-card:nth-child(1) { --i: 0; --tilt: -4deg; }
  .pin-card:nth-child(2) { --i: 1; top: calc(64 * var(--u)); --tilt: 4deg; }
  .pin-card:nth-child(3) { --i: 2; --tilt: -4deg; }
  .pin-card:nth-child(4) { --i: 3; top: calc(64 * var(--u)); --tilt: 4deg; }
}


/* Pastille d'étiquette : jamais étirée par la grille de son en-tête */
.sec .label, .demo-sec .label, .band .label { width: max-content; }
/* Bandeau des chiffres et appel final : un écran chacun, comme les sections */
.band__label { grid-column: 1 / -1; display: flex; justify-content: center; margin-bottom: calc(36 * var(--u)); }
.band .label { display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: 999px; background: rgb(255 255 255 / 10%); color: var(--accent); font: 500 calc(13 * var(--u))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
@media (min-width: 1081px) {
  .band { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; margin-top: 0; padding-block: calc(90 * var(--u)) calc(16 * var(--u)); }
  .band > .wrap { width: 100%; }
  .band .stat b { font-size: calc(120 * var(--u)); }
  .band .stat span { font-size: calc(19 * var(--u)); }
  .final { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: calc(90 * var(--u)) calc(16 * var(--u)); }
  .final > .wrap { width: 100%; }
  .final h2 { font-size: calc(64 * var(--u)); }
  .final p { font-size: calc(19 * var(--u)); }
}

/* ============ Écran par écran : l'espace, le rythme, le fond ============
   Sur écran large, chaque section est un écran : contenu sur la largeur de « La preuve » (1324u), sans grand vide.
   Fond : un seul motif, les rubans jaunes flous de « La preuve », alternés d'un écran à l'autre, atténués sur fond encre. */
:root { --ribbons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 864' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23f2c94c' stop-opacity='.36'/%3E%3Cstop offset='.7' stop-color='%23f2c94c' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%23f2c94c' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23f2c94c' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23f2c94c' stop-opacity='.26'/%3E%3Cstop offset='1' stop-color='%23f2c94c' stop-opacity='.34'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M -80 345 C 40 320, 150 250, 330 135' fill='none' stroke='url(%23l)' stroke-width='96' stroke-linecap='round' filter='url(%23b)'/%3E%3Cpath d='M -90 245 C 0 225, 70 190, 170 120' fill='none' stroke='url(%23l)' stroke-width='44' stroke-linecap='round' filter='url(%23b)' opacity='.55'/%3E%3Cpath d='M 1350 318 C 1420 290, 1480 262, 1600 238' fill='none' stroke='url(%23r)' stroke-width='78' stroke-linecap='round' filter='url(%23b)'/%3E%3C/svg%3E"); }
@media (min-width: 1081px) {
  :root { --u: clamp(0.6875px, min(100vw / 1536, 100svh / 864), 1.6px); }
  .sec > .wrap, .band > .wrap, .final > .wrap, .foot > .wrap { max-width: calc(1536 * var(--u)); padding-inline: calc(106 * var(--u)); }
  .sec-head h2, .head h2, .vt-copy h2, .install-txt h2 { font-size: calc(58 * var(--u)); line-height: 1.06; }
}

/* Rubans : un écran sur deux en miroir ; sur fond encre, à mi-intensité */
.demo-sec, #methode, #avis, #tarifs { --rx: -1; }
.hero-bg { background-image: var(--ribbons), radial-gradient(60% 46% at 50% 18%, var(--accent-soft), transparent 70%), linear-gradient(rgb(16 24 40 / 4.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(16 24 40 / 4.5%) 1px, transparent 1px);
  background-size: cover, auto, calc(101 * var(--u)) calc(101 * var(--u)), calc(101 * var(--u)) calc(101 * var(--u)); background-position: center, 0 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, repeat, repeat; }
.band, .final { isolation: isolate; }
.band::before, .final::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: -1; border-radius: 0; transform: none; pointer-events: none; background: var(--ribbons) center / cover no-repeat; opacity: .36; }
.band::before { scale: -1 -1; }
.final::before { scale: 1 -1; opacity: .26; }
/* Aucune ligne entre deux sections : les rubans sont calés en haut de leur écran (ils ne sont plus rognés quand l'écran
   est plus large que 16:9) et s'effacent avant les bords ; toutes les sections claires partagent le même fond blanc. */
.sec::before, .band::before, .final::before { background-position: center top;
  -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.pv__bg { -webkit-mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.sec--alt { background: var(--bg); }
.voice, .faq-help { box-shadow: var(--shadow-card); }
/* Les cartes de « La preuve » touchent presque le bas de l'écran : leur ombre ne doit pas être coupée net. */
.pv { overflow: visible; }
.band::after { content: none; }

/* ============ Bandeau des chiffres ============ */
.band .stat small { font: 400 calc(13 * var(--u))/1.5 var(--mono); color: rgb(255 255 255 / 62%); max-width: 34ch; }
@media (min-width: 1081px) {
  .band .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto repeat(3, minmax(0, 1fr)); }
  .band__label { justify-content: flex-start; margin-bottom: calc(22 * var(--u)); }
  .band .stat { grid-template-columns: calc(480 * var(--u)) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: calc(48 * var(--u)); row-gap: calc(14 * var(--u)); justify-items: start; align-items: center; text-align: left; padding: calc(30 * var(--u)) 0; border-top: 1px solid rgb(255 255 255 / 14%); }
  .band .stat + .stat { border-left: 0; }
  .band .stat b { grid-row: 1 / 3; font-size: calc(168 * var(--u)); line-height: .8; letter-spacing: -0.05em; }
  .band .stat span { align-self: end; max-width: none; font: 600 calc(31 * var(--u))/1.18 var(--display); letter-spacing: -0.02em; color: #fff; }
  .band .stat small { align-self: start; max-width: none; font-size: calc(15 * var(--u)); }
}

/* ============ Méthode : fiches un peu plus grandes ============ */
@media (min-width: 861px) {
  .board__inner { height: calc(452 * var(--u)); }
  .pin-card { width: calc(304 * var(--u)); }
  .pin-card:nth-child(n) { left: calc((100% - calc(304 * var(--u))) * var(--i) / 3); }
  .pin-card:nth-child(2), .pin-card:nth-child(4) { top: calc(70 * var(--u)); }
}
@media (min-width: 1081px) {
  .pin-card__num { font-size: calc(52 * var(--u)); }
  .pin-card h3 { font-size: calc(24 * var(--u)); }
  .pin-card p { font-size: calc(15.5 * var(--u)); }
  .pin-card .you { font-size: calc(13.5 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); }
}

/* ============ Exemples ============ */
@media (min-width: 1081px) {
  .vt-grid { align-items: center; }
}

/* ============ Avis : toute la largeur, la grande citation sur fond encre ============ */
@media (min-width: 1081px) {
  #avis .head { grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(48 * var(--u)); max-width: none; margin-bottom: calc(32 * var(--u)); }
  #avis .head > * { grid-column: 1; }
  #avis .head .sec-note { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; max-width: 30ch; padding-bottom: calc(8 * var(--u)); text-align: right; font-size: calc(15 * var(--u)); }
  .voices { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: calc(24 * var(--u)); min-height: calc(540 * var(--u)); }
  .voice-col { gap: calc(24 * var(--u)); }
  .voice { padding: calc(32 * var(--u)) calc(34 * var(--u)); gap: calc(18 * var(--u)); }
  .voice blockquote { font-size: calc(19.5 * var(--u)); line-height: 1.55; }
  .voice .avatar { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
  .who { gap: calc(14 * var(--u)); }
  .who b { font-size: calc(16 * var(--u)); }
  .who small { font-size: calc(14 * var(--u)); }
  .ex-chip { font-size: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(11 * var(--u)); }
  .voice--big { padding: calc(48 * var(--u)) calc(52 * var(--u)); }
  .voice--big blockquote { flex: none; font-size: calc(40 * var(--u)); line-height: 1.22; }
  .voice--big .avatar { width: calc(68 * var(--u)); height: calc(68 * var(--u)); }
  .voice--big .who b { font-size: calc(18 * var(--u)); }
  .voice--big .who small { font-size: calc(15 * var(--u)); }
}
.voice--big { background: var(--ink); border-color: var(--ink); color: #fff; }
.voice--big .who small { color: #a3a7b1; }
.voice--big .ex-chip { color: #c3c5cb; border-color: rgb(255 255 255 / 30%); }

/* ============ Installation : l'appel en grand ============ */
@media (min-width: 1081px) {
  .install { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: calc(88 * var(--u)); }
  .call { padding: calc(28 * var(--u)); border-radius: calc(32 * var(--u)); }
  .call-win { border-radius: calc(20 * var(--u)); }
  .call-top { gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); font-size: calc(14 * var(--u)); }
  .call-top .rec { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
  .call-top .call-time { font-size: calc(13 * var(--u)); }
  .call-body { grid-template-columns: minmax(0, 1fr) calc(188 * var(--u)); gap: calc(14 * var(--u)); padding: calc(14 * var(--u)); }
  .share { border-radius: calc(12 * var(--u)); }
  .share-bar { padding: calc(11 * var(--u)) calc(14 * var(--u)); font-size: calc(13 * var(--u)); }
  .share-bar .dots i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
  .code { padding: calc(20 * var(--u)) calc(22 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.8; }
  .share-ok { padding: calc(13 * var(--u)) calc(16 * var(--u)); }
  .share-ok .st { font-size: calc(14 * var(--u)); }
  .tiles { gap: calc(14 * var(--u)); }
  .tile { min-height: calc(170 * var(--u)); border-radius: calc(12 * var(--u)); }
  .face { width: calc(92 * var(--u)); height: calc(92 * var(--u)); }
  .tile-name { left: calc(9 * var(--u)); bottom: calc(9 * var(--u)); font-size: calc(12.5 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); }
  .call-ctrl { gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) 0 calc(20 * var(--u)); }
  .call-ctrl span { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  .call-ctrl span.end { padding-inline: calc(18 * var(--u)); font-size: calc(14 * var(--u)); }
  .call-ctrl svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .call .callcard { right: calc(30 * var(--u)); bottom: calc(-34 * var(--u)); gap: calc(5 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); min-width: calc(250 * var(--u)); font-size: calc(15 * var(--u)); }
  .callcard span { font-size: calc(13.5 * var(--u)); }
  .install-txt { gap: calc(24 * var(--u)); }
  .install-txt p { font-size: calc(19 * var(--u)); line-height: 1.55; max-width: 46ch; }
  .plat { gap: calc(12 * var(--u)); }
  .plat div { padding: calc(18 * var(--u)) calc(22 * var(--u)); border-radius: calc(16 * var(--u)); font-size: calc(16.5 * var(--u)); }
}

/* ============ Tarifs ============ */
@media (min-width: 1081px) {
  .plans { gap: calc(28 * var(--u)); }
  .plan { padding: calc(38 * var(--u)) calc(36 * var(--u)); gap: calc(24 * var(--u)); }
  .plan h3 { font-size: calc(26 * var(--u)); }
  .plan .tag { font-size: calc(12.5 * var(--u)); padding: calc(7 * var(--u)) calc(12 * var(--u)); }
  .price b { font-size: calc(68 * var(--u)); }
  .price span { font-size: calc(16 * var(--u)); }
  .plan ul { gap: calc(15 * var(--u)); font-size: calc(16.5 * var(--u)); }
  .plan li svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .plan .note { font-size: calc(14.5 * var(--u)); }
}

/* ============ Questions ============ */
.faq-help { display: grid; justify-items: start; gap: calc(16 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.faq-help p { color: var(--ink-2); font-size: calc(16 * var(--u)); }
@media (min-width: 1081px) {
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(96 * var(--u)); align-items: center; }
  .faq-grid .head { position: static; gap: calc(18 * var(--u)); }
  .faq-help { padding: calc(28 * var(--u)) calc(30 * var(--u)); }
  .faq-help p { font-size: calc(18 * var(--u)); }
  .faq summary { min-height: calc(80 * var(--u)); font-size: calc(22 * var(--u)); }
  .faq summary::after { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(20 * var(--u)); }
  .faq details p { padding-bottom: calc(26 * var(--u)); font-size: calc(17.5 * var(--u)); line-height: 1.6; }
}

/* ============ Appel final et pied : le dernier écran ============ */
.closing { background: var(--ink); }
.final-fl { display: none; }
.foot { border-top: 1px solid rgb(255 255 255 / 12%); color: #fff; }
.foot p { color: rgb(255 255 255 / 62%); }
.foot h4 { color: #fff; }
.foot-cols a { color: #c3c5cb; }
.foot-cols a:hover { color: #fff; }
.foot .logo { color: #fff; }
@media (min-width: 1081px) {
  .closing { display: flex; flex-direction: column; min-height: 100svh; }
  .closing .final { flex: 1; min-height: 0; padding-block: calc(90 * var(--u)) calc(40 * var(--u)); }
  .final .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: calc(34 * var(--u)); text-align: center; }
  .final h2 { max-width: calc(980 * var(--u)); font-size: calc(72 * var(--u)); line-height: 1.04; }
  .final p { max-width: 52ch; margin-inline: auto; margin-top: calc(20 * var(--u)); font-size: calc(20 * var(--u)); }
  .final .trial { width: calc(620 * var(--u)); gap: calc(10 * var(--u)); }
  .final .field { min-height: calc(60 * var(--u)); padding-inline: calc(22 * var(--u)); border-radius: 999px; }
  .final .field input { font-size: calc(17 * var(--u)); }
  .final .btn { min-height: calc(60 * var(--u)); padding-inline: calc(28 * var(--u)); border-radius: 999px; font-size: calc(16.5 * var(--u)); }
  .final .note { margin-top: calc(14 * var(--u)); font-size: calc(14 * var(--u)); }
  .foot { padding-block: calc(36 * var(--u)) calc(28 * var(--u)); }
  .foot .wrap { gap: calc(48 * var(--u)); }
}
@media (min-width: 1241px) {
  .final-fl { display: block; position: absolute; inset: 0; max-width: calc(1500 * var(--u)); margin: 0 auto; pointer-events: none; }
  .final-fl .fl { background: rgb(255 255 255 / 96%); border-color: transparent; box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) calc(-18 * var(--u)) rgb(0 0 0 / 60%); font-size: calc(14 * var(--u)); }
  .final-fl .fl b { color: var(--ink); background: var(--accent); border-radius: calc(4 * var(--u)); padding: calc(2 * var(--u)) calc(5 * var(--u)); font-weight: 400; }
  .final-fl .ff-1 { top: 47%; left: 3%; transform: rotate(-5deg); }
  .final-fl .ff-2 { top: 20%; right: 4%; transform: rotate(4deg); }
  .final-fl .ff-3 { top: 75%; left: 8%; transform: rotate(4deg); }
  .final-fl .ff-4 { top: 56%; right: 4%; transform: rotate(-4deg); }
  .final-fl .ff-4 svg { color: var(--ok); stroke-width: 2.4; }
}

/* ============ Défilement : un écran à la fois ============ */
@media (min-width: 1081px) and (min-height: 600px) {
  html { scroll-snap-type: y mandatory; }
  .hero, .sec, .band, .pv, .closing { scroll-snap-align: start; }
  section[id] { scroll-margin-top: 0; }
}

/* ============ Hero : cartes flottantes agrandies ============
   Tout le contenu des cartes suit --u : on l'agrandit d'un tiers dans .floaters. Les cartes s'écartent vers les bords
   (jusqu'à 1760 px de la maquette sur un écran plus large que 16:9) et se placent en % de la hauteur de l'écran. */
@media (min-width: 1241px) {
  .floaters { --u: calc(1.32 * clamp(0.6875px, min(100vw / 1536, 100svh / 864), 1.6px)); max-width: none; width: min(100%, calc(1333 * var(--u))); }
  .fl-1 { top: 13.5%; left: 2.5%; }
  .fl-2 { top: 19%; right: 2%; }
  .fl-3 { top: 47%; left: 1.5%; }
  .fl-4 { top: 41%; right: 1%; }
  .fl-5 { top: 66%; left: 3%; }
  .fl-6 { top: 75%; right: 5%; }
}

/* ============ Navigation agrandie ============
   Sur écran large, la barre prend la largeur du contenu (1324u) et grandit : logo, liens et bouton d'aperçu compris.
   Au défilement, elle se resserre un peu, en restant plus grande qu'avant. */
@media (min-width: 1081px) {
  :root { --nav-h: calc(100 * var(--u)); }
  .site-head .wrap, .site-head.is-scrolled .wrap { max-width: calc(1536 * var(--u)); padding-inline: calc(106 * var(--u)); }
  .site-head.is-scrolled .wrap { padding-top: calc(6 * var(--u)); }
  .nav { max-width: none; min-height: calc(84 * var(--u)); gap: calc(24 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(32 * var(--u)); }
  .site-head.is-scrolled .nav { max-width: calc(1240 * var(--u)); min-height: calc(68 * var(--u)); }
  .logo { gap: calc(12 * var(--u)); font-size: calc(25 * var(--u)); }
  .logo svg { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .nav-links { gap: calc(4 * var(--u)); }
  .nav-link { min-height: max(44px, calc(48 * var(--u))); padding-inline: calc(18 * var(--u)); font-size: calc(16.5 * var(--u)); background-position: calc(18 * var(--u)) 0; }
  .nav-link.is-active { background-size: calc(100% - calc(36 * var(--u))) 100%; }
  .nav-link[aria-controls].is-active { background-size: calc(100% - calc(58 * var(--u))) 100%; }
  .nav-link .chev { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .login { min-height: max(44px, calc(48 * var(--u))); padding-inline: calc(14 * var(--u)); font-size: calc(16.5 * var(--u)); }
  .nav-cta { min-height: calc(54 * var(--u)); padding-inline: calc(24 * var(--u)); font-size: calc(16.5 * var(--u)); }
  .nav-cta svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
  /* « La preuve » remplit presque l'écran : son contenu descend sous la barre agrandie. */
  .pv { padding-block: calc(98 * var(--u)) calc(4 * var(--u)); }
  .pv-grid { margin-top: calc(20 * var(--u)); }
}
@media (min-width: 1241px) {
  .fl-1 { top: 15%; }
}

/* ============ Exemples : le tableau sort par le bord gauche de l'écran ============
   --bleed = distance entre le bord de l'écran et le contenu (106u, plus la marge si l'écran est plus large que 16:9).
   Le tableau gagne toute cette largeur : ses colonnes s'élargissent, son texte grandit, seul le bas s'estompe encore. */
@media (min-width: 1181px) {
  .vt-bleed { --bleed: calc((100vw - min(100vw, calc(1536 * var(--u)))) / 2 + calc(106 * var(--u))); max-height: calc(720 * var(--u)); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(72 * var(--u))), linear-gradient(180deg, #000 58%, transparent 98%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 calc(72 * var(--u))), linear-gradient(180deg, #000 58%, transparent 98%); mask-composite: intersect; }
  .vt-card { border-left: 0; border-radius: 0 calc(14 * var(--u)) calc(14 * var(--u)) 0; }
  .vt { font-size: calc(15 * var(--u)); }
  .vt th { padding: calc(15 * var(--u)) calc(14 * var(--u)); font-size: calc(13 * var(--u)); }
  .vt td { padding: calc(12 * var(--u)) calc(14 * var(--u)); }
  .vt td:first-child { padding-left: calc(56 * var(--u)); }
  .vt th:first-child { padding-left: calc(112 * var(--u)); }
  .vt .ref { width: calc(44 * var(--u)); margin-right: calc(12 * var(--u)); font-size: calc(12.5 * var(--u)); }
  .vt .fav { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .vpill { padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u)) calc(9 * var(--u)); font-size: calc(13 * var(--u)); }
  .vals { gap: calc(9 * var(--u)); font-size: calc(14.5 * var(--u)); }
  .vals i { font-size: calc(12.5 * var(--u)); }
  .vals small { font-size: calc(12 * var(--u)); }
}
/* ---- Résultats (preuves Search Console) ---- */
.res-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: calc(20 * var(--u)); }
.res-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.res-head { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.res-head img, .res-mono { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(10 * var(--u)); flex: none; object-fit: contain; }
.res-mono { display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 calc(13 * var(--u))/1 var(--display); letter-spacing: .02em; }
.res-head b { display: block; font: 600 calc(18 * var(--u))/1.2 var(--display); }
.res-head small { display: block; color: var(--muted); font: 400 calc(12 * var(--u))/1.4 var(--mono); }
.res-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.res-figs--stack { grid-template-columns: minmax(0, 1fr); }
.res-figs > div { display: grid; gap: calc(6 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--bg-2); }
.res-figs b { font: 700 clamp(calc(30 * var(--u)), 3.6vw, calc(44 * var(--u)))/1 var(--display); letter-spacing: -0.04em; }
.res-figs span { color: var(--ink-2); font-size: calc(14.5 * var(--u)); line-height: 1.35; }
.res-figs small { display: block; color: var(--muted); font-size: calc(12.5 * var(--u)); }
.res-note { color: var(--muted); font-size: calc(13 * var(--u)); margin: 0; }
.res-chart { width: 100%; height: auto; display: block; }
.res-chart .ch-area { fill: var(--accent-soft); }
.res-chart .ch-impr { fill: none; stroke: var(--accent-deep); stroke-width: 2; }
.res-chart .ch-clicks { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.res-chart .ch-mark { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.res-chart .ch-dot { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.res-chart .ch-pill { fill: var(--ink); }
.res-chart .ch-pill-t { fill: #fff; font: 600 12.5px var(--sans); }
.res-chart .ch-tick { fill: var(--muted); font: 400 12px var(--mono); text-anchor: middle; }
.res-chart .ch-tick--start { text-anchor: start; }
.res-chart .ch-tick--end { text-anchor: end; }
.res-chart-wrap { display: grid; gap: calc(12 * var(--u)); }
.res-chart--narrow { display: none; }
@media (max-width: 560px) { .res-chart--wide { display: none; } .res-chart--narrow { display: block; } }
.res-legend { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(20 * var(--u)); margin: 0; color: var(--ink-2); font-size: calc(13 * var(--u)); }
.res-legend span { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); }
.res-legend i { display: inline-block; width: calc(16 * var(--u)); }
.res-legend .k-c { height: 3px; background: var(--ink); border-radius: 2px; }
.res-legend .k-i { height: calc(10 * var(--u)); background: var(--accent-soft); border: 1px solid var(--accent-deep); border-radius: 2px; }
@media (max-width: 960px) { .res-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .res-figs { grid-template-columns: minmax(0, 1fr); } }
/* ---- Aperçu gratuit, en tête des tarifs ---- */
.free-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(14 * var(--u)) calc(28 * var(--u)); max-width: calc(1080 * var(--u)); margin: 0 auto calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(26 * var(--u)); border: 1.5px solid var(--accent); border-radius: var(--r-card); background: var(--accent-soft); }
.free-strip__title { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.free-strip__title b { font: 600 calc(22 * var(--u))/1.1 var(--display); }
.free-strip__price { font: 700 calc(30 * var(--u))/1 var(--display); letter-spacing: -0.03em; }
.free-strip p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .free-strip { grid-template-columns: minmax(0, 1fr); } }
/* ---- Langue ---- */
.lang { color: var(--ink-2); font: 500 calc(14 * var(--u))/1 var(--sans); text-decoration: none; padding: calc(10 * var(--u)) calc(6 * var(--u)); }
.lang:hover { color: var(--ink); text-decoration: underline; }