/* v62 : brief PF. Terrain d'abord, épuré, du caractère. Titres en trois phrases mi-gras mi-léger, boutons pilule, photos terrain mêlées aux captures. Fonds unis. */
:root{
  --yellow:#FFC400; --yellow-hover:#FED746; --yellow-pressed:#E8B102; --mustard:#9A7500;
  --cream:#FFF8E6; --sand:#F7F6F2;
  --ink:#0E0E10; --fg2:#18181B; --fg3:#52525B; --fg4:#71717A; --fg5:#A1A1AA;
  --line:#E4E4E7; --line-strong:#D4D4D8; --line-soft:#F1F1F3;
  --ok:#16A175; --ok-bg:#D0EDE3; --warn:#997500; --warn-bg:#FFF2CC; --bad:#B91C1C; --bad-bg:#FEE2E2; --info:#1E3A8A; --info-bg:#DCE9FE;
  --navy:#1A2B42;
  --display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-float:0 18px 40px -16px rgba(9,9,11,.38),0 0 0 1px rgba(9,9,11,.05);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:#fff;color:var(--fg2);font-family:var(--display);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:var(--max);margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:720px){.wrap{padding-left:32px;padding-right:32px}}
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance;margin:0}
p{margin:0}
.ui{font-family:var(--ui);letter-spacing:0}
section{padding-block:clamp(72px,9vw,120px)}

/* titres : la première phrase grasse, la suite légère */
h1,h2{font-weight:700;letter-spacing:-.045em}
h1 .lt,h2 .lt{font-weight:300}
.kicker{display:block;font:600 12.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--mustard)}
.lede{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--fg3)}

/* boutons pilule, sans flèche */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;font:600 16px/1 var(--display);letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;transition:background .15s ease;white-space:nowrap}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(255,196,0,.6);outline-offset:2px}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{background:var(--yellow-hover)}
.btn-k{background:var(--ink);color:#fff}
.btn-k:hover{background:#27272A}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{background:var(--cream)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* en-tête */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:block;width:132px;height:23px;flex:none}
.nav{display:flex;gap:24px;font-size:15px;font-weight:500;margin-left:auto}
.nav a{text-decoration:none;color:var(--fg3);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.top-right{display:flex;align-items:center;gap:16px;margin-left:12px}
.login{font-size:15px;font-weight:500;text-decoration:none;color:var(--fg2);white-space:nowrap}
.top .btn{height:42px;padding:0 20px;font-size:15px;background:var(--yellow);color:var(--ink);border:0}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.mobile-nav{border-top:1px solid var(--line-soft);background:#fff}
.mobile-nav .wrap{display:flex;flex-direction:column;gap:2px;padding-block:12px 20px}
.mobile-nav a{padding:12px 0;font-size:17px;font-weight:600;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.mobile-nav .btn{margin-top:12px;border-bottom:0}
@media (max-width:1100px){.nav,.login{display:none}.menu-btn{display:inline-flex}.top-right{margin-left:auto}}
@media (max-width:520px){.top-right>.btn{display:none}}

/* ---------- HERO ---------- */
.hero{padding:clamp(56px,7vw,96px) 0 0;background:var(--cream)}
.hero-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;max-width:900px;margin:0 auto}
.hero h1{font-size:clamp(40px,5.6vw,78px);line-height:1.02}
.hero h1>span{display:block}
.hero .lede{max-width:54ch}
.trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;font:500 14px/1.3 var(--ui);color:var(--fg3)}
.trust b{color:var(--ink)}
.stars{display:inline-flex;gap:2px;color:var(--yellow);vertical-align:-2px;margin-right:4px}
.stars svg{width:15px;height:15px}
.store{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font:600 12.5px/1 var(--ui)}
.store svg{width:14px;height:14px;fill:currentColor}

/* photo terrain pleine largeur, cartes d'appli autour des pros */
.shot{position:relative;margin-top:clamp(48px,6vw,72px);height:clamp(380px,44vw,640px)}
.shot>img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.shot .cards{position:absolute;inset:0;max-width:1200px;margin:0 auto}
.fl{position:absolute;z-index:2;background:#fff;border-radius:16px;padding:12px 15px;box-shadow:var(--shadow-float);display:flex;flex-direction:column;gap:2px;text-align:left;white-space:nowrap;font-family:var(--ui)}
.fl small{font-size:11.5px;color:var(--fg4)}
.fl b{font-size:14px;color:var(--ink)}
.ps-top{display:flex;align-items:center;gap:6px;width:100%;margin-bottom:4px;font:600 10.5px/1 var(--ui);letter-spacing:.04em;color:var(--fg4)}
.ps-ic{width:16px;height:16px;border-radius:4px;background:var(--yellow);color:#fff;display:flex;align-items:center;justify-content:center}
.ps-ic svg{width:12px;height:12px}
.ps-time{margin-left:auto;letter-spacing:0;font-weight:500}
.fl-push{width:278px;left:4%;top:16%}
.fl-sign{left:12%;bottom:12%}
.sg-ink{width:130px;height:36px;margin:2px 0 0 -4px}
.sg-ok{font:600 11.5px/1 var(--ui);color:var(--ok);border-top:1px dashed var(--line-strong);padding-top:6px;width:100%}
.fl-money{right:6%;top:30%}
.fl-money b{font:800 26px/1.1 var(--display);color:var(--ok);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* logos clients, juste sous la photo */
.logos{display:flex;align-items:center;gap:32px;padding-block:36px}
.logos p{flex:none;font-size:15px;color:var(--fg3);max-width:220px;line-height:1.35}
.logos p b{color:var(--ink)}
.lb-row{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lb-track{display:flex;align-items:center;width:max-content;animation:slide 170s linear infinite}
.lb-row:hover .lb-track{animation-play-state:paused}
.lb-track img{height:40px;width:auto;max-width:160px;object-fit:contain;margin:0 24px;filter:grayscale(1) contrast(1.1);opacity:.7;mix-blend-mode:multiply}
.lb-dup{display:flex;align-items:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- MÉTIERS : lignes de mots qui défilent ---------- */
.trades-sec{padding-block:clamp(64px,8vw,104px);border-top:1px solid var(--line-soft);overflow:hidden}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:820px;margin:0 auto}
.center h2,.zt h2,.sec-h h2{font-size:clamp(32px,4.2vw,56px);line-height:1.04}
.words{margin-top:44px;display:flex;flex-direction:column;gap:12px}
.wl{display:flex;width:max-content;gap:12px;animation:slide 90s linear infinite}
.wl.rev{animation-direction:reverse;animation-duration:110s}
.wl span{font:500 clamp(18px,1.8vw,22px)/1 var(--display);color:var(--fg3);border:1px solid var(--line);border-radius:999px;padding:14px 22px;white-space:nowrap}
.wl span.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- ZIGZAG : photo terrain + capture, texte en débord ---------- */
.zz{display:flex;flex-direction:column;gap:clamp(72px,9vw,128px)}
.zr{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.zr.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.zp{position:relative;grid-column:1;grid-row:1}
.zr.flip .zp{grid-column:2}
.zp>img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px}
.zt{grid-column:2;grid-row:1;position:relative;z-index:3;background:#fff;border-radius:24px;padding:clamp(28px,3.4vw,44px);margin-left:-88px;display:flex;flex-direction:column;gap:18px;box-shadow:0 30px 70px -40px rgba(9,9,11,.35)}
.zr.flip .zt{grid-column:1;margin-left:0;margin-right:-88px}
.zt h2{font-size:clamp(30px,3.2vw,44px)}
.zt .lede{font-size:17px}
.zt .btns{margin-top:4px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills a{font:600 14px/1 var(--display);text-decoration:none;color:var(--ink);background:var(--sand);border-radius:999px;padding:10px 14px}
.pills a:hover{background:var(--cream)}
.zstat{font-size:15px;color:var(--fg3)}
.zstat b{font:700 22px/1 var(--display);color:var(--ink);letter-spacing:-.02em;margin-right:6px}
/* captures posées sur la photo */
.cap{position:absolute;z-index:2;font-family:var(--ui)}
.zr .cap.lead{left:5%;bottom:-28px;width:300px}
.zr.flip .cap.ph{left:130px;bottom:-34px}
.zr .cap.doc{left:5%;bottom:-30px;width:300px}
.card{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow-float)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.row b{font-size:13.5px;color:var(--ink)}
.row small{font-size:11.5px;color:var(--fg4)}
.pill{display:inline-block;font:600 10.5px/1 var(--ui);border-radius:999px;padding:4px 8px;white-space:nowrap}
.pill.new{background:var(--yellow);color:var(--ink)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.lead b.t{display:block;font-size:17px;color:var(--ink);margin:10px 0 4px}
.lead .m{display:block;font-size:12.5px;color:var(--fg3);line-height:1.5}
.acts{display:flex;gap:8px;margin-top:12px}
.acts span{font-size:12.5px;font-weight:700;border-radius:999px;padding:9px 14px}
.acts .y{background:var(--yellow);color:var(--ink)}
.acts .g{background:var(--sand);color:var(--ink)}
.phone{width:206px;border-radius:32px;background:var(--ink);padding:8px;box-shadow:0 30px 60px -24px rgba(9,9,11,.55)}
.phone img{border-radius:25px;width:100%;aspect-ratio:9/18;object-fit:cover;object-position:top}
.dl{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--line-soft);color:var(--fg2)}
.dl b{color:var(--ink);white-space:nowrap}
.dtot{display:flex;justify-content:space-between;align-items:baseline;padding-top:10px;font-size:12.5px;color:var(--fg3)}
.dtot b{font:800 20px/1 var(--display);color:var(--ink)}
.dsend{display:block;text-align:center;background:var(--yellow);color:var(--ink);font-size:12.5px;font-weight:700;border-radius:999px;padding:10px;margin-top:12px}

/* ---------- LOGICIEL : le tableau de bord sur trois appareils, puis les modules ---------- */
.soft{background:var(--sand)}
.sec-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;max-width:820px;margin:0 auto}
.devices{position:relative;max-width:1080px;margin:clamp(48px,6vw,72px) auto 0;padding:0 70px 40px}
.laptop{position:relative}
.lt-scr{background:var(--ink);border-radius:20px 20px 0 0;padding:14px 14px 0}
.lt-base{height:18px;margin:0 -60px;background:#D4D4D8;border-radius:0 0 18px 18px;position:relative}
.lt-base::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:120px;height:7px;background:#B8B8BE;border-radius:0 0 8px 8px}
.app-hero{position:relative;overflow:hidden;border-radius:8px 8px 0 0}
.ah-frame{background:#fff;font-family:var(--ui);transform-origin:0 0;width:1180px}
.ah-bar,.hs-layer{display:none}
.ah-app{display:grid;grid-template-columns:190px minmax(0,1fr);min-height:520px}
.ah-side{background:var(--navy);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.ah-logo{display:flex;align-items:center;gap:8px;padding:4px 8px 16px;color:#fff;font-size:12.5px}
.ah-logo svg{width:22px;height:22px}
.an{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:rgba(255,255,245,.7)}
.an svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.an.on{background:rgba(255,196,0,.14);color:var(--yellow)}
.an em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;background:var(--yellow);color:var(--ink);border-radius:999px;padding:2px 7px}
.ah-main{padding:20px 22px;background:#F4F4F1;display:flex;flex-direction:column;gap:16px;min-width:0;text-align:left}
.ah-top{display:flex;align-items:center;gap:12px}
.ah-top small{display:block;font-size:11px;color:var(--fg4)}
.ah-top b{font-size:17px;color:var(--ink)}
.ah-search{margin-left:auto;font-size:12px;color:var(--fg5);background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;min-width:220px}
.ah-new{font-size:12.5px;font-weight:700;background:#FFD033;border:1px solid var(--yellow);color:var(--ink);border-radius:10px;padding:9px 14px;white-space:nowrap}
.ah-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ah-kpis div{background:#fff;border:1px solid #EBEBE7;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ah-kpis small{font-size:11px;color:var(--fg4)}
.ah-kpis b{font:800 22px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.ah-kpis span{font-size:11px;color:var(--fg4)}
.ah-kpis .up{color:var(--ok);font-weight:600}
.ah-kpis .warn{color:var(--bad);font-weight:600}
.ah-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.ah-card{background:#fff;border:1px solid #EBEBE7;border-radius:12px;padding:14px;min-width:0}
.ah-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.ah-h b{font-size:13px;color:var(--ink)}
.ah-h small{font-size:11px;color:var(--fg4)}
.ah-bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.ab{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.ab i{display:block;width:100%;max-width:26px;background:#E4E4E7;border-radius:5px 5px 2px 2px}
.ab i.now{background:var(--yellow)}
.ab span{font-size:10px;color:var(--fg4)}
.ah-ev,.ev{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.ah-ev:last-child,.ev:last-child{border-bottom:0}
.ah-ev b,.ev b{display:block;font-size:12px;color:var(--ink)}
.ah-ev small,.ev small{font-size:10.5px;color:var(--fg4)}
.d{width:8px;height:8px;border-radius:50%;flex:none}
.d.y{background:var(--yellow)}.d.g{background:var(--ok)}.d.b{background:#3B82F6}
.ah-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12px;font-variant-numeric:tabular-nums}
.ah-row:last-child{border-bottom:0}
.ah-row span{color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-row b{color:var(--ink)}
.ah-row em{font-style:normal}
.ah-leads{background:#FFFBEB;border-color:#F5E3B0}
.ah-lead{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.ah-lead b{display:block;font-size:12px;color:var(--ink)}
.ah-lead small{font-size:10.5px;color:var(--fg4)}
.ah-cta{display:block;text-align:center;font-size:12px;font-weight:700;background:#FFD033;border-radius:9px;padding:8px;color:var(--ink)}
/* tablette et téléphone devant l'ordinateur */
.tab{position:absolute;left:0;bottom:0;width:290px;border-radius:26px;background:var(--ink);padding:10px;box-shadow:0 30px 60px -26px rgba(9,9,11,.55)}
.tab-in{background:#fff;border-radius:17px;padding:16px;font-family:var(--ui)}
.tab-in .row{margin-bottom:6px}
.mob{position:absolute;right:0;bottom:0;width:200px;border-radius:32px;background:var(--ink);padding:8px;box-shadow:0 30px 60px -26px rgba(9,9,11,.55)}
.mob-in{background:#fff;border-radius:25px;padding:22px 12px 14px;font-family:var(--ui);display:flex;flex-direction:column;gap:8px}
.mob-in>small{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg4)}
.mi{border-radius:12px;background:var(--sand);padding:9px 10px}
.mi.on{background:var(--cream);box-shadow:inset 3px 0 0 var(--yellow)}
.mi b{display:block;font-size:12px;color:var(--ink)}
.mi small{font-size:10.5px;color:var(--fg4)}

/* modules : grille bento, tuiles pleines sans contour */
.bento{max-width:1080px;margin:clamp(56px,7vw,88px) auto 0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.tile{position:relative;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:16px;text-decoration:none;background:#fff;overflow:hidden;min-height:280px;transition:transform .2s ease}
.tile:hover{transform:translateY(-2px)}
.tile .tk{font:600 11.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mustard)}
.tile h3{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em;max-width:24ch}
.tile .tv{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.tile.dark{background:var(--ink)}
.tile.dark .tk{color:var(--yellow)}
.tile.dark h3{color:#fff}
.tile.tall{grid-row:span 2}
.tile.wide{grid-column:span 2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;column-gap:24px;align-items:start}
.tile.wide .tk,.tile.wide h3{grid-column:1}
.tile.wide .tv{grid-column:2;grid-row:1 / span 2;margin-top:0;align-self:center}
.tile .card{box-shadow:0 10px 26px -18px rgba(9,9,11,.35);border:1px solid #EFEFEC}
.pscr{background:#fff;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px}
.ph-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:12.5px;color:var(--ink)}
.ph-search svg{width:14px;height:14px;color:var(--fg4)}
.caret{display:inline-block;width:1.5px;height:13px;background:var(--ink);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lib small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg4);margin-bottom:6px}
.lib div{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:8px 10px;border-radius:9px;color:var(--fg2)}
.lib div.on{background:var(--cream);box-shadow:inset 3px 0 0 var(--yellow)}
.lib b{color:var(--ink);white-space:nowrap}
.brand{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;color:#fff}
.brand .lg{width:34px;height:34px;border-radius:9px;background:#1E3A8A;color:#fff;font:800 12px/34px var(--ui);text-align:center;flex:none}
.brand b{display:block;font-size:13px}
.brand small{font-size:11px;color:rgba(255,255,245,.6)}
.brand .sw{margin-left:auto;display:flex;gap:4px}
.brand .sw i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.amt{font:800 26px/1.1 var(--display);color:var(--ink);letter-spacing:-.02em;margin:6px 0 8px;font-variant-numeric:tabular-nums}
.rl{display:flex;flex-wrap:wrap;gap:6px}
.rl span{font:600 11px/1 var(--ui);border-radius:999px;padding:6px 9px;background:var(--ok-bg);color:var(--ok)}
.rl span.nx{background:#F4F4F5;color:var(--fg3)}
.paid{display:flex;align-items:center;gap:12px}
.paid .ic{width:36px;height:36px;border-radius:50%;background:var(--ok-bg);color:var(--ok);font:800 16px/36px var(--ui);text-align:center;flex:none}
.paid b{display:block;font:800 17px/1.2 var(--display);color:var(--ok)}
.paid small{font-size:11.5px;color:var(--fg4)}
.donut{display:flex;align-items:center;gap:14px;margin:4px 0 8px}
.donut svg{width:64px;height:64px;flex:none}
.donut b{display:block;font:800 22px/1 var(--display);color:var(--ink)}
.donut small{font-size:11.5px;color:var(--fg4)}
.kp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kp div{background:#F7F7F5;border-radius:9px;padding:8px 10px}
.kp small{display:block;font-size:10.5px;color:var(--fg4)}
.kp b{font-size:13px;color:var(--ink)}

/* ---------- PREUVE : quatre chiffres alignés, trois réassurances ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1080px;margin:0 auto}
.nums div{display:flex;flex-direction:column;gap:8px}
.nums b{font:700 clamp(36px,4vw,54px)/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.nums span{font-size:16px;color:var(--fg3);max-width:22ch}
.reas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;max-width:1080px;margin:56px auto 0;padding-top:28px;border-top:1px solid var(--line);font-size:16px;color:var(--fg2)}
.reas>span{display:inline-flex;align-items:center;gap:10px}
.flag{display:inline-flex;width:22px;height:15px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.flag i{flex:1}

/* ---------- TÉMOIGNAGES : portraits d'artisans ---------- */
.voices{background:var(--cream)}
.vg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1080px;margin:clamp(48px,6vw,72px) auto 0}
.vc{margin:0;display:flex;flex-direction:column;gap:18px}
.vc img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;border-radius:22px}
.vc q{font:500 22px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink);quotes:"«\00a0" "\00a0»"}
.vc figcaption{display:flex;flex-direction:column;gap:12px}
.vc small{font:500 14px/1.4 var(--ui);color:var(--fg3)}
.vc small b{color:var(--ink);font-weight:600}
.more{display:inline-flex;margin-top:4px;font:600 16px/1 var(--display);color:var(--ink);text-decoration:none;padding-bottom:6px;border-bottom:2px solid var(--yellow)}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:clamp(40px,5vw,56px) auto 0}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:600;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 26px/1 var(--ui);color:var(--fg4);transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--fg3);max-width:62ch}

/* ---------- FIN ---------- */
.final{background:var(--ink)}
.final h2{color:#fff;font-size:clamp(36px,5vw,64px);line-height:1.02}
.final .center{gap:28px}

/* ---------- PIED DE PAGE ---------- */
footer{background:var(--sand);padding-block:56px 32px;font-size:15px;color:var(--fg3)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h4{margin:0 0 12px;font-size:14px;color:var(--ink)}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px}
.legal .note{flex-basis:100%;color:var(--fg4)}

/* ---------- TABLETTE ---------- */
@media (max-width:1100px){
  .fl-push{left:2%}.fl-sign{left:4%}.fl-money{right:2%}
  .devices{padding:0 40px 40px}
  .tab{width:240px}
}
@media (max-width:960px){
  .zr,.zr.flip{grid-template-columns:1fr}
  .zr .zp,.zr.flip .zp{grid-column:1;grid-row:1}
  .zr .zt,.zr.flip .zt{grid-column:1;grid-row:2;margin:-48px 20px 0}
  .zr .cap.lead,.zr .cap.doc{bottom:auto;top:24px}
  .zr.flip .cap.ph{left:auto;right:20px;bottom:auto;top:24px}
  .phone{width:150px}
  .bento{grid-template-columns:1fr 1fr}
  .tile.tall{grid-row:auto}
  .nums{grid-template-columns:1fr 1fr;row-gap:36px}
  .foot{grid-template-columns:1fr 1fr}
}

/* ---------- MOBILE ---------- */
@media (max-width:760px){
  .hero-head{gap:18px}
  .btns{width:100%}
  .btns .btn{width:100%}
  .shot{height:400px}
  .shot>img{object-position:50% 70%}
  .fl-sign,.fl-money{display:none}
  .fl-push{left:50%;top:auto;bottom:-40px;transform:translateX(-50%);width:min(300px,86%)}
  .logos{flex-direction:column;gap:18px;padding-block:72px 32px;text-align:center}
  .logos p{max-width:none}
  .lb-row{width:100%}
  .lb-track img{height:32px;margin:0 16px}
  .wl span{padding:11px 16px}
  .zp>img{border-radius:18px}
  .zr .zt,.zr.flip .zt{margin:-36px 10px 0;padding:24px}
  .zr .cap.lead,.zr .cap.doc{width:auto;left:12px;right:12px;top:auto;bottom:56px}
  .zr .cap .acts,.zr .cap .dl:nth-child(n+3),.zr .cap .dsend{display:none}
  .zr.flip .cap.ph{top:14px;right:14px}
  .phone{width:110px;border-radius:22px;padding:5px}
  .phone img{border-radius:18px}
  .devices{padding:0}
  .laptop,.tab{display:none}
  .mob{position:relative;margin:0 auto;width:240px}
  .bento{grid-template-columns:1fr}
  .tile.wide{grid-column:auto;display:flex}
  .tile.wide .tv{margin-top:auto}
  .tile{min-height:0}
  .nums{gap:28px 16px}
  .nums span{font-size:14px}
  .reas{flex-direction:column;align-items:flex-start;gap:14px;margin-top:40px}
  .vg{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-16px;margin-right:-16px;padding:0 16px 8px;scrollbar-width:none}
  .vg::-webkit-scrollbar{display:none}
  .vc{flex:0 0 78%;scroll-snap-align:center}
  .vc q{font-size:19px}
  .foot{grid-template-columns:1fr}
}

.btn-primary{background:var(--yellow);color:var(--ink)}

/* v62b : sur mobile, les captures restent dans la moitié gauche de la photo, côté rue, loin des visages */
@media (max-width:760px){
  .zr .cap.lead,.zr .cap.doc{left:10px;right:auto;top:10px;bottom:auto;width:56%;padding:11px 12px;border-radius:13px}
  .zr .cap.lead .m:last-of-type{display:none}
  .lead b.t{font-size:14px;margin:7px 0 2px}
  .lead .m,.dl,.dtot{font-size:11px}
  .dtot b{font-size:15px}
  .row b{font-size:12px}
  .zr.flip .cap.ph{left:12px;right:auto;top:12px}
}

/* v63 : vraies photos de clients. Crédit discret sur chaque photo. */
.shot>img{object-position:50% 55%}
.fl-push{left:auto;right:4%;top:9%}
.fl-sign{left:3%;bottom:auto;top:34%}
.fl-money{right:5%;top:auto;bottom:10%}
.cred{position:absolute;right:14px;bottom:14px;z-index:2;font:600 12px/1 var(--ui);color:#fff;background:rgba(14,14,16,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:7px 11px}
.zr .cap.doc .dl span{white-space:nowrap}
@media (max-width:960px){.cred{bottom:auto;top:14px}.zr.flip .cred{right:auto;left:14px}}
@media (max-width:760px){.cred{right:12px;left:auto!important;top:12px;font-size:11px;padding:6px 9px}.zr .cap.lead,.zr .cap.doc{top:auto;bottom:52px}.zr.flip .cap.ph{top:auto;bottom:52px}.shot>img{object-position:62% 50%}}

/* v63b : le téléphone passe à droite pour ne pas cacher le patron, crédits hors du bloc texte, carte du hero recentrée sur mobile */
.zr.flip .cap.ph{left:auto;right:7%}
.zr:not(.flip) .cred{right:auto;left:14px;bottom:auto;top:14px}
@media (max-width:760px){
  .fl-push{left:50%;right:auto;top:auto}
  .shot>img{object-position:42% 50%}
  .zr.flip .cap.ph{left:auto;right:12px}
  .zr.flip .cred{left:12px!important;right:auto}
  .zr:not(.flip) .cred{left:auto;right:12px}
}

/* v63c */
.zr.flip .cred{left:104px;right:auto;top:14px;bottom:auto}
@media (max-width:960px){.zr.flip .cred{left:14px}}

/* v64 : sliders de scénarios photo (outil de maquette) sur le hero et les trois photos du zigzag */
.hs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pd);opacity:0;transition:opacity .5s ease}
.hs.on{opacity:1}
.shot{overflow:hidden}
.shot .cards{z-index:2}
.shot .fl{top:auto;right:auto;bottom:auto;left:auto;transition:opacity .25s ease}
.shot.sw .fl{opacity:0}
.zph{position:relative;aspect-ratio:3/2;border-radius:24px;overflow:hidden;background:var(--sand)}
.sc{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(14,14,16,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-radius:999px;padding:6px;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);font-family:var(--ui)}
.sc-b{width:36px;height:36px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sc-b:hover{background:var(--yellow);color:var(--ink)}
.sc-b svg{width:16px;height:16px}
.sc-l{display:flex;flex-direction:column;gap:2px;min-width:250px;padding:0 4px;font-size:12px;line-height:1.2;color:rgba(255,255,245,.78)}
.sc-l b{font-size:13px;color:var(--yellow)}
.sc-dots{display:flex;gap:6px;padding-right:4px}
.sc-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer}
.sc-dots button[aria-current="true"]{background:var(--yellow);width:20px;border-radius:999px}
.sc.sm{left:14px;top:14px;bottom:auto;transform:none;gap:6px;padding:4px}
.sc.sm .sc-b{width:30px;height:30px}
.sc.sm .sc-l{min-width:0;max-width:260px}
.sc.sm .sc-l span{overflow:hidden;text-overflow:ellipsis}
.zr.flip .sc.sm{left:104px}
.shot[data-s="0"] .fl-push{top:8%;left:4%}.shot[data-s="0"] .fl-sign{bottom:10%;left:3%}.shot[data-s="0"] .fl-money{top:10%;right:3%}
.shot[data-s="1"] .fl-push{top:8%;left:4%}.shot[data-s="1"] .fl-sign{bottom:10%;left:3%}.shot[data-s="1"] .fl-money{top:8%;left:30%}
.shot[data-s="2"] .fl-push{top:8%;left:4%}.shot[data-s="2"] .fl-sign{bottom:10%;left:3%}.shot[data-s="2"] .fl-money{top:8%;left:30%}
.shot[data-s="3"] .fl-push{top:10%;right:4%}.shot[data-s="3"] .fl-sign{top:12%;left:3%}.shot[data-s="3"] .fl-money{bottom:10%;left:4%}
.shot[data-s="4"] .fl-push{top:10%;left:4%}.shot[data-s="4"] .fl-sign{bottom:12%;left:3%}.shot[data-s="4"] .fl-money{top:12%;right:4%}
.shot[data-s="5"] .fl-push{top:10%;right:4%}.shot[data-s="5"] .fl-sign{top:30%;left:4%}.shot[data-s="5"] .fl-money{bottom:12%;right:5%}
.shot[data-s="6"] .fl-push{top:9%;right:4%}.shot[data-s="6"] .fl-sign{top:34%;left:3%}.shot[data-s="6"] .fl-money{bottom:10%;right:5%}
.shot[data-s="7"] .fl-push{top:8%;right:4%}.shot[data-s="7"] .fl-sign{bottom:10%;left:3%}.shot[data-s="7"] .fl-money{bottom:10%;right:4%}
.shot[data-s="8"] .fl-push{top:8%;right:4%}.shot[data-s="8"] .fl-sign{top:10%;left:3%}.shot[data-s="8"] .fl-money{bottom:9%;left:3%}
.shot[data-s="9"] .fl-push{top:7%;right:3%}.shot[data-s="9"] .fl-sign{bottom:8%;left:3%}.shot[data-s="9"] .fl-money{bottom:12%;right:3%}
.shot[data-s="10"] .fl-push{top:8%;right:4%}.shot[data-s="10"] .fl-sign{top:9%;left:3%}.shot[data-s="10"] .fl-money{bottom:10%;right:4%}
.shot[data-s="11"] .fl-push{top:6%;right:4%}.shot[data-s="11"] .fl-sign{top:8%;left:3%}.shot[data-s="11"] .fl-money{bottom:9%;right:4%}
.shot[data-s="12"] .fl-push{top:8%;right:4%}.shot[data-s="12"] .fl-sign{top:45%;right:6%}.shot[data-s="12"] .fl-money{bottom:8%;left:3%}
.shot[data-s="13"] .fl-push{top:8%;left:4%}.shot[data-s="13"] .fl-sign{bottom:10%;left:3%}.shot[data-s="13"] .fl-money{top:12%;right:3%}
.shot[data-s="14"] .fl-push{top:16%;left:4%}.shot[data-s="14"] .fl-sign{bottom:12%;left:12%}.shot[data-s="14"] .fl-money{top:30%;right:6%}
@media (max-width:960px){.zr.flip .sc.sm{left:14px}}
@media (max-width:760px){
  .hs{object-position:var(--pm)}
  .shot{overflow:visible}
  .shot .fl-push{left:50%!important;right:auto!important;top:auto!important;bottom:-40px!important}
  .sc{top:12px;bottom:auto;gap:6px;padding:5px}
  .sc-l{min-width:0;max-width:200px}
  .sc-l span{overflow:hidden;text-overflow:ellipsis}
  .sc-dots{display:none}
  .sc-b{width:32px;height:32px}
  .zph{border-radius:18px}
  .sc.sm,.zr.flip .sc.sm{left:12px;top:12px}
  .sc.sm .sc-l{max-width:180px}
}

/* v64b : sur mobile, la photo reste visible pour comparer les scénarios */
@media (max-width:760px){.zr .cap.lead,.zr .cap.doc{display:none}}
/* v64c : le cadrage propre à chaque photo l'emporte sur l'ancienne règle du hero */
.shot>img.hs{object-position:var(--pd)}
@media (max-width:760px){.shot>img.hs{object-position:var(--pm)}}
.mt{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:960px;margin:36px auto 0}
.mt a{font:500 16px/1 var(--display);color:var(--ink);text-decoration:none;border:1px solid var(--line-strong);border-radius:999px;padding:12px 18px;background:#fff;transition:border-color .15s ease,background .15s ease}
.mt a:hover{border-color:var(--ink);background:var(--cream)}
.mt a.all{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.mt a.all:hover{background:#27272A}
@media (max-width:760px){.mt{gap:8px;margin-top:28px}.mt a{font-size:14px;padding:10px 14px}}

/* onglets A/B */
.abtabs{position:sticky;top:0;z-index:70;background:#0E0E10;display:flex;justify-content:center;gap:6px;padding:7px 16px;font-family:var(--ui)}
.abtabs a{font:600 13px/1 var(--ui);color:rgba(255,255,245,.7);text-decoration:none;padding:9px 16px;border-radius:999px;white-space:nowrap}
.abtabs a:hover{color:#fff}
.abtabs a[aria-current="page"]{background:#FFC400;color:#0E0E10}
.abtabs small{font-weight:500;opacity:.75;margin-left:6px}
header.top{top:47px}
@media (max-width:520px){.abtabs small{display:none}}
@media (max-width:640px){.abtabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:2px;padding:7px 8px}.abtabs::-webkit-scrollbar{display:none}.abtabs a{padding:9px 12px;flex:none}}
/* /onglets */

/* ===== VERSION B : la version A, un cran plus affirmée. Même mise en page, mêmes couleurs ; police identique ; seuls changent les angles et quelques filets. ===== */
/* sur-titres avec un trait jaune, comme un repère de chantier */
.kicker{display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:18px;height:3px;background:var(--yellow)}
/* angles plus francs (24 px devient 10 px) */
.zph,.zt,.tile,.vc img,.jr,.card,.zp>img{border-radius:10px}
.lt-scr{border-radius:12px 12px 0 0}
.wl span,.pills a,.mt a{border-radius:8px}
/* bloc texte du zigzag : un filet jaune en tête */
.zt{box-shadow:inset 0 3px 0 var(--yellow),0 30px 70px -40px rgba(9,9,11,.35)}
/* métiers : pastilles cernées plus nettement */
.wl span{border-color:var(--line-strong);color:var(--ink)}
/* chiffres : un filet encre au-dessus de chaque chiffre */
.nums div{border-top:2px solid var(--ink);padding-top:18px}
/* témoignages : portraits légèrement désaturés */
.vc img{filter:saturate(.75) contrast(1.05)}
/* pied de page sur encre pour clore la page */
footer{background:var(--ink);color:rgba(255,255,245,.62)}
footer h4{color:#fff}
footer a:hover{color:#fff}
footer .logo{filter:none}
.legal{border-color:rgba(255,255,255,.12)}
.final{border-bottom:1px solid rgba(255,255,255,.08)}

/* ===== VERSION C : la version B, avec un seul bloc logiciel : le tableau de bord en grand et les fonctionnalités en badges autour. ===== */
.soft .devices{position:relative;max-width:1180px;padding:0 0 8px;margin-top:clamp(48px,6vw,72px)}
.soft .laptop{width:64%;margin:0 auto}
.mf{position:absolute;z-index:3;width:230px;display:flex;flex-direction:column;gap:5px;background:#fff;color:var(--ink);text-decoration:none;padding:16px 18px;border-radius:10px;box-shadow:0 18px 40px -18px rgba(9,9,11,.35),0 0 0 1px rgba(9,9,11,.06);border-top:3px solid var(--yellow);transition:box-shadow .15s ease}
.mf:hover{box-shadow:0 22px 46px -18px rgba(9,9,11,.45),0 0 0 2px var(--yellow)}
.mf b{font:700 16px/1.25 var(--display)}
.mf span{font-size:13.5px;line-height:1.4;color:var(--fg3)}
.mf.l{left:0}.mf.r{right:0}
.m1{top:10%}.m2{top:56%}.m3{top:18%}.m4{top:64%}
.soft-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px;text-align:center}
.soft-cta p{font-size:15px;color:var(--fg3)}
@media (max-width:1100px){.soft .laptop{width:58%}.mf{width:190px;padding:13px 14px}.mf b{font-size:14.5px}.mf span{font-size:12.5px}}
@media (max-width:860px){
  .soft .laptop{width:100%}
  .soft .devices{display:flex;flex-direction:column;gap:20px}
  .feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mf{position:static;width:auto}
}
@media (max-width:760px){.soft .laptop{display:block}.soft .lt-scr{padding:8px 8px 0;border-radius:10px 10px 0 0}.soft .lt-base{margin:0 -14px;height:12px}.mf{padding:12px}.mf b{font-size:14px}.mf span{font-size:12px}}
/* témoignages : six pros sur une seule ligne */
.vg{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;max-width:1180px}
.vc{gap:12px}
.vc img{aspect-ratio:3/4;object-position:50% 25%}
.vc q{font-size:16px;line-height:1.3}
.vc small{font-size:12.5px}
@media (max-width:1100px){.vg{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}
@media (max-width:760px){.vg{display:flex}.vc img{aspect-ratio:4/5}.vc q{font-size:18px}}
/* logiciel : le tableau de bord posé sur la photo du dépôt d'une entreprise, mini-blocs en verre clair */
.soft{position:relative;background:var(--ink) url(/assets/s360-depot.webp) 50% 50%/cover;overflow:hidden}
.soft::before{content:"";position:absolute;inset:0;background:rgba(10,10,12,.62)}
.soft>.wrap{position:relative}
.soft .sec-h h2{color:#fff}
.soft .sec-h .lt{color:#fff}
.soft .sec-h .lede{color:rgba(255,255,245,.8)}
.soft .sec-h .kicker{color:var(--yellow)}
.soft .lt-scr{box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
.soft .lt-base{background:#B8B8BE}
.soft .mf{background:rgba(255,255,255,.96)}
.soft .soft-cta .btn-k{background:var(--yellow);color:var(--ink)}
.soft .soft-cta .btn-k:hover{background:var(--yellow-hover)}
.soft .soft-cta p{color:rgba(255,255,245,.75)}
.mf-n{display:inline-flex;align-items:center;gap:8px;font:800 26px/1 var(--display);color:var(--ink);letter-spacing:-.03em;margin-bottom:2px}



/* pack 360, intégré au reste : fond sable, trois cartes blanches à filet jaune (comme les mini-blocs du logiciel), une photo ou un écran par carte, des « + » discrets, une ligne « = » sobre */
.s360{background:#fff}
.pk{max-width:1180px;margin:clamp(40px,5vw,60px) auto 0;background:var(--sand);border-radius:12px;padding:16px}
.pk-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
.pk-plus{align-self:center;width:34px;height:34px;margin:0 -9px;position:relative;z-index:2;border-radius:50%;background:var(--ink);color:#fff;font:700 20px/34px var(--display);text-align:center;box-shadow:0 0 0 5px var(--sand)}
.pkc{display:flex;flex-direction:column;background:#fff;border-radius:10px;border-top:3px solid var(--yellow);text-decoration:none;color:inherit;overflow:hidden;box-shadow:0 18px 40px -26px rgba(9,9,11,.4);transition:box-shadow .15s ease}
.pkc:hover{box-shadow:0 22px 46px -24px rgba(9,9,11,.5),0 0 0 2px var(--yellow)}
.pkv{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.pkv>img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pkv .card{position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;box-shadow:0 14px 30px -14px rgba(9,9,11,.5)}
.pkv .card .ps-top{margin-bottom:2px}
.pkv .card b{font-size:13.5px;color:var(--ink)}
.pkv .card small{font-size:11.5px;color:var(--fg4)}
.pkv.scr{background:#EFEDE7;display:flex;justify-content:center}
.pkv.scr .ph{width:46%;margin-top:18px;border-radius:22px;background:var(--ink);padding:5px;align-self:flex-start;box-shadow:0 24px 40px -22px rgba(9,9,11,.6)}
.pkv.scr .ph img{display:block;width:100%;border-radius:17px}
.pkv .gpill{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:7px 11px 7px 9px;box-shadow:0 14px 30px -14px rgba(9,9,11,.5)}
.gpill .gl{width:16px;height:16px}
.gpill .gn{font:800 14px/1 var(--display);color:var(--ink)}
.gpill .gs{display:inline-flex;gap:1px}
.gpill .gs svg{width:12px;height:12px;fill:#FBBC04}
.gpill .gc{font-size:11.5px;color:var(--fg4);padding-left:8px;border-left:1px solid var(--line)}
.pkv .dtot{display:flex;justify-content:space-between;align-items:baseline;padding-top:4px}
.pkv .dtot b{font:800 17px/1 var(--display);color:var(--ink)}
.pkt{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.pkt .tk{font:600 11.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mustard)}
.pkt h3{font-size:20px;line-height:1.2;font-weight:700}
.pkt p{font-size:14.5px;color:var(--fg3)}
.pk-sum{display:flex;align-items:center;gap:16px;margin-top:16px;padding:6px 6px 6px 18px}
.pk-sum .eq{flex:none;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--ink);font:800 20px/34px var(--display);text-align:center}
.pk-sum p{flex:1;min-width:0;font-size:16px;color:var(--fg3)}
.pk-sum p b{color:var(--ink);font-weight:700}
@media (max-width:900px){.pk-row{grid-template-columns:1fr}.pk-plus{margin:-9px auto;justify-self:center}.pk-sum{flex-direction:column;align-items:flex-start;padding:6px}.pk-sum .btn{width:100%}}
.soft .m1{top:8%}.soft .m2{top:56%}.soft .m3{top:14%}.soft .m4{top:60%}
.soft .ub{transform:var(--tf,none);transition:transform .25s ease,box-shadow .2s ease}
.soft .ub:hover{transform:var(--tf,none) translateY(-4px)}
.soft .m1{top:4%;--tf:translateX(-10px)}.soft .m2{top:58%;--tf:translateX(56px)}
.soft .m3{top:18%;--tf:translateX(-40px)}.soft .m4{top:62%;--tf:translateX(14px)}
@media (max-width:860px){.soft .ub{--tf:none}}
.soft .m3{top:6%;--tf:translateX(-36px)}.soft .m4{top:62%;--tf:translateX(12px)}
/* mobile : l'ordinateur ne prend plus toute la largeur, il garde de l'air de chaque côté */
@media (max-width:760px){.soft .laptop{width:84%!important;margin:0 auto}.soft .lt-base{margin:0 -8px}}
/* mobile : cartes alignées sur la gouttière de la page, sans décalage */
@media (max-width:860px){.soft .devices{margin-left:0!important;margin-right:0!important;padding-left:0;padding-right:0}.soft .ub{--tf:none!important;transform:none!important}}

/* cartes « moments du logiciel » : un petit écran réel par fonction, en verre clair, légèrement décalées */
.ub{position:absolute;z-index:3;width:250px;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);text-decoration:none;font-family:var(--ui);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.5);transition:transform .2s ease,box-shadow .2s ease}
.ub:hover{transform:translateY(-3px);box-shadow:0 30px 60px -22px rgba(0,0,0,.7),0 0 0 2px var(--yellow)}
.ub.l{left:0}.ub.r{right:0}
.ub-top{display:flex;align-items:center;gap:6px;font:600 10.5px/1 var(--ui);letter-spacing:.04em;color:var(--fg4)}
.ub-top .ps-time{margin-left:auto;letter-spacing:0;font-weight:500}
.ub-t{font-size:14px;color:var(--ink)}
.ub-s{font-size:12px;color:var(--fg4)}
.ub-k{font-size:12px;font-weight:600;color:var(--fg2)}
.ub-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ub-big{font:800 24px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ub-big.ok{color:var(--ok)}
.ub-pay{display:flex;align-items:center;gap:12px}
.ub-pay>div{display:flex;flex-direction:column;gap:3px}
.ub-ic{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font:800 17px/1 var(--ui)}
.ub-ic.ok{background:var(--ok-bg);color:var(--ok)}
.ub-donut{width:46px;height:46px;flex:none}
.ub-sv{padding-top:6px;border-top:1px solid var(--line-soft)}
.ub-ev{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);padding:5px 0;border-top:1px solid var(--line-soft)}
.ub-ev em{margin-left:auto;font-style:normal;color:var(--fg4);font-size:11.5px}
.ub-tl{display:flex;align-items:center;gap:4px;margin:2px 0}
.ub-tl span{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--ui);color:var(--fg4);background:#F4F4F5;border-radius:999px;padding:6px 9px}
.ub-tl span.on{background:var(--ok-bg);color:var(--ok)}
.ub-tl span svg{width:11px;height:11px}
.ub-tl i{flex:1;height:2px;background:var(--line-strong);min-width:6px}
@media (max-width:1100px){.ub{width:212px;padding:12px 13px}.ub-big{font-size:20px}}
@media (max-width:860px){.ub{position:static;width:auto}.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}}
@media (max-width:480px){.ub-big{font-size:18px}.ub-tl span{padding:5px 7px}}

/* ===== VERSION E : la version D, avec le bloc logiciel sur photo de dépôt promu en hero. Six cartes autour de l'écran : les fonctions principales. ===== */
.hero-e{padding-block:clamp(56px,7vw,88px) clamp(56px,6vw,80px)}
.hero-e .hero-head{gap:20px}
.hero-e .kicker{color:var(--yellow)}
.hero-e h1{color:#fff;font-size:clamp(40px,5.4vw,76px);line-height:1.02}
.hero-e h1>span{display:block}
.hero-e h1 .lt{color:#fff}
.hero-e .lede{color:rgba(255,255,245,.82);max-width:56ch}
.hero-e .btn-k{background:#fff;color:var(--ink)}
.hero-e .btn-k:hover{background:var(--cream)}
.hero-e .trust{color:rgba(255,255,245,.78)}
.hero-e .trust b{color:#fff}
.hero-e .store{background:rgba(255,255,255,.14)}
.hero-e .devices{margin-top:clamp(40px,5vw,60px)}
.hero-e .laptop{width:60%}
.hero-e .mf{width:236px}
.hero-e .m1{top:0}.hero-e .m2{top:37%}.hero-e .m5{top:72%}
.hero-e .m3{top:4%}.hero-e .m4{top:39%}.hero-e .m6{top:76%}
.mf .ps-top{margin-bottom:4px}
.mf .rl{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.mf .rl span{font:600 10.5px/1 var(--ui);border-radius:999px;padding:5px 8px;background:var(--ok-bg);color:var(--ok)}
.mf .rl span.nx{background:#F4F4F5;color:var(--fg3)}
.mf.notif{border-top-color:var(--yellow)}
.logos-e{background:#fff}
@media (max-width:1100px){.hero-e .laptop{width:56%}.hero-e .mf{width:200px}}
@media (max-width:860px){.hero-e .laptop{width:100%}.hero-e .mf{width:auto}}
.mf.notif .ps-time{display:none}
.hero-e .ub{width:250px}
.hero-e .m1{top:2%}.hero-e .m2{top:36%}.hero-e .m5{top:70%}
.hero-e .m3{top:6%}.hero-e .m4{top:39%}.hero-e .m6{top:74%}
.hero-e .m2,.hero-e .m4{transform:translateX(26px)}.hero-e .m2:hover,.hero-e .m4:hover{transform:translate(26px,-3px)}
.hero-e .m4{transform:translateX(-26px)}.hero-e .m4:hover{transform:translate(-26px,-3px)}
@media (max-width:1100px){.hero-e .ub{width:212px}}
@media (max-width:860px){.hero-e .ub{width:auto;transform:none!important}}
/* cartes moins rangées : hauteurs, décalages et légères rotations différentes */
.hero-e .ub{transform:var(--tf);transition:transform .25s ease,box-shadow .2s ease}
.hero-e .ub:hover{transform:var(--tf) translateY(-4px)}
.hero-e .m1{top:-3%;--tf:translateX(-14px)}
.hero-e .m2{top:33%;--tf:translateX(70px)}
.hero-e .m5{top:72%;--tf:translateX(-6px)}
.hero-e .m3{top:9%;--tf:translateX(-46px)}
.hero-e .m4{top:43%;--tf:translateX(16px)}
.hero-e .m6{top:77%;--tf:translateX(-84px)}
.hero-e .m2,.hero-e .m6{z-index:4}
@media (max-width:860px){.hero-e .ub{--tf:none!important}}
.hero-e .m3{top:6%;--tf:translateX(-40px)}
.hero-e .m4{top:60%;--tf:translateX(10px)}
@media (max-width:860px){.feats{align-items:start}.feats .ub:last-child:nth-child(odd){grid-column:span 2}}
@media (max-width:760px){.hero-e .laptop{width:84%!important}}

/* ===== E : les blocs du dessous reprennent le langage du hero : photos voilées, cartes en verre clair, ombres franches, rythme clair / sombre ===== */
/* zigzag : photos et blocs texte à 16 px, captures en cartes « verre » comme celles du hero */
.zph,.zp>img{border-radius:16px}
.zt{border-radius:16px;box-shadow:0 40px 80px -44px rgba(9,9,11,.45),inset 0 3px 0 var(--yellow)}
.zr .cap.card{background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0;border-radius:16px;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.5)}
.zr .cap .acts span,.zr .dsend{border-radius:999px}
/* chiffres : une bande sombre sur photo, comme le hero */
.nums-e{position:relative;background:var(--ink) url(/assets/g5-entreprise-1.webp) 50% 40%/cover;overflow:hidden}
.nums-e::before{content:"";position:absolute;inset:0;background:rgba(10,10,12,.7)}
.nums-e>.wrap{position:relative}
.nums-e .nums div{border-top-color:var(--yellow)}
.nums-e .nums b{color:#fff}
.nums-e .nums span{color:rgba(255,255,245,.72)}
.nums-e .reas{border-color:rgba(255,255,255,.16);color:rgba(255,255,245,.85)}
/* témoignages : la citation devient une carte blanche posée sur le bas du portrait */
.voices .vc{gap:0}
.voices .vc img{border-radius:16px;aspect-ratio:3/4}
.voices .vc figcaption{position:relative;z-index:1;margin:-44px 8px 0;background:#fff;border-radius:14px;padding:14px 14px 12px;gap:8px;
  box-shadow:0 22px 40px -22px rgba(9,9,11,.45)}
.voices .vc q{font-size:15px}
/* fin de page : même photo de dépôt que le hero, pour boucler la page */
.final-e{position:relative;background:var(--ink) url(/assets/s360-depot.webp) 50% 50%/cover;overflow:hidden;padding-block:clamp(96px,11vw,140px)}
.final-e::before{content:"";position:absolute;inset:0;background:rgba(10,10,12,.66)}
.final-e>.wrap{position:relative}
@media (max-width:760px){.voices .vc figcaption{margin:-36px 6px 0}}
.nums-e::before{background:rgba(10,10,12,.78)}
.voices .vg{align-items:stretch}.voices .vc{display:flex;flex-direction:column}.voices .vc figcaption{flex:1}
/* témoignages : fond blanc, plus de crème pastel */
.voices{background:#fff}

/* ===== E : trois grands panneaux photo (trouver, être vu, gérer), même langage que le hero ===== */
.story{padding-block:clamp(56px,7vw,96px)}
.story .wrap{display:flex;flex-direction:column;gap:20px;max-width:1240px}
.pn{position:relative;border-radius:20px;overflow:hidden;min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding:56px;background:var(--ink)}
.pn-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.pn::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(10,10,12,.52)}
.pn-t,.pn-v{position:relative;z-index:2}
.pn.flip .pn-t{order:2}.pn.flip .pn-v{order:1}
.pn-t{display:flex;flex-direction:column;gap:16px;max-width:520px}
.pn-t .kicker{color:var(--yellow)}
.pn-t h2{color:#fff;font-size:clamp(32px,3.6vw,48px);line-height:1.05}
.pn-t h2 .lt{color:#fff}
.pn-t .lede{color:rgba(255,255,245,.85);font-size:17px}
.pn-t .btns{margin-top:6px}
.pn-t .btn-w{background:#fff;color:var(--ink)}
.pn-m{display:flex;flex-wrap:wrap;gap:8px}
.pn-m a{font:500 14px/1 var(--display);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:999px;padding:9px 13px}
.pn-m a:hover{background:rgba(255,255,255,.2)}
.pn-m a.all{background:#fff;color:var(--ink);border-color:#fff;font-weight:600}
.pn-stat{color:rgba(255,255,245,.85);font-size:15px}
.pn-stat b{font:800 26px/1 var(--display);color:var(--yellow);margin-right:6px}
.pn-v{position:relative;min-height:380px}
.pn-v .ub{position:absolute;width:300px}
.pv-n{top:6%;right:4%}
.pn .ub-acts{display:flex;gap:8px;margin-top:6px}
.pn .ub-acts span{font-size:12.5px;font-weight:700;border-radius:999px;padding:9px 14px}
.pn .ub-acts .y{background:var(--yellow);color:var(--ink)}
.pn .ub-acts .g{background:#F4F4F5;color:var(--ink)}
.pv-phone{position:absolute;left:50%;top:50%;width:200px;transform:translate(-50%,-50%);border-radius:30px;background:#0A0A0C;padding:7px;box-shadow:0 40px 70px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
.pv-phone img{display:block;width:100%;border-radius:24px}
.pn-v .pv-g{top:8%;left:0;width:auto;padding:8px 12px;border-radius:999px}
.gp{display:inline-flex;align-items:center;gap:8px}
.gp .gl{width:17px;height:17px}.gp b{font:800 15px/1 var(--display)}.gp .gs{display:inline-flex;gap:1px}.gp .gs svg{width:13px;height:13px;fill:#FBBC04}
.gp .gc{font-size:12px;color:var(--fg4);padding-left:8px;border-left:1px solid var(--line)}
.pn-v .pv-call{bottom:10%;right:0;width:220px}
.pn-v .pv-c2{top:auto;bottom:4%;right:4%;left:auto}
/* cartes placées pour ne jamais couvrir un visage */
.p1 .pv-n{top:2%;right:0}
.p1 .pv-c1{top:auto;bottom:2%;right:-2%;left:auto}
.p3 .pv-c1{top:auto;bottom:34%;left:-6%}
.p3 .pv-c2{bottom:2%;right:0}
.flip .pn-bg{object-position:50% 40%}
.flip .pv-phone{left:46%}
.flip .pn-v .pv-g{top:10%;left:2%}
.flip .pn-v .pv-call{bottom:14%;right:2%}
@media (max-width:960px){
  .pn{grid-template-columns:1fr;padding:32px 24px;min-height:0}
  .pn.flip .pn-t{order:1}.pn.flip .pn-v{order:2}
  .pn-v{min-height:0;display:flex;flex-direction:column;gap:12px}
  .pn-v .ub,.pn-v .pv-g,.pn-v .pv-call{position:static;width:auto}
  .pv-phone{position:relative;left:auto;top:auto;transform:none;margin:0 auto;width:170px}
  .pn::before{background:rgba(10,10,12,.62)}
}
/* allégé : plus de voile sombre, la photo reste naturelle ; le texte passe dans une carte blanche, comme les cartes du hero */
.pn{min-height:520px;padding:40px;background:#E9E6DF}
.pn::before{display:none}
.pn-t{background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;padding:32px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.pn-t .kicker{color:var(--mustard)}
.pn-t h2,.pn-t h2 .lt{color:var(--ink)}
.pn-t .lede{color:var(--fg3)}
.pn-m a{color:var(--ink);background:var(--sand);border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.pn-m a:hover{background:var(--cream)}
.pn-m a.all{background:var(--ink);color:#fff;border-color:var(--ink)}
.pn-stat{color:var(--fg3)}
.pn-stat b{color:var(--ink)}
.pn-t .btn-w{background:var(--ink);color:#fff}
@media (max-width:960px){.pn{padding:16px}.pn-t{padding:24px}.pn-v{padding-bottom:8px}.flip .pv-phone{left:auto}}
/* ===== E : quatre cartes légères (remplacent les grands panneaux) ===== */
.q4s .wrap{max-width:1240px}
.q4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1080px;margin:clamp(36px,4vw,52px) auto 0}
.q4c{aspect-ratio:1/1}
.q4c .q4v{flex:1 1 auto;min-height:0}
.q4t{flex:none}
.q4c{display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 0 0 1px var(--line),0 24px 50px -36px rgba(9,9,11,.45);transition:transform .2s ease,box-shadow .2s ease}
.q4c:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(9,9,11,.5)}
.q4v{position:relative;overflow:hidden;background:var(--sand)}
.q4v>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q4v .ub{position:absolute;left:10px;right:10px;bottom:10px;width:auto;padding:11px 12px;border-radius:13px}
.q4v .ub .ub-t{font-size:13px}.q4v .ub-big{font-size:20px}
.q4ph{position:absolute;left:50%;top:12%;width:44%;transform:translateX(-50%);border-radius:18px;background:#0A0A0C;padding:4px;box-shadow:0 24px 40px -18px rgba(0,0,0,.7)}
.q4ph img{display:block;width:100%;border-radius:14px}
.q4v .q4g{left:10px;right:auto;bottom:10px;padding:7px 11px;border-radius:999px}
.q4g .gp b{font-size:14px}.q4g .gl{width:15px;height:15px}.q4g .gs svg{width:11px;height:11px}
.q4cert{position:absolute;inset:0;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:18px}
.q4-seal{width:44%;max-width:120px}
.q4cert ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.q4cert li{display:flex;align-items:center;gap:8px;font:500 13px/1.2 var(--ui);color:rgba(255,255,245,.9)}
.q4cert li svg{width:16px;height:16px;flex:none;color:var(--yellow)}
.q4t{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;flex:none}
.q4t .kicker{justify-content:flex-start;font-size:11px}
.q4t h3{font-size:20px;line-height:1.2;font-weight:700}
.q4t p{font-size:14.5px;color:var(--fg3)}
.q4l{padding-top:8px;font:600 14.5px/1 var(--display);color:var(--ink)}
.q4c:hover .q4l{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.q4t h3{font-size:24px}
.q4v .ub{left:16px;right:auto;bottom:16px;width:300px}
.q4v .q4g{bottom:16px;left:16px;width:auto}
.q4ph{width:30%}
.q4-seal{width:32%}
@media (max-width:760px){.q4{grid-template-columns:1fr}.q4c{aspect-ratio:auto}.q4v{flex:none;aspect-ratio:4/3!important}.q4v .ub{right:12px;left:12px;width:auto;bottom:12px}.q4v .q4g{right:auto}.q4ph{width:40%}.q4-seal{width:30%}}

/* lisibilité : le texte d'abord, en grand, puis le visuel encadré en dessous */
.q4c{aspect-ratio:auto;min-height:560px}
.q4t{order:-1;padding:30px 30px 22px;gap:10px}
.q4t .kicker{font-size:12px}
.q4t h3{font-size:clamp(24px,2.4vw,30px);line-height:1.12;letter-spacing:-.02em}
.q4t p{font-size:16px;line-height:1.5}
.q4l{font-size:15.5px;padding-top:4px}
.q4c .q4v{margin:0 14px 14px;border-radius:14px;flex:1 1 auto;min-height:260px}
.q4v .ub{width:280px}
@media (max-width:760px){.q4c{min-height:0}.q4t{padding:24px 22px 18px}.q4c .q4v{min-height:0;aspect-ratio:4/3!important;margin:0 12px 12px}}

/* les quatre blocs les uns sous les autres : texte à gauche, visuel à droite, en alternance */
.q4{grid-template-columns:1fr;gap:18px;max-width:1120px}
.q4c{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:400px;align-items:stretch}
.q4t{order:0;justify-content:center;padding:44px 48px;gap:14px}
.q4t h3{font-size:clamp(28px,2.8vw,38px)}
.q4t p{font-size:17px;max-width:40ch}
.q4c .q4v{order:1;margin:14px 14px 14px 0;min-height:0}
.q4c:nth-child(even) .q4t{order:2}
.q4c:nth-child(even) .q4v{order:1;margin:14px 0 14px 14px}
.q4c:hover{transform:translateY(-2px)}
.q4v .ub.q4g{width:auto;right:auto}
@media (max-width:860px){.q4c{grid-template-columns:1fr;min-height:0}.q4t,.q4c:nth-child(even) .q4t{order:0;padding:26px 24px 18px}.q4c .q4v,.q4c:nth-child(even) .q4v{order:1;margin:0 12px 12px;aspect-ratio:4/3!important}}

/* fil vertical 1 → 4 à gauche des blocs */
.q4{position:relative;padding-left:76px;counter-reset:q4}
.q4::before{content:"";position:absolute;left:27px;top:40px;bottom:40px;width:2px;background:repeating-linear-gradient(var(--line-strong) 0 6px,transparent 6px 12px)}
.q4c{position:relative;overflow:visible;counter-increment:q4}
.q4c::before{content:counter(q4);position:absolute;left:-76px;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;
  background:var(--yellow);color:var(--ink);font:800 24px/56px var(--display);text-align:center;box-shadow:0 0 0 8px #fff}
.q4c .q4v{border-radius:14px}
@media (max-width:860px){.q4{padding-left:48px}.q4::before{left:17px}.q4c::before{left:-48px;top:28px;transform:none;width:36px;height:36px;font-size:17px;line-height:36px;box-shadow:0 0 0 6px #fff}}

/* fil plus affirmé : trait jaune plein, grosses pastilles encre à chiffre jaune */
.q4{padding-left:104px}
.q4::before{left:38px;width:5px;border-radius:3px;background:var(--yellow);top:60px;bottom:60px}
.q4c::before{left:-104px;width:80px;height:80px;background:var(--ink);color:var(--yellow);font:800 38px/80px var(--display);box-shadow:0 0 0 6px var(--yellow),0 0 0 14px #fff}
@media (max-width:860px){.q4{padding-left:58px}.q4::before{left:20px;width:4px;top:40px}.q4c::before{left:-58px;width:44px;height:44px;font-size:21px;line-height:44px;box-shadow:0 0 0 4px var(--yellow),0 0 0 9px #fff}}

/* F : zigzag de la D + 4e ligne certification, reliés par un fil vertical numéroté */
.zzf{padding-bottom:clamp(56px,7vw,96px)}
.zzf .zz{position:relative;padding-left:104px;margin-top:clamp(40px,5vw,64px);counter-reset:zf}
.zzf .zz{--zg:clamp(72px,9vw,128px);gap:var(--zg)}
.zzf .zr:not(:last-child)::after{content:"";position:absolute;z-index:4;left:-66px;top:50%;width:5px;height:calc(100% + var(--zg));margin-left:-2px;border-radius:3px;background:var(--yellow)}
.zzf .zr{counter-increment:zf}
.zzf .zr::before{content:counter(zf);position:absolute;z-index:5;left:-104px;top:50%;transform:translateY(-50%);width:80px;height:80px;border-radius:50%;
  background:var(--ink);color:var(--yellow);font:800 38px/80px var(--display);text-align:center;box-shadow:0 0 0 6px var(--yellow),0 0 0 14px #fff}
.zcert{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--ink)}
.zcert .q4cert{position:absolute;inset:0}
.zcert .q4-seal{width:26%}
.zcert .q4cert li{font-size:15px}
@media (max-width:960px){.zzf .zz{padding-left:66px}.zzf .zr:not(:last-child)::after{left:-36px;top:42px;width:4px}.zzf .zr::before{left:-58px;top:20px;transform:none;width:44px;height:44px;font-size:21px;line-height:44px;box-shadow:0 0 0 4px var(--yellow),0 0 0 9px #fff}}
@media (max-width:760px){.zcert .q4-seal{width:34%}.zcert .q4cert li{font-size:13px}}
@media (max-width:960px){.zzf .zr{grid-template-columns:minmax(0,1fr)}.zzf .zr>*{min-width:0}.zzf .zr .zt,.zzf .zr.flip .zt{margin-left:8px;margin-right:8px}}

/* fil tout en jaune : pastilles jaunes à chiffre encre, sans contour noir ni halo blanc */
.zzf .zr::before{background:var(--yellow);color:var(--ink);box-shadow:none}

/* 27/10 : PF « la version F reprend ce design » : zigzag simple, sans fil vertical ni pastilles numérotées */
.zzf .zz{padding-left:32px!important}
.zzf .zr::before,.zzf .zr::after{display:none!important}
@media (max-width:960px){.zzf .zz{padding-left:16px!important}}

/* F : le zigzag reprend exactement le rendu de la version A */
.zzf .zt{border-radius:24px!important;border-top:0!important;box-shadow:0 30px 70px -40px rgba(9,9,11,.35)!important}
.zzf .zph,.zzf .zp>img{border-radius:24px!important}
.zzf .zr .cap.card{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:16px!important;box-shadow:0 18px 40px -16px rgba(9,9,11,.38),0 0 0 1px rgba(9,9,11,.05)!important}
.zzf .pills a{border-radius:999px!important}
@media (max-width:760px){.zzf .zph,.zzf .zp>img{border-radius:18px!important}}

/* ===== E : témoignages en mosaïque (photos, citations, note) ===== */
.bxs .wrap{max-width:1240px}
.bx-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.bx-h>div{display:flex;flex-direction:column;gap:14px;max-width:620px}
.bx-h .kicker{justify-content:flex-start}
.bx-h h2{font-size:clamp(32px,3.8vw,52px);line-height:1.04}
.bx-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:270px;gap:14px}
.bx{position:relative;margin:0;border-radius:18px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.bx.w2{grid-column:span 2}
.bx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bx-ph::after{content:"";position:absolute;inset:0;background:rgba(10,10,12,.22)}
.bx:hover img{transform:scale(1.04)}
.bx-l{position:relative;z-index:1;font:700 22px/1.15 var(--display);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);padding-right:44px}
.bx-go{position:absolute;z-index:1;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center}
.bx-go svg{width:15px;height:15px}
.bx:hover .bx-go{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.bx-q{justify-content:space-between}
.bx-q blockquote{margin:0;font:500 21px/1.3 var(--display);letter-spacing:-.01em}
.bx-q figcaption{font:700 22px/1.1 var(--display);letter-spacing:-.02em}
.bx-q.ink{background:var(--ink);color:#fff}.bx-q.ink figcaption{color:var(--yellow)}
.bx-q.yel{background:var(--yellow);color:var(--ink)}
.bx-rate{background:var(--sand);color:var(--ink);justify-content:center;gap:8px}
.bx-rate .vstars{display:inline-flex;gap:3px}.bx-rate .vstars svg{width:22px;height:22px;fill:var(--yellow)}
.bx-rate b{font:800 64px/1 var(--display);letter-spacing:-.04em}.bx-rate b small{font-size:26px;color:var(--fg4)}
.bx-rt{font-size:15px;color:var(--fg3)}
.bx-rate .bx-l{color:var(--ink);text-shadow:none;font-size:16px;margin-top:8px}
.bx-rate .bx-go{border-color:var(--ink);color:var(--ink)}
@media (max-width:960px){.bx-g{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:220px}.bx-h{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.bx-g{gap:10px;grid-auto-rows:200px}.bx{padding:14px}.bx-q blockquote{font-size:16px}.bx-q figcaption,.bx-l{font-size:17px}.bx-rate b{font-size:46px}}
.tv3 .wrap{max-width:1240px}.t3g{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start}
.t3l{position:sticky;top:120px;display:flex;flex-direction:column;gap:14px}.t3l .kicker{justify-content:flex-start}.t3l h2{font-size:clamp(30px,3.4vw,46px);line-height:1.05}
.t3big b{font:800 96px/1 var(--display);letter-spacing:-.05em;color:var(--ink)}.t3big span{font:700 32px/1 var(--display);color:var(--fg4)}
.st{display:inline-flex;gap:3px}.st svg{width:20px;height:20px;fill:var(--yellow)}.t3l p{color:var(--fg3)}.t3l .btn{align-self:flex-start;margin-top:6px}
.t3w{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.t3c{margin:0;background:#fff;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px var(--line),0 18px 40px -30px rgba(9,9,11,.4)}
.t3c .st svg{width:15px;height:15px}.t3c q{font:600 19px/1.3 var(--display);color:var(--ink);letter-spacing:-.01em}
.t3c figcaption{display:flex;align-items:center;gap:10px;margin-top:auto}.t3c img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.t3c figcaption b{display:block;font-size:14px;color:var(--ink)}.t3c small{font-size:12.5px;color:var(--fg4)}
@media (max-width:860px){.t3g{grid-template-columns:1fr;gap:28px}.t3l{position:static}.t3w{grid-template-columns:1fr}.t3big b{font-size:72px}}

/* v65 : écran du logiciel plus lisible et plus chaleureux. Dessiné à 920 px (au lieu de 1180) pour que tout grossisse une fois réduit, moins de blocs, gros chiffres, courbe jaune, planning avec équipes, demande qui arrive en direct. Halo jaune derrière l'ordinateur, cartes qui apparaissent puis flottent. */
.ah-frame.d2{width:920px;background:#F7F5EF}
.d2-app{display:grid;grid-template-columns:172px minmax(0,1fr);min-height:540px}
.d2-side{background:#0E0E10;padding:18px 12px;display:flex;flex-direction:column;gap:3px}
.d2-co{display:flex;align-items:center;gap:10px;padding:2px 6px 18px;color:#fff;font-size:14px}
.d2-lg{width:32px;height:32px;border-radius:10px;background:#FFC400;color:#0E0E10;font:800 13px/32px var(--ui);text-align:center;flex:none}
.d2-n{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:500;color:rgba(255,255,245,.66)}
.d2-n svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d2-n.on{background:#FFC400;color:#0E0E10;font-weight:700}
.d2-n em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:800;background:#FFC400;color:#0E0E10;border-radius:999px;min-width:22px;padding:3px 7px;text-align:center}
.d2-brand{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12px;font-weight:600;color:rgba(255,255,245,.5)}
.d2-brand svg{width:18px;height:18px}
.d2-main{padding:22px 24px;display:flex;flex-direction:column;gap:16px;min-width:0;text-align:left}
.d2-top{display:flex;align-items:center;gap:12px}
.d2-top small{display:block;font-size:13px;color:var(--fg4);margin-bottom:2px}
.d2-top b{font:800 27px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.d2-wave{display:inline-block;transform-origin:70% 80%}
.d2-wx{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--fg3);background:#fff;border:1px solid #ECEAE3;border-radius:999px;padding:8px 13px 8px 10px;white-space:nowrap}
.d2-wx svg{width:18px;height:18px;fill:none;stroke:#E8B102;stroke-width:1.8;stroke-linecap:round}
.d2-wx svg circle{fill:#FFC400;stroke:#FFC400}
.d2-new{font-size:14px;font-weight:700;background:#FFC400;color:#0E0E10;border-radius:999px;padding:10px 16px;white-space:nowrap;box-shadow:0 6px 16px -8px rgba(232,177,2,.9)}
.d2-r1{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.d2-ca{position:relative;background:#0E0E10;border-radius:20px;padding:18px 20px 12px;color:#fff;overflow:hidden}
.d2-cah{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:rgba(255,255,245,.72)}
.d2-cah em{font-style:normal;font-size:12.5px;font-weight:800;color:#5EE0AE;background:rgba(22,161,117,.22);border-radius:999px;padding:5px 9px}
.d2-big{display:block;margin-top:6px;font:800 48px/1 var(--display);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.d2-cw{position:relative;margin-top:6px}
.d2-chart{display:block;width:100%;height:96px}
.d2-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FFC400;box-shadow:0 0 0 4px rgba(255,196,0,.28)}
.d2-mo{display:flex;justify-content:space-between;padding:4px 2.4% 0;font-size:11.5px;color:rgba(255,255,245,.45)}
.d2-mo span:last-child{color:#FFC400;font-weight:700}
.d2-ks{display:flex;flex-direction:column;gap:14px}
.d2-kc{flex:1;display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 1px 0 #ECEAE3,0 10px 24px -20px rgba(9,9,11,.4)}
.d2-ki{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center}
.d2-ki svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.d2-ki.y{background:#FFF2CC;color:#997500}.d2-ki.g{background:#D0EDE3;color:#16A175}
.d2-kc small{display:block;font-size:13px;color:var(--fg3)}
.d2-kc b{display:block;font:800 30px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;margin:2px 0 3px}
.d2-sub{font-size:12.5px;color:var(--fg4)}
.d2-late{font-style:normal;font-weight:700;color:#B91C1C}
.d2-r2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.d2-card{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 1px 0 #ECEAE3,0 10px 24px -20px rgba(9,9,11,.4);min-width:0}
.d2-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.d2-h b{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--ink)}
.d2-h small{font-size:12.5px;color:var(--fg4)}
.d2-ev{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid #F1F0EB}
.d2-t{width:40px;flex:none;font-size:13px;font-weight:700;color:var(--fg2);font-variant-numeric:tabular-nums}
.d2-av{width:32px;height:32px;flex:none;border-radius:50%;background:var(--c);color:var(--t);font:800 12px/32px var(--ui);text-align:center}
.d2-tx{min-width:0;flex:1}
.d2-tx b{display:block;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d2-tx small{font-size:12.5px;color:var(--fg4)}
.d2-p{flex:none;font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 9px}
.d2-p.info{background:#DCE9FE;color:#1E3A8A}.d2-p.ok{background:#D0EDE3;color:#16A175}.d2-p.warn{background:#FFF2CC;color:#997500}
.d2-leads{background:#FFF8E6;box-shadow:0 0 0 1px #F5E3B0}
.d2-ping{position:relative;width:9px;height:9px;border-radius:50%;background:#FFC400}
.d2-ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:#FFC400}
.d2-lead{display:flex;align-items:center;gap:11px;background:#fff;border-radius:14px;padding:11px 12px;margin-top:8px;box-shadow:0 8px 20px -16px rgba(9,9,11,.45)}
.d2-li{width:38px;height:38px;flex:none;border-radius:11px;background:#FFC400;color:#0E0E10;display:flex;align-items:center;justify-content:center}
.d2-li svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d2-tag{flex:none;font-size:11.5px;font-weight:800;background:#0E0E10;color:#FFC400;border-radius:999px;padding:5px 9px}
.d2-go{flex:none;font-size:12.5px;font-weight:700;color:var(--ink);background:#F4F2EC;border-radius:999px;padding:7px 12px}
/* écran : reflet de verre ; halo jaune derrière l'ordinateur */
.hero-e .lt-scr{position:relative}
.hero-e .lt-scr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 32%)}
.hero-e .devices::before{content:"";position:absolute;left:50%;top:46%;width:78%;height:86%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,196,0,.34),rgba(255,196,0,.10) 55%,rgba(255,196,0,0));filter:blur(10px);pointer-events:none}
.hero-e .laptop{position:relative;z-index:1}
/* animations : la courbe se dessine, les chiffres montent, la demande arrive, les cartes apparaissent puis flottent */
@keyframes d2draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes d2fade{from{opacity:0}}
@keyframes d2pop{0%{opacity:0;transform:translateY(10px) scale(.96)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes d2glow{0%{box-shadow:0 0 0 0 rgba(255,196,0,.9),0 8px 20px -16px rgba(9,9,11,.45)}100%{box-shadow:0 0 0 12px rgba(255,196,0,0),0 8px 20px -16px rgba(9,9,11,.45)}}
@keyframes d2ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.8);opacity:0}}
@keyframes d2wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}}
@keyframes d2in{from{opacity:0;scale:.9;translate:0 14px}}
@keyframes d2bob{from{translate:0 0}to{translate:0 -7px}}
.d2-line{stroke-dasharray:1;animation:d2draw 1.8s cubic-bezier(.45,.05,.2,1) .3s both}
.d2-area{animation:d2fade 1s ease 1.2s both}
.d2-dot{animation:d2fade .4s ease 2s both}
.d2-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#FFC400;animation:d2ping 2s ease-out 2.2s infinite}
.d2-in{animation:d2pop .7s cubic-bezier(.2,.8,.2,1) 2.4s both,d2glow 1.4s ease-out 3s 2}
.d2-ping::after{animation:d2ping 1.8s ease-out infinite}
.d2-wave{animation:d2wave 2.4s ease-in-out .8s 2}
.hero-e .feats .ub{animation:d2in .7s cubic-bezier(.2,.8,.2,1) both,d2bob 4.5s ease-in-out infinite alternate;animation-delay:var(--d,0s),calc(var(--d,0s) + .7s)}
.hero-e .m1{--d:.5s}.hero-e .m3{--d:.9s}.hero-e .m2{--d:1.3s}.hero-e .m4{--d:1.7s}.hero-e .m5{--d:2.1s}
@media (min-width:861px){.hero-e .m3{top:24%;--tf:translateX(-6px)}.hero-e .m4{top:66%}}
@media (max-width:860px){.hero-e .feats .ub{animation:none}}
@media (prefers-reduced-motion:reduce){.d2-line{stroke-dasharray:none}}

/* v66 : bloc d'avis, quatre propositions (sélecteur de maquette). Un vrai pro en grande photo, son métier, une citation courte, des flèches. */
.rvs{position:relative;overflow:hidden;background:var(--sand)}
.rvs .wrap{max-width:1240px}
.rv-sw{position:relative;left:auto;bottom:auto;transform:none;margin:0 auto 36px;width:max-content;max-width:100%}
.rv-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.rv-h h2{font-size:clamp(32px,4.2vw,56px);line-height:1.04}
.rv-hr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.rv-rate{display:inline-flex;align-items:center;gap:6px;font:500 15px/1 var(--ui);color:var(--fg3);white-space:nowrap}
.rv-rate b{color:var(--ink)}
.rv-st{display:inline-flex;gap:2px}
.rv-st svg{width:15px;height:15px;fill:var(--yellow)}
.rv-p{position:relative}
.rvs[data-v="3"] .rv-rate{display:none}
.rv-v{position:relative;display:flex;flex-direction:column}
.rv-ar{order:2;display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.rv-ar button,.rv-th>button:not(.rv-t){width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,opacity .15s ease}
.rv-ar button:hover:not(:disabled),.rv-th>button:not(.rv-t):hover{background:var(--yellow);border-color:var(--yellow)}
.rv-ar button:disabled{opacity:.35;cursor:default}
.rv-ar svg,.rv-th svg{width:16px;height:16px}
.rv-tr{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin-right:calc(-1 * max(16px,(100vw - 1240px)/2 + 32px));padding-right:max(16px,(100vw - 1240px)/2 + 32px);padding-bottom:8px}
.rv-tr::-webkit-scrollbar{display:none}
/* 1. cartes portrait */
.rv-c1{flex:0 0 calc((100% - 32px) / 3.25);scroll-snap-align:start;margin:0;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px var(--line-soft),0 24px 50px -36px rgba(9,9,11,.45);display:flex;flex-direction:column}
.rv-ph{position:relative;aspect-ratio:4/4.2;overflow:hidden}
.rv-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.rv-tags{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;flex-wrap:wrap}
.rv-tags span{font:600 13px/1 var(--ui);background:#fff;color:var(--ink);border-radius:999px;padding:8px 12px;box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.rv-tags span:first-child{background:var(--yellow)}
.rv-c1 figcaption{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px}
.rv-c1 figcaption b{font:700 19px/1.2 var(--display);color:var(--ink);letter-spacing:-.02em}
.rv-c1 q,.rv-c2 q,.rv-c4 q{quotes:"«\00a0" "\00a0»"}
.rv-c1 q{font:500 18px/1.4 var(--display);color:var(--fg2)}
/* 2. portrait plein cadre */
.rv-c2{position:relative;flex:0 0 calc((100% - 32px) / 3.25);scroll-snap-align:start;margin:0;aspect-ratio:3/4.1;border-radius:22px;overflow:hidden;color:#fff}
.rv-c2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.rv-c2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,0) 38%,rgba(10,10,12,.86) 100%)}
.rv-job{position:absolute;z-index:1;left:18px;top:18px;font:700 13px/1 var(--ui);background:var(--yellow);color:var(--ink);border-radius:999px;padding:8px 12px}
.rv-c2 figcaption{position:absolute;z-index:1;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:4px}
.rv-c2 q{font:700 clamp(21px,1.9vw,26px)/1.2 var(--display);letter-spacing:-.02em;margin-bottom:10px;text-wrap:balance}
.rv-c2 b{font:700 16px/1.2 var(--ui)}
.rv-c2 small{font:500 13.5px/1.3 var(--ui);color:rgba(255,255,245,.78)}
/* 3. grande citation */
.rv-big{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px var(--line-soft),0 30px 70px -44px rgba(9,9,11,.45)}
.rv-c3{margin:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:440px}
.rv-c3[hidden]{display:none}
.rv-c3.on{animation:rvfade .45s ease both}
@keyframes rvfade{from{opacity:0}}
.rv-c3t{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:22px}
.rv-c3t .rv-st svg{width:20px;height:20px}
.rv-c3 q{font:700 clamp(30px,3.6vw,50px)/1.08 var(--display);letter-spacing:-.035em;color:var(--ink);quotes:"«\00a0" "\00a0»";text-wrap:balance}
.rv-c3 figcaption b{display:block;font:700 19px/1.2 var(--display);color:var(--ink)}
.rv-c3 figcaption small{font:500 15px/1.4 var(--ui);color:var(--fg3)}
.rv-c3p{position:relative;background:var(--sand)}
.rv-c3p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.rv-th{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.rv-t{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 14px 4px 4px;cursor:pointer;font:600 13.5px/1 var(--ui);color:var(--fg3)}
.rv-t img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.rv-t[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
/* 4. note et bande de pros */
.rv-note{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:-6px 0 22px;font:500 16px/1.2 var(--ui);color:var(--fg3)}
.rv-note .rv-st svg{width:22px;height:22px}
.rv-note b{font:800 34px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.rv-band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.rv-c4{position:relative;margin:0;aspect-ratio:3/4.6;border-radius:18px;overflow:hidden;color:#fff}
.rv-c4 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .4s ease}
.rv-c4::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,0) 45%,rgba(10,10,12,.85) 100%);transition:background .3s ease}
.rv-c4 figcaption{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--yellow);padding-left:10px}
.rv-c4 q{font:600 15px/1.3 var(--display);max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease,margin .3s ease}
.rv-c4 b{font:700 14px/1.2 var(--ui)}
.rv-c4 small{font:500 12px/1.3 var(--ui);color:rgba(255,255,245,.8)}
.rv-c4:hover q,.rv-c4:focus-within q{max-height:120px;opacity:1;margin-bottom:8px}
.rv-c4:hover::after{background:linear-gradient(180deg,rgba(10,10,12,.1) 20%,rgba(10,10,12,.9) 100%)}
.rv-c4:hover img{transform:scale(1.04)}
@media (max-width:960px){
  .rv-h{flex-direction:column;align-items:flex-start}.rv-hr{justify-content:flex-start}
  .rv-c1,.rv-c2{flex-basis:calc((100% - 16px) / 2.2)}
  .rv-c3{grid-template-columns:1fr;min-height:0}.rv-c3p{aspect-ratio:4/3;order:-1}
  .rv-band{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-32px;padding-right:32px}.rv-band::-webkit-scrollbar{display:none}
  .rv-c4{flex:0 0 40%;scroll-snap-align:start}
  .rv-c4 q{max-height:120px;opacity:1;margin-bottom:8px}
}
@media (max-width:760px){
  .rv-sw{margin-bottom:24px}
  .rv-c1,.rv-c2{flex-basis:80%}
  .rv-c4{flex-basis:62%}
  .rv-tr{margin-right:-16px;padding-right:16px}.rv-band{margin-right:-16px;padding-right:16px}
  .rv-t span{display:none}.rv-t{padding:4px}
  .rv-th{gap:8px;flex-wrap:nowrap}.rv-th>button:not(.rv-t){display:none}
}

/* logiciel_compact : écran plus petit dans le hero, redessiné à 760 px pour que le texte reste lisible une fois réduit */
.hero-e .laptop{width:50%}
@media (max-width:1100px){.hero-e .laptop{width:54%}}
@media (max-width:860px){.hero-e .laptop{width:100%}}
.ah-frame.d2{width:760px}
.d2-app{grid-template-columns:64px minmax(0,1fr);min-height:0}
.d2-side{padding:16px 10px;align-items:center;gap:4px}
.d2-co{padding:0 0 14px}.d2-co b{display:none}
.d2-n{font-size:0;gap:0;padding:11px;position:relative}
.d2-n svg{width:20px;height:20px}
.d2-n em{position:absolute;top:1px;right:-2px;margin:0;font-size:12px;min-width:20px;padding:2px 5px;box-shadow:0 0 0 2px #0E0E10}
.d2-brand{font-size:0;gap:0;padding:10px}
.d2-brand svg{width:20px;height:20px}
.d2-main{padding:20px 22px;gap:14px}
.d2-top small{font-size:14px}
.d2-top b{font-size:26px}
.d2-new{margin-left:auto;font-size:15px;padding:10px 16px}
.d2-r1{grid-template-columns:1.15fr 1fr;gap:12px}
.d2-ca{padding:16px 18px 10px}
.d2-cah{font-size:14px;color:rgba(255,255,245,.8)}
.d2-cah em{font-size:14px;padding:5px 10px;color:#7CF0C2}
.d2-big{font-size:42px}
.d2-chart{height:72px}
.d2-mo{font-size:12.5px}
.d2-ks{gap:12px}
.d2-kc{padding:14px 16px;gap:12px}
.d2-ki{width:36px;height:36px}
.d2-kc small{font-size:14px}
.d2-kc b{font-size:28px}
.d2-sub{font-size:13.5px}
.d2-r2{gap:12px}
.d2-card{padding:14px 16px}
.d2-h{margin-bottom:4px}
.d2-h b{font-size:17px}
.d2-h small{font-size:13.5px}
.d2-ev{gap:10px;padding:10px 0}
.d2-tx b{font-size:15px}
.d2-tx small{font-size:13.5px}
.d2-tx small strong{color:var(--ink);font-weight:700}
.d2-st{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.d2-st i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.d2-lead{padding:11px 12px;gap:10px}
.d2-li{width:36px;height:36px}
.d2-tag{font-size:13px;padding:5px 9px}
.d2-chev{flex:none;width:22px;height:22px;color:var(--fg3)}
.d2-chev svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ub_devis_signature : carte devis = devis fait en 5 min + signature du client */
.ub-tm{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.ub-tm svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ub-ic.pp{background:#EAF3FC}
.ub-ic.pp img{width:26px;height:26px;display:block}
.ub-tt{font-size:13px;font-weight:700;color:var(--ink)}
.ub-sig{display:flex;flex-direction:column;gap:3px;margin-top:2px;padding-top:6px;border-top:1px solid var(--line-soft)}
.ub-sg{width:118px;height:34px;display:block;border-bottom:1px dashed var(--line-strong)}
.ub-sg path{fill:none;stroke:#1E3A8A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ub-sig span{font-size:12px;color:var(--fg4)}
.hero-e .feats .ub-sg path{stroke-dasharray:420;stroke-dashoffset:420;animation:ubsig 1.6s ease-out 2.2s forwards}
@keyframes ubsig{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.hero-e .feats .ub-sg path{animation:none;stroke-dashoffset:0}}
@media (max-width:1100px){.ub-tm{font-size:12px;white-space:nowrap}.ub-tm svg{display:none}}
@media (max-width:480px){.ub-sg{width:96px;height:28px}}

/* iphone_hero : le logiciel aussi sur GSM, iPhone à droite de l'ordinateur */
.iph-w{position:absolute;z-index:2;left:calc(75% - 50px);bottom:-18px;width:160px;height:331px;pointer-events:none}
.iph{width:300px;height:620px;transform:scale(.5333);transform-origin:0 0;border-radius:52px;background:#1A1A1D;padding:11px;box-shadow:0 0 0 2px #3A3A3F,0 50px 90px -30px rgba(0,0,0,.85)}
.iph-s{position:relative;height:100%;border-radius:42px;background:#F7F5EF;overflow:hidden;padding:56px 18px 0;display:flex;flex-direction:column;gap:14px;font-family:var(--ui);text-align:left}
.iph-isl{position:absolute;top:12px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:99px;background:#0E0E10}
.iph-sb{position:absolute;top:16px;left:30px;right:26px;display:flex;justify-content:space-between;align-items:center;font-size:16px;color:var(--ink)}
.iph-sb span{display:flex;align-items:flex-end;gap:2px;height:13px}
.iph-sb i{width:4px;background:var(--ink);border-radius:1px}
.iph-sb i:nth-child(1){height:5px}.iph-sb i:nth-child(2){height:8px}.iph-sb i:nth-child(3){height:11px}.iph-sb i:nth-child(4){height:13px}
.iph-hd small{display:block;font-size:15px;color:var(--fg4)}
.iph-hd b{font:800 30px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.iph-dem{background:#fff;border-radius:22px;padding:16px;box-shadow:0 0 0 2px #FFC400,0 14px 30px -18px rgba(9,9,11,.5);display:flex;flex-direction:column;gap:12px}
.iph-k{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink)}
.iph-k i{width:10px;height:10px;border-radius:50%;background:#FFC400}
.iph-dr{display:flex;align-items:center;gap:12px}
.iph-dr b,.iph-row b{display:block;font-size:18px;color:var(--ink)}
.iph-dr small,.iph-row small{font-size:15px;color:var(--fg4)}
.iph-ic{width:46px;height:46px;flex:none;border-radius:14px;background:#FFC400;color:#0E0E10;display:flex;align-items:center;justify-content:center}
.iph-ic svg,.iph-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iph-btn{display:block;text-align:center;font-size:17px;font-weight:700;background:#FFC400;color:#0E0E10;border-radius:14px;padding:13px}
.iph-rel{background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 10px 24px -20px rgba(9,9,11,.5);display:flex;flex-direction:column;gap:10px}
.iph-rel b{font-size:17px;color:var(--ink)}
.iph-rel small{font-size:14px;color:var(--fg4)}
.iph-tl{display:flex;align-items:center;gap:5px}
.iph-tl span{display:inline-flex;align-items:center;gap:4px;font:700 14px/1 var(--ui);color:var(--fg4);background:#F4F4F5;border-radius:999px;padding:7px 9px}
.iph-tl span.on{background:#D0EDE3;color:#16A175}
.iph-tl svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.iph-tl i{flex:1;height:2px;background:#E4E4E7;min-width:4px}
.iph-pl{display:flex;align-items:center;justify-content:space-between;gap:8px}
.iph-pl b{display:block;font-size:17px;color:var(--ink)}
.iph-pl small{font-size:14px;color:var(--fg4)}
.iph-pl em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:14px;font-weight:700;color:var(--ink)}
.iph-pl em i{width:9px;height:9px;border-radius:50%;background:#16A175}
.iph-row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 10px 24px -20px rgba(9,9,11,.5)}
.iph-ok{width:40px;height:40px;flex:none;border-radius:50%;background:#D0EDE3;color:#16A175;display:flex;align-items:center;justify-content:center}
.iph-ok svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.iph-ca{background:#0E0E10;border-radius:20px;padding:14px 18px;color:#fff}
.iph-ca small{display:block;font-size:15px;color:rgba(255,255,245,.7)}
.iph-ca b{font:800 34px/1.1 var(--display);letter-spacing:-.03em}
.iph-tab{position:absolute;left:0;right:0;bottom:0;height:88px;padding:12px 22px 0;background:#fff;border-top:1px solid #ECEAE3;display:flex;justify-content:space-between;align-items:flex-start;color:var(--fg4)}
.iph-tab span{width:44px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.iph-tab .on{background:#FFC400;color:#0E0E10}
.iph-bar{position:absolute;bottom:9px;left:50%;width:120px;height:5px;margin-left:-60px;border-radius:9px;background:#0E0E10}
@media (min-width:861px){.hero-e .m3{top:-2%;--tf:translateX(0)}.hero-e .m4{left:calc(75% + 124px);right:auto;top:44%;--tf:translateX(0)}}
@media (min-width:861px) and (max-width:1320px){.hero-e .m4{width:214px}}
@media (max-width:1100px){.iph-w{left:calc(77% - 96px);width:136px;height:281px}.iph{transform:scale(.4533)}}
@media (min-width:861px) and (max-width:1260px){.hero-e .m4{left:auto;right:0;width:200px}}
@media (max-width:860px){.iph-w{display:none}}
.zzf{padding-top:clamp(40px,4.5vw,64px)}

/* cartes_mobile : notif sans « PRO », montant sur une ligne, icône Peppol au-dessus */
.ub-big{white-space:nowrap}
@media (max-width:860px){.ub-pro{display:none}.m5 .ub-pay{flex-direction:column;align-items:flex-start;gap:8px}.m5 .ub-ic{width:34px;height:34px}.m5 .ub-ic.pp img{width:22px;height:22px}}

/* cartes_hauteur : même hauteur par ligne en mobile */
@media (max-width:860px){.hero-e .feats{align-items:stretch}.hero-e .feats .ub-sig{margin-top:auto}.hero-e .feats .m3 .ub-pay{margin-top:auto}}

/* logiciel_reel : écrans du hero d'après le vrai Trustup Pro */
.ah-frame.tp{width:760px;background:#F3F4F7;color:#1D2333;font-family:var(--ui)}
.tp-app{display:grid;grid-template-columns:162px minmax(0,1fr);min-height:470px;text-align:left}
.tp-side{background:#1E2640;padding:14px 8px;display:flex;flex-direction:column;gap:1px}
.tp-logo{display:block;padding:2px 8px 16px}.tp-logo svg{width:92px;height:16px;display:block}
.tp-n{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;font-size:12.5px;white-space:nowrap;color:rgba(255,255,255,.82)}
.tp-n svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tp-sub{display:block;padding:5px 8px 5px 31px;border-radius:6px;font-size:12px;color:rgba(255,255,255,.62)}
.tp-sub.on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.tp-sp{flex:1}
.tp-main{display:flex;flex-direction:column;min-width:0}
.tp-top{display:flex;align-items:center;gap:8px;background:#fff;border-bottom:1px solid #E3E5EB;padding:11px 14px}
.tp-top b{font-size:15px;font-weight:700}
.tp-badge{font-size:9.5px;font-weight:700;letter-spacing:.04em;color:#15803D;background:#DCFCE7;border-radius:4px;padding:3px 6px}
.tp-btn{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border:1px solid #D5D8E0;border-radius:6px;padding:6px 9px;background:#fff;color:#1D2333}
.tp-btn:not(.pri){margin-left:auto}
.tp-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tp-btn.pri{background:#4A2BE8;border-color:#4A2BE8;color:#fff}
.tp-body{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:12px;padding:12px}
.tp-doc{background:#fff;border:1px solid #E3E5EB;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tp-meta{display:flex;justify-content:space-between;gap:12px}
.tp-meta b{display:block;font-size:12.5px}
.tp-meta small{font-size:11px;color:#6B7280}
.tp-meta dl{display:grid;grid-template-columns:auto auto;gap:2px 10px;margin:0;font-size:11px}
.tp-meta dt{color:#6B7280}.tp-meta dd{margin:0;text-align:right;font-weight:600}
.tp-ti{font-size:13px;font-weight:700;border:1px solid #E3E5EB;border-radius:6px;padding:7px 9px}
.tp-tb{font-size:11px}
.tp-tr{display:grid;grid-template-columns:minmax(0,1fr) 30px 34px 72px;gap:8px;padding:6px 4px;border-bottom:1px solid #EEF0F3;font-variant-numeric:tabular-nums}
.tp-tr span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-tr span:nth-child(2),.tp-tr span:last-child{text-align:right}
.tp-th{color:#6B7280;font-size:10.5px}
.tp-sec{display:flex;justify-content:space-between;background:#EEF0F4;border-radius:4px;padding:6px 6px;font-weight:700;font-variant-numeric:tabular-nums}
.tp-tot{display:grid;grid-template-columns:1fr auto;gap:3px 16px;margin-left:auto;width:58%;font-size:11px;font-variant-numeric:tabular-nums}
.tp-tot span:nth-child(odd){color:#6B7280}.tp-tot span:nth-child(even),.tp-tot b:last-child{text-align:right}
.tp-tot b{font-size:12.5px;border-top:1px solid #E3E5EB;padding-top:5px}
.tp-hist{display:flex;flex-direction:column;gap:9px}
.tp-hh{font-size:13px}
.tp-h{display:flex;gap:8px;align-items:flex-start}
.tp-h b{display:block;font-size:11.5px;font-weight:600}
.tp-h small{font-size:10.5px;color:#6B7280}
.tp-hi{width:22px;height:22px;flex:none;border-radius:50%;background:#EEF0F4;color:#4B5563;display:flex;align-items:center;justify-content:center}
.tp-hi svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tp-hi.ok{background:#DCFCE7;color:#15803D}
.iph-s.iq{padding:0;gap:0;background:#F3F4F7}
.iq-hd{background:#1E2640;height:104px;position:relative}
.iq-hd .iph-sb{color:#fff}.iq-hd .iph-sb i{background:#fff}
.iq-bar{position:absolute;left:20px;right:20px;bottom:14px;display:flex;align-items:center;justify-content:space-between}
.iq-bar svg{width:118px;height:21px}
.iq-burger{display:flex;flex-direction:column;gap:5px}.iq-burger i{width:22px;height:2.5px;border-radius:2px;background:#fff}
.iq-ti{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}
.iq-ti b{font-size:24px;font-weight:700}
.iq-seg{display:flex;background:#E6E8EE;border-radius:8px;padding:3px}
.iq-seg i{font-style:normal;font-size:14px;font-weight:600;color:#6B7280;padding:6px 10px;border-radius:6px}
.iq-seg i.on{background:#fff;color:#1D2333}
.iq-day{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 12px;font-size:16px;color:#6B7280}
.iq-day b{color:#1D2333}
.iq-grid{position:relative;margin:0 14px 0 64px;border-top:1px solid #E3E5EB}
.iq-hr{height:42px;border-bottom:1px solid #E3E5EB;position:relative}
.iq-hr span{position:absolute;left:-52px;top:-9px;font-size:13px;color:#8A90A0;font-variant-numeric:tabular-nums}
.iq-ev{position:absolute;left:4px;right:0;border-radius:6px;padding:6px 9px;border-left:4px solid;overflow:hidden}
.iq-ev b{display:block;font-size:15px}.iq-ev small{font-size:13px;color:#4B5563}
.iq-ev.g{background:#DCFCE7;border-color:#16A34A}
.iq-ev.b{background:#E0E7FF;border-color:#4A2BE8}
.iq-ev.v{background:#FEF3C7;border-color:#D97706}

/* cartes_simplifiees : signature plus grande, montant Peppol à côté du logo en mobile */
.ub-sg{width:150px;height:44px}
/* le téléphone mord moins sur l'écran pour laisser lire l'historique du devis */
@media (min-width:1101px){.iph-w{left:calc(75% - 18px)}.hero-e .m4{left:calc(75% + 156px)}}
@media (min-width:861px) and (max-width:1340px){.hero-e .m4{left:auto;right:0;top:27%;width:232px}}
@media (min-width:1101px) and (max-width:1340px){.iph-w{left:calc(75% - 60px);width:136px;height:281px}.iph{transform:scale(.4533)}}
@media (max-width:860px){.hero-e .feats .ub-sig{border-top:0;padding-top:0}.hero-e .feats .ub-sg{width:100%;max-width:190px;height:54px}
.m5 .ub-pay{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 10px}.m5 .ub-pay>div{display:contents}.m5 .ub-pay .ub-s{flex-basis:100%}}

/* logiciel_simple : écrans du hero simples et rassurants, aux couleurs Trustup */
.ah-frame.ts{width:760px;background:#F7F6F2;color:var(--ink);font-family:var(--ui)}
.ts-app{display:grid;grid-template-columns:156px minmax(0,1fr);min-height:450px;text-align:left}
.ts-side{background:#fff;border-right:1px solid #ECEAE3;padding:18px 10px;display:flex;flex-direction:column;gap:3px}
.ts-logo{display:block;padding:0 8px 18px}.ts-logo svg{width:96px;height:17px;display:block}
.ts-n{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:500;color:#52525B}
.ts-n svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ts-n em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;background:var(--yellow);color:var(--ink);border-radius:999px;min-width:21px;padding:2px 6px;text-align:center}
.ts-n.on{background:#FFF3C4;color:var(--ink);font-weight:700}
.ts-main{padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ts-top{display:flex;align-items:center;gap:10px}
.ts-top>div{margin-right:auto;min-width:0}
.ts-top b{display:block;font:700 19px/1.2 var(--display);letter-spacing:-.01em}
.ts-top small{font-size:13px;color:#71717A}
.ts-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;border:1px solid #E4E2DA;background:#fff;border-radius:10px;padding:9px 12px;white-space:nowrap}
.ts-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ts-btn.pri{background:var(--yellow);border-color:var(--yellow);font-weight:700}
.ts-steps{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 1px 0 #ECEAE3}
.ts-st{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}
.ts-st:not(:last-child)::after{content:"";position:absolute;left:34px;right:10px;top:13px;height:2px;background:#BFE6D5;z-index:0;transform:translateX(62px);width:calc(100% - 110px)}
.ts-ck{grid-row:span 2;width:26px;height:26px;border-radius:50%;background:#16A175;color:#fff;display:flex;align-items:center;justify-content:center}
.ts-ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ts-st b{font-size:13.5px}.ts-st small{font-size:12px;color:#71717A}
.ts-doc{background:#fff;border-radius:14px;padding:6px 16px 14px;box-shadow:0 1px 0 #ECEAE3}
.ts-li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #F1F0EB}
.ts-li span{flex:1;min-width:0}
.ts-li b{display:block;font-size:14px;font-weight:600}
.ts-li small{font-size:12.5px;color:#71717A}
.ts-li em{font-style:normal;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ts-add{display:flex;align-items:center;gap:7px;margin:10px 0 2px;padding:9px 12px;border:1.5px dashed #E0DDD3;border-radius:10px;font-size:13px;font-weight:600;color:#71717A}
.ts-add svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ts-tot{display:flex;align-items:baseline;justify-content:space-between;margin-top:12px}
.ts-tot span{font-size:14px;font-weight:600}.ts-tot small{font-size:12px;font-weight:400;color:#71717A;margin-left:4px}
.ts-tot b{font:800 24px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.iph-s.is{padding:56px 16px 0;gap:10px;background:#F7F6F2}
.is-hd{display:flex;align-items:center;justify-content:space-between;padding:0 2px}
.is-hd svg{width:110px;height:19px}
.is-av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--yellow);font:700 13px/34px var(--ui);text-align:center}
.is-ti{padding:6px 2px 2px}
.is-ti b{display:block;font:800 26px/1.15 var(--display);letter-spacing:-.02em}
.is-ti small{font-size:14px;color:#71717A}
.is-c{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;padding:13px 14px;box-shadow:0 1px 0 #ECEAE3}
.is-c.on{box-shadow:0 0 0 2px var(--yellow)}
.is-t{width:46px;flex:none;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.is-x{flex:1;min-width:0}.is-x b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.is-x small{font-size:13px;color:#71717A}
.is-c em{display:none}
.is-new{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;background:var(--yellow);border-radius:16px;padding:15px;font-size:17px;font-weight:700}
.is-new svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.is-tab{position:absolute;left:0;right:0;bottom:0;height:86px;padding:10px 16px 0;background:#fff;border-top:1px solid #ECEAE3;display:flex;justify-content:space-around}
.is-tb{display:flex;flex-direction:column;align-items:center;gap:3px;color:#A1A1AA}
.is-tb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-tb small{font-size:12px;font-weight:600}
.is-tb.on{color:var(--ink)}.is-tb.on svg{color:#E8B102}
/* largeurs moyennes : le téléphone ne doit pas cacher les montants du devis */
@media (min-width:1101px) and (max-width:1340px){.iph-w{left:calc(75% - 12px)}}
@media (min-width:861px) and (max-width:1100px){.iph-w{left:calc(77% - 18px)}}

/* logiciel_chantier : ordinateur = suivi de chantier, téléphone = devis fait sur place ; menu bleu du logiciel, boutons jaunes Trustup */
.ah-frame.tc{width:760px;background:#F4F5F8;color:#1D2333;font-family:var(--ui)}
.tc-app{display:grid;grid-template-columns:160px minmax(0,1fr);min-height:460px;text-align:left}
.tc-side{background:#1E2640;padding:16px 9px;display:flex;flex-direction:column;gap:2px}
.tc-logo{display:block;padding:0 8px 16px}.tc-logo svg{width:94px;height:17px;display:block}
.tc-n{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:13px;color:rgba(255,255,255,.78);white-space:nowrap}
.tc-n svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tc-n em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;background:var(--yellow);color:var(--ink);border-radius:999px;min-width:19px;padding:2px 6px;text-align:center}
.tc-n.on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}.tc-n.on svg{color:var(--yellow)}
.tc-sp{flex:1}
.tc-main{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tc-top{display:flex;align-items:center;gap:8px}
.tc-top>div{margin-right:auto;min-width:0}
.tc-top small{display:block;font-size:12px;color:#6B7280}
.tc-top b{display:flex;align-items:center;gap:8px;font:700 19px/1.25 var(--display);letter-spacing:-.01em;margin:1px 0}
.tc-badge{font:600 11.5px/1 var(--ui);letter-spacing:0;color:#1D4ED8;background:#DBEAFE;border-radius:6px;padding:4px 7px}
.tc-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:#fff;border:1px solid #DDE0E7;border-radius:9px;padding:8px 12px;white-space:nowrap}
.tc-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tc-btn.pri{background:var(--yellow);border-color:var(--yellow);font-weight:700;color:var(--ink)}
.tc-card{background:#fff;border-radius:12px;padding:13px 14px;box-shadow:0 1px 0 #E3E5EB}
.tc-ph{display:flex;justify-content:space-between;font-size:14px}
.tc-bar{height:9px;border-radius:9px;background:#ECEDF1;margin:9px 0 11px;overflow:hidden}
.tc-bar i{display:block;width:65%;height:100%;border-radius:9px;background:var(--yellow)}
.tc-steps{display:flex;justify-content:space-between}
.tc-s{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#9097A6}
.tc-s i{width:18px;height:18px;border-radius:50%;border:2px solid #D5D8E0;display:flex;align-items:center;justify-content:center}
.tc-s i svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tc-s.ok{color:#1D2333}.tc-s.ok i{background:#16A175;border-color:#16A175}
.tc-s.cur{color:#1D2333;font-weight:700}.tc-s.cur i{border-color:var(--yellow);background:#FFF3C4}
.tc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tc-col{display:flex;flex-direction:column;gap:12px}
.tc-h{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:6px}
.tc-h small{font-size:12px;font-weight:500;color:#6B7280}
.tc-w{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid #EEF0F3}
.tc-d{width:38px;flex:none;text-align:center;border-radius:8px;background:#F1F2F6;padding:4px 0}
.tc-d small{display:block;font-size:9.5px;font-weight:700;color:#6B7280;letter-spacing:.04em}
.tc-d b{font-size:15px}
.tc-w.on .tc-d{background:var(--yellow)}.tc-w.on .tc-d small{color:var(--ink)}
.tc-wt b{display:block;font-size:13.5px}.tc-wt small{font-size:12px;color:#6B7280}
.tc-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tc-pics img{width:100%;height:58px;object-fit:cover;border-radius:7px;display:block}
.tc-rent{display:flex;justify-content:space-between;gap:8px}
.tc-rent small{display:block;font-size:11.5px;color:#6B7280}
.tc-rent b{font-size:15px;font-variant-numeric:tabular-nums}
.tc-rent .g b{color:#16A175}
@media (min-width:861px){.iph-w{bottom:-60px}}
.iph-s.idv{padding:0;gap:0;background:#F4F5F8;display:flex;flex-direction:column}
.id-hd{background:#1E2640;height:100px;position:relative;flex:none}
.id-hd .iph-sb{color:#fff}.id-hd .iph-sb i{background:#fff}
.id-bar{position:absolute;left:14px;right:18px;bottom:16px;display:flex;align-items:center;gap:8px;color:#fff}
.id-bar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.id-bar b{font-size:19px;white-space:nowrap}
.id-bar small{font-size:13px;font-weight:600;background:rgba(255,255,255,.14);border-radius:6px;padding:4px 8px}
.id-cl{margin:12px 14px 0;padding:11px 14px;background:#fff;border-radius:14px}
.id-cl small{display:block;font-size:13px;color:#6B7280}
.id-cl b{display:block;font-size:17px;margin:1px 0}
.id-ls{margin:10px 14px 0;background:#fff;border-radius:14px;padding:6px 14px 12px}
.id-sec{display:block;font-size:13px;font-weight:700;color:#6B7280;padding:8px 0 2px}
.id-l{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #EEF0F3}
.id-l span{flex:1;min-width:0}
.id-l b{display:block;font-size:16px;white-space:nowrap}
.id-l small{font-size:13px;color:#6B7280}
.id-l em{font-style:normal;font-size:16px;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.id-l.new{margin:4px -8px 0;padding:9px 8px;border:0;border-radius:10px;background:#FFF8E1;box-shadow:0 0 0 2px var(--yellow)}
.id-add{display:flex;align-items:center;gap:7px;margin-top:10px;padding:10px 12px;border:1.5px dashed #D5D8E0;border-radius:10px;font-size:14px;font-weight:600;color:#6B7280}
.id-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.id-tot{display:flex;align-items:baseline;justify-content:space-between;margin:12px 18px 0}
.id-tot span{font-size:15px;font-weight:600}.id-tot small{font-size:12px;font-weight:400;color:#6B7280;margin-left:5px}
.id-tot b{white-space:nowrap;font:800 24px/1 var(--display);letter-spacing:-.02em}
.id-send{display:block;margin:12px 14px 0;text-align:center;background:var(--yellow);border-radius:14px;padding:15px;font-size:17px;font-weight:700;color:var(--ink)}

/* iphone_mobile : le téléphone aussi en mobile, à droite de l'ordinateur */
@media (max-width:860px){
.hero-e .devices{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:0;row-gap:22px}
.hero-e .devices>.laptop{width:auto!important;margin:0 0 16px!important}
.hero-e .devices>.feats{grid-column:1/-1}
.hero-e .iph-w{display:block;position:relative;left:auto;right:auto;bottom:auto;margin-left:-22px;width:136px;height:281px}
.hero-e .iph{transform:scale(.4533)}
}
@media (max-width:600px){
.hero-e .iph-w{margin-left:-18px;width:102px;height:211px}
.hero-e .iph{transform:scale(.34)}
.hero-e .devices>.laptop{margin-bottom:12px!important}
}

/* iphone_site : le site web du pro dans l'iPhone */
.iph-s.isw{padding:0;gap:0;background:#0E0E10}
.isw>img{position:absolute;left:0;right:0;top:48px;width:100%;height:calc(100% - 48px - 74px);object-fit:cover;object-position:50% 0}
.isw .iph-sb{color:#fff}.isw .iph-sb i{background:#fff}
.sw-url{position:absolute;left:0;right:0;bottom:0;height:74px;background:#F2F2F4;border-top:1px solid #DCDCE0;display:flex;align-items:flex-start;justify-content:center;gap:7px;padding-top:10px;font:600 17px/38px var(--ui);color:#18181B}
.sw-url::before{content:"";position:absolute;left:18px;right:18px;top:10px;height:38px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sw-url svg{position:relative;width:15px;height:15px;margin-top:11px;fill:none;stroke:#18181B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw-url{z-index:1}.sw-url *{position:relative}
/* badge site web : carte blanche des cartes du hero, accrochée en bas à gauche du téléphone */
.sw-badge{position:absolute;z-index:4;right:calc(100% - 14px);bottom:34px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 14px 9px 9px;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 18px 40px -18px rgba(0,0,0,.7);font:700 14.5px/1 var(--ui);color:var(--ink)}
.sw-ic{width:30px;height:30px;border-radius:8px;background:#0E0E10;display:flex;align-items:center;justify-content:center}
.sw-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.sw-badge{right:calc(100% - 12px);bottom:-8px;font-size:12.5px;padding:6px 10px 6px 6px;gap:7px;border-radius:12px}.sw-ic{width:24px;height:24px}.sw-ic svg{width:14px;height:14px}}

/* carte_siteweb : le site web en carte du hero, accrochée au téléphone sur desktop, 2e carte en mobile */
.sw-badge{display:none}
.hero-e .m6{--d:.9s;width:auto;white-space:nowrap;gap:4px}
.ub-sw{display:flex;align-items:center;gap:10px}
.ub-sw .ub-t{font-size:15px}
.sw-dom,.sw-on{display:none}
.hero-e .m6 .sw-ic{width:30px;height:30px;border-radius:8px;background:#0E0E10;display:flex;align-items:center;justify-content:center;flex:none}
.hero-e .m6 .sw-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.3}
@media (min-width:861px){.hero-e .m6{left:auto;top:auto;bottom:-26px;--tf:none;padding:10px 16px 10px 10px}}
@media (min-width:1341px){.hero-e .m6{right:calc(25% + 4px)}}
@media (min-width:1101px) and (max-width:1340px){.hero-e .m6{right:calc(25% + 8px)}}
@media (min-width:861px) and (max-width:1100px){.hero-e .m6{right:calc(23% + 14px)}}
@media (max-width:860px){
.hero-e .m6{white-space:normal}
.hero-e .m6 .ub-sw{flex-wrap:wrap;gap:6px}
.hero-e .m6 .sw-ic{width:16px;height:16px;border-radius:4px}.hero-e .m6 .sw-ic svg{width:12px;height:12px;stroke-width:1.6}
.hero-e .m6 .sw-dom{display:block;font:600 10.5px/1 var(--ui);letter-spacing:.04em;color:var(--fg4);flex:1}
.hero-e .m6 .sw-on{display:inline-flex;align-items:center;gap:5px;font:500 10.5px/1 var(--ui);color:var(--fg4)}.hero-e .m6 .sw-on i{width:6px;height:6px;border-radius:50%;background:#16A175}
.hero-e .m6 .ub-t{flex-basis:100%;font-size:14px;margin-top:2px}
.hero-e .feats .m4,.hero-e .feats .m5{grid-column:span 2}
.hero-e .feats .m1{order:1}.hero-e .feats .m6{order:2}.hero-e .feats .m2{order:3}.hero-e .feats .m3{order:4}.hero-e .feats .m5{order:5}.hero-e .feats .m4{order:6}
}

/* cartes_paires_mobile : Peppol | relance sur la même ligne en mobile */
@media (max-width:860px){
.hero-e .feats .m4,.hero-e .feats .m5{grid-column:auto}
.hero-e .feats .m4 .ub-tl{margin-top:auto}
.hero-e .feats .m4 .ub-tl span{padding:6px 8px}
.hero-e .feats .m4 .ub-tl span svg{display:none}
.hero-e .feats .m4 .ub-tl i{min-width:4px}
.hero-e .feats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:380px){.hero-e .feats .m4 .ub-tl{gap:3px}.hero-e .feats .m4 .ub-tl span{padding:5px 6px}.hero-e .feats .m4 .ub-tl i{min-width:2px}.hero-e .feats .m2 .ub-row{flex-wrap:wrap;gap:6px}}
@media (max-width:860px){.hero-e .m6 .sw-on{font-size:0;gap:0}}
@media (min-width:861px){.hero-e .m6{bottom:-52px}}

/* carte_siteweb_droite : à droite du téléphone quand la place le permet */
@media (min-width:1341px){.hero-e .m6{right:auto;left:calc(75% + 138px)}}
@media (min-width:1300px) and (max-width:1340px){.hero-e .m6{right:auto;left:calc(75% + 120px)}}

/* carte_siteweb_haut : plus près de la relance */
@media (min-width:1341px){.hero-e .m6{bottom:7px}}
@media (min-width:1300px) and (max-width:1340px){.hero-e .m6{bottom:67px}}

/* espaces_home : un seul rythme vertical sur toute la home */
:root{--sec:clamp(64px,6.7vw,96px)}
.hero-e{padding-top:var(--sec)}
.zzf{padding-top:calc(var(--sec) - 46px);padding-bottom:var(--sec)}
.trades-sec{border-top:0;padding-top:0;padding-bottom:var(--sec)}
.zzf .zz{--zg:calc(var(--sec) + 32px)!important}
@media (max-width:760px){.zzf .zz{--zg:var(--sec)!important}}
.nums-e,#avis,#faq,.final-e{padding-top:var(--sec);padding-bottom:var(--sec)}
@media (max-width:860px){.hero-e{padding-bottom:calc(var(--sec) - 22px)}}
@media (max-width:760px){.logos-e .logos{padding-block:40px 32px}.zzf{padding-top:calc(var(--sec) - 32px);padding-bottom:calc(var(--sec) - 24px)}.trades-sec{padding-bottom:calc(var(--sec) - 10px)}}










/* fin v67 */

/* fin v67 */

/* fin v67 */

/* v147 (28/10) : écran du hero allégé (barre d'icônes, 3 listes) et 3 notifications qui arrivent l'une après l'autre */
.tc-app2{grid-template-columns:54px minmax(0,1fr);min-height:0}
.tc-rail{background:#1E2640;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0}
.tc-rail .rl{width:28px;height:28px;margin-bottom:12px;display:block}.tc-rail .rl svg{width:28px;height:28px;display:block}
.tc-rail .ri{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)}
.tc-rail .ri.on{background:rgba(255,255,255,.12);color:var(--yellow)}
.tc-rail .ri svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tc3 .tc-card{padding:12px 12px 6px}
.tc3 h5{font:700 13.5px/1.2 var(--display);margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;color:#1D2333}
.tc3 h5 i{font:700 10.5px/1 var(--ui);font-style:normal;background:var(--yellow);border-radius:999px;padding:3px 7px}
.t3r{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #EEF0F4}
.t3r:first-of-type{border-top:0}
.t3r img{width:40px;height:32px;border-radius:6px;object-fit:cover;flex:none}
.t3r>div{min-width:0;flex:1}
.t3r b{display:block;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1D2333}
.t3r small{display:block;font-size:10.5px;color:#6B7280;margin-top:1px}
.t3r em{font:700 11.5px/1 var(--display);font-style:normal;white-space:nowrap;color:#1D2333}
.t3r em.ok{color:#16A175}
.t3r .snd{font:700 10.5px/1 var(--ui);background:var(--yellow);color:#0E0E10;border-radius:7px;padding:6px 8px}
.hero-e .feats .ntf .ub-s{display:block;margin-top:4px}
@keyframes ntin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}


/* v148 : écran plus haut (pas aplati), 1 notification + 2 badges de validation à des endroits différents, coche qui se dessine */
.tc-app2{min-height:470px}
.tc3{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;gap:12px}
.tc3>.tc-card:first-child{grid-row:span 2}
.tc3 .tc-card{padding:14px 14px 8px}
.tc3 h5{font-size:15px;margin-bottom:8px}
.t3r{padding:10px 0;gap:10px}
.tc3>.tc-card:first-child .t3r img{width:64px;height:50px;border-radius:8px}
.t3r b{font-size:13.5px}.t3r small{font-size:11.5px}.t3r em{font-size:13px}.t3r .snd{font-size:11.5px;padding:7px 10px}
.hero-e .feats .n1,.hero-e .feats .bdg{opacity:0;animation:ntin .6s cubic-bezier(.2,.9,.3,1.2) forwards}
.hero-e .feats .n1{animation-delay:.8s}.hero-e .feats .n2{animation-delay:2.1s}.hero-e .feats .n3{animation-delay:3.4s}
.hero-e .feats .bdg{display:inline-flex;flex-direction:row;white-space:nowrap;align-items:center;gap:12px;width:auto!important;min-width:0;border-radius:999px;padding:9px 20px 9px 9px;text-decoration:none}
.bdg .ck{width:38px;height:38px;border-radius:50%;background:#16A175;display:flex;align-items:center;justify-content:center;flex:none}
.bdg .ck svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bdg .ck path{stroke-dasharray:22;stroke-dashoffset:22;animation:ckdraw .45s ease-out forwards}
.hero-e .feats .n2 .ck path{animation-delay:2.55s}.hero-e .feats .n3 .ck path{animation-delay:3.85s}
.bdg b{display:block;font:700 16px/1.15 var(--display);color:var(--ink)}
.bdg small{display:block;font:500 12.5px/1.3 var(--ui);color:var(--fg4)}
.bdg small.amt{font:800 15px/1.2 var(--display);color:#16A175}
.hero-e .feats .n1{order:1}.hero-e .feats .n2{order:2}.hero-e .feats .n3{order:3}
@keyframes ckdraw{to{stroke-dashoffset:0}}
@media (min-width:861px){
 .hero-e .feats .n1{left:0;right:auto;top:6px;width:250px}
 .hero-e .feats .n2{left:470px;right:auto;top:-30px;bottom:auto}
 .hero-e .feats .n3{left:180px;right:auto;top:auto;bottom:-26px}
}
@media (prefers-reduced-motion:reduce){.hero-e .feats .n1,.hero-e .feats .bdg{opacity:1;animation:none}.bdg .ck path{animation:none;stroke-dashoffset:0}}

/* v149 : validations intégrées aux écrans (PF : pilules flottantes « moches ») */
.tc-main{position:relative}
.tc-toast{position:absolute;right:18px;bottom:16px;display:flex;align-items:center;gap:12px;background:#0E0E10;color:#fff;border-radius:14px;padding:12px 18px 12px 12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(10px);animation:ntin .5s cubic-bezier(.2,.9,.3,1.2) 2.1s forwards}
.tc-toast .ck{width:30px;height:30px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none}
.tc-toast .ck svg{width:18px;height:18px;fill:none;stroke:#0E0E10;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tc-toast .ck path{stroke-dasharray:22;stroke-dashoffset:22;animation:ckdraw .45s ease-out 2.5s forwards}
.tc-toast b{display:block;font:700 15px/1.2 var(--display)}
.tc-toast small{display:block;font:500 12px/1.3 var(--ui);color:rgba(255,255,255,.7)}
.hero-e .feats .pbn{display:flex;align-items:flex-start;gap:10px;border-radius:20px;background:rgba(248,248,248,.96);backdrop-filter:blur(12px);padding:11px 14px 12px 11px;opacity:0;animation:pbnin .55s cubic-bezier(.2,.9,.3,1.15) 3.4s forwards;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.pbn-ic{width:34px;height:34px;border-radius:9px;background:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none}
.pbn-ic svg{width:20px;height:20px}
.pbn-t{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.pbn-h{display:flex;justify-content:space-between;gap:8px}
.pbn-h b{font:600 11px/1.2 var(--ui);letter-spacing:.04em;color:var(--fg3)}
.pbn-h i{font:400 11px/1.2 var(--ui);font-style:normal;color:var(--fg4)}
.pbn-m{display:flex;align-items:center;gap:6px}
.pbn-m b{font:700 15px/1.2 var(--display);color:var(--ink)}
.pbn-m .ck{width:18px;height:18px;border-radius:50%;background:#16A175;display:flex;align-items:center;justify-content:center}
.pbn-m .ck svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pbn-m .ck path{stroke-dasharray:22;stroke-dashoffset:22;animation:ckdraw .45s ease-out 3.9s forwards}
.pbn small{font:700 13px/1.3 var(--display);color:#16A175}
@keyframes pbnin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media (min-width:861px){.hero-e .feats .pbn{left:auto;right:92px;top:176px;bottom:auto;height:auto;width:250px;z-index:5}}
.hero-e .feats .pbn{flex-direction:row;height:auto;min-height:0}
@media (max-width:860px){.tc-toast{right:10px;bottom:10px}}
@media (prefers-reduced-motion:reduce){.tc-toast,.hero-e .feats .pbn{opacity:1;transform:none;animation:none}.tc-toast .ck path,.pbn-m .ck path{animation:none;stroke-dashoffset:0}}

/* v153 : « Facture payée » épuré, le cercle se trace puis le V se coche (PF : badge moche) */
.hero-e .feats .pbn{align-items:center;gap:14px;padding:14px 22px 14px 14px;border-radius:18px;background:#fff;backdrop-filter:none;box-shadow:0 20px 44px -18px rgba(0,0,0,.55)}
.hero-e .feats .pbn .pbn-t{gap:3px}
.hero-e .feats .pbn .pbn-t b{font:600 14px/1.2 var(--ui);color:var(--fg3)}
.hero-e .feats .pbn .pbn-t small{font:800 24px/1.05 var(--display);letter-spacing:-.02em;color:var(--ink)}
.pck{width:52px;height:52px;flex:none;display:block}
.pck svg{width:52px;height:52px;display:block;overflow:visible}
.pck .c{fill:none;stroke:#16A175;stroke-width:3;stroke-dasharray:145;stroke-dashoffset:145;transform:rotate(-90deg);transform-origin:center;animation:pckc .6s ease-out 3.8s forwards,pckf .25s ease-out 4.35s forwards}
.pck .k{fill:none;stroke:#16A175;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;animation:pckk .35s cubic-bezier(.6,0,.4,1) 4.3s forwards,pckw .25s ease-out 4.35s forwards}
@keyframes pckc{to{stroke-dashoffset:0}}
@keyframes pckf{to{fill:#16A175}}
@keyframes pckk{to{stroke-dashoffset:0}}
@keyframes pckw{to{stroke:#fff}}
@media (min-width:861px){.hero-e .feats .pbn{width:auto;right:70px}}
@media (prefers-reduced-motion:reduce){.pck .c{stroke-dashoffset:0;fill:#16A175;animation:none}.pck .k{stroke-dashoffset:0;stroke:#fff;animation:none}}

/* v154 : « Devis envoyé » en haut à droite au-dessus du site, « Facture payée » en dernier en bas à gauche */
.hero-e .feats .dvt{display:flex;flex-direction:row;align-items:center;width:auto;height:auto;border:0;text-decoration:none}
.hero-e .feats .dvt b{color:#fff}
.hero-e .feats .dvt{opacity:0;transform:translateY(10px);animation:ntin .5s cubic-bezier(.2,.9,.3,1.2) 2.1s forwards}
@media (prefers-reduced-motion:reduce){.hero-e .feats .dvt{opacity:1;transform:none;animation:none}}
@media (min-width:861px){
 .hero-e .feats .dvt{position:absolute;left:auto;right:30px;top:40px;bottom:auto;z-index:6}
 .hero-e .feats .pbn{left:150px;right:auto;top:auto;bottom:-34px}
}

@media (max-width:860px){.hero-e .feats .dvt{position:static;grid-column:1/-1;justify-self:start}}

/* v155 : icône d'envoi (avion en papier qui part) pour « Devis envoyé », la coche reste réservée au paiement */
.dvt .snd-ic svg{width:17px;height:17px;fill:none;stroke:#0E0E10;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:sndfly .7s cubic-bezier(.3,0,.2,1) 2.4s both}
.dvt .snd-ic path{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
.dvt .snd-ic{overflow:hidden}
@keyframes sndfly{0%{transform:translate(0,0)}45%{transform:translate(16px,-16px);opacity:0}46%{transform:translate(-16px,16px);opacity:0}100%{transform:translate(0,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.dvt .snd-ic svg{animation:none}}

/* v156 : « Devis envoyé » comme un vrai clic : le curseur arrive, clique « Envoyer le devis », le bouton devient la confirmation et l'avion part */
.hero-e .feats .dvt{display:grid;background:transparent;box-shadow:none;padding:0;border:0;position:absolute;overflow:visible}
.dv-btn,.dv-ok{grid-area:1/1}
.dv-btn{justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:#0E0E10;font:700 15px/1 var(--display);border-radius:999px;padding:13px 20px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);animation:dvclick .2s ease 3.15s both,dvout .25s ease 3.4s forwards}
.dv-btn svg{width:16px;height:16px;fill:none;stroke:#0E0E10;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dv-ok{display:flex;align-items:center;gap:12px;background:#0E0E10;color:#fff;border-radius:14px;padding:12px 18px 12px 12px;box-shadow:0 14px 30px -12px rgba(0,0,0,.45);opacity:0;transform:scale(.95);animation:dvin .35s cubic-bezier(.2,.9,.3,1.2) 3.45s forwards}
.dv-ok .ck{width:30px;height:30px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.dv-ok .ck svg{width:16px;height:16px;fill:none;stroke:#0E0E10;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:sndfly .7s cubic-bezier(.3,0,.2,1) 3.6s both}
.dv-ok b{display:block;font:700 15px/1.2 var(--display);color:#fff}
.dv-ok small{display:block;font:500 12px/1.3 var(--ui);color:rgba(255,255,255,.7)}
.dv-cur{position:absolute;right:60px;top:56%;width:24px;height:24px;fill:#fff;stroke:#0E0E10;stroke-width:1.4;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));animation:curmv .75s cubic-bezier(.3,.7,.3,1) 2.4s forwards,curclk .2s ease 3.15s,curout .25s ease 3.6s forwards}
@keyframes dvclick{50%{transform:scale(.92)}}
@keyframes dvout{to{opacity:0;transform:scale(.9)}}
@keyframes dvin{to{opacity:1;transform:none}}
@keyframes curmv{from{opacity:0;transform:translate(70px,60px)}25%{opacity:1}to{opacity:1;transform:none}}
@keyframes curclk{50%{transform:scale(.85)}}
@keyframes curout{to{opacity:0}}
@media (max-width:860px){.hero-e .feats .dvt{position:relative}}
@media (prefers-reduced-motion:reduce){.dv-btn,.dv-cur{display:none}.dv-ok{opacity:1;transform:none;animation:none}.dv-ok .ck svg{animation:none}}

/* Blocs « solution 360 » façon page logiciel (PF 28/10) */
.hm-360h{padding:clamp(48px,6vw,80px) 0 clamp(24px,3vw,40px)}
.hm-bl{padding-block:clamp(56px,6vw,84px)}
.hm-bl .x-rowz-t .pills{display:flex;flex-wrap:wrap;gap:8px}
.hm-bl .zstat{margin:0}
.hm-v{position:relative;margin:0 0 26px}
.hm-v>img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:24px;box-shadow:0 24px 50px -28px rgba(14,14,16,.5)}
.hm-card{position:absolute;left:-22px;bottom:-26px;width:min(300px,78%);background:#fff;border-radius:18px;padding:14px 16px;box-shadow:0 24px 48px -16px rgba(14,14,16,.45);display:flex;flex-direction:column;gap:6px;font:500 13px/1.35 var(--ui);color:var(--fg3)}
.x-rowz.flip .hm-card{left:auto;right:-22px}
.hm-card .r{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-card .r small{font-size:12px;color:var(--fg4)}
.hm-card .t{font:700 17px/1.2 var(--display);color:var(--ink)}
.hm-card .pl{font:700 11px/1 var(--ui);padding:5px 9px;border-radius:999px}
.hm-card .pl.new{background:#FFF2CC;color:#7A5B00}.hm-card .pl.ok{background:#E7F6EF;color:#0E7A57}
.hm-card .ac{display:flex;gap:8px;margin-top:6px}
.hm-card .ac span{flex:1;text-align:center;font:700 13px/1 var(--ui);padding:10px;border-radius:999px}
.hm-card .ac .y{background:var(--yellow);color:var(--ink)}.hm-card .ac .g{background:#F1F1F3;color:var(--ink)}
.hm-doc .r b{font:700 15px/1.2 var(--display);color:var(--ink)}
.hm-doc .dl,.hm-doc .dt{display:flex;justify-content:space-between;gap:12px}
.hm-doc .dl b{color:var(--ink)}
.hm-doc .dt{border-top:1px solid var(--line);padding-top:8px;margin-top:2px;color:var(--ink);font-weight:600}
.hm-doc .dt b{font:800 18px/1 var(--display)}
.hm-doc .ds{margin-top:6px;text-align:center;background:var(--yellow);color:var(--ink);font:700 13px/1 var(--ui);padding:10px;border-radius:999px}
.hm-cert{width:min(270px,74%)}
.hm-cert .r{justify-content:flex-start}
.hm-cert .r b{font:700 17px/1.2 var(--display);color:var(--ink)}
.hm-cert .mk svg{width:34px;height:34px;display:block}
.hm-cert .ck{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.hm-cert .ck svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#16A175;color:#fff;flex:none}
.hm-ph{position:absolute;right:-18px;bottom:-30px;width:150px;aspect-ratio:520/1040;border-radius:24px;border:6px solid #0E0E10;overflow:hidden;background:#0E0E10;box-shadow:0 24px 48px -16px rgba(14,14,16,.5)}
.x-rowz.flip .hm-ph{right:auto;left:-18px}
.hm-ph img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.trades-sec.sand-bg{background:#F7F6F2;padding-top:64px}
@media (max-width:760px){.hm-card{left:12px;bottom:-22px;width:auto;right:12px}.x-rowz.flip .hm-card{right:12px;left:12px}.hm-ph{width:110px;right:8px}.x-rowz.flip .hm-ph{left:8px}.trades-sec.sand-bg{padding-top:44px}}

/* « Devis envoyé » : pas de flou d'arrière-plan sur le conteneur, sinon sa forme se voit avant le bouton (PF 28/10) */
.hero-e .feats .dvt{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* « Facture payée » : le V gardé mais plus stylé (PF 28/10) : pastille arrondie verte en dégradé, V épais qui se trace, petite gerbe de traits */
.pck2{position:relative;width:52px;height:52px;flex:none;display:block}
.pck2 .sq{position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg,#22C38A 0%,#0E8A5F 100%);box-shadow:0 10px 22px -10px rgba(14,138,95,.75),inset 0 1px 0 rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;transform:scale(0) rotate(-20deg);animation:pk2in .45s cubic-bezier(.2,1.4,.4,1) 3.8s forwards}
.pck2 svg{width:44px;height:44px;overflow:visible}
.pck2 path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:32;stroke-dashoffset:32;animation:pk2v .38s cubic-bezier(.65,0,.35,1) 4.15s forwards}
.pck2 .ry{position:absolute;inset:-12px;pointer-events:none}
.pck2 .ry i{position:absolute;left:50%;top:50%;width:3px;height:8px;margin:-4px 0 0 -1.5px;border-radius:2px;background:#22C38A;opacity:0;transform:rotate(var(--a)) translateY(-26px) scaleY(.4)}
.pck2 .ry i:nth-child(1){--a:0deg}.pck2 .ry i:nth-child(2){--a:45deg;background:var(--yellow)}.pck2 .ry i:nth-child(3){--a:90deg}.pck2 .ry i:nth-child(4){--a:135deg;background:var(--yellow)}
.pck2 .ry i:nth-child(5){--a:180deg}.pck2 .ry i:nth-child(6){--a:225deg;background:var(--yellow)}.pck2 .ry i:nth-child(7){--a:270deg}.pck2 .ry i:nth-child(8){--a:315deg;background:var(--yellow)}
.pck2 .ry i{animation:pk2ry .55s ease-out 4.4s forwards}
@keyframes pk2in{to{transform:scale(1) rotate(0)}}
@keyframes pk2v{to{stroke-dashoffset:0}}
@keyframes pk2ry{0%{opacity:0;transform:rotate(var(--a)) translateY(-24px) scaleY(.4)}35%{opacity:1;transform:rotate(var(--a)) translateY(-32px) scaleY(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-40px) scaleY(.3)}}
@media (prefers-reduced-motion:reduce){.pck2 .sq{transform:none;animation:none}.pck2 path{stroke-dashoffset:0;animation:none}.pck2 .ry{display:none}}

/* ===== v67 : méga-menu, 6 variantes ===== */
header.mm-h{background:rgba(255,255,255,.96)}
.mm-bar{display:flex;align-items:center;gap:20px;height:68px;position:relative}
.mm-logo{flex:none}
.mm-nav{display:flex;align-items:center;gap:2px;margin-left:20px}
.mm-i{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:999px;background:none;font:500 15px/1 var(--display);letter-spacing:-.01em;color:var(--fg3);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.mm-i:hover,.mm-i[aria-expanded="true"]{color:var(--ink);background:var(--sand)}
.mm-chev{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.mm-i[aria-expanded="true"] .mm-chev{transform:rotate(180deg)}
.mm-ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mm-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.mm-langw{position:relative}
.mm-lang{gap:5px;padding:0 10px}
.mm-langp{position:absolute;right:0;top:calc(100% + 10px);width:250px;background:#fff;border-radius:16px;box-shadow:var(--shadow-float);padding:8px;z-index:3}
.mm-lg{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;text-decoration:none;font:500 15px/1.2 var(--ui);color:var(--fg2)}
.mm-lg b{width:30px;font:700 12px/1 var(--ui);letter-spacing:.06em;color:var(--fg4)}
.mm-lg i{margin-left:auto;font-style:normal;color:var(--mustard);font-weight:700}
.mm-lg:hover{background:var(--sand)}
.mm-lg.on{background:var(--cream)}
.mm-login{font:500 15px/1 var(--display);color:var(--fg2);text-decoration:none;padding:0 10px;white-space:nowrap}
.mm-login:hover{color:var(--ink)}
.top .mm-cta{margin-left:4px}
.menu-btn path{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .2s,opacity .2s;transform-origin:10px 10px}
.menu-btn[aria-expanded="true"] .mb1{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .mb2{opacity:0}
.menu-btn[aria-expanded="true"] .mb3{transform:translateY(-4px) rotate(-45deg)}

/* panneaux */
.mm-panels{position:absolute;left:0;right:0;top:100%;pointer-events:none}
.mmp{display:none;pointer-events:auto}
.mm-h.mm-open .mmp.on{display:block;animation:mmIn .22s cubic-bezier(.2,.7,.2,1)}
@keyframes mmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mm-dim{position:fixed;inset:0;background:rgba(14,14,16,.28);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
body.mm-dimmed .mm-dim{opacity:1}
.mmp h6{margin:0 0 14px;font:600 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4)}
.mm-h .mm-panels .wrap.mm-in{display:flex;align-items:stretch;height:auto;gap:40px;padding-top:32px;padding-bottom:32px}
.mmp4 .wrap.mm-in{align-items:flex-start}
.mm-cols{flex:1;display:flex;gap:44px}
.mm-col{display:flex;flex-direction:column;min-width:0}
.mm-col2{flex:1.6}
.mm-g2{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px}
.mm-arr{display:inline-block;transition:transform .2s}
a:hover>.mm-arr,a:hover .mm-arr{transform:translateX(3px)}
.mm-all{margin-top:14px;font:600 14.5px/1 var(--display);color:var(--mustard);text-decoration:none}
.mm-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.mm-chips>span{font:600 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4);margin-right:6px}
.mm-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 13.5px/1 var(--ui);color:var(--fg2);text-decoration:none}
.mm-chip:hover{border-color:var(--ink);color:var(--ink)}
.mm-tabs{display:flex;gap:4px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.mm-tab{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:10px;background:none;font:500 14.5px/1 var(--ui);color:var(--fg3);cursor:pointer}
.mm-tab small{font:600 11.5px/1 var(--ui);color:var(--fg4)}
.mm-tab:hover{color:var(--ink)}
.mm-tab[aria-selected="true"]{background:var(--sand);color:var(--ink);font-weight:600}
.mm-tp:not(.on){display:none}
.mm-mets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mm-met{display:flex;align-items:center;min-height:46px;padding:0 16px;border-radius:12px;background:var(--sand);font:500 15px/1.2 var(--display);color:var(--ink);text-decoration:none}
.mm-met:hover{background:var(--cream);box-shadow:inset 0 0 0 1px var(--ink)}
.mm-card{display:block;width:280px;border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;color:var(--fg2);box-shadow:0 1px 0 var(--line),0 10px 30px -18px rgba(14,14,16,.35)}
.mm-card-ph{display:block;height:170px;overflow:hidden}
.mm-card-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .5s}
.mm-card:hover .mm-card-ph img{transform:scale(1.04)}
.mm-card-b{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.mm-card-b b{font:600 17px/1.25 var(--display);color:var(--ink);letter-spacing:-.02em}
.mm-card-b small{font:400 13.5px/1.35 var(--ui);color:var(--fg3)}
.mm-card-b em{font:600 14px/1 var(--display);font-style:normal;color:var(--ink);margin-top:6px}
.mm-tic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--cream);color:var(--ink);flex:none;transition:background .15s}

/* V1 colonnes */
.mmp1{background:#fff;border-top:1px solid var(--line-soft);box-shadow:0 24px 40px -24px rgba(14,14,16,.3)}
.mm-h .mmp1 .wrap.mm-in{padding-top:0;padding-bottom:0}
.mmp1 .mm-cols{padding:32px 0}
.mmp1{overflow:hidden}
.mmp1 .mm-side::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:100vw;background:var(--sand)}
.mmp1 .mm-side{position:relative;background:var(--sand);margin-right:-32px;padding:32px;display:flex;align-items:flex-start;border-left:1px solid var(--line-soft)}
.mmp1 .mm-col>h6{padding-bottom:12px;border-bottom:1px solid var(--line)}
.mmp1 .mm-l{padding:9px 0;font:500 16px/1.2 var(--display);color:var(--ink);text-decoration:none}
.mmp1 .mm-l:hover{color:var(--mustard)}
.mmp1 .mm-ld{display:flex;flex-direction:column;gap:3px;padding:9px 0;text-decoration:none}
.mmp1 .mm-ld b{font:600 15.5px/1.2 var(--display);color:var(--ink)}
.mmp1 .mm-ld small{font:400 13.5px/1.35 var(--ui);color:var(--fg4)}
.mmp1 .mm-ld:hover b{color:var(--mustard)}

/* V2 icônes */
.mmp2{background:#fff;border-top:1px solid var(--line-soft);box-shadow:0 24px 40px -24px rgba(14,14,16,.3)}
.mmp2 .mm-main{flex:1}
.mm-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 18px}
.mm-t{display:flex;align-items:center;gap:14px;padding:10px;margin:-2px -10px;border-radius:14px;text-decoration:none;color:var(--ink)}
.mm-t b{font:600 15.5px/1.2 var(--display)}
.mm-t:hover{background:var(--sand)}
.mm-t:hover .mm-tic{background:var(--yellow)}
.mm-tiles2{grid-template-columns:repeat(2,1fr);gap:4px 28px}
.mm-t2{align-items:flex-start}
.mm-t2>span:last-child{display:flex;flex-direction:column;gap:3px;padding-top:2px}
.mm-t2 small{font:400 13.5px/1.35 var(--ui);color:var(--fg4)}
.mmp2 .mm-side{flex:none}
.mm-foot{border-top:1px solid var(--line-soft);text-align:center;padding:16px}
.mm-foot .mm-all{margin:0;color:var(--ink)}

/* V3 nuit */
.mmp3{background:var(--ink);color:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mmp3 h6{color:rgba(255,255,255,.45)}
.mmp3 .mm-big{padding:5px 0;font:500 22px/1.2 var(--display);letter-spacing:-.03em;color:#fff;text-decoration:none;transition:color .15s}
.mmp3 .mm-big:hover{color:var(--yellow)}
.mmp3 .mm-sm{padding:6px 0;font:500 15px/1.3 var(--ui);color:rgba(255,255,255,.7);text-decoration:none}
.mmp3 .mm-sm:hover{color:#fff}
.mmp3 .mm-y{color:var(--yellow);font-weight:600}
.mmp3 .mm-cols{gap:56px}
.mmp3 .mm-col{flex:1}
.mmp3 .mm-card{background:#1D1D21;box-shadow:none;color:#fff}
.mmp3 .mm-card-b b{color:#fff}
.mmp3 .mm-card-b small{color:rgba(255,255,255,.6)}
.mmp3 .mm-card-b em{color:var(--yellow)}

/* V4 liste et aperçu */
.mmp4{background:var(--cream);box-shadow:0 24px 40px -24px rgba(14,14,16,.3)}
.mm-h .mmp4 .wrap.mm-in{gap:0}
.mm-list{display:flex;flex-direction:column;width:270px;padding-right:32px;border-right:1px solid rgba(14,14,16,.1)}
.mm-pl{padding:8px 0;font:500 16px/1.2 var(--display);color:var(--fg4);text-decoration:none;transition:color .12s,padding .15s}
.mm-pl:hover,.mm-pl.on{color:var(--ink);padding-left:6px}
.mm-pl.on{font-weight:600}
.mm-prev{flex:1;padding:0 40px;display:flex;flex-direction:column}
.mm-pt{font:600 26px/1.15 var(--display);letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.mm-pd{margin-top:10px;max-width:42ch;font:400 16px/1.5 var(--ui);color:var(--fg3)}
.mmp4 .mm-chips{margin-top:auto;padding-top:24px}
.mm-ph{position:relative;display:block;width:330px;height:300px;border-radius:18px;overflow:hidden;flex:none}
.mm-ph img{width:100%;height:100%;object-fit:cover}
.mm-ph span{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.94);font:600 14.5px/1.3 var(--display);color:var(--ink)}

/* V5 pilule flottante */
.mm-h[data-mv="5"]{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:10px}
.mm-h[data-mv="5"] .mm-bar{height:60px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;box-shadow:0 0 0 1px rgba(14,14,16,.06),0 10px 30px -14px rgba(14,14,16,.3);padding-left:24px;padding-right:8px;max-width:1180px}
.mm-h[data-mv="5"] .mm-nav{margin-left:auto;margin-right:auto}
.mm-h[data-mv="5"] .mm-right{margin-left:0}
.mm-h[data-mv="5"] .mm-cta{height:44px}
.mm-h[data-mv="5"] .mm-panels{top:calc(100% + 8px)}
.mmp5{position:absolute;left:var(--px,50%);top:0;transform:translateX(-50%)}
.mm-pop{width:640px;background:#fff;border-radius:22px;padding:22px;box-shadow:0 0 0 1px rgba(14,14,16,.06),0 30px 60px -24px rgba(14,14,16,.4)}
.mmp5[data-r="chantiers"] .mm-pop,.mmp5[data-r="siteweb"] .mm-pop{width:520px}
.mm-pop-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:2px 6px 14px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)}
.mm-pop-h b{font:600 17px/1.2 var(--display);color:var(--ink);letter-spacing:-.02em}
.mm-pop-h .mm-all{margin:0;font-size:14px}
.mm-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;font:500 15px/1.2 var(--display);color:var(--ink);text-decoration:none}
.mm-row .mm-tic{width:34px;height:34px;border-radius:10px}
.mm-row:hover{background:var(--sand)}
.mm-row:hover .mm-tic{background:var(--yellow)}
.mm-row2{align-items:flex-start}
.mm-row2>span:last-child{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.mm-row2 b{font:600 15px/1.2 var(--display)}
.mm-row2 small{font:400 13px/1.35 var(--ui);color:var(--fg4)}
.mmp5 .mm-chips{margin-top:12px;padding:14px 6px 0;border-top:1px solid var(--line-soft)}
.mm-caret{display:none}
.mm-h[data-mv="5"].mm-open .mm-caret{display:block;position:absolute;top:-6px;left:var(--cx,50%);width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px;box-shadow:-1px -1px 0 rgba(14,14,16,.06);z-index:2}

/* V6 bande jaune */
.mmp6{background:var(--yellow);box-shadow:0 30px 50px -30px rgba(14,14,16,.45)}
.mm-h .mmp6 .wrap.mm-in{gap:56px;padding-top:40px;padding-bottom:40px}
.mm-lead{width:330px;flex:none;display:flex;flex-direction:column;align-items:flex-start}
.mm-k{font:600 12.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(14,14,16,.6)}
.mm-lead .mm-ht{margin:14px 0 0;font:700 34px/1.05 var(--display);letter-spacing:-.045em;color:var(--ink)}
.mm-lead .mm-p{margin:14px 0 22px;font:400 16px/1.5 var(--ui);color:rgba(14,14,16,.75)}
.mm-h .mm-lead .btn{height:46px;font-size:15px;background:var(--ink);color:#fff}
.mm-h .mm-lead .btn:hover{background:#27272A}
.mmp6 .mm-main{flex:1}
.mm-pills{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.mm-pill{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;border-radius:16px;background:rgba(255,255,255,.55);font:600 17px/1 var(--display);color:var(--ink);text-decoration:none;transition:background .15s,transform .15s}
.mm-pill:hover{background:#fff;transform:translateY(-2px)}
/* 12 métiers (28/10) : 3 colonnes et pastilles plus basses pour garder un menu compact */
.mm-pills{grid-template-columns:repeat(3,1fr);gap:8px}
.mm-pill{height:46px;padding:0 14px;gap:10px;font-size:15.5px;border-radius:13px}
.mm-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mm-wc{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;background:rgba(255,255,255,.6);text-decoration:none;color:var(--ink);transition:background .15s,transform .15s}
.mm-wc:hover{background:#fff;transform:translateY(-2px)}
.mm-wc b{font:600 15px/1.2 var(--display);margin-top:4px}
.mm-wc small{font:400 13px/1.35 var(--ui);color:rgba(14,14,16,.65)}
.mmp6 .mm-chip{background:transparent;border-color:rgba(14,14,16,.25)}
.mmp6 .mm-chips>span{color:rgba(14,14,16,.6)}

/* V7 et V8 : la mise en page de la 6, sans fond jaune ; la 8 ajoute la carte photo de la 1 */
.mmp7,.mmp8{background:#fff;border-top:1px solid var(--line-soft);box-shadow:0 24px 40px -24px rgba(14,14,16,.3)}
.mm-h .mmp7 .wrap.mm-in,.mm-h .mmp8 .wrap.mm-in{gap:48px;padding-top:40px;padding-bottom:40px}
.mmp7 .mm-main,.mmp8 .mm-main{flex:1;min-width:0}
.mmp7 .mm-k,.mmp8 .mm-k{color:var(--mustard)}
.mmp7 .mm-p,.mmp8 .mm-p{color:var(--fg3)}
.mmp7 .mm-pill,.mmp8 .mm-pill,.mmp7 .mm-wc,.mmp8 .mm-wc{background:var(--sand)}
.mmp7 .mm-pill:hover,.mmp8 .mm-pill:hover,.mmp7 .mm-wc:hover,.mmp8 .mm-wc:hover{background:var(--cream);box-shadow:inset 0 0 0 1px rgba(255,196,0,.55)}
.mmp7 .mm-wc small,.mmp8 .mm-wc small{color:var(--fg4)}
.mmp8 .mm-lead{width:270px}
.mmp8 .mm-lead .mm-ht{font-size:30px}
.mmp8 .mm-cards{grid-template-columns:1fr 1fr}
.mmp8 .mm-wc{display:grid;grid-template-columns:22px 1fr;align-content:start;column-gap:12px;row-gap:3px;padding:13px 14px}
.mmp8 .mm-wc .mm-ic{grid-row:span 2;margin-top:1px}
.mmp8 .mm-wc b{margin-top:0}
.mmp8 .mm-side{flex:none}
.mmp8 .mm-card{width:260px}

/* logiciel : titres seuls */
.mm-cards-t .mm-wc{justify-content:center;min-height:0}
.mmp6 .mm-cards-t .mm-wc,.mmp7 .mm-cards-t .mm-wc{padding:16px 16px 18px}
.mmp8 .mm-cards-t .mm-wc{grid-template-columns:22px 1fr;align-items:center;padding:15px 16px}
.mmp8 .mm-cards-t .mm-wc .mm-ic{grid-row:auto;margin-top:0}

/* sélecteur de variante */
.mm-sw{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:var(--ink);box-shadow:0 14px 34px -10px rgba(0,0,0,.5);font-family:var(--ui)}
.mm-sw>span{padding:0 10px 0 12px;font:600 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.mm-sw button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px 0 6px;border:0;border-radius:999px;background:none;font:500 13.5px/1 var(--ui);color:rgba(255,255,255,.75);cursor:pointer;white-space:nowrap}
.mm-sw button b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;color:#fff}
.mm-sw button:hover{color:#fff}
.mm-sw button[aria-pressed="true"]{background:var(--yellow);color:var(--ink)}
.mm-sw button[aria-pressed="true"] b{background:var(--ink);color:var(--yellow)}

/* tiroir mobile */
.mm-mob{position:fixed;left:0;right:0;top:var(--mt,115px);bottom:0;background:#fff;display:flex;flex-direction:column;z-index:60;border-top:1px solid var(--line-soft)}
.mm-mob[hidden]{display:none}
.mm-mob-s{flex:1;overflow-y:auto;padding:6px 16px 20px;-webkit-overflow-scrolling:touch}
.mm-acc{border-bottom:1px solid var(--line-soft)}
.mm-acc summary{display:flex;align-items:center;justify-content:space-between;padding:17px 2px;font:600 18px/1.2 var(--display);color:var(--ink);cursor:pointer;list-style:none}
.mm-acc summary::-webkit-details-marker{display:none}
.mm-acc summary::after{display:none;content:none}
.mm-acc summary .mm-chev{width:16px;height:16px;color:var(--fg4)}
.mm-acc[open] summary .mm-chev{transform:rotate(180deg)}
.mm-acc-b{padding:0 0 18px}
.mm-acc-b h6{margin:6px 0 10px;font:600 11.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fg4)}
.mm-acc-b h6+.mm-mg{margin-bottom:12px}
.mm-mg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mm-mi{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--sand);font:500 14.5px/1.2 var(--display);color:var(--ink);text-decoration:none}
.mm-mi .mm-tic{width:32px;height:32px;border-radius:9px;background:#fff}
.mm-acc-b .mm-all{display:inline-block;margin-top:14px}
.mm-mlink{display:block;padding:17px 2px;border-bottom:1px solid var(--line-soft);font:600 18px/1.2 var(--display);color:var(--ink);text-decoration:none}
.mm-mlang{display:flex;flex-direction:column;gap:10px;padding:18px 2px}
.mm-mlang>span{display:flex;align-items:center;gap:8px;font:600 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--fg4)}
.mm-mlang>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mm-mlang a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;border:1px solid var(--line);font:700 14px/1 var(--ui);color:var(--ink);text-decoration:none}
.mm-mlang a small{font-weight:500;font-size:12px;color:var(--fg4)}
.mm-mlang a.on{border-color:var(--ink);background:var(--cream)}
.mm-mob-f{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);background:#fff}
.mm-mob-f .btn{height:50px;font-size:16px;padding:0 12px}
.mm-h .mm-mob-f .btn-w{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.mm-h .mm-mob-f .btn-y{background:var(--yellow);color:var(--ink)}

@media (max-width:1219px){.mm-nav,.mm-login,.mm-langw,.mm-panels,.mm-sw{display:none}.menu-btn{display:inline-flex}}
@media (min-width:1220px){.mm-mob{display:none!important}}
@media (max-width:1219px){.mm-h[data-mv="5"]{background:rgba(255,255,255,.96);padding-top:0;border-bottom:1px solid var(--line-soft)}.mm-h[data-mv="5"] .mm-bar{height:68px;background:none;box-shadow:none;border-radius:0;padding-left:16px;padding-right:16px;backdrop-filter:none}}
@media (max-width:420px){.top .mm-cta{height:40px;padding:0 14px;font-size:14px}.mm-bar{gap:10px}}
body.mm-lock{overflow:hidden}
body.mm-lock header.mm-h{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
/* fin v67 */