:root{
  --black:#000;--ink:#1D1D1F;--ink-2:#6E6E73;--ink-3:#86868B;
  --white:#FFF;--gray:#F5F5F7;--gray-2:#E8E8ED;--line:rgba(0,0,0,.08);
  --lagon:#0BA5A0;--lagon-l:#5EE7DF;--lava:#FF4D1F;--lava-l:#FF8A5B;--gold:#F7B32B;
  --disp:'Inter Tight',-apple-system,BlinkMacSystemFont,'SF Pro Display',Inter,system-ui,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --r:28px;--r-sm:18px;--wrap:1120px;--narrow:820px;
  --grad:linear-gradient(95deg,#5EE7DF 0%,#0BA5A0 38%,#FF8A5B 68%,#FF4D1F 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.5;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.035em;line-height:1.02;font-weight:700}
h1{font-size:clamp(2.6rem,6vw,4.8rem);font-weight:700;letter-spacing:-.045em}
h2{font-size:clamp(2.4rem,5.4vw,4.4rem)}
h3{font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.025em}
.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}
.narrow{width:min(var(--narrow),calc(100% - 2.5rem));margin-inline:auto}
.center{text-align:center}
.center p{margin-inline:auto}
.eyebrow{display:inline-block;font-weight:600;font-size:.92rem;letter-spacing:-.005em;color:#087A77;margin-bottom:.8rem}
.dark .eyebrow{color:var(--lagon-l)}
.sub{font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--ink-2);font-weight:500;letter-spacing:-.015em;line-height:1.35;max-width:38ch}
.gradtxt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec{padding:clamp(5rem,11vw,9rem) 0;scroll-margin-top:80px}
.sec.tight{padding-top:0}
.dark{background:var(--black);color:#F5F5F7}
.dark .sub{color:rgba(245,245,247,.72)}
.gray{background:var(--gray)}
:focus-visible{outline:3px solid var(--lagon);outline-offset:3px;border-radius:8px}

/* Buttons Apple-ish */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.4rem;border-radius:999px;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-blue{background:var(--lava);color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 24px -10px rgba(255,77,31,.6)}
.btn-blue::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-blue:hover::after{transform:translateX(120%)}
.btn-blue:hover{background:#ff6236}
.btn-outline{border:1.5px solid rgba(0,0,0,.2)}
.dark .btn-outline{border-color:rgba(255,255,255,.28);color:#fff}
.btn-outline:hover{border-color:currentColor}
.btn-white{background:#fff;color:#000}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.btn svg{width:18px;height:18px}
.link{color:var(--lagon);font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.link::after{content:"›";font-size:1.3em;line-height:0;transition:transform .2s}
.link:hover::after{transform:translateX(3px)}
.ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Reveal: blur + rise */
.rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s}
.rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;transition:none}html{scroll-behavior:auto}
  .step .n{opacity:1;transform:none;transition:none}}

/* NAV: floating pill */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:100;width:min(1120px,calc(100% - 1.25rem));height:58px;border-radius:999px;background:rgba(18,18,22,.66);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px -18px rgba(0,0,0,.55);color:#F5F5F7;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.nav.hide{transform:translate(-50%,-140%)}
.nav .in{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 .5rem 0 1.15rem;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:700;font-size:1.2rem;letter-spacing:-.04em}
.logo em{font-style:normal;font-weight:500;opacity:.72;margin-left:1px}
.logo svg{width:24px;height:24px}
.nav-links{display:flex;gap:.15rem;font-size:.86rem;font-weight:500}
.nav-links a{padding:.5rem .85rem;border-radius:999px;color:rgba(245,245,247,.75);white-space:nowrap;transition:background .2s,color .2s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links a.on{color:#fff;background:rgba(255,255,255,.14)}
.nav-cta{display:flex;gap:.4rem;align-items:center}
.nav-cta .btn{padding:.55rem 1rem;font-size:.84rem;height:40px}
.burger{display:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
.burger span,.burger span::before,.burger span::after{display:block;width:16px;height:1.5px;background:#fff;position:relative;transition:transform .3s,top .3s,opacity .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-5px}.burger span::after{top:5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.86);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 3rem;opacity:0;pointer-events:none;transition:opacity .35s}
body.menu-open .menu{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.menu a.big{font-family:var(--disp);font-size:clamp(2rem,9vw,2.8rem);font-weight:600;letter-spacing:-.04em;padding:.35rem 0;color:rgba(255,255,255,.85);transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s}
body.menu-open .menu a.big{transform:none;opacity:1}
.menu a.big:hover{color:#fff}
.menu .mcta{display:grid;gap:.6rem;margin-top:2.2rem}
.menu .mcta .btn{width:100%;padding:1rem}
.menu .mfoot{margin-top:auto;font-size:.8rem;color:rgba(255,255,255,.45)}
/* Le rappel du bas d'écran, sur téléphone.
   Il reprend le verre sombre de la barre du haut pour se poser sur n'importe
   quelle section, blanche, grise ou noire, sans changer d'apparence.
   `visibility` autant qu'`opacity` : sans elle, le lien reste dans l'ordre de
   tabulation même invisible, et le clavier tombe sur un bouton absent. */
.bar-cta{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));z-index:95;display:none;width:min(520px,calc(100% - 1.25rem));padding:.7rem .75rem .8rem;border-radius:26px;background:rgba(16,16,20,.9);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 50px -20px rgba(0,0,0,.75);transform:translate(-50%,150%);opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s,visibility 0s .35s}
.bar-cta.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}
.bar-cta .btn{width:100%;padding:.95rem 1rem;font-size:clamp(.9rem,3.9vw,1.05rem)}
.bar-note{margin-top:.55rem;text-align:center;font-size:.78rem;letter-spacing:-.005em;color:rgba(245,245,247,.78)}
/* Le menu plein écran est sous le bandeau dans la pile : sans cette règle, le
   bandeau flotterait par-dessus le menu ouvert. */
body.menu-open .bar-cta{transform:translate(-50%,150%);opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.bar-cta,.bar-cta.on{transform:translate(-50%,0);transition:opacity .2s,visibility 0s .2s}.bar-cta.on{transition-delay:0s}}

/* Le seuil est mesuré, pas choisi : la barre complète réclame 1021 px en
   français (926 en anglais), et elle vaut la largeur de l'écran moins 20. En
   dessous, les liens partaient à la ligne et le bouton d'essai sortait de la
   pastille, sur tout un iPad Pro en portrait. Ils passent donc dans le menu,
   et le choix de langue avec eux : il y figure déjà. */
@media (max-width:1080px){.nav-links{display:none}.burger{display:inline-flex}.nav-cta .nav-lang{display:none}}
/* Sur un téléphone, la barre ne porte plus que le logo et le menu. Les deux
   boutons rejoignent le menu, et l'appel à l'action descend dans le bandeau du
   bas, à portée de pouce. Avant, les trois boutons réclamaient 461 px dans une
   barre de 368 : le bouton du menu se retrouvait à 77 px hors de l'écran, et
   toute la navigation était donc inatteignable au téléphone. */
@media (max-width:680px){.nav{top:10px;height:54px}.nav .in{padding:0 .5rem 0 .9rem}.nav-cta .nav-sign,.nav-cta .nav-try{display:none}.bar-cta{display:block}}

/* HERO */
.hero{position:relative;background:#000;color:#F5F5F7;overflow:hidden;min-height:100svh;display:flex;flex-direction:column}
.glbg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .veil{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 38%,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 65%,#000 100%);pointer-events:none}
.hero-inner{position:relative;z-index:2;will-change:transform,opacity;text-align:center;padding:calc(64px + clamp(1rem,4vh,2.6rem)) 0 .25rem;display:grid;gap:.9rem;justify-items:center}
.hero h1{max-width:20ch}
/* Une phrase par ligne, quelle que soit la largeur.
   La plus longue fait 386 px à 16,8 px : sur un téléphone de 390 px elle ne
   tient qu'en suivant la largeur de l'écran. La borne basse, 0,92 rem, reste
   lisible ; la haute ne bouge pas sur grand écran. */
.hero .sub{max-width:68ch;color:rgba(245,245,247,.75);font-size:clamp(0.82rem,3.7vw,1.3rem)}
.hero-proof{display:flex;gap:.35rem .6rem;flex-wrap:wrap;justify-content:center;font-size:.86rem;color:rgba(245,245,247,.55);font-weight:500}
.hero-proof span{display:inline-flex;align-items:center;gap:.6rem}
.hero-proof span+span::before{content:"·";opacity:.5}
.hero-stage{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto;flex:1;min-height:360px;max-height:620px}
#card3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.stage-ui{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.7rem;z-index:3;width:100%}
@media (min-width:900px){.stage-ui{flex-direction:row;justify-content:center;gap:.8rem}}
.stage-ui .row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;justify-content:center}
.stage-ui .btn{padding:.75rem 1.25rem;font-size:.95rem}
.custom{display:flex;gap:.6rem;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:.45rem .5rem .45rem .9rem;border-radius:999px}
.custom label{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.02em;white-space:nowrap}
.custom input{background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:999px;padding:.5rem .8rem;font:inherit;font-size:.9rem;font-weight:600;width:150px}
.custom input:focus{outline:2px solid var(--lagon)}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;transition:transform .15s}
.sw.on{border-color:#fff;transform:scale(1.12)}
.notif{position:absolute;z-index:4;width:min(320px,86vw);background:rgba(255,255,255,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#111;border-radius:20px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(-14px) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none;text-align:left}
.notif.show{opacity:1;transform:none}
.notif .ico{width:36px;height:36px;border-radius:10px;background:#000;display:grid;place-items:center;flex:none}
.notif .ico svg{width:20px;height:20px}
.notif.g .ico{background:#fff;border:1px solid #e5e5e5}
.notif .txt{font-size:.82rem;line-height:1.35}
.notif .txt b{display:block;font-size:.84rem}
.notif .txt span{display:block;font-size:.7rem;color:#777;margin-top:2px}
#notif1{left:6%;top:14%}#notif2{right:6%;top:52%}
/* La scène du hero sur téléphone.
   Elle mesurait 360 px et devait loger la carte, deux notifications et la barre
   de commandes : la première notification masquait le nom et le compteur de la
   carte, la seconde chevauchait les boutons de 38 px. La scène s'allonge, les
   deux notifications se rangent aux extrémités, et la barre garde sa place. */
@media (max-width:760px){
  .hero-stage{min-height:470px}
  #notif1{left:50%;transform:translate(-50%,-14px) scale(.96);top:0}
  #notif1.show{transform:translate(-50%,0)}
  /* Au-dessus de la barre de commandes, dont la hauteur est connue. */
  #notif2{right:50%;transform:translate(50%,14px) scale(.96);top:auto;bottom:132px}
  #notif2.show{transform:translate(50%,0)}
  .custom label{font-size:0}
  .custom label::after{content:"👆";font-size:.9rem}
  .custom input{width:130px}
}
.scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.4);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;display:none}

/* WALLET / ZERO APP */
.zero .device-wrap{margin-top:clamp(2.5rem,6vw,4.5rem);display:flex;justify-content:center;perspective:1400px}
.device{width:min(380px,84vw);background:#0B0B0F;border-radius:54px;padding:12px;box-shadow:0 60px 120px -40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.12);transform:rotateX(6deg);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.device.in{transform:none}
.device .scr{border-radius:44px;background:linear-gradient(160deg,#0f2f2f 0%,#061212 45%,#1a0a05 100%);height:720px;position:relative;overflow:hidden;color:#fff}
.device .scr::before{content:"";position:absolute;inset:0;background:url("img/lagon.webp") center/cover;opacity:.55;mix-blend-mode:screen;filter:saturate(1.1)}
.device .isl{width:110px;height:34px;background:#000;border-radius:20px;position:absolute;top:12px;left:50%;transform:translateX(-50%)}
.device .time{position:absolute;top:84px;left:0;right:0;text-align:center;font-family:var(--disp);font-weight:600;font-size:5.2rem;letter-spacing:-.05em;line-height:1;text-shadow:0 10px 40px rgba(0,0,0,.3)}
.device .date{position:absolute;top:60px;left:0;right:0;text-align:center;font-size:1rem;font-weight:500;opacity:.9}
.device .lns{position:absolute;top:236px;left:14px;right:14px;display:grid;gap:9px}
.device .ln{background:rgba(255,255,255,.26);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-radius:24px;padding:12px 14px;display:flex;gap:11px;align-items:flex-start;box-shadow:0 10px 30px -14px rgba(0,0,0,.4)}
.device .ln .ico{width:38px;height:38px;border-radius:10px;background:#000;display:grid;place-items:center;flex:none}
.device .ln .ico svg{width:22px;height:22px}
.device .ln .t{font-size:.86rem;line-height:1.35;min-width:0}
.device .ln .t b{display:block}
.device .ln .t span{opacity:.7;font-size:.72rem;display:block;margin-top:2px}
.device .ln{opacity:0;transform:translateY(-12px)}
.device.in .ln{animation:lnIn .8s cubic-bezier(.2,.8,.2,1) forwards}
.device.in .ln.a{animation-delay:.3s}.device.in .ln.b{animation-delay:.6s;--o:.9}.device.in .ln.c{animation-delay:.9s;--o:.78}
@keyframes lnIn{to{opacity:var(--o,1);transform:none}}
.device .ln .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device .homebar{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:130px;height:5px;border-radius:3px;background:rgba(255,255,255,.7)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:clamp(3rem,6vw,5rem);text-align:center}
.trio b{display:block;font-family:var(--disp);font-size:clamp(2.6rem,4.5vw,3.6rem);letter-spacing:-.04em;line-height:1;margin-bottom:.4rem}
.trio p{color:var(--ink-2);font-size:1rem;max-width:26ch;margin-inline:auto}
@media (max-width:700px){.trio{grid-template-columns:1fr;gap:2.4rem}}

/* BENTO */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem)}
.tile{background:#fff;border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.04);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.tile:hover{transform:translateY(-3px);box-shadow:0 30px 60px -30px rgba(0,0,0,.18)}
.tile .viz{flex:1;position:relative;min-height:0;margin-bottom:.9rem}
.tile .txt{position:relative;z-index:2}
.tile h3{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:.3rem}
.tile p{font-size:.9rem;color:var(--ink-2);line-height:1.45}
.tile.w2{grid-column:span 2}.tile.h2{grid-row:span 2}
.tile.dk{background:#000;color:#F5F5F7}
.tile.dk p{color:rgba(245,245,247,.68)}
.tile.dk h3{color:#fff}
.tile.tint{background:linear-gradient(160deg,#0BA5A0,#087A77);color:#fff}
.tile.tint p{color:rgba(255,255,255,.82)}
.tile.lav{color:#fff;background:linear-gradient(120deg,#FF6A3D,#E23B0F,#FF8A5B,#E23B0F);background-size:300% 300%;animation:lavaShift 12s ease-in-out infinite}
.tile.lav p{color:rgba(255,255,255,.88)}
@keyframes lavaShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* dot bullet (brand) */
.kdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lava);box-shadow:0 0 0 3px rgba(11,165,160,.35)}

/* push tile (phone + looping notifs) */
.tile.h2 .viz{margin:0 0 1rem;display:flex;justify-content:center}
.t-phone{position:relative;height:100%;aspect-ratio:9/18.5;max-width:100%;background:#0B0B0F;border-radius:40px;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.1)}
.t-phone .s{height:100%;border-radius:32px;background:linear-gradient(160deg,#173C3B,#0A1414);position:relative;overflow:hidden}
.t-phone .s::before{content:"";position:absolute;inset:0;background:url("img/lagon.webp") center/cover;opacity:.5;mix-blend-mode:screen}
.t-phone .isl{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:44%;height:16px;background:#000;border-radius:10px}
.t-phone .tm{position:absolute;top:44px;left:0;right:0;text-align:center;font-family:var(--disp);font-size:2.6rem;font-weight:600;letter-spacing:-.05em}
.t-phone .hb{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:36%;height:4px;border-radius:2px;background:rgba(255,255,255,.7)}
.t-phone .dt{position:absolute;top:30px;left:0;right:0;text-align:center;font-size:.6rem;font-weight:500;opacity:.85}
.t-phone .lns{position:absolute;top:112px;left:8px;right:8px;display:grid;gap:6px}
.t-phone .n{background:rgba(255,255,255,.22);backdrop-filter:blur(20px);border-radius:16px;padding:9px 10px;display:flex;gap:8px;align-items:center;font-size:.66rem;line-height:1.3;opacity:0}
.t-phone .n .i{width:26px;height:26px;border-radius:7px;background:#000;display:grid;place-items:center;flex:none}
.t-phone .n .i svg{width:14px;height:14px}
.t-phone .n b{display:block;font-size:.68rem}
.t-phone .n{min-width:0}.t-phone .n b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-phone .n>div{min-width:0}
.tile.play .t-phone .n{animation:notifLoop 8s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:var(--d)}
@keyframes notifLoop{0%{opacity:0;transform:translateY(-16px) scale(.94)}6%{opacity:1;transform:none}78%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-8px)}}
.tile.dk.h2{background:radial-gradient(80% 60% at 50% 30%,#141a1c,#000 70%)}

/* 3 s ring */
.t-ring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1rem}
.t-ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.t-ring circle{fill:none;stroke-width:8}
.t-ring .trk{stroke:var(--gray-2)}
.t-ring .prg{stroke:var(--lava);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264}
.tile.play .t-ring .prg{animation:ring 4.6s cubic-bezier(.3,.1,.3,1) infinite}
@keyframes ring{0%{stroke-dashoffset:264}65%{stroke-dashoffset:0}84%{stroke-dashoffset:0;opacity:1}86%{opacity:0}100%{stroke-dashoffset:264;opacity:0}}
.t-ring .num{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:700;font-size:1.9rem;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.t-ring .num small{font-size:.5em;color:var(--ink-3);font-weight:600}
.t-ring .ok{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%) translateY(6px);background:#000;color:#fff;font-size:.72rem;font-weight:600;padding:.3rem .65rem;border-radius:999px;opacity:0;white-space:nowrap}
.tile.play .t-ring .ok{animation:okPop 4.6s ease infinite}
@keyframes okPop{0%,64%{opacity:0;transform:translateX(-50%) translateY(6px)}68%{opacity:1;transform:translateX(-50%) translateY(0)}84%{opacity:1}88%,100%{opacity:0}}

/* infinity
   Le symbole était un caractère typographique avec un reflet qui passait
   dessus. Il disait « infini » ; il ne le montrait pas. Le trait parcourt
   maintenant la boucle sans jamais s'arrêter, et c'est le mouvement lui-même
   qui porte le message : rien ne se referme, rien ne se compte.

   Tout en CSS, sans SMIL : la règle générale de `prefers-reduced-motion` coupe
   déjà les animations de tuile, et un `animateMotion` lui aurait échappé. */
.t-inf{position:absolute;inset:0;display:flex;align-items:center;gap:1rem}
.t-inf .lem{width:118px;height:59px;flex:none;overflow:visible}
.t-inf .lem path{fill:none;stroke-linecap:round}
.t-inf .lem .fond{stroke:rgba(255,255,255,.22);stroke-width:5}
.t-inf .lem .trait{stroke:#fff;stroke-width:5;stroke-dasharray:52 185;stroke-dashoffset:0}
.t-inf .lem .tete{fill:#fff;opacity:0;
  offset-path:path("M12 30C12 12 34 12 60 30C86 48 108 48 108 30C108 12 86 12 60 30C34 48 12 48 12 30Z");
  offset-distance:0%}
.tile.play .t-inf .lem .trait{animation:lemTrace 3.6s linear infinite}
/* Le point n'existe que là où `offset-path` sait le déplacer. Sans ce garde,
   un navigateur qui anime mais ne suit pas le chemin le laisserait immobile
   dans le coin supérieur gauche : une tache blanche au lieu d'un mouvement. */
@supports (offset-path: path("M0 0L1 1")) {
  .tile.play .t-inf .lem .tete{animation:lemTete 3.6s linear infinite}
}
/* 237 est la longueur réelle du tracé, mesurée en échantillonnant les quatre
   courbes de Bézier, pas une estimation. Le motif (52 pleins, 185 vides) fait
   donc exactement un tour par cycle : à une valeur approchée près, le raccord
   sauterait visiblement à chaque boucle. */
@keyframes lemTrace{to{stroke-dashoffset:-237}}
@keyframes lemTete{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.t-inf span{display:grid;gap:.15rem;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.8);line-height:1.3}
.t-inf span i{font-style:normal;opacity:.55}
.tile.play .t-inf span i{animation:motPulse 3.6s ease-in-out infinite;animation-delay:calc(var(--i)*1.2s)}
@keyframes motPulse{0%,70%,100%{opacity:.55;transform:none}12%{opacity:1;transform:translateX(3px)}}

/* stars */
.t-stars{position:absolute;inset:0;display:grid;gap:.5rem;align-content:start}
.t-stars .s{display:flex;gap:.25rem}
.t-stars .s i{width:22px;height:22px;display:inline-block;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.18;transform:scale(.7)}
.tile.play .t-stars .s i{animation:starPop 5s cubic-bezier(.2,.9,.3,1.4) infinite;animation-delay:calc(var(--i)*.14s)}
@keyframes starPop{0%{opacity:.18;transform:scale(.7)}8%{opacity:1;transform:scale(1.15)}12%{transform:scale(1)}80%{opacity:1;transform:scale(1)}92%,100%{opacity:.18;transform:scale(.7)}}
.t-stars .q{font-family:var(--disp);font-size:clamp(1.15rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.025em;line-height:1.22;margin-top:.3rem;max-width:26ch}
.t-stars .m{font-size:.76rem;color:var(--ink-2);display:inline-flex;gap:.4rem;align-items:center}
.t-stars .m em{font-style:normal;background:#FFEDE6;color:#B12F0B;padding:.15rem .5rem;border-radius:999px;font-weight:600;font-size:.7rem}

/* bars */
.t-bars{position:absolute;left:0;right:0;bottom:0;top:34px;display:flex;align-items:flex-end;gap:6px}
.t-bars i{flex:1;border-radius:6px 6px 2px 2px;background:var(--gray-2);height:var(--h);transform-origin:bottom;transform:scaleY(.08)}
.t-bars i.on{background:var(--lagon)}.t-bars i.hot{background:var(--lava)}
.tile.play .t-bars i{animation:barGrow 5s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i)*.07s)}
@keyframes barGrow{0%{transform:scaleY(.08)}18%{transform:scaleY(1)}84%{transform:scaleY(1)}96%,100%{transform:scaleY(.08)}}
.t-bars .tip{position:absolute;left:0;top:-32px;background:#000;color:#fff;font-size:.68rem;font-weight:600;padding:.25rem .55rem;border-radius:999px;opacity:0;transform:translateY(6px)}
.tile.play .t-bars .tip{animation:tipPop 5s ease infinite}
@keyframes tipPop{0%,22%{opacity:0;transform:translateY(6px)}30%{opacity:1;transform:none}82%{opacity:1}90%,100%{opacity:0}}

/* whatsapp */
.t-wa{position:absolute;inset:0;display:grid;gap:7px;align-content:start}
.t-wa .b{border-radius:14px 14px 14px 4px;padding:8px 10px;font-size:.76rem;max-width:88%;color:#111;background:#DCF8C6;opacity:0;transform:translateY(8px)}
.t-wa .b.k{background:#F1F1F3;border-radius:14px 14px 4px 14px;justify-self:end}
.t-wa .typ{display:inline-flex;gap:3px;padding:9px 11px;background:#F1F1F3;border-radius:14px 14px 4px 14px;justify-self:end;opacity:0}
.t-wa .typ i{width:5px;height:5px;border-radius:50%;background:#999;animation:dot 1s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes dot{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-3px)}}
.tile.play .t-wa .b1{animation:waIn 8s ease infinite}
.tile.play .t-wa .typ{animation:waTyp 8s ease infinite}
.tile.play .t-wa .b2{animation:waIn2 8s ease infinite}
@keyframes waIn{0%{opacity:0;transform:translateY(8px)}5%{opacity:1;transform:none}86%{opacity:1}94%,100%{opacity:0}}
@keyframes waTyp{0%,14%{opacity:0}18%,38%{opacity:1}42%,100%{opacity:0}}
@keyframes waIn2{0%,42%{opacity:0;transform:translateY(8px)}47%{opacity:1;transform:none}86%{opacity:1}94%,100%{opacity:0}}
.t-wa .slot{position:relative;height:40px}
.t-wa .slot .typ,.t-wa .slot .b2{position:absolute;right:0;top:0}

/* calendar */
.t-cal{position:absolute;inset:0;display:grid;gap:6px;font-size:.78rem;align-content:start}
.t-cal .r{display:flex;justify-content:space-between;align-items:center;background:var(--gray);padding:8px 10px;border-radius:12px;transition:background .5s}
.t-cal .r span{color:var(--ink-2);font-size:.7rem}
.t-cal .r.a .st{position:relative}
.t-cal .r.a .st b{position:absolute;right:0;top:0;white-space:nowrap;color:#E23B0F;font-weight:600;font-size:.7rem;opacity:0}
.tile.play .t-cal .r.a{animation:rowHl 6s ease infinite}
.tile.play .t-cal .r.a .st span{animation:fadeOutHold 6s ease infinite}
.tile.play .t-cal .r.a .st b{animation:fadeInHold 6s ease infinite}
@keyframes rowHl{0%,30%{background:var(--gray)}40%,88%{background:#FFEDE6}96%,100%{background:var(--gray)}}
@keyframes fadeOutHold{0%,30%{opacity:1}40%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes fadeInHold{0%,30%{opacity:0;transform:translateY(4px)}40%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
.t-cal .r.a{color:inherit}

/* referral */
.t-ref{position:absolute;inset:0;display:flex;align-items:center}
.t-ref .av{width:46px;height:46px;border-radius:50%;background:var(--gray-2);border:3px solid #fff;margin-left:-14px;display:grid;place-items:center;font-weight:700;font-size:.82rem;color:var(--ink-2);opacity:0;transform:scale(.6);overflow:hidden}
/* Les visages sont décoratifs : `alt` vide, et l'image remplit le cercle sans
   se déformer quel que soit son cadrage d'origine. */
.t-ref .av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.t-ref .av:first-child{margin-left:0}
.t-ref .av.plus{background:var(--lava);color:#fff;width:auto;padding:0 13px;border-radius:999px;white-space:nowrap;font-size:.86rem;display:flex;align-items:center;justify-content:center}
.tile.play .t-ref .av{animation:avPop 6s cubic-bezier(.2,.9,.3,1.4) infinite;animation-delay:calc(var(--i)*.22s)}
@keyframes avPop{0%{opacity:0;transform:scale(.6)}8%{opacity:1;transform:scale(1.08)}12%{transform:scale(1)}84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.6)}}

/* shops */
.t-shops{position:absolute;inset:0;display:grid;gap:5px;font-size:.76rem;align-content:start}
.t-shops .r{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.08);border-radius:10px;padding:6px 10px;position:relative;opacity:0;transform:translateX(-10px)}
.tile.play .t-shops .r{animation:rowIn .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.14s)}
@keyframes rowIn{to{opacity:1;transform:none}}
.t-shops .r.bump{background:rgba(52,199,89,.16)}
.t-shops .r .plus{position:absolute;right:8px;top:-4px;font-size:.66rem;font-weight:700;color:#34C759;opacity:0;pointer-events:none}
.t-shops .r.bump .plus{animation:plusUp 1.4s ease forwards}
@keyframes plusUp{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:translateY(-6px)}70%{opacity:1;transform:translateY(-14px)}100%{opacity:0;transform:translateY(-20px)}}
.t-shops .r span{opacity:.6;font-variant-numeric:tabular-nums}
.t-shops .live{display:inline-flex;align-items:center;gap:.4rem;font-size:.66rem;color:rgba(255,255,255,.55);margin-top:.1rem}
.t-shops .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#34C759;box-shadow:0 0 0 0 rgba(52,199,89,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,199,89,.6)}70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}}

/* data */
.t-data{position:absolute;inset:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:.9rem 1rem;align-items:start;overflow:hidden}
.t-data .chips{grid-column:1/-1;position:relative;height:30px;align-self:end}
.t-data .chips span{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:999px;padding:.35rem .8rem;font-size:.78rem;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(8px)}
.t-data .chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px rgba(255,255,255,.35)}
.tile.play .t-data .chips span{animation:chip 9s ease infinite;animation-delay:calc(var(--i)*3s)}
@keyframes chip{0%{opacity:0;transform:translateY(8px)}4%{opacity:1;transform:none}30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-8px)}}
/* Le panneau d'export, entre le titre et le texte de la tuile.
   Les pastilles qui tournaient disaient la même chose trois fois ; un fichier
   qu'on voit sortir et un bouton qu'on reconnaît se projettent tout seuls.
   Rien n'est cliquable : c'est une maquette, et un faux bouton qui ne fait
   rien au clic est pire qu'un bouton dessiné. */
.t-data .t-export{grid-column:1/-1;align-self:end;display:grid;gap:.4rem;min-height:0}
.t-data .t-export .line{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border-radius:10px;
  padding:.38rem .65rem;font-size:.76rem;font-weight:600;min-width:0}
.t-data .t-export .line .f{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-data .t-export .line .f{display:inline-flex;align-items:center;gap:.45rem}
.t-data .t-export .line .f::before{content:"";width:14px;height:17px;border-radius:2px;
  background:rgba(255,255,255,.9);
  clip-path:polygon(0 0,68% 0,100% 26%,100% 100%,0 100%);flex:none}
.t-data .t-export .line .w{opacity:.78;font-weight:500;font-variant-numeric:tabular-nums}

@media (max-width:560px){ .t-data .t-export .line .w{display:none} }

.t-data .lock .sh{transform-origin:12px 11px;transition:transform .3s}
.tile.play .t-data .lock .sh{animation:shackle 5s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes shackle{0%,8%{transform:translateY(0)}18%,58%{transform:translateY(-3.5px) rotate(-8deg)}66%{transform:translateY(0)}70%{transform:translateY(.6px)}74%,100%{transform:translateY(0)}}
.tile.play .t-data .lock{animation:lockGlow 5s ease infinite}
@keyframes lockGlow{0%,60%{box-shadow:0 0 0 0 rgba(255,255,255,0)}68%{box-shadow:0 0 0 10px rgba(255,255,255,.18)}80%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.t-data b{font-family:var(--disp);font-weight:700;letter-spacing:-.045em;line-height:1.02;font-size:clamp(2rem,3vw,2.7rem)}
.t-data .lock{margin-left:auto;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.t-data .lock svg{width:26px;height:26px}

@media (prefers-reduced-motion:reduce){.tile *{animation:none!important}.t-phone .n,.t-bars i,.t-stars .s i,.t-wa .b,.t-ref .av{opacity:1!important;transform:none!important}.t-ring .prg{stroke-dashoffset:0}}
@media (max-width:1000px){.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:280px}.tile.w2{grid-column:span 2}}
@media (max-width:560px){
  /* Titres : le plancher des clamp est calibre pour le bureau. Sur un telephone,
     il faut redescendre, sinon deux lignes en deviennent quatre. */
  h1{font-size:clamp(2rem,8.5vw,2.6rem);letter-spacing:-.035em}
  h2{font-size:clamp(1.7rem,7.4vw,2.4rem);letter-spacing:-.03em}
  /* Les retours a la ligne sont poses pour l'equilibre du bureau. Sur mobile ils
     tombent au mauvais endroit. On les neutralise en gardant l'espace : un
     `display:none` collerait les deux phrases (« reviennent.Et vous savez »). */
  h1 br,h2 br{content:'';display:inline}
  h1 br::after,h2 br::after{content:' '}
  .sub{font-size:1.02rem;max-width:none}
  /* Le hero garde sa taille souple : elle est calculée pour tenir la phrase. */
  .hero .sub{font-size:clamp(0.82rem,3.7vw,1.3rem)}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}.tile{min-height:280px}.tile.w2,.tile.h2{grid-column:span 1;grid-row:span 1}.tile.w2{min-height:300px}.tile.h2{min-height:auto}.tile.h2 .viz{min-height:0}.t-phone{height:auto;width:min(240px,72%)}.t-stars .q{font-size:1.02rem}.tile .viz{min-height:120px}}

/* HOW */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,4rem)}
.step{background:var(--gray);border-radius:var(--r);padding:1.8rem;min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
/* Une pastille pleine, pas un chiffre géant.
   Le numéro d'origine était en #E8E8ED sur un fond #F5F5F7 : invisible. Le
   dégradé de la marque le rendait visible mais bavard, et trois chiffres
   bicolores en haut de trois cartes tiraient l'œil loin du texte. Une pastille
   d'encre dit « étape » d'un coup, sans prendre la couleur d'accent qui
   appartient aux boutons. */
.step .n{position:absolute;top:1.6rem;left:1.8rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--ink);color:#fff;
  font-family:var(--disp);font-size:1.15rem;font-weight:700;letter-spacing:-.02em;line-height:1;
  opacity:0;transform:translateY(10px) scale(.86);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1) .15s,transform .55s cubic-bezier(.2,.8,.2,1) .15s}
.step.in .n{opacity:1;transform:none}
.step h3{font-size:1.3rem;margin-bottom:.35rem}
.step p{color:var(--ink-2);font-size:.95rem}
.step .t{font-size:.78rem;font-weight:600;color:var(--lagon);margin-top:.7rem}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* SECTORS carousel */
.carousel{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.track{display:flex;gap:1rem;overflow-x:auto;padding:0 max(1.25rem,calc((100% - 1120px)/2)) 1rem;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;justify-content:safe center}
/* Sur un très grand écran, le rail restait collé à la colonne de 1120 px : les
   cartes débordaient à droite et laissaient un vide à gauche, si bien que la
   section paraissait décalée sous un titre centré. La zone utile s'élargit
   avec l'écran, et `safe center` recentre dès que les cartes tiennent. */
@media (min-width:1500px){ .track{padding-inline:max(1.25rem,calc((100% - 1440px)/2))} }
@media (min-width:1900px){ .track{padding-inline:max(1.25rem,calc((100% - 1760px)/2))} }
.track:active{cursor:grabbing}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 min(400px,84vw);border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:4/5.2;background:#000;color:#fff;isolation:isolate}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card:hover img{transform:scale(1.04)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82) 100%);z-index:1}
.card .c{position:absolute;inset:auto 0 0;padding:1.6rem;z-index:2;display:grid;gap:.6rem}
.card .lbl{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--lagon-l)}
.card h3{font-size:1.5rem;color:#fff}
.card .rule{font-size:.95rem;font-weight:600;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);border-radius:14px;padding:.6rem .8rem;line-height:1.35}
.card ul{display:grid;gap:.3rem;font-size:.86rem;color:rgba(255,255,255,.82)}
.card li{list-style:none;display:flex;gap:.5rem}
.card li{align-items:center}
.card li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lava);box-shadow:0 0 0 2.5px rgba(94,231,223,.45);flex:none}

/* COMPARE */
.cmp table{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:clamp(2.5rem,5vw,4rem)}
.cmp th,.cmp td{padding:1.1rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp th{font-family:var(--disp);font-size:1.05rem;letter-spacing:-.02em;font-weight:600;padding-bottom:1rem}
.cmp td:first-child{font-weight:600;width:24%}
.cmp .k{background:var(--gray)}
.cmp thead .k{background:var(--gray);border-radius:16px 16px 0 0}
.cmp .no{color:var(--ink-3)}
.cmp .yes{color:var(--ink);font-weight:600}
.cmp .yes::before{content:"✓  ";color:var(--lagon)}
.cmp .no::before{content:"·  "}
.cmp small{display:block;font-weight:400;color:var(--ink-3);font-size:.8rem;margin-top:.15rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cmp-wrap{overflow-x:auto}
@media (max-width:640px){.cmp th,.cmp td{padding:.9rem .6rem;font-size:.86rem}.cmp td:first-child{width:auto}.cmp .hm{display:none}.cmp small{font-size:.72rem}}

/* ROI dark with GL bg */
.roi{position:relative;overflow:hidden}
.roi .glbg{opacity:.55}
.roi .veil{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.2),rgba(0,0,0,.85));pointer-events:none}
.roi .narrow{position:relative;z-index:1}
/* La calculette de retour sur investissement.
   Le résultat s'affichait sur un pavé blanc posé au milieu d'une section noire :
   la seule surface claire de la page, et elle tombait exactement là où le
   lecteur devait avoir envie de continuer. Le chiffre porte maintenant le
   dégradé de la marque, sur la même matière que le reste du bloc. */
.calc{margin-top:clamp(2.5rem,5vw,4rem);background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:var(--r);padding:clamp(1.5rem,3vw,2.4rem);display:grid;gap:1.5rem;text-align:left;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.calc .f{display:grid;gap:.65rem}
.calc label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:rgba(245,245,247,.6)}
.calc output{font-family:var(--disp);font-size:1.45rem;font-weight:700;letter-spacing:-.03em;
  color:#fff;font-variant-numeric:tabular-nums}

/* Le rail se remplit jusqu'au curseur : sans ça, rien ne dit d'un coup d'œil
   où l'on se trouve dans la plage. `--p` est posé par le script. */
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--lagon-l) 0%,var(--lava) var(--p,50%),rgba(255,255,255,.14) var(--p,50%))}
.calc input[type=range]::-moz-range-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--lagon-l) 0%,var(--lava) var(--p,50%),rgba(255,255,255,.14) var(--p,50%))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;
  margin-top:-9px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 5px rgba(255,77,31,.22);transition:box-shadow .2s,transform .2s}
.calc input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 5px rgba(255,77,31,.22)}
.calc input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}
.calc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 6px rgba(94,231,223,.5)}

.calc .res{display:grid;grid-template-columns:1.4fr 1fr;gap:1.6rem;align-items:end;
  margin-top:.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:600px){.calc .res{grid-template-columns:1fr;gap:1.5rem}}
.calc .res b{font-family:var(--disp);font-size:clamp(2.4rem,5.2vw,3.6rem);letter-spacing:-.045em;display:block;line-height:1;
  font-variant-numeric:tabular-nums}
/* Un dégradé chaud plutôt que celui de la marque : étalé sur un nombre large,
   le teal du début emportait tout et le montant devenait froid. L'argent se
   lit en ember. */
.calc .res b.hot{background:linear-gradient(100deg,#FFB39A 0%,#FF6236 42%,#FF340F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.calc .res div:last-child b{color:rgba(245,245,247,.92);font-size:clamp(1.9rem,3.6vw,2.5rem)}
.calc .res span{display:block;font-size:.85rem;line-height:1.35;color:rgba(245,245,247,.55);margin-top:.5rem;max-width:22ch}
.calc .hyp{font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.42)}

/* PRICING */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2.5rem,5vw,4rem);text-align:left}
.plan{border-radius:var(--r);padding:2rem;background:var(--gray);display:flex;flex-direction:column;gap:1.2rem;
  position:relative;min-width:0;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.plan:hover{transform:translateY(-4px)}
.plan:not(.f){border-color:var(--gray-2)}
.plan:not(.f):hover{border-color:#D8D8DE;box-shadow:0 30px 60px -40px rgba(0,0,0,.35)}
.plan .btn{white-space:normal}
@media (max-width:420px){.plan{padding:1.6rem 1.3rem}.plan .amt b{font-size:3.2rem}}
.plan.f{background:radial-gradient(120% 100% at 15% 0%,#181013 0%,#000 55%);color:#F5F5F7;
  border-color:rgba(255,77,31,.32);box-shadow:0 34px 80px -46px rgba(255,77,31,.55)}
.plan.f:hover{border-color:rgba(255,77,31,.55);box-shadow:0 40px 90px -44px rgba(255,77,31,.7)}
.plan .nm{font-weight:600;font-size:.95rem;color:var(--ink-2)}
.plan.f .nm{color:rgba(255,255,255,.65)}
.plan .amt{font-family:var(--disp);letter-spacing:-.045em;line-height:1;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.plan .amt b{font-size:3.8rem;font-weight:700}
.plan .amt span{font-size:1rem;color:var(--ink-2);font-weight:500;letter-spacing:-.01em}
.plan.f .amt span{color:rgba(255,255,255,.65)}
.plan .amt s{font-size:1.4rem;color:rgba(255,255,255,.42);font-weight:600;text-decoration-thickness:2px}
.plan .d{font-size:.95rem;color:var(--ink-2);margin:0}
.plan.f .d{color:rgba(255,255,255,.7)}
.plan ul{display:grid;gap:.55rem;font-size:.95rem}
.plan li{list-style:none;display:flex;gap:.6rem}
.plan li::before{content:"";width:17px;height:17px;border-radius:50%;flex:none;margin-top:.18rem;
  background:var(--lagon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/11px no-repeat}
.plan.f li::before{background-color:var(--lagon-l);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042726' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")}
.plan .btn{margin-top:auto;width:100%}
.plan .badge{position:absolute;top:-13px;left:2rem;background:var(--lava);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.02em;padding:.4rem .9rem;border-radius:999px;box-shadow:0 10px 24px -10px rgba(255,77,31,.85)}
.seats{display:flex;align-items:center;gap:.8rem;font-size:.85rem;background:rgba(255,255,255,.08);border-radius:14px;padding:.75rem 1rem}
.seats .bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
.seats .bar i{display:block;height:100%;width:30%;background:var(--grad)}
.seats b{color:var(--gold);font-variant-numeric:tabular-nums}
.guar{margin-top:1rem;background:var(--gray);border-radius:var(--r);padding:1.6rem 1.8rem;display:flex;gap:1.2rem;align-items:center;text-align:left}
.guar svg{width:40px;height:40px;color:var(--lagon);flex:none}
.guar b{font-family:var(--disp);font-size:1.2rem;letter-spacing:-.02em;display:block;margin-bottom:.2rem}
.guar p{color:var(--ink-2);font-size:.95rem}
@media (max-width:820px){.plans{grid-template-columns:1fr}}

/* FAQ */
.acc{margin-top:clamp(2.5rem,5vw,4rem);text-align:left;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:1.3rem 0;font-family:var(--disp);font-size:1.15rem;font-weight:600;letter-spacing:-.02em;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.6rem;font-weight:300;color:var(--ink-3);transition:transform .25s;line-height:1}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{padding:0 0 1.4rem;color:var(--ink-2);max-width:66ch}

/* CTA + form */
.final{position:relative;overflow:hidden}
.final .glbg{opacity:.5}
.final .veil{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 40%,rgba(0,0,0,.25),rgba(0,0,0,.9))}
.final .narrow{position:relative;z-index:1}
.form{margin:clamp(2rem,4vw,3rem) auto 0;max-width:560px;background:rgba(255,255,255,.96);color:#000;border-radius:var(--r);padding:1.7rem;display:grid;gap:.9rem;text-align:left;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.form .g{display:grid;gap:.3rem}
.form label{font-size:.78rem;font-weight:600;color:var(--ink-2)}
.form input,.form select{border:1px solid var(--line);background:var(--gray);border-radius:12px;padding:.85rem .95rem;font:inherit;width:100%}
.form input:focus,.form select:focus{outline:2px solid var(--lagon);border-color:transparent;background:#fff}
.form .r2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.form small{color:var(--ink-2);font-size:.78rem;text-align:center}
@media (max-width:600px){.form .r2{grid-template-columns:1fr}}

footer{background:var(--gray);color:var(--ink-2);font-size:.78rem;padding:2.5rem 0 2rem;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
footer h3{font-size:.78rem;color:var(--ink);margin-bottom:.7rem}
footer ul{display:grid;gap:.4rem}
footer li{list-style:none}
footer a:hover{text-decoration:underline}
footer .bottom{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;color:var(--ink-2)}
@media (max-width:800px){footer .wrap{grid-template-columns:1fr 1fr}}

/* ============ FICHIER CLIENT ============
   Le tableau de bord tel que le commerçant le verra. Une maquette, pas une
   capture : une capture vieillit au premier changement d'écran, et personne
   ne la remet à jour. Les chiffres sont cohérents entre eux : le creux de
   15 h explique les vingt-trois clients à relancer. */
.board{margin-top:clamp(2.5rem,5vw,3.5rem);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.28)}
.board-head{display:flex;align-items:center;gap:.45rem;padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);background:var(--gray)}
.board-head .dot{width:10px;height:10px;border-radius:50%;background:var(--gray-2)}
.board-head b{margin-left:.6rem;font-family:var(--disp);font-size:.9rem;font-weight:600;color:var(--ink-2)}

.board-kpi{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.board-kpi>div{padding:1.2rem;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.15rem}
.board-kpi>div:last-child{border-right:0}
.board-kpi>div>span{font-size:.8rem;color:var(--ink-3);font-weight:500}
.board-kpi b .ct{font:inherit;color:inherit}
.board-kpi b{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.board-kpi i{font-style:normal;font-size:.78rem;font-weight:600;color:var(--ink-3)}
.board-kpi i.up{color:var(--lagon)} .board-kpi i.down{color:var(--lava)}

.board-grid{display:grid;grid-template-columns:1.15fr 1fr}
.board-card{padding:1.4rem;border-right:1px solid var(--line)}
.board-card:last-child{border-right:0}
.board-card h3{font-family:var(--disp);font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.9rem}
.board-card h3 .hint{font-family:var(--body);font-size:.78rem;font-weight:500;color:var(--lava)}
.board-card h3 .hint::before{content:"·";margin:0 .35rem;color:var(--ink-3)}

.clients{list-style:none;display:grid;gap:.5rem}
.clients li{display:flex;align-items:center;gap:.7rem;background:var(--gray);border-radius:12px;padding:.55rem .7rem}
.clients li.pale{background:rgba(255,77,31,.07)}
.clients .av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em}
.clients li.pale .av{background:var(--lava)}
.clients .nm{flex:1;min-width:0;font-size:.86rem;font-weight:600;display:flex;flex-direction:column;line-height:1.25}
.clients .nm em{font-style:normal;font-size:.76rem;font-weight:500;color:var(--ink-3)}
.clients .pts{font-size:.8rem;font-weight:700;color:var(--lagon);font-variant-numeric:tabular-nums;flex:none}
.clients .pts.warn{color:var(--lava)}

.hours{display:flex;align-items:flex-end;gap:.4rem;height:140px;position:relative}
/* La bulle suit la barre survolée. Elle est posée en absolu dans le graphique
   plutôt qu'attachée à chaque barre : une seule bulle, jamais deux à l'écran. */
.hours .bulle{position:absolute;top:-6px;transform:translate(-50%,-100%);
  background:var(--ink);color:#fff;border-radius:8px;padding:.3rem .55rem;
  font-size:.76rem;font-weight:600;white-space:nowrap;pointer-events:none;z-index:2;
  font-variant-numeric:tabular-nums}
.hours .bulle::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;
  background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.hours i{cursor:pointer}
.hours i:hover,.hours i:focus-visible{opacity:1;outline:none}
.hours i:focus-visible{box-shadow:0 0 0 3px rgba(11,165,160,.45)}
.hours i{flex:1;position:relative;border-radius:6px 6px 0 0;background:var(--lagon);
  height:8px;min-height:8px;opacity:.85;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.hours i.go{height:calc(var(--h)*1%)}
.hours i.lo{background:var(--lava)}
.hours i b{position:absolute;bottom:-1.35rem;left:50%;transform:translateX(-50%);
  font-size:.68rem;font-weight:600;color:var(--ink-3)}
.board-note{margin-top:2rem;font-size:.84rem;color:var(--ink-2);line-height:1.45}

/* Le nom du commerce, saisissable à même l'en-tête : rien ne doit ressembler à
   un formulaire, tout doit ressembler à sa propre carte. */
.board-head b input{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1.5px dashed var(--gray-2);
  padding:0 .1rem;width:11ch;min-height:24px;outline:none;transition:border-color .2s}
.board-head b input:focus{border-bottom-color:var(--lagon)}

.clients li[role="button"]{cursor:pointer;transition:background .2s,transform .2s}
.clients li[role="button"]:hover{background:var(--gray-2);transform:translateX(2px)}
.clients li.pale[role="button"]:hover{background:rgba(255,77,31,.14)}
.clients li[role="button"][aria-pressed="true"]{background:var(--ink);color:#fff}
.clients li[role="button"][aria-pressed="true"] .nm em{color:rgba(255,255,255,.65)}
.clients li[role="button"][aria-pressed="true"] .pts{color:var(--lagon-l)}
.clients li[role="button"]:focus-visible{outline:3px solid var(--lagon);outline-offset:2px}

.board-relance{padding:0 1.4rem 1.2rem}
.notif-mini{display:flex;gap:.7rem;background:var(--ink);color:#fff;border-radius:14px;padding:.8rem .9rem}
.notif-mini .ico{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.14);flex:none;display:grid;place-items:center;font-size:.9rem}
.notif-mini b{display:block;font-size:.84rem;margin-bottom:.15rem}
.notif-mini small{font-size:.8rem;line-height:1.4;color:rgba(255,255,255,.78)}

.board-foot{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.1rem 1.4rem;
  border-top:1px solid var(--line);background:var(--gray)}
.board-foot .tag{font-size:.78rem;font-weight:600;color:var(--ink-2);
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem}

@media (max-width:820px){
  .board-kpi{grid-template-columns:repeat(2,1fr)}
  .board-kpi>div:nth-child(2n){border-right:0}
  .board-kpi>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .board-grid{grid-template-columns:1fr}
  .board-card{border-right:0;border-bottom:1px solid var(--line)}
}


/* L'équivalent mensuel de l'offre annuelle.
   La carte à l'année porte moins de lignes que la mensuelle : un vide s'ouvrait
   avant le bouton. Il est comblé par le seul chiffre qui compare vraiment les
   deux offres, celui que le lecteur calculait de tête. */
.plan .eq{margin-top:auto;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.95rem;color:rgba(245,245,247,.8)}
.plan .eq b{font-family:var(--disp);font-size:1.35rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.plan .eq span{display:block;font-size:.84rem;color:rgba(245,245,247,.5);margin-top:.3rem}
.plan .eq + .btn{margin-top:1.2rem}

/* L'invitation à toucher la démonstration.
   La carte du hero est jouable depuis le début, mais rien ne le disait : un
   visiteur sur deux la prenait pour une image. L'étiquette du champ vivait sous
   la carte, et disparaissait sur téléphone. */
/* `position:relative` n'est pas décoratif : le voile et le canevas du hero sont
   positionnés, donc ils se peignent au-dessus de tout contenu statique. Sans
   cette ligne, le texte disparaissait sous le voile et seul le point coloré
   transparaissait. */
.stage-invite{position:relative;z-index:2;margin:1.6rem auto 0;max-width:44ch;text-align:center;
  font-size:.88rem;line-height:1.45;color:rgba(245,245,247,.62)}
.stage-invite span{display:inline-flex;align-items:center;gap:.4rem;margin-right:.45rem;
  color:var(--lagon-l);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.stage-invite span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lagon-l);
  box-shadow:0 0 0 3px rgba(94,231,223,.25);animation:pulseInvite 2.4s ease-in-out infinite}
@keyframes pulseInvite{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){.stage-invite span::before{animation:none}}

/* Le lien au pied d'une carte du rail.
   Les quatre cartes disaient ce qu'il faut faire en trois lignes, sans jamais
   dire pourquoi, et n'allaient nulle part. Le lien seul plutôt que la carte
   entière : le rail se fait glisser au doigt, et une carte cliquable en entier
   ouvrirait une page à chaque tentative de défilement. */
.card-lien{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;padding-top:.2rem;min-height:24px;
  font-size:.86rem;font-weight:700;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.35);
  padding-bottom:1px;transition:border-color .2s}
.card-lien::after{content:"›";font-size:1.25em;line-height:0;transition:transform .2s}
.card-lien:hover{border-color:#fff}
.card-lien:hover::after{transform:translateX(3px)}

/* Les titres se cassent au bon endroit sur téléphone.
   Les retours à la ligne posés à la main sont neutralisés sur petit écran, et
   le navigateur coupait alors où il pouvait : « vous ne savez / pas / qui
   revient » laissait un mot seul au milieu. `balance` répartit les lignes. */
h1,h2{text-wrap:balance}

/* La section du fichier client était le seul en-tête de la page aligné à
   gauche, entre deux sections centrées. */
#fichier>.wrap>.eyebrow,#fichier>.wrap>h2,#fichier>.wrap>.sub{text-align:center}
#fichier>.wrap>.sub{margin-inline:auto}

/* Les titres tiennent leurs lignes sur un téléphone.
   Mesuré plutôt que deviné : « En 10 secondes, sans appli. » réclame 371 px à
   32 px de corps, soit 11,6 px de large par pixel de corps. Sur un écran de
   320 px il fallait donc descendre sous 27,6 px, ce que le plancher de 2,6 rem
   interdisait : le titre partait sur trois lignes.

   Le titre de la section « fichier client » est le plus long de la page :
   « Aujourd'hui, vous ne savez pas » réclame 363 px à 27,2 px. Lui seul reçoit
   un corps plus petit, plutôt que de rapetisser tous les titres de la page
   pour un cas. */
@media (max-width:599px){
  .hero h1{font-size:clamp(1.6rem,8vw,2.6rem)}
  #fichier h2{font-size:clamp(1.3rem,6.4vw,2.4rem)}
}