/* FleetDeck — landing v6 (cadre statique). Réplique fidèle de la référence
   landing-fleetdeck_6. CSS externalisé (CSP script-src 'self'). Le studio
   (#onb-studio) est piloté par le vrai WS (onboarding-studio.js) et stylé par
   onboarding-studio.css. Vidéo de fond retirée (CDN exclu par la CSP) → le
   dégradé de .video-bg fait le fond, comme le fallback reduced-motion. */

:root{
  --background:0 0% 100%; --foreground:222 24% 12%;
  --card:0 0% 100%; --muted:220 16% 96%; --muted-foreground:220 9% 46%;
  --border:220 16% 90%; --input:220 16% 90%;
  --primary:245 66% 60%; --on-primary:0 0% 100%;
  --accent:190 82% 42%; --on-accent:0 0% 100%;
  --ring:245 66% 60%;
  --success:158 64% 40%; --warning:38 92% 50%; --danger:0 72% 51%;
  --primary-soft:245 66% 60% / .10; --accent-soft:190 82% 42% / .12;
  --f-display:'Fustat',sans-serif; --f-ui:'Schibsted Grotesk',sans-serif; --f-body:'Inter',sans-serif; --f-mono:'JetBrains Mono',monospace;
  --radius:8px; --voile:hsl(222 40% 10% / .30);
  --vh:100dvh;
}
@supports not (height:100dvh){ :root{--vh:100vh} }

.lp-body{margin:0;font-family:var(--f-body);color:hsl(var(--foreground));background:hsl(220 20% 97%);height:var(--vh);overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation}
.lp-body button{font-family:inherit;cursor:pointer;border:0;background:none}
.lp-body :focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:6px}

.scene{position:relative;height:var(--vh);overflow:hidden;display:flex;flex-direction:column}
.video-bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:hsl(230 30% 94%)}
.video-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,hsl(220 20% 97% / .52) 0%,hsl(220 20% 97% / .20) 34%,hsl(220 20% 97% / .62) 100%)}

/* Mockups : contenu propre publié sur comptes possédés */
.mockups{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mock-pos{position:absolute}
.mp-1{left:clamp(31px,5.5vw,180px);top:13%;--tilt:-6deg}
.mp-2{right:clamp(24px,5vw,110px);top:9%;--tilt:5deg}
.device{filter:drop-shadow(0 22px 34px hsl(245 40% 30% / .24));opacity:.96}
.float-a{animation:flo 7s ease-in-out infinite}.float-b{animation:flo 8.5s ease-in-out infinite .8s}
@keyframes flo{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-12px) rotate(calc(var(--tilt,0deg) + 2deg))}}
.phone{width:clamp(150px,13vw,190px);aspect-ratio:150/312;border-radius:26px;background:hsl(222 30% 12%);padding:8px}
.phone .screen{position:relative;width:100%;height:100%;border-radius:19px;background:linear-gradient(165deg,hsl(230 40% 99%),hsl(230 30% 94%));overflow:hidden}
.punch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:hsl(222 30% 12%);z-index:2}
.ui{position:absolute;inset:0;padding:22px 10px 10px;display:flex;flex-direction:column;gap:6px}
.ui .h{font:600 8px/1 var(--f-ui);letter-spacing:.2px;color:hsl(var(--primary));display:flex;align-items:center;gap:4px}
.ui .h .hd{margin-left:auto;font:600 7px/1 var(--f-mono);color:hsl(var(--accent))}
.postcard{border-radius:8px;background:hsl(var(--primary) / .06);border:1px solid hsl(var(--primary) / .12);height:74px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:6px}
.postcard .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:hsl(0 0% 100% / .9);display:flex;align-items:center;justify-content:center}
.postcard .play::before{content:"";border-left:7px solid hsl(var(--primary));border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.postcard .cap{font:600 6.5px/1.2 var(--f-ui);color:hsl(222 30% 20%);position:relative;z-index:1}
.metricrow{display:flex;gap:5px;margin-top:2px}
.metric{flex:1;height:26px;border-radius:6px;background:hsl(var(--accent) / .1);border:1px solid hsl(var(--accent) / .14);display:flex;flex-direction:column;align-items:center;justify-content:center}
.metric b{font:700 9px/1 var(--f-display);color:hsl(var(--accent))}
.metric span{font:500 5.5px/1 var(--f-ui);color:hsl(var(--muted-foreground))}
.scan{position:absolute;left:0;right:0;height:24%;top:-30%;background:linear-gradient(180deg,transparent,hsl(var(--accent) / .2),transparent);animation:scan 3.6s ease-in-out infinite}
@keyframes scan{0%{top:-30%}60%,100%{top:110%}}

/* NAV */
nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(20px,7vw,120px)}
.logo{font-family:var(--f-ui);font-weight:400;font-size:21px;letter-spacing:-.8px;color:hsl(var(--foreground));text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.logo .lm{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));display:inline-flex;align-items:center;justify-content:center}
.logo b{font-weight:700}
.nav-badge{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:999px;padding:4px;box-shadow:0 2px 12px hsl(222 30% 20% / .08)}
.badge-dark{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,hsl(var(--primary)),hsl(var(--accent)));color:#fff;font:500 12.5px/1 var(--f-body);padding:7px 12px;border-radius:999px}
.badge-light{font:500 12.5px/1 var(--f-body);color:hsl(var(--foreground));padding:7px 14px 7px 10px}
.nav-actions{display:flex;align-items:center;gap:8px}
.btn-ghost{font-family:var(--f-ui);font-weight:500;font-size:13px;padding:9px 14px;border-radius:8px;color:hsl(var(--foreground));min-height:38px}
.btn-ghost:hover{background:hsl(var(--muted))}
.btn-solid{font-family:var(--f-ui);font-weight:500;font-size:13px;padding:9px 16px;border-radius:8px;background:hsl(var(--primary));color:#fff;min-height:38px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .18s,opacity .18s}
.btn-solid:hover{opacity:.9;transform:translateY(-1px)}

/* HERO */
.hero{position:relative;z-index:4;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(10px,3vh,36px) clamp(20px,7vw,120px) 0;justify-content:center}
.hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,4.6vw,56px);line-height:1.05;letter-spacing:-.04em;color:hsl(var(--foreground));max-width:960px}
.hero h1 .hl{display:inline-block;color:hsl(var(--primary));background:hsl(var(--primary-soft));border-radius:.16em;padding:0 .16em;transform:rotate(-2deg)}
.sub{font-family:var(--f-display);font-weight:500;font-size:clamp(14px,1.3vw,18px);letter-spacing:-.2px;color:hsl(var(--muted-foreground));max-width:680px;margin-top:clamp(14px,2.4vh,24px)}
.sub b{color:hsl(var(--foreground));font-weight:600}

/* pulse strip : télémétrie réelle, honnête */
.pulse{display:inline-flex;align-items:center;gap:14px;margin-top:16px;padding:8px 14px;border-radius:999px;background:hsl(var(--card) / .8);border:1px solid hsl(var(--border));backdrop-filter:blur(6px);font:500 11px/1 var(--f-ui);color:hsl(var(--muted-foreground))}
.pulse .pi{display:inline-flex;align-items:center;gap:5px}
.pulse .pi b{font:700 12px/1 var(--f-display);color:hsl(var(--foreground))}
.pulse .live{width:6px;height:6px;border-radius:50%;background:hsl(var(--success));box-shadow:0 0 0 3px hsl(var(--success) / .2);animation:pulse 2s infinite}
.pulse .rep{font:500 9px/1 var(--f-ui);color:hsl(var(--muted-foreground));border-left:1px solid hsl(var(--border));padding-left:12px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px hsl(var(--primary-soft))}50%{box-shadow:0 0 0 7px hsl(245 66% 60% / .04)}}

/* CHAT BOX (frame) */
.chatbox{position:relative;z-index:6;width:100%;max-width:720px;margin-top:clamp(18px,4vh,40px);margin-bottom:clamp(8px,2.5vh,26px);background:var(--voile);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:16px;padding:8px;display:flex;flex-direction:column;border:1px solid hsl(0 0% 100% / .24);box-shadow:0 18px 50px hsl(222 40% 12% / .24)}
.cb-top{display:flex;align-items:center;justify-content:space-between;font:500 12px/1 var(--f-ui);color:#fff;padding:6px 10px 10px}
.cb-top .left{display:flex;align-items:center;gap:8px}
.upg{background:#fff;color:hsl(var(--primary));font:600 11px/1 var(--f-ui);padding:5px 10px;border-radius:8px}
.cb-top .right{display:flex;align-items:center;gap:6px;opacity:.92}
.cb-card{background:hsl(var(--card));border-radius:12px;box-shadow:0 4px 14px hsl(222 40% 12% / .16);display:flex;flex-direction:column;padding:14px;gap:16px}
.cb-inputrow{display:flex;align-items:flex-start;gap:10px;height:60px}
.cb-inputrow input{flex:1;border:0;outline:0;font:400 13px/1.4 var(--f-body);color:hsl(var(--foreground));background:transparent;min-width:0;padding-top:7px}
.cb-inputrow input::placeholder{color:hsl(var(--muted-foreground))}
.cb-send{width:36px;height:36px;min-width:36px;border-radius:26%;background:hsl(var(--primary));display:flex;align-items:center;justify-content:center;transition:transform .15s}
.cb-send:hover{transform:scale(1.07)}.cb-send:active{transform:scale(.94)}
.cb-bottom{display:flex;align-items:center;justify-content:space-between}
.cb-actions{display:flex;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;background:hsl(var(--muted));color:hsl(222 20% 30%);font:500 12px/1 var(--f-ui);padding:8px 11px;border-radius:6px;transition:background .15s;min-height:32px}
.chip:hover{background:hsl(220 16% 92%)}.chip svg{stroke:hsl(222 20% 30%)}
.counter{font:400 12px/1 var(--f-body);color:hsl(var(--muted-foreground))}

/* FOOTER */
footer{position:relative;z-index:5;padding:8px clamp(20px,7vw,120px) calc(10px + env(safe-area-inset-bottom,0px));text-align:center}
footer .line{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px 13px;font:400 10.5px/1.6 var(--f-body);color:hsl(220 9% 55%)}
footer a{color:hsl(220 9% 55%);text-decoration:none}footer a:hover{color:hsl(var(--foreground));text-decoration:underline}

/* RESPONSIVE (cadre) */
@media(max-width:1060px){ .nav-badge .badge-light{display:none} }
@media(max-width:860px){ .mp-1{left:-24px;top:14%}.mp-2{right:-30px;top:9%} }
@media(max-width:640px){
  .logo{font-size:19px}.btn-ghost{display:none}.nav-badge{display:none}
  .device{opacity:.5;filter:drop-shadow(0 14px 22px hsl(245 40% 30% / .18)) blur(.4px)}
  .phone{width:clamp(96px,26vw,120px)}.mp-1{left:-14px;top:10%}.mp-2{display:none}
  .hero h1{font-size:clamp(26px,8vw,33px)}.sub{font-size:13.5px;margin-top:12px;max-width:92%}
  .pulse{gap:9px;font-size:10px;padding:7px 11px}.pulse .rep{display:none}
  .chatbox{margin-top:14px;margin-bottom:8px;max-width:100%}.cb-card{padding:12px;gap:12px}
  .cb-actions .chip span{display:none}
  footer .line{font-size:9.5px;gap:2px 10px}footer .line a:nth-child(n+6){display:none}
}
@media(max-height:700px){
  .hero h1{font-size:clamp(24px,4vw,42px)}.sub{margin-top:10px;font-size:14px}.pulse{margin-top:10px}.chatbox{margin-top:12px}.cb-card{gap:10px}
  nav{padding-top:10px;padding-bottom:8px}footer{padding-top:4px}.mp-1{top:21%}.mp-2{top:57%}
}
@media(prefers-reduced-motion:reduce){
  .float-a,.float-b,.scan,.pulse .live{animation:none}
  .video-bg{background:linear-gradient(165deg,hsl(230 30% 96%),hsl(230 24% 90%))}
}