.page-fleet { background:var(--color-canvas); }
.fleet-breadcrumb { padding:94px 0 18px; border-bottom:1px solid var(--color-line); color: var(--color-ink-soft); font-family:"IBM Plex Mono",monospace; font-size:.67rem; letter-spacing:.08em; }
.fleet-breadcrumb a { color:inherit; }
.fleet-hero { position:relative; padding:70px 0 96px; overflow:hidden; }
.fleet-hero::after { content:""; position:absolute; right:-190px; top:-100px; width:620px; height:620px; border:1px solid var(--color-line); border-radius:50%; opacity:.5; }
.fleet-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr); gap:clamp(54px,7vw,100px); align-items:start; }
.fleet-status { display:inline-flex; align-items:center; gap:9px; color:var(--color-success); font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; }
.fleet-status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in srgb,currentColor 13%,transparent); }
.fleet-hero h1 { margin:20px 0 0; color:var(--color-ink); font-size: var(--type-h1); font-weight: 400; letter-spacing: var(--tracking-h1); line-height: 1.02; }
.fleet-hero .site-lead { margin:28px 0 0; }
.fleet-screen { width:100%; max-width:760px; min-width:0; padding:9px; border:1px solid var(--color-line); border-radius:20px; background:#0a0a0a; box-shadow:0 30px 70px rgba(3,46,58,.2); overflow:hidden; justify-self:center; }
.fleet-screen img { width:100%; height:auto; aspect-ratio:1906/988; object-fit:cover; object-position:left top; border-radius:12px; display:block; image-rendering:auto; }
.fleet-screen figcaption { padding:12px 8px 4px; color:#8fa5ac; font-family:"IBM Plex Mono",monospace; font-size:.59rem; letter-spacing:.08em; text-transform:uppercase; }

.fleet-problem-grid { padding-top:40px; border-top:1px solid var(--color-line-strong); display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(54px,8vw,120px); }
.fleet-problem-copy h2,.fleet-features-head h2,.fleet-proof-head h2,.fleet-results h2,.fleet-offers h2,.fleet-roadmap h2 { margin:0; color:var(--color-ink); font-size: var(--type-h2); font-weight: 400; letter-spacing: var(--tracking-h2); line-height: 1.04; }
.fleet-problem-copy p { max-width:590px; margin-top:22px; }
.fleet-pain-list { border-top:1px solid var(--color-line); counter-reset:pain; }
.fleet-pain-list li { padding:19px 0; border-bottom:1px solid var(--color-line); display:grid; grid-template-columns:44px 1fr; gap:20px; color:var(--color-ink-soft); }
.fleet-pain-list li::before { counter-increment:pain; content:"0" counter(pain); color:var(--color-accent); font-family:"IBM Plex Mono",monospace; font-size:.68rem; }

.fleet-features { background:var(--color-canvas-soft); }
.fleet-features-head { margin-bottom:45px; display:flex; align-items:end; justify-content:space-between; gap:50px; }
.fleet-features-head p { max-width:470px; margin:0; }
.fleet-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fleet-feature { min-height:330px; padding:0; border:1px solid var(--color-line); border-radius:15px; background:var(--color-surface); overflow:hidden; display:flex; flex-direction:column; }
.fleet-feature-label { color:var(--color-ink-muted); font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; }
.fleet-feature-visual { min-height:142px; padding:24px; border-bottom:1px solid var(--color-line); background:var(--color-canvas-soft); display:grid; place-items:center; }
.fleet-feature-copy { padding:26px; display:flex; flex:1; flex-direction:column; }
.fleet-feature h3 { margin:18px 0 10px; color:var(--color-ink); font-size:1.5rem; }
.fleet-feature p { margin:0; }
.fleet-feature-svg { width:min(100%,240px); height:auto; overflow:visible; }
.fleet-feature-svg path,.fleet-feature-svg circle,.fleet-feature-svg rect { vector-effect:non-scaling-stroke; }
.fleet-feature.is-visible .fleet-feature-svg .motion-stroke { stroke-dasharray:240; stroke-dashoffset:240; animation:fleet-draw 900ms var(--ease-out) forwards; }
.vehicle-status-demo { width:min(100%,230px); display:grid; gap:10px; }
.vehicle-status-demo div { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; }
.vehicle-status-demo i { height:13px; border-radius:3px; background:#8fa5ac; }
.vehicle-status-demo div:first-child i { background:#2560c9; }
.vehicle-status-demo span { height:5px; border-radius:3px; background:var(--color-line-strong); }
.vehicle-status-demo small { font-family:"IBM Plex Mono",monospace; font-size:.58rem; color:var(--color-ink-muted); }
.vehicle-status-demo div:first-child small { color:var(--color-success); }
.vehicle-status-demo div:last-child small { color:#b26b00; }
.cost-bars-demo { width:190px; height:92px; display:flex; align-items:flex-end; justify-content:center; gap:9px; }
.cost-bars-demo i { width:23px; height:var(--h); border-radius:3px 3px 0 0; background:#8fa5ac; }
.cost-bars-demo i:nth-child(3) { background:#c6401f; }
@keyframes fleet-draw { to { stroke-dashoffset:0; } }

.fleet-whatsapp { overflow:hidden; }
.fleet-whatsapp-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(50px,7vw,100px); align-items:center; }
.fleet-whatsapp h2 { margin:16px 0 22px; color:white; font-size: var(--type-h2); font-weight: 400; letter-spacing: var(--tracking-h2); line-height: 1.04; }
.fleet-whatsapp-list { margin-top:30px; border-top:1px solid rgba(255,255,255,.14); }
.fleet-whatsapp-list li { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.12); color:#a8bec4; }
.fleet-whatsapp-list strong { color:white; }
.fleet-execution { display:grid; grid-template-columns:minmax(360px,.98fr) minmax(260px,.72fr); gap:34px; align-items:center; }
.phone-shell { width:100%; max-width:410px; min-height:650px; margin:auto; padding:14px; border:8px solid #1e292e; border-radius:46px; background:#07161b; box-shadow:0 28px 70px rgba(0,0,0,.4); display:flex; flex-direction:column; }
.phone-top { padding:9px 8px 14px; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:10px; color:white; }
.phone-avatar { width:30px; height:30px; border-radius:50%; background:#075e54; display:grid; place-items:center; font-size:.65rem; }
.phone-top small { display:block; color:#8fa5ac; }
.chat-flow { padding:20px 3px 5px; display:grid; gap:11px; }
.chat-flow p { width:88%; margin:0; padding:13px; border-radius:8px; background:#202e34; color:#e9edef; font-size:.84rem; line-height:1.4; }
.chat-choice { margin-left:auto!important; background:#075e54!important; color:#d7fff4!important; }
.chat-flow [data-sequence-step] { opacity:.32; transform:translateY(5px); transition:opacity 360ms ease,transform 420ms var(--ease-out); }
.chat-flow [data-sequence-step].is-current,.chat-flow [data-sequence-step].is-complete,.chat-flow.is-complete [data-sequence-step] { opacity:1; transform:none; }
.phone-composer { margin-top:auto; padding:12px 15px; border-radius:22px; background:#202e34; color:#8fa5ac; font-size:.78rem; }
.fleet-control-card { padding:24px; border:1px solid rgba(79,209,219,.35); border-radius:12px; background:#0b2130; }
.fleet-control-card > span { color:#4fd1db; font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.11em; text-transform:uppercase; }
.control-row { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:18px; color:#a8bec4; font-size:.86rem; }
.control-row strong { color:white; }

.fleet-proof-head { margin-bottom:42px; display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:end; }
.fleet-proof-head p { margin:0; }
.proof-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:start; }
.proof-step { opacity:.38; transform:translateY(12px); transition:opacity 460ms ease,transform 600ms var(--ease-out); }
.proof-step.is-current,.proof-step.is-complete,.proof-flow.is-complete .proof-step { opacity:1; transform:none; }
.proof-step-head { margin-bottom:13px; display:flex; gap:12px; align-items:center; color:var(--color-ink); font-weight:600; }
.proof-step-head span { color:var(--color-accent); font-family:"IBM Plex Mono",monospace; font-size:.68rem; }
.proof-screen { width:100%; min-height:620px; aspect-ratio:9/15.5; padding:14px; border:7px solid #20282c; border-radius:40px; background:#f7f9f9; color:#082f3a; box-shadow:var(--shadow-soft); }
.proof-screen-dark { background:#07161b; color:#e9edef; }
.proof-screen-top { padding:10px; border-bottom:1px solid currentColor; opacity:.55; font-size:.72rem; }
.proof-message { margin:18px 8px; padding:15px; border-radius:8px; background:#243139; color:#edf5f5; font-size:.77rem; }
.proof-link { display:block; margin-top:14px; padding:10px; border-top:1px solid rgba(255,255,255,.12); color:#4fd1db; text-align:center; }
.receipt-card { margin:14px 4px; padding:16px; border:1px solid #dce4e6; border-radius:10px; background:white; }
.receipt-card h4 { margin:0 0 14px; }
.receipt-line { padding:8px 0; border-bottom:1px solid #e4eaec; display:flex; justify-content:space-between; gap:15px; font-size:.72rem; }
.receipt-field { margin-top:15px; padding:11px; border:1px solid #dce4e6; border-radius:6px; color:#789097; font-size:.72rem; }
.receipt-submit { margin-top:10px; padding:11px; border-radius:6px; background:linear-gradient(90deg,var(--color-accent),var(--color-violet)); color:white; text-align:center; font-weight:600; font-size:.74rem; }
.proof-success { margin:24px 5px 16px; padding:28px 18px; border:1px solid #b9dfc9; border-radius:10px; background:#ebf8f0; text-align:center; }
.proof-success strong { display:block; margin:12px 0; }
.proof-alert { margin:14px 5px; padding:17px; border:1px solid #ead6b5; border-radius:9px; background:#fff8ed; }
.proof-alert strong { color:#b35d1e; }

.fleet-results { background:var(--color-canvas-soft); }
.result-grid { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--color-line-strong); }
.result-item { min-height:245px; padding:30px 28px 25px 0; border-right:1px solid var(--color-line); }
.result-item + .result-item { padding-left:28px; }
.result-item:last-child { border-right:0; }
.result-item span { color:var(--color-accent); font-family:"IBM Plex Mono",monospace; font-size:.65rem; }
.result-item h3 { margin:48px 0 10px; color:var(--color-ink); font-size:1.45rem; }

.fleet-offers h2 { color:white; }
.fleet-offers-head { margin-bottom:45px; display:grid; grid-template-columns:1fr .8fr; gap:70px; align-items:end; }
.fleet-offers-head p { margin:0; }
.offer-table-wrap { overflow-x:auto; }
.offer-table { min-width:850px; border-collapse:collapse; width:100%; color:#e5ecef; }
.offer-table th,.offer-table td { padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.09); text-align:left; }
.offer-table th { color:white; font-size:1.1rem; }
.offer-table th:first-child,.offer-table td:first-child { width:38%; padding-left:0; }
.offer-table td { color:#a8bec4; font-size:.88rem; }
.offer-table td:not(:first-child) { font-family:"IBM Plex Mono",monospace; font-size:.72rem; }
.offer-table .included { color:#63d9b8; }
.offer-table .recommended { background:rgba(79,209,219,.06); }
.offer-note { margin-top:24px; color:#8fa5ac; font-size:.88rem; }

.fleet-roadmap-panel { padding:clamp(34px,5vw,58px); border:1px solid var(--color-line); border-radius:18px; background:var(--color-surface); display:grid; grid-template-columns:1fr .85fr; gap:70px; align-items:center; }
.fleet-roadmap h2 { font-size: var(--type-h2); font-weight: 400; }
.roadmap-status { color:#c87b24; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.11em; text-transform:uppercase; }
.roadmap-visual { position:relative; min-height:220px; display:grid; place-items:center; }
.roadmap-orbit { width:190px; height:190px; border:1px dashed var(--color-line-strong); border-radius:50%; display:grid; place-items:center; }
.roadmap-orbit::before { content:"GPS"; width:82px; height:82px; border:1px solid var(--color-line-strong); border-radius:20px; background:var(--color-canvas-soft); color:var(--color-accent); display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:.72rem; }
.roadmap-orbit i { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--color-violet); transform:translate(88px,-42px); }

@media(max-width:1050px){
 .fleet-hero-grid,.fleet-problem-grid,.fleet-whatsapp-grid,.fleet-proof-head,.fleet-roadmap-panel { grid-template-columns:1fr; }
 .fleet-screen { transform:none; }
 .fleet-feature-grid { grid-template-columns:repeat(2,1fr); }
 .fleet-execution { max-width:760px; }
 .result-grid { grid-template-columns:1fr 1fr; }
 .result-item:nth-child(2) { border-right:0; }
 .result-item:nth-child(n+3) { border-top:1px solid var(--color-line); }
 .fleet-offers-head { grid-template-columns:1fr; }
}
@media(max-width:768px){
 .fleet-breadcrumb { padding-top:92px; }
 .fleet-hero { padding-top:52px; }
 .fleet-hero h1 { font-size: var(--type-h1); font-weight: 400; }
 .fleet-features-head { align-items:flex-start; flex-direction:column; }
 .fleet-feature-grid { grid-template-columns:1fr; }
 .fleet-execution,.proof-flow,.result-grid { grid-template-columns:1fr; }
 .fleet-control-card { order:-1; }
 .result-item,.result-item + .result-item { min-height:auto; padding:28px 0; border-right:0; border-top:1px solid var(--color-line); }
 .result-item h3 { margin-top:25px; }
 .phone-shell { max-width:390px; min-height:610px; }
 .proof-screen { width:min(100%,390px); min-height:600px; margin-inline:auto; }
}
@media(prefers-reduced-motion:reduce){
 .fleet-screen,.chat-flow [data-sequence-step],.proof-step { transform:none!important; opacity:1!important; }
 .fleet-feature-svg .motion-stroke { animation:none!important; stroke-dashoffset:0!important; }
}

/* ── M3 · Le terrain remplit le cockpit ────────────────────────────────
   La légende de cette section promet déjà que « chaque réponse complète
   immédiatement une ligne de l'opération ». Le cockpit était pourtant
   affiché complet dès le départ : la promesse était écrite, jamais jouée.

   Une ligne en attente montre son intitulé et un trait à la place de la
   valeur — elle se lit comme « pas encore renseignée », pas comme un vide.
   La valeur arrive au moment exact où le terrain répond.                  */
.control-row[data-slot] > strong {
    position: relative;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 420ms ease, transform 520ms var(--ease-out);
}

.control-row[data-slot]::after {
    content: "";
    width: 26px;
    height: 1px;
    align-self: center;
    background: rgba(255, 255, 255, .28);
    transition: opacity 300ms ease;
}

.control-row[data-slot].is-filled > strong {
    opacity: 1;
    transform: none;
}

.control-row[data-slot].is-filled::after {
    opacity: 0;
}

/* La ligne qui vient de se remplir s'éclaire brièvement : c'est ce qui
   relie le message de gauche à la donnée de droite. */
.control-row[data-slot].is-filled {
    animation: control-row-land 900ms var(--ease-out);
}

@keyframes control-row-land {
    0%   { background: rgba(94, 116, 245, .16); }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .control-row[data-slot] > strong {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .control-row[data-slot]::after { display: none; }
    .control-row[data-slot].is-filled { animation: none; }
}

/* ── Réf 04 · caméra produit (version tenue) ──────────────────────────
   Le hero pose le produit ; c'est M3, plus bas, qui le démontre. La caméra
   se contente donc d'une arrivée et d'une parallaxe très courte.

   Pas de zoom, volontairement : la capture pèse 44 Ko et un agrandissement
   la réduirait en bouillie. Et l'inclinaison reste sous 2° — au-delà, les
   chiffres du tableau de bord se déforment, ce qui est contre-productif
   pour un produit dont la valeur est justement le chiffre.               */
.fleet-hero-grid { perspective: 1700px; }

.fleet-screen {
    opacity: 0;
    transform: rotateY(-3.2deg) rotateX(1.4deg) translateY(14px);
    transition: transform 1100ms var(--ease-out), opacity 760ms ease;
}

.fleet-hero.is-settled .fleet-screen {
    opacity: 1;
    transform: rotateY(calc(var(--cam-y) * 1deg)) rotateX(calc(var(--cam-x) * 1deg)) translateY(0);
}

/* La parallaxe suit le curseur : elle doit répondre, pas glisser. */
.fleet-hero.is-settled:hover .fleet-screen {
    transition: transform 380ms var(--ease-out);
}

@media (max-width: 1099px) {
    .fleet-screen { transform: none; }
    .fleet-hero.is-settled .fleet-screen { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fleet-screen,
    .fleet-hero.is-settled .fleet-screen {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- Ref 02 : le telephone traite comme objet central ------------------
   La mise en scene decidee etait un telephone tres grand, tres propre,
   incline, flottant avec beaucoup d espace autour. Il etait jusqu ici
   serre dans sa colonne, a taille modeste. La main photorealiste de la
   reference reste ecartee : elle ferait publicite d application grand
   public. */
@media (min-width: 1100px) {
    .fleet-execution {
        grid-template-columns: minmax(400px, 1fr) minmax(280px, .78fr);
        gap: clamp(48px, 5vw, 86px);
        perspective: 1900px;
    }

    .phone-shell {
        max-width: 460px;
        min-height: 700px;
        transform: rotateY(6deg) rotateX(1.5deg) translateZ(0);
        transform-origin: right center;
        box-shadow: 0 46px 110px rgba(0, 0, 0, .55), 0 6px 24px rgba(0, 0, 0, .35);
        transition: transform 900ms var(--ease-out);
    }

    /* Au survol le telephone se redresse : le regard peut lire la
       conversation sans deformation des que l attention s y porte. */
    .fleet-execution:hover .phone-shell { transform: rotateY(0deg) rotateX(0deg); }

    /* Le cockpit reste plat et net : c est lui qui porte les chiffres. */
    .fleet-control-card { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .phone-shell,
    .fleet-execution:hover .phone-shell { transform: none; transition: none; }
}