/*
 * AUTH — Les pages publiques
 * Header, pied de page, accueil, pages légales et 404. Chargé après `edouk.css`,
 * qui porte les polices, les variables et les primitives. Aucune règle ici n'est
 * rendue par une page du tableau de bord, ni par les six pages du monde
 * `gabarit` ( connexion, inscription, mot de passe, capture, remerciement ), qui
 * ont leur feuille.
 *
 * `edouk_landing_*` désigne ICI la vitrine publique. Les trois classes du même
 * préfixe qui vivent dans `route.css` ( `_view`, `_block`, `_generate` ) parlent
 * de la landing du vendeur : les deux feuilles ne se chargent jamais ensemble.
*/
/* Le header repeint le mesh de la page, calé sur le viewport : un fond en `scroll`
   dimensionné `100vw 100vh` montre, dans une bande collée en haut de l'écran, la
   même tranche qu'un fond en `attachment: fixed` — sans le repaint à chaque image
   du défilement que celui-ci impose. ( Règle de base : `edouk_header_hero`, plus
   bas, la recouvre sur toutes les pages publiques. ) */
.edouk_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    padding-top: 25px;
    padding-bottom: 25px;
    /*
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(70px);
    */
    z-index: 100;
    background: var(--bg-page);
    background-image: var(--page-mesh);
    background-attachment: scroll;
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.edouk_header ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    align-items: flex-start;
    gap: 25px;
}
.edouk_header_tap {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
/* Le logo est redevenu un lien. Le <a> passe en `flex` et rien d'autre : c'est ce
   qui supprime l'espace de ligne de base qu'un lien en `inline` laisserait sous
   l'image, et donc ce qui garde la hauteur du logo strictement égale à celle du
   fichier. La largeur, elle, reste sur l'image — un seul endroit où elle est écrite,
   et la barre de la landing s'aligne dessus. */
.edouk_header_tap a {
    display: flex;
}
/* LE LOGO EST DEUX FICHIERS, UN PAR THÈME, et c'est le Twig qui choisit.
   Avant, un seul webp portait un mot noir : `invert(1)` le passait en blanc sur
   fond nuit, `hue-rotate(180deg)` rattrapait la pastille devenue orange et
   `brightness(.9)` amortissait le blanc. Trois corrections pour compenser un
   fichier qui n'était pas le bon.

   `oultem-logo-dark.svg` porte déjà le mot en blanc : le filtre le RETOURNERAIT
   en noir. Il est donc retiré, pas neutralisé. */
.edouk_header_tap img {
    width: 119px    ;
    display: block;
}
.edouk_header_tap div {
    display: flex;
    align-items: center;
    gap: 15px;
}
/* Contrôles de verre, comme les commandes de la carte site : ils s'éclaircissent
   au-dessus du fond au lieu de poser leur propre couleur ( voir `--glass` ). */
.edouk_header_tap div button {
    width: 41px;
    min-width: 41px;
    max-width: 41px;
    height: 41px;
    min-height: 41px;
    max-height: 41px;
    background-color: var(--glass);
    border-radius: var(--radius);
    font-size: var(--font-s);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
}
/* `hover: hover` : sur mobile le survol resterait collé après le tap. Le décollement
   et l'ombre viennent du bloc de survol commun, plus bas. */
@media (hover: hover) {
    .edouk_header_tap div button:hover:not(:disabled) {
        background-color: var(--glass-hover-strong);
        border-color: var(--glass-border-hover);
    }
}
.edouk_header_tap div button i {
    font-size: inherit;
    color: inherit;
}
/* Sur les très petits écrans, la rangée d'icônes est passée à quatre avec la
   bascule de thème. Elles rétrécissent plutôt que de pousser le logo. */
@media (max-width: 380px) {
    .edouk_header_tap div {
        gap: 10px;
    }
    .edouk_header_tap div button {
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        font-size: var(--font-xs);
    }
}

/* ---------- Le fond de page sous la landing ----------
   SUR L'ACCUEIL, LE MESH DU BODY NE SE VOIT NULLE PART, et il coûte une frame
   entière à chaque image du défilement.

   `.edouk_body` porte `--page-mesh` en `background-attachment: fixed`. Cet
   attachement interdit au navigateur de réutiliser la surface déjà peinte quand
   la page défile : le fond doit être re-rastérisé à chaque image, recalé sur
   l'écran. Sur le tableau de bord et les pages courtes, c'est le prix du mesh et
   il se voit. Ici il ne se voit pas : les cinq sections de la landing sont
   OPAQUES ( l'encre du hero, le papier du système, le dégradé du flux, le papier
   de la méthode, l'encre du pied ), elles se touchent sans trou, et le pied
   remonte de 48px sur la section qui le précède — ses deux coins arrondis
   laissent voir ELLE, pas le body. Le mesh était peint puis recouvert, soixante
   fois par seconde, sur toute la hauteur du document.

   `:has(.edouk_lp)` et non une classe de plus sur le gabarit. */
.edouk_body:has(.edouk_lp) {
    background-image: none;
    background-attachment: scroll;
}
/* ========================================
   PAGE 404

   Elle n'a pas de header — la garde vit dans `header.html.twig`, par route. Elle
   porte donc son propre logo et sa seule sortie, centrés sur toute la hauteur.
   ======================================== */
.edouk_notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    text-align: center;
    padding: 2rem;
}
/* Le fichier du thème, comme le header — plus de filtre à compenser. */
.edouk_notfound img {
    width: 120px;
    margin-bottom: 2rem;
}
.edouk_notfound h1 {
    font-size: 5rem;
    font-weight: 700;
    margin: 0;
    color: var(--default-color);
}
.edouk_notfound p {
    font-size: 1.25rem;
    color: var(--accent-color);
    margin: 1rem 0 2rem;
}
/* La seule sortie de la page : c'est le geste principal, donc le bleu de marque. */
.edouk_notfound a {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--cta);
    color: var(--on-accent);
    border-radius: var(--radius-s);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}
@media (hover: hover) {
    .edouk_notfound a:hover {
        background: var(--cta-hover);
    }
}

/* ========================================
   CE QUI RESTE DU PRÉFIXE `edouk_landing_`

   L'accueil est passé sur `edouk_lp_` ( tout en bas de cette feuille ). Ce qui
   porte encore l'ancien préfixe n'est PAS de la dette : ce sont les quatre
   familles que d'autres écrans consomment, et elles n'ont aucune raison d'être
   renommées.

   `_badge`         | la pastille d'annonce, rendue par les quatre pages légales
   `_logo`          | le logo du pied de page
   `_form` `_drop` `_wall` `_code` `_actions` | le dépôt photo de `/register`
   `_footer*`       | le pied de page, partagé par toutes les pages publiques
   ======================================== */

/* ---------- La barre du haut ----------
   Il n'y en a PAS ici. La landing prend `.edouk_header`, le header de toute
   l'application, avec son logo, ses trois icônes et sa rangée de navigation. Un seul
   balisage à tenir, et rien qui bouge quand le visiteur passe à la connexion.

   Elle n'en change qu'une chose, ci-dessous : le fond. */

/* Ailleurs le header est opaque et repeint le mesh de la page pour coïncider avec le
   fond derrière lui. Ici la page a ses propres halos, section par section, et c'est
   eux qu'on veut voir passer dessous — donc un voile plutôt qu'un aplat, et le mesh
   du header retiré pour ne pas se superposer à celui des sections.

   `.edouk_header.edouk_header_landing` et non la classe seule : à spécificité égale
   ce serait l'ordre du fichier qui trancherait, et ça se casserait au premier
   déplacement de bloc. */
/* ⚠ CETTE RÈGLE NE PEINT PLUS RIEN. `edouk_header_hero`, juste en dessous, est
   posé sur TOUTES les pages publiques depuis le 2026-09-01 et l'écrase entièrement
   — fond, image, `backdrop-filter` et filet. La classe reste appliquée par le
   gabarit et la règle reste ici : c'est le seul endroit qui garde la trace du
   header translucide, si le bandeau devait redevenir une exception.

   Ce qu'elle disait : le filet est en `--glass-border` et non `--modal-head-border`,
   ce dernier valant `transparent` — le header aurait perdu sa limite basse et
   flotté sur la page. Et le voile partait du BLANC et non du bleu-gris de la page,
   pour que le header reste translucide mais lise blanc. */
.edouk_header.edouk_header_landing {
    background: rgba(255, 255, 255, 0.86);
    background-image: none;
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--glass-border);
}

/* LE BANDEAU DE MARQUE — SUR TOUTES LES PAGES PUBLIQUES ( 2026-09-01 ).

   Il n'a été l'exception de l'accueil qu'un temps : le voile de
   `edouk_header_landing` — blanc à 86 % — traçait une bande laiteuse en travers du
   dégradé du hero. Il est maintenant la règle des huit autres routes aussi, et
   `edouk_header_landing` ne peint plus rien.

   LE HEADER REPEINT LE MESH DU HERO : même token `--hero-mesh`, même
   `background-blend-mode`, et une surface CALÉE SUR LE VIEWPORT — d'abord par
   `attachment: fixed`, depuis le 2026-09-06 par un fond en `scroll` dimensionné
   `100vw 100vh` ( voir la règle ). Un fond calé sur la boîte se serait comprimé
   dans les 96px du header et n'aurait montré qu'une tranche écrasée du dégradé.

   D'OÙ LES DEUX COMPORTEMENTS, SANS UNE LIGNE POUR LES DISTINGUER. Sous l'accueil
   et sous les six pages `gabarit`, un calque fixe peint le même token calé sur le
   viewport ( `.edouk_lp::before`, `.gabarit::before` ) : les deux surfaces
   coïncident à n'importe quelle position de défilement et le header DISPARAÎT
   dans le fond. Ailleurs il n'y a rien dessous qui le peigne, et le même fond
   devient ce qu'il est — un aplat de marque de 96px posé sur la page.

   IL EST OPAQUE, ET C'EST CE QUI LE REND GÉNÉRALISABLE. En transparent il ne
   marchait que sur l'accueil : passé le hero, il survolait la section blanche avec
   des icônes blanches dessus.

   Le sélecteur est doublé (`.edouk_header.edouk_header_hero`) et posé APRÈS la
   règle du header translucide ci-dessus : à spécificité égale, c'est l'ordre du
   fichier qui tranche. */
/* PLUS D'`attachment: fixed` ( 2026-09-06 ). Un fond fixé sur un élément qui n'est
   pas la racine interdit au navigateur de le composer : à chaque image du
   défilement il repeignait la bande entière — dégradé, quatre halos et le grain.
   Le header est collé en haut du viewport : un fond en `scroll` DIMENSIONNÉ AU
   VIEWPORT ( `100vw 100vh`, calé en haut à gauche ) montre exactement la même
   tranche que le fond fixé, et n'est peint qu'une fois. Le hero peint le même mesh
   sur un calque `position: fixed` ( voir `.edouk_lp::before` ) : les deux
   coïncident toujours, et le header disparaît dans le hero comme avant. */
.edouk_header.edouk_header_hero {
    background-color: #1031a9;
    background-image: var(--hero-mesh);
    background-blend-mode: var(--hero-mesh-blend);
    background-attachment: scroll;
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    backdrop-filter: none;
    height: 91px;
    -webkit-backdrop-filter: none;
    border-bottom: none;
}
/* LE BANDEAU EST SOMBRE, donc ce qu'il porte est blanc. Le logo suit par le Twig
   ( le gabarit sert le fichier sombre, dont le mot est blanc ) ; les icônes de
   verre, elles, se peignent ici.

   La couleur est posée sur le BOUTON et non sur son `<i>` : le `<i>` est déjà en
   `color: inherit` plus haut, et le verre du hero est celui de la maquette —
   blanc à 14 %, filet à 28 %, exactement la pastille de son badge. */
.edouk_header_hero .edouk_header_tap div button {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    box-shadow: none;
}
@media (hover: hover) {
    .edouk_header_hero .edouk_header_tap div button:hover:not(:disabled) {
        background-color: rgba(255, 255, 255, 0.26);
        border-color: rgba(255, 255, 255, 0.5);
    }
}

/* LE BOUTON D'APPEL DU HEADER ( 2026-09-06 ). C'EST LE BOUTON DU HERO ( `.edouk_lp_cta`,
   « Être rappelé sous 24 h » ) À LA HAUTEUR DES ICÔNES DE VERRE : même couleur
   d'appel, même rayon, même ombre, même écart, même flèche mint qui se retourne en
   arabe — 41px au lieu de 52, le header ne grandit pas d'un pixel. Il est le
   dernier de la rangée, tout à droite.

   DEUX LIBELLÉS DANS LE BOUTON, UN SEUL RENDU : le long ( celui du hero ) partout,
   le court ( « CALLME » ) sous 480px, où le long ne tient pas entre le logo et le
   globe. Les deux `<span>` reprennent la taille du bouton — la règle `span`
   d'`edouk.css` leur poserait la sienne. */
.edouk_header_tap div .edouk_header_cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 41px;
    padding: 0 20px;
    border-radius: var(--radius);
    background: var(--cta);
    color: var(--on-accent);
    font-size: var(--font-s);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 30px -12px rgba(49, 107, 255, 0.7);
    transition: all 0.18s ease;
}
.edouk_header_cta_long,
.edouk_header_cta_short {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
.edouk_header_cta_short {
    display: none;
}
@media (hover: hover) {
    .edouk_header_tap div .edouk_header_cta:hover {
        background: var(--cta-hover);
        color: var(--on-accent);
        transform: translateY(-1px);
    }
}
@media (max-width: 479px) {
    .edouk_header_cta_long {
        display: none;
    }
    .edouk_header_cta_short {
        display: inline;
    }
}
/* Même palier que les icônes : sous 380px le bouton rétrécit avec elles, et la
   flèche tombe pour laisser sa place au logo. */
@media (max-width: 380px) {
    .edouk_header_tap div .edouk_header_cta {
        height: 36px;
        padding: 0 12px;
        font-size: var(--font-xs);
    }
    .edouk_header_tap div .edouk_header_cta .edouk_lp_arrow {
        display: none;
    }
}
/* LE RETOUR AU SITE ( 2026-09-06 ). Sur les six pages du monde `gabarit` —
   connexion, inscription, mot de passe, capture, remerciement — il remplace le
   CTA et le globe : le visiteur est déjà dans le geste, on ne lui propose que la
   sortie. Même hauteur que les icônes ; la flèche se retourne en arabe. */
.edouk_header_tap div .edouk_header_back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    font-size: var(--font-s);
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    transition: color 0.18s ease;
}
.edouk_header_tap div .edouk_header_back span {
    font-size: var(--font-m);
    line-height: 1;
    color: inherit;
}
html[dir="rtl"] .edouk_header_tap div .edouk_header_back span {
    display: inline-block;
    transform: scaleX(-1);
}
@media (hover: hover) {
    .edouk_header_tap div .edouk_header_back:hover {
        color: var(--mint-light);
    }
}

/* Le logo du pied de page. Le fichier du thème, comme le header. */
.edouk_landing_logo {
    width: 92px;
    display: block;
}

/* ---------- Ce que les quatre sections partagent ----------
   La pastille d'annonce, les deux niveaux de titre, le chapô. Écrits une fois. */
.edouk_landing_badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--glass-border-hover);
    border-radius: 999px;
    /* Une pastille blanche, comme la maquette V4 — le voile bleu se confondait
       avec les halos du mesh. */
    background: #ffffff;
    color: var(--primary-color);
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 8px 16px;
}
.edouk_landing_badge i {
    font-size: var(--font-xs);
    color: var(--primary-color);
}
/* ---------- Le pied de page ----------
   IL EST ENCRE DANS LES DEUX THÈMES, comme la maquette. En clair c'est le
   contraste voulu — un bloc profond qui ferme la page ; en sombre c'est déjà la
   couleur du fond, et seules les épaules arrondies le détachent.

   Aucun token de thème ne peut donc servir ici : `--default-color` vaut #e3e8f5
   en sombre et #0a1330 en clair, exactement l'inverse de ce qu'on veut. Les
   couleurs sont écrites sur `--ink` et sur des blancs translucides, qui se lisent
   pareil des deux côtés.

   LA REMONTÉE DE 48px ET LES ÉPAULES sont ce qui fait la profondeur de la
   maquette : le pied glisse sous la section qui le précède, et son arrondi la
   découpe. Le `z-index` est indispensable — sans lui la section au-dessus, plus
   loin dans le flux, passerait par-dessus l'arrondi. */
.edouk_landing_footer {
    position: relative;
    z-index: 1;
    border-radius: 48px 48px 0 0;
    background: var(--ink);
    overflow: hidden;
}
/* LA REMONTÉE N'EXISTE QUE SOUS LA LANDING. Ce pied est partagé par la connexion,
   l'inscription et les quatre documents légaux, dont le dernier bloc n'a pas les
   132px de dégagement de la dernière section de l'accueil : un -48px y mangerait
   la marge et l'épaule viendrait rogner la dernière carte.

   `+` et non `~` : les deux blocs sont des enfants directs de `<body>` et se
   suivent ( voir `auth/base.html.twig` ), et l'adjacence dit exactement ce qu'on
   veut — la landing, et rien d'autre. */
.edouk_lp + .edouk_landing_footer {
    margin-top: -48px;
}
.edouk_landing_footer_cols {
    padding: clamp(52px, 6vw, 88px) 0 44px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 36px;
}
.edouk_landing_footer_cols > div {
    display: grid;
    align-content: start;
    gap: 11px;
}
.edouk_landing_footer_cols .edouk_landing_logo {
    width: auto;
    max-width: 119px;
    height: 28px;
    margin-bottom: 5px;
}
.edouk_landing_footer_cols p,
.edouk_landing_footer_cols a,
.edouk_landing_footer_cols span {
    font-size: var(--font-s);
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
}
.edouk_landing_footer_cols > div:first-child p {
    max-width: 280px;
    color: rgba(255, 255, 255, 0.6);
    text-wrap: pretty;
}
/* LES TITRES DE COLONNE SONT EN MONO, comme les surtitres de la landing : c'est
   ce qui les distingue des liens sans avoir à les grossir. Plus spécifique que
   `.edouk_landing_footer_cols p`, qui les repeindrait autrement. */
.edouk_landing_footer_cols .edouk_landing_footer_head {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
}
/* L'arabe ne s'espace pas lettre à lettre, la ligature se casserait — et il ne
   passe pas par IBM Plex Mono, qui n'a pas d'arabe. */
html[lang="ar"] .edouk_landing_footer_cols .edouk_landing_footer_head {
    font-family: inherit;
    letter-spacing: 0;
}
/* La promesse de délai, en mint sur l'encre — le seul endroit du pied où la
   couleur d'accent apparaît. */
.edouk_landing_footer_promise {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-self: start;
    margin-top: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--mint-veil);
    border: 1px solid var(--mint-line);
    font-size: var(--font-s)!important;
    font-weight: 600;
    color: var(--mint);
    white-space: nowrap;
}
/* LES DEUX RÉSEAUX DE LA COLONNE CONTACT, EN PASTILLES DE VERRE. Deux glyphes nus
   se seraient lus comme une quatrième ligne de texte : la tuile en fait un bouton,
   et reprend le verre du bouton fantôme du hero — même rayon, même transition.
   `justify-self: start` garde le rang à gauche en LTR comme à droite en RTL. */
.edouk_landing_footer_social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    margin-top: 6px;
}
.edouk_landing_footer_social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    /* La taille sert d'`em` aux masques `.edk-icon::before`, qui font 1.25em : le
       dessin fait donc 19px dans une tuile de 40. */
    font-size: 15px;
    transition: all 0.18s ease;
}
@media (hover: hover) {
    .edouk_landing_footer_social a:hover {
        background: var(--mint-veil);
        border-color: var(--mint-line);
        color: var(--mint);
        transform: translateY(-2px);
    }
}
.edouk_landing_footer_legal {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.edouk_landing_footer_legal p {
    padding: 18px 0;
    font-size: var(--font-s);
    color: rgba(255, 255, 255, 0.45);
}
@media (hover: hover) {
    .edouk_landing_footer_cols a:hover {
        color: var(--mint);
    }
}

/* Le mur de photos de `/register` est le seul point de rupture de ce bloc : ses
   vignettes passent de trois à quatre en desktop, et le mur ne changeant plus de
   largeur passé 620px, aucune formule fluide ne peut le faire. */

/* ========================================
   PAGES LÉGALES (/terms /legal /privacy /cookies)
   L'UI du mockup « Pages Légales » ramenée sur les variables de l'application :
   aucune couleur n'est posée en dur.
   ======================================== */
.edouk_legal {
    background-color: var(--bg-page);
}
.edouk_legal_hero {
    background-color: var(--bg-page);
    background-image: var(--legal-mesh-hero);
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--glass-border);
}
/* Le hero dégage la hauteur du header fixe — mêmes valeurs que `.edouk_main` :
   168px pour les deux rangées d'un compte, 96px pour un visiteur. */
.edouk_legal_hero .edouk_legal_wrap {
    padding-top: calc(96px + clamp(24px, 4vw, 48px));
    padding-bottom: clamp(28px, 4vw, 44px);
}
.edouk_legal_public .edouk_legal_hero .edouk_legal_wrap {
    padding-top: calc(96px + clamp(24px, 4vw, 48px));
}
.edouk_legal_h1 {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(calc(var(--font-l) * 2), 4.2vw, calc(var(--font-l) * 2.75));
    line-height: 1.05;
    letter-spacing: -0.032em;
    color: var(--default-color);
    margin: 22px 0 0;
    text-wrap: balance;
}
.edouk_legal_intro {
    font-size: calc(var(--font-m) + 1px);
    line-height: 1.6;
    color: var(--accent-color);
    margin: 16px 0 0;
    max-width: 620px;
    text-wrap: pretty;
}
.edouk_legal_updated {
    font-size: var(--font-xs);
    color: var(--accent-color);
    margin: 18px 0 0;
}
/* Les onglets : des LIENS entre les quatre documents — le mockup les basculait en
   place, ici chaque document a sa route et l'actif se surligne. */
.edouk_legal_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.edouk_legal_tabs a {
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--glass);
    color: var(--accent-color);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}
@media (hover: hover) {
    .edouk_legal_tabs a:hover {
        color: var(--default-color);
        background: var(--glass-hover-strong);
    }
}
.edouk_legal_tabs a.active {
    background: var(--cta);
    color: var(--on-accent);
    border-color: var(--cta);
}

/* ---------- Le corps : sommaire + cartes ---------- */
.edouk_legal_body .edouk_legal_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 56px);
    padding-top: clamp(36px, 5vw, 64px);
    padding-bottom: clamp(48px, 7vw, 88px);
}
/* LE SOMMAIRE EST STATIQUE PAR DÉFAUT — c'était le bug du mockup : sticky en
   mobile, il recouvrait le contenu. Il ne se colle qu'en desktop, plus bas. */
.edouk_legal_toc {
    flex: 1 1 260px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
    background: var(--glass);
    padding: 20px;
}
/* Les surtitres passent en mono, comme ceux de la landing : c'est ce qui les
   distingue d'un lien sans avoir à les grossir. */
.edouk_legal_toc > p {
    margin: 0 0 14px;
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-color);
}
/* L'arabe ne s'espace pas lettre à lettre : la ligature se casserait. */
html[lang="ar"] .edouk_legal_toc > p,
html[lang="ar"] .edouk_legal_toc ol a span,
html[lang="ar"] .edouk_legal_card_head span {
    font-family: inherit;
    letter-spacing: 0;
}
.edouk_legal_toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.edouk_legal_toc ol a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: var(--font-s);
    line-height: 1.5;
    color: var(--accent-color);
    padding: 8px 10px;
    border-radius: 7px;
    transition: var(--transition);
}
.edouk_legal_toc ol a span {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--primary-color);
}
@media (hover: hover) {
    .edouk_legal_toc ol a:hover {
        color: var(--default-color);
        background: var(--glass-hover);
    }
}
.edouk_legal_articles {
    flex: 999 1 420px;
    min-width: 0;
    display: grid;
    gap: 14px;
}
/* L'ancre atterrit sous le header fixe : la marge de défilement dégage sa hauteur,
   dans les deux états. */
.edouk_legal_card {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
    background: var(--glass);
    padding: clamp(20px, 3vw, 30px);
    scroll-margin-top: 124px;
}
.edouk_legal_public .edouk_legal_card {
    scroll-margin-top: 124px;
}
.edouk_legal_card_head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.edouk_legal_card_head span {
    font-family: var(--font-mono);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    flex: none;
}
.edouk_legal_card_head h2 {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(var(--font-l), 2.2vw, calc(var(--font-l) + 4px));
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--default-color);
}
.edouk_legal_card p {
    margin: 14px 0 0;
    font-size: var(--font-s);
    line-height: 1.8;
    color: var(--accent-color);
    text-wrap: pretty;
}
.edouk_legal_card p a {
    color: var(--primary-color);
}
@media (hover: hover) {
    .edouk_legal_card p a:hover {
        color: var(--default-color);
    }
}
/* La carte contact : le voile bleu de la marque, comme l'appel du mockup. */
.edouk_legal_contactcard {
    border-color: var(--glass-border-hover);
    background: var(--bg-soft);
}
.edouk_legal_contactcard h2 {
    margin: 0;
    font-family: "Poppins", system-ui, sans-serif;
    font-size: var(--font-l);
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--default-color);
}

/* Desktop : le sommaire se borne et se colle sous le header — jamais en mobile,
   c'était le bug du mockup. */
@media (min-width: 992px) {
    .edouk_legal_toc {
        max-width: 320px;
        position: sticky;
        top: 188px;
    }
    .edouk_legal_public .edouk_legal_toc {
        top: 116px;
    }
}

/* ========================================
   LA LANDING D'ACQUISITION ( « / » )

   Le portage de `Design system pour agence Facebook/export-v2/index.html`. La
   maquette posait chaque mesure en `style=""` ; ici chacune est une classe, et
   chaque COULEUR passe par un token. C'est cette seule substitution qui fait
   exister le thème sombre : il n'y a pas de seconde page à tenir.

   LES TAILLES DE POLICE SONT CELLES DE LA MAQUETTE, en dur. C'est une exception
   assumée à la règle du reste de cette feuille, qui écrit tout sur les quatre
   tokens de `:root` : l'ancienne landing descendait volontairement d'un cran, et
   ce cran est exactement ce qu'un rendu « équivalent » interdit. Connexion,
   inscription et pages légales, elles, gardent l'échelle des tokens.

   LA MESURE HORIZONTALE, ELLE, EST CELLE DE L'APPLICATION — `.edouk_container`,
   posé dans le gabarit à côté de chaque wrap. La largeur de la maquette ( 1160px,
   28px de gouttière ) a été essayée et retirée : `box-sizing: border-box` est
   global, donc son `max-width` incluait le padding et le contenu des sections
   partait 28px plus à droite que le logo du header, qui n'a pas ce padding. Une
   largeur ne vaut pas un alignement.

   Ce bloc n'écrit donc AUCUNE mesure horizontale — que du `padding-block`. Le
   raccourci `padding` écraserait la gouttière du conteneur.
   ======================================== */

/* Le décalage du toast du CRM déborde de quelques pixels à droite. `clip` et non
   `hidden` : sur iOS, `hidden` sur un parent dont un enfant porte un `transform`
   crée un conteneur de défilement fantôme. */
.edouk_lp {
    overflow-x: clip;
}
/* LES SVG EN LIGNE PRENNENT LA COULEUR DE LEUR PARENT, et il faut le dire.
   Le sélecteur `*` d'`edouk.css` pose `color: var(--accent-color)` sur TOUT, `svg`
   compris : sans cette ligne, chaque `stroke="currentColor"` de la page se
   résoudrait en gris de corps, quelle que soit la pastille qui le porte. Les trois
   icônes qui veulent une autre couleur que leur parent la redéclarent plus bas.

   ET LEURS ENFANTS AUSSI ( 2026-09-07 ). Le `*` peint également chaque `<path>`,
   et `stroke="currentColor"` se résout sur la couleur du `path`, pas sur celle du
   `<svg>` : le combiné de l'étape 3, le rond de l'appel, la coche et l'icône de la
   notification se rendaient en gris sur leur fond bleu. */
.edouk_lp svg,
.edouk_lp svg * {
    color: inherit;
}
/* LA GOUTTIÈRE HORIZONTALE VIENT DE `.edouk_container`, ET D'ELLE SEULE. La
   landing n'a pas de mesure à elle : elle prend celle de toute l'application,
   posée à côté de cette classe dans le gabarit. C'est ce qui fait tomber le logo
   du header, le titre du hero et le pied de page sur la même verticale.

   `padding-block` et non `padding` : le raccourci écraserait les gouttières que
   `.edouk_container` vient de poser. Seul le rythme VERTICAL est écrit ici. */
.edouk_lp_wrap {
    padding-block: 100px;
}

/* ---------- Le hero ----------
   Trois couches empilées : le dégradé sur la section, les deux halos, le grain.
   Les deux dernières sont des balises et non des pseudo-éléments — `::before` et
   `::after` d'une même section ne peuvent pas porter deux `mix-blend-mode`
   différents sans se marcher dessus. */
/* LES TROIS COUCHES SONT DES CALQUES DE FOND, PLUS DEUX BALISES.

   Elles vivaient dans deux `<span>` posés en `inset: 0`, dont celui du grain en
   `mix-blend-mode: overlay`. Trois raisons de les avoir retirés :

   — un `mix-blend-mode` se compose avec le fond de son plus proche contexte
     d'empilement. Sans contexte ici, c'était la racine du document : le navigateur
     remontait tout le hero dans une couche à part, qui repassait au-dessus de la
     section suivante et se recomposait à chaque image du défilement ;
   — deux `<span>` calés sur la BOÎTE du hero ne peuvent pas coïncider avec un
     header calé sur le VIEWPORT ;
   — et surtout, le header ne peut pas porter de balises à lui : son gabarit est
     partagé par toutes les pages publiques.

   `background-blend-mode` fait le même mélange, entre les calques du même élément,
   sans rien remonter et sans balise. Le header reprend les trois lignes plus bas.

   `z-index: 0` reste, et ne fait plus qu'une chose : dire explicitement que le
   hero est SOUS l'épaule de la section suivante ( `z-index: 1` ). Sans ce chiffre
   l'ordre ne tiendrait qu'à la position des blocs dans le gabarit. */
.edouk_lp_hero {
    position: relative;
    z-index: 0;
    contain: paint;
    overflow: hidden;
}
/* LE MESH DU HERO EST UN CALQUE FIXE DERRIÈRE LA PAGE ( 2026-09-06 ), et plus un
   fond en `attachment: fixed` sur la section. Le fond fixé repeignait un plein
   écran de dégradé et de grain à chaque image du défilement tant que le hero
   était visible — c'était l'à-coup du haut de page. Un pseudo-élément en
   `position: fixed` est composé une fois par le navigateur et ne se repeint
   plus au défilement.

   `z-index: -1` DANS LE CONTEXTE RACINE : `.edouk_lp` n'est ni positionné ni
   transformé, le calque se pose donc sous tout le contenu en flux et au-dessus
   du fond de page ( le body ne peint plus son mesh sur l'accueil ). Le hero, lui,
   n'a plus de fond : c'est ce calque qu'on voit à travers. Les sections suivantes
   sont opaques et se touchent sans trou — la même raison qui a éteint le mesh du
   body — donc rien du calque ne dépasse sous elles.

   Il coïncide avec le header au pixel : le header peint le même token en
   `100vw 100vh` calé en haut à gauche, c'est-à-dire la même tranche du même
   dégradé calé sur le viewport. */
.edouk_lp::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #1031a9;
    background-image: var(--hero-mesh);
    background-blend-mode: var(--hero-mesh-blend);
    background-repeat: no-repeat;
}
/* LE HERO DÉGAGE LA HAUTEUR DU HEADER. La maquette n'en avait pas et ouvrait à
   84px ; le header est `fixed` sur 96px et flotte au-dessus, donc les deux
   s'additionnent. Le bas garde les 132px de la maquette : sur un dégradé pleine
   largeur, une section plus haute ne se voit pas, une pastille sous le logo si. */
/* `min()` DANS LE `minmax` : `minmax(330px, ...)` est un plancher DUR sur la piste,
   qu'`auto-fit` ne descend jamais. Sous 367px de viewport ( le container est à
   `padding: 0 5%`, donc 90 % ) la piste dépassait la mesure et la carte de capture
   sortait par la droite — l'`overflow: hidden` du hero la ROGNAIT au lieu de la
   laisser déborder, ce qui cachait le symptôme et coupait le formulaire. */
/* LA V2 EST EN UNE COLONNE CENTRÉE ( 2026-09-06 ) : plus de grille. La maquette
   ouvre à 96px ; le même 53px de dégagement du header s'y ajoute. La laize de 820px
   de la maquette inclut ses 28px de gouttière : 764px de contenu, posés sur la
   pile et non sur le wrap, qui garde la gouttière de `.edouk_container`. */
.edouk_lp_hero_wrap {
    position: relative;
    padding-block: calc(53px + 96px) 132px;
}
.edouk_lp_hero_copy {
    width: 100%;
    max-width: 764px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 26px;
}
.edouk_lp_pill {
    display: inline-flex;
    align-self: center;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    white-space: nowrap;
}
/* LE POINT QUI BAT. Deux `<span>` superposés : l'un grossit et s'efface, l'autre
   reste. Un seul élément avec `::after` aurait suffi, mais le point vit aussi
   dans le pied de page et dans la troisième étape — une balise commune évite
   d'écrire le même pseudo-élément trois fois. */
.edouk_lp_dot {
    position: relative;
    display: flex;
    flex: none;
    width: 8px;
    height: 8px;
}
.edouk_lp_dot span {
    border-radius: 999px;
    background: var(--mint);
}
.edouk_lp_dot span:first-child {
    position: absolute;
    inset: 0;
    animation: edouk_lp_ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.edouk_lp_dot span:last-child {
    position: relative;
    width: 8px;
    height: 8px;
}
@keyframes edouk_lp_ping {
    0%        { transform: scale(1);   opacity: 0.6; }
    70%, 100% { transform: scale(2.4); opacity: 0; }
}
.edouk_lp_h1 {
    margin: 0;
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.038em;
    color: #ffffff;
    text-wrap: balance;
}
/* `em` pour le sens, jamais pour l'italique — c'est la couleur qui détache. La
   V2 prend le mint CLAIR, et souligne un mot de plus à l'intérieur. */
.edouk_lp_h1 em {
    font-style: normal;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--mint-light);
}
/* LE TITRE ARRIVE MOT À MOT ( brief hero, 2026-09-06 ). Chaque mot est un
   `inline-block` — sinon `translateY` ne s'applique pas — qui monte de 30px en se
   redressant d'un degré. Le délai suit le rang : 0,3 s pour le premier, puis
   75 ms de plus par mot ( le titre le plus long, en français, en a huit ; neuf
   rangs pour la marge ). `both` : l'état de départ ( invisible ) s'applique dès
   le chargement, avant le délai. */
.edouk_lp_word {
    display: inline-block;
    /* `color: inherit` : le sélecteur `*` d'`edouk.css` peint chaque `<span>` en
       gris de corps. Avant le mot à mot, le texte du `h1` héritait de son blanc
       directement ; les mots doivent le faire aussi. L'`em` garde son mint. */
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    animation: edouk_lp_in_word 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_word:nth-child(1) { animation-delay: 0.300s; }
.edouk_lp_word:nth-child(2) { animation-delay: 0.375s; }
.edouk_lp_word:nth-child(3) { animation-delay: 0.450s; }
.edouk_lp_word:nth-child(4) { animation-delay: 0.525s; }
.edouk_lp_word:nth-child(5) { animation-delay: 0.600s; }
.edouk_lp_word:nth-child(6) { animation-delay: 0.675s; }
.edouk_lp_word:nth-child(7) { animation-delay: 0.750s; }
.edouk_lp_word:nth-child(8) { animation-delay: 0.825s; }
.edouk_lp_word:nth-child(9) { animation-delay: 0.900s; }
/* LE MOT SOULIGNÉ. Le trait n'est plus une image de fond sur le mot : c'est un
   `<span>` absolu enfant du mot, 6px de mint clair calé à 8 % du bas, qui SE
   DESSINE en `scaleX` depuis la gauche ( depuis la droite en arabe ) une fois
   tous les mots posés, à 1,05 s. */
.edouk_lp_word_mark {
    position: relative;
    padding: 0 3px;
}
.edouk_lp_word_line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    height: 6px;
    border-radius: 2px;
    background: var(--mint-light);
    transform-origin: left;
    animation: edouk_lp_underline 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1.05s both;
}
html[dir="rtl"] .edouk_lp_word_line {
    transform-origin: right;
}
.edouk_lp_hero_lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    text-wrap: pretty;
}

/* LES DEUX APPELS DU HERO ( 2026-09-06 ). La carte de capture est partie sur
   `/callme` ; à sa place, une rangée de deux boutons sous le chapô. Le plein est
   `.edouk_lp_cta` tel quel — le même que la sortie de la section méthode — et le
   `margin-top: 0` retire son décalage, que la pile du hero porte déjà par son
   `gap`, comme le fait `.edouk_lp_method_cta`. */
.edouk_lp_hero_cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}
.edouk_lp_hero_cta .edouk_lp_cta {
    margin-top: 0;
}
/* ---------- L'entrée chorégraphiée du hero ( brief hero, 2026-09-06 ) ----------
   Une seule courbe pour tout : `cubic-bezier(.2,.8,.2,1)`. L'ordre : la pastille
   à 0,18 s, les mots du titre de 0,3 à 0,9 s, le chapô à 0,82, les boutons à
   0,96, le trait sous le mot à 1,05, l'indicateur de défilement à 1,35. Le hero
   est assemblé en 1,4 s. ( La ligne de réassurance sous les boutons est partie le
   2026-09-07. ) Rien n'anime autre chose
   que `transform` et `opacity`.

   LE HEADER N'ENTRE PAS : il est le même sur toutes les pages publiques et doit
   paraître figé d'une page à l'autre — le brief l'animait sur un site statique
   dont le header appartenait au hero. */
.edouk_lp_hero_copy .edouk_lp_pill {
    animation: edouk_lp_in_up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s both;
}
.edouk_lp_hero_lead {
    animation: edouk_lp_in_up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.82s both;
}
.edouk_lp_hero_cta {
    animation: edouk_lp_in_up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.96s both;
}
/* LE REFLET QUI BALAIE LE BOUTON PLEIN. Un voile bleu à 16 % sur 34 % de la
   largeur, qui traverse toutes les 5,2 s, à partir de 2 s — après l'entrée. Il
   passe SOUS le texte : le bouton isole son empilement ( `isolation` ), et le
   reflet est en `z-index: -1` dedans, donc au-dessus du fond blanc du bouton et
   sous son libellé, sans envelopper celui-ci. */
.edouk_lp_shine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(49, 107, 255, 0.16), transparent);
    animation: edouk_lp_shine 5.2s ease-in-out 2s infinite;
}
/* L'INDICATEUR DE DÉFILEMENT : le surtitre mono, une souris de 24 × 38 qui
   respire ( 6px, 2,6 s ) et sa molette mint qui tombe et s'efface ( 2,2 s ). */
.edouk_lp_cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    animation: edouk_lp_in_up 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.35s both;
}
.edouk_lp_cue_label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.edouk_lp_cue_mouse {
    position: relative;
    display: flex;
    justify-content: center;
    width: 24px;
    height: 38px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    animation: edouk_lp_cue 2.6s ease-in-out infinite;
}
.edouk_lp_cue_mouse span {
    position: absolute;
    top: 7px;
    width: 4px;
    height: 8px;
    border-radius: 999px;
    background: var(--mint-light);
    animation: edouk_lp_cue_dot 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
/* LE CALQUE DE PARALLAXE enveloppe les décors flottants. Il fait la taille de la
   section, leurs positions en pourcentage ne bougent pas, et c'est lui seul que
   `landing_controller` déplace ( `translate3d`, dans un `requestAnimationFrame` ) :
   16 % de la vitesse du défilement, ±22px / ±14px à la souris. Composé, jamais
   repeint. */
.edouk_lp_parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
}
/* LES DEUX BOUTONS DU HERO V2 : le plein est BLANC sur encre, et vire au mint au
   survol ; le verre n'a qu'un filet. 56px, un cran au-dessus des 52 de la page. */
.edouk_lp_hero_btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 28px;
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 18px 38px -14px rgba(4, 14, 50, 0.75);
    transition: all 0.18s ease;
}
@media (hover: hover) {
    .edouk_lp_hero_btn:hover {
        background: var(--mint);
        color: var(--ink);
        transform: translateY(-2px);
    }
}
.edouk_lp_hero_ghost {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 26px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.18s ease;
}
@media (hover: hover) {
    .edouk_lp_hero_ghost:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.55);
        color: #ffffff;
    }
}

/* La flèche est mint dans tous les boutons pleins de la page. Elle se retourne en
   arabe : c'est une direction, pas un signe. */
.edouk_lp_arrow {
    color: var(--mint);
    font-size: 18px;
    line-height: 1;
}
html[dir="rtl"] .edouk_lp_arrow {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---------- Les épaules ----------
   LA SECTION REMONTE SOUS LE HERO ET L'ARRONDIT. C'est ce chevauchement qui donne
   sa profondeur à la maquette. Le `z-index` est indispensable : sans lui le hero,
   plus haut dans le flux mais porteur d'un fond, resterait au-dessus de l'arrondi
   et l'épaule ne se verrait pas. */
.edouk_lp_shoulder {
    position: relative;
    z-index: 1;
    margin-top: -48px;
    border-radius: 48px 48px 0 0;
    box-shadow: 0 -30px 60px -34px rgba(4, 14, 50, 0.55);
}

/* ---------- Ce que les trois sections partagent ---------- */
.edouk_lp_intro {
    max-width: 680px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
/* Le surtitre en mono, dans le bleu profond de la maquette (#1031A9). */
.edouk_lp_over {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--cta-hover);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
/* L'arabe ne s'espace pas lettre à lettre — la ligature se casserait — et il ne
   passe pas par IBM Plex Mono, qui n'en a pas le jeu. */
html[lang="ar"] .edouk_lp_over,
html[lang="ar"] .edouk_lp_step_over,
html[lang="ar"] .edouk_lp_step_foot,
html[lang="ar"] .edouk_lp_chain_time,
html[lang="ar"] .edouk_lp_mock_week_label,
html[lang="ar"] .edouk_lp_mock_reply_label,
html[lang="ar"] .edouk_lp_float_tag,
html[lang="ar"] .edouk_lp_float_capi_text,
html[lang="ar"] .edouk_lp_float_pill_text,
html[lang="ar"] .edouk_lp_pipe_num,
html[lang="ar"] .edouk_lp_crm_label,
html[lang="ar"] .edouk_lp_site_brand,
html[lang="ar"] .edouk_lp_call_time,
html[lang="ar"] .edouk_lp_cue_label {
    font-family: inherit;
    letter-spacing: 0;
}
/* L'ÉCHELLE DES TITRES DE LA V2 : un cran = ×0,9 ( hero 68 · système 61 · flux 55
   · méthode 45 ). La règle porte le premier cran, les deux modificateurs plus
   bas descendent les deux autres. */
.edouk_lp_h2 {
    margin: 0;
    font-size: clamp(34px, 4.86vw, 61px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.038em;
    color: var(--default-color);
    text-wrap: balance;
}
/* LE SURLIGNEUR MINT. Un dégradé plat de 9px calé sur la ligne de base, en fond :
   un `border-bottom` suivrait la boîte et non le texte, et un `::after` ne
   pourrait pas se replier sur deux lignes. */
.edouk_lp_h2 em {
    font-style: normal;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--primary-color);
    background: linear-gradient(var(--mint), var(--mint)) no-repeat 0 92% / 100% 8px;
    border-radius: 2px;
    padding: 0 3px;
}
/* L'EN-TÊTE DE LA SECTION 2 S'ASSEMBLE À L'ENTRÉE EN VUE ( brief section 2,
   2026-09-06 ). Tout y porte `data-anim` : en pause à la naissance, lancé par
   `is_live` sur la scène. Le surtitre à 0,02 s, le chapô à 0,6 s, et les mots du
   titre à 0,12 s puis 70 ms par rang — un tempo plus serré que le hero, d'où ces
   délais scopés à la section qui recouvrent ceux de `.edouk_lp_word`. */
.edouk_lp_system .edouk_lp_over,
.edouk_lp_flow .edouk_lp_over,
.edouk_lp_method .edouk_lp_over {
    animation: edouk_lp_in_up 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.02s both;
}
.edouk_lp_method .edouk_lp_intro .edouk_lp_lead {
    animation: edouk_lp_in_up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
.edouk_lp_system .edouk_lp_intro .edouk_lp_lead {
    animation: edouk_lp_in_up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s both;
}
.edouk_lp_flow .edouk_lp_flow_copy .edouk_lp_lead {
    animation: edouk_lp_in_up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.52s both;
}
.edouk_lp_system .edouk_lp_word:nth-child(1), .edouk_lp_flow .edouk_lp_word:nth-child(1), .edouk_lp_method .edouk_lp_word:nth-child(1) { animation-delay: 0.12s; }
.edouk_lp_system .edouk_lp_word:nth-child(2), .edouk_lp_flow .edouk_lp_word:nth-child(2), .edouk_lp_method .edouk_lp_word:nth-child(2) { animation-delay: 0.19s; }
.edouk_lp_system .edouk_lp_word:nth-child(3), .edouk_lp_flow .edouk_lp_word:nth-child(3), .edouk_lp_method .edouk_lp_word:nth-child(3) { animation-delay: 0.26s; }
.edouk_lp_system .edouk_lp_word:nth-child(4), .edouk_lp_flow .edouk_lp_word:nth-child(4), .edouk_lp_method .edouk_lp_word:nth-child(4) { animation-delay: 0.33s; }
.edouk_lp_system .edouk_lp_word:nth-child(5), .edouk_lp_flow .edouk_lp_word:nth-child(5), .edouk_lp_method .edouk_lp_word:nth-child(5) { animation-delay: 0.40s; }
.edouk_lp_system .edouk_lp_word:nth-child(6), .edouk_lp_flow .edouk_lp_word:nth-child(6), .edouk_lp_method .edouk_lp_word:nth-child(6) { animation-delay: 0.47s; }
.edouk_lp_system .edouk_lp_word:nth-child(7), .edouk_lp_flow .edouk_lp_word:nth-child(7), .edouk_lp_method .edouk_lp_word:nth-child(7) { animation-delay: 0.54s; }
.edouk_lp_system .edouk_lp_word:nth-child(8), .edouk_lp_flow .edouk_lp_word:nth-child(8), .edouk_lp_method .edouk_lp_word:nth-child(8) { animation-delay: 0.61s; }
.edouk_lp_system .edouk_lp_word:nth-child(9), .edouk_lp_flow .edouk_lp_word:nth-child(9), .edouk_lp_method .edouk_lp_word:nth-child(9) { animation-delay: 0.68s; }
/* Dans la section 3 l'accent est DANS le mot ( `span.edouk_lp_word > em` ), pour
   que le point final reste hors du trait : l'`em` n'est plus lui-même un mot. */
.edouk_lp_word > .edouk_lp_word_mark {
    display: inline-block;
}
/* Dans un titre de section, l'accent souligné cesse d'être une image de fond et
   devient le même `<span>` que dans le hero, en mint plein et 8px comme le
   surligneur qu'il remplace, tracé à 0,92 s. */
.edouk_lp_h2 em.edouk_lp_word_mark {
    background: none;
}
.edouk_lp_h2 .edouk_lp_word_line {
    height: 8px;
    background: var(--mint);
    animation-delay: 0.92s;
}
.edouk_lp_h2_flow .edouk_lp_word_line {
    height: 7px;
    animation-delay: 0.85s;
}
.edouk_lp_h2_method .edouk_lp_word_line {
    height: 6px;
    animation-delay: 0.7s;
}
.edouk_lp_lead {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--accent-color);
    max-width: 580px;
    text-wrap: pretty;
}
/* LES TROIS INTROS DE LA V2 NE FONT PAS LA MÊME MESURE. Le système est plus large
   ( 700px, chapô à 18px sur 560 ), la méthode garde 680 mais son chapô court sur
   600. Le surligneur du titre s'amincit d'un cran avec le titre : 8, 7, 6px. */
.edouk_lp_intro_wide {
    max-width: 700px;
    gap: 18px;
}
.edouk_lp_intro_wide .edouk_lp_lead {
    font-size: 18px;
    line-height: 1.6;
    max-width: 560px;
}
.edouk_lp_h2_flow {
    font-size: clamp(31px, 4.37vw, 55px);
    line-height: 1.04;
}
.edouk_lp_h2_flow em {
    background-size: 100% 7px;
}
.edouk_lp_h2_method {
    font-size: clamp(28px, 3.54vw, 45px);
    line-height: 1.06;
}
.edouk_lp_h2_method em {
    background-size: 100% 6px;
}
.edouk_lp_method .edouk_lp_lead {
    max-width: 600px;
}
/* Même `min()` que le hero et les deux autres grilles : sans lui la piste reste à
   280px sous 311px de viewport, et l'`overflow: hidden` de la section rogne la
   dernière carte au lieu de la replier. Partagé avec la section méthode. */
.edouk_lp_grid3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin-top: 56px;
}

/* ---------- Le système — trois briques ---------- */
/* LA V2 DESCEND DU PAPIER AU BLANC sur la hauteur de la section, et ne trace plus
   de filet en bas : c'est la section suivante qui remonte du blanc au papier. */
.edouk_lp_system {
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--blue-tint-100) 58%, var(--blue-tint-50) 86%, var(--bg-card) 100%);
    border-bottom: none;
}
.edouk_lp_system .edouk_lp_wrap {
    padding-block: 104px;
}
.edouk_lp_brick {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    padding: 28px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(10, 19, 48, 0.06),
        0 16px 32px -24px rgba(10, 19, 48, 0.4);
    transition: all 0.25s ease;
}
@media (hover: hover) {
    .edouk_lp_brick:hover {
        border-color: var(--cta);
        box-shadow: 0 14px 34px -14px rgba(10, 19, 48, 0.28);
        transform: translateY(-2px);
    }
}
.edouk_lp_brick_title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--default-color);
}
.edouk_lp_brick_text {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--accent-color);
    text-wrap: pretty;
}

/* ---------- Le système — les cinq cartes illustrées ----------
   LE VISUEL DE CHAQUE CARTE EST DU CSS, PAS UNE IMAGE. Cinq scènes dessinées avec
   des balises vides : les colonnes du CRM, la notification, les barres du serveur,
   les deux fenêtres et la cible. Aucune ne charge de fichier, et toutes prennent
   les tokens de la charte — le jour où le bleu bouge, elles bougent avec lui.

   Les cotes (168px de scène, 56×36 pour une fiche, 106px de cible) viennent de la
   maquette et sont écrites telles quelles : ce sont des dessins, pas des blocs de
   contenu, et les rapporter à une échelle les déformerait. */

/* LE HALO DE L'ÉPAULE. Il déborde volontairement en largeur ( `120%` ) pour que
   la lumière ne s'arrête pas au bord de la mesure ; c'est `overflow: hidden` sur
   la section qui la recoupe. */
.edouk_lp_system {
    contain: paint;
    overflow: hidden;
}
/* LE POINT QUI BAT, EN BLEU. Ailleurs il vit sur du sombre et prend le mint ;
   ici il est posé sur un bleu pâle, où le mint ne se verrait pas. */
.edouk_lp_dot_blue span {
    background: var(--primary-color);
}

@keyframes edouk_lp_float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes edouk_lp_scan {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

/* ---------- Le prospect, de l'annonce à l'appel ---------- */
/* LE FOND VIRE AU BLEUTE VERS LE BAS, comme dans la maquette : la section ouvre
   en blanc franc sous les cartes du systeme et rejoint le papier de la page au
   moment ou la methode prend la suite. */
.edouk_lp_flow {
    position: relative;
    background: linear-gradient(0deg, var(--bg-page) 0%, var(--blue-tint-100) 58%, var(--blue-tint-50) 86%, var(--bg-card) 100%);
    border-bottom: none;
}
/* LE BAS DE LA SECTION, EN DEUX BALISES : un trait d'un pixel qui s'efface aux
   deux bouts, et seize pixels d'ombre à peine visible juste au-dessus. C'est ce
   qui remplace le filet de bordure de la V1. */
.edouk_lp_flow_line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 211, 235, 0.26) 32%, rgba(190, 203, 232, 0.34) 50%, rgba(200, 211, 235, 0.26) 68%, transparent);
    pointer-events: none;
}
.edouk_lp_flow_shade {
    position: absolute;
    bottom: 1px;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(180deg, transparent, rgba(10, 19, 48, 0.008));
    pointer-events: none;
}
/* `min()` DANS LE `minmax`, ET NON 320px SEC. `minmax(320px, ...)` est un plancher
   DUR sur la piste : `auto-fit` retire les pistes vides mais ne descend jamais la
   dernière sous 320px. Sous 576px le container est à `padding: 0 5%`, donc le
   contenu vaut 90 % du viewport — en dessous de 356px la piste dépassait la
   mesure et la section sortait de `.edouk_container`. Au-dessus, `min(320px, 100%)`
   vaut 320px et ne change rien. Même écriture que `.edouk_lp_grid2`. */
.edouk_lp_split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(40px, 5vw, 64px);
    align-items: center;
}
.edouk_lp_flow_copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.edouk_lp_flow_copy .edouk_lp_lead {
    max-width: 470px;
    line-height: 1.7;
}
/* SUR MOBILE L'EN-TÊTE DE LA SECTION SE CENTRE, comme ceux des autres sections :
   la colonne de copie s'aligne au centre, le surtitre, le titre et le chapô
   passent en texte centré, et la chaîne — un bloc de fiches — garde ses lignes
   alignées au début. */
@media (max-width: 767px) {
    .edouk_lp_flow_copy {
        align-items: center;
        text-align: center;
    }
    .edouk_lp_flow_copy .edouk_lp_chain {
        text-align: start;
    }
}
.edouk_lp_cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 26px;
    margin-top: 14px;
    border-radius: var(--radius);
    background: var(--cta);
    color: var(--on-accent);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 12px 30px -12px rgba(49, 107, 255, 0.7);
    transition: all 0.18s ease;
}
@media (hover: hover) {
    .edouk_lp_cta:hover {
        background: var(--cta-hover);
        color: var(--on-accent);
        transform: translateY(-1px);
    }
}
/* SOUS 971px, LE BOUTON DE CETTE SECTION DISPARAÎT. En une colonne, il tombe
   juste au-dessus de l'aperçu du CRM et double l'appel de la section suivante,
   qui est à quelques centimètres. Celui de la méthode reste — c'est la sortie de
   la page — d'où le scope sur `.edouk_lp_flow_copy` et non sur `.edouk_lp_cta`,
   qui les habille tous les deux. */
@media (max-width: 971px) {
    .edouk_lp_flow_copy .edouk_lp_cta {
        display: none;
    }
}

/* L'aperçu du CRM. Une maquette en HTML et non une capture : elle suit le thème,
   et le jour où une étiquette change, elle change ici. */
.edouk_lp_mock {
    position: relative;
    padding-bottom: 56px;
}
.edouk_lp_mock_panel {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    background: var(--bg-card);
    box-shadow: 0 24px 60px -24px rgba(10, 19, 48, 0.35);
    overflow: hidden;
}
.edouk_lp_mock_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-page);
}
.edouk_lp_mock_title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--default-color);
}
.edouk_lp_mock_title svg {
    flex: none;
    color: var(--primary-color);
}
.edouk_lp_mock_count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    background: var(--success-light);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--success-text);
}
.edouk_lp_mock_count_dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--success);
}
.edouk_lp_mock_row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg-soft);
}
.edouk_lp_mock_row_last {
    border-bottom: none;
}
.edouk_lp_mock_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.edouk_lp_mock_id {
    flex: 1;
    min-width: 0;
}
.edouk_lp_mock_id b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--default-color);
}
.edouk_lp_mock_id span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--grey-text-muted);
}
.edouk_lp_mock_tag {
    flex: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
/* Les trois états reprennent les trois couleurs de statut de l'application — à
   rappeler, à relancer, client. Elles existent déjà dans les deux thèmes. */
.edouk_lp_mock_avatar_blue,
.edouk_lp_mock_tag_blue {
    background: var(--bg-soft);
    color: var(--primary-color);
}
/* La pastille « À rappeler » est un cran plus sombre que l'avatar dans la V2. */
.edouk_lp_mock_tag_blue {
    color: var(--blue-text-soft);
}
.edouk_lp_mock_avatar_amber,
.edouk_lp_mock_tag_amber {
    background: var(--warning-light);
    color: var(--warning-text);
}
.edouk_lp_mock_avatar_green,
.edouk_lp_mock_tag_green {
    background: var(--success-light);
    color: var(--success-text);
}
/* `inset-inline-end` et non `right` : en arabe la carte doit dépasser du côté
   gauche, sans quoi elle sortirait de l'écran. */
.edouk_lp_mock_toast {
    position: absolute;
    inset-inline-end: -6px;
    bottom: 0;
    width: min(300px, 86%);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-card);
    box-shadow: 0 18px 44px -16px rgba(10, 19, 48, 0.4);
    padding: 14px 16px;
    /* L'ANGLE EST UNE VARIABLE, lue aussi par les images-clés de l'entrée et de la
       flottaison ( `edouk_lp_notif`, `edouk_lp_notif_float` ) : un seul chiffre à
       changer, et l'animation ne peut pas ramener la carte à un autre angle. 10°
       sur grand écran, 7° sous 768px où la carte est trop proche pour pencher
       autant ; vers l'extérieur, donc négatif en arabe. */
    --toast-tilt: 10deg;
    transform: rotate(var(--toast-tilt));
}
html[dir="rtl"] .edouk_lp_mock_toast {
    --toast-tilt: -10deg;
}
@media (max-width: 767px) {
    .edouk_lp_mock_toast {
        --toast-tilt: 7deg;
    }
    html[dir="rtl"] .edouk_lp_mock_toast {
        --toast-tilt: -7deg;
    }
}
.edouk_lp_mock_toast_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    background: var(--cta);
    color: var(--on-accent);
}
.edouk_lp_mock_toast b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--default-color);
}
.edouk_lp_mock_toast span span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--grey-text-muted);
}

/* ---------- La chaîne horodatée ----------
   TROIS FICHES ET DEUX TRAITS, EN COLONNE. Les traits sont des balises vides et
   non des `::after` : un pseudo-élément sur la fiche suivrait sa boîte, et la
   dernière en porterait un aussi.

   `margin-inline-start` pour caler le trait sous l'icône : en arabe la colonne
   se retourne, et un `margin-left` laisserait les traits du mauvais côté. */
.edouk_lp_chain {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 470px;
    margin-top: 14px;
}
.edouk_lp_chain_item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.edouk_lp_chain_link {
    position: relative;
    width: 1.5px;
    height: 14px;
    margin-inline-start: 34px;
    background: var(--border-color);
}
.edouk_lp_chain_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 11px;
    background: var(--bg-page);
    color: var(--primary-color);
}
.edouk_lp_chain_label {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--default-color);
}
.edouk_lp_chain_time {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--grey-text-muted);
    letter-spacing: 0.1em;
}
/* LA DERNIÈRE ÉTAPE EST CELLE QUI COMPTE : c'est l'appel. Elle prend le bleu pâle,
   son icône le bleu plein, et son horodatage cesse d'être gris. */
.edouk_lp_chain_live {
    background: var(--bg-soft);
    border-color: var(--blue-tint-550);
    box-shadow: 0 12px 26px -16px rgba(49, 107, 255, 0.7);
}
.edouk_lp_chain_live .edouk_lp_chain_icon {
    background: var(--cta);
    color: var(--on-accent);
}
.edouk_lp_chain_live .edouk_lp_chain_time {
    color: var(--primary-color);
}

/* ---------- La section 3 rejoue du temps ( brief section 3, 2026-09-06 ) ----------
   DEUX COUCHES. L'ENTRÉE, jouée une fois à l'arrivée dans l'écran ( 0 → 3,5 s ) :
   la chaîne se construit vers le bas par la gauche, le panneau CRM se remplit
   par la droite, les deux colonnes convergent, la notification tombe en dernier.
   Puis LE RELAIS PERMANENT : cinq animations de 6 s exactement, dont l'effet
   visible n'occupe que les 17 % du début, décalées de 400 ms — un prospect
   descend la chaîne toutes les 6 s, atteint le CRM et fait pulser la
   notification, en phase pour toujours, sans une ligne de JS. Période identique,
   délais échelonnés : c'est la technique. Tout est `data-anim`, donc en pause
   jusqu'à `is_live`. Une seule courbe pour les entrées.

   Les étapes arrivent par la gauche et les fiches par la droite ; en arabe les
   colonnes sont retournées, les sens aussi ( `_rtl` ). */
.edouk_lp_chain_item {
    animation: edouk_lp_step 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[dir="rtl"] .edouk_lp_chain_item {
    animation-name: edouk_lp_step_rtl;
}
.edouk_lp_chain > :nth-child(1) { animation-delay: 0.62s; }
.edouk_lp_chain > :nth-child(3) { animation-delay: 1.00s; }
/* L'étape active enchaîne son entrée et une respiration bleue permanente : c'est
   le point d'arrivée du parcours, il reste vivant. */
.edouk_lp_chain > :nth-child(5) {
    animation:
        edouk_lp_step 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) 1.38s both,
        edouk_lp_glow 3.4s ease-in-out 2.1s infinite;
}
html[dir="rtl"] .edouk_lp_chain > :nth-child(5) {
    animation-name: edouk_lp_step_rtl, edouk_lp_glow;
}
/* Le trait se trace vers le bas, une fois l'étape posée. */
.edouk_lp_chain_link {
    transform-origin: top;
    animation: edouk_lp_grow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_chain > :nth-child(2) { animation-delay: 0.90s; }
.edouk_lp_chain > :nth-child(4) { animation-delay: 1.28s; }
/* Le relais dans la chaîne : la tuile pulse, l'étincelle descend le trait, la
   tuile suivante pulse — 3,8 → 4,02 → 4,25 → 4,47 → 4,7 s, puis toutes les 6 s. */
.edouk_lp_chain_icon {
    animation: edouk_lp_relay 6s ease-in-out infinite;
}
.edouk_lp_chain > :nth-child(1) .edouk_lp_chain_icon { animation-delay: 3.8s; }
.edouk_lp_chain > :nth-child(3) .edouk_lp_chain_icon { animation-delay: 4.25s; }
.edouk_lp_chain > :nth-child(5) .edouk_lp_chain_icon {
    animation-name: edouk_lp_relay_mint;
    animation-delay: 4.7s;
}
.edouk_lp_chain_spark {
    position: absolute;
    top: 0;
    inset-inline-start: -2px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--cta);
    box-shadow: 0 0 8px rgba(49, 107, 255, 0.9);
    animation: edouk_lp_relay_dot 6s linear infinite;
}
.edouk_lp_chain > :nth-child(2) .edouk_lp_chain_spark { animation-delay: 4.02s; }
.edouk_lp_chain > :nth-child(4) .edouk_lp_chain_spark { animation-delay: 4.47s; }

/* Le panneau CRM se remplit, dans l'ordre d'un vrai CRM. */
.edouk_lp_mock_panel {
    animation: edouk_lp_rise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
.edouk_lp_mock_count {
    animation:
        edouk_lp_pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.05s both,
        edouk_lp_halo_badge 3s ease-in-out 2.2s infinite;
}
/* `transform-origin: bottom` est indispensable : sans lui les barres poussent
   depuis leur centre, et l'effet « données qui montent » disparaît. */
.edouk_lp_mock_bar {
    transform-origin: bottom;
    animation: edouk_lp_grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_mock_bar_1 { animation-delay: 1.15s; }
.edouk_lp_mock_bar_2 { animation-delay: 1.22s; }
.edouk_lp_mock_bar_3 { animation-delay: 1.29s; }
.edouk_lp_mock_bar_4 { animation-delay: 1.36s; }
.edouk_lp_mock_bar_5 { animation-delay: 1.43s; }
.edouk_lp_mock_bar_6 { animation-delay: 1.50s; }
/* La barre d'aujourd'hui pousse en dernier, puis respire. */
.edouk_lp_mock_bar_7 {
    animation:
        edouk_lp_grow 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) 1.57s both,
        edouk_lp_breathe 3.8s ease-in-out 2.45s infinite;
}
/* Les fiches arrivent par la droite ( la gauche en arabe ). `overflow: hidden`
   pour le reflet, qui déborderait de la carte sans lui. */
.edouk_lp_mock_row {
    position: relative;
    overflow: hidden;
    animation: edouk_lp_row 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[dir="rtl"] .edouk_lp_mock_row {
    animation-name: edouk_lp_row_rtl;
}
.edouk_lp_mock_panel > .edouk_lp_mock_row:nth-child(3) { animation-delay: 1.90s; }
.edouk_lp_mock_panel > .edouk_lp_mock_row:nth-child(4) { animation-delay: 2.02s; }
.edouk_lp_mock_panel > .edouk_lp_mock_row:nth-child(5) { animation-delay: 2.14s; }
/* Le relais dans le CRM : le reflet balaie la fiche Yacine à 5,1 s, son avatar
   pulse à 5,15, le rond bleu de la notification à 5,55. */
.edouk_lp_mock_sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 38%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(49, 107, 255, 0.09), transparent);
    animation: edouk_lp_row_sweep 6s ease-in-out 5.1s infinite;
}
.edouk_lp_mock_row .edouk_lp_mock_avatar_blue {
    animation: edouk_lp_relay 6s ease-in-out 5.15s infinite;
}
.edouk_lp_mock_pin {
    animation: edouk_lp_pop 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_mock_stack > :nth-child(1) { animation-delay: 2.30s; }
.edouk_lp_mock_stack > :nth-child(2) { animation-delay: 2.38s; }
.edouk_lp_mock_stack > :nth-child(3) { animation-delay: 2.46s; }
.edouk_lp_mock_stack > :nth-child(4) { animation-delay: 2.54s; }
.edouk_lp_mock_reply {
    animation: edouk_lp_fade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 2.7s both;
}
/* LA NOTIFICATION, LA RÉCOMPENSE : elle tombe à 2,85 s puis flotte. La carte
   penche ( `--toast-tilt` ) : les deux images-clés RÉPÈTENT la rotation à chaque
   étape, sinon elle se redresserait brutalement pendant le mouvement. */
.edouk_lp_mock_toast {
    will-change: transform;
    animation:
        edouk_lp_notif 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 2.85s both,
        edouk_lp_notif_float 5.5s ease-in-out 3.8s infinite;
}
.edouk_lp_mock_toast_icon {
    animation: edouk_lp_relay_mint 6s ease-in-out 5.55s infinite;
}

/* ---------- L'aperçu : les sept derniers jours ----------
   LES HAUTEURS SONT EN POURCENTAGE et non en pixels : la dernière barre touche le
   haut de la boîte quelle que soit la hauteur du bloc. */
.edouk_lp_mock_chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 124px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--bg-soft);
}
.edouk_lp_mock_bar {
    width: 18px;
    flex: none;
    border-radius: 5px 5px 2px 2px;
    background: var(--blue-tint-300);
}
.edouk_lp_mock_bar_1 { height: 26%; }
.edouk_lp_mock_bar_2 { height: 44%; background: var(--blue-tint-400); }
.edouk_lp_mock_bar_3 { height: 35%; }
.edouk_lp_mock_bar_4 { height: 60%; background: var(--blue-tint-550); }
.edouk_lp_mock_bar_5 { height: 49%; background: var(--blue-tint-400); }
.edouk_lp_mock_bar_6 { height: 73%; background: var(--blue-tint-600); }
.edouk_lp_mock_bar_7 {
    height: 100%;
    background: var(--cta);
    box-shadow: 0 12px 22px -10px rgba(49, 107, 255, 0.8);
}

/* ---------- L'aperçu : la barre de synthèse ---------- */
.edouk_lp_mock_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card-tint);
}
.edouk_lp_mock_week {
    display: flex;
    align-items: center;
    gap: 10px;
}
.edouk_lp_mock_stack {
    display: flex;
}
/* LA PASTILLE PORTE UNE BORDURE BLANCHE ET NON UNE OMBRE : c'est elle qui découpe
   la pastille sur celle qu'elle recouvre, et elle tient sur n'importe quel fond.
   `margin-inline-start` négatif, pour que le recouvrement se retourne en arabe. */
.edouk_lp_mock_pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 999px;
    border: 2px solid var(--bg-card);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
}
.edouk_lp_mock_pin + .edouk_lp_mock_pin {
    margin-inline-start: -9px;
}
.edouk_lp_mock_pin_more {
    background: var(--ink);
    color: var(--on-accent);
}
.edouk_lp_mock_week_label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--grey-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.edouk_lp_mock_reply {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.edouk_lp_mock_reply_value {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--default-color);
}
.edouk_lp_mock_reply_label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--grey-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------- La méthode — trois étapes ---------- */
/* LA V2 : même descente papier → blanc que le système, un halo bleu en bas qui
   déborde en largeur ( d'où l'`overflow` ), et des cartes à 300px de laize et
   non 280. */
.edouk_lp_method {
    position: relative;
    contain: paint;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--blue-tint-100) 58%, var(--blue-tint-50) 86%, var(--bg-card) 100%);
}
.edouk_lp_method .edouk_lp_grid3 {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.edouk_lp_method_glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, 130%);
    height: 340px;
    background: radial-gradient(58% 100% at 50% 100%, rgba(49, 107, 255, 0.14), transparent 72%);
    pointer-events: none;
}
.edouk_lp_method .edouk_lp_wrap {
    padding-block: 100px 132px;
}
/* PLUS DE PADDING SUR LA CARTE DEPUIS LA V2 : sa scène de 148px monte jusqu'aux
   bords, c'est le corps ( `.edouk_lp_step_body` ) qui porte les 26 / 28px. */
.edouk_lp_step {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-l);
    padding: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(10, 19, 48, 0.06),
        0 16px 32px -24px rgba(10, 19, 48, 0.4);
    transition: all 0.25s ease;
}
@media (hover: hover) {
    .edouk_lp_step:hover {
        border-color: var(--blue-tint-600);
        box-shadow: 0 16px 38px -16px rgba(10, 19, 48, 0.24);
        transform: translateY(-3px);
    }
}
/* Le chiffre fantôme, débordé et rogné par l'`overflow` de la carte. Il prend le
   fond de la PAGE : d'un cran plus discret que la carte, dans les deux thèmes. */
.edouk_lp_step_ghost {
    position: absolute;
    inset-inline-end: -4px;
    bottom: -32px;
    font-size: 132px;
    font-weight: 800;
    line-height: 1;
    color: var(--blue-tint-200);
    letter-spacing: -0.06em;
}
.edouk_lp_step_body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 28px 28px;
}
.edouk_lp_step_head {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* La pastille numérotée est encre : `--ink` et non `--default-color`, c'est une
   SURFACE. */
.edouk_lp_step_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    background: var(--ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
}
.edouk_lp_step_over {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--grey-text-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.edouk_lp_step_copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edouk_lp_step_foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--grey-text-muted);
    letter-spacing: 0.06em;
}
.edouk_lp_step_foot svg {
    flex: none;
}
/* LA TROISIÈME EST CELLE QU'ON VEUT VOIR — c'est l'étape où les prospects
   arrivent. Bordure bleue, halo, et son point bat au lieu d'être une coche. */
.edouk_lp_step_live {
    border: 1.5px solid var(--blue-tint-600);
    box-shadow: 0 14px 34px -18px rgba(49, 107, 255, 0.5);
}
@media (hover: hover) {
    .edouk_lp_step_live:hover {
        border-color: var(--cta);
        box-shadow: 0 18px 40px -16px rgba(49, 107, 255, 0.55);
        transform: translateY(-3px);
    }
}
.edouk_lp_step_live .edouk_lp_step_ghost {
    color: var(--bg-soft);
}
.edouk_lp_step_live .edouk_lp_step_num {
    background: var(--cta);
    box-shadow: 0 10px 22px -10px rgba(49, 107, 255, 0.8);
}
.edouk_lp_step_live .edouk_lp_step_over,
.edouk_lp_step_live .edouk_lp_step_foot {
    color: var(--primary-color);
}
/* Le point de la troisième étape est bleu et non mint : il est posé sur une carte
   claire, où le mint ne passerait pas le contraste. */
.edouk_lp_step_foot .edouk_lp_dot span {
    background: var(--primary-color);
}
.edouk_lp_method_cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
}
.edouk_lp_method_cta .edouk_lp_cta {
    margin-top: 0;
    padding: 0 28px;
}
/* LE SECOND APPEL DE LA MÉTHODE ( V2 ) : un filet bleu pâle, texte ardoise, qui
   se remplit du tint au survol. */
.edouk_lp_cta_outline {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 26px;
    border-radius: var(--radius);
    border: 1px solid var(--blue-tint-550);
    color: var(--blue-text-soft);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: all 0.18s ease;
}
@media (hover: hover) {
    .edouk_lp_cta_outline:hover {
        background: var(--bg-soft);
        border-color: var(--cta);
        color: var(--cta-hover);
    }
}

/* ========================================
   LA LANDING V2 — ce que `export-oultem` ( 2026-09-06 ) a AJOUTÉ

   Les décors flottants du hero, le pipeline de quatre briques et ses scènes, les
   pastilles flottantes des sections claires, les trois scènes de la méthode, la
   page de capture sur l'encre, et les images-clés qu'ils consomment. Les règles
   plus haut dans cette feuille ont été ajustées aux cotes de la même maquette.

   ⚠ LES CINQ SCÈNES DE LA V1 ( `_kanban`, `_toast`, `_bars`, `_browser*`,
   `_uplift`, `_plan*`, `_radar*` ), `.edouk_lp_stats` et `.edouk_lp_brick` ne
   sont plus appelées par aucun gabarit et restent dans la feuille.
   ======================================== */

/* ---------- Le hero : les décors flottants ----------
   Sept balises hors flux, en `pointer-events: none`, posées en `%` de la section.
   Sous 1120px il n'y a plus la place autour du titre : elles disparaissent. Les
   `left` / `right` restent physiques — c'est du décor, il n'a pas de sens de
   lecture. */
.edouk_lp_ambient {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}
.edouk_lp_aurora {
    border-radius: 999px;
    will-change: transform, opacity;
}
.edouk_lp_aurora_a {
    top: 9%;
    left: -5%;
    width: 450px;
    height: 364px;
    background: radial-gradient(circle, rgba(125, 247, 192, 0.2), transparent 66%);
    animation: edouk_lp_aurora 19s ease-in-out infinite;
}
.edouk_lp_aurora_b {
    bottom: -7%;
    right: -3%;
    width: 486px;
    height: 382px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 66%);
    animation: edouk_lp_aurora_b 23s ease-in-out infinite;
}
.edouk_lp_orbit {
    top: 25%;
    left: 5.5%;
    width: 196px;
    height: 196px;
    animation: edouk_lp_orbit 46s linear infinite;
}
.edouk_lp_orbit_ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
}
.edouk_lp_orbit_ring_in {
    inset: 33px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
}
.edouk_lp_orbit_sat {
    position: absolute;
    top: -3px;
    left: 50%;
    margin-left: -3.5px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--mint);
    box-shadow: 0 0 12px rgba(125, 247, 192, 0.9);
}
.edouk_lp_orbit_moon {
    position: absolute;
    bottom: 28px;
    right: 23px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
}
/* Les quatre cartes de verre. La base est celle de la notification Telegram ;
   les trois autres ne redisent que ce qui diffère. */
.edouk_lp_float {
    display: flex;
    align-items: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.17);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 22px 44px -22px rgba(4, 14, 50, 0.8);
}
.edouk_lp_float_tg {
    top: 20%;
    left: 4%;
    gap: 10px;
    width: 190px;
    padding: 11px 12px;
    animation: edouk_lp_drift_a 13s ease-in-out infinite;
}
.edouk_lp_float_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--mint);
}
.edouk_lp_float_lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.edouk_lp_float_line {
    width: 78%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
}
.edouk_lp_float_line_b {
    width: 52%;
    background: rgba(255, 255, 255, 0.2);
}
.edouk_lp_float_badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--mint);
    color: var(--ink);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
}
.edouk_lp_float_bars {
    bottom: 21%;
    left: 7%;
    align-items: flex-end;
    gap: 5px;
    height: 64px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px -22px rgba(4, 14, 50, 0.75);
    animation: edouk_lp_drift_c 17s ease-in-out infinite;
}
.edouk_lp_float_bar {
    width: 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.24);
}
.edouk_lp_float_bar_1 { height: 26%; }
.edouk_lp_float_bar_2 { height: 44%; background: rgba(255, 255, 255, 0.3); }
.edouk_lp_float_bar_3 { height: 35%; }
.edouk_lp_float_bar_4 { height: 62%; background: rgba(255, 255, 255, 0.38); }
.edouk_lp_float_bar_5 { height: 100%; background: var(--mint); }
.edouk_lp_float_lead {
    top: 23%;
    right: 4.5%;
    gap: 9px;
    width: 200px;
    padding: 11px 12px;
    animation: edouk_lp_drift_b 15s ease-in-out infinite;
}
.edouk_lp_float_lead .edouk_lp_float_line { width: 70%; }
.edouk_lp_float_lead .edouk_lp_float_line_b { width: 46%; }
.edouk_lp_float_avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
}
.edouk_lp_float_tag {
    flex: none;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(125, 247, 192, 0.18);
    border: 1px solid rgba(125, 247, 192, 0.34);
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mint);
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.edouk_lp_float_capi {
    bottom: 24%;
    right: 7%;
    overflow: hidden;
    gap: 10px;
    padding: 11px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 36px -20px rgba(4, 14, 50, 0.75);
    color: var(--mint);
    animation: edouk_lp_drift_a 20s ease-in-out infinite;
}
.edouk_lp_float_capi svg {
    flex: none;
}
.edouk_lp_float_sheen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: edouk_lp_sheen 7s ease-in-out infinite;
}
.edouk_lp_float_capi_text {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 1120px) {
    .edouk_lp_ambient {
        display: none;
    }
}

/* ---------- Les pastilles flottantes des sections claires ----------
   Cinq pastilles blanches, deux par section plus celle qui chevauche le haut du
   flux. Calées sur la mesure de la maquette ( 1160px ) et non sur le conteneur :
   `max(24px, calc(50% - 552px))` les pose à 28px du bord de cette laize. Sous
   900px, plus la place. */
.edouk_lp_float_pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 30px -22px rgba(10, 19, 48, 0.5);
    color: var(--primary-color);
    pointer-events: none;
    will-change: transform;
}
.edouk_lp_float_pill svg {
    flex: none;
}
.edouk_lp_float_pill_ok {
    color: var(--success);
}
.edouk_lp_float_pill_text {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--grey-text-mid);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.edouk_lp_float_pill .edouk_lp_dot,
.edouk_lp_float_pill .edouk_lp_dot span:last-child {
    width: 7px;
    height: 7px;
}
.edouk_lp_pill_sys_l {
    top: 308px;
    left: max(24px, calc(50% - 552px));
    animation: edouk_lp_drift_c 18s ease-in-out infinite;
}
.edouk_lp_pill_sys_r {
    top: 300px;
    right: max(24px, calc(50% - 552px));
    animation: edouk_lp_drift_a 23s ease-in-out infinite;
}
/* LES DEUX PASTILLES DE COUTURE : « Le parcours » à cheval sur le HAUT de la
   section 3, « La méthode » à cheval sur son BAS ( et non sur le haut de la
   section 4, qui rogne ce qui dépasse ). Centrées, au-dessus des épaules ( z 2 ). */
.edouk_lp_pill_flow,
.edouk_lp_pill_method {
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 9px 15px;
    box-shadow: 0 12px 28px -14px rgba(10, 19, 48, 0.35);
    will-change: auto;
}
.edouk_lp_pill_flow {
    top: -19px;
}
.edouk_lp_pill_method {
    bottom: -19px;
}
.edouk_lp_pill_meth_l {
    top: 170px;
    left: max(24px, calc(50% - 552px));
    animation: edouk_lp_drift_c 19s ease-in-out infinite;
}
.edouk_lp_pill_meth_r {
    top: 162px;
    right: max(24px, calc(50% - 552px));
    animation: edouk_lp_drift_a 22s ease-in-out infinite;
}
@media (max-width: 900px) {
    .edouk_lp_float_pill {
        display: none;
    }
    /* « LE PARCOURS » ET « LA MÉTHODE » RESTENT ( 2026-09-06 ). Les quatre
       pastilles latérales sont un décor, celles-ci titrent une couture : centrées,
       elles tiennent sur tous les écrans. */
    .edouk_lp_pill_flow,
    .edouk_lp_pill_method {
        display: inline-flex;
    }
}

/* ---------- Le système : le pipeline de quatre briques ----------
   Quatre colonnes reliées par un trait qui passe DERRIÈRE les pastilles
   numérotées ; deux colonnes sous 900px ( le trait tombe ), une sous 520. */
.edouk_lp_pipe {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px 28px;
    margin-top: 72px;
}
/* LE RACCORD VERTICAL ( 2026-09-07 ) : un trait de 1,5px qui part du bas de la
   carte, traverse la gouttière de 36px et touche la carte du dessous. Invisible
   sur quatre colonnes, où le filet horizontal fait le travail. Il se trace vers
   le bas ( `edouk_lp_grow`, origine en haut ) au même pas de 0,2 s que les segments,
   et son signal descend ( `edouk_lp_signal_v` ). */
.edouk_lp_pipe_join {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -36px;
    width: 1.5px;
    height: 36px;
    margin-left: -0.75px;
    background: var(--blue-tint-550);
    transform-origin: top;
    pointer-events: none;
    animation: edouk_lp_grow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_pipe_join .edouk_lp_pipe_signal {
    top: 0;
    inset-inline-start: 50%;
    margin-top: -3.5px;
    animation-name: edouk_lp_signal_v;
}
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_join { animation-delay: 0.92s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_join { animation-delay: 1.32s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_join { animation-delay: 1.72s; }
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_join .edouk_lp_pipe_signal { animation-delay: 2.5s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_join .edouk_lp_pipe_signal { animation-delay: 3.2s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_join .edouk_lp_pipe_signal { animation-delay: 3.9s; }
/* SOUS 900px, LE FILET EST VERTICAL ET SEULEMENT VERTICAL : les segments
   horizontaux disparaissent, les raccords prennent le relais. Deux colonnes : ils
   descendent de 1 vers 3 et de 2 vers 4, la carte 3 — en bas à gauche — n'a rien
   sous elle. */
@media (max-width: 900px) {
    .edouk_lp_pipe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .edouk_lp_pipe_line {
        display: none;
    }
    .edouk_lp_pipe_join {
        display: block;
    }
    .edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_join {
        display: none;
    }
}
/* UNE COLONNE ( sous 520px ) : les trois raccords enchaînent 1 → 2 → 3 → 4. */
@media (max-width: 520px) {
    .edouk_lp_pipe {
        grid-template-columns: 1fr;
    }
    .edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_join {
        display: block;
    }
}
.edouk_lp_pipe_card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 26px 22px 30px;
    border-radius: var(--radius-l);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 14px 32px -26px rgba(10, 19, 48, 0.5);
    transition: all 0.26s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (hover: hover) {
    .edouk_lp_pipe_card:hover {
        border-color: var(--blue-tint-550);
        box-shadow: 0 20px 40px -22px rgba(10, 19, 48, 0.32);
        transform: translateY(-3px);
    }
}
/* Les trois temps de chaque brique — la scène monte, la pastille éclate, le texte
   arrive — décalés d'une brique à l'autre. Le tempo est celui de la maquette. */
.edouk_lp_pipe_art {
    height: 104px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: edouk_lp_rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
/* La rangée ne s'anime plus elle-même ( brief section 2, 2026-09-06 ) : la pastille
   et les segments du filet qu'elle contient ont chacun leur temps. */
.edouk_lp_pipe_num_row {
    position: relative;
    display: flex;
    justify-content: center;
}
.edouk_lp_pipe_body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    animation: edouk_lp_fade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_art { animation-delay: 0.06s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_art { animation-delay: 0.16s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_art { animation-delay: 0.26s; }
.edouk_lp_pipe_card:nth-child(4) .edouk_lp_pipe_art { animation-delay: 0.36s; }
/* LES PASTILLES SE POSENT JUSTE AVANT QUE LE FILET NE LES ATTEIGNE : 01 à 0,62 s,
   le filet part d'elle à 0,72, atteint 02 qui se pose à 1,02, et ainsi de suite.
   C'est ce décalage de 0,1 s qui fait la lecture. */
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_num { animation-delay: 0.62s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_num { animation-delay: 1.02s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_num { animation-delay: 1.42s; }
.edouk_lp_pipe_card:nth-child(4) .edouk_lp_pipe_num { animation-delay: 1.82s; }
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_body { animation-delay: 0.34s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_body { animation-delay: 0.44s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_body { animation-delay: 0.54s; }
.edouk_lp_pipe_card:nth-child(4) .edouk_lp_pipe_body { animation-delay: 0.64s; }
/* Le trait part de la pastille et dépasse la carte de 18px dans la gouttière de
   28 : les deux traits voisins se recouvrent. `inset-inline` : en arabe le
   pipeline se lit de droite à gauche, le « suivant » est à gauche. */
/* LE FILET SE TRACE ( brief section 2, 2026-09-06 ) : chaque segment naît à
   `scaleX(0)` depuis son bord de départ et se déploie en 0,42 s. `translateY(-50%)`
   est RÉPÉTÉ dans les deux images-clés ( `edouk_lp_seg` ) : c'est lui qui centre
   le trait, l'écrire dans une seule ferait sauter le tracé d'un pixel. L'origine
   est le côté d'où vient le flux — la gauche, la droite en arabe. */
.edouk_lp_pipe_line {
    position: absolute;
    top: 50%;
    height: 1.5px;
    background: var(--blue-tint-550);
    transform: translateY(-50%);
    transform-origin: left center;
    pointer-events: none;
    animation: edouk_lp_seg 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[dir="rtl"] .edouk_lp_pipe_line {
    transform-origin: right center;
}
.edouk_lp_pipe_line_next {
    inset-inline-start: calc(50% + 25px);
    inset-inline-end: -40px;
}
.edouk_lp_pipe_line_prev {
    inset-inline-start: -40px;
    inset-inline-end: calc(50% + 25px);
}
/* Dans l'ordre du document, un pas de 0,2 s : le tracé progresse d'un seul
   mouvement de la pastille 01 à la 04. */
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_line_next { animation-delay: 0.72s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_line_prev { animation-delay: 0.92s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_line_next { animation-delay: 1.12s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_line_prev { animation-delay: 1.32s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_line_next { animation-delay: 1.52s; }
.edouk_lp_pipe_card:nth-child(4) .edouk_lp_pipe_line_prev { animation-delay: 1.72s; }
/* LE SIGNAL QUI CIRCULE : un point mint de 7px, dans chaque segment, qui le
   parcourt en 0,36 s et recommence. Le pas entre deux segments ( 0,35 s ) est
   presque la durée du parcours : le point semble franchir les cartes de proche en
   proche, une fois par cycle. Le premier ne part qu'à 2,5 s — après la fin du
   tracé ( 1,72 + 0,42 ) : le filet est complet avant que rien n'y circule.

   ⚠ `inset-inline-start` est la seule propriété non composée de tout le
   mouvement de la page. Acceptable ici — 7px dans un trait de 1,5px, aucune mise
   en page à recalculer — à ne pas reproduire sur plus gros. */
.edouk_lp_pipe_signal {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    margin-inline-start: -3.5px;
    border-radius: 999px;
    background: var(--mint);
    box-shadow: 0 0 10px rgba(125, 247, 192, 0.95);
    animation: edouk_lp_signal 0.36s linear infinite;
}
.edouk_lp_pipe_card:nth-child(1) .edouk_lp_pipe_line_next .edouk_lp_pipe_signal { animation-delay: 2.5s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_line_prev .edouk_lp_pipe_signal { animation-delay: 2.85s; }
.edouk_lp_pipe_card:nth-child(2) .edouk_lp_pipe_line_next .edouk_lp_pipe_signal { animation-delay: 3.2s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_line_prev .edouk_lp_pipe_signal { animation-delay: 3.55s; }
.edouk_lp_pipe_card:nth-child(3) .edouk_lp_pipe_line_next .edouk_lp_pipe_signal { animation-delay: 3.9s; }
.edouk_lp_pipe_card:nth-child(4) .edouk_lp_pipe_line_prev .edouk_lp_pipe_signal { animation-delay: 4.25s; }
.edouk_lp_pipe_num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    animation: edouk_lp_pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_pipe_num_live {
    background: var(--cta);
    box-shadow: 0 10px 22px -10px rgba(49, 107, 255, 0.85);
}
.edouk_lp_pipe_title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--default-color);
}
.edouk_lp_pipe_text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--accent-color);
    text-wrap: pretty;
}

/* Scène 1 : la fiche penchée et le radar */
.edouk_lp_strat {
    display: flex;
    align-items: center;
    gap: 10px;
}
.edouk_lp_strat_note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 52px;
    padding: 8px;
    border-radius: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transform: rotate(-6deg);
}
.edouk_lp_strat_note span {
    height: 3px;
    border-radius: 999px;
    background: var(--bg-soft);
}
.edouk_lp_strat_note span:nth-child(1) { width: 52%; height: 4px; background: var(--blue-tint-550); }
.edouk_lp_strat_note span:nth-child(2) { width: 100%; }
.edouk_lp_strat_note span:nth-child(3) { width: 78%; }
.edouk_lp_strat_radar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    flex: none;
}
.edouk_lp_strat_ring {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--blue-tint-400);
}
.edouk_lp_strat_ring_in {
    inset: 13px;
    border-color: var(--blue-tint-550);
    animation: edouk_lp_scan 3.2s ease-in-out 1.6s infinite;
}
.edouk_lp_strat_core {
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: var(--cta);
    box-shadow: 0 8px 16px -6px rgba(49, 107, 255, 0.85);
}
.edouk_lp_strat_blip {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--success);
}

/* Scène 2 : la fenêtre de la page, qui flotte */
.edouk_lp_site {
    width: 132px;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-bottom: none;
    box-shadow: 0 16px 28px -18px rgba(10, 19, 48, 0.5);
    animation: edouk_lp_float 6s ease-in-out 1.6s infinite;
}
.edouk_lp_site_bar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--bg-soft);
    background: var(--bg-card-tint);
}
.edouk_lp_site_dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--blue-tint-400);
}
.edouk_lp_site_brand {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: 6px;
    font-weight: 600;
    line-height: 1;
    color: var(--grey-300);
    letter-spacing: 0.1em;
}
.edouk_lp_site_body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px;
}
.edouk_lp_site_hero {
    width: 100%;
    height: 22px;
    border-radius: 6px;
    background: var(--cta);
}
.edouk_lp_site_line {
    width: 80%;
    height: 4px;
    border-radius: 999px;
    background: var(--blue-tint-400);
}
.edouk_lp_site_chip {
    width: 62px;
    height: 15px;
    border-radius: 5px;
    background: var(--mint);
}

/* Scène 3 : les trois colonnes du CRM. La fiche bleue de la dernière colonne est
   celle qui vient de passer sous contrat. */
.edouk_lp_crm {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.edouk_lp_crm_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.edouk_lp_crm_card {
    width: 42px;
    height: 24px;
    border-radius: 7px;
    background: var(--blue-tint-400);
}
.edouk_lp_crm_label {
    font-family: var(--font-mono);
    font-size: 7px;
    font-weight: 600;
    line-height: 1;
    color: var(--primary-color-dark);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.edouk_lp_crm_amber .edouk_lp_crm_card {
    background: var(--warning-light);
}
.edouk_lp_crm_amber .edouk_lp_crm_label {
    color: var(--warning-dark);
}
.edouk_lp_crm_green .edouk_lp_crm_label {
    color: var(--success-dark);
}
/* Après les colonnes colorées : même poids de sélecteur, l'ordre tranche. */
.edouk_lp_crm_col .edouk_lp_crm_empty {
    background: transparent;
    border: 1px dashed var(--border-color);
}
.edouk_lp_crm_col .edouk_lp_crm_live {
    background: var(--cta);
    box-shadow: 0 8px 16px -8px rgba(49, 107, 255, 0.8);
}
.edouk_lp_crm_col .edouk_lp_crm_signed {
    background: var(--green-orders-bg);
}

/* Scène 4 : les conversions qui remontent, la dernière coiffée de mint */
.edouk_lp_capi {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}
.edouk_lp_capi_bar {
    width: 18px;
    border-radius: 5px;
    background: var(--blue-tint-400);
}
.edouk_lp_capi_bar_1 { height: 24px; }
.edouk_lp_capi_bar_2 { height: 38px; background: var(--blue-tint-500); }
.edouk_lp_capi_bar_3 { height: 31px; }
.edouk_lp_capi_bar_4 { height: 50px; background: var(--blue-tint-600); }
.edouk_lp_capi_live {
    position: relative;
    height: 70px;
    background: var(--cta);
    box-shadow: 0 12px 22px -10px rgba(49, 107, 255, 0.75);
}
.edouk_lp_capi_cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 19px;
    border-radius: 0 0 5px 5px;
    background: var(--mint);
}

/* ---------- La méthode : les trois scènes ----------
   148px de scène en tête de chaque carte, sur le bleuté le plus pâle. */
.edouk_lp_step_art {
    position: relative;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-tint-100);
    border-bottom: 1px solid var(--bg-soft);
}
/* Scène 1 : l'appel en cours — le combiné, l'onde, le chrono */
.edouk_lp_call {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 30px -18px rgba(10, 19, 48, 0.45);
}
.edouk_lp_call_icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 999px;
    background: var(--cta);
    color: var(--on-accent);
    box-shadow: 0 10px 20px -10px rgba(49, 107, 255, 0.85);
}
.edouk_lp_call_dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--mint);
    border: 2px solid var(--bg-card);
}
.edouk_lp_wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
}
.edouk_lp_wave span {
    width: 3px;
    border-radius: 999px;
    background: var(--blue-tint-400);
}
.edouk_lp_wave span:nth-child(1) { height: 38%; }
.edouk_lp_wave span:nth-child(2) { height: 66%; background: var(--blue-tint-550); }
.edouk_lp_wave span:nth-child(3) { height: 100%; background: var(--cta); }
.edouk_lp_wave span:nth-child(4) { height: 74%; background: var(--blue-tint-600); }
.edouk_lp_wave span:nth-child(5) { height: 46%; }
.edouk_lp_wave span:nth-child(6) { height: 82%; background: var(--blue-tint-550); }
.edouk_lp_wave span:nth-child(7) { height: 54%; }
.edouk_lp_wave span:nth-child(8) { height: 90%; background: var(--blue-tint-600); }
.edouk_lp_wave span:nth-child(9) { height: 34%; background: var(--blue-tint-300); }
.edouk_lp_wave span:nth-child(10) { height: 62%; }
.edouk_lp_call_time {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--grey-text-muted);
    letter-spacing: 0.08em;
}
/* Scène 2 : les quatre briques branchées. Les quatre traits sont symétriques
   ( 43 / 157 sur 200px ) : en arabe la grille se retourne et ils tombent juste. */
.edouk_lp_wire {
    position: relative;
    display: grid;
    grid-template-columns: 88px 88px;
    gap: 20px 24px;
}
.edouk_lp_wire_link {
    position: absolute;
    background: var(--blue-tint-400);
}
.edouk_lp_wire_link_1 { left: 88px; top: 22px; width: 24px; height: 1.5px; }
.edouk_lp_wire_link_2 { left: 88px; top: 88px; width: 24px; height: 1.5px; }
.edouk_lp_wire_link_3 { left: 43px; top: 46px; width: 1.5px; height: 20px; }
.edouk_lp_wire_link_4 { left: 157px; top: 46px; width: 1.5px; height: 20px; }
.edouk_lp_wire_tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 46px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--primary-color);
}
.edouk_lp_wire_tile_live {
    background: var(--cta);
    border-color: var(--cta);
    color: var(--on-accent);
    box-shadow: 0 12px 22px -10px rgba(49, 107, 255, 0.8);
}
/* Scène 3 : la courbe qui monte, et le point qui bat à son sommet. Les couleurs
   du SVG passent par le CSS ( `stop-color`, `currentColor` ) : un attribut ne
   lirait pas un token. */
.edouk_lp_curve {
    position: relative;
    width: 196px;
    height: 96px;
    color: var(--cta);
}
.edouk_lp_curve svg {
    display: block;
}
.edouk_lp_curve stop {
    stop-color: var(--cta);
}
.edouk_lp_curve_blip {
    position: absolute;
    right: -5px;
    top: 5px;
    display: flex;
    width: 11px;
    height: 11px;
}
.edouk_lp_curve_blip span:first-child {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--mint);
    animation: edouk_lp_ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.edouk_lp_curve_blip span:last-child {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--cta);
    border: 2px solid var(--bg-card);
}

/* ---------- La section 4 fait lire 1 → 2 → 3, puis le CTA ( brief section 4, 2026-09-06 ) ----------
   DEUX COUCHES, comme la section 3. L'ENTRÉE ( 0 → 2,8 s ) : les trois cartes
   montent, puis CHAQUE VISUEL S'ASSEMBLE — l'onde s'ouvre, les briques se
   branchent, la courbe se dessine —, les pastilles se posent, les CTA arrivent.
   LE RELAIS PERMANENT ( 6 s ) rallume les trois pastilles dans l'ordre, balaie le
   graphe et finit sur le bouton. Tout est `data-anim`, en pause jusqu'à `is_live`.
   Les pulsations qui se posent sur un élément qui a déjà une ombre gardent cette
   ombre : `--relay-base` est lue par les images-clés du relais. */
.edouk_lp_step {
    animation: edouk_lp_rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_grid3 > .edouk_lp_step:nth-child(1) { animation-delay: 0.55s; }
.edouk_lp_grid3 > .edouk_lp_step:nth-child(2) { animation-delay: 0.70s; }
.edouk_lp_grid3 > .edouk_lp_step:nth-child(3) { animation-delay: 0.85s; }
/* Les filigranes arrivent APRÈS le contenu : des ombres de fond, pas des acteurs. */
.edouk_lp_step_ghost {
    animation: edouk_lp_fade 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_grid3 > .edouk_lp_step:nth-child(1) .edouk_lp_step_ghost { animation-delay: 1.45s; }
.edouk_lp_grid3 > .edouk_lp_step:nth-child(2) .edouk_lp_step_ghost { animation-delay: 1.55s; }
.edouk_lp_grid3 > .edouk_lp_step:nth-child(3) .edouk_lp_step_ghost { animation-delay: 1.65s; }

/* Carte 01 — l'appel. La fiche éclate, puis l'onde s'ouvre depuis son AXE
   ( `transform-origin: center`, pas `bottom` : un son ne pousse pas du sol ),
   barre par barre. Puis elle respire EN CONTINU, hors relais, comme un appel en
   cours — chaque barre avec sa durée ( 1,05 / 1,18 / 1,31 / 1,44 s en rotation )
   et son délai : des durées identiques donneraient une vague mécanique. */
.edouk_lp_call {
    animation: edouk_lp_pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s both;
}
.edouk_lp_call_icon {
    --relay-base: 0 10px 20px -10px rgba(49, 107, 255, 0.85);
    animation: edouk_lp_relay_mint 6s ease-in-out 3.5s infinite;
}
.edouk_lp_wave span {
    transform-origin: center;
}
.edouk_lp_wave span:nth-child(1)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.000s both, edouk_lp_wave 1.05s ease-in-out 1.60s infinite; }
.edouk_lp_wave span:nth-child(2)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.035s both, edouk_lp_wave 1.18s ease-in-out 1.68s infinite; }
.edouk_lp_wave span:nth-child(3)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.070s both, edouk_lp_wave 1.31s ease-in-out 1.76s infinite; }
.edouk_lp_wave span:nth-child(4)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.105s both, edouk_lp_wave 1.44s ease-in-out 1.84s infinite; }
.edouk_lp_wave span:nth-child(5)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.140s both, edouk_lp_wave 1.05s ease-in-out 1.92s infinite; }
.edouk_lp_wave span:nth-child(6)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.175s both, edouk_lp_wave 1.18s ease-in-out 2.00s infinite; }
.edouk_lp_wave span:nth-child(7)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.210s both, edouk_lp_wave 1.31s ease-in-out 2.08s infinite; }
.edouk_lp_wave span:nth-child(8)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.245s both, edouk_lp_wave 1.44s ease-in-out 2.16s infinite; }
.edouk_lp_wave span:nth-child(9)  { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.280s both, edouk_lp_wave 1.05s ease-in-out 2.24s infinite; }
.edouk_lp_wave span:nth-child(10) { animation: edouk_lp_grow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.315s both, edouk_lp_wave 1.18s ease-in-out 2.32s infinite; }
.edouk_lp_call_time {
    animation: edouk_lp_fade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s both;
}

/* Carte 02 — le système. Les briques d'abord ( les enfants 5, 6, 7 du `.edouk_lp_wire`,
   après les quatre traits ), les câbles ensuite — haut, gauche, bas, droite —, la
   coche en dernier : `edouk_lp_land`, elle tombe, dépasse, se pose. Les traits
   horizontaux se tracent depuis la gauche ( la droite en arabe ). */
.edouk_lp_wire_tile {
    animation: edouk_lp_tile 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.edouk_lp_wire > :nth-child(5) { animation-delay: 1.05s; }
.edouk_lp_wire > :nth-child(6) { animation-delay: 1.15s; }
.edouk_lp_wire > :nth-child(7) { animation-delay: 1.25s; }
.edouk_lp_wire_tile_live {
    --relay-base: 0 12px 22px -10px rgba(49, 107, 255, 0.8);
    animation:
        edouk_lp_land 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 1.62s both,
        edouk_lp_relay_mint 6s ease-in-out 4.4s infinite;
}
.edouk_lp_wire_link_1 {
    transform-origin: left center;
    animation: edouk_lp_underline 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 1.26s both;
}
.edouk_lp_wire_link_3 {
    transform-origin: top;
    animation: edouk_lp_grow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 1.34s both;
}
.edouk_lp_wire_link_2 {
    transform-origin: left center;
    animation: edouk_lp_underline 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) 1.42s both;
}
.edouk_lp_wire_link_4 {
    transform-origin: top;
    animation: edouk_lp_grow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s both;
}
html[dir="rtl"] .edouk_lp_wire_link_1,
html[dir="rtl"] .edouk_lp_wire_link_2 {
    transform-origin: right center;
}

/* Carte 03 — les campagnes. LE PLUS BEAU MOMENT DE LA SECTION : la courbe se
   dessine. `stroke-dasharray` égale la longueur du tracé — 217 pour ce chemin,
   recalculer avec `getTotalLength()` si le `<path>` change ; trop court laisse un
   trou en fin de tracé, trop long retarde le départ — et `edouk_lp_draw` ramène le
   décalage à zéro. L'aire suit, le point mint éclate au sommet. Au relais, un
   balayage traverse le graphe dans un calque rogné ( `edouk_lp_curve_clip` ) :
   le cadre lui-même reste en `overflow: visible`, le point déborde à droite. */
.edouk_lp_curve_stroke {
    stroke-dasharray: 217;
    stroke-dashoffset: 217;
    animation: edouk_lp_draw 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) 1.05s both;
}
.edouk_lp_curve_area {
    animation: edouk_lp_fade 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.75s both;
}
.edouk_lp_curve_blip {
    z-index: 2;
    animation: edouk_lp_pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 2.1s both;
}
.edouk_lp_curve_clip {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.edouk_lp_curve_sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(49, 107, 255, 0.14), transparent);
    animation: edouk_lp_chart_sweep 6s ease-in-out 4.85s infinite;
}

/* Les pastilles se posent, puis se rallument dans l'ordre toutes les 6 s :
   1 à 3,5 s ( avec le rond de l'appel ), 2 à 3,95, 3 à 4,4 ( avec la coche ). */
.edouk_lp_grid3 > .edouk_lp_step:nth-child(1) .edouk_lp_step_num {
    animation:
        edouk_lp_pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.35s both,
        edouk_lp_relay 6s ease-in-out 3.5s infinite;
}
.edouk_lp_grid3 > .edouk_lp_step:nth-child(2) .edouk_lp_step_num {
    animation:
        edouk_lp_pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.47s both,
        edouk_lp_relay 6s ease-in-out 3.95s infinite;
}
.edouk_lp_grid3 > .edouk_lp_step:nth-child(3) .edouk_lp_step_num {
    --relay-base: 0 10px 22px -10px rgba(49, 107, 255, 0.8);
    animation:
        edouk_lp_pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.59s both,
        edouk_lp_relay_mint 6s ease-in-out 4.4s infinite;
}
/* Les deux CTA arrivent en dernier ; le reflet du plein ferme le relais à 5,3 s. */
.edouk_lp_method_cta {
    animation: edouk_lp_in_up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 2.0s both;
}
.edouk_lp_method_cta .edouk_lp_cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.edouk_lp_shine_relay {
    width: 36%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: edouk_lp_shine 6s ease-in-out 5.3s infinite;
}

/* ---------- Les images-clés de la V2 ---------- */
@keyframes edouk_lp_rise {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes edouk_lp_pop {
    0%   { opacity: 0; transform: scale(0.4); }
    66%  { opacity: 1; transform: scale(1.16); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes edouk_lp_fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_drift_a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
    50%      { transform: translate3d(6px, -18px, 0) rotate(-2deg); }
}
@keyframes edouk_lp_drift_b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(3.5deg); }
    50%      { transform: translate3d(-8px, -14px, 0) rotate(1.5deg); }
}
@keyframes edouk_lp_drift_c {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(5deg); }
    50%      { transform: translate3d(-5px, 16px, 0) rotate(3deg); }
}
@keyframes edouk_lp_orbit {
    to { transform: rotate(360deg); }
}
@keyframes edouk_lp_aurora {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);         opacity: 0.5; }
    50%      { transform: translate3d(28px, -22px, 0) scale(1.12); opacity: 0.78; }
}
@keyframes edouk_lp_aurora_b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.06);     opacity: 0.42; }
    50%      { transform: translate3d(-24px, 20px, 0) scale(1); opacity: 0.66; }
}
@keyframes edouk_lp_sheen {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
/* L'entrée du hero ( brief hero, 2026-09-06 ) — `transform` et `opacity` seulement. */
@keyframes edouk_lp_in_up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_in_word {
    from { opacity: 0; transform: translateY(30px) rotate(1.2deg); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_underline {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes edouk_lp_shine {
    0%        { transform: translateX(-160%); }
    55%, 100% { transform: translateX(320%); }
}
@keyframes edouk_lp_cue {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}
@keyframes edouk_lp_cue_dot {
    0%   { transform: translateY(0);    opacity: 0; }
    26%  { opacity: 1; }
    100% { transform: translateY(13px); opacity: 0; }
}
/* La section 2 ( brief section 2, 2026-09-06 ). `translateY(-50%)` dans les DEUX
   images de `edouk_lp_seg`, voir `.edouk_lp_pipe_line`. */
@keyframes edouk_lp_seg {
    from { transform: translateY(-50%) scaleX(0); }
    to   { transform: translateY(-50%) scaleX(1); }
}
@keyframes edouk_lp_signal {
    0%   { inset-inline-start: 0;    opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { inset-inline-start: 100%; opacity: 0; }
}
/* Le même signal, vers le bas, dans les raccords verticaux des petits écrans. */
@keyframes edouk_lp_signal_v {
    0%   { top: 0;    opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
/* La section 3 ( brief section 3, 2026-09-06 ). L'entrée d'abord — les étapes
   par la gauche, les fiches par la droite, l'inverse en arabe. */
@keyframes edouk_lp_step {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_step_rtl {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_row {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_row_rtl {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}
@keyframes edouk_lp_glow {
    0%, 100% { box-shadow: 0 12px 26px -16px rgba(49, 107, 255, 0.7); }
    50%      { box-shadow: 0 12px 26px -16px rgba(49, 107, 255, 0.7), 0 0 0 7px rgba(49, 107, 255, 0.13); }
}
/* La rotation de la notification est répétée à chaque étape, et c'est l'angle de
   l'élément ( `--toast-tilt` : 10° / 7° sous 768px, négatif en arabe ) : voir
   `.edouk_lp_mock_toast`. */
@keyframes edouk_lp_notif {
    0%   { opacity: 0; transform: translateY(30px) scale(0.9) rotate(var(--toast-tilt)); }
    62%  { opacity: 1; transform: translateY(-6px) scale(1.03) rotate(var(--toast-tilt)); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--toast-tilt)); }
}
@keyframes edouk_lp_notif_float {
    0%, 100% { transform: translateY(0) rotate(var(--toast-tilt)); }
    50%      { transform: translateY(-7px) rotate(var(--toast-tilt)); }
}
@keyframes edouk_lp_halo_badge {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168, 255, 216, 0); }
    50%      { box-shadow: 0 0 0 7px rgba(168, 255, 216, 0.28); }
}
/* Le relais permanent — période commune de 6 s, l'effet visible occupe les 17 %
   du début. Période identique, délais échelonnés : jamais de dérive. */
/* `--relay-base` : l'ombre que l'élément porte déjà, gardée sous l'anneau ( le rond
   de l'appel, la coche, la pastille 3 de la méthode ). Vide ailleurs. */
@keyframes edouk_lp_relay {
    0%        { box-shadow: var(--relay-base, 0 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 0 rgba(49, 107, 255, 0); }
    7%        { box-shadow: var(--relay-base, 0 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 8px rgba(49, 107, 255, 0.17); }
    17%, 100% { box-shadow: var(--relay-base, 0 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 0 rgba(49, 107, 255, 0); }
}
@keyframes edouk_lp_relay_mint {
    0%        { box-shadow: var(--relay-base, 0 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 0 rgba(125, 247, 192, 0); }
    7%        { box-shadow: var(--relay-base, 0 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 9px rgba(125, 247, 192, 0.34); }
    17%, 100% { box-shadow: var(--relay-base, 0 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 0 rgba(125, 247, 192, 0); }
}
@keyframes edouk_lp_relay_dot {
    0%   { transform: translateY(-5px); opacity: 0; }
    2%   { opacity: 1; }
    9%   { transform: translateY(13px); opacity: 0; }
    100% { transform: translateY(13px); opacity: 0; }
}
@keyframes edouk_lp_breathe {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.05); }
}
@keyframes edouk_lp_row_sweep {
    0%        { transform: translateX(-100%); }
    14%, 100% { transform: translateX(240%); }
}
/* La section 4 ( brief section 4, 2026-09-06 ). Les traits horizontaux réemploient
   `edouk_lp_underline` ( `scaleX` 0 → 1 ), les verticaux `edouk_lp_grow`. */
@keyframes edouk_lp_tile {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}
@keyframes edouk_lp_land {
    0%   { opacity: 0; transform: translateY(-30px) scale(0.84); }
    62%  { opacity: 1; transform: translateY(4px) scale(1.07); }
    100% { opacity: 1; transform: none; }
}
@keyframes edouk_lp_wave {
    0%, 100% { transform: scaleY(0.42); }
    50%      { transform: scaleY(1); }
}
@keyframes edouk_lp_draw {
    from { stroke-dashoffset: 217; }
    to   { stroke-dashoffset: 0; }
}
@keyframes edouk_lp_chart_sweep {
    0%        { transform: translateX(-110%); }
    16%, 100% { transform: translateX(300%); }
}

/* ---------- L'apparition au scroll ----------
   Posée par `landing_controller`, qui n'ajoute `is_hidden` que s'il a bien un
   `IntersectionObserver` : sans lui, rien n'est masqué et la page se rend
   entière. Le repli est le défaut, pas une correction. */
[data-reveal] {
    transition:
        opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* LA CHORÉGRAPHIE D'UNE SCÈNE ( V2 ). Les `[data-anim]` d'un `[data-motion]`
   naissent en pause, à leur première image ( `both` ) — invisibles. C'est
   `landing_controller` qui pose `is_live` sur la scène quand elle entre dans
   l'écran, et sans lui, jamais : voir le repli sans `IntersectionObserver`. */
[data-anim] {
    animation-play-state: paused;
}
[data-motion].is_live [data-anim] {
    animation-play-state: running;
}
/* `will-change` PENDANT LE MASQUAGE, ET SEULEMENT PENDANT. Sans lui, la couche
   de composition d'une section entière — cinq cartes et leurs ombres — est
   fabriquée dans l'urgence, au moment précis où le défilement l'atteint : c'est
   ce à-coup qu'on sentait section par section. Ici la couche existe avant, et
   `will-change` disparaît avec `is_hidden` quand le JS la retire. */
[data-reveal].is_hidden {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is_hidden {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .edouk_lp_dot span:first-child,
.edouk_lp_ambient,
.edouk_lp_float_sheen,
.edouk_lp_float_pill,
.edouk_lp_strat_ring_in,
.edouk_lp_site,
.edouk_lp_curve_blip span:first-child,
.edouk_lp_word,
.edouk_lp_word_line,
.edouk_lp_hero_copy .edouk_lp_pill,
.edouk_lp_hero_lead,
.edouk_lp_hero_cta,
.edouk_lp_shine,
.edouk_lp_cue,
.edouk_lp_cue_mouse,
.edouk_lp_cue_mouse span,
[data-anim] {
        animation: none;
    }
    /* Le calque de parallaxe ne bouge plus : `landing_controller` ne s'y attache
       pas quand le système demande moins de mouvement, et si un `transform` était
       déjà posé, il tombe. */
    .edouk_lp_parallax {
        transform: none !important;
    }
    /* Sans son animation, la courbe de la méthode resterait effacée ( le décalage
       du tiret vaut sa longueur ) : le tracé se montre entier. */
    .edouk_lp_curve_stroke {
        stroke-dashoffset: 0;
    }
}