/* Mise en page : page de conversion moderne. Un seul Heppp, en grand dans l'accroche, qui se range ensuite
   dans un coin (sur téléphone : dans la barre du bas) et commente chaque partie. Grille « bento » avec les vraies
   captures de l'app, comparaison en deux cartes, offre bêta. Un seul thème, clair, aux couleurs de l'app. */
/* Police hébergée sur le site (licence OFL, voir polices/OFL.txt) : aucun appel à un service tiers,
   donc aucune adresse IP de visiteur transmise à Google. */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('polices/PlusJakartaSans-wght.ttf') format('truetype');
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#F5F8FC; --card:#FFFFFF; --ink:#0E2240; --ink-2:#4A6584; --ink-3:#7E93AC; --line:#E1EAF4; --field:#F6FAFE;
  --blue:#2F95E6; --blue-ink:#1A6FC0; --blue-pale:#EAF4FD; --sky:#CFE6FD; --sun:#FFB21E; --sun-pale:#FFF3DC;
  --navy:#0F2A52; --navy-2:#173A6B; --on-navy:#C3D5EC; --ok:#15805A; --ok-pale:#E3F6EE; --bad:#C93A52; --bad-pale:#FDECEF;
  --font:'Plus Jakarta Sans', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hb:300px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance;letter-spacing:-0.035em}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select{font-family:var(--font)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink)}
.h2{font-size:clamp(34px,4.6vw,60px);line-height:1.02;font-weight:800;letter-spacing:-0.045em}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;font-weight:600;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 26px;border-radius:999px;background:var(--ink);color:#FFFFFF;font-size:17px;font-weight:800;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .2s ease}
.btn:hover{transform:translateY(-1px);background:#1B3560}
.btn.blue{background:var(--blue)}
.btn.blue:hover{background:#2486D6}
.btn.small{height:40px;padding:0 16px;font-size:14px}
.sec{padding-block:clamp(80px,10vw,128px)}
.head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto;text-align:center;align-items:center}

/* Barre du haut, en capsule */
.top{position:fixed;left:0;right:0;top:0;z-index:50;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px, env(safe-area-inset-right,0px)) 0 max(12px, env(safe-area-inset-left,0px));pointer-events:none}
.capsule{pointer-events:auto;max-width:860px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 7px 7px 16px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);box-shadow:0 8px 30px rgba(15,42,82,.08),inset 0 0 0 1px rgba(15,42,82,.06)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo img{width:30px;height:30px}
.wm{font-size:22px;line-height:26px;font-weight:800;letter-spacing:-0.04em;color:var(--ink)}
.wm .p2{color:#2F95E6}.wm .p3{color:#1F5FA0}
.nav{display:flex;gap:4px}
.nav a{height:40px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:var(--ink-2);text-decoration:none}
.nav a:hover{background:var(--blue-pale);color:var(--ink)}

/* L'iPhone */
.phone{position:relative;width:100%;max-width:280px;aspect-ratio:600/1304;border-radius:46px;padding:9px;background:#0B1830;box-shadow:0 40px 80px rgba(15,42,82,.25),0 8px 18px rgba(15,42,82,.16),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:37px}

/* 1 · Accroche, présentée par Heppp */
.hero{position:relative;overflow:hidden;padding-block:clamp(130px,16vh,170px) clamp(64px,8vw,110px)}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;background:
  radial-gradient(40% 50% at 78% 38%,rgba(255,196,80,.30),rgba(255,196,80,0) 70%),
  radial-gradient(45% 55% at 20% 20%,rgba(120,190,255,.35),rgba(120,190,255,0) 70%),
  radial-gradient(50% 60% at 60% 0%,rgba(207,230,253,.9),rgba(207,230,253,0) 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.hero-txt{display:flex;flex-direction:column;gap:24px;min-width:0}
.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:#FFFFFF;color:var(--ink);font-size:14px;font-weight:800;box-shadow:0 4px 14px rgba(15,42,82,.08)}
.pill .dot{width:8px;height:8px;border-radius:4px;background:#2FC48A;box-shadow:0 0 0 4px rgba(47,196,138,.18)}
.hero h1{font-size:clamp(46px,6vw,84px);line-height:.96;font-weight:800;letter-spacing:-0.05em}
.hero h1 span{background:linear-gradient(90deg,#2F95E6,#1A6FC0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{max-width:38ch}
.quick{display:flex;gap:8px;max-width:540px;padding:6px;border-radius:999px;background:#FFFFFF;box-shadow:0 10px 30px rgba(15,42,82,.08),inset 0 0 0 1px var(--line)}
.quick input{flex:1;min-width:0;height:52px;border:0;border-radius:999px;background:transparent;padding:0 18px;font-size:17px;font-weight:600;color:var(--ink)}
.quick input:focus{outline:none}
.quick:focus-within{box-shadow:0 10px 30px rgba(15,42,82,.08),inset 0 0 0 2px var(--blue)}
.quick .btn{height:52px}
.micro{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:700;color:var(--ink-2)}
.micro > span{display:inline-flex;align-items:center;gap:6px}
.micro svg{width:16px;height:16px;color:var(--ok);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.q-err{font-size:14px;font-weight:700;color:var(--bad);margin-top:-14px}
.stage{position:relative;height:clamp(380px,36vw,480px)}
.stage .glow{position:absolute;left:50%;top:52%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,200,80,.45) 0%,rgba(255,200,80,.12) 38%,rgba(255,200,80,0) 64%)}
#h-anchor{position:absolute;left:58%;top:56%;width:2px;height:2px}

/* Heppp, le seul */
#buddy{position:fixed;left:0;top:0;z-index:45;width:var(--hb);height:var(--hb);pointer-events:none;will-change:transform}
.bd-body{position:absolute;inset:0;border:0;padding:0;background:none;border-radius:50%;cursor:pointer;pointer-events:auto;animation:bob 4.8s ease-in-out infinite}
.bd-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .2s ease}
.bd-body img.on{opacity:1}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3%) rotate(2deg)}}
.bubble{position:absolute;width:max-content;max-width:280px;background:#FFFFFF;color:var(--ink);border-radius:20px;padding:13px 17px;box-shadow:0 16px 40px rgba(15,42,82,.18),inset 0 0 0 1px rgba(15,42,82,.05);font-size:16px;line-height:22px;font-weight:800;scale:var(--inv,1);transition:opacity .25s ease}
.bubble.pop{animation:pop .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.bubble.off{opacity:0}
#buddy.m-hero .bubble{left:40%;bottom:94%;transform-origin:0% 100%;font-size:18px;line-height:25px;max-width:300px;padding:16px 20px}
#buddy.m-heroM .bubble{left:88%;top:18%;transform-origin:0% 0%;max-width:min(210px, calc(100vw - 180px))}
#buddy.m-dock .bubble{right:100%;margin-right:4px;top:50%;translate:0 -50%;transform-origin:100% 50%}
#buddy.m-bar .bubble{display:none}
#buddy.m-dock .bubble.pop{animation:pop .38s cubic-bezier(.2,1.4,.4,1),fadeout .5s ease 5.5s forwards}
@keyframes fadeout{to{opacity:0}}

/* 2 · Tu te reconnais ? */
.mirror{background:var(--navy);color:#FFFFFF;border-radius:40px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;position:relative;overflow:hidden}
.mirror::before{content:"";position:absolute;left:-200px;bottom:-260px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(47,149,230,.32),rgba(47,149,230,0) 65%)}
.mirror > *{position:relative}
.mirror .kicker{color:#8CCBFF}
.mirror .lead{color:var(--on-navy)}
.why{display:flex;flex-direction:column;gap:20px}
.why h3{font-size:20px;line-height:1.35;font-weight:800;padding-top:6px}
.checks{display:flex;flex-direction:column;gap:10px}
.check{display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:14px 18px;border-radius:18px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#FFFFFF;font-size:17px;line-height:1.4;font-weight:700;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.check:hover{background:rgba(255,255,255,.09)}
.check i{width:26px;height:26px;border-radius:8px;border:2px solid rgba(255,255,255,.4);flex-shrink:0;display:grid;place-items:center}
.check i svg{width:15px;height:15px;fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.check[aria-pressed="true"]{background:rgba(47,149,230,.2);border-color:var(--blue)}
.check[aria-pressed="true"] i{background:var(--blue);border-color:var(--blue)}
.check[aria-pressed="true"] i svg{opacity:1}
.verdict{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-radius:20px;background:#FFFFFF;color:var(--ink)}
.verdict p{font-size:18px;line-height:1.35;font-weight:800}
.verdict p small{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-top:2px}

/* 3 · Comment ça marche, en grille */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.cell{position:relative;background:var(--card);border-radius:32px;padding:30px 28px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.cell .num{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink)}
.cell h3{font-size:clamp(22px,2vw,26px);line-height:1.15;font-weight:800}
.cell p{font-size:16px;line-height:1.55;font-weight:600;color:var(--ink-2)}
.cell .crop{margin-top:auto;padding-top:22px;height:330px;overflow:hidden;display:flex;justify-content:center}
.cell .crop .phone{max-width:250px;flex-shrink:0;align-self:flex-start}
.cell.tall{grid-row:span 2;background:linear-gradient(180deg,#DDEFFF 0%,#FFFFFF 70%)}
.cell.tall .crop{height:auto;flex:1;align-items:flex-start;padding-bottom:0}
.cell.tall .crop .phone{max-width:290px}
.cell.sun{background:linear-gradient(180deg,var(--sun-pale) 0%,#FFFFFF 75%)}
.cell.wide{grid-column:span 2;padding-bottom:30px}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:10px}
.g-t{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{height:36px;padding:0 14px;border-radius:999px;background:var(--blue-pale);color:var(--blue-ink);font-size:14px;font-weight:800;display:inline-flex;align-items:center}
.chips.soft li{background:#F1F4F8;color:var(--ink-2)}
.cell .note{font-size:14px;font-weight:700;color:var(--ink-3);margin-top:14px}

/* 4 · Comparaison */
.vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:52px}
.side{border-radius:32px;padding:32px 30px;display:flex;flex-direction:column;gap:18px}
.side h3{font-size:22px;line-height:1.2;font-weight:800}
.side ul{display:flex;flex-direction:column;gap:14px}
.side li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45;font-weight:700}
.side li i{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;flex-shrink:0;margin-top:-1px}
.side li svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.side.old{background:#ECF1F7;color:var(--ink-2)}
.side.old h3{color:var(--ink-2)}
.side.old li i{background:#DCE4EE;color:var(--ink-3)}
.side.new{background:linear-gradient(160deg,#2F95E6 0%,#1A6FC0 100%);color:#FFFFFF;box-shadow:0 30px 60px rgba(47,149,230,.28)}
.side.new li i{background:rgba(255,255,255,.22);color:#FFFFFF}

/* 5 · Ce qui fait tenir */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:52px}

/* 6 · L'offre bêta */
.offer{background:var(--navy);color:#FFFFFF;border-radius:40px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start;position:relative;overflow:hidden}
.offer-txt{display:flex;flex-direction:column;gap:20px}
.dots{display:none}
.m-hide{display:inline}
.offer::before{content:"";position:absolute;right:-160px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(47,149,230,.38),rgba(47,149,230,0) 65%)}
.offer::after{content:"";position:absolute;left:-120px;bottom:-200px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,178,30,.18),rgba(255,178,30,0) 65%)}
.offer > *{position:relative;z-index:1}
.offer .kicker{color:#8CCBFF}
.offer .lead{color:var(--on-navy)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px}
.price s{font-size:22px;font-weight:700;color:#8EA7C6}
.price b{font-size:48px;line-height:1;font-weight:800;letter-spacing:-0.04em}
.price span{font-size:16px;font-weight:700;color:var(--on-navy)}
.perks{display:flex;flex-direction:column;gap:16px}
.perks li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.5;font-weight:600;color:var(--on-navy)}
.perks li b{display:block;color:#FFFFFF;font-size:17px}
.perks i{width:30px;height:30px;border-radius:999px;background:rgba(140,203,255,.16);color:#8CCBFF;display:grid;place-items:center;flex-shrink:0}
.perks svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.launch{font-size:15px;font-weight:700;color:var(--on-navy)}
.launch b{color:#FFFFFF;font-variant-numeric:tabular-nums}
.form{background:var(--card);color:var(--ink);border-radius:28px;padding:28px 26px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.form h3{font-size:24px;line-height:1.2;font-weight:800}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--ok-pale);color:var(--ok);font-size:13px;font-weight:800}
.badge .dot{width:8px;height:8px;border-radius:4px;background:var(--ok)}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:14px;font-weight:800}
.fld input,.fld select{height:54px;border-radius:14px;border:1.5px solid var(--line);background:var(--field);padding:0 16px;font-size:16px;font-weight:600;color:var(--ink);width:100%;appearance:none;-webkit-appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A6584' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;padding-right:40px}
.fld input:focus,.fld select:focus{border-color:var(--blue);background:#FFFFFF;outline:none;box-shadow:0 0 0 4px rgba(47,149,230,.16)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;font-weight:700;cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--line);background:#FFFFFF;flex-shrink:0;margin:0;display:grid;place-content:center;cursor:pointer}
.chk input::after{content:"";width:6px;height:11px;border-right:2.5px solid #FFFFFF;border-bottom:2.5px solid #FFFFFF;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.chk input:checked{background:var(--blue);border-color:var(--blue)}
.chk input:checked::after{opacity:1}
.form .btn{width:100%}
.fine{font-size:13px;line-height:1.5;font-weight:600;color:var(--ink-2)}
.err{font-size:14px;font-weight:700;color:var(--bad)}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:36px 4px}
.done .ok-i{width:64px;height:64px;border-radius:50%;background:var(--ok-pale);color:var(--ok);display:grid;place-items:center}
.done .ok-i svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.done h3{font-size:26px}
.done p{font-size:16px;font-weight:600;color:var(--ink-2)}

/* 7 · Questions et bas de page */
.faq{margin:36px auto 0;display:flex;flex-direction:column;gap:10px;max-width:780px}
.faq details{background:var(--card);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-size:17px;line-height:1.35;font-weight:800;border-radius:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--ink-2);border-bottom:2.5px solid var(--ink-2);transform:rotate(45deg) translate(-2px,-2px);flex-shrink:0;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding:0 22px 20px;font-size:16px;line-height:1.6;font-weight:600;color:var(--ink-2)}
.foot{border-top:1px solid var(--line);padding-block:28px calc(40px + env(safe-area-inset-bottom,0px))}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;font-weight:700;color:var(--ink-2)}
.foot nav a{text-decoration:none}
.foot small{font-size:14px;font-weight:600;color:var(--ink-2)}

/* Barre du bas (téléphone) : Heppp y parle, avec le bouton d'inscription */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(12px, env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px));display:none;transform:translateY(120%);transition:transform .3s ease}
.bar.on{transform:none}
.bar-in{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:24px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(15,42,82,.16),inset 0 0 0 1px var(--line)}
#bar-slot{width:50px;height:50px;flex-shrink:0}
#bar-say{flex:1;min-width:0;font-size:13px;line-height:17px;font-weight:800;color:var(--ink)}
.bar .btn{height:44px;padding:0 16px;font-size:14px;flex-shrink:0}
.bar.formview .btn{display:none}

/* Apparitions douces, seulement si le navigateur sait les lier au défilement */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
/* Animations réduites : rien ne glisse ni ne rebondit. La barre du bas apparaît sans glisser, et la bulle du coin
   s'efface quand même au bout de quelques secondes, par un simple fondu (deux ajouts par rapport au prototype). */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bd-body{animation:none}.bubble.pop{animation:none}#buddy.m-dock .bubble.pop{animation:fadeout .5s ease 5.5s forwards}.bar{transition:none}}

/* Tablette */
@media (max-width:980px){
  .nav{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .stage{order:-1;height:250px}
  #h-anchor{left:24%;top:50%}
  .mirror{grid-template-columns:1fr;gap:32px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell.tall{grid-row:auto;grid-column:span 2}
  .cell.tall .crop{height:360px;flex:none}
  .offer{grid-template-columns:1fr;gap:32px}
}
/* Téléphone (90 % des visites) : tout ce qui compte tient sur le premier écran, les captures se font glisser */
@media (max-width:760px){
  :root{--hb:150px}
  body{font-size:16px}
  .sec{padding-block:56px}
  .top{padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .capsule{padding:6px 6px 6px 12px}
  .wm{font-size:20px}
  .logo img{width:26px;height:26px}
  .btn.small{height:38px;padding:0 14px;font-size:14px}
  .h2{font-size:34px;line-height:1.05}
  .kicker{font-size:12px}
  .lead{font-size:16px}

  /* Accroche */
  .hero{padding-block:68px 40px}
  .stage{height:150px}
  .stage .glow{width:300px;left:28%}
  #h-anchor{left:22%;top:54%}
  #buddy.m-heroM .bubble{left:90%;top:14%;max-width:min(220px, calc(100vw - 190px));font-size:15px;line-height:20px;padding:11px 14px}
  .hero-txt{gap:16px}
  .pill{height:30px;font-size:12.5px;padding:0 12px}
  .hero h1{font-size:42px;line-height:1}
  .hero .lead{font-size:16px;line-height:1.55}
  .quick{padding:5px}
  .quick input{height:50px;font-size:16px;padding:0 14px}
  .quick .btn{height:50px;padding:0 20px;font-size:16px}
  .m-hide{display:none}
  .micro{font-size:13px;gap:4px 14px}
  .micro svg{width:14px;height:14px}

  /* Tu te reconnais ? */
  .mirror{border-radius:28px;padding:28px 18px 18px;gap:24px}
  .why{gap:14px}
  .why h3{font-size:17px}
  .check{font-size:15.5px;min-height:54px;padding:12px 14px;border-radius:16px;gap:12px}
  .check i{width:24px;height:24px}
  .verdict{flex-direction:column;align-items:stretch;padding:16px}
  .verdict p{font-size:17px}
  .verdict .btn{width:100%}

  /* Grilles qui se font glisser */
  .swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-top:32px;margin-left:calc(-1 * max(16px, env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px, env(safe-area-inset-right,0px)));padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));scroll-padding-left:max(16px, env(safe-area-inset-left,0px));scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > .cell{flex:0 0 86%;scroll-snap-align:start;grid-column:auto;grid-row:auto}
  .cell{border-radius:26px;padding:22px 20px 0;gap:8px}
  .cell h3{font-size:21px}
  .cell p{font-size:15px}
  .cell .crop{height:290px;padding-top:16px}
  .cell.tall .crop{height:290px;flex:none}
  .cell .crop .phone,.cell.tall .crop .phone{max-width:220px}
  .cell.wide{padding-bottom:22px}
  .groups{grid-template-columns:1fr;gap:14px}
  .chips li{height:32px;font-size:13px;padding:0 12px}
  .dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
  .dots i{width:7px;height:7px;border-radius:4px;background:#C9D6E5;transition:width .25s ease,background .25s ease}
  .dots i.on{width:22px;background:var(--blue)}
  .head{gap:12px}

  /* Comparaison */
  .vs{grid-template-columns:1fr;gap:10px;margin-top:32px}
  .side{padding:22px 18px;border-radius:24px;gap:14px}
  .side h3{font-size:19px}
  .side li{font-size:15.5px}
  .side ul{gap:11px}

  /* Offre : le formulaire juste après le prix */
  .offer{display:flex;flex-direction:column;gap:18px;border-radius:28px;padding:28px 18px 18px}
  .offer-txt{display:contents}
  .offer .kicker{order:1}.offer .h2{order:2}.offer .lead{order:3}.offer .price{order:4}.offer .form{order:5}#perks{order:6;margin-top:6px}.offer .launch{order:7}
  .price b{font-size:40px}
  .price s{font-size:19px}
  .form{padding:22px 16px;border-radius:22px;gap:14px}
  .form h3{font-size:21px}

  .faq{margin-top:24px}
  .faq summary{padding:16px 18px;font-size:16px}
  .faq details p{padding:0 18px 16px;font-size:15px}
  .bar{display:block}
  .foot{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:760px) and (max-height:620px){
  .stage{height:120px}
  :root{--hb:120px}
  .hero h1{font-size:38px}
}

/* Champ piège anti-robots : hors de l'écran, ni lu ni atteint au clavier, jamais rempli par un visiteur */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}