/* ═══════════════════════════════════════════════════════════════════════
   Datakö Distribution — distribution de carburant

   Le cockpit et la ventilation sont construits en DOM, pas en captures.
   Trois raisons : le site est bilingue et une capture ne se traduit pas ;
   le texte reste net à tout zoom ; et M3 a besoin d'animer les lignes une
   par une, ce qu'une image ne permet pas.
   ═══════════════════════════════════════════════════════════════════════ */

.dist-breadcrumb {
    padding-block: 22px;
    border-bottom: 1px solid var(--color-line);
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.dist-breadcrumb a { color: inherit; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.dist-hero { padding-block: clamp(56px, 7vw, 88px) clamp(64px, 8vw, 104px); }

.dist-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 6vw, 92px);
    align-items: center;
    perspective: 1700px;
}

.dist-status {
    display: inline-block;
    margin-bottom: 20px;
    padding: 7px 14px;
    border: 1px solid var(--color-line-strong);
    border-radius: 999px;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
}

.dist-hero h1 {
    margin: 0 0 22px;
    font-size: var(--type-h1);
    font-weight: 400;
    letter-spacing: var(--tracking-h1);
    line-height: 1.02;
}

.dist-screen {
    margin: 0;
    padding: 22px;
    border: 1px solid var(--color-line);
    border-radius: 18px;
    background: var(--color-navy);
    color: var(--color-on-navy);
    box-shadow: var(--shadow-raised);
    opacity: 0;
    transform: rotateY(-3.2deg) rotateX(1.4deg) translateY(14px);
    transition: transform 1100ms var(--ease-out), opacity 760ms ease;
}

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

.dist-hero.is-settled:hover .dist-screen { transition: transform 380ms var(--ease-out); }

.dist-screen-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.dist-screen-head b { color: rgba(255, 255, 255, .78); font-weight: 500; }

.dist-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1px;
    background: rgba(255, 255, 255, .1);
}

.dist-kpi {
    padding: 22px 18px;
    background: var(--color-navy);
}

.dist-kpi span {
    display: block;
    margin-bottom: 10px;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.dist-kpi b {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    font-weight: 400;
    letter-spacing: -.02em;
    /* Chiffres tabulaires : les montants ne dansent pas d'une ligne à l'autre. */
    font-variant-numeric: tabular-nums;
}

.dist-kpi-accent b { color: #63d9b8; }

.dist-screen figcaption {
    margin-top: 18px;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
}

/* ── Constat ──────────────────────────────────────────────────────── */
.dist-problem-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(48px, 7vw, 100px);
    align-items: start;
}

.dist-problem-grid h2 {
    margin: 0 0 20px;
    font-size: var(--type-h2);
    font-weight: 400;
    letter-spacing: var(--tracking-h2);
    line-height: 1.04;
}

.dist-pain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pain;
}

.dist-pain-list li {
    display: grid;
    grid-template-columns: 3.5ch 1fr;
    gap: 20px;
    padding-block: 20px;
    border-top: 1px solid var(--color-line);
    color: var(--color-ink-soft);
    counter-increment: pain;
}

.dist-pain-list li::before {
    content: "0" counter(pain);
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .1em;
    color: var(--color-ink-muted);
}

/* ── M3 · le moteur réglementaire ─────────────────────────────────── */
.dist-engine-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }

.dist-engine-head h2 {
    margin: 0 0 18px;
    color: var(--color-on-navy);
    font-size: var(--type-h2);
    font-weight: 400;
    letter-spacing: var(--tracking-h2);
    line-height: 1.04;
}

.dist-engine-head p { margin: 0; color: rgba(255, 255, 255, .68); max-width: 62ch; }

.dist-engine-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}

.dist-entry-label,
.dist-output-head span {
    display: block;
    margin-bottom: 18px;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9eb0ff;
}

.dist-fields { margin: 0; padding: 0; list-style: none; }

.dist-fields li {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-block: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .55);
    font-size: .92rem;
    opacity: .3;
    transform: translateY(6px);
    transition: opacity 420ms ease, transform 520ms var(--ease-out);
}

.dist-fields li.is-current,
.dist-fields li.is-complete,
.dist-fields.is-complete li { opacity: 1; transform: none; }

.dist-fields b { color: var(--color-on-navy); font-weight: 500; font-variant-numeric: tabular-nums; }

.dist-entry-note {
    margin-top: 22px;
    color: rgba(255, 255, 255, .5);
    font-size: .88rem;
}

.dist-output {
    padding: clamp(20px, 2.4vw, 30px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
}

.dist-ventilation { margin: 0; padding: 0; list-style: none; }

/* Chaque ligne attend son tour : elle n'apparaît qu'au moment où le champ
   qui la déclenche est saisi. C'est le lien de cause à effet. */
.dist-ventilation li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 14px;
    align-items: center;
    padding-block: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .62);
    font-size: .88rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 460ms ease, transform 560ms var(--ease-out);
}

.dist-ventilation li.is-filled { opacity: 1; transform: none; }

.dist-ventilation b {
    color: var(--color-on-navy);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.dist-tag {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-family: "IBM Plex Mono", monospace;
    font-size: .58rem;
    font-style: normal;
    font-weight: 500;
}

.dist-tag-a { background: rgba(158, 176, 255, .18); color: #9eb0ff; }
.dist-tag-b { background: rgba(99, 217, 184, .16); color: #63d9b8; }
.dist-tag-c { background: rgba(255, 196, 120, .16); color: #ffc478; }

.dist-totals {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease, transform 700ms var(--ease-out);
}

.dist-totals.is-filled { opacity: 1; transform: none; }

.dist-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-block: 9px;
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
}

.dist-totals b { color: var(--color-on-navy); font-weight: 500; font-variant-numeric: tabular-nums; }

.dist-total-kept {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.dist-total-kept b { color: #63d9b8; font-size: 1.15rem; }

.dist-engine-foot {
    margin: clamp(32px, 4vw, 52px) 0 0;
    max-width: 66ch;
    color: rgba(255, 255, 255, .58);
    font-size: .92rem;
}

/* ── Chaîne ───────────────────────────────────────────────────────── */
.dist-chain-head { margin-bottom: clamp(36px, 4vw, 56px); }

.dist-chain-head h2 {
    margin: 0;
    font-size: var(--type-h2);
    font-weight: 400;
    letter-spacing: var(--tracking-h2);
    line-height: 1.04;
}

.dist-chain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-line);
    border: 1px solid var(--color-line);
}

.dist-chain-grid li {
    padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2vw, 26px);
    background: var(--color-surface);
}

.dist-chain-grid span {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--type-label);
    letter-spacing: .12em;
    color: var(--color-accent);
}

.dist-chain-grid h3 {
    margin: 16px 0 10px;
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: -.01em;
}

.dist-chain-grid p { margin: 0; color: var(--color-ink-soft); font-size: .92rem; line-height: 1.55; }

/* ── Preuve économique ────────────────────────────────────────────── */
.dist-proof { background: var(--color-bone); }

.dist-proof-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: clamp(48px, 6vw, 90px);
    align-items: center;
}

.dist-proof-grid h2 {
    margin: 0 0 20px;
    font-size: var(--type-h2);
    font-weight: 400;
    letter-spacing: var(--tracking-h2);
    line-height: 1.04;
}

.dist-result-card {
    padding: clamp(26px, 3vw, 38px);
    border: 1px solid var(--color-line-strong);
    border-radius: 14px;
    background: var(--color-surface);
}

.dist-result-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 15px;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink-soft);
}

.dist-result-row b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dist-result-row b.is-negative { color: #c0523c; }
.dist-result-row b.is-positive { color: var(--color-success); }

.dist-result-total { border-bottom: 0; font-size: 1.06rem; }
.dist-result-total b { font-size: 1.35rem; }

.dist-result-card p {
    margin: 18px 0 0;
    color: var(--color-ink-muted);
    font-size: .82rem;
    line-height: 1.5;
}

/* ── Rôles ────────────────────────────────────────────────────────── */
.dist-roles h2 {
    margin: 0 0 clamp(36px, 4vw, 54px);
    font-size: var(--type-h2);
    font-weight: 400;
    letter-spacing: var(--tracking-h2);
    line-height: 1.04;
}

.dist-roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(28px, 3vw, 44px);
}

.dist-roles-grid h3 {
    margin: 0 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--color-line-strong);
    font-size: 1.05rem;
    font-weight: 500;
}

.dist-roles-grid p { margin: 0; color: var(--color-ink-soft); font-size: .92rem; line-height: 1.55; }

/* ── CTA ──────────────────────────────────────────────────────────── */
.dist-cta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: end;
}

.dist-cta h2 {
    margin: 0;
    color: var(--color-on-navy);
    font-size: var(--type-h1);
    font-weight: 400;
    letter-spacing: var(--tracking-h1);
    line-height: 1.02;
}

.dist-cta p { margin: 0 0 24px; color: rgba(255, 255, 255, .68); }

/* ── Adaptations ──────────────────────────────────────────────────── */
@media (max-width: 1099px) {
    .dist-screen,
    .dist-hero.is-settled .dist-screen { transform: none; }
}

@media (max-width: 900px) {
    .dist-hero-grid,
    .dist-problem-grid,
    .dist-engine-grid,
    .dist-proof-grid,
    .dist-cta-grid { grid-template-columns: 1fr; }

    .dist-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

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

/* ── Réf 04 · le trajet de caméra ──────────────────────────────────────
   La condition posée en analysant cette référence : la caméra bouge pour
   répondre à une question, pas pour faire joli. Elle va chercher deux
   chiffres précis, puis recule et se tait définitivement.

   Réalisable ici parce que le cockpit est du DOM. Sur une capture à 44 Ko
   l'agrandissement la réduirait en bouillie — c'est pour ça que le hero
   Fleet garde la version sobre, sans zoom.

   Court par nécessité : M3 porte la vraie démonstration plus bas sur cette
   même page. Deux approches, ~2 s, puis repos. Jamais de boucle. */
/* Le cadre ne bouge pas — c'est le contenu qui se déplace derrière lui.
   Premier essai raté : en transformant .dist-screen, le panneau grandissait
   par-dessus le H1. Or le titre lisible à tout instant est la contrainte de
   base. Une vraie caméra garde son cadre et déplace la scène. */
.dist-screen { overflow: clip; }

.dist-kpi-grid { transform-origin: center center; }

.dist-hero[data-travelling] .dist-kpi-grid {
    transition: transform 1150ms var(--ease-out);
}

/* Péréquation est en haut à droite, Position TVA en bas à gauche : on tire
   la grille dans la direction opposée pour amener la cellule au centre. */
.dist-hero[data-travelling="1"] .dist-kpi-grid {
    transform: scale(1.22) translate(-12%, 6%);
}

.dist-hero[data-travelling="2"] .dist-kpi-grid {
    transform: scale(1.22) translate(12%, -6%);
}

.dist-hero[data-travelling="0"] .dist-kpi-grid {
    transform: scale(1) translate(0, 0);
}

/* La carte visée reste nette, les autres s'effacent : le regard sait où aller. */
.dist-hero[data-travelling] .dist-kpi { transition: opacity 500ms ease; }

.dist-hero[data-travelling="1"] .dist-kpi:not([data-focus="1"]),
.dist-hero[data-travelling="2"] .dist-kpi:not([data-focus="2"]) { opacity: .28; }

/* Sous 1100px la carte visée ne tiendrait pas dans le cadre, et en mouvement
   réduit le trajet n'a pas lieu d'être. */
@media (max-width: 1099px) {
    .dist-hero[data-travelling] .dist-kpi-grid,
    .dist-hero[data-travelling="1"] .dist-kpi-grid,
    .dist-hero[data-travelling="2"] .dist-kpi-grid { transform: none; transition: none; }
    .dist-hero[data-travelling] .dist-kpi { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .dist-hero[data-travelling] .dist-kpi-grid,
    .dist-hero[data-travelling="1"] .dist-kpi-grid,
    .dist-hero[data-travelling="2"] .dist-kpi-grid { transform: none; transition: none; }
    .dist-hero[data-travelling] .dist-kpi { opacity: 1 !important; }
}