@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}
}