/* =========================================================
   Ship MTC — thème « Propre » des pages publiques (clair, épuré)
   Chargé après app.css. L'admin et l'app livreur restent foncés.
   ========================================================= */
:root{--noir:#ffffff;--asphalte:#ffffff;--bitume:#eceef1;--ligne:#d9dde2;--beton:#5f6670;--craie:#2b2f35;--blanc:#0f1115;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--texte:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
html,body{background:#fff;color:#0f1115;letter-spacing:-.005em}
h1,h2,h3,h4,.hero h1,.page-head h1,.sec h2,.why-sub,.lourd h3,.cta-band h2,.step h3,.feat h3{text-transform:none!important;font-family:var(--display)!important;letter-spacing:-.025em}
.site-top{background:rgba(255,255,255,.92)!important;border-bottom:1px solid #eceef1}
.brand span{letter-spacing:.02em;font-weight:700}
.nav a{color:#5f6670;font-weight:500}.nav a:hover{color:#0f1115;background:#f4f5f7}
.menu-btn{background:#f4f5f7;color:#0f1115}
.lang-btn{border-color:#d9dde2!important;color:#0f1115!important}
.btn{border-radius:12px;font-weight:600}
.btn-jaune{background:#ffcc00;color:#0f1115}.btn-jaune:hover{background:#ffd633}
.btn-noir{background:#0f1115;color:#fff}
.btn-ghost{color:#0f1115;box-shadow:inset 0 0 0 1px #d9dde2!important}
/* Héros : blanc, titre net, carte claire */
.hero{background:linear-gradient(180deg,#fafafa,#fff)}
.hero::after{display:none}
.hero h1{font-weight:800;font-size:clamp(44px,6.4vw,88px);line-height:1.02;color:#0f1115}
.hero h1 .l2{-webkit-text-stroke:0!important;color:#b9bec6!important}
.hero p.lead{color:#5f6670}
.hero .map-art{inset:auto;right:clamp(18px,4vw,64px);top:56px;bottom:56px;width:min(44vw,600px);border-radius:24px;overflow:hidden;border:1px solid #eceef1;box-shadow:0 24px 60px rgba(15,17,21,.08)}
.map-art rect{fill:#e6edf3}
.map-art .land{fill:#fff}
.map-art .street{stroke:#eef0f3}.map-art .artere{stroke:#e2e5e9}
.map-art .lbl{fill:#a3abb5}
.map-art .route{stroke:#0f1115}.map-art .route-bg{stroke:rgba(255,204,0,.45)}
.map-art .stop circle{fill:#fff;stroke:#0f1115}.map-art .stop text{fill:#0f1115}
.map-art .stop.pick circle{stroke:#f2b705}
.map-art image{filter:invert(1)}
.lmap .leaflet-tile-pane{filter:grayscale(.85) brightness(1.03) contrast(.95)!important}
.ant-mk img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) invert(1)}
.quick{border:1px solid #e3e6ea;box-shadow:0 12px 40px rgba(15,17,21,.08)!important;border-radius:18px}
.quick label{background:#f6f7f9!important}
.quick label:first-child i{background:#ffcc00}
.quick .btn{background:#ffcc00;color:#0f1115}.quick .btn:hover{background:#ffd633}
.trust{color:#5f6670}.trust b{color:#0f1115}
.marquee{display:none}
/* Sections : beaucoup d'air, cartes fines */
.sec{padding-block:clamp(56px,8vw,110px)}
.sec h2{font-weight:800}
.veh,.why .why-stats div,.why-grid article,.exp-grid article,.rev,.cat,.card{background:#fff!important;border:1px solid #eceef1!important;box-shadow:none;border-radius:18px}
.cat:hover,.veh:hover{border-color:#d9dde2!important;box-shadow:0 10px 30px rgba(15,17,21,.06)}
.why,.reviews{background:#fafafa}
.why .why-stats b{color:#0f1115!important;font-weight:800;text-transform:none}
.why-grid i,.veh .from{color:#9a7400!important}
.rev-stars,.reviews .rev-avg{color:#f2b705!important}
.rev-tag{background:#f4f5f7;color:#5f6670}
.veh svg{stroke:#0f1115;stroke-width:2.2}
.road::before{background:#f4f5f7}
.road::after{background:repeating-linear-gradient(90deg,#0f1115 0 18px,transparent 18px 30px);height:2px}
.step .num{background:#fff;color:#0f1115;border:1px solid #d9dde2;font-weight:700}
.feat article{border-top:1px solid #eceef1}
.phone{background:#0f1115}
.phone .map-art rect{fill:#e6edf3}
.lourd{background:#fff8d9;border:1px solid #f3e3a3}
.lourd h3{color:#0f1115}
.lourd img{opacity:.08}
.faq details{border-bottom:1px solid #eceef1!important}
.cta-band{background:#0f1115;color:#fff;border-radius:24px;margin:0 clamp(18px,5vw,72px) 72px}
.site-foot{background:#fafafa;color:#5f6670;border-top:1px solid #eceef1}
.site-foot h4{color:#0f1115}
@media (max-width:760px){
  .hero{align-items:start}
  .hero .map-art{position:relative;inset:auto;right:auto;top:auto;bottom:auto;width:auto;height:190px;margin:16px 18px 0;border-radius:20px}
  .hero-in{padding-top:22px}
}

/* ---------- Formulaires et réservation ---------- */
.inp{background:#fff;color:#0f1115;border:1px solid #d9dde2}
.inp:focus{border-color:#0f1115;outline:none;box-shadow:0 0 0 3px rgba(255,204,0,.35)}
.inp::placeholder{color:#9aa1aa}
.panel{background:#fff;border:1px solid #eceef1;box-shadow:0 10px 40px rgba(15,17,21,.05)}
.chip,.cat,.qopt,.veh-opt,.icon-btn,.stepper button,.seg,.tog .sw{background:#fff;border-color:#d9dde2;color:#0f1115}
.cat[aria-pressed="true"],.veh-opt[aria-pressed="true"]{background:#fffbea;border-color:#f2b705;box-shadow:inset 0 0 0 1px #f2b705}
.veh-opt .p{color:#8a6a00}
.qopt[aria-pressed="true"],.chip[aria-pressed="true"],.seg button[aria-pressed="true"]{background:#ffcc00;border-color:#ffcc00;color:#0f1115}
.qopt[aria-pressed="true"] small{color:#4a3b00}
.seg{border:1px solid #d9dde2}
.stopbody{background:#f6f7f9}
.icon-btn{border:1px solid #d9dde2}
.tog{background:#f6f7f9}.tog .sw{border:1px solid #d9dde2}.tog .sw::after{background:#c3c8cf}.tog input:checked + .sw{background:#ffcc00;border-color:#ffcc00}.tog input:checked + .sw::after{background:#0f1115}
.estim-box{background:#fffbea;border-color:#f2d36b}
.progress button.actif{color:#0f1115}
.progress button.actif::after{background:repeating-linear-gradient(90deg,#ffcc00 0 14px,#eceef1 14px 22px)}
.badge{background:#f4f5f7;color:#0f1115}
.prose h2{color:#0f1115}
.trust b,.site-foot h4,.site-foot a:hover{color:#0f1115}
.site-top.open .nav{background:#fff}
.nav a[aria-current="page"]{background:#f4f5f7;color:#0f1115}
.modal{background:rgba(15,17,21,.45)}
.modal>div{background:#fff;color:#0f1115}
.toast{background:#0f1115;color:#fff}

/* ---------- Cartes (Leaflet) et suivi ---------- */
.lmap,.lmap .leaflet-container{background:#eef1f4}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;color:#5f6670!important}
.leaflet-bar a{background:#fff!important;color:#0f1115!important;border-color:#d9dde2!important}
.map-badge{background:rgba(255,255,255,.92);color:#0f1115;box-shadow:0 4px 16px rgba(15,17,21,.12)}
.pin{background:#fff;color:#0f1115;border-color:#0f1115}
.pin.L{background:#0f1115;border-color:#0f1115;color:#fff}
.who,.timeline,.ord{background:#fff;border:1px solid #eceef1}
.avatar{background:#f4f5f7;color:#0f1115}
.tl .dot{background:#fff}
.eta .barre{background:rgba(15,17,21,.12)}.eta .barre i{background:#0f1115}
.phone .screen{background:#e6edf3}

/* ---------- Simplification ---------- */
.sub-h{font-size:20px;font-weight:800;margin:30px 0 12px;letter-spacing:-.02em}
.veh ul li:nth-child(n+3){display:none}
.call-fab{display:none}
@media (max-width:760px){
  .call-fab{display:flex;position:fixed;right:16px;bottom:calc(16px + var(--safe-b));z-index:90;align-items:center;gap:8px;background:#0f1115;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(15,17,21,.25)}
  .call-fab svg{width:18px;height:18px;color:#ffcc00}
  .site-foot{padding-bottom:calc(90px + var(--safe-b))}
}

/* ---------- Accueil inspiré « liste claire + fourgon + contact humain » ---------- */
.hero{min-height:auto;padding-bottom:30px}
.hero-in{max-width:740px}
.hero h1{font-size:clamp(42px,5.6vw,80px)!important}
.checks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:#2b2f35;font-weight:500}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#ffcc00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.proud{margin:18px 0 0;font-weight:700;font-size:16px;color:#0f1115}
.hero-van{position:absolute;z-index:3;width:min(25vw,330px);right:calc(clamp(18px,4vw,64px) + min(44vw,600px) - min(25vw,330px) + 70px);bottom:26px;filter:drop-shadow(0 18px 30px rgba(15,17,21,.12))}
.hero-van .van{width:100%;height:auto;display:block}
@media (max-width:1100px){.hero-van{display:none}}
@media (max-width:760px){.hero-van{display:block;right:22px;top:118px;bottom:auto;width:190px}}
.services .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.services article{border:1px solid #eceef1;border-radius:18px;padding:22px;background:#fff}
.svc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff6cc;color:#0f1115}
.svc-ic svg{width:24px;height:24px}
.services h3{margin:14px 0 6px;font-size:18px}
.services p{margin:0;color:#5f6670;font-size:15px;line-height:1.5}
.easy .easy-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
.easy article{border:1px solid #eceef1;border-radius:20px;padding:26px;background:#fff;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.easy article.main{background:#0f1115;color:#fff;border-color:#0f1115}
.easy article.main p{color:#c3c8cf}
.easy h3{margin:0;font-size:22px}
.easy p{margin:0 0 10px;color:#5f6670}
.easy .btn{margin-top:auto}
@media (max-width:900px){.services .svc-grid{grid-template-columns:1fr 1fr}.easy .easy-grid{grid-template-columns:1fr}}
@media (max-width:520px){.services .svc-grid{grid-template-columns:1fr}.checks li{font-size:16px}}
.from-lbl{display:block;font-size:14px;font-weight:600;color:#5f6670;letter-spacing:0;margin-bottom:2px}
.firm-note{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#fffbea;border:1px solid #f3e3a3;color:#4a3b00;font-size:14px;line-height:1.45}

/* ---------- Interactif ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.hero-van .van{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
@property --fill{syntax:"<length>";inherits:true;initial-value:0px}
.road{--fill:0px;transition:--fill var(--fill-time,0s) cubic-bezier(.45,.02,.55,.98)}
.road::after{background:linear-gradient(90deg,#0f1115 var(--fill),transparent var(--fill)),repeating-linear-gradient(90deg,#c9ced5 0 10px,transparent 10px 18px)!important;height:3px!important;animation:none!important}
.road .step{cursor:pointer;transition:transform .25s}
.road .step:hover{transform:translateY(-2px)}
.road .step .num{transition:background .3s,color .3s,border-color .3s,transform .3s}
.road .step.done .num{background:#0f1115;color:#fff;border-color:#0f1115}
.road .step.on .num{background:#ffcc00;border-color:#0f1115;transform:scale(1.08)}
.road .step p{transition:color .3s}
.road .step:not(.on) p{color:#8a919b}
.demo{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:18px;margin-top:40px;align-items:stretch}
.demo-card{border:1px solid #eceef1;border-radius:20px;padding:20px;background:#fff;box-shadow:0 12px 40px rgba(15,17,21,.06);display:flex;flex-direction:column;gap:8px}
.demo-top{display:flex;align-items:center;gap:10px}
.demo-top b{font-size:15px;letter-spacing:.02em}
.demo-tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:#f4f5f7;color:#5f6670;padding:3px 8px;border-radius:999px}
.demo-replay{margin-left:auto;border:1px solid #d9dde2;background:#fff;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;color:#0f1115}
.demo-status{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.demo[data-stage="3"] .demo-status{color:#1a8f4d}
.demo-eta{color:#5f6670;min-height:1.5em}
.demo-bar{height:6px;border-radius:3px;background:#eceef1;overflow:hidden;margin:6px 0 4px}
.demo-bar i{display:block;height:100%;width:0;background:#ffcc00;border-radius:3px}
.demo-steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.demo-steps li{display:flex;align-items:center;gap:10px;color:#9aa1aa;font-weight:600;font-size:14px;transition:color .3s}
.demo-steps li::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid #d9dde2;background:#fff;transition:all .3s}
.demo-steps li.done{color:#0f1115}.demo-steps li.done::before{background:#0f1115;border-color:#0f1115}
.demo-steps li.on{color:#0f1115}.demo-steps li.on::before{background:#ffcc00;border-color:#0f1115;box-shadow:0 0 0 4px rgba(255,204,0,.3)}
.demo-map{border:1px solid #eceef1;border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.demo-map svg{width:100%;height:auto;display:block;flex:1}
.demo-cap{margin:0;padding:14px 18px;color:#5f6670;font-size:14px;border-top:1px solid #eceef1}
@media (max-width:860px){.demo{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero-van .van{animation:none}}
.when{grid-template-columns:repeat(2,1fr)!important}
@media (max-width:520px){.when{grid-template-columns:1fr!important}}
.per-lbl{font-size:16px;font-weight:600;color:#5f6670;margin-left:4px}
#rec-days .chip{min-width:52px;justify-content:center}

/* La fourmi qui marche sur la route de « Comment ça marche » (pattes animées) */
.road-ant{position:absolute;left:0;top:0;width:56px;z-index:3;pointer-events:none;transform-origin:center;transition-property:transform,opacity;transition-timing-function:cubic-bezier(.3,.05,.4,1);will-change:transform;opacity:1}
.road-ant.hide{opacity:0;transition:opacity .35s ease!important}
.road-ant svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 2px 2px rgba(15,17,21,.2))}
.road-ant svg path,.road-ant svg polygon{fill:#0f1115}
.road-ant .cube-l{fill:none!important;stroke:#ffcc00;stroke-width:5;stroke-linecap:round}
.road-ant .eye{fill:#fff!important}
.road-ant .ant-ant,.road-ant .leg{fill:none;stroke:#0f1115;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.road-ant .far .leg{stroke:#5f6670}
.road-ant .leg{transform-box:view-box}
.road-ant .ant-speed{opacity:0;transition:opacity .25s}
.road-ant.walking .ant-speed{opacity:.55}
.road-ant.walking .leg.a{animation:legA .34s ease-in-out infinite}
.road-ant.walking .leg.b{animation:legB .34s ease-in-out infinite}
.road-ant.walking .ant-body{animation:antBob .17s ease-in-out infinite alternate}
.road-ant.walking .ant-ant{animation:antenna .68s ease-in-out infinite}
@keyframes legA{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(14deg)}}
@keyframes legB{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-16deg)}}
@keyframes antBob{to{transform:translateY(-5px)}}
@keyframes antenna{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
.road-ant .ant-ant{transform-box:view-box;transform-origin:360px 80px}
/* La bulle où se tient la fourmi : le chiffre s'efface sous elle */
.road .num{transition:color .25s,background .3s,border-color .3s,transform .3s}
.road .num.ant-here{color:transparent!important}
.road::after{transition:none}
@media (max-width:900px){
  .road::after{background:linear-gradient(180deg,#0f1115 var(--fill),transparent var(--fill)),repeating-linear-gradient(180deg,#c9ced5 0 10px,transparent 10px 18px)!important;width:3px!important;height:auto!important;left:20px!important}
  .road-ant{width:50px}
}
@media (prefers-reduced-motion:reduce){.road-ant{transition:none}.road-ant.walking *{animation:none!important}}
/* La route se termine à la dernière étape */
.road::before{right:var(--bar-end,0)!important}
.road::after{right:var(--line-end,22px)!important}
@media (max-width:900px){
  .road::before{right:auto!important;bottom:var(--bar-end,0)!important}
  .road::after{right:auto!important;bottom:var(--line-end,20px)!important}
}

/* ---------- Soumission (pas de prix automatique) ---------- */
.estim .total .promise{display:block;font-size:clamp(24px,3vw,32px);line-height:1.1}
.estim #e-lines li.opts span:last-child{text-align:right;max-width:65%}
.quote-card{border-radius:18px;padding:18px;margin-bottom:14px;display:grid;gap:6px}
.quote-card.wait{display:flex;gap:14px;background:#fff8d6;border:1px solid #f3e3a3}
.quote-card.wait .qc-ic{font-size:28px}
.quote-card.wait p{margin:6px 0}
.quote-card.wait small{color:#5f6670}
.quote-card.ready{background:#0f1115;color:#fff;text-align:center}
.quote-card.ready small{color:#c9ced5}
.qc-price{font-size:44px;font-weight:900;color:#ffcc00;line-height:1.05}
.qc-note{background:rgba(255,255,255,.08);border-radius:12px;padding:10px 12px;margin:6px 0;text-align:left}
.qc-lines{list-style:none;padding:0;margin:6px 0 10px;text-align:left;font-size:14px;color:#c9ced5;display:grid;gap:4px}
.qc-lines li{display:flex;justify-content:space-between;gap:10px}
.quote-card.ready .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.qc-foot a{color:#ffcc00}
.qc-refuse{display:grid;gap:8px;text-align:left;margin-top:6px}
.qc-refuse .field{color:#fff}
@media (max-width:1060px){.track .side>.quote-card:not(.eta):not(.who){order:1}}
.estim #e-lines li.opts{flex-wrap:wrap}
.estim #e-lines li.opts span:last-child{white-space:normal}
.qc-inc{text-align:left;background:rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;margin-top:6px}
.qc-inc ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:3px;font-size:14px;color:#e6e8eb}
/* Installer l'app livreur */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:980px;margin:0 auto}
.inst h2{margin:0 0 10px}
.inst ol{padding-left:20px;display:grid;gap:8px;margin:0 0 16px}
.inst .small{font-size:13.5px;margin:10px 0 0}
/* Suivi : nom de la route au-dessus du titre */
.route-k{display:block;font-family:var(--body,inherit);font-size:15px;font-weight:600;letter-spacing:0;color:#6b7280;margin-bottom:4px}
.rt-card{background:#fff;border:1px solid #eceef1}
.rt-st.ok{color:#15803d}