/* Accueil public (templates/landing/home.html), chargé par cette seule page.
   Couleurs : variables de lobster.css (jamais d'hex en dur), transparences via color-mix. */

/* NOTE 2026-10 : lobster.css pose overflow-x:hidden sur html ET body, ce qui fait du body le conteneur de défilement
   (window.scrollY reste à 0) : Lenis et ScrollTrigger suivent la fenêtre, d'où overflow-x:clip ici (pas de conteneur créé). */
html.lm-page,
html.lm-page body {
    overflow-x: clip;
    height: auto;
}
/* Le fond sombre passe du body au html : un body opaque se peint par-dessus le canvas en z-index -1. */
html.lm-page { scroll-padding-top: 84px; background-color: var(--neutral-950); }
html.lm-page body { background-color: transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

.lm-page {
    --lm-ink: var(--neutral-0);
    --lm-muted: var(--neutral-300);
    --lm-faint: var(--neutral-400);
    --lm-bg: var(--neutral-950);
    --lm-line: color-mix(in srgb, var(--neutral-0) 9%, transparent);
    --lm-line-strong: color-mix(in srgb, var(--neutral-0) 16%, transparent);
    --lm-glass: color-mix(in srgb, var(--neutral-900) 62%, transparent);
    --lm-glass-2: color-mix(in srgb, var(--neutral-0) 4%, transparent);
    --lm-blue: var(--lobster-primary);
    --lm-cyan: var(--lobster-cyan);
    --lm-peach: var(--lobster-secondary);
    --lm-peach-2: var(--lobster-secondary-2);
    --lm-gold: var(--lobster-accent);
    --lm-deep: var(--lobster-primary-3);
    --lm-ok: color-mix(in srgb, var(--semantic-success-solid) 72%, var(--neutral-0));
    --lm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- Canvas 3D */
#lm-world {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s var(--lm-ease);
}
.lm-world-on #lm-world { opacity: 1; }
.lm-no-world #lm-world { display: none; }

/* Étiquettes accrochées aux formes 3D (positions écrites par landing.js à chaque image). */
.lm-labels { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lm-label {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    font: 500 0.72rem/1 Poppins, system-ui, sans-serif;
    color: var(--lm-ink);
    white-space: nowrap;
    background: color-mix(in srgb, var(--lm-bg) 78%, transparent);
    border: 1px solid var(--lm-line-strong);
    opacity: 0;
    will-change: transform, opacity;
}
.lm-label i { width: 0.42rem; height: 0.42rem; border-radius: 999px; background: var(--lm-cyan); }
.lm-no-world .lm-labels { display: none; }

/* Repli sans WebGL ou avec « réduire les animations » : halos fixes aux couleurs du logo. */
.lm-fallback {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: opacity 1.4s var(--lm-ease);
    background:
        radial-gradient(60% 50% at 78% 18%, color-mix(in srgb, var(--lm-blue) 22%, transparent), transparent 70%),
        radial-gradient(40% 40% at 12% 70%, color-mix(in srgb, var(--lm-peach) 14%, transparent), transparent 70%),
        radial-gradient(35% 35% at 55% 95%, color-mix(in srgb, var(--lm-cyan) 10%, transparent), transparent 70%);
}
.lm-world-on .lm-fallback { opacity: 0; }

/* Emplacements des formes 3D (data-world-slot) : vides, ils réservent la place que le monde 3D vient occuper.
   Affichés seulement quand le monde peut tourner (lm-motion posée avant le premier rendu), sinon aucun trou dans la page. */
.lm-slot { display: none; min-height: 22rem; height: 44vh; }
.lm-motion .lm-slot { display: block; }
.lm-slot--logo { height: 42vh; min-height: 18rem; margin-bottom: 1.5rem; }
@media (min-width: 1024px) {
    .lm-slot { height: 34rem; min-height: 0; }
    .lm-slot--sticky { position: sticky; top: calc(50vh - 17rem); align-self: start; }
    .lm-slot--logo { height: 46vh; }
}
.lm-no-world .lm-slot { display: none; }

/* ------------------------------------------------- États initiaux animés */
.lm-motion [data-split] { visibility: hidden; }
.lm-motion [data-hero-in] { opacity: 0; }
.lm-line-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* -------------------------------------------------------------- Progression */
.lm-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 60;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--lobster-brand-gradient);
    pointer-events: none;
}

/* -------------------------------------------------------------- Navigation */
.lm-page [data-lm-nav] { transition: background-color 0.4s ease, border-color 0.4s ease; }
.lm-page [data-lm-nav]:not(.is-scrolled) { background-color: transparent; border-color: transparent; }

/* --------------------------------------------------------------- Typographie */
.lm-display {
    font-family: Outfit, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.98;
    color: var(--lm-ink);
    text-wrap: balance;
}
.lm-h1 { font-size: clamp(2.9rem, 7.4vw, 6.4rem); }
.lm-h2 { font-size: clamp(2.2rem, 4.9vw, 4.25rem); line-height: 1.02; }
.lm-h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em; }
.lm-lead { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.65; color: var(--lm-muted); text-wrap: pretty; }
.lm-body { font-size: 0.98rem; line-height: 1.7; color: var(--lm-muted); text-wrap: pretty; }
.lm-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.lm-num { font-variant-numeric: tabular-nums; }

/* Voile sombre derrière les blocs de texte posés sur le monde 3D (lisibilité). */
.lm-scrim { position: relative; isolation: isolate; }
.lm-scrim::before {
    content: '';
    position: absolute;
    inset: -18% -14%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--lm-bg) 78%, transparent), transparent);
    pointer-events: none;
}

/* ------------------------------------------------------------------ Boutons */
.lm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    height: 3.25rem;
    padding: 0 1.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lm-btn:focus-visible { outline: 2px solid var(--lm-cyan); outline-offset: 3px; }
.lm-btn--primary {
    color: var(--neutral-0);
    background: linear-gradient(180deg, color-mix(in srgb, var(--lm-blue) 92%, var(--neutral-0)), var(--lm-deep));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--lm-cyan) 35%, transparent) inset,
        0 10px 40px -10px color-mix(in srgb, var(--lm-blue) 75%, transparent);
}
.lm-btn--primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--lm-blue) 80%, var(--neutral-0)), var(--lm-blue)); }
.lm-btn--ghost {
    color: var(--lm-ink);
    background: var(--lm-glass-2);
    border: 1px solid var(--lm-line-strong);
    backdrop-filter: blur(10px);
}
.lm-btn--ghost:hover { background: color-mix(in srgb, var(--neutral-0) 9%, transparent); border-color: color-mix(in srgb, var(--neutral-0) 28%, transparent); }
.lm-btn--sm { height: 2.5rem; padding: 0 1.1rem; font-size: 0.875rem; }
/* Sous 360 px un libellé long (russe) dépassait la colonne et overflow-x: clip le rognait : il passe à la ligne. */
@media (max-width: 359.98px) {
    .lm-btn { max-width: 100%; height: auto; min-height: 3.25rem; padding-block: 0.6rem; white-space: normal; text-align: center; }
    .lm-btn--sm { min-height: 2.5rem; padding-block: 0.4rem; }
}

/* ---------------------------------------------------------- Pastilles, puces */
.lm-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    color: var(--lm-muted);
}
.lm-check::before {
    content: '';
    width: 0.95rem;
    height: 0.95rem;
    flex: none;
    border-radius: 999px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/70% no-repeat,
        color-mix(in srgb, var(--lm-cyan) 55%, var(--lm-blue));
}
.lm-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.45rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--lm-muted);
    background: var(--lm-glass-2);
    border: 1px solid var(--lm-line);
}
.lm-tag--soon { color: var(--lm-gold); border-color: color-mix(in srgb, var(--lm-gold) 35%, transparent); }
.lm-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; }

/* ------------------------------------------------------------------- Verre */
.lm-glass {
    position: relative;
    border-radius: 1.25rem;
    border: 1px solid var(--lm-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-900) 70%, transparent), color-mix(in srgb, var(--lm-bg) 82%, transparent));
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--neutral-950) 90%, transparent), 0 0 0 1px color-mix(in srgb, var(--neutral-0) 3%, transparent) inset;
}
.lm-glass--lift { box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--lm-blue) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--neutral-0) 4%, transparent) inset; }
/* Fenêtre d'application (maquettes) */
.lm-window-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--lm-line);
    background: color-mix(in srgb, var(--neutral-0) 2.5%, transparent);
    border-radius: 1.25rem 1.25rem 0 0;
}
.lm-window-dots { display: flex; gap: 0.4rem; }
.lm-window-dots i { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--neutral-0) 14%, transparent); }
.lm-window-url {
    flex: 1;
    min-width: 0;
    max-width: 22rem;
    margin: 0 auto;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--neutral-0) 4%, transparent);
    font-size: 0.72rem;
    color: var(--lm-faint);
    text-align: center;
    /* Chemin long (file de classement) sur un téléphone : une ligne, coupée en fin, plutôt qu'une barre plus haute. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lm-perspective { perspective: 1800px; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

.lm-row {
    display: grid;
    grid-template-columns: 5.2rem 4.4rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 0.9rem;
    border-radius: 0.7rem;
    font-size: 0.78rem;
    color: var(--lm-muted);
    border: 1px solid transparent;
}
.lm-row + .lm-row { margin-top: 0.3rem; }
@media (max-width: 640px) {
    .lm-row { grid-template-columns: minmax(0, 1fr) auto; }
    .lm-row > :nth-child(1), .lm-row > :nth-child(2) { display: none; }
}
.lm-row--hi { border-color: color-mix(in srgb, var(--lm-cyan) 25%, transparent); background: color-mix(in srgb, var(--lm-cyan) 5%, transparent); }
.lm-amount-in { color: color-mix(in srgb, var(--lm-cyan) 80%, var(--neutral-0)); }
.lm-amount-out { color: var(--lm-peach-2); }
.lm-account {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--lm-ink);
    background: color-mix(in srgb, var(--neutral-0) 6%, transparent);
}

/* ----------------------------------------------------------- Défilé chaînes */
.lm-marquee { mask-image: linear-gradient(90deg, transparent, var(--lm-bg) 12%, var(--lm-bg) 88%, transparent); overflow: hidden; }
.lm-marquee-track { display: flex; width: max-content; gap: 0.75rem; animation: lm-marquee 46s linear infinite; }
.lm-marquee:hover .lm-marquee-track { animation-play-state: paused; }
@keyframes lm-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------- Étapes horizontales */
[data-hscroll] { position: relative; }
.lm-hs-track { display: flex; gap: 1.5rem; will-change: transform; }
.lm-hs-card { flex: 0 0 min(30rem, 82vw); }
.lm-hs-bar { height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: var(--lobster-brand-gradient); }
@media (max-width: 1023px) {
    .lm-hs-track { flex-direction: column; }
    .lm-hs-card { flex-basis: auto; }
    .lm-hs-bar { display: none; }
}
/* Sans mouvement (préférence, GSAP absent, filet des 6 s) la piste n'est ni épinglée ni translatée : deux cartes par ligne, sinon les étapes 3 et 4 sortaient de l'écran. */
@media (min-width: 1024px) {
    html:not(.lm-motion) .lm-hs-track { flex-wrap: wrap; }
    html:not(.lm-motion) .lm-hs-card { flex: 1 1 calc(50% - 0.75rem); }
    html:not(.lm-motion) .lm-hs-bar { display: none; }
}

/* ------------------------------------------------------- Démo chaîne d'audit */
.lm-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.lm-block {
    position: relative;
    padding: 0.7rem 0.6rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--lm-blue) 38%, transparent);
    background: color-mix(in srgb, var(--lm-blue) 7%, transparent);
    font-size: 0.68rem;
    color: var(--lm-muted);
    transition: border-color 0.4s ease, background-color 0.4s ease, transform 0.5s var(--lm-ease), color 0.4s ease;
}
.lm-block + .lm-block::before {
    content: '';
    position: absolute;
    left: -0.6rem;
    top: 50%;
    width: 0.6rem;
    height: 1px;
    background: color-mix(in srgb, var(--lm-cyan) 60%, transparent);
    transition: background-color 0.4s ease;
}
.lm-block b { display: block; font-size: 0.64rem; font-weight: 500; color: var(--lm-muted); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-block code { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.68rem; color: var(--lm-cyan); overflow: hidden; text-overflow: ellipsis; }
.lm-block.is-bad { border-color: color-mix(in srgb, var(--lm-peach) 60%, transparent); background: color-mix(in srgb, var(--lm-peach) 9%, transparent); }
.lm-block.is-bad code { color: var(--lm-peach-2); }
.lm-block.is-bad::before { background: var(--lm-peach) !important; }
.lm-block.is-edited { transform: translateY(-0.45rem) rotate(-2deg); }
.lm-chain-status { transition: color 0.3s ease; }
[data-chain-demo].is-tampered .lm-chain-status { color: var(--lm-peach-2); }
@media (max-width: 640px) { .lm-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; } .lm-block:nth-child(4)::before { display: none; } }

/* ----------------------------------------------------------------- Tarifs */
.lm-price-y, .lm-price-m { display: none; }
.lm-pricing:has(#lm-cycle-y:checked) .lm-price-y,
.lm-pricing:has(#lm-cycle-m:checked) .lm-price-m { display: inline; }
.lm-cycle input { position: absolute; opacity: 0; pointer-events: none; }
.lm-cycle label {
    cursor: pointer;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lm-muted);
    transition: background-color 0.25s ease, color 0.25s ease;
}
.lm-cycle input:checked + label { color: var(--lm-ink); background: color-mix(in srgb, var(--neutral-0) 10%, transparent); }
.lm-cycle input:focus-visible + label { outline: 2px solid var(--lm-cyan); outline-offset: 2px; }

/* -------------------------------------------------------------------- FAQ */
.lm-faq details { border-radius: 1rem; border: 1px solid var(--lm-line); background: color-mix(in srgb, var(--neutral-0) 2%, transparent); transition: border-color 0.3s ease, background-color 0.3s ease; }
.lm-faq details[open] { border-color: color-mix(in srgb, var(--lm-cyan) 28%, transparent); background: color-mix(in srgb, var(--lm-cyan) 3%, transparent); }
.lm-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; font-weight: 500; color: var(--lm-ink); }
.lm-faq summary::-webkit-details-marker { display: none; }
.lm-faq summary:focus-visible { outline: 2px solid var(--lm-cyan); outline-offset: -2px; border-radius: 1rem; }
.lm-faq summary .lm-plus { flex: none; width: 1.1rem; height: 1.1rem; position: relative; }
.lm-faq summary .lm-plus::before, .lm-faq summary .lm-plus::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; margin-top: -0.75px; background: var(--lm-muted); transition: transform 0.35s var(--lm-ease); }
.lm-faq summary .lm-plus::after { transform: rotate(90deg); }
.lm-faq details[open] .lm-plus::after { transform: rotate(0deg); }
.lm-faq .lm-answer { padding: 0 1.35rem 1.25rem; font-size: 0.94rem; line-height: 1.7; color: var(--lm-muted); }
@supports (interpolate-size: allow-keywords) {
    .lm-faq { interpolate-size: allow-keywords; }
    .lm-faq details::details-content { height: 0; overflow: clip; transition: height 0.4s var(--lm-ease), content-visibility 0.4s allow-discrete; }
    .lm-faq details[open]::details-content { height: auto; }
}

/* ---------------------------------------------------------- Rail des chapitres */
.lm-rail { position: fixed; left: 1.5rem; top: 50%; z-index: 30; transform: translateY(-50%); display: none; }
@media (min-width: 1440px) { .lm-rail { display: block; } }
.lm-rail ol { display: grid; gap: 0.95rem; margin: 0; padding: 0; list-style: none; }
.lm-rail a { display: flex; align-items: center; gap: 0.65rem; font-size: 0.75rem; color: var(--lm-faint); text-decoration: none; }
.lm-rail i { width: 0.42rem; height: 0.42rem; flex: none; border-radius: 999px; background: color-mix(in srgb, var(--neutral-0) 28%, transparent); transition: transform 0.4s var(--lm-ease), background-color 0.3s ease; }
.lm-rail span { opacity: 0; white-space: nowrap; transition: opacity 0.25s ease; }
.lm-rail a:hover span, .lm-rail a:focus-visible span, .lm-rail a.is-active span { opacity: 1; }
.lm-rail a:hover, .lm-rail a.is-active { color: var(--lm-ink); }
.lm-rail a.is-active i { background: var(--lm-cyan); transform: scale(1.6); }
.lm-rail a:focus-visible { outline: 2px solid var(--lm-cyan); outline-offset: 4px; border-radius: 4px; }

/* ------------------------------------------------------- Preuve, faits, specs */
.lm-proof { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.55; color: var(--lm-muted); text-wrap: balance; }
.lm-proof b { font-family: Outfit, system-ui, sans-serif; font-weight: 700; font-size: 1.25em; color: var(--lm-ink); font-variant-numeric: tabular-nums; }
.lm-facts > div { padding-top: 1.4rem; border-top: 1px solid var(--lm-line-strong); }
.lm-specs > div { padding: 1.4rem 0; border-top: 1px solid var(--lm-line); }
.lm-specs dt { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--lm-ink); }
.lm-specs dt svg { color: var(--lm-cyan); }
.lm-specs dd { margin: 0.45rem 0 0; font-size: 0.94rem; line-height: 1.65; color: var(--lm-muted); }

/* ------------------------------------------------------ Démos produit (iframes) */
/* Même verre que la maquette (.lm-glass) : les démos ont un fond transparent et prennent celui du cadre. */
.lm-demo {
    margin: 2.5rem 0 0;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--lm-line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-900) 70%, transparent), color-mix(in srgb, var(--lm-bg) 82%, transparent));
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--lm-blue) 30%, transparent), 0 0 0 1px color-mix(in srgb, var(--neutral-0) 3%, transparent) inset;
}
/* Même color-scheme que les démos : sinon Chromium peint un fond opaque derrière le document (blanc ou gris). */
.lm-demo iframe { display: block; width: 100%; height: var(--lm-demo-h); border: 0; background: transparent; color-scheme: dark; }
/* Sous 640 px l'iframe rétrécit et ses textes passent à la ligne : hauteur propre au téléphone, mesurée démo par démo. */
@media (max-width: 639.98px) { .lm-demo iframe { height: var(--lm-demo-h-phone, var(--lm-demo-h)); } }
/* Sous 360 px, une démo dont les libellés passent encore à la ligne a sa propre hauteur (small_height du macro), sans grandir les autres téléphones. */
@media (max-width: 359.98px) { .lm-demo iframe { height: var(--lm-demo-h-small, var(--lm-demo-h-phone, var(--lm-demo-h))); } }

/* ------------------------------------------- Schéma en trois temps des démos */
/* Requête de conteneur : la disposition suit la largeur de la colonne de la démo, pas celle de l'écran. */
.lm-flow { container-type: inline-size; position: relative; isolation: isolate; margin-top: 2.5rem; }
/* Voile propre au schéma : au-dessus de la radiographie et des justificatifs, aucun lm-scrim ne protège les libellés des particules. */
.lm-flow::before {
    content: '';
    position: absolute;
    inset: -0.75rem -1rem;
    z-index: -1;
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--lm-bg) 74%, transparent);
    filter: blur(14px);
    pointer-events: none;
}
/* Téléphone : les colonnes du monde 3D passaient sous les libellés ; media query car ce ::before appartient au conteneur lui-même. */
@media (max-width: 639.98px) {
    .lm-flow::before { inset: -1.25rem -1.5rem; background: color-mix(in srgb, var(--lm-bg) 90%, transparent); filter: blur(18px); }
}
.lm-flow + .lm-demo { margin-top: 1.25rem; }
.lm-flow ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.lm-flow li { position: relative; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
/* Miniature de la démo, même hauteur dans les trois temps pour que les libellés partent de la même ligne. */
.lm-flow-art { display: flex; align-items: center; gap: 0.4rem; height: 2.25rem; min-width: 0; }
.lm-flow-art > * { flex: none; }
.lm-flow-art .lm-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 0.6875rem; white-space: nowrap; }
.lm-flow-art .lm-tag.lm-mono { font-size: 0.625rem; }
.lm-flow-art .lm-account { gap: 0.35rem; font-size: 0.6875rem; }
.lm-flow-art .lm-legend-swatch { width: 0.5rem; height: 0.5rem; }
.lm-flow-dots { display: flex; gap: 0.3rem; }
.lm-flow-dots i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--lm-ok); }
.lm-flow-grade {
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5rem;
    font: 700 1.05rem/1 Outfit, system-ui, sans-serif;
    color: var(--lm-gold);
    background: color-mix(in srgb, var(--lm-gold) 13%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lm-gold) 45%, transparent);
}
.lm-flow-sev { display: grid; gap: 0.2rem; }
.lm-flow-sev i { display: block; height: 0.25rem; border-radius: 999px; }
.lm-flow-sev i:nth-child(1) { width: 1.6rem; background: var(--semantic-error-solid); }
.lm-flow-sev i:nth-child(2) { width: 1.25rem; background: var(--semantic-warning-solid); }
.lm-flow-sev i:nth-child(3) { width: 0.9rem; background: color-mix(in srgb, var(--lm-blue) 60%, var(--neutral-0)); }
.lm-flow-kpi { display: flex; align-items: baseline; gap: 0.3rem; font-size: 0.75rem; color: var(--lm-muted); white-space: nowrap; }
.lm-flow-kpi b { font: 700 1.15rem/1 Outfit, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--lm-ink); font-variant-numeric: tabular-nums; }
.lm-flow-score { display: grid; gap: 0.2rem; width: 2.25rem; }
.lm-flow-score i { display: block; height: 0.22rem; border-radius: 999px; background: linear-gradient(90deg, var(--lm-blue), var(--lm-cyan)) 0 0 / var(--w) 100% no-repeat, color-mix(in srgb, var(--neutral-0) 9%, transparent); }
.lm-flow-pill { padding: 0.08rem 0.45rem; border-radius: 999px; font: 600 0.6875rem/1.5 Poppins, system-ui, sans-serif; white-space: nowrap; color: var(--lm-ok); background: color-mix(in srgb, var(--semantic-success-solid) 14%, transparent); }
.lm-flow-art .lm-flow-ok { color: var(--lm-ok); }
.lm-flow-ok .lm-dot { background: var(--lm-ok); }
.lm-flow-amount { color: color-mix(in srgb, var(--lm-cyan) 80%, var(--neutral-0)); }
.lm-flow-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; border: 1px solid var(--lm-line); background: color-mix(in srgb, var(--neutral-900) 72%, transparent); }
.lm-flow-icon svg { width: 1.2rem; height: 1.2rem; fill: color-mix(in srgb, var(--lm-blue) 45%, var(--lm-deep)); }
.lm-flow-icon .lm-c { fill: var(--lm-cyan); }
.lm-flow-avatars { display: flex; }
.lm-flow-avatars i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; font: 600 0.55rem/1 Poppins, system-ui, sans-serif; font-style: normal; color: var(--lm-bg); box-shadow: 0 0 0 2px var(--lm-bg); }
.lm-flow-avatars i + i { margin-left: -0.2rem; }
.lm-flow-switch svg { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: var(--lm-cyan); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Les libellés portent l'explication : plus grands que le texte des démos, les deux premiers temps un ton sous le dernier, ce que le visiteur obtient. */
.lm-flow-label { font-size: 0.9375rem; line-height: 1.35; color: var(--lm-ink); text-wrap: balance; overflow-wrap: break-word; }
.lm-flow li:not(:last-child) .lm-flow-label { color: color-mix(in srgb, var(--lm-ink) 78%, transparent); }
/* Polices auto-hébergées sans cyrillique : une seule police système par libellé plutôt qu'un mélange lettre à lettre. */
:lang(ru) .lm-flow-label { font-family: 'Segoe UI', Roboto, 'Noto Sans', system-ui, sans-serif; }
/* Liaison en masque CSS plutôt qu'une flèche tapée (un caractère change de forme selon la police et se lit à voix haute) ; elle comble l'espace laissé par la miniature jusqu'au temps suivant. */
.lm-flow li:not(:last-child) .lm-flow-art::after {
    content: '';
    flex: 1 1 auto;
    min-width: 1.25rem;
    height: 0.625rem;
    margin: 0 -1rem 0 0.35rem;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lm-cyan) 12%, transparent), color-mix(in srgb, var(--lm-cyan) 70%, transparent));
    -webkit-mask: linear-gradient(black 0 0) left center / calc(100% - 1px) 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 0.375rem 0.625rem no-repeat;
    mask: linear-gradient(black 0 0) left center / calc(100% - 1px) 1px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 0.375rem 0.625rem no-repeat;
}
/* Sous 34rem de colonne (téléphones, portables de 1024 à 1199 px) les trois temps s'empilent, miniature à gauche du libellé : en ligne, un libellé y prenait trois lignes. */
@container (max-width: 33.99rem) {
    .lm-flow ol { grid-template-columns: minmax(0, 1fr); row-gap: 0.875rem; }
    .lm-flow li { flex-direction: row; align-items: flex-start; gap: 0.875rem; }
    .lm-flow-art { flex: none; width: 8.25rem; height: 2rem; }
    .lm-flow li:not(:last-child) .lm-flow-art::after { display: none; }
    .lm-flow-label { display: flex; align-items: center; min-height: 2rem; font-size: 0.875rem; }
    .lm-flow li:not(:last-child)::after {
        content: '';
        position: absolute;
        top: calc(2rem + 3px);
        bottom: calc(3px - 0.875rem);
        left: 0.5rem;
        width: 0.625rem;
        background: linear-gradient(180deg, color-mix(in srgb, var(--lm-cyan) 12%, transparent), color-mix(in srgb, var(--lm-cyan) 70%, transparent));
        -webkit-mask: linear-gradient(black 0 0) center top / 1px calc(100% - 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 0.625rem 0.375rem no-repeat;
        mask: linear-gradient(black 0 0) center top / 1px calc(100% - 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 0.625rem 0.375rem no-repeat;
    }
}
/* Colonne de moins de 20rem (téléphones jusqu'à 390 px) : miniature plus étroite pour laisser la place au libellé. */
@container (max-width: 19.99rem) {
    .lm-flow li { gap: 0.75rem; }
    .lm-flow-art { width: 7.5rem; }
    /* « классифицирована » dépasse sa colonne à 320 px : le mot se coupe, avec trait d'union là où le navigateur sait le faire. */
    .lm-flow-label { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
}

/* --------------------------------------------------------------- Divers */
.lm-hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--lm-line-strong), transparent); }
.lm-kpi { font-family: Outfit, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--lm-ink); font-variant-numeric: tabular-nums; }
.lm-legend-swatch { width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; flex: none; }
.lm-section { position: relative; }
.lm-solid { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lm-bg) 88%, transparent) 12%, color-mix(in srgb, var(--lm-bg) 92%, transparent) 88%, transparent); }

@media (prefers-reduced-motion: reduce) {
    .lm-marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .lm-marquee { mask-image: none; }
    .lm-block { transition: none; }
}