/* ====================================================================
   Documail — site vitrine
   Identité visuelle « Documail » : bleu marine + bleu ciel, accent vert
   doux, typographie Inter. Feuille autonome (le marketing tourne sur un
   service séparé, sans partager les assets du portail client).

   Police : Inter est demandée par la DA. La CSP du service interdit les
   polices externes (font-src 'self' data:) ; Inter est donc auto-
   hébergée (variable, /static/fonts/) — même origine, CSP respectée.
   Repli sur la police système moderne le temps du chargement (swap).
   ==================================================================== */

@font-face {
    font-family: "Inter";
    src: url("/static/fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Palette DA */
    --marine: #0D1B2A;       /* Bleu marine  */
    --ardoise: #334A6B;      /* Bleu ardoise */
    --ciel: #5DA9E9;         /* Bleu ciel    */
    --vert: #17B39A;         /* Vert doux    */
    --gris: #E6EBF1;         /* Gris clair   */
    --blanc-casse: #FAFBFC;  /* Blanc cassé  */

    /* Surfaces */
    --bg: var(--blanc-casse);
    --bg-subtle: #F1F4F8;
    --surface: #FFFFFF;
    --surface-hover: #F7F9FC;

    /* Encre */
    --ink: #0D1B2A;
    --ink-body: #41506A;
    --ink-muted: #76849A;
    --ink-inverse: #FFFFFF;
    --ink-inverse-soft: rgba(255, 255, 255, 0.72);
    --ink-inverse-faint: rgba(255, 255, 255, 0.52);

    /* Bordures */
    --border: #E6EBF1;
    --border-strong: #D4DDEA;

    /* Teintes douces */
    --ciel-soft: rgba(93, 169, 233, 0.12);
    --ciel-border: rgba(93, 169, 233, 0.28);
    --vert-soft: rgba(23, 179, 154, 0.12);
    --vert-border: rgba(23, 179, 154, 0.28);
    --marine-soft: rgba(13, 27, 42, 0.05);

    /* Ombres — froides, discrètes */
    --shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.05);
    --shadow-sm: 0 2px 6px rgba(13, 27, 42, 0.06);
    --shadow-md: 0 10px 24px -8px rgba(13, 27, 42, 0.14);
    --shadow-lg: 0 22px 44px -16px rgba(13, 27, 42, 0.22);
    --shadow-xl: 0 36px 70px -24px rgba(13, 27, 42, 0.30);

    /* Rayons */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    /* Animation */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --fast: 0.16s;
    --normal: 0.26s;

    --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
    /* Ancres de la nav (#tarifs, #faq…) : défilement fluide et
       atterrissage SOUS le header sticky (70px) au lieu de dessous. */
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink-body);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.62;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--ink);
    font-weight: 600;          /* Inter SemiBold — titres */
    line-height: 1.18;
    letter-spacing: -0.022em;
}

p { margin: 0; }

img, svg { display: block; }

::selection { background: var(--ciel-soft); color: var(--marine); }

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 28px;
}

/* --- En-tête ------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 251, 252, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--marine);
}

.brand__logo { height: 30px; width: auto; }

.nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14.5px;
    font-weight: 500;          /* Inter Medium — libellés UI */
    color: var(--ink-body);
}

.nav__links a { transition: color var(--fast) var(--ease); }
.nav__links a:hover { color: var(--marine); }

.nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Boutons ------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease),
                transform var(--fast) var(--ease);
}
.btn:active { transform: scale(0.985); }
.btn svg { width: 16px; height: 16px; }

.btn--primary {
    background: var(--marine);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(13, 27, 42, 0.55);
    /* Accueille le voile de paillettes (marketing-fx.js). */
    position: relative;
    overflow: hidden;
}
.btn--primary:hover {
    background: #16304a;
    color: #fff;
    box-shadow: 0 12px 24px -10px rgba(13, 27, 42, 0.6);
}

.btn--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--marine);
}
.btn--secondary:hover {
    border-color: var(--ardoise);
    background: var(--surface-hover);
}

.btn--accent {
    background: var(--vert);
    color: #fff;
    box-shadow: 0 6px 16px -8px rgba(23, 179, 154, 0.6);
}
.btn--accent:hover { background: #149983; color: #fff; }

.btn--ghost {
    background: transparent;
    color: var(--ink-body);
    padding: 11px 14px;
}
.btn--ghost:hover { color: var(--marine); background: var(--marine-soft); }

.btn--on-dark {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fff;
}
.btn--on-dark:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.34);
}

.btn--lg { padding: 14px 26px; font-size: 15.5px; }

/* --- Pilules & tags ------------------------------------------------ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ardoise);
    background: var(--ciel-soft);
    border: 1px solid var(--ciel-border);
}
.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ciel);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    color: #0E7F6E;
    background: var(--vert-soft);
    border: 1px solid var(--vert-border);
}
.tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vert);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ardoise);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.eyebrow svg { width: 14px; height: 14px; color: var(--ciel); }

/* --- Hero ---------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    top: -260px;
    right: -160px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 169, 233, 0.16), transparent 68%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
    /* Gouttière horizontale alignée sur .container — sans ça le hero
       (et l'aperçu) collent aux bords de l'écran sur mobile. */
    padding: 84px 28px 92px;
}

.hero__copy { max-width: 540px; }

.hero h1 {
    margin: 22px 0 0;
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.035em;
    color: var(--marine);
}
.hero h1 .accent { color: var(--ciel); }
/* Accroche « Gagnez du temps » : les couleurs de l'aurore (ciel <->
   vert) défilent vite DANS le texte — effet contenu, sans particules.
   (Le bloc prefers-reduced-motion global fige le défilé.)
   padding-bottom : sinon background-clip:text rogne le jambage du
   « g ». Padding vertical sur un inline -> aucune incidence sur la
   mise en page. */
.hero h1 .hero-spark {
    padding-bottom: 0.2em;
    background: linear-gradient(96deg, #5da9e9, #17b39a, #5da9e9, #17b39a, #5da9e9);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: hero-spark-flow 4.5s linear infinite;
}
@keyframes hero-spark-flow {
    to { background-position: -300% 0; }
}

.hero .lead {
    margin: 22px 0 0;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.62;
    color: var(--ink-body);
}

.hero__cta {
    margin-top: 30px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero__trust {
    margin-top: 38px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    /* Les 3 repères tiennent sur UNE ligne (grille 3 colonnes). */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.hero__trust-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: none;
}
.hero__trust-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ciel-soft);
    color: var(--ardoise);
}
.hero__trust-icon svg { width: 17px; height: 17px; }
.hero__trust-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--marine);
}
.hero__trust-desc {
    font-size: 12.5px;
    color: var(--ink-muted);
    line-height: 1.45;
}

/* --- Aperçu produit (carte du hero) -------------------------------- */
.preview {
    position: relative;
    border-radius: var(--radius-xl);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.preview::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--marine), var(--ciel) 60%, var(--vert));
}
.preview__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--blanc-casse);
}
.preview__dots { display: inline-flex; gap: 6px; }
.preview__dots span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border-strong);
}
.preview__chip {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.preview__chip svg { width: 13px; height: 13px; color: var(--ciel); }

/* ====================================================================
   Démo animée — l'explorateur de dossiers Documail, repris de l'espace
   client (barre latérale sombre + arborescence personnes / dossiers de
   type / documents). 100 % CSS (la CSP interdit le JS inline) : chaque
   élément porte une animation infinie de même durée (--loop), les % des
   @keyframes choisissant son entrée. Boucle : un email arrive ->
   Documail analyse -> les pièces se classent dans l'arborescence.
   ==================================================================== */
.app {
    display: flex;
    min-height: 332px;
}

/* Barre latérale — comme dans l'espace client */
.app__side {
    flex-shrink: 0;
    width: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    background: var(--marine);
}
.app__logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    /* Tuile discrète comme le portail client (cp-sidebar__brand-mark),
       au lieu d'un carré blanc franc qui jurait sur la sidebar sombre. */
    background: rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app__logo img { height: 22px; width: auto; }
.app__nav { display: flex; flex-direction: column; gap: 6px; }
.app__nav-item {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.46);
}
.app__nav-item svg { width: 17px; height: 17px; }
.app__nav-item--active {
    background: rgba(93, 169, 233, 0.18);
    color: var(--ciel);
}

/* Zone principale — l'explorateur du dossier */
.app__main {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 16px 18px 18px;
    background: var(--surface);
}

.app__head { display: flex; align-items: center; gap: 9px; }
.app__head-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--ciel-soft);
    color: var(--ardoise);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app__head-icon svg { width: 16px; height: 16px; }
.app__head-title { font-size: 13.5px; font-weight: 600; color: var(--marine); }
.app__head-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #0E7F6E;
    background: var(--vert-soft);
    border: 1px solid var(--vert-border);
}
.app__head-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vert);
}

/* Barre « Arborescence » + statut analyse/à jour */
.demo__status { position: relative; width: 150px; height: 16px; }
.demo__status > span {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.demo__status-analyse { color: var(--ardoise); opacity: 0;
    animation: statusAnalyse var(--loop) var(--ease) infinite; }
.demo__status-done { color: #0E7F6E; opacity: 1;
    animation: statusDone var(--loop) var(--ease) infinite; }
.demo__status-done svg { width: 13px; height: 13px; }
.demo__spinner {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--ciel-border);
    border-top-color: var(--ciel);
    animation: demoSpin 0.7s linear infinite;
}

/* Arborescence du dossier */
.tree { position: relative; margin-top: 8px; }
.tree__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 7px;
    border-left: 2px solid transparent;
    font-size: 13px;
    color: var(--ink-body);
    white-space: nowrap;
}
.tree__row--id { font-weight: 600; color: var(--marine); }
.tree__row--type { font-weight: 500; color: var(--ink); }
.tree__row--doc {
    font-weight: 400;
    color: var(--ardoise);
    background: var(--vert-soft);
    border-left-color: var(--vert);
}
.tree__chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    transform: rotate(90deg);
}
.tree__chevron svg { width: 10px; height: 10px; }
.tree__icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ardoise);
}
.tree__icon svg { width: 14px; height: 14px; }
.tree__icon--doc { color: var(--vert); }
.tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tree__check {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--vert);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tree__check svg { width: 9px; height: 9px; }
.tree__children {
    margin-left: 16px;
    padding-left: 4px;
    border-left: 1.5px solid var(--border);
}

@keyframes demoSpin { to { transform: rotate(360deg); } }
/* --- Démo hero en DEUX ACTES ----------------------------------------
   Acte 1 (0-12 s, fond abstrait) : UN mail arrive avec 5 PJ aux noms
   illisibles ; elles se dispersent, un balayage d'analyse passe, puis
   chaque pièce VOLE vers son groupe — par personne (Marie / Louis) —
   en se renommant en route (type de document).  Acte 2 (12-30 s,
   fenêtre app) : le dossier à deux personnes se constitue, le
   justificatif de domicile manque → relance automatique → reçu →
   « Dossier complet ».  Boucle var(--loop) 30 s.  Styles de BASE =
   scène finale (prefers-reduced-motion : dossier complet figé). */
.preview--app { --loop: 30s; }
.stage { position: relative; min-height: 344px; }
.scene { position: absolute; inset: 0; }
.scene--abstract {
    opacity: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, rgba(93, 169, 233, 0.22), transparent 52%),
        radial-gradient(circle at 84% 72%, rgba(23, 179, 154, 0.16), transparent 50%),
        linear-gradient(160deg, #0c1d33, #0b1727 60%, #081220);
    animation: actA var(--loop) var(--ease) infinite;
}
.scene--app { opacity: 1; animation: actB var(--loop) var(--ease) infinite; }
.scene--app .app { height: 100%; min-height: 0; }

.abs-blob {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    filter: blur(52px);
    opacity: 0.5;
}
.abs-blob--a { top: -70px; left: -50px; background: rgba(93, 169, 233, 0.35); }
.abs-blob--b { bottom: -80px; right: -60px; background: rgba(23, 179, 154, 0.28); }

/* Le mail unique, centré en haut, avec son compteur de PJ */
.abs-mailbig {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    max-width: 86%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    animation: absMailBig var(--loop) var(--ease) infinite;
}
.abs-mail__icon { display: inline-flex; color: var(--ciel); }
.abs-mail__icon svg { width: 15px; height: 15px; }
.abs-mail__meta { display: flex; flex-direction: column; line-height: 1.3; }
.abs-mail__meta strong { font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.abs-mail__meta span { font-size: 10px; color: rgba(255, 255, 255, 0.5); }
.abs-mailbig__count {
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(93, 169, 233, 0.25);
    color: #b9dcf9;
    font-size: 10.5px;
    font-weight: 700;
}
/* Balayage d'analyse horizontal qui descend sur la zone des pièces */
.abs-sweep {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 74px;
    height: 44px;
    border-radius: 0;
    border-top: 2px solid rgba(93, 169, 233, 0.85);
    background: linear-gradient(180deg, rgba(93, 169, 233, 0.22), transparent);
    opacity: 0;
    animation: absSweep var(--loop) var(--ease) infinite;
    pointer-events: none;
}
/* En-têtes de groupe (personnes détectées) */
.cluster {
    position: absolute;
    top: 158px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    animation-fill-mode: both;
}
.cluster svg { width: 12px; height: 12px; }
.cluster--marie {
    left: 5%;
    background: rgba(93, 169, 233, 0.22);
    color: #9fd0f7;
    animation: clusterMarie var(--loop) var(--ease) infinite;
}
.cluster--louis {
    left: 53%;
    background: rgba(23, 179, 154, 0.24);
    color: #7fe0cd;
    animation: clusterLouis var(--loop) var(--ease) infinite;
}
/* Pièces volantes : dispersées puis rangées dans leur colonne */
.fly {
    position: absolute;
    width: 42%;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.fly__icon { flex-shrink: 0; display: inline-flex; color: rgba(255, 255, 255, 0.75); }
.fly__icon svg { width: 13px; height: 13px; }
.fly__name { position: relative; flex: 1; min-width: 0; height: 15px; }
.fly__ugly,
.fly__clean {
    position: absolute;
    inset: 0;
    line-height: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fly__ugly {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
}
.fly__clean { font-size: 11px; font-weight: 600; color: #fff; }
.fly--1 { left: 5%; top: 186px; animation: fly1 var(--loop) var(--ease) infinite; }
.fly--2 { left: 5%; top: 218px; animation: fly2 var(--loop) var(--ease) infinite; }
.fly--3 { left: 53%; top: 186px; animation: fly3 var(--loop) var(--ease) infinite; }
.fly--4 { left: 53%; top: 218px; animation: fly4 var(--loop) var(--ease) infinite; }
.fly--5 { left: 5%; top: 250px; animation: fly5 var(--loop) var(--ease) infinite; }
.fly--1 .fly__ugly { animation: flyUgly1 var(--loop) var(--ease) infinite; }
.fly--2 .fly__ugly { animation: flyUgly2 var(--loop) var(--ease) infinite; }
.fly--3 .fly__ugly { animation: flyUgly3 var(--loop) var(--ease) infinite; }
.fly--4 .fly__ugly { animation: flyUgly4 var(--loop) var(--ease) infinite; }
.fly--5 .fly__ugly { animation: flyUgly5 var(--loop) var(--ease) infinite; }
.fly--1 .fly__clean { animation: flyClean1 var(--loop) var(--ease) infinite; }
.fly--2 .fly__clean { animation: flyClean2 var(--loop) var(--ease) infinite; }
.fly--3 .fly__clean { animation: flyClean3 var(--loop) var(--ease) infinite; }
.fly--4 .fly__clean { animation: flyClean4 var(--loop) var(--ease) infinite; }
.fly--5 .fly__clean { animation: flyClean5 var(--loop) var(--ease) infinite; }
.abs-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    animation: absCaption var(--loop) var(--ease) infinite;
}

/* --- Acte 2 : la fenêtre app ---------------------------------------- */
.app__head .demo__status { margin-left: auto; }
.demo__status-missing { color: #B45309; opacity: 0;
    animation: statusMissing var(--loop) var(--ease) infinite; }
.demo__status-missing svg { width: 12px; height: 12px; }
.app-toast {
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--marine);
    box-shadow: 0 18px 34px -14px rgba(13, 27, 42, 0.6);
    opacity: 0;
}
.app-toast--relance { animation: toastRelance var(--loop) var(--ease) infinite; }
.app-toast--received { animation: toastReceived var(--loop) var(--ease) infinite; }
.app-toast__icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(93, 169, 233, 0.2);
    color: var(--ciel);
}
.app-toast__icon--send { background: rgba(23, 179, 154, 0.2); color: var(--vert); }
.app-toast__icon svg { width: 14px; height: 14px; }
.app-toast__text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.app-toast__text strong { font-size: 12px; font-weight: 600; color: #fff; }
.app-toast__text span {
    font-size: 10.5px;
    color: var(--ink-inverse-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.story-person--1 { animation: storyPerson1 var(--loop) var(--ease) infinite; }
.story-person--2 { animation: storyPerson2 var(--loop) var(--ease) infinite; }
.story-doc--1 { animation: storyDoc1 ease-in-out var(--loop) infinite; }
.story-doc--2 { animation: storyDoc2 ease-in-out var(--loop) infinite; }
.story-doc--3 { animation: storyDoc3 ease-in-out var(--loop) infinite; }
.story-doc--4 { animation: storyDoc4 ease-in-out var(--loop) infinite; }
.story-doc--5 { animation: storyDoc5 ease-in-out var(--loop) infinite; }
.story-check--1 { animation: storyCheck1 var(--loop) var(--ease) infinite; }
.story-check--2 { animation: storyCheck2 var(--loop) var(--ease) infinite; }
.story-check--3 { animation: storyCheck3 var(--loop) var(--ease) infinite; }
.story-check--4 { animation: storyCheck4 var(--loop) var(--ease) infinite; }
.story-check--5 { animation: storyCheck5 var(--loop) var(--ease) infinite; }
.story-check--6 { animation: storyCheck6 var(--loop) var(--ease) infinite; }
.missrow {
    position: relative;
    animation: missRowBg var(--loop) var(--ease) infinite;
}
.missrow__pending,
.missrow__done {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
}
.missrow__pending {
    position: absolute;
    inset: 0;
    border: 1.5px dashed rgba(180, 83, 9, 0.45);
    border-radius: var(--radius-sm);
    padding-left: 4px;
    color: #B45309;
    background: rgba(180, 83, 9, 0.06);
    opacity: 0;
    animation: missPending var(--loop) var(--ease) infinite;
}
.missrow__pending .tree__label { color: #B45309; font-weight: 600; }
.missrow__alert { color: #B45309; }
.missrow__done { animation: missDone var(--loop) var(--ease) infinite; }
/* L'arbre à 8 lignes est dense : resserre légèrement les rangées. */
.scene--app .tree__row { padding-top: 3px; padding-bottom: 3px; }

@keyframes actA {
    0% { opacity: 0; }
    2%, 38% { opacity: 1; }
    41.3333%, 100% { opacity: 0; }
}
@keyframes actB {
    0%, 39.3333% { opacity: 0; }
    42.6667%, 97.3333% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes absMailBig {
    0%, 2.33333% { opacity: 0; transform: translateY(-14px) scale(0.95); }
    4.66667%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes absSweep {
    0%, 8.66667% { opacity: 0; transform: translateY(0); }
    10% { opacity: 1; }
    12.6667% { opacity: 1; transform: translateY(110px); }
    14%, 100% { opacity: 0; transform: translateY(110px); }
}
@keyframes clusterMarie {
    0%, 13.3333% { opacity: 0; transform: scale(0.7); }
    14.6667% { opacity: 1; transform: scale(1.08); }
    15.6667%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes clusterLouis {
    0%, 14.6667% { opacity: 0; transform: scale(0.7); }
    16% { opacity: 1; transform: scale(1.08); }
    17%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes fly1 {
    0%, 4% { opacity: 0; left: 5%; top: 80px; transform: rotate(-5deg) scale(0.9); }
    5.66667% { opacity: 1; left: 5%; top: 84px; transform: rotate(-5deg) scale(1); }
    16% { opacity: 1; left: 5%; top: 84px; transform: rotate(-5deg) scale(1); }
    18.6667%, 100% { opacity: 1; left: 5%; top: 186px; transform: rotate(0deg) scale(1); }
}
@keyframes flyUgly1 {
    0%, 17% { opacity: 1; }
    18.3333%, 100% { opacity: 0; }
}
@keyframes flyClean1 {
    0%, 17.3333% { opacity: 0; }
    18.6667%, 100% { opacity: 1; }
}
@keyframes fly2 {
    0%, 5% { opacity: 0; left: 52%; top: 60px; transform: rotate(4deg) scale(0.9); }
    6.66667% { opacity: 1; left: 52%; top: 78px; transform: rotate(4deg) scale(1); }
    18.3333% { opacity: 1; left: 52%; top: 78px; transform: rotate(4deg) scale(1); }
    21%, 100% { opacity: 1; left: 5%; top: 218px; transform: rotate(0deg) scale(1); }
}
@keyframes flyUgly2 {
    0%, 19.3333% { opacity: 1; }
    20.6667%, 100% { opacity: 0; }
}
@keyframes flyClean2 {
    0%, 19.6667% { opacity: 0; }
    21%, 100% { opacity: 1; }
}
@keyframes fly3 {
    0%, 6% { opacity: 0; left: 34%; top: 106px; transform: rotate(-3deg) scale(0.9); }
    7.66667% { opacity: 1; left: 34%; top: 104px; transform: rotate(-3deg) scale(1); }
    20.6667% { opacity: 1; left: 34%; top: 104px; transform: rotate(-3deg) scale(1); }
    23.3333%, 100% { opacity: 1; left: 53%; top: 186px; transform: rotate(0deg) scale(1); }
}
@keyframes flyUgly3 {
    0%, 21.6667% { opacity: 1; }
    23%, 100% { opacity: 0; }
}
@keyframes flyClean3 {
    0%, 22% { opacity: 0; }
    23.3333%, 100% { opacity: 1; }
}
@keyframes fly4 {
    0%, 7% { opacity: 0; left: 56%; top: 102px; transform: rotate(6deg) scale(0.9); }
    8.66667% { opacity: 1; left: 56%; top: 100px; transform: rotate(6deg) scale(1); }
    23% { opacity: 1; left: 56%; top: 100px; transform: rotate(6deg) scale(1); }
    25.6667%, 100% { opacity: 1; left: 53%; top: 218px; transform: rotate(0deg) scale(1); }
}
@keyframes flyUgly4 {
    0%, 24% { opacity: 1; }
    25.3333%, 100% { opacity: 0; }
}
@keyframes flyClean4 {
    0%, 24.3333% { opacity: 0; }
    25.6667%, 100% { opacity: 1; }
}
@keyframes fly5 {
    0%, 8% { opacity: 0; left: 12%; top: 116px; transform: rotate(2deg) scale(0.9); }
    9.66667% { opacity: 1; left: 12%; top: 116px; transform: rotate(2deg) scale(1); }
    25.3333% { opacity: 1; left: 12%; top: 116px; transform: rotate(2deg) scale(1); }
    28%, 100% { opacity: 1; left: 5%; top: 250px; transform: rotate(0deg) scale(1); }
}
@keyframes flyUgly5 {
    0%, 26.3333% { opacity: 1; }
    27.6667%, 100% { opacity: 0; }
}
@keyframes flyClean5 {
    0%, 26.6667% { opacity: 0; }
    28%, 100% { opacity: 1; }
}
@keyframes absCaption {
    0%, 4% { opacity: 0; }
    6.66667%, 100% { opacity: 1; }
}
@keyframes storyPerson1 {
    0%, 44% { opacity: 0; transform: translateX(8px); }
    46%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyPerson2 {
    0%, 52% { opacity: 0; transform: translateX(8px); }
    54%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyDoc1 {
    0%, 45.6667% { opacity: 0; transform: translateX(8px); }
    47.6667%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyDoc2 {
    0%, 47.6667% { opacity: 0; transform: translateX(8px); }
    49.6667%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyDoc3 {
    0%, 49.6667% { opacity: 0; transform: translateX(8px); }
    51.6667%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyDoc4 {
    0%, 55.3333% { opacity: 0; transform: translateX(8px); }
    57.3333%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyDoc5 {
    0%, 57.3333% { opacity: 0; transform: translateX(8px); }
    59.3333%, 97.3333% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; }
}
@keyframes storyCheck1 {
    0%, 46.1667% { opacity: 0; transform: scale(0); }
    47.6667% { opacity: 1; transform: scale(1.35); }
    48.8333%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}
@keyframes storyCheck2 {
    0%, 48.1667% { opacity: 0; transform: scale(0); }
    49.6667% { opacity: 1; transform: scale(1.35); }
    50.8333%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}
@keyframes storyCheck3 {
    0%, 50.1667% { opacity: 0; transform: scale(0); }
    51.6667% { opacity: 1; transform: scale(1.35); }
    52.8333%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}
@keyframes storyCheck4 {
    0%, 55.8333% { opacity: 0; transform: scale(0); }
    57.3333% { opacity: 1; transform: scale(1.35); }
    58.5%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}
@keyframes storyCheck5 {
    0%, 57.8333% { opacity: 0; transform: scale(0); }
    59.3333% { opacity: 1; transform: scale(1.35); }
    60.5%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}
@keyframes storyCheck6 {
    0%, 82% { opacity: 0; transform: scale(0); }
    83.5% { opacity: 1; transform: scale(1.35); }
    84.6667%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}
@keyframes missRowBg {
    0%, 81.6667% { background: transparent; border-left-color: transparent; }
    83.3333%, 97.3333% { background: var(--vert-soft); border-left-color: var(--vert); }
    100% { background: transparent; border-left-color: transparent; }
}
@keyframes missPending {
    0%, 60% { opacity: 0; }
    62%, 78% { opacity: 1; }
    80%, 100% { opacity: 0; }
}
@keyframes missDone {
    0%, 79.3333% { opacity: 0; }
    81.6667%, 97.3333% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes toastRelance {
    0%, 63.3333% { opacity: 0; transform: translateY(130%); }
    65.3333%, 71.3333% { opacity: 1; transform: translateY(0); }
    73.3333%, 100% { opacity: 0; transform: translateY(130%); }
}
@keyframes toastReceived {
    0%, 74.6667% { opacity: 0; transform: translateY(130%); }
    76.6667%, 80% { opacity: 1; transform: translateY(0); }
    82%, 100% { opacity: 0; transform: translateY(130%); }
}
@keyframes statusAnalyse {
    0%, 42% { opacity: 0; }
    43.6667%, 58% { opacity: 1; }
    60%, 100% { opacity: 0; }
}
@keyframes statusMissing {
    0%, 60% { opacity: 0; }
    61.6667%, 78% { opacity: 1; }
    80%, 100% { opacity: 0; }
}
@keyframes statusDone {
    0%, 84% { opacity: 0; transform: scale(0.85); }
    86% { opacity: 1; transform: scale(1.08); }
    88%, 97.3333% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; }
}

/* --- Bandeau logos / réassurance ----------------------------------- */
.strip {
    /* Boîte arrondie posée entre deux sections : un léger espace
       vertical autour + une gouttière latérale (elle ne touche plus
       les bords de l'écran). */
    padding: 22px 28px;
}
.strip__inner {
    display: flex;
    align-items: center;
    gap: 18px 40px;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* Boîte arrondie. Sélecteur à 2 classes : .strip__inner est aussi un
   .container — sans ça la règle .container des media queries
   remettrait son padding vertical à 0. */
.strip .strip__inner {
    padding: 16px 26px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.strip__label {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.strip__items {
    display: flex;
    gap: 14px 28px;
    flex-wrap: wrap;
}
.strip__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ardoise);
}
.strip__item svg { width: 16px; height: 16px; color: var(--ciel); }

/* --- Trame des sections -------------------------------------------- */
.section { padding: 92px 0; }
.section--tight { padding: 72px 0; }

.section__head {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}
.section__head--left {
    margin-left: 0;
    text-align: left;
}
.section__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ciel);
}
.section__title {
    margin-top: 12px;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--marine);
}
.section__lead {
    margin-top: 14px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-body);
}

/* --- Piliers (4 tâches) -------------------------------------------- */
.pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.pillar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--normal) var(--ease),
                transform var(--normal) var(--ease),
                border-color var(--normal) var(--ease);
}
.pillar:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}
.pillar__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(140deg, var(--marine), var(--ardoise));
    box-shadow: 0 10px 20px -10px rgba(13, 27, 42, 0.55);
}
.pillar__icon svg { width: 23px; height: 23px; }
.pillar__kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ciel);
}
.pillar h3 { font-size: 21px; font-weight: 600; }
.pillar p {
    font-size: 15px;
    color: var(--ink-body);
    line-height: 1.6;
}
.pillar p code {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--ardoise);
}
.pillar__points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pillar__points li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    color: var(--ink-body);
}
.pillar__points li svg {
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    color: var(--vert);
}
/* --- Pipeline animé (mail → tri → extraction → relance) ------------ */
.workflow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 800px;
    /* marge haute : laisse la place à l'arc de relance au-dessus + de
       l'air entre le sous-titre et l'animation. */
    margin: 90px auto 8px;
}
.workflow__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    width: 134px;
    flex-shrink: 0;
    text-align: center;
}
.workflow__node {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ardoise);
    box-shadow: var(--shadow-xs);
    animation: workflow-node 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.4s);
}
.workflow__node svg { width: 25px; height: 25px; }
.workflow__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--marine);
    max-width: 116px;
    line-height: 1.35;
}
.workflow__sub {
    font-size: 11px;
    color: var(--ink-muted);
    max-width: 116px;
    line-height: 1.3;
}
/* Groupe « collecte » (Réception · Tri · Relance) surmonté de l'arc de
   relance qui reboucle sur la réception. */
.workflow__collect {
    position: relative;
    display: flex;
    align-items: flex-start;
}
.workflow__loopback {
    position: absolute;
    top: -32px;
    left: 67px;   /* centre du nœud Réception (stage 134 / 2) */
    right: 67px;  /* centre du nœud Relance */
    height: 28px;
    border: 2px dashed var(--vert-border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
    animation: workflow-loop 3s ease-in-out infinite;
}
.workflow__loopback::after {
    /* pointe vers le bas, sur Réception (gauche) */
    content: "";
    position: absolute;
    left: -6px;
    bottom: -4px;
    border: 6px solid transparent;
    border-top-color: var(--vert-border);
}
.workflow__loopback-label {
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--vert);
    white-space: nowrap;
}
@keyframes workflow-loop {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.workflow__link {
    flex: 0 0 44px;
    width: 44px;
    height: 2px;
    margin-top: 28px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}
.workflow__link::after {
    content: "";
    position: absolute;
    inset: 0;
    transform-origin: left;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--ciel), var(--vert));
    /* Horloge PARTAGÉE (même durée, AUCUN delay par lien) : le décalage
       de remplissage vit dans les keyframes wf-link-N, mais les 3 jauges
       se vident au MÊME instant (88 %) → toutes vides quand le tour
       reboucle. Avant, animation-delay décalait aussi le vidage, donc
       les jauges restaient pleines au rebouclage. Le remplissage reste
       calé sur les nœuds (même période 6 s → phase relative constante). */
    animation: wf-link-0 6s ease-in-out infinite;
}
.workflow__link[style*="--i:1"]::after { animation-name: wf-link-1; }
.workflow__link[style*="--i:2"]::after { animation-name: wf-link-2; }
@keyframes workflow-node {
    0%, 100% {
        transform: scale(1);
        border-color: var(--border);
        color: var(--ardoise);
        box-shadow: var(--shadow-xs);
    }
    5% {
        transform: scale(1.12);
        border-color: var(--vert);
        color: var(--vert);
        box-shadow: 0 0 0 5px var(--ciel-soft), 0 10px 22px -8px rgba(23, 179, 154, 0.45);
    }
    20%, 92% {
        transform: scale(1);
        border-color: var(--vert-border);
        color: var(--vert);
        box-shadow: var(--shadow-xs);
    }
}
/* Une jauge par étape, sur la MÊME horloge 6 s. Le remplissage est
   décalé par étape (juste après le pulse du nœud de gauche : nœud N à
   ~N×23 %), mais les trois se vident ensemble à 88 % → 100 % puis
   repartent à 0 % au tour suivant. */
@keyframes wf-link-0 {
    0%, 10% { transform: scaleX(0); }
    20%, 78% { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}
@keyframes wf-link-1 {
    0%, 33% { transform: scaleX(0); }
    43%, 78% { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}
@keyframes wf-link-2 {
    0%, 56% { transform: scaleX(0); }
    66%, 78% { transform: scaleX(1); }
    88%, 100% { transform: scaleX(0); }
}

/* --- Étapes -------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.step {
    position: relative;
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--marine);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
}
.step h3 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-body); }
.step__line {
    position: absolute;
    top: 47px;
    right: -10px;
    width: 20px;
    height: 2px;
    background: var(--border-strong);
}

/* --- Cartes audience ----------------------------------------------- */
.features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.feature {
    padding: 26px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
}
.feature:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.feature__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ciel-soft);
    color: var(--ardoise);
    margin-bottom: 16px;
}
.feature__icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 16px; margin-bottom: 7px; }
.feature p { font-size: 14px; color: var(--ink-body); }

/* --- Section sombre + grille des gains ----------------------------- */
.section--dark {
    background: var(--marine);
    position: relative;
    overflow: hidden;
}
.section--dark::before {
    content: "";
    position: absolute;
    top: -200px;
    left: -120px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 169, 233, 0.16), transparent 70%);
    pointer-events: none;
}
.section--dark .container { position: relative; }
.section--dark .section__eyebrow { color: var(--ciel); }
.section--dark .section__title { color: #fff; }
.section--dark .section__lead { color: var(--ink-inverse-soft); }

.gain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.gain {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 26px;
    border-radius: var(--radius-lg);
    /* Fond OPAQUE (équivalent du translucide d'avant, posé sur le
       marine) : les cartes restent nettement au premier plan, aurore
       et paillettes ne transparaissent pas au travers. */
    background: #182534;
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background var(--normal) var(--ease),
                border-color var(--normal) var(--ease);
}
.gain:hover {
    background: #202d3b;
    border-color: rgba(255, 255, 255, 0.20);
}
.gain__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-inverse-faint);
}
.gain__value {
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: #fff;
    line-height: 1;
}
.gain__value span {
    font-size: 17px;
    font-weight: 500;
    color: var(--ink-inverse-faint);
    margin-left: 4px;
}
.gain__hint {
    font-size: 13px;
    color: var(--ink-inverse-soft);
    line-height: 1.5;
}
.gain--accent {
    /* Variante accent, opaque elle aussi (équivalent du dégradé
       translucide composé sur le marine). */
    background: linear-gradient(140deg, #0f3940, #15293d);
    border-color: var(--vert-border);
}
.gain--accent .gain__value span { color: rgba(255, 255, 255, 0.7); }

/* --- Tarifs -------------------------------------------------------- */
.pricing {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.plan {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Padding uniforme : le badge est en absolu SUR la ligne du nom (à
       droite), pas au-dessus → aucune ligne vide en haut des cartes. */
    padding: 28px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.plan--featured {
    border-color: transparent;
    background: var(--marine);
    box-shadow: var(--shadow-lg);
}
/* La carte Pro reçoit aurore + paillettes (marketing-fx.js) : le contenu
   repasse au-dessus des calques. */
.plan--featured > * { position: relative; z-index: 1; }
.plan--featured > .mkt-aurora,
.plan--featured > .mkt-sparkles { z-index: 0; }
.plan__name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--marine);
}
.plan--featured .plan__name { color: var(--ciel); }
.plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    /* hauteur fixe : les prix s'alignent quel que soit le libellé
       (« 29 € » vs « Sur devis » qui passe le sous-titre à la ligne). */
    min-height: 44px;
}
.plan__price strong {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--marine);
    white-space: nowrap;
}
.plan--featured .plan__price strong { color: #fff; }
.plan__price span { font-size: 13.5px; color: var(--ink-muted); }
.plan--featured .plan__price span { color: var(--ink-inverse-faint); }
.plan__desc { font-size: 13.5px; color: var(--ink-body); min-height: 38px; }
.plan--featured .plan__desc { color: var(--ink-inverse-soft); }
.plan__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.plan__list li {
    position: relative;
    padding-left: 26px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ink-body);
    /* Hauteur de slot fixe : les 5 métriques (mêmes lignes, même ordre
       sur les 4 plans) s'alignent même quand certaines passent sur 2
       lignes (« 2 000 documents organisés / mois » = 2 lignes ≈ 39px <
       40px → toutes les lignes font 40px). */
    min-height: 40px;
}
.plan--featured .plan__list li { color: var(--ink-inverse-soft); }
.plan__list li svg {
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    color: var(--vert);
}
.plan .btn { margin-top: auto; }
.plan__badge {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 2;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--marine);
    background: var(--ciel);
}

/* Réassurance « sans carte » sous le CTA du hero. */
.hero__reassure {
    margin-top: 13px;
    font-size: 12.5px;
    color: var(--ink-muted);
}
/* Ligne de confiance sous les tarifs (sans carte + paiement Stripe). */
.pricing__trust {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-muted);
    text-align: center;
}
.pricing__trust svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--vert);
}
.stripe-mark {
    height: 24px;
    width: auto;
    display: block;
}

/* --- Lumi en action (preuve concrète) ------------------------------ */
.lumi-demo {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
}
/* Fenêtre Lumi stylée : barre de titre brandée + halo aurore + bulle FAB. */
.lumi-win {
    position: relative;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 30px 60px -28px rgba(13, 27, 42, 0.30),
                0 0 55px -12px rgba(93, 169, 233, 0.20),
                0 22px 50px -22px rgba(23, 179, 154, 0.16);
}
.lumi-win__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
}
.lumi-win__brand { display: flex; align-items: center; gap: 10px; }
.lumi-win__logo { height: 18px; width: auto; }
.lumi-win__title { font-size: 14px; font-weight: 700; color: var(--marine); }
.lumi-win__ctrl { display: inline-flex; gap: 6px; }
.lumi-win__ctrl i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}
.lumi-chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 26px;
}
/* Bulle FAB Lumi — réplique du FAB de l'app : dégradé ciel→vert, halo
   aurore qui respire (::before flouté), et un amas de particules
   blanches qui scintillent à l'intérieur (le « cœur de Lumi »). */
.lumi-fab {
    position: absolute;
    right: -16px;
    bottom: -16px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(140deg, #6fb5ec 0%, #5da9e9 40%, #17b39a 100%);
    box-shadow: 0 12px 28px -8px rgba(45, 150, 175, 0.55),
                0 4px 12px -4px rgba(0, 0, 0, 0.25);
}
.lumi-fab::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(93, 169, 233, 0.55) 0%, rgba(23, 179, 154, 0.32) 55%, transparent 72%);
    filter: blur(9px);
    opacity: 0.7;
    z-index: -1;
    pointer-events: none;
    animation: lumi-fab-glow 4.5s ease-in-out infinite;
}
@keyframes lumi-fab-glow {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50% { transform: scale(1.16); opacity: 0.9; }
}
.lumi-fab__core { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.lumi-fab__p {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #eaf6ff 45%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    animation: lumi-fab-p var(--p-dur, 3s) ease-in-out infinite;
}
@keyframes lumi-fab-p {
    0%   { opacity: 0.32; transform: translate(0, 0) scale(0.7); }
    22%  { opacity: 1;    transform: translate(1.4px, -1px) scale(1.18); }
    41%  { opacity: 0.28; transform: translate(-1px, 1.4px) scale(0.62); }
    63%  { opacity: 0.95; transform: translate(-1.4px, -0.5px) scale(1.1); }
    82%  { opacity: 0.4;  transform: translate(1px, 1px) scale(0.82); }
    100% { opacity: 0.32; transform: translate(0, 0) scale(0.7); }
}
.lumi-chat__q {
    align-self: flex-end;
    max-width: 82%;
    padding: 11px 15px;
    border-radius: 16px 16px 4px 16px;
    background: var(--marine);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    /* La conversation se joue en boucle : question -> Lumi réfléchit ->
       réponse. Défauts visibles (opacity 1) → reste lisible en
       prefers-reduced-motion (qui coupe animation). */
    animation: lumi-chat-q 9s var(--ease) infinite;
}
.lumi-chat__reply { position: relative; }
.lumi-chat__typing {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 16px;
    border-radius: 16px 16px 16px 4px;
    background: var(--ciel-soft);
    border: 1px solid var(--ciel-border);
    opacity: 0;
    animation: lumi-chat-typing 9s var(--ease) infinite;
}
.lumi-chat__dots { display: inline-flex; gap: 4px; }
.lumi-chat__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ardoise);
    animation: lumi-chat-dot 1.2s ease-in-out infinite;
}
.lumi-chat__dots i:nth-child(2) { animation-delay: 0.16s; }
.lumi-chat__dots i:nth-child(3) { animation-delay: 0.32s; }
.lumi-chat__a {
    max-width: 90%;
    padding: 14px 16px;
    border-radius: 16px 16px 16px 4px;
    background: var(--ciel-soft);
    border: 1px solid var(--ciel-border);
    animation: lumi-chat-a 9s var(--ease) infinite;
}
@keyframes lumi-chat-q {
    0%, 5% { opacity: 0; transform: translateY(8px); }
    9%, 95% { opacity: 1; transform: translateY(0); }
    99%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes lumi-chat-typing {
    0%, 20% { opacity: 0; }
    24%, 42% { opacity: 1; }
    46%, 100% { opacity: 0; }
}
@keyframes lumi-chat-a {
    0%, 46% { opacity: 0; transform: translateY(8px); }
    52%, 95% { opacity: 1; transform: translateY(0); }
    99%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes lumi-chat-dot {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-4px); opacity: 1; }
}
.lumi-chat__a-text { font-size: 14px; color: var(--ink-body); line-height: 1.5; }
.lumi-chat__a-text strong { color: var(--marine); }
.lumi-chat__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 11px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--ink-muted);
}
.lumi-chat__source svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--vert); }

/* --- Sécurité ------------------------------------------------------ */
.trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.trust__item {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}
.trust__icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: var(--marine);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trust__icon svg { width: 20px; height: 20px; }
.trust__title { font-size: 15.5px; font-weight: 600; color: var(--marine); }
.trust__desc {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--ink-body);
    line-height: 1.55;
}

/* --- Valeurs de marque --------------------------------------------- */
.values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.value {
    text-align: center;
    padding: 30px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface);
}
.value__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ciel-soft);
    color: var(--ardoise);
}
.value__icon svg { width: 22px; height: 22px; }
.value h3 { font-size: 17px; }
.value p {
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--ink-body);
}

/* --- FAQ ----------------------------------------------------------- */
.faq {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq__item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--marine);
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "";
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--ink-muted);
    border-bottom: 2px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform var(--fast) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item p {
    padding: 0 22px 20px;
    font-size: 14.5px;
    color: var(--ink-body);
    line-height: 1.6;
}

/* --- CTA final ----------------------------------------------------- */
.cta-band {
    position: relative;
    overflow: hidden;
    padding: 72px 56px;
    border-radius: var(--radius-xl);
    background: var(--marine);
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 280px at 18% 16%, rgba(93, 169, 233, 0.22), transparent 70%),
        radial-gradient(520px 300px at 86% 92%, rgba(23, 179, 154, 0.18), transparent 70%);
    pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 {
    font-size: clamp(24px, 2.6vw, 34px);
    color: #fff;
    letter-spacing: -0.03em;
}
.cta-band p {
    margin: 14px auto 0;
    max-width: 540px;
    color: var(--ink-inverse-soft);
    font-size: 16px;
}
.cta-band .hero__cta { justify-content: center; margin-top: 28px; }
/* La section CTA (simple .container) n'a pas le rythme vertical des
   .section : sans ça la bande sombre colle au pied de page. */
#contact { padding-block: 24px 96px; }

/* --- Pied de page -------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 56px 0 36px;
}
.footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer__brand .brand { margin-bottom: 12px; }
.footer__tagline {
    font-size: 14.5px;
    color: var(--ink-body);
    max-width: 320px;
}
.footer__motto {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ciel);
}
.footer__col h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
}
.footer__col a,
.footer__col span {
    display: block;
    font-size: 14px;
    color: var(--ink-body);
    margin-bottom: 9px;
}
.footer__col a { transition: color var(--fast) var(--ease); }
.footer__col a:hover { color: var(--marine); }
.footer__bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-muted);
}
.footer__bottom a { color: var(--ink-body); }
.footer__bottom a:hover { color: var(--marine); }

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 44px;
        /* Espace header -> badge calé sur l'espace badge -> titre. */
        padding: 24px 28px 68px;
    }
    .hero__copy { max-width: 620px; }
    .preview { max-width: 480px; }
    .section { padding: 68px 0; }
    .pillars { grid-template-columns: 1fr; }
    .lumi-demo { grid-template-columns: 1fr; gap: 30px; }
    .steps,
    .features,
    .pricing,
    .values,
    .gain-grid { grid-template-columns: repeat(2, 1fr); }
    .step__line { display: none; }
    .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    html, body { font-size: 15px; }
    .container { padding: 0 18px; }
    .nav__links { display: none; }
    /* En-tête compact : logo + un seul bouton. « Se connecter » et
       « Essayer Documail » pointent au même endroit — sur petit
       écran on ne garde que le bouton principal pour éviter que
       l'en-tête déborde de la largeur de l'écran. */
    .header__inner { height: 62px; gap: 12px; }
    .brand { font-size: 17px; }
    .brand__logo { height: 26px; width: auto; }
    .nav { gap: 0; }
    .nav__actions .btn--ghost { display: none; }
    .nav__actions .btn { padding: 9px 15px; font-size: 13.5px; }
    .eyebrow { font-size: 11px; padding: 5px 12px; letter-spacing: 0.03em; }
    .hero h1 { font-size: 32px; }
    /* Espace header -> badge calé sur l'espace badge -> titre. */
    .hero__inner { padding: 24px 18px 56px; }
    .hero__cta .btn { flex: 1 1 auto; }
    .hero__trust { grid-template-columns: 1fr; gap: 18px; }
    .section { padding: 56px 0; }
    .section--tight { padding: 44px 0; }
    .section__head { margin-bottom: 36px; }
    .steps,
    .features,
    .pricing,
    .values,
    .gain-grid,
    .trust { grid-template-columns: 1fr; }
    .strip { padding: 16px 18px; }
    .strip .strip__inner { padding: 14px 20px; }
    .strip__inner { flex-direction: column; align-items: flex-start; }
    .cta-band { padding: 52px 24px; }
    .pillar,
    .plan { padding: 24px; }
    .footer__top { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 420px) {
    .container { padding: 0 15px; }
    /* Shorthand complet : .hero__inner est aussi un .container, et la
       règle .container ci-dessus remettrait sinon son padding
       vertical à 0. */
    .hero__inner { padding: 24px 15px 56px; }
    .strip { padding-left: 15px; padding-right: 15px; }
    .preview__stats { grid-template-columns: 1fr; }
    .hero h1 { font-size: 28px; }
    .hero .lead { font-size: 15px; }
    .btn--lg { padding: 13px 18px; font-size: 14.5px; }
    .nav__actions .btn { padding: 8px 13px; font-size: 13px; }
}

/* Mouvement réduit : on coupe transitions ET animations. La démo
   retombe alors sur son état de repos (état CSS de base) — un tableau
   de bord déjà peuplé : 3 pièces classées, statut « À jour ». */
/* === Aurore + paillettes des surfaces marine ======================
   Calques injectés par marketing-fx.js : aurore (halos qui dérivent)
   + paillettes scintillantes sur .section--dark / .cta-band, et un
   voile de paillettes sur les boutons marine. Les @keyframes ci-bas
   sont coupées par le bloc prefers-reduced-motion global. */
.mkt-aurora,
.mkt-sparkles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}
/* .cta-band > * force z-index:1 — on rétablit les calques derrière. */
.cta-band > .mkt-aurora,
.cta-band > .mkt-sparkles { z-index: 0; }
/* Paillettes posées PAR-DESSUS un bouton (voile léger). */
.mkt-sparkles--front { z-index: 2; }

.mkt-aurora__blob {
    position: absolute;
    width: 360px;
    height: 360px;
    margin: -180px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0;
    background: radial-gradient(circle,
        rgba(93, 169, 233, 0.5) 0%, rgba(93, 169, 233, 0) 70%);
}
.mkt-aurora__blob:nth-child(2) {
    background: radial-gradient(circle,
        rgba(70, 120, 195, 0.5) 0%, rgba(70, 120, 195, 0) 72%);
}
.mkt-aurora__blob:nth-child(3) {
    background: radial-gradient(circle,
        rgba(23, 179, 154, 0.4) 0%, rgba(23, 179, 154, 0) 72%);
}
.mkt-aurora__blob:nth-child(1) { animation: mkt-aurora-a 32s ease-in-out infinite; }
.mkt-aurora__blob:nth-child(2) { animation: mkt-aurora-b 39s ease-in-out infinite; }
.mkt-aurora__blob:nth-child(3) { animation: mkt-aurora-c 27s ease-in-out infinite; }
@keyframes mkt-aurora-a {
    0%   { opacity: 0;    left: 12%; top: 78%; }
    9%   { opacity: 0.5;  left: 16%; top: 72%; }
    21%  { opacity: 0;    left: 24%; top: 62%; }
    23%  { opacity: 0;    left: 84%; top: 20%; }
    34%  { opacity: 0.42; left: 80%; top: 26%; }
    46%  { opacity: 0;    left: 76%; top: 32%; }
    48%  { opacity: 0;    left: 48%; top: 95%; }
    61%  { opacity: 0.5;  left: 51%; top: 88%; }
    74%  { opacity: 0;    left: 54%; top: 80%; }
    100% { opacity: 0;    left: 12%; top: 78%; }
}
@keyframes mkt-aurora-b {
    0%   { opacity: 0;    left: 70%; top: 88%; }
    11%  { opacity: 0.46; left: 66%; top: 80%; }
    25%  { opacity: 0;    left: 62%; top: 72%; }
    27%  { opacity: 0;    left: 18%; top: 26%; }
    40%  { opacity: 0.5;  left: 22%; top: 32%; }
    54%  { opacity: 0;    left: 26%; top: 38%; }
    56%  { opacity: 0;    left: 92%; top: 58%; }
    70%  { opacity: 0.42; left: 86%; top: 52%; }
    84%  { opacity: 0;    left: 80%; top: 46%; }
    100% { opacity: 0;    left: 70%; top: 88%; }
}
@keyframes mkt-aurora-c {
    0%   { opacity: 0;    left: 40%; top: 14%; }
    10%  { opacity: 0.4;  left: 44%; top: 20%; }
    23%  { opacity: 0;    left: 48%; top: 26%; }
    25%  { opacity: 0;    left: 6%;  top: 70%; }
    38%  { opacity: 0.44; left: 10%; top: 64%; }
    52%  { opacity: 0;    left: 14%; top: 58%; }
    54%  { opacity: 0;    left: 88%; top: 84%; }
    68%  { opacity: 0.4;  left: 84%; top: 78%; }
    82%  { opacity: 0;    left: 80%; top: 72%; }
    100% { opacity: 0;    left: 40%; top: 14%; }
}

.mkt-sparkle {
    position: absolute;
    opacity: 0;
    animation: mkt-sparkle-drift var(--dur, 14s) ease-in-out infinite;
}
.mkt-sparkle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(190, 222, 252, 0.6) 45%,
        rgba(190, 222, 252, 0) 100%);
    animation: mkt-sparkle-twinkle var(--tw, 1.5s) ease-in-out infinite;
    animation-delay: var(--tw-delay, 0s);
}
.mkt-sparkle--vert::before {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(150, 230, 212, 0.55) 45%,
        rgba(150, 230, 212, 0) 100%);
}
/* Position posée à des fractions inégales dans le temps -> vitesse
   de dérive irrégulière (élans puis quasi-arrêts). */
@keyframes mkt-sparkle-drift {
    0%   { opacity: 0; transform: translate(0, 0); }
    20%  { opacity: var(--peak, 0.7);
           transform: translate(calc(var(--dx, 0px) * 0.08), calc(var(--dy, -24px) * 0.08)); }
    38%  { transform: translate(calc(var(--dx, 0px) * 0.5),  calc(var(--dy, -24px) * 0.5)); }
    52%  { transform: translate(calc(var(--dx, 0px) * 0.56), calc(var(--dy, -24px) * 0.56)); }
    70%  { transform: translate(calc(var(--dx, 0px) * 0.84), calc(var(--dy, -24px) * 0.84)); }
    80%  { opacity: var(--peak, 0.7);
           transform: translate(calc(var(--dx, 0px) * 0.9), calc(var(--dy, -24px) * 0.9)); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -24px)); }
}
/* Paliers à intervalles inégaux -> scintillement irrégulier :
   éclats rapprochés puis longues pénombres. */
@keyframes mkt-sparkle-twinkle {
    0%   { opacity: 0.8;  transform: scale(1); }
    8%   { opacity: 1;    transform: scale(1.24); }
    16%  { opacity: 0.15; transform: scale(0.64); }
    43%  { opacity: 0.5;  transform: scale(0.96); }
    51%  { opacity: 1;    transform: scale(1.2); }
    59%  { opacity: 0.28; transform: scale(0.72); }
    86%  { opacity: 0.7;  transform: scale(1.05); }
    100% { opacity: 0.8;  transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    /* Animations coupées → on garde les particules du FAB visibles + le
       pipeline « rempli » (lisible sans mouvement). */
    .lumi-fab__p { opacity: 0.8 !important; }
    .workflow__link::after { transform: scaleX(1) !important; }
    .workflow__node { border-color: var(--vert-border) !important; color: var(--vert) !important; }
}

/* Pipeline sur mobile : on empile les étapes (2×2), liens + arc masqués. */
@media (max-width: 680px) {
    .workflow,
    .workflow__collect { flex-wrap: wrap; gap: 28px 18px; justify-content: center; }
    .workflow__link,
    .workflow__loopback { display: none; }
}

/* ====================================================================
   Révélation au scroll — état caché posé UNIQUEMENT par marketing-fx.js
   (classe .mkt-reveal). Sans JS ou en prefers-reduced-motion, aucune
   de ces règles ne s'applique : la page est entièrement visible.
   ==================================================================== */
.mkt-reveal {
    opacity: 0;
    transform: translateY(18px) scale(0.99);
}
.mkt-reveal--in {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.55s var(--ease) var(--mkt-reveal-delay, 0ms),
        transform 0.55s var(--ease) var(--mkt-reveal-delay, 0ms);
}


/* ====================================================================
   Justification du texte courant (demande user). Uniquement les
   paragraphes de contenu — les chapeaux de section (.section__lead)
   et la bande CTA restent centrés : justifier un bloc centré crée
   des lignes incohérentes. hyphens:auto (html lang="fr") évite les
   rivières de blancs sur les colonnes étroites.
   ==================================================================== */
.hero .lead,
.pillar p,
.plan__desc,
.trust__desc,
.faq__item p,
.lumi-demo__copy p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}