/* ============================================================
   WEBOMANE · accueil v2 · DA inspirée de 1600.agency
   Titres Urbanist 800 (équivalent libre de Visby CF), texte DM Sans 500,
   fond blanc cassé, encre #1A1A1A, accent orange, menu pilule flottant.
   Orange texte : #C9420B (contraste 4,7). Orange aplat : #FF652D.
   ============================================================ */
:root{
  --bg:#FAFAFA; --white:#FFFFFF; --panel:#F4F4F5; --line:#ECECEC; --line-2:#E2E2E2;
  --ink:#1A1A1A; --text:#4D4D4D; --muted:#5E5D5E;
  --orange:#FF652D; --orange-txt:#B23A09; --orange-soft:#FFF1EA;
  --blue:#3094C1;
  --head:"Urbanist",system-ui,sans-serif; --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 30px -12px rgba(0,0,0,.14);
  --r:22px; --w:1200px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--text);font:500 16px/1.55 var(--body);letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);color:var(--ink);margin:0;font-weight:800;letter-spacing:-0.02em}
p{margin:0}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.center{text-align:center}
em{font-style:normal;color:var(--orange-txt)}

/* Boutons pilule, majuscules, comme la référence */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:12px 22px;border-radius:999px;font:700 13.5px/1 var(--body);text-transform:uppercase;letter-spacing:.02em;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-orange{background:var(--orange);color:var(--ink);box-shadow:0 12px 30px -12px rgba(255,101,45,.7)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-lg{min-height:52px;padding:14px 26px 14px 22px;font-size:14px}
.btn-block{width:100%}
.btn .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--orange);color:var(--ink);margin-left:-10px}

/* 1. Menu pilule flottante */
.nav-wrap{position:sticky;top:12px;z-index:50;padding:0 24px}
.nav{max-width:var(--w);margin:12px auto 0;display:flex;align-items:center;gap:24px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 30px;box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;min-height:44px}
.nav-logo img{height:22px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:6px}
.nav-links a{font-size:16px;color:var(--text);display:flex;align-items:center;min-height:44px}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;position:relative}
.dot-live{position:absolute;top:-2px;right:6px;width:11px;height:11px;border-radius:50%;background:var(--orange);border:2px solid #fff;animation:pulse 2s infinite}
.wa{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 0 0 6px rgba(37,211,102,.14);flex:0 0 48px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,101,45,.6)}70%{box-shadow:0 0 0 9px rgba(255,101,45,0)}100%{box-shadow:0 0 0 0 rgba(255,101,45,0)}}

/* 2. Accueil */
.hero{padding:70px 0 20px;background:radial-gradient(900px 420px at 50% 0%,#fff 0%,rgba(255,255,255,0) 70%)}
.laurel{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px}
.leaf{width:30px;height:48px}
.leaf.r{transform:scaleX(-1)}
.laurel p{display:flex;flex-direction:column;font-size:15px;line-height:1.25;color:var(--ink)}
.laurel b{font-family:var(--head);font-weight:800;font-size:16px}
h1{font-size:clamp(38px,5.4vw,70px);line-height:1.02;letter-spacing:-0.03em;max-width:18ch;margin:0 auto}
.hero-sub{font-size:clamp(16px,1.5vw,19px);line-height:1.5;color:var(--text);max-width:640px;margin:26px auto 0}
.pills{list-style:none;padding:0;margin:30px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.pills li{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:var(--panel);font-size:14px;font-weight:600;color:var(--ink)}
.pills li.on{background:#fff;box-shadow:var(--shadow);font-size:15px}
.pills i{width:18px;height:18px;border-radius:50%;background:var(--orange);position:relative;flex:0 0 18px}
.pills i::after{content:"";position:absolute;left:6px;top:3.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.flag{display:inline-block;width:18px;height:12px;border-radius:2px;background:linear-gradient(90deg,#1D4ED8 33.3%,#fff 33.3% 66.6%,#DC2626 66.6%);box-shadow:0 0 0 1px var(--line-2)}
.hero-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}
.trust{margin-top:44px;font-size:17px;color:var(--ink)}
.trust em{font-weight:600}

/* Bande de logos : deux rangées en sens inverse, en couleurs */
.logos-wall{margin-top:30px;display:flex;flex-direction:column;gap:22px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:scroll 48s linear infinite}
.m-right .marquee-track{animation-direction:reverse;animation-duration:56s}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:64px;padding-right:64px}
.marquee img{width:auto;max-width:none;height:calc(var(--h,40) * 1px);transition:transform .3s}
.marquee img:hover{transform:scale(1.08)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* 3. (voir bloc « Plateforme » en fin de fichier) */
/* Sections */
.sec{padding:90px 0}
.sec-tint{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(30px,4vw,54px);line-height:1.05;letter-spacing:-0.025em}
.head p{margin:14px auto 0;max-width:620px;font-size:17px}

/* 4. Formules */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:900px;margin:48px auto 0}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;position:relative}
.plan h3{font-size:24px;font-weight:800}
.plan-sub{font-size:14.5px;margin-top:6px}
.plan-price{font-family:var(--head);font-weight:800;font-size:34px;color:var(--ink);margin:22px 0 18px;letter-spacing:-0.02em}
.ticks{list-style:none;padding:22px 0 0;margin:22px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;font-size:14.5px}
.ticks li{display:flex;gap:10px}
.ticks li::before{content:"";flex:0 0 14px;height:8px;margin-top:6px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg);color:var(--orange-txt)}
.plan-dark{background:#1F1F1F;border-color:#1F1F1F;color:#D4D4D4;box-shadow:0 40px 80px -30px rgba(255,101,45,.55)}
.plan-dark h3,.plan-dark .plan-price{color:#fff}
.plan-dark .ticks{border-color:#333}
.plan-dark .ticks li{color:#fff}
.plan-dark .ticks li::before{color:var(--orange)}
.plan-tag{position:absolute;top:22px;right:22px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--orange);border-radius:999px;padding:5px 12px}

/* 5. Services */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.svc-i{background:var(--panel);border-radius:18px;padding:22px 24px;transition:background .2s,transform .2s;min-width:0}
.svc-i:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--shadow)}
.svc-i b{display:block;font-family:var(--head);font-weight:800;font-size:19px;color:var(--ink)}
.svc-i b::after{content:" →";color:var(--orange-txt)}

/* 6. (voir bloc « Étapes » en fin de fichier) */
/* 7. Chiffres */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.num{background:var(--panel);border-radius:22px;padding:28px 24px;min-width:0}
.num b{display:block;font-family:var(--head);font-weight:900;font-size:clamp(34px,3.6vw,48px);color:var(--ink);line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.num span{display:block;font-weight:600;color:var(--ink);margin-top:10px}
.num small{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}

/* 8. Avis */
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:960px;margin:44px auto 0}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.rev blockquote{margin:0;color:var(--ink);font-size:15.5px;line-height:1.55}
.rev figcaption{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.rev .av{width:34px;height:34px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-family:var(--head);font-weight:800;color:var(--ink)}
.rev b{color:var(--ink);font-size:14.5px}
.rev small{font-size:13.5px;color:var(--muted);flex-basis:100%;margin-left:44px;margin-top:-10px}
.stars{color:var(--orange-txt);letter-spacing:2px}

/* 9. Comparatif */
.cmp{max-width:900px;margin:44px auto 0;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cmp-r{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));align-items:center;border-top:1px solid var(--line)}
.cmp-r:first-child{border-top:0}
.cmp-r span{padding:16px 18px;font-size:14.5px;text-align:center}
.cmp-r span:first-child{text-align:left;color:var(--ink);font-weight:600}
.cmp-h span{font-size:13.5px;font-weight:700;color:var(--muted)}
.cmp .own{background:#1F1F1F;color:#fff}
.cmp-h .own{color:#fff;font-family:var(--head);font-weight:800;font-size:17px}
.cmp .yes{font-weight:700}
.cmp .yes:not(.own){color:var(--ink)}
.cmp .own.yes{color:#FF9A70}
.cmp .no{color:var(--muted)}

/* 10. FAQ */
.faq{margin-top:40px;display:flex;flex-direction:column;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 24px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-weight:600;color:var(--ink);font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 12px;height:12px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details p{padding:0 0 20px;font-size:15.5px}

/* 11. Demande */
.final{background:#1F1F1F;border-radius:32px;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;box-shadow:0 50px 100px -40px rgba(255,101,45,.6);color:#D4D4D4}
.final h2{color:#fff;font-size:clamp(30px,3.6vw,48px)}
.final-txt p{margin-top:16px;font-size:17px}
.final-tel{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;font-family:var(--head);font-weight:800;font-size:28px;color:#fff;border-bottom:2px solid var(--orange)}
.wizard{background:#fff;border-radius:24px;padding:28px;color:var(--text)}
.wz-top{display:flex;align-items:center;gap:14px;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:18px}
.wz-bar{flex:1;height:6px;border-radius:9px;background:var(--panel);overflow:hidden}
.wz-bar i{display:block;height:100%;width:33%;background:var(--orange);border-radius:9px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.wz-step{border:0;padding:0;margin:0;display:none;flex-direction:column;gap:14px}
.wz-step.on{display:flex;animation:drop .45s cubic-bezier(.2,.8,.2,1)}
.wz-step legend{font-family:var(--head);font-weight:800;font-size:22px;color:var(--ink);margin-bottom:12px;padding:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choices label{position:relative}
.choices input{position:absolute;opacity:0}
.choices span{display:flex;align-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.choices input:checked+span{border-color:var(--orange);background:var(--orange-soft)}
.choices input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.wz-step>label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.wz-step input:not([type=radio]):not([type=checkbox]){font:500 16px/1.4 var(--body);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;padding:13px 14px;background:var(--bg);outline:none}
.wz-step input:focus{border-color:var(--orange);background:#fff}
.wz-step .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;color:var(--text)}
.check input{width:18px;height:18px;margin-top:2px;flex:0 0 18px;accent-color:var(--orange)}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.wz-nav .btn-orange{margin-left:auto}
.wz-ok{background:#E8F6EE;color:#14532D;border-radius:14px;padding:16px;font-weight:600;margin-top:10px}

/* 12. Pied de page */
.foot{padding:70px 0 100px;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px}
.foot-brand img{height:22px;width:auto}
.foot-brand p{margin-top:14px;font-size:14.5px;max-width:34ch}
.badges{display:flex;align-items:center;gap:14px;margin-top:20px}
.badges img{height:40px;width:auto}
.badges img.wide{height:22px}
.foot-col{display:flex;flex-direction:column}
.foot-col p{font-weight:700;color:var(--ink);margin-bottom:6px}
.foot-col a{display:flex;align-items:center;min-height:40px;font-size:14.5px}
.foot-col a:hover{color:var(--ink)}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* Apparition au défilement (légère, façon Framer) */
.rv{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.rv.in{opacity:1;transform:none;filter:none}
.no-js .rv{opacity:1;transform:none;filter:none}

.mbar{display:none}

@media (max-width:1000px){
  .nav-links{display:none}
  .final{grid-template-columns:minmax(0,1fr)}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  body{font-size:15px}
  .wrap{padding:0 18px}
  .nav-wrap{padding:0 12px;top:8px}
  .nav{padding:8px 8px 8px 20px;gap:10px}
  .nav-cta{font-size:12px;padding:10px 14px}
  .wa{width:44px;height:44px;flex-basis:44px}
  .hero{padding:44px 0 10px}
  .pills li{font-size:13px}
  .btn{white-space:normal;text-align:center}
  .hero-cta .btn{width:100%}
  .sec{padding:64px 0}
  .plan-tag{position:static;display:inline-block;margin-bottom:12px}
  .plans,.svc,.nums,.reviews{grid-template-columns:minmax(0,1fr)}
  .plan{padding:24px}
  .cmp-r{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}
  .cmp-r span{padding:12px 8px;font-size:12.5px}
  .cmp-h span{font-size:12.5px}
  .cmp-h .own{font-size:13px}
  .final{padding:28px 20px;border-radius:24px}
  .wizard{padding:20px}
  .choices{grid-template-columns:minmax(0,1fr)}
  .foot-in{grid-template-columns:minmax(0,1fr)}
  body{padding-bottom:78px}
  .mbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(250,250,250,.97);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
}

@media (max-width:720px){.marquee-set{gap:40px;padding-right:40px}.marquee img{height:calc(var(--h,40) * .72px)}}

/* Logos des services */
.svc-logos{display:flex;gap:8px;margin-bottom:14px}
.svc-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.svc-i .svc-t{display:block;font-size:14.5px;margin-top:4px}

/* ============ 3. Plateforme : aperçu de l'espace client ============ */
.stage-sec{padding:40px 0 30px}
.stage{background:#141414;border-radius:28px;padding:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.45);color:#E8E8E8}
.stage-bar{display:flex;align-items:center;gap:7px;padding:4px 6px 14px}
.stage-bar span{width:11px;height:11px;border-radius:50%;background:#3A3A3A}
.stage-bar b{margin-left:12px;font-weight:600;font-size:14px;color:#fff}
.stage-bar em{margin-left:auto;font-size:12.5px;color:#BDBDBD;border:1px solid #333;border-radius:999px;padding:4px 10px}
.pf{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:12px}
.pf>*{background:#1C1C1C;border-radius:20px;padding:18px;min-width:0}
.pf-client{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #2A2A2A}
.pf-client img{width:40px;height:40px;border-radius:12px;background:#fff;padding:4px;object-fit:contain}
.pf-client b{display:block;color:#fff;font-size:14.5px}
.pf-client span{font-size:12.5px;color:#BDBDBD}
.pf-nav{display:flex;flex-direction:column;gap:2px;margin:12px 0}
.pf-nav span{font-size:13.5px;color:#BDBDBD;padding:8px 10px;border-radius:10px}
.pf-nav span.on{background:#262626;color:#fff;font-weight:600}
.pf-new{display:flex;justify-content:center;align-items:center;min-height:42px;border-radius:12px;background:var(--orange);color:var(--ink);font-weight:700;font-size:13.5px}
.pf-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.pf-h b{color:#fff;font-size:16px}
.pf-h span{font-size:12.5px;color:#BDBDBD}
.orders{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.orders li{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,170px);gap:12px;align-items:center;background:#232323;border-radius:14px;padding:12px;transition:background .4s,box-shadow .4s}
.orders li.flash{background:#2B2420;box-shadow:inset 0 0 0 1px rgba(255,101,45,.45)}
.o-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.o-t b{display:block;color:#fff;font-size:14px}
.o-s{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#FFB08F;margin-top:2px}
.o-s::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);animation:pulse 2s infinite}
.o-s.ok{color:#7EE2A8}.o-s.ok::before{background:#22C55E;animation:none}
.o-s.wait{color:#FFD27A}.o-s.wait::before{background:#F5B53D}
.o-p i{display:block;height:6px;border-radius:9px;background:#333;overflow:hidden}
.o-p em{display:block;height:100%;background:var(--orange);border-radius:9px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.o-p small{display:block;font-size:12.5px;color:#BDBDBD;margin-top:6px}
.o-btn{border:0;border-radius:10px;background:var(--orange);color:var(--ink);font:700 12.5px/1 var(--body);padding:10px 14px;cursor:default;justify-self:end}
.o-btn.clicked{transform:scale(.94);background:#22C55E}
.pf-right{display:flex;flex-direction:column;gap:12px;background:none!important;padding:0!important;position:relative}
.pf-card{background:#1C1C1C;border-radius:20px;padding:16px}
.pf-l{font-size:12.5px;color:#BDBDBD;margin-bottom:10px}
.pf-exp{display:flex;align-items:center;gap:10px}
.pf-exp .face{width:44px;height:44px;flex:0 0 44px}
.pf-exp b{display:block;color:#fff;font-size:14px}
.pf-exp span{font-size:12.5px;color:#7EE2A8;display:flex;align-items:center;gap:6px}
.on-dot{width:7px;height:7px;border-radius:50%;background:#22C55E}
.pf-acts{display:flex;gap:8px;margin-top:12px}
.pf-acts span{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:#fff;background:#262626;border-radius:10px;padding:9px 6px}
.pf-inv{display:flex;justify-content:space-between;align-items:center}
.pf-inv b{color:#fff;font-size:14px}
.paid{font-size:12.5px;font-weight:700;color:#0B3B1F;background:#7EE2A8;border-radius:999px;padding:3px 9px}
.pf-card small{display:block;font-size:12.5px;color:#BDBDBD;margin-top:6px}
.pf-toast{position:absolute;left:0;right:0;bottom:-6px;display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-radius:14px;padding:12px 14px;font-size:13.5px;font-weight:600;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s}
.pf-toast.show{opacity:1;transform:none}
.pf-toast i{width:24px;height:24px;border-radius:50%;background:#22C55E;color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;flex:0 0 24px}

/* ============ 4. Catalogue (esprit plateforme) ============ */
.catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.prod{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s;min-width:0}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.prod-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.prod-tag{font-size:12.5px;font-weight:700;color:#8A3208;background:var(--orange-soft);border-radius:999px;padding:4px 10px;white-space:nowrap}
.prod h3{font-size:19px;font-weight:800;margin-top:16px}
.prod h3 a:hover{color:var(--orange-txt)}
.prod p{font-size:14.5px;margin-top:6px;flex:1}
.prod-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.02em;transition:background .2s}
.prod-cta:hover{background:var(--orange);color:var(--ink)}
.svc-logos{display:flex;gap:8px}
.svc-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* ============ 6. Étapes animées ============ */
.steps{list-style:none;padding:0;margin:52px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}
.steps::before{content:"";position:absolute;top:21px;left:12%;right:12%;height:2px;background:var(--line-2)}
.steps::after{content:"";position:absolute;top:21px;left:12%;height:2px;width:0;background:var(--orange);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.steps[data-on="2"]::after{width:25.3%}.steps[data-on="3"]::after{width:50.6%}.steps[data-on="4"]::after{width:76%}
.step{position:relative;z-index:1;background:var(--panel);border-radius:22px;padding:0 16px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:background .4s,box-shadow .4s,transform .4s;min-width:0}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--line-2);font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink);transition:.4s}
.step h3{font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:-0.015em;margin-top:14px;line-height:1.3}
.step>p{margin-top:4px;font-size:14px}
.step.act{background:#fff;box-shadow:var(--shadow);transform:translateY(-4px)}
.step.act .step-n,.step.done .step-n{background:var(--orange);border-color:var(--orange)}
.art{position:relative;height:196px;width:100%;margin-top:14px;border-radius:16px;background:rgba(255,255,255,.7);overflow:hidden}
.step.act .art{background:var(--panel)}
.tag{position:absolute;font-size:12.5px;font-weight:700;border-radius:9px;padding:7px 11px;white-space:nowrap;opacity:0;transform:translateY(8px) scale(.9);transition:.35s}
.tag-o{background:var(--orange);color:var(--ink);box-shadow:0 12px 26px -12px rgba(255,101,45,.8)}
.tag.show{opacity:1;transform:none}
/* étape 1 : la demande qui s'écrit */
.req{position:absolute;inset:10px 10px 44px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px;text-align:left;display:flex;flex-direction:column;gap:3px}
.req-l{font-size:12.5px;color:var(--muted)}
.req-v{display:block;min-height:40px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35;border:1px solid var(--line-2);border-radius:9px;padding:6px 8px;margin-bottom:4px}
.caret{display:inline-block;width:2px;height:14px;background:var(--orange);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.req-chip{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--orange-soft);border-radius:999px;padding:4px 10px;transition:transform .3s}
.req-chip.pop{animation:chip .4s}
@keyframes chip{50%{transform:scale(1.12)}}
.req-send{position:absolute;left:12px;right:12px;bottom:-36px;text-align:center;font-size:12.5px;font-weight:700;color:#fff;background:var(--ink);border-radius:9px;padding:8px;transition:transform .15s,background .3s}
.req-send.press{transform:scale(.95);background:var(--orange);color:var(--ink)}
.art-form .sent{right:10px;top:10px}
/* étape 2 : l'expert qui étudie */
.study{position:absolute;inset:10px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px;text-align:left}
.study-h{display:flex;align-items:center;gap:10px}
.study-h .face{width:40px;height:40px;flex:0 0 40px}
.study-h b{display:block;font-size:13px;color:var(--ink);line-height:1.3}
.dots{display:inline-flex;gap:3px;margin-top:3px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--orange);animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.study-l{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.study-l li{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--panel);border-radius:8px;padding:7px 8px;display:flex;align-items:center;gap:6px;transition:.35s}
.study-l li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 14px;transition:.35s}
.study-l li.ok{color:var(--ink);background:var(--orange-soft)}
.study-l li.ok::before{background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%231A1A1A' stroke-width='3'/%3E%3C/svg%3E") center/10px no-repeat;border-color:var(--orange)}
/* étape 3 : la proposition qui arrive, le clic, le tampon */
.env{position:absolute;left:50%;top:14px;width:140px;transform:translate(-50%,-160%) rotate(-8deg);transition:transform .7s cubic-bezier(.2,.9,.25,1.2)}
.env.in{transform:translate(-50%,0) rotate(-3deg)}
.art-prop .doc{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:12px;display:flex;flex-direction:column;gap:7px;text-align:left}
.art-prop .doc b{font-size:12.5px;color:var(--ink)}
.art-prop .doc i{display:block;height:6px;border-radius:4px;background:var(--line-2)}
.art-prop .doc i.s{width:60%}
.doc-btn{margin-top:4px;text-align:center;font-size:12.5px;font-weight:700;background:var(--ink);color:#fff;border-radius:8px;padding:6px;transition:.2s}
.doc-btn.press{transform:scale(.92);background:#22C55E;color:#0B3B1F}
.plane{position:absolute;left:-30px;top:60px;opacity:0}
.plane.fly{animation:fly 1s ease-out forwards}
@keyframes fly{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(260px,-70px) rotate(-10deg)}}
.cur{position:absolute;right:18%;bottom:10px;opacity:0;transition:transform .6s ease,opacity .3s}
.cur.go{opacity:1;transform:translate(-44px,-54px)}
.art-prop .stamp{position:absolute;left:50%;top:70px;font-family:var(--head);font-weight:900;font-size:20px;color:var(--orange-txt);border:3px solid var(--orange-txt);border-radius:9px;padding:2px 10px;background:rgba(255,255,255,.92);opacity:0;transform:translateX(-20%) rotate(-14deg) scale(1.6);transition:.35s cubic-bezier(.2,.8,.2,1)}
.art-prop .stamp.show{opacity:1;transform:translateX(-20%) rotate(-14deg) scale(1)}
/* étape 4 : la prestation qui avance */
.deliv{position:absolute;inset:14px 12px auto;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:12px;text-align:left}
.deliv-h{display:flex;justify-content:space-between;align-items:baseline}
.deliv-h b{font-size:13px;color:var(--ink)}
.deliv-h span{font-family:var(--head);font-weight:800;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.deliv-bar{display:block;height:8px;border-radius:9px;background:var(--panel);margin:8px 0 10px;overflow:hidden}
.deliv-bar em{display:block;height:100%;width:0;background:var(--orange);border-radius:9px}
.deliv-s{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.deliv-s li{font-size:12.5px;font-weight:600;color:var(--muted);text-align:center;padding:5px 2px;border-radius:7px;background:var(--panel);transition:.3s;line-height:1.2}
.deliv-s li.on{background:var(--orange-soft);color:var(--ink)}
.deliv-s li.ok{background:#E3F6EA;color:#14532D}
.art-deliv .tilt{right:14px;bottom:12px;font-size:15px;padding:8px 14px;transform:rotate(-12deg) scale(.6)}
.art-deliv .tilt.show{transform:rotate(-12deg) scale(1)}
.steps-dots{display:none}

/* ============ 7. Résultats ============ */
.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.case{background:var(--panel);border-radius:22px;padding:24px;display:flex;flex-direction:column;min-width:0}
.case-top{display:flex;flex-direction:column;gap:10px;min-height:74px}
.case-top img{height:34px;width:auto;max-width:150px;object-fit:contain;object-position:left}
.case-name{font-family:var(--head);font-weight:800;font-size:22px;color:var(--ink);line-height:34px}
.case-top span{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.case-what{font-size:14.5px;margin-top:12px;flex:1}
.case-num{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.case-num b{display:block;font-family:var(--head);font-weight:900;font-size:clamp(30px,3vw,42px);color:var(--ink);line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.case-num span{display:block;font-weight:600;color:var(--ink);margin-top:6px;font-size:14.5px}

/* ============ 8. Avis Google qui défilent ============ */
.gsum{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;text-align:left}
.gsum b{display:block;font-family:var(--head);font-weight:800;font-size:26px;color:var(--ink)}
.gsum span{font-size:15px;color:var(--text)}
.gsum strong{color:var(--ink)}
.gstars{color:#FBBC04;letter-spacing:1px}
.gmarq{margin-top:34px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gtrack{display:flex;width:max-content;animation:scroll 70s linear infinite}
.gmarq:hover .gtrack{animation-play-state:paused}
.gset{display:flex;gap:14px;padding-right:14px}
.grev{margin:0;width:340px;flex:0 0 340px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px}
.grev-h{display:flex;align-items:center;gap:10px}
.grev-h>div{flex:1;min-width:0}
.grev-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:0 0 38px}
.grev-h b{display:block;color:var(--ink);font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grev-h .gstars{font-size:13px}
.grev blockquote{margin:12px 0 0;font-size:14.5px;line-height:1.55;color:var(--text);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.grev-src{font-size:12.5px;color:var(--muted);margin-top:10px}

/* ============ 9. Comparatif ============ */
.vs{max-width:980px;margin:44px auto 0;position:relative}
.vs-r{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));align-items:center}
.vs-r+.vs-r{border-top:1px solid var(--line)}
.vs-head{border-top:0!important}
.vs-k{padding:18px 16px;font-weight:600;color:var(--ink);font-size:15px}
.vs-c{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;text-align:center;font-size:13.5px;font-weight:600;color:var(--muted)}
.vs-c small{font-size:12.5px;font-weight:500}
.vs-own{background:#1F1F1F;color:#fff}
.vs-own small{color:#FFB08F;font-weight:700}
.vs-head .vs-c{padding:22px 8px}
.vs-head .vs-own{border-radius:22px 22px 0 0}
.vs-head .vs-own img{height:18px;width:auto;filter:brightness(0) invert(1)}
.vs-r:last-child .vs-own{border-radius:0 0 22px 22px}
.vs::before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc((100% - 0px) * 1 / 4.5);border-radius:22px;box-shadow:0 30px 60px -24px rgba(255,101,45,.55);pointer-events:none}
.vs-r:not(.vs-head):hover{background:#fff}

/* ============ 11. Demande ============ */
.final-l{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px}
.final-l li{display:flex;gap:10px;color:#fff;font-weight:500}
.final-l li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%231A1A1A' stroke-width='3'/%3E%3C/svg%3E") center/11px no-repeat;margin-top:3px}
.final-punch{margin-top:26px;font-family:var(--head);font-weight:800;font-size:20px;color:#fff;opacity:.85}
.wz-step select{font:500 16px/1.4 var(--body);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;padding:13px 12px;background:var(--bg)}

/* ============ Badges du pied de page ============ */
.badges img.b-g{height:56px}
.badges img.b-fn{height:52px}

/* ============ Responsive des nouveaux blocs ============ */
@media (max-width:1100px){
  .pf{grid-template-columns:minmax(0,1fr) 250px}
  .pf-side{display:none}
  .catalog,.cases{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps::before,.steps::after{display:none}
}
@media (max-width:720px){
  .stage{padding:10px;border-radius:22px}
  .pf{grid-template-columns:minmax(0,1fr)}
  .pf>*{padding:12px}
  .orders li{grid-template-columns:40px minmax(0,1fr);padding:10px}
  .o-p{grid-column:1/-1}
  .o-btn{justify-self:start}
  .pf-right{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pf-card{padding:12px}
  .pf-acts{flex-direction:column}
  .pf-toast{position:static;grid-column:1/-1;display:none}
  .pf-toast.show{display:flex}
  .catalog,.cases{grid-template-columns:minmax(0,1fr)}
  .prod{padding:18px}
  /* étapes : carrousel horizontal qui avance tout seul, avec les animations */
  .steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:30px -18px 0;padding:6px 18px 10px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 84%;scroll-snap-align:center;transform:none!important}
  .steps-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
  .steps-dots i{width:8px;height:8px;border-radius:9px;background:var(--line-2);transition:.3s}
  .steps-dots i.on{width:22px;background:var(--orange)}
  .grev{width:280px;flex-basis:280px}
  .vs-r{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}
  .vs-k{padding:12px 8px;font-size:12.5px}
  .vs-c{padding:10px 4px;font-size:12.5px}
  .vs-c small{display:none}
  .vs-head .vs-own img{height:12px}
  .vs::before{display:none}
}
.gstars{display:inline-flex;gap:1px;vertical-align:-2px}
.o-btn{min-height:40px}
.prod h3 a{display:inline-flex;align-items:center;min-height:40px}

/* retouches étapes */
.env{transform:translate(-50%,0) rotate(-3deg)}
.env.out{transform:translate(-50%,-160%) rotate(-8deg);transition:none}
.art-form .sent{left:10px;right:10px;top:auto;bottom:10px;text-align:center}
.study-l li{white-space:nowrap}
.deliv-s{grid-template-columns:repeat(2,minmax(0,1fr))}
.badges img.b-g{height:78px;margin:-12px -6px}
.vs-r{align-items:stretch}
.vs-k{display:flex;align-items:center}
.vs-c{justify-content:center}
.req-send.gone{opacity:0}
@media (max-width:720px){.pf-right{grid-template-columns:minmax(0,1fr)}.pf-acts{flex-direction:row}}
.badges{flex-wrap:wrap;row-gap:10px}

/* ============ 3 bis. Espace client façon application (v4) ============ */
.app-glow{position:relative;padding:28px;border-radius:36px;background:radial-gradient(600px 300px at 12% 0%,rgba(48,148,193,.22),transparent 70%),radial-gradient(700px 360px at 95% 100%,rgba(255,101,45,.25),transparent 70%),#F1F1F1}
.app{background:#fff;border-radius:22px;border:1px solid #E6E6E6;box-shadow:0 40px 90px -40px rgba(26,26,26,.45),0 2px 6px rgba(0,0,0,.04);overflow:hidden;color:var(--text)}
.app-top{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);background:#FBFBFB}
.app-dots{display:flex;gap:6px}.app-dots i{width:11px;height:11px;border-radius:50%;background:#E3E3E3}
.app-dots i:first-child{background:#FF6B5E}.app-dots i:nth-child(2){background:#FFC23D}.app-dots i:nth-child(3){background:#35C759}
.app-url{flex:1;max-width:360px;margin:0 auto;text-align:center;font-size:12.5px;color:var(--muted);background:#F1F1F1;border-radius:8px;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-ex{font-size:12.5px;font-weight:600;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px}
.app-body{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:430px}
.app-side{border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:16px;background:#FCFCFC}
.app-client{display:flex;align-items:center;gap:10px}
.app-client img{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);padding:4px;object-fit:contain;background:#fff}
.app-client b{display:block;color:var(--ink);font-size:14.5px}.app-client span{font-size:12.5px;color:var(--muted)}
.app-nav{display:flex;flex-direction:column;gap:3px}
.app-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:10px;font:600 13.5px/1.2 var(--body);color:var(--text);cursor:pointer;min-height:40px;transition:background .2s,color .2s}
.app-nav button i{font-style:normal;width:18px;text-align:center;color:var(--muted)}
.app-nav button em{margin-left:auto;font-style:normal;font-size:12.5px;background:var(--panel);border-radius:999px;padding:1px 8px;color:var(--ink)}
.app-nav button:hover{background:var(--panel)}
.app-nav button.on{background:var(--ink);color:#fff}.app-nav button.on i{color:var(--orange)}.app-nav button.on em{background:var(--orange);color:var(--ink)}
.app-exp{margin-top:auto;display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:14px;padding:10px}
.app-exp .face{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 42px}
.app-exp b{display:block;color:var(--ink);font-size:13.5px}.app-exp span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#15803D;font-weight:600}
.on-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.app-main{position:relative;padding:20px;overflow:hidden}
.view{display:none}.view.on{display:block;animation:drop .45s cubic-bezier(.2,.8,.2,1)}
.v-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.v-h b{display:block;font-family:var(--head);font-weight:800;font-size:20px;color:var(--ink)}
.v-h span{font-size:13px;color:var(--muted)}
.v-btn{border:0;border-radius:999px;background:var(--orange);color:var(--ink);font:700 13px/1 var(--body);padding:11px 16px;min-height:40px;cursor:pointer;white-space:nowrap}
.slider{height:330px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);mask-image:linear-gradient(180deg,#000 80%,transparent)}
.o-track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;transition:transform .7s cubic-bezier(.65,0,.35,1)}
.o-track li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"ic t s" "ic bar bar";column-gap:12px;row-gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.o-track li.new{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.o-ic{grid-area:ic;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.o-t{grid-area:t;min-width:0}.o-t b{display:block;color:var(--ink);font-size:14.5px}.o-t small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-track .o-s{grid-area:s;font-size:12.5px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--orange-soft);color:#8A3208;white-space:nowrap}
.o-track .o-s::before{display:none}
.o-track .o-s.ok{background:#E3F6EA;color:#14532D}.o-track .o-s.wait{background:#FFF3D6;color:#7A4A00}
.o-bar{grid-area:bar;display:block;height:6px;border-radius:9px;background:var(--panel);overflow:hidden}
.o-bar em{display:block;height:100%;border-radius:9px;background:var(--orange)}
.o-track li .o-s.ok~.o-bar em{background:#22C55E}
.shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.shop-i{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;cursor:pointer;text-align:left;font:inherit;transition:border-color .2s,box-shadow .2s,transform .2s;min-width:0}
.shop-i:hover,.shop-i.hover{border-color:var(--orange);box-shadow:0 10px 24px -14px rgba(255,101,45,.7);transform:translateY(-2px)}
.shop-i b{font-size:13.5px;color:var(--ink);line-height:1.3}
.shop-i em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--orange-txt)}
.shop-i.picked{background:var(--orange-soft);border-color:var(--orange)}
.bills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bills li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.bills b{color:var(--ink);font-size:14px}.bills span{font-size:12.5px;color:var(--muted)}
.paid{font-style:normal;font-size:12.5px;font-weight:700;color:#14532D;background:#E3F6EA;border-radius:999px;padding:3px 10px}
.chat{display:flex;flex-direction:column;gap:10px}
.chat p{max-width:78%;padding:11px 14px;border-radius:16px;font-size:14px}
.chat .me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.chat .them{align-self:flex-start;background:var(--panel);color:var(--ink);border-bottom-left-radius:4px}
.chat-in{border:1px solid var(--line-2);border-radius:12px;padding:12px;color:var(--muted);font-size:14px}
.app-toast{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;font-size:13.5px;font-weight:600;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(12px);transition:.4s;pointer-events:none}
.app-toast.show{opacity:1;transform:none}
.app-toast i{width:22px;height:22px;border-radius:50%;background:#22C55E;display:grid;place-items:center;font-style:normal;font-size:12px}
.app-cur{position:absolute;left:60%;top:70%;opacity:0;transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none;z-index:5;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))}
.app-cur.show{opacity:1}
.app-cur.click{transform:scale(.85)}

/* étape 1 : les mots tombent dans la case */
.req-v .w{display:inline-block;animation:wdrop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes wdrop{0%{opacity:0;transform:translateY(-22px) scale(.6)}70%{opacity:1}100%{opacity:1;transform:none}}
.req-v.fill{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);transition:.3s}
.study-h .face{border-radius:50%;object-fit:cover}

@media (max-width:1000px){.shop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){
  .app-glow{padding:10px;border-radius:24px}
  .app-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .app-side{border-right:0;border-bottom:1px solid var(--line);padding:12px;gap:10px}
  .app-nav{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
  .app-nav::-webkit-scrollbar{display:none}
  .app-nav button{flex:0 0 auto;width:auto;white-space:nowrap}
  .app-exp{display:none}
  .app-url{display:none}
  .app-main{padding:14px}
  .slider{height:300px}
  .o-track li{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ic t" "ic s" "bar bar";padding:10px 12px}
  .o-track .o-s{justify-self:start}
  .v-h b{font-size:17px}
  .v-btn{display:none}
  .shop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bills li{grid-template-columns:minmax(0,1fr) auto}
  .bills span{display:none}
}

.app{position:relative}

/* ============ v5 : orange lisible (texte blanc), relief, micro-animations ============ */
:root{--orange-btn:#D2440C;--orange-btn-hi:#E8521A}
/* aplats orange porteurs de texte : blanc sur orange foncé (4,6:1) */
.btn-orange,.v-btn,.pf-new,.plan-tag{background:var(--orange-btn);color:#fff}
.btn-orange:hover,.v-btn:hover{background:#B83A09}
.btn .ico{background:var(--orange-btn);color:#fff}
.tag-o{background:var(--orange-btn);color:#fff}
.prod-cta:hover{background:var(--orange-btn);color:#fff}
.step.act .step-n,.step.done .step-n{background:var(--orange-btn);border-color:var(--orange-btn);color:#fff}
.app-nav button.on em{background:var(--orange-btn);color:#fff}
.dot-live{background:var(--orange-btn)}
/* relief : boutons avec lumière en haut et ombre portée douce */
.btn-dark{background-color:#1A1A1A;background-image:linear-gradient(180deg,#2A2A2A,#141414);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 26px -12px rgba(0,0,0,.55)}
.btn-orange,.v-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px -12px rgba(210,68,12,.7)}
.btn-light{box-shadow:inset 0 -1px 0 rgba(0,0,0,.04),0 6px 16px -10px rgba(0,0,0,.25)}
.prod,.case,.step,.grev{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -22px rgba(0,0,0,.35)}
/* reflet qui traverse les boutons d'action */
.btn,.prod-cta,.v-btn{position:relative;overflow:hidden;isolation:isolate}
.btn-dark::after,.btn-orange::after,.prod-cta::after,.v-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%);transform:translateX(-120%);animation:shine 4.5s ease-in-out infinite}
.btn-orange::after,.v-btn::after{z-index:0;pointer-events:none}
@keyframes shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.btn:hover .ico svg,.prod-cta:hover span{animation:nudge .6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}
.btn:active{transform:translateY(1px) scale(.98)}
/* titres qui arrivent mot par mot */
h2 .hw{display:inline-block;opacity:0;transform:translateY(28px) rotate(2deg);filter:blur(6px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1),filter .7s}
h2.hin .hw{opacity:1;transform:none;filter:none}
.no-js h2 .hw{opacity:1;transform:none;filter:none}

/* étapes : numéro décollé du haut, carte qui réagit au survol */
.steps{margin-top:60px}
.step{padding-top:22px}
.steps::before,.steps::after{top:43px}
.step:hover{cursor:pointer}
.steps-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:40px}
/* étape 1 : défilé des objectifs */
.art-form{height:230px}
.wants{position:absolute;left:0;right:0;top:10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.wants-t{display:flex;gap:6px;width:max-content;animation:scroll 22s linear infinite}
.wants-t span{font-size:12.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:5px 10px;white-space:nowrap}
.wants-t span:nth-child(3n+1){background:var(--orange-soft);border-color:transparent;color:#8A3208}
.art-form .req{top:46px}
/* étape 4 : courbe de résultats qui se dessine */
.art-deliv{height:230px}
.kpi-mini{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:8px 10px;display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(8px);transition:.4s}
.kpi-mini.show{opacity:1;transform:none}
.kpi-mini span{font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.kpi-mini svg{flex:1;height:30px}
.kpi-mini path{stroke-dasharray:140;stroke-dashoffset:140}
.kpi-mini.show path{transition:stroke-dashoffset 1.4s ease;stroke-dashoffset:0}
.art-deliv .tilt{bottom:58px}

/* messagerie avec avatars */
.msg{display:flex;align-items:flex-end;gap:10px}
.msg.me{justify-content:flex-end}
.mav{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(0,0,0,.3)}
.mav.logo{object-fit:contain;background:#fff;padding:3px;border:1px solid var(--line)}
.bub{max-width:72%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.45}
.bub small{display:block;font-size:12.5px;font-weight:700;margin-bottom:3px;opacity:.75}
.msg.me .bub{background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.them .bub{background:var(--panel);color:var(--ink);border-bottom-left-radius:4px}
.chat-in{display:flex;justify-content:space-between;align-items:center}
.chat-in span{font-size:12.5px;font-weight:700;color:#fff;background:var(--orange-btn);border-radius:999px;padding:6px 12px}
.app-ex{color:var(--ink)}
@media (max-width:720px){.steps{margin-top:34px}.bub{max-width:80%}}
.chat .msg{background:none!important;padding:0;max-width:none;border-radius:0;color:inherit}

/* ============ v6 : un seul orange Webomane (#E55300) partout ============ */
:root{--orange:#E55300;--orange-btn:#E55300;--orange-txt:#E55300;--orange-soft:#FFEFE5}
.btn-orange:hover,.v-btn:hover{background:#C94A00}
.btn-orange,.v-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 30px -12px rgba(229,83,0,.7)}
.plan-dark,.final{box-shadow:0 50px 100px -40px rgba(229,83,0,.55)}
.tag-o{box-shadow:0 12px 26px -12px rgba(229,83,0,.8)}
.prod-tag,.wants-t span:nth-child(3n+1){color:#9A3A00}
.o-track .o-s{color:#9A3A00}
em{font-weight:600}

/* cartes de service façon Fiverr : vraie réalisation en vignette */
.prod{padding:0;overflow:hidden}
.prod-img{position:relative;aspect-ratio:16/10;background:var(--panel);overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.prod:hover .prod-img img{transform:scale(1.06)}
.prod-img .prod-tag{position:absolute;top:10px;left:10px;background:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.25)}
.prod-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.prod-body .svc-ic{width:40px;height:40px;border-radius:12px}
.prod-body .svc-ic svg{width:22px;height:22px}
.prod h3{margin-top:12px}
.prod{display:flex;flex-direction:column}
.prod-body p{flex:1}
/* maquette de fiche Google (pas de faux chiffres) */
.gmock{position:absolute;inset:14% 12%;background:#fff;border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);padding:12px;display:flex;flex-direction:column;gap:8px}
.gm-h{display:flex;align-items:center;gap:8px}.gm-h b{font-size:13.5px;color:var(--ink);flex:1}
.gm-open{font-style:normal;font-size:12.5px;font-weight:700;color:#15803D}
.gm-r{display:flex;align-items:center;gap:8px}.gm-r em{font-style:normal;font-size:12.5px;color:var(--muted);font-weight:500}
.gm-b{display:flex;gap:6px}.gm-b span{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:#1A73E8;border:1px solid #DADCE0;border-radius:999px;padding:4px 0}
.gm-ok{align-self:flex-start;font-size:12.5px;font-weight:700;color:#fff;background:#15803D;border-radius:999px;padding:3px 10px;animation:okpop 3s ease-in-out infinite}
@keyframes okpop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* vignettes réelles dans l'application */
.o-ic img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.o-ic:has(img){overflow:hidden}
/* barres de livraison vivantes : reflet qui glisse en continu */
.o-bar em,.deliv-bar em,.wz-bar i{position:relative;overflow:hidden;background-image:linear-gradient(90deg,var(--orange),#FF7A2E);}
.o-bar em::after,.deliv-bar em::after,.wz-bar i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 10px,rgba(255,255,255,.35) 10px 18px);background-size:40px 100%;animation:stripes 1s linear infinite}
@keyframes stripes{to{background-position:40px 0}}
.o-track li .o-s.ok~.o-bar em{background-image:linear-gradient(90deg,#16A34A,#22C55E)}
.o-track li .o-s.ok~.o-bar em::after{animation:none;opacity:0}

/* étape 1 : l'objectif s'écrit en continu dans la case */
.art-form{height:196px}
.art-form .req{top:10px}
.req-v{min-height:44px}
/* étape 3 : les lignes de la proposition s'écrivent */
.pl{display:block;font-size:12.5px;color:var(--text);min-height:17px;border-bottom:1px dashed var(--line-2);padding-bottom:2px;white-space:nowrap;overflow:hidden}
.pl::before{content:"✓ ";color:var(--orange);font-weight:800;opacity:0;transition:.3s}
.pl.done::before{opacity:1}
/* étape 4 : le statut en grand */
#delLab{font-family:var(--head);font-weight:800;font-size:16px;color:var(--ink);transition:.3s}
#delLab.bump{animation:chip .4s}

/* résultats qui défilent tout seuls */
.cases-m{margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.cases-t{display:flex;width:max-content;animation:scroll 40s linear infinite}
.cases-m:hover .cases-t{animation-play-state:paused}
.cases-m .cases{display:flex;gap:14px;margin:0;padding-right:14px}
.cases-m .case{width:300px;flex:0 0 300px}
@media (max-width:720px){.cases-m .case{width:260px;flex-basis:260px}}
.prod-body{padding-top:0}
.prod-top{margin-top:-22px;position:relative;z-index:2}
.prod-body .svc-ic{border:3px solid #fff;box-shadow:0 8px 18px -8px rgba(0,0,0,.35);width:46px;height:46px}
.prod h3{margin-top:10px}

/* ============ v7 ============ */
/* catalogue sans vignette */
.prod{padding:0}
.prod-body{padding:22px}
.prod-top{margin-top:0}
.prod-body .svc-ic{border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);width:48px;height:48px}
/* étape 1 : la case et le bouton, bien espacés */
.art-form .req{inset:14px 12px auto;display:flex;flex-direction:column;gap:6px;padding:14px}
.art-form .req-v{min-height:62px;font-size:14px;display:flex;align-items:flex-start;flex-wrap:wrap}
.art-form .req-send{position:static;margin-top:8px;padding:11px;border-radius:10px;font-size:13px;transition:background .3s,transform .15s}
.req-send.sent{background:#16A34A;color:#fff}
.req-send.sent::before{content:"✓ "}
/* étape 4 : orange quand l'étape est en cours, vert quand elle est finie */
.deliv-s li{transition:background .35s,color .35s,transform .35s}
.deliv-s li.on{background:var(--orange);color:#fff;transform:scale(1.04)}
.deliv-s li.ok{background:#16A34A;color:#fff}
.o-bar em{transition:width .7s linear}
.art-deliv .tilt{display:none}
.deliv.done .deliv-bar em{background-image:linear-gradient(90deg,#16A34A,#22C55E)}
.deliv.done .deliv-bar em::after{opacity:0}
.art-form{height:176px}
/* étape 1 : le bloc suit la hauteur de son contenu, le bouton ne touche plus le bas */
.art-form{height:auto;padding:14px 12px 16px}
.art-form .req{position:relative;inset:auto}
.art-form .req-send.press{transform:scale(.97)}
/* bandes défilantes : jamais écrasées à la largeur de l'écran (utile dans WordPress) */
.marquee-track,.gtrack,.cases-t{width:max-content!important;max-width:none!important;flex-wrap:nowrap}
.marquee-set,.gset,.cases-m .cases{flex:0 0 auto!important;width:max-content!important;max-width:none!important}
.marquee img,.grev,.cases-m .case{flex-shrink:0}