/* Site vitrine public (accueil, camion, techniciens) – mêmes couleurs que l'appli */
:root{--bg:#f3f2ef;--surface:#fff;--ink:#121214;--muted:#5f5e63;--line:#e2e0db;--sign:#e3261c;--ok:#16855b;--stage:#0b0b0c;--stage-ink:#f2f1ee;--stage-muted:#a9a7ad}
@media (prefers-color-scheme: dark){:root{--bg:#0d0d0e;--surface:#161618;--ink:#f2f1ee;--muted:#9d9ba1;--line:#2a2a2e;--sign:#ff3d31;--ok:#3fc58a;--stage:#050505;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Aptos","Figtree","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.55}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* en-tête */
.top{position:sticky;top:0;z-index:10;background:rgba(11,11,12,.92);backdrop-filter:blur(8px);color:var(--stage-ink);border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:68px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.top .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.top .logo img{height:44px;width:auto}
.top nav{display:flex;gap:4px;flex:1 1 auto;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--stage-muted);font-weight:700;font-size:14px;padding:10px 12px;border-radius:999px}
.top nav a:hover{color:#fff}
.top nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--sign);background:var(--sign);color:#fff;border-radius:999px;padding:10px 20px;font:inherit;font-weight:700;font-stretch:112%;text-transform:uppercase;letter-spacing:.06em;font-size:13px;text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--sign);outline-offset:3px}

/* bandeau d'ouverture */
.hero{position:relative;overflow:hidden;background:var(--stage);color:var(--stage-ink);padding:72px 0 80px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(227,38,28,.35),transparent 42%),radial-gradient(circle at 5% 110%,rgba(240,150,20,.16),transparent 45%);pointer-events:none}
.hero .wrap{position:relative;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero .txt{flex:1 1 440px;min-width:0}
.hero .vis{flex:1 1 360px;min-width:0}
.kicker{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#ff6b61;margin-bottom:14px}
h1{font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:1.02;font-size:clamp(34px,6vw,60px);margin:0 0 18px}
h1 em{font-style:normal;color:var(--sign)}
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--stage-muted);margin:0 0 28px;max-width:560px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* sections */
section.band{padding:72px 0}
section.band.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-weight:900;text-transform:uppercase;letter-spacing:.03em;line-height:1.1;font-size:clamp(26px,3.6vw,38px);margin:0 0 14px}
.sub{color:var(--muted);font-size:18px;margin:0 0 36px;max-width:680px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
section.alt .card{background:var(--bg)}
.card h3{margin:14px 0 6px;font-size:18px;font-weight:800}
.card p{margin:0;color:var(--muted)}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(227,38,28,.12);color:var(--sign)}
.ico svg{width:24px;height:24px}

/* deux grands choix sur l'accueil */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.choice{display:flex;flex-direction:column;gap:12px;text-decoration:none;background:var(--stage);color:var(--stage-ink);border-radius:20px;padding:30px;min-height:280px;position:relative;overflow:hidden}
.choice::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(227,38,28,.45),transparent 70%)}
.choice h3{position:relative;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:28px;margin:0}
.choice p{position:relative;margin:0;color:var(--stage-muted)}
.choice ul{position:relative;margin:0;padding-left:18px;color:var(--stage-ink)}
.choice .more{position:relative;margin-top:auto;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:#ff6b61}
.choice:hover .more{text-decoration:underline}

/* étapes */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:s}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
section.alt .steps li{background:var(--bg)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sign);color:#fff;font-weight:900;margin-bottom:12px}
.steps strong{display:block;font-size:17px;margin-bottom:4px}
.steps span{color:var(--muted)}

/* illustrations (faites en HTML, pas de capture) */
.mock{background:#fff;color:#121214;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;font-size:14px}
.mock .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#121214;color:#f2f1ee;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:12px}
.mock .bar i{width:8px;height:8px;border-radius:50%;background:#e3261c;display:block}
.mock .row{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid #eeece8}
.mock .row span:last-child{font-weight:700;text-align:right}
.mock .tot{display:flex;justify-content:space-between;padding:14px 16px;background:#fdecea;color:#b42318;font-weight:900;font-size:16px}
.mock .day{padding:14px 16px;border-bottom:1px solid #eeece8}
.mock .day b{display:block;font-size:15px}
.mock .day small{color:#5f5e63}
.pill{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;background:#eceaf8;color:#2d2a7a;margin-right:6px}
.pill.red{background:#fdecea;color:#b42318}
.pill.green{background:#e7f5ee;color:#0f6b47}
.phone{max-width:300px;margin:0 auto;border:10px solid #1e1e21;border-radius:38px}
.phone .mock{border-radius:26px;box-shadow:none}

/* appel final */
.cta{background:var(--stage);color:var(--stage-ink);text-align:center;padding:72px 0}
.cta p{color:var(--stage-muted);font-size:18px;margin:0 auto 26px;max-width:560px}
.cta .actions{justify-content:center}

footer{padding:28px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer a{color:var(--muted)}
@media (max-width:640px){.hero{padding:48px 0 56px}section.band{padding:52px 0}.top nav{order:3;flex-basis:100%}}