@font-face{font-family:"General Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/general-sans-400.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/general-sans-500.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/general-sans-600.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/general-sans-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-600.woff2) format("woff2")}
/* ============================================================ TOKENS — étape 2 */
:root{
  color-scheme:light;
  --bg:#ffffff; --band:#F7F7FA; --surface:#ffffff; --surface-2:#FBFBFD;
  --line:#ECECF2; --line-strong:#DEDEE8;
  --ink:#17161F; --ink-2:#3D3B49; --muted:#8A8896;
  --violet:#716FFF; --violet-2:#A264FF; --violet-3:#6470FF;
  --violet-soft:rgba(113,111,255,.10); --violet-line:rgba(113,111,255,.28);
  --green:#16A34A; --green-soft:rgba(22,163,74,.10); --green-line:rgba(22,163,74,.28);
  --red:#E5484D; --red-soft:rgba(229,72,77,.09); --red-line:rgba(229,72,77,.26);
  --amber:#E9A21B; --amber-soft:rgba(245,158,11,.14); --amber-line:rgba(245,158,11,.42);
  --shadow-s:0 1px 2px rgba(23,22,31,.04), 0 4px 14px rgba(23,22,31,.05);
  --shadow-m:0 2px 6px rgba(23,22,31,.05), 0 18px 44px rgba(23,22,31,.08);
  --shadow-l:0 4px 10px rgba(23,22,31,.06), 0 32px 70px rgba(23,22,31,.11);
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --maxw:1140px;
  --h1:#CFC6FF; --h2:#DED8FF; --h3:#EFECFF;
  --grid-line:rgba(23,22,31,.055);
  --halo:rgba(255,255,255,.9); --halo-0:rgba(255,255,255,0);
  --logo-filter:none;
  --sticky-bg:rgba(255,255,255,.88);
  --shop-bg:#ECFDF5; --shop-line:#A7F3D0; --shop-ink:#047857;
  --glink:#1A0DAB;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E0D14; --band:#14131C; --surface:#17161F; --surface-2:#1B1A24;
    --line:#26252F; --line-strong:#34333F;
    --ink:#F5F4F9; --ink-2:#C2C0CE; --muted:#8A8896;
    --violet-soft:rgba(113,111,255,.16); --violet-line:rgba(113,111,255,.40);
    --green-soft:rgba(22,163,74,.18); --red-soft:rgba(229,72,77,.16);
    --amber-soft:rgba(245,158,11,.18);
    --shadow-s:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.34);
    --shadow-m:0 2px 6px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.46);
    --shadow-l:0 4px 10px rgba(0,0,0,.38), 0 32px 70px rgba(0,0,0,.55);
    --h1:#2A2258; --h2:#1E1940; --h3:#151327;
    --grid-line:rgba(255,255,255,.05);
    --halo:rgba(14,13,20,.9); --halo-0:rgba(14,13,20,0);
    --logo-filter:brightness(0) invert(1);
    --sticky-bg:rgba(14,13,20,.88);
    --shop-bg:rgba(22,163,74,.14); --shop-line:rgba(22,163,74,.38); --shop-ink:#5BC98C;
    --glink:#8AB4F8;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E0D14; --band:#14131C; --surface:#17161F; --surface-2:#1B1A24;
  --line:#26252F; --line-strong:#34333F;
  --ink:#F5F4F9; --ink-2:#C2C0CE; --muted:#8A8896;
  --violet-soft:rgba(113,111,255,.16); --violet-line:rgba(113,111,255,.40);
  --green-soft:rgba(22,163,74,.18); --red-soft:rgba(229,72,77,.16);
  --amber-soft:rgba(245,158,11,.18);
  --shadow-s:0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.34);
  --shadow-m:0 2px 6px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.46);
  --shadow-l:0 4px 10px rgba(0,0,0,.38), 0 32px 70px rgba(0,0,0,.55);
  --h1:#2A2258; --h2:#1E1940; --h3:#151327;
  --grid-line:rgba(255,255,255,.05);
  --halo:rgba(14,13,20,.9); --halo-0:rgba(14,13,20,0);
  --logo-filter:brightness(0) invert(1);
  --sticky-bg:rgba(14,13,20,.88);
  --shop-bg:rgba(22,163,74,.14); --shop-line:rgba(22,163,74,.38); --shop-ink:#5BC98C;
  --glink:#8AB4F8;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"General Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
p{margin:0}
/* padding INLINE only : les utilitaires qui composent avec .wrap (.sec,
   .sticky-in) déclarent padding-block, jamais le raccourci `padding` —
   sinon leur shorthand remet padding-left/right à 0 et le contenu colle
   aux bords de l'écran (bug barre sticky mobile, 2026-08-17). */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;
  padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px))}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.fx{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);transition-delay:var(--d,0ms)}
.fx.in{opacity:1;transform:none}

/* ============================================================ HEADER */
.head-bar{position:relative;z-index:5;padding:14px 0}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:52px;width:auto;filter:var(--logo-filter);display:block}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-note{font-size:13px;color:var(--muted)}
.nav-cta .btn{padding:12px 22px;font-size:14.5px}

/* ============================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 28px;border-radius:999px;border:1px solid transparent;
  font-family:inherit;font-size:16.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s}
.btn-grad{background:linear-gradient(135deg,#6E6BFF 0%,#8B5CF6 48%,#A855F7 100%);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(113,111,255,.36),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-grad::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.36),transparent);
  transform:skewX(-18deg);animation:sheen 5s ease-in-out infinite}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(113,111,255,.46),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-grad>*{position:relative;z-index:1}
.btn:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.btn .arw{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.btn:hover .arw{transform:translateX(4px)}
@keyframes sheen{0%,70%{left:-70%}90%,100%{left:130%}}

/* ============================================================ HERO */
.hero{position:relative;padding:40px 0 74px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:-20% -10% 0;
  background:radial-gradient(ellipse 70% 60% at 22% 8%, var(--h1) 0%, transparent 62%),
    radial-gradient(ellipse 60% 55% at 82% 0%, var(--h2) 0%, transparent 60%),
    linear-gradient(180deg, var(--h3) 0%, var(--bg) 74%)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 72%)}
/* colonnes de même hauteur : la carte s'étire sur le contenu de gauche */
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:stretch}
.hero-l{display:flex;flex-direction:column;justify-content:center}
.card-wrap{display:flex}
.card{flex:1;display:flex;flex-direction:column}
.card-body{flex:1}

.eyebrow{display:inline-flex;align-items:center;gap:7px;padding:6px 14px 6px 11px;border-radius:999px;
  background:var(--violet-soft);border:1px solid var(--violet-line);color:var(--violet);
  font-size:12.5px;font-weight:600;margin-bottom:18px}
.eyebrow svg{width:13px;height:13px;flex:none}

h1{font-size:clamp(34px,4.5vw,52px)}
h1 .grad{background:linear-gradient(120deg,#5B5BFF 0%,#8B5CF6 42%,#C13FD6 74%,#E5484D 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:18px;font-size:17.5px;color:var(--ink-2);max-width:33em;line-height:1.5}
.hero-sub strong{color:var(--ink);font-weight:600}

.form{display:flex;gap:10px;margin-top:24px;max-width:530px;flex-wrap:wrap}
.field{flex:1 1 250px;position:relative;display:flex;align-items:center}
.field>svg{position:absolute;left:16px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.field input{width:100%;padding:15px 18px 15px 42px;border-radius:999px;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:500;
  box-shadow:var(--shadow-s);transition:border-color .18s,box-shadow .18s}
.field input::placeholder{color:var(--muted);font-weight:400}
.field input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}

.shopbadge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;
  background:var(--shop-bg);border:1px solid var(--shop-line);color:var(--shop-ink);
  font-size:12px;font-weight:600;margin-top:14px}
.shopbadge svg{width:14px;height:14px;flex:none}

.assure{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px;margin-top:14px;
  font-size:13.5px;color:var(--ink-2);font-weight:500}
.assure b{display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap}
.assure b svg{width:13px;height:13px;color:var(--violet);flex:none}
.assure i{width:1px;height:13px;background:var(--line-strong);display:inline-block;flex:none}
/* deux libellés par garantie : la version longue en desktop, une version
   courte en mobile pour que la rangée tienne sur UNE ligne (< 320px inclus) */
.assure .sm{display:none}

.proof{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.avs{display:flex}
.avs img{width:32px;height:32px;border-radius:50%;border:2px solid var(--surface);margin-left:-10px;
  object-fit:cover;box-shadow:var(--shadow-s);display:block}
.avs img:first-child{margin-left:0}
.stars{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
.stars em{color:var(--amber);letter-spacing:1.5px;font-style:normal}
.stars small{color:var(--muted);font-weight:500;font-size:13px}
.pcount{font-size:13.5px;color:var(--ink-2);font-weight:500}
.pcount b{color:var(--ink);font-weight:600}

/* ---- scanner card ---- */
.card-wrap{position:relative}
.card-wrap::before{content:"";position:absolute;inset:-14%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,var(--halo) 0%,var(--halo-0) 70%);filter:blur(30px)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);overflow:hidden}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.card-ttl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;transition:background .3s,box-shadow .3s}
.is-live .dot{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.card-host{font-size:12px;color:var(--muted)}
.scan{display:flex;align-items:center;gap:10px;padding:11px 20px;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.tiles{display:flex;gap:6px;flex:1}
.tile{position:relative;width:38px;height:38px;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);opacity:.3;filter:grayscale(1);
  transition:opacity .35s ease,filter .35s ease,transform .35s cubic-bezier(.2,.8,.3,1)}
.tile.on{opacity:1;filter:none;transform:translateY(-2px)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile b{position:absolute;right:2px;bottom:2px;font-size:8px;font-weight:700;padding:1px 4px;
  border-radius:4px;background:var(--red);color:#fff;opacity:0;transform:scale(.6);
  transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.3,1)}
.tile.on b{opacity:1;transform:none}
.scan-n{font-size:11px;color:var(--muted);white-space:nowrap}
.scan-n b{color:var(--ink);font-weight:600}
.sweep{position:absolute;top:0;bottom:0;width:64px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(113,111,255,.30),transparent);
  transform:skewX(-12deg)}
.scanning .sweep{opacity:1;animation:sweep 1.5s ease-in-out infinite}
@keyframes sweep{0%{left:-12%}100%{left:100%}}
.demo-tag{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px}
.card-body{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:24px 20px}
.gauge{position:relative;width:126px;height:126px;flex:none}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge .trk{fill:none;stroke:var(--line);stroke-width:11}
.gauge .val{fill:none;stroke:url(#gg);stroke-width:11;stroke-linecap:round;
  stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,.3,1)}
.gauge-mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge-n{font-size:32px;font-weight:600;letter-spacing:-.05em;color:var(--muted);line-height:1;transition:color .4s}
.gauge-max{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.gauge-lbl{margin-top:9px;text-align:center;font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rows{display:flex;flex-direction:column;gap:13px}
.row-h{font-size:12.5px;color:var(--muted)}
.row{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.row-l{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#6E6BFF,#A855F7);transition:width 1.2s cubic-bezier(.2,.7,.3,1)}
.bar.pending::after{content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(100deg,transparent,var(--violet-soft),transparent);
  background-size:200% 100%;animation:slide 1.9s linear infinite}
@keyframes slide{0%{background-position:120% 0}100%{background-position:-120% 0}}
.card-foot{padding:11px 20px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}

/* ============================================================ SECTION */
.sec{padding-block:78px}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:46px;text-align:center}
.sec-head h2{font-size:clamp(27px,3.2vw,38px)}
.sec-head p{font-size:16.5px;color:var(--muted);max-width:46em}
.s1-band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ============================================================ CHECKS */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.chk{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-s);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .28s,box-shadow .28s,transform .28s}
.chk::before{content:"";position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,#6E6BFF,#A855F7);opacity:0;transition:opacity .28s}
.chk:hover{border-color:var(--violet-line);box-shadow:var(--shadow-m);transform:translateY(-3px)}
.chk:hover::before{opacity:1}
.chk-h{display:flex;align-items:center;gap:10px;padding:18px 20px 14px}
.chk-ic{width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--violet-soft);border:1px solid var(--violet-line);color:var(--violet)}
.chk-ic svg{width:16px;height:16px}
.chk-t{font-size:16px;font-weight:600}
.sco{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--red-soft);border:1px solid var(--red-line);color:var(--red);
  transition:background .5s,border-color .5s,color .5s}
.sco.up{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.sco .ar{opacity:0;transition:opacity .4s}
.sco.up .ar{opacity:1}
.chk-d{padding:0 20px 20px;font-size:13.5px;color:var(--muted);line-height:1.6}
.stage{margin:0 20px 16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-m);padding:14px;min-height:196px;display:flex;flex-direction:column;gap:10px}
.stg-l{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.stg-tag{padding:2px 7px;border-radius:99px;background:var(--line);color:var(--muted);
  letter-spacing:.06em;transition:background .5s,color .5s}
.in .stg-tag{background:var(--green-soft);color:var(--green)}

/* --- 1. listing Google Shopping --- */
.glist{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:11px;
  display:flex;gap:11px;box-shadow:var(--shadow-s)}
.glist img{width:52px;height:52px;border-radius:8px;object-fit:cover;flex:none;background:var(--line)}
.gl-r{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.gl-t{font-size:11.5px;line-height:1.35;color:var(--glink);font-weight:500;min-height:31px}
.gl-t .kw{background:var(--violet-soft);border-radius:3px;padding:0 2px;color:var(--violet);font-weight:700}
.caret{display:inline-block;width:1.5px;height:10px;background:var(--violet);vertical-align:-1px;
  animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.gl-m{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.gl-p{font-weight:700;color:var(--ink);font-size:11px}
.gl-s{color:var(--amber);letter-spacing:.5px}
.kwm{display:flex;align-items:center;gap:8px;margin-top:2px}
.kwm-b{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.kwm-b i{display:block;height:100%;width:20%;border-radius:99px;
  background:linear-gradient(90deg,#6E6BFF,#A855F7);transition:width 1.6s cubic-bezier(.2,.7,.3,1)}
.kwm-t{font-size:10px;color:var(--muted);white-space:nowrap}
.kwm-t b{color:var(--ink);font-weight:600}

/* --- 2. description --- */
.dpan{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px;
  flex:1;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-s);overflow:hidden}
.dtxt{font-size:10.5px;line-height:1.62;color:var(--ink-2);max-height:34px;overflow:hidden;
  transition:max-height 1.4s cubic-bezier(.2,.7,.3,1)}
.in .dtxt{max-height:124px}
.dtxt mark{background:var(--violet-soft);color:var(--violet);border-radius:3px;padding:0 2px;font-weight:600}
.dmeta{display:flex;align-items:center;gap:8px;margin-top:auto}
.dchip{font-size:10px;font-weight:600;padding:3px 9px;border-radius:99px;
  background:var(--red-soft);border:1px solid var(--red-line);color:var(--red);
  transition:background .6s,border-color .6s,color .6s}
.in .dchip{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}
.dbar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.dbar i{display:block;height:100%;width:12%;border-radius:99px;
  background:linear-gradient(90deg,#6E6BFF,#A855F7);transition:width 1.6s cubic-bezier(.2,.7,.3,1)}

/* --- 3. attributs Merchant Center --- */
.att{background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  flex:1;display:flex;flex-direction:column;box-shadow:var(--shadow-s)}
.att-r{display:flex;align-items:center;gap:9px;padding:7px 11px;font-size:10.5px;
  border-bottom:1px solid var(--line)}
.att-r:last-child{border-bottom:0}
.att-k{color:var(--muted);width:58px;flex:none}
.att-v{color:var(--muted);flex:1;transition:color .45s;transition-delay:var(--hd,0ms)}
.in .att-v{color:var(--ink)}
.att-v .em{opacity:1;transition:opacity .3s;transition-delay:var(--hd,0ms)}
.in .att-v .em{opacity:0;position:absolute}
.att-v .fu{opacity:0;transition:opacity .45s;transition-delay:var(--hd,0ms)}
.in .att-v .fu{opacity:1}
.att-c{width:15px;height:15px;border-radius:5px;flex:none;display:grid;place-items:center;
  font-size:9px;background:var(--line);color:var(--muted);
  transition:background .45s,color .45s,transform .45s;transition-delay:var(--hd,0ms)}
.in .att-c{background:var(--green-soft);color:var(--green);transform:scale(1.06)}
.att-f{display:flex;align-items:baseline;gap:6px;padding:8px 11px;border-top:1px solid var(--line);
  background:var(--surface-2);font-size:10.5px;color:var(--muted);margin-top:auto}
.att-f b{font-size:15px;font-weight:600;color:var(--ink)}

/* ============================================================ FAQ */
.faq-wrap{position:relative}
.faq-glow{position:absolute;inset:-10% 10%;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.4;
  background:radial-gradient(ellipse at 20% 50%,rgba(113,111,255,.28),transparent 60%),
             radial-gradient(ellipse at 80% 50%,rgba(168,85,247,.22),transparent 60%)}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
details{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r-m);padding:16px 18px;
  transition:border-color .25s,box-shadow .25s,background .25s}
details:hover{border-color:var(--violet-line)}
details[open]{border-color:var(--violet-line);box-shadow:var(--shadow-m);background:var(--surface)}
summary{cursor:pointer;font-size:14.5px;font-weight:600;list-style:none;display:flex;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.q-ic{width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--violet-soft);color:var(--violet);border:1px solid var(--violet-line);
  font-size:12px;font-weight:700;transition:background .25s}
details[open] .q-ic{background:linear-gradient(135deg,#6E6BFF,#A855F7);color:#fff;border-color:transparent}
summary::after{content:"";width:9px;height:9px;flex:none;margin-left:auto;
  border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s}
details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
details p{margin-top:11px;padding-left:38px;font-size:13.5px;color:var(--muted);line-height:1.6}

/* ============================================================ STICKY */
/* --vv-bottom est pose par app.js : c'est l'ecart entre le bas de la mise en
   page et le bas de la zone visible sur iOS, sans quoi la barre reste
   suspendue quand la barre d'outils du navigateur se retire. */
.sticky{position:fixed;left:0;right:0;bottom:var(--vv-bottom,0px);z-index:40;
  background:var(--sticky-bg);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(23,22,31,.09);
  transform:translateY(115%);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.sticky.on{transform:none}
/* padding-block seul : l'inline vient de .wrap (cf. commentaire sur .wrap).
   Le bottom absorbe la safe-area iOS pour que la barre ne passe pas sous
   l'indicateur home. */
.sticky-in{display:flex;align-items:center;gap:14px;
  /* La zone sûre iOS n'est a compenser que si la barre touche vraiment le bas
     de l'ecran : des que --vv-bottom la souleve au-dessus de la barre d'outils
     du navigateur, l'ajouter creerait un vide sous le bouton. */
  padding-top:11px;
  padding-bottom:max(11px,calc(env(safe-area-inset-bottom,0px) - var(--vv-bottom,0px)))}
.sk-ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#6E6BFF,#A855F7);color:#fff;
  box-shadow:0 6px 16px rgba(113,111,255,.34);position:relative;overflow:hidden}
.sk-ic svg{width:19px;height:19px}
.sk-ic::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);animation:sheen 5s ease-in-out infinite}
.sk-l{display:flex;flex-direction:column;line-height:1.25;flex:none}
.sk-t{font-size:13.5px;font-weight:600}
.sk-s{font-size:12px;color:var(--muted)}
.sk-form{flex:1;display:flex;gap:10px;align-items:center;min-width:0;max-width:520px;margin:0 auto}
.sk-form .field input{padding:12px 16px 12px 40px;font-size:15px}
.sk-form .field>svg{left:14px}
.sticky .btn{padding:12px 22px;font-size:15px;flex:none}

@media (max-width:1000px){
  /* minmax(0,1fr) et pas 1fr : le plancher `auto` de 1fr vaut le min-content
     de la carte scanner (~360px : 6 tuiles + compteur), ce qui élargissait la
     colonne au-delà du viewport et faisait déborder le h1 / le sous-titre. */
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .checks{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .card-body{grid-template-columns:1fr;justify-items:center;gap:24px}
  .rows{width:100%}
  .sk-l{display:none}
}
@media (max-width:680px){
  .hero{padding:26px 0 46px}
  .sec{padding-block:56px}

  /* rythme vertical du hero resserré en mobile */
  h1{line-height:1.08}
  .hero-sub{margin-top:14px;font-size:16.5px}
  .form{flex-direction:column;gap:10px;margin-top:20px}
  /* flex-basis suit l'axe principal : en colonne, le `250px` de
     `.field{flex:1 1 250px}` devenait une HAUTEUR de 250px (input centré au
     milieu d'un vide). En mobile la hauteur doit rester celle du contenu. */
  .form .field{flex:0 0 auto}
  .form .btn{width:100%}
  .shopbadge{margin-top:12px}
  .assure{margin-top:12px;flex-wrap:nowrap;gap:0 11px;font-size:13px}
  .assure .lg{display:none}
  .assure .sm{display:inline}
  .proof{margin-top:20px;padding-top:18px;gap:10px 16px}

  .nav-note{display:none}
  .logo img{height:38px}
  .nav-cta .btn{padding:10px 16px;font-size:13.5px}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* la carte scanner doit tenir dans 100% de la colonne : tuiles plus
     petites et compteur autorisé à ne pas pousser la ligne */
  .scan{gap:8px;padding:11px 16px}
  .tiles{min-width:0;overflow:hidden}
  .tile{width:34px;height:34px}
  .card-body{padding:20px 16px}

  .sk-ic{display:none}
  .sk-form{flex-direction:row}
  .sticky .wrap{padding-inline:16px}
  .sticky .btn{padding:12px 16px;font-size:14px}
  .sticky .btn .arw{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .fx{opacity:1;transform:none}
}

/* ============================================================ FOOTER LÉGAL
   Statique dans index.html, sous toutes les vues. Ses styles vivaient en
   inline, ce qui empêchait toute media query de le resserrer en mobile. */
.legal-foot{max-width:760px;margin:0 auto;padding:28px 20px 40px;text-align:center;
  font-family:Inter,-apple-system,sans-serif;font-size:12px;color:#94A3B8;line-height:1.8}
.legal-foot a{color:#64748B;text-decoration:none;margin:0 10px}
.lf-copy{margin-top:6px}

/* ============================================================ UN ÉCRAN, UNE ACTION
   La page d'accueil se réduit au hero, étiré sur toute la hauteur de
   l'écran : rien d'autre à regarder que le champ URL. Les « Three checks »,
   la FAQ et la barre collante ne sont plus affichés (leur markup reste, pour
   le JS qui les câble). Le footer légal ne garde que les trois pages
   qu'exige Paddle, en bas de ce même écran.
   :has borne tout cela à la vue d'accueil — #root porte aussi le chargement
   et les résultats, qui ont leur propre mise en page. */
.s1-band,#root>section.sec,.sticky{display:none}

/* padding-bottom:0 : la réserve pour la barre collante n'a plus lieu d'être */
body:has(#root>.hero){display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:0}
body:has(#root>.hero) #root{flex:1;min-height:0;display:flex;flex-direction:column}
.hero{flex:1;display:flex;flex-direction:column;justify-content:center}
body:has(#root>.hero) .legal-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));font-size:11.5px;line-height:1.5}
body:has(#root>.hero) .legal-foot a{margin:0 6px}
body:has(#root>.hero) .lf-extra,body:has(#root>.hero) .lf-copy{display:none}

/* CTA un cran au-dessus du .btn de base (16.5px), à toutes les largeurs. */
.form .btn{font-size:19px}

/* Mobile et tablette : la carte démo disparaît aussi (en dessous de 1000px
   elle passait sous le texte et imposait un défilement), et tout est centré. */
@media (max-width:1000px){
  .card-wrap{display:none}
  .hero{padding:4px 0 40px}

  .head-in{justify-content:center}
  .nav-note{display:none}
  .logo img{height:54px}

  .hero-l{align-items:center;text-align:center}
  h1{font-size:clamp(34px,10vw,42px)}
  .hero-sub{margin-inline:auto}
  .form{width:100%;max-width:none}
  .field input{text-align:center;padding-right:42px}
  .assure,.proof{justify-content:center}
  .proof{width:100%}
}
/* Le hero suit la hauteur de l'écran : centré mais à taille fixe, il
   laissait deux bandes vides sur les écrans hauts. Typo, champs et
   espacements grandissent en svh, bornés pour rester lisibles. */
@media (max-width:1000px){
  .hero{padding:clamp(4px,1.5svh,24px) 0 clamp(16px,4svh,64px)}
  h1{font-size:clamp(30px,min(9vw,5.4svh),66px)}
  .hero-l{max-width:660px;margin-inline:auto}
  .hero-sub{font-size:clamp(16px,min(4.4vw,2.4svh),25px);margin-top:clamp(12px,4svh,48px);max-width:30em}
  .form{margin-top:clamp(20px,6.2svh,80px);gap:clamp(10px,1.5svh,18px)}
  .field input{padding-block:clamp(15px,2.3svh,28px);font-size:clamp(16px,2.1svh,22px)}
  .form .btn{padding-block:clamp(16px,2.4svh,30px);font-size:clamp(18px,2.6svh,27px)}
  .shopbadge{margin-top:clamp(12px,2.6svh,36px);font-size:clamp(12px,1.6svh,17px)}
  .assure{margin-top:clamp(12px,4.4svh,52px);font-size:clamp(13px,1.8svh,19px)}
  .proof{margin-top:clamp(20px,6.6svh,84px)}
  .avs img{width:clamp(32px,4.4svh,54px);height:clamp(32px,4.4svh,54px)}
  .stars,.pcount{font-size:clamp(13.5px,1.8svh,20px)}
}
/* Écrans courts (iPhone SE, Android 640px) : on resserre l'espace vertical
   pour que l'écran unique tienne sans défilement. */
@media (max-width:680px) and (max-height:760px){
  .head-bar{padding:8px 0}
  .logo img{height:50px}
  .hero{padding:0 0 12px}
  h1{font-size:clamp(28px,8.6vw,34px)}
  .hero-sub{margin-top:2.6svh;font-size:15px}
  .form{margin-top:4.6svh}
  .field input{padding-block:13px}
  .form .btn{padding-block:14px}
  .proof{margin-top:5svh}
  .form .btn{font-size:19px}
  .assure{margin-top:3.4svh}
}
/* Le plus petit écran courant (iPhone SE 1re génération, 568px). */
@media (max-width:680px) and (max-height:600px){
  .logo img{height:40px}
  h1{font-size:26px}
  .hero-sub{font-size:14px;margin-top:8px}
  .shopbadge,.assure{margin-top:10px}
  .proof{margin-top:10px;padding-top:10px}
}

/* ============================================================ BAS DU HERO = LP2
   Les deux pages partagent le même bas : une rangée de garanties
   (Shopify · 30 s · sans compte), avatars + note, puis la cible, et le
   mini-footer en gris discret. Le séparateur au-dessus de la preuve sociale
   disparaît, comme sur lp2. */
.assure--scan .assure__shop svg{width:13px;height:15px;color:inherit}
.hero-l .proof{border-top:0;padding-top:0}
body:has(#root>.hero) .legal-foot a{color:var(--muted)}
@media (max-width:1000px){
  .hero-l .proof{flex-direction:row;justify-content:center}
  .hero-l .pcount{flex-basis:100%;text-align:center}
}
/* En-tête identique à lp2 à toutes les largeurs : logo centré, sans la
   mention de droite. */
body:has(#root>.hero) .head-in{justify-content:center}
body:has(#root>.hero) .nav-note{display:none}
/* Téléphones : la hauteur disponible va ENTRE les blocs, pas autour. Les
   crans « écran court » fixaient ces marges en pixels : hero serré au milieu
   de deux bandes vides sur un vrai iPhone (Chrome iOS, ~390x660 visibles).
   Placé en dernier pour passer après ces crans. Même règle que lp2. */
@media (max-width:680px){
  .hero{padding:clamp(4px,1.5svh,16px) 0 clamp(8px,2.5svh,24px)}
  .hero-sub{margin-top:clamp(10px,5svh,44px)}
  .form{margin-top:clamp(16px,8.4svh,80px)}
  .assure{margin-top:clamp(12px,5.8svh,54px)}
  .proof{margin-top:clamp(14px,7.2svh,72px)}
}
@media (max-width:680px) and (max-height:600px){
  .hero-sub{margin-top:16px}
  .form{margin-top:28px}
  .assure{margin-top:20px}
  .proof{margin-top:22px}
}