/* ============================================================
   motion.css, couche d'animation du site Learndigi
   ------------------------------------------------------------
   Écrite comme une couche séparée, posée par-dessus le design
   existant : aucune règle ne réécrit le style de base, tout est
   préfixé « lx- » pour ne jamais entrer en conflit avec les
   classes des pages. Retirer les deux lignes qui appellent
   motion.css et motion.js rend le site exactement à son état
   d'avant.

   Le vocabulaire de mouvement, repris du site de référence et
   adapté à nos couleurs :
     · rails d'accent verticaux qui se tracent près des chiffres
     · bandeau d'outils qui défile en continu
     · phrases qui s'allument mot par mot
     · boutons qui s'enfoncent sous le doigt
     · révélations décalées à l'entrée dans l'écran

   Rien ne bouge si le visiteur a demandé moins d'animations :
   voir le bloc prefers-reduced-motion en fin de fichier.
   ============================================================ */

:root{
  --lx-navy:#1B2C6B;
  --lx-gold:#E8921A;
  --lx-red:#C0392B;
  --lx-line:#D9DDE5;
  --lx-ease:cubic-bezier(.16,1,.3,1);
}

/* ── Barre de progression de lecture ────────────────────────
   Un fil doré en haut de page. Il dit où l'on en est dans une
   page longue, ce qu'aucune barre de défilement fine de macOS
   ne montre plus.                                            */
.lx-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--lx-gold),var(--lx-red));
  z-index:9999;pointer-events:none;
  will-change:transform;
}

/* ── Rails d'accent ─────────────────────────────────────────
   Un trait vertical court qui se trace à gauche d'un chiffre ou
   d'un titre au moment où il entre dans l'écran. C'est le geste
   le plus discret du lot et celui qui se remarque le plus : il
   souligne sans rien ajouter à lire.                          */
.lx-seg{
  position:absolute;left:0;top:50%;
  width:2px;height:0;
  transform:translateY(-50%);
  background:linear-gradient(180deg,var(--lx-gold),var(--lx-red));
  border-radius:2px;
  transition:height .5s var(--lx-ease);
  pointer-events:none;
}
.lx-seg-on{height:26px}

/* ── Bandeau d'outils qui défile ────────────────────────────
   Les logos avancent en continu, avec un fondu sur les deux
   bords pour que rien n'apparaisse ni ne disparaisse net. La
   piste est dupliquée à l'identique : quand la première moitié
   a défilé, la seconde est exactement à sa place et la boucle
   ne se voit pas.                                             */
.lx-marquee{
  position:relative;width:100%;min-width:0;max-width:100%;
  height:48px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
/* La piste est sortie du flux volontairement. En la laissant
   dedans, sa largeur « max-content » remontait au conteneur
   parent, qui est une cellule de grille : la page entière
   gagnait 700 pixels et défilait latéralement. Hors flux, elle
   ne pèse plus rien dans le calcul de largeur. */
.lx-marquee-track{
  position:absolute;top:0;left:0;height:100%;
  display:flex;width:max-content;align-items:center;gap:54px;
  animation:lx-slide var(--lx-marquee-duration,42s) linear infinite;
  will-change:transform;
}
.lx-marquee:hover .lx-marquee-track{animation-play-state:paused}
.lx-marquee-set{display:flex;align-items:center;gap:54px;flex:none}
.lx-marquee-item{
  display:flex;align-items:center;gap:11px;flex:none;
  opacity:.62;filter:grayscale(1);
  transition:opacity .3s ease,filter .3s ease;
}
.lx-marquee:hover .lx-marquee-item{opacity:.42}
.lx-marquee-item:hover{opacity:1;filter:grayscale(0)}
/* Boîte de taille fixe, image contenue dedans : la piste peut
   être mesurée avant même que les logos soient chargés, et un
   logo non carré n'est pas déformé. */
.lx-marquee-item img{height:30px;width:30px;display:block;object-fit:contain}
.lx-marquee-item span{
  font-family:'Raleway',sans-serif;font-size:13.5px;font-weight:700;
  color:var(--lx-navy);white-space:nowrap;letter-spacing:.2px;
}
@keyframes lx-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.lx-marquee-legend{
  display:block;margin-top:14px;text-align:center;
  font-family:'Open Sans',sans-serif;font-size:12px;color:#7A7F8E;
}

/* ── Phrase qui s'allume mot par mot ────────────────────────
   Les mots partent en gris clair et prennent leur couleur l'un
   après l'autre, au rythme de la lecture. Réservé aux deux ou
   trois phrases qui portent vraiment le propos : appliqué
   partout, l'effet devient un tic.                            */
.lx-words{display:inline}
.lx-w{
  display:inline-block;
  color:#C7CAD4;
  transition:color .34s ease,transform .34s var(--lx-ease);
  transform:translateY(2px);
}
.lx-w-on{color:inherit;transform:none}

/* ── Boutons tactiles ───────────────────────────────────────
   Une ombre pleine sous le bouton, qui se réduit pendant que le
   bouton descend : il s'enfonce au lieu de changer de teinte.
   La cible reste au même endroit, seule l'ombre absorbe le
   déplacement.                                                */
.lx-press{
  transition:transform .14s ease,box-shadow .14s ease,filter .18s ease !important;
  box-shadow:0 4px 0 var(--lx-press-shadow,rgba(10,14,36,.22));
}
.lx-press:hover{
  transform:translateY(2px);
  box-shadow:0 2px 0 var(--lx-press-shadow,rgba(10,14,36,.22));
}
.lx-press:active{
  transform:translateY(4px);
  box-shadow:0 0 0 var(--lx-press-shadow,rgba(10,14,36,.22));
}

/* ── Révélation décalée des grilles ─────────────────────────
   Les enfants d'une même grille entrent l'un après l'autre.
   Le décalage est calculé en JS et posé en variable, pour que
   la règle reste unique quel que soit le nombre de cartes.    */
.lx-stagger > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease var(--lx-delay,0s),
             transform .7s var(--lx-ease) var(--lx-delay,0s);
}
.lx-stagger-on > *{opacity:1;transform:none}

/* ── Chiffres qui défilent ──────────────────────────────────
   Les chiffres gardent leur largeur pendant le décompte, sinon
   la ligne tremble à chaque incrément.                        */
.lx-count{font-variant-numeric:tabular-nums}

/* ── Soulignement qui se trace ──────────────────────────────
   Sur les liens de texte, le trait part de la gauche au survol
   au lieu d'apparaître d'un coup.                             */
.lx-underline{
  background-image:linear-gradient(var(--lx-gold),var(--lx-gold));
  background-size:0% 1.5px;background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .34s var(--lx-ease);
  text-decoration:none;
}
.lx-underline:hover{background-size:100% 1.5px}

/* ── Parallaxe du fond de la page d'accueil ─────────────────
   Le fond descend moins vite que le texte. Très léger,
   volontairement : au-delà, la lecture du titre en souffre.
   L'agrandissement de 6 % évite qu'un bord vide apparaisse en
   haut quand l'image descend ; il déborde donc de 3 % de chaque
   côté, d'où la découpe posée sur la section qui l'accueille. */
.lx-parallax{will-change:transform}
.lx-clip{overflow:hidden}

/* ── Barre de navigation au défilement ──────────────────────
   Elle pose une ombre dès que la page bouge, ce qui la détache
   du contenu qui passe dessous.

   Plus de flou d'arrière-plan. La barre est opaque à 98 %, le
   flou ne se voyait donc pas, mais le navigateur le recalculait
   à chaque image sur toute la largeur de l'écran.

   Sa hauteur ne change plus (règle nav.scrolled d'index.html et
   d'offres.css). Elle passait de 92 à 72 px au quarantième pixel
   de défilement et remontait toute la page de 20 px. Le
   navigateur compensait en reculant d'autant, et la page, mesurée
   le 14/09/2026, repartait seule vers le bas : de 44 à 142 px en
   une seconde et demie, sans que personne ne touche à rien.    */
.lx-nav-shift{
  transition:box-shadow .3s ease,background-color .3s ease !important;
}
.lx-nav-shift.lx-nav-on{
  box-shadow:0 1px 0 var(--lx-line),0 10px 30px -18px rgba(10,14,36,.45);
}

/* ── Ancres internes ────────────────────────────────────────
   Le défilement est redevenu celui du navigateur. Une ancre
   aligne sa cible en haut de l'écran, donc sous la barre : la
   marge la fait s'arrêter juste en dessous.                  */
[id]{scroll-margin-top:100px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important}
}

/* ── Cartes qui se soulèvent ────────────────────────────────*/
.lx-lift{transition:transform .3s var(--lx-ease),box-shadow .3s ease}
.lx-lift:hover{transform:translateY(-3px)}

/* ── Respect du réglage système ─────────────────────────────
   Un visiteur qui a demandé moins d'animations reçoit la page
   entièrement lisible, sans aucun mouvement : les états finaux
   sont posés directement.                                     */
@media (prefers-reduced-motion: reduce){
  .lx-progress{display:none}
  .lx-marquee-track{animation:none;transform:none}
  .lx-marquee{-webkit-mask-image:none;mask-image:none}
  .lx-marquee-item{opacity:1;filter:none}
  .lx-w{color:inherit;transform:none;transition:none}
  .lx-seg{height:26px;transition:none}
  .lx-stagger > *{opacity:1;transform:none;transition:none}
  .lx-press,.lx-lift,.lx-underline{transition:none}
  .lx-press:hover,.lx-press:active,.lx-lift:hover{transform:none}
  .lx-underline:hover{background-size:100% 1.5px}
  .lx-parallax{transform:none !important}
}

/* ============================================================
   BLOCS REPRIS, 12/09/2026
   ------------------------------------------------------------
   Hugo a relevé que plusieurs sections « faisaient IA ». Le
   défaut était repérable : des numéros 01/02/03 posés partout,
   y compris là où le contenu n'est pas une séquence (trois
   tailles de cabinet, quatre critères de devis, quatre livrables).
   Un numéro qui ne compte rien est de la décoration, et c'est
   exactement la signature qu'on reproche aux pages générées.
   Ils ne sont gardés que dans le parcours en quatre étapes, où
   l'ordre porte une information réelle.
   Le reste suit : moins de cellules, plus de rythme, et de
   vraies photographies pour casser les murs de texte.
   ============================================================ */

/* ── Logos du bandeau en couleur ────────────────────────────
   Le gris cachait Claude, Brevo et Apollo, qui sont justement
   ce qu'on veut montrer. */
.lx-marquee-item{opacity:.92;filter:none}
.lx-marquee:hover .lx-marquee-item{opacity:.6}
.lx-marquee-item:hover{opacity:1}

/* ── Ligne de faits ─────────────────────────────────────────
   Remplace la fiche en quatre cellules. Quatre faits séparés
   par un filet, sur une seule respiration : on lit une phrase,
   plus un tableau.                                            */
.lx-faits{
  display:flex;flex-wrap:wrap;gap:0;margin:26px 0 0;padding:0;
  list-style:none;border-top:1px solid var(--lx-line);
}
.lx-faits li{
  flex:1 1 200px;min-width:0;padding:18px 22px 18px 0;
  border-bottom:1px solid var(--lx-line);
}
.lx-faits li + li{padding-left:22px;border-left:1px solid var(--lx-line)}
.lx-faits b{
  display:block;font-family:'Raleway',sans-serif;
  font-size:19px;font-weight:800;color:var(--lx-navy);
  letter-spacing:-.2px;margin-bottom:3px;
}
.lx-faits span{
  display:block;font-family:'Open Sans',sans-serif;
  font-size:13.5px;line-height:1.5;color:#6A7080;
}
@media (max-width:760px){
  .lx-faits li{flex:1 1 100%;padding:15px 0}
  .lx-faits li + li{padding-left:0;border-left:none}
}

/* ── Frise du parcours ──────────────────────────────────────
   Les quatre étapes ne sont plus quatre boîtes identiques mais
   une ligne qui se trace. Le trait de progression avance au
   défilement : c'est lui qui raconte qu'il s'agit d'une suite,
   le cadre autour de chaque étape devient inutile.             */
.lx-frise{
  position:relative;list-style:none;margin:44px 0 0;padding:0;
  display:grid;gap:30px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.lx-frise::before{
  content:'';position:absolute;left:0;right:0;top:17px;height:2px;
  background:var(--lx-line);
}
.lx-frise::after{
  content:'';position:absolute;left:0;top:17px;height:2px;
  width:var(--lx-frise-avance,0%);
  background:linear-gradient(90deg,var(--lx-gold),var(--lx-red));
  transition:width .9s var(--lx-ease);
}
.lx-etape{position:relative;padding-top:54px}
.lx-etape-num{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:#fff;border:2px solid var(--lx-line);
  font-family:'Raleway',sans-serif;font-size:14px;font-weight:800;
  color:#9AA0B0;
  transition:border-color .45s ease,color .45s ease,transform .45s var(--lx-ease);
}
.lx-etape-on .lx-etape-num{
  border-color:var(--lx-gold);color:var(--lx-navy);transform:scale(1.06);
}
.lx-etape h3{
  font-family:'Raleway',sans-serif;font-size:17px;font-weight:800;
  line-height:1.3;color:var(--lx-navy);margin:0 0 8px;letter-spacing:-.2px;
}
.lx-etape p{
  font-family:'Open Sans',sans-serif;font-size:14.5px;line-height:1.65;
  color:#5A6070;margin:0;
}
@media (max-width:860px){
  .lx-frise{grid-template-columns:1fr;gap:0;padding-left:44px}
  .lx-frise::before{left:17px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .lx-frise::after{
    left:17px;top:0;width:2px;height:var(--lx-frise-avance,0%);
    background:linear-gradient(180deg,var(--lx-gold),var(--lx-red));
    transition:height .9s var(--lx-ease);
  }
  .lx-etape{padding:0 0 30px 0}
  .lx-etape-num{left:-44px;top:-4px}
}

/* ── Photographies de section ───────────────────────────────
   Format large et calme, sans ombre portée ni coin arrondi :
   la photo doit se lire comme une image, pas comme une carte
   de plus.                                                    */
.lx-photo{
  position:relative;margin:38px 0 0;overflow:hidden;
  background:#EFF1F4;
}
.lx-photo img{
  display:block;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.4s var(--lx-ease),filter 1.4s ease;
}
.lx-photo-on img{transform:scale(1)}
.lx-photo figcaption{
  position:absolute;left:0;bottom:0;
  padding:10px 16px;
  background:var(--lx-navy);color:#fff;
  font-family:'Raleway',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
}
.lx-photo--large{aspect-ratio:21/9}
.lx-photo--moyenne{aspect-ratio:3/2}
@media (max-width:760px){
  .lx-photo--large{aspect-ratio:16/10}
}

/* ── Listes sans numérotation décorative ────────────────────
   Un filet doré court remplace le « 01 » : il marque l'entrée
   sans prétendre à un ordre qui n'existe pas.                 */
.lx-liste{list-style:none;margin:0;padding:0}
.lx-liste li{
  position:relative;padding-left:26px;margin-bottom:14px;
  font-family:'Open Sans',sans-serif;line-height:1.65;
}
.lx-liste li::before{
  content:'';position:absolute;left:0;top:.7em;
  width:14px;height:2px;background:var(--lx-gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--lx-ease) var(--lx-delai,0s);
}
.lx-liste-on li::before{transform:scaleX(1)}

@media (prefers-reduced-motion: reduce){
  .lx-frise::after{transition:none}
  .lx-photo img{transform:none;transition:none}
  .lx-liste li::before{transform:scaleX(1);transition:none}
  .lx-etape-num{transition:none}
}

/* ── Rattrapage des deux listes numérotées ──────────────────
   « tarif-crit » et « deliverable-list » étaient des grilles
   « colonne étroite + texte », la colonne étroite portant le
   numéro décoratif. Le numéro retiré, le texte tombait dans ces
   32 à 34 pixels et s'affichait un mot par ligne. On repasse en
   colonne unique : le filet doré occupe la place du numéro, sans
   prétendre à un ordre qui n'existe pas.                       */
.tarif-crit.lx-liste li,
.deliverable-list.lx-liste li{
  display:block;grid-template-columns:none;
  padding-left:26px;margin-bottom:0;
}
/* Sur le panneau tarif, qui est sombre, le filet doit rester lisible. */
.tarif-crit.lx-liste li::before{background:var(--lx-gold)}

/* ============================================================
   REPRISE 2, 12/09/2026
   ------------------------------------------------------------
   « ça fait juste un trait qui tient dans des trucs ». Le
   reproche est juste : une hairline continue avec quatre petits
   ronds dessus, c'est un schéma, pas une mise en page. On retire
   le fil et les pastilles. À la place, un grand chiffre en
   graisse légère, et un filet épais au-dessus de chaque colonne
   qui se remplit quand l'étape entre dans l'écran. Le rythme
   vient de la typographie, pas d'un décor.
   ============================================================ */

.lx-frise{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:52px 0 0;padding:0;list-style:none;position:static;
}
.lx-frise::before,.lx-frise::after{content:none}

.lx-etape{
  position:relative;padding:26px 30px 8px 0;
}
.lx-etape + .lx-etape{padding-left:30px}
/* Le filet de tête : gris au repos, il se remplit d'or au passage.
   C'est le seul mouvement du bloc, et il suffit à dire la suite. */
.lx-etape::before{
  content:'';position:absolute;top:0;left:0;right:30px;height:3px;
  background:var(--lx-line);
}
.lx-etape::after{
  content:'';position:absolute;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--lx-gold),var(--lx-red));
  transition:width .75s var(--lx-ease);
}
.lx-etape-on::after{width:calc(100% - 30px)}
.lx-etape + .lx-etape::before{left:30px}
.lx-etape + .lx-etape::after{left:30px}
.lx-etape + .lx-etape.lx-etape-on::after{width:calc(100% - 60px)}

.lx-etape-num{
  position:static;display:block;
  width:auto;height:auto;border:none;background:none;border-radius:0;
  font-size:52px;line-height:1;font-weight:400;
  color:#C3C9D8;letter-spacing:-.03em;
  margin:0 0 18px;
  transition:color .6s ease;
}
.lx-etape-on .lx-etape-num{color:var(--lx-gold);transform:none}
.lx-etape h3{margin:0 0 10px;font-size:19px;line-height:1.25}
.lx-etape p{font-size:15px;line-height:1.6;color:#5A6070;margin:0}

@media (max-width:860px){
  .lx-frise{grid-template-columns:1fr;padding-left:0}
  .lx-etape,.lx-etape + .lx-etape{padding:22px 0 26px}
  .lx-etape::before{right:0}
  .lx-etape + .lx-etape::before,.lx-etape + .lx-etape::after{left:0}
  .lx-etape-on::after,.lx-etape + .lx-etape.lx-etape-on::after{width:100%}
  .lx-etape-num{font-size:40px;margin-bottom:12px}
}

/* ── Bloc tarif ─────────────────────────────────────────────
   Le libellé était posé à même la photo et les tirets des
   critères venaient buter dessus. On décolle l'un de l'autre :
   la photo garde sa place, le libellé reprend sa ligne.        */
.tarif-media .lx-photo{margin:0 0 26px}
.tarif-media .tarif-panel-eb{display:block;margin:0 0 18px}
.tarif-crit.lx-liste li{padding-left:0;padding-top:2px}
.tarif-crit.lx-liste li::before{
  position:static;display:block;
  width:22px;height:2px;margin:0 0 9px;
  background:var(--lx-gold);
}

/* ── Bouton ─────────────────────────────────────────────────
   Le petit carré « + » accolé au libellé faisait bricolage. Il
   devient un bloc de même hauteur que le texte, séparé par un
   filet, avec une flèche : le bouton se lit comme un objet
   unique au lieu de deux morceaux collés.                      */
/* La hauteur est portée par le bouton lui-même et non par le
   remplissage vertical du libellé : en passant ce dernier à
   « 0 24px » pour centrer le texte, le bouton s'écrasait à la
   hauteur d'une ligne, soit 21 pixels. */
.btn-duo{
  align-items:stretch;border-radius:0;overflow:hidden;
  min-height:52px;
}
/* Le carré garde la couleur que Codex lui a donnée : la teinter
   en sombre le détachait du libellé et le bouton redevenait deux
   morceaux collés, ce qu'on cherchait justement à corriger. */
.btn-duo .btn-plus{
  display:flex;align-items:center;justify-content:center;
  width:52px;font-size:0;flex:none;
}
.btn-duo .btn-plus::after{
  content:'';display:block;width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,1px);
  transition:transform .22s var(--lx-ease);
}
.btn-duo:hover .btn-plus::after{transform:rotate(45deg) translate(1px,-1px)}
.btn-duo .btn-label{padding:0 24px;display:flex;align-items:center;white-space:nowrap}
.btn-duo .lx-swap,.btn-duo .lx-swap > span{white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .lx-etape::after{transition:none}
  .btn-duo .btn-plus::after{transition:none}
}

/* ============================================================
   GESTES REPRIS DE CUBERTO, 12/09/2026
   ------------------------------------------------------------
   Quatre mécanismes retenus dans leur feuille de style, choisis
   parce qu'ils tiennent sur un site B2B. Leur curseur
   personnalisé en mix-blend-mode et leurs titres à 16 rem sont
   écartés : sur un site qui vend de la formation à des cabinets
   de courtage, ils feraient démonstration technique plutôt que
   sérieux.
   ============================================================ */

/* ── 1. Le bouton à remplissage ─────────────────────────────
   Leur signature. Un voile monte du bas avec un bord supérieur
   arrondi qui s'aplatit en cours de route, pendant que le
   libellé glisse vers le haut et découvre son double dans la
   couleur inverse. Deux durées différentes sur la même
   transition (.5s pour la position, .9s pour l'arrondi) : c'est
   ce décalage qui donne l'effet de liquide.                   */
.lx-ripple{position:relative;overflow:hidden;isolation:isolate}
.lx-ripple-fill{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;border-radius:inherit;pointer-events:none;
}
.lx-ripple-fill i{
  display:block;width:100%;height:100%;
  transform:translateY(101%);
  background:currentColor;
  border-radius:50% 50% 0 0;
  transition:transform .5s cubic-bezier(.4,0,0,1),
             border-radius .5s cubic-bezier(.4,0,0,1);
}
.lx-ripple:hover .lx-ripple-fill i,
.lx-ripple:focus-visible .lx-ripple-fill i{
  transform:translateY(0);border-radius:0;
  transition-duration:.5s,.9s;
}

/* ── 2. Le libellé qui se retourne ──────────────────────────
   Le double est écrit dans un attribut et posé en ::after, donc
   aucun texte en double dans le document : un lecteur d'écran
   n'entend le libellé qu'une fois.                            */
.lx-swap{position:relative;display:block;overflow:hidden;z-index:2}
.lx-swap > span{display:block;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.lx-swap > span::after{
  content:attr(data-text);
  display:block;position:absolute;top:112%;left:0;right:0;
  color:var(--lx-ripple-ink,inherit);
}
.lx-ripple:hover .lx-swap > span,
.lx-ripple:focus-visible .lx-swap > span{transform:translateY(-112%)}
.lx-ripple .btn-plus{position:relative;z-index:2}

/* Les liens de texte reçoivent le même retournement, sans voile. */
.lx-swaponly .lx-swap > span::after{color:var(--lx-gold)}
.lx-swaponly:hover .lx-swap > span{transform:translateY(-112%)}

/* ── 3. Le survol des visuels ───────────────────────────────
   Le cadre recule pendant que l'image avance. Les deux gestes
   opposés sur la même durée créent une profondeur qu'un simple
   agrandissement ne donne pas.                                */
.lx-zoom{overflow:hidden;transform:translateZ(0)}
.lx-zoom,.lx-zoom img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.lx-zoom:hover{transform:scale(.985)}
.lx-zoom:hover img{transform:scale(1.05)}

/* ── 4. Les portraits qui se rangent ────────────────────────
   Les deux portraits étaient pivotés de part et d'autre au
   repos, comme deux photos posées sur un bureau. De près, sur
   des visages, la fantaisie se lisait comme un défaut de
   montage : deux photos de travers. Ils sont donc droits.

   Le mouvement reste, déplacé sur le survol : les deux cartes
   s'écartent l'une de l'autre et montent, à un dixième de
   seconde d'intervalle. Ce décalage est ce qui fait qu'on voit
   deux personnes et non un bloc.                              */
@media (pointer:fine) and (min-width:861px){
  .lx-ranger > *{transition:transform .85s cubic-bezier(.25,1,.5,1)}
  .lx-ranger:hover > :first-child{transform:translate(-7px,-6px)}
  .lx-ranger:hover > :nth-child(2){transform:translate(7px,-6px);transition-delay:.09s}
}

/* Ressort léger sur les éléments ronds, repris de leur
   cubic-bezier à dépassement. */
.lx-spring{transition:transform .7s cubic-bezier(.34,4.56,.64,1)}
.lx-spring:hover{transform:scale(.95)}

@media (prefers-reduced-motion: reduce){
  .lx-ripple-fill i{display:none}
  .lx-swap > span{transform:none !important;transition:none}
  .lx-zoom,.lx-zoom img,.lx-zoom:hover,.lx-zoom:hover img{transform:none;transition:none}
  .lx-ranger > *{transform:none !important;transition:none}
  .lx-spring,.lx-spring:hover{transform:none;transition:none}
}

/* ============================================================
   STRUCTURE, 12/09/2026
   ------------------------------------------------------------
   Le reproche « ça fait IA » ne venait plus des animations mais
   du squelette : douze sections de même largeur, même hauteur,
   titre centré puis grille de boîtes égales. Cette régularité
   est la signature. On la casse à trois endroits.
   ============================================================ */

/* ── 1. Défilement ──────────────────────────────────────────
   Lenis a été retiré le 14/09/2026 (voir motion.js) : le
   défilement est celui du navigateur.                        */

/* ── 2. Sections qui se chevauchent ─────────────────────────
   Une section remonte sur celle qui la précède et arrondit ses
   deux coins hauts. La page cesse d'être une pile de blocs
   posés bout à bout : elle prend une épaisseur.               */
.lx-overlap{
  position:relative;z-index:3;
  margin-top:clamp(-88px,-6vw,-48px);
  border-radius:clamp(28px,4vw,64px) clamp(28px,4vw,64px) 0 0;
  overflow:hidden;
}

/* ── 3. La phrase géante qui défile ─────────────────────────
   Un seul endroit de la page où la typographie prend toute la
   largeur et sort du cadre. C'est la respiration qui manquait
   entre des sections toutes calibrées pareil.                 */
.lx-reel{
  position:relative;overflow:hidden;
  padding:clamp(34px,5vw,68px) 0;
  border-top:1px solid var(--lx-line);
  border-bottom:1px solid var(--lx-line);
}
.lx-reel-track{
  display:flex;width:max-content;align-items:center;
  animation:lx-reel var(--lx-reel-duration,34s) linear infinite;
  will-change:transform;
}
.lx-reel:hover .lx-reel-track{animation-play-state:paused}
.lx-reel-item{
  padding:0 clamp(18px,3vw,54px);
  font-size:clamp(38px,7.4vw,104px);
  font-weight:400;line-height:1.06;letter-spacing:-.035em;
  color:var(--lx-navy);white-space:nowrap;
}
.lx-reel-item em{
  font-family:var(--lx-serif);font-style:italic;font-weight:400;
  color:var(--lx-gold);
}
.lx-reel-sep{
  display:inline-block;width:.34em;height:.34em;
  margin:0 .1em .22em;border-radius:50%;
  background:var(--lx-gold);vertical-align:middle;
}
@keyframes lx-reel{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (prefers-reduced-motion: reduce){
  .lx-reel-track{animation:none}
  .lx-overlap{margin-top:0;border-radius:0}
}

/* ============================================================
   LA DÉMO VIVANTE, 12/09/2026
   ------------------------------------------------------------
   Analyse d'OPTIGEN et de Cuberto : ce qui les fait échapper au
   gabarit n'est ni leur police ni leurs transitions, c'est qu'ils
   montrent leur produit en train de fonctionner. OPTIGEN a une
   carte animée où des logos d'outils gravitent pendant qu'une
   instruction se tape et que des étapes se cochent. Aucun
   générateur de site ne produit ça, parce qu'il faut connaître le
   métier pour l'écrire.

   La nôtre montre ce qu'un courtier fait vraiment : une relance
   d'échéance rédigée à partir d'un contrat. Elle remplace la
   liste « Votre boîte à outils métier », qui était quatre lignes
   de texte dans un cadre.
   ============================================================ */

.lx-demo{
  position:relative;
  padding:34px 22px 8px;
  font-family:var(--lx-sans);
}
.lx-demo-carte{
  position:relative;z-index:2;
  background:#fff;border:1px solid var(--lx-line);
  border-radius:16px;padding:20px 22px 18px;
  box-shadow:0 26px 60px -34px rgba(10,14,36,.42);
}

/* ── Les logos qui gravitent ────────────────────────────────
   Ils flottent en permanence avec des retards différents, ce qui
   évite l'effet mécanique d'une animation synchrone.           */
.lx-demo-orbe{
  position:absolute;z-index:3;
  width:42px;height:42px;border-radius:11px;
  background:#fff;border:1px solid var(--lx-line);
  box-shadow:0 12px 26px -14px rgba(10,14,36,.45);
  display:grid;place-items:center;
  opacity:0;transform:translateY(6px);
  transition:opacity .7s ease,transform .7s var(--lx-ease);
}
.lx-demo-orbe img{width:22px;height:22px;object-fit:contain}
.lx-demo.lx-demo-on .lx-demo-orbe{opacity:1;transform:none;animation:lx-flotte 6s ease-in-out infinite}
.lx-demo-orbe:nth-of-type(1){left:-6px;top:16%}
.lx-demo-orbe:nth-of-type(2){right:-8px;top:6%;animation-delay:-1.5s;transition-delay:.1s}
.lx-demo-orbe:nth-of-type(3){right:-10px;top:54%;animation-delay:-3s;transition-delay:.2s}
.lx-demo-orbe:nth-of-type(4){left:-10px;bottom:16%;animation-delay:-2.2s;transition-delay:.3s}
@keyframes lx-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── En-tête du dossier ─────────────────────────────────────*/
.lx-demo-tete{display:flex;align-items:center;gap:11px;padding-bottom:13px;border-bottom:1px solid var(--lx-line)}
.lx-demo-av{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--lx-navy),#4A7FD4);
  color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
.lx-demo-tete b{display:block;font-size:14px;font-weight:600;color:var(--lx-navy);line-height:1.3}
.lx-demo-tete span{display:block;font-size:12px;color:#7A7F8E;line-height:1.4}

/* ── Étiquettes du dossier ──────────────────────────────────*/
.lx-demo-etiq{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 0}
.lx-demo-etiq i{
  font-style:normal;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:99px;
  background:#EFF1F4;color:#5A6070;
  opacity:0;transform:translateY(4px);
  transition:opacity .4s ease,transform .45s var(--lx-ease);
}
.lx-demo-on .lx-demo-etiq i{opacity:1;transform:none}
.lx-demo-etiq i:nth-child(2){transition-delay:.08s}
.lx-demo-etiq i:nth-child(3){transition-delay:.16s}

/* ── L'instruction qui se tape ──────────────────────────────*/
.lx-demo-prompt{
  display:flex;align-items:flex-start;gap:9px;
  margin:14px 0 0;padding:11px 13px;
  background:#FCFBF8;border:1px dashed var(--lx-gold);
  border-radius:9px;
  font-size:13px;line-height:1.5;color:#444;min-height:58px;
}
.lx-demo-prompt svg{flex:none;width:14px;height:14px;margin-top:3px;color:var(--lx-gold)}
.lx-demo-curseur{
  display:inline-block;width:2px;height:1em;
  background:var(--lx-navy);vertical-align:-2px;margin-left:1px;
  animation:lx-clign 1s step-end infinite;
}
@keyframes lx-clign{50%{opacity:0}}

/* ── Les étapes qui se cochent ──────────────────────────────
   Un rail vertical se remplit derrière les pastilles. C'est lui
   qui donne la sensation de traitement en cours plutôt que
   d'une liste qui s'affiche.                                  */
.lx-demo-etapes{position:relative;list-style:none;margin:15px 0 0;padding:0}
.lx-demo-rail{position:absolute;left:13px;top:16px;bottom:16px;width:2px;background:var(--lx-line);border-radius:2px;overflow:hidden}
.lx-demo-rail i{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--lx-gold),var(--lx-red));transition:height .6s var(--lx-ease)}
.lx-demo-etape{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:6px 0;opacity:.4;transition:opacity .4s ease;
  font-size:13px;line-height:1.4;color:#444;
}
.lx-demo-etape.est-faite,.lx-demo-etape.est-active{opacity:1}
.lx-demo-pastille{
  position:relative;z-index:1;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:#fff;border:1px solid var(--lx-line);
  display:grid;place-items:center;color:#9AA0B0;
  transition:border-color .4s,color .4s,background .4s;
}
.lx-demo-pastille svg{width:13px;height:13px}
.est-active .lx-demo-pastille{border-color:var(--lx-gold);color:var(--lx-gold)}
.est-faite .lx-demo-pastille{border-color:var(--lx-gold);background:var(--lx-gold);color:#fff}
.lx-demo-etape em{font-style:normal;margin-left:auto;font-size:11px;color:#9AA0B0;white-space:nowrap}

.lx-demo-note{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:#8A8F9C;text-align:center}

@media (max-width:620px){
  .lx-demo{padding:30px 6px 4px}
  .lx-demo-orbe{width:36px;height:36px}
  .lx-demo-orbe:nth-of-type(2),.lx-demo-orbe:nth-of-type(4){display:none}
}

/* ── Le masque à coin coupé ─────────────────────────────────
   Repris d'OPTIGEN. Un coin retiré en haut à droite : c'est un
   marqueur d'identité qui ne coûte rien et qu'on reconnaît d'une
   page à l'autre.                                             */
.lx-masque{
  clip-path:polygon(0 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%);
}
@media (max-width:760px){
  .lx-masque{clip-path:polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%)}
}

@media (prefers-reduced-motion: reduce){
  .lx-demo-orbe{opacity:1 !important;transform:none !important;animation:none !important}
  .lx-demo-etiq i{opacity:1;transform:none}
  .lx-demo-etape{opacity:1}
  .lx-demo-curseur{animation:none;opacity:0}
  .lx-demo-rail i{height:100% !important;transition:none}
}

/* ============================================================
   DÉMOS VIVANTES, AFFINAGE ET SECONDE CARTE, 12/09/2026
   ============================================================ */

/* ── Affinage de la première carte ──────────────────────────*/
.lx-demo{padding:40px 26px 10px}
.lx-demo-carte{padding:22px 24px 20px;border-radius:18px}
.lx-demo-av{
  width:38px;height:38px;font-size:12.5px;font-weight:600;
  letter-spacing:.03em;line-height:1;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--lx-line);
}
.lx-demo-tete{gap:13px;padding-bottom:15px}
.lx-demo-tete b{font-size:14.5px;letter-spacing:-.01em}
.lx-demo-etiq{margin-top:15px;gap:7px}
.lx-demo-etiq i{padding:5px 11px;font-size:11.5px;letter-spacing:.01em}
.lx-demo-prompt{margin-top:16px;padding:13px 15px;font-size:13.5px;line-height:1.55;border-radius:10px}
.lx-demo-etape{padding:7px 0;font-size:13.5px}
.lx-demo-rail{left:14px}
.lx-demo-pastille{width:30px;height:30px}

/* Les orbes s'écartent un peu plus de la carte et se posent en
   diagonale plutôt qu'au hasard : quatre objets flottants alignés
   sur une même oblique se lisent comme un système, dispersés ils
   se lisent comme du décor. */
.lx-demo-orbe:nth-of-type(1){left:-14px;top:12%}
.lx-demo-orbe:nth-of-type(2){right:-16px;top:3%}
.lx-demo-orbe:nth-of-type(3){right:-18px;top:48%}
.lx-demo-orbe:nth-of-type(4){left:-18px;bottom:12%}

/* ── Le résultat qui apparaît ───────────────────────────────
   Le geste manquant : la carte montrait le traitement mais
   jamais ce qui en sort. Un extrait du courrier rédigé se
   déplie à la fin, et c'est lui qui vend la formation.        */
.lx-demo-sortie{
  display:grid;grid-template-rows:0fr;
  margin-top:0;
  transition:grid-template-rows .7s var(--lx-ease),margin-top .7s var(--lx-ease);
}
.lx-demo-sortie > div{overflow:hidden}
.lx-demo-on-sortie .lx-demo-sortie{grid-template-rows:1fr;margin-top:15px}
.lx-demo-mail{
  border:1px solid var(--lx-line);border-radius:10px;
  background:#FCFBF8;padding:13px 15px;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .18s,transform .55s var(--lx-ease) .18s;
}
.lx-demo-on-sortie .lx-demo-mail{opacity:1;transform:none}
.lx-demo-mail b{
  display:block;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lx-gold);margin-bottom:7px;
}
.lx-demo-mail p{margin:0;font-size:13px;line-height:1.6;color:#444}
.lx-demo-mail p + p{margin-top:7px}
.lx-demo-mail em{font-style:normal;color:#9AA0B0}

/* ── Seconde carte : le devis qui se compose ────────────────
   Elle remplace la liste « ce qui fait varier le devis », qui
   était quatre lignes à puces. Les quatre critères deviennent
   quatre réglages qui se posent l'un après l'autre, et le
   panneau conclut sur le délai de réponse. Aucun montant n'est
   affiché : le tarif est sur devis, l'inventer même en exemple
   serait un engagement qu'on ne tient pas.                    */
/* Le panneau qui accueille cette carte est clair sur bureau et
   sombre en dessous d'un certain point : deux jeux de règles
   coexistent dans le CSS des pages. Plutôt que de deviner, les
   teintes sont posées en variables et le script les calcule à
   partir du fond réellement rendu. */
.lx-devis{
  position:relative;padding:6px 0 0;
  --lx-devis-soft:rgba(27,44,107,.68);
  --lx-devis-line:rgba(27,44,107,.16);
  --lx-devis-ink:#1B2C6B;
  --lx-devis-chip:rgba(27,44,107,.05);
  --lx-devis-bord:rgba(27,44,107,.2);
  --lx-devis-faint:rgba(27,44,107,.55);
}
.lx-devis-ligne{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--lx-devis-line);
  opacity:0;transform:translateX(10px);
  transition:opacity .5s ease,transform .55s var(--lx-ease);
}
.lx-devis-on .lx-devis-ligne{opacity:1;transform:none}
.lx-devis-on .lx-devis-ligne:nth-child(2){transition-delay:.14s}
.lx-devis-on .lx-devis-ligne:nth-child(3){transition-delay:.28s}
.lx-devis-on .lx-devis-ligne:nth-child(4){transition-delay:.42s}
.lx-devis-ligne:last-of-type{border-bottom:none}
.lx-devis-cle{
  flex:1;min-width:0;
  font-size:13.5px;line-height:1.45;color:var(--lx-devis-soft);
}
.lx-devis-val{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:99px;
  background:var(--lx-devis-chip);
  border:1px solid var(--lx-devis-bord);
  font-size:13px;font-weight:600;color:var(--lx-devis-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.lx-devis-val svg{width:13px;height:13px;opacity:.8}
.lx-devis-pied{
  display:flex;align-items:center;gap:11px;
  margin-top:20px;padding-top:18px;
  border-top:1px solid var(--lx-devis-line);
  opacity:0;transform:translateY(8px);
  transition:opacity .55s ease .58s,transform .6s var(--lx-ease) .58s;
}
.lx-devis-on .lx-devis-pied{opacity:1;transform:none}
/* Seule la pastille est de taille fixe. Sans « flex:1 » sur le
   bloc de texte qui suit, celui-ci se comprimait en colonne
   étroite et venait buter sur le badge « Sur devis ». */
.lx-devis-pied{margin-bottom:8px}
.lx-devis-pied > span:first-child{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--lx-gold);color:#fff;display:grid;place-items:center;
}
.lx-devis-pied > span:last-child{flex:1;min-width:0}
.lx-devis-pied span svg{width:16px;height:16px}
.lx-devis-pied b{display:block;font-size:14px;font-weight:600;color:var(--lx-devis-ink);line-height:1.35}
.lx-devis-pied em{display:block;font-style:normal;font-size:12.5px;color:var(--lx-devis-faint);line-height:1.45}

@media (max-width:620px){
  .lx-demo{padding:34px 8px 6px}
  .lx-devis-ligne{flex-wrap:wrap;gap:8px}
  .lx-devis-cle{flex:1 1 100%}
}

@media (prefers-reduced-motion: reduce){
  .lx-demo-sortie{grid-template-rows:1fr;margin-top:15px}
  .lx-demo-mail{opacity:1;transform:none}
  .lx-devis-ligne,.lx-devis-pied{opacity:1;transform:none;transition:none}
}

/* ============================================================
   PLUS DE MOUVEMENT, EN PLUS PETIT, 12/09/2026
   ============================================================ */

/* ── La phrase géante ramenée à sa place ────────────────────
   À plus de cent pixels elle mangeait l'écran entier et devenait
   le sujet de la page. Divisée par deux, elle redevient ce
   qu'elle doit être : une respiration entre deux sections.    */
.lx-reel{padding:clamp(20px,2.6vw,34px) 0}
.lx-reel-item{
  padding:0 clamp(14px,1.8vw,30px);
  font-size:clamp(21px,2.9vw,42px);
  letter-spacing:-.022em;
}
.lx-reel-sep{width:.28em;height:.28em;margin:0 .06em .18em}

/* ── Ligne de pastilles qui défile ──────────────────────────
   Reprise du lexique d'OPTIGEN. Les huit modules passent en
   continu sous le parcours : petit, lisible, et ça donne une
   idée du contenu sans ajouter un bloc de plus.               */
.lx-puces{
  position:relative;overflow:hidden;
  margin-top:clamp(26px,3vw,40px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.lx-puces-piste{
  display:flex;width:max-content;gap:10px;
  animation:lx-puces var(--lx-puces-duration,46s) linear infinite;
  will-change:transform;
}
.lx-puces:hover .lx-puces-piste{animation-play-state:paused}
.lx-puces-jeu{display:flex;gap:10px;flex:none}
.lx-puces span{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:99px;
  border:1px solid var(--lx-line);background:#fff;
  font-size:13px;font-weight:500;color:var(--lx-navy);
  white-space:nowrap;
  transition:border-color .25s ease,color .25s ease;
}
.lx-puces span:hover{border-color:var(--lx-gold)}
.lx-puces span i{
  font-style:normal;font-size:11px;font-weight:600;
  color:var(--lx-gold);font-variant-numeric:tabular-nums;
}
@keyframes lx-puces{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── Le filet qui se creuse ─────────────────────────────────
   Repris de Cuberto. Une hairline entre deux sections qui se
   déforme légèrement sous le curseur. C'est le plus petit
   mouvement du site et probablement le plus satisfaisant :
   il répond au geste sans rien demander.                     */
.lx-filet{position:relative;height:1px;margin:0}
.lx-filet svg{
  position:absolute;top:-40px;left:0;width:100%;height:80px;
  pointer-events:none;overflow:visible;
}
.lx-filet path{
  fill:none;stroke:var(--lx-line);stroke-width:1;
  transition:stroke .3s ease;
}
.lx-filet:hover path{stroke:var(--lx-gold)}
.lx-filet::before{
  content:'';position:absolute;top:-14px;left:0;right:0;height:28px;
}

/* ── Réponses de la FAQ ─────────────────────────────────────
   Le dépliage passait par une hauteur fixe en pixels, ce qui
   tronquait les réponses longues. Une grille à 0fr vers 1fr
   s'adapte au contenu sans qu'on ait à le mesurer.            */
.lx-faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--lx-ease);
}
.lx-faq-a > div{overflow:hidden;min-height:0}
.lx-faq-ouvert .lx-faq-a{grid-template-rows:1fr}

@media (prefers-reduced-motion: reduce){
  .lx-puces-piste{animation:none}
  .lx-filet svg{display:none}
  .lx-faq-a{transition:none}
}

/* ============================================================
   LA PILE, 12/09/2026
   ------------------------------------------------------------
   Reprise du « cb-feature » de Cuberto. Les grilles de quatre
   boîtes égales deviennent une pile de bandes pleine largeur
   dont une seule est ouverte. Trois choses changent d'un coup :
   la page cesse d'aligner des colonnes, la hauteur varie d'une
   bande à l'autre, et le regard a un seul point d'entrée au
   lieu de quatre équivalents. C'est ce qui distingue une mise
   en page d'un tableau.
   ============================================================ */

.lx-pile{display:grid;gap:10px;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;list-style:none}
.lx-pile-item{
  position:relative;
  padding:clamp(22px,2.6vw,34px) clamp(22px,3vw,44px);
  cursor:pointer;color:var(--lx-navy);
  border-radius:16px;overflow:hidden;
  transition:color .45s ease;
}
.lx-pile-fond{
  position:absolute;inset:0;z-index:0;
  background:#EDF0F6;border-radius:16px;
  transition:background .45s ease;
}
.lx-pile-item.est-ouvert{color:#fff}
.lx-pile-item.est-ouvert .lx-pile-fond{background:var(--lx-navy)}

.lx-pile-tete{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  flex-direction:row-reverse;gap:20px;
}
.lx-pile-num{
  flex:none;font-size:clamp(15px,1.5vw,19px);font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  opacity:.28;transition:opacity .45s ease,color .45s ease;
}
.lx-pile-item.est-ouvert .lx-pile-num{opacity:1;color:var(--lx-gold)}
.lx-pile-titre{
  min-width:0;margin:0;
  font-size:clamp(19px,2.3vw,30px);font-weight:400;
  line-height:1.18;letter-spacing:-.015em;color:inherit;
}

.lx-pile-corps{
  position:relative;z-index:1;
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--lx-ease);
}
.lx-pile-corps > div{overflow:hidden;min-height:0}
.lx-pile-item.est-ouvert .lx-pile-corps{grid-template-rows:1fr}
.lx-pile-corps p{
  margin:0;padding-top:16px;max-width:62ch;
  font-size:15.5px;line-height:1.65;
  color:rgba(255,255,255,.78);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease .1s,transform .5s var(--lx-ease) .1s;
}
.lx-pile-item.est-ouvert .lx-pile-corps p{opacity:1;transform:none}

@media (pointer:fine){
  .lx-pile-item:not(.est-ouvert):hover .lx-pile-fond{background:#E4E8F1}
  .lx-pile-item:not(.est-ouvert):hover .lx-pile-num{opacity:.55}
}
.lx-pile-item:focus-visible{outline:2px solid var(--lx-gold);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .lx-pile-corps{grid-template-rows:1fr}
  .lx-pile-corps p{opacity:1;transform:none;color:rgba(255,255,255,.78)}
  .lx-pile-item{color:#fff}
  .lx-pile-fond{background:var(--lx-navy)}
}

/* ============================================================
   DEUX CORRECTIONS, 12/09/2026
   ============================================================ */

/* ── Alignement des deux colonnes ───────────────────────────
   « .video-inner » centre verticalement ses deux colonnes. Tant
   que la carte de droite était courte, ça passait. Depuis
   qu'elle contient la démo animée, elle est bien plus haute que
   le texte de gauche, qui se retrouve à flotter au milieu du
   vide. Les deux colonnes partent maintenant du haut, et la
   carte reçoit une largeur plus généreuse puisqu'elle porte
   désormais l'essentiel du propos.                            */
.video-inner{align-items:flex-start !important}
.video-text{padding-top:2px}
@media (min-width:981px){
  .deliverable-card{flex:0 0 clamp(470px,38vw,540px) !important}
}

/* ── Douceur de la pile ─────────────────────────────────────
   Les trois propriétés animées partagent la même durée et la
   même courbe. Quand elles divergeaient, le fond finissait
   avant le dépliage et la bande semblait tressauter.          */
.lx-pile-item,
.lx-pile-fond,
.lx-pile-num,
.lx-pile-corps{
  transition-duration:.52s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
}
.lx-pile-corps p{transition-duration:.42s;transition-delay:.08s}
/* La hauteur ne doit pas changer d'un cheveu pendant le
   basculement, sinon tout ce qui suit dans la page tremble. */
.lx-pile{contain:layout}

/* ============================================================
   REPRISE DU 12/09/2026, SOIR
   ============================================================ */

/* ── 1. La photo prenait la place de l'information ──────────
   En 21/9 pleine largeur juste après le parcours, elle occupait
   un écran entier sans rien apprendre. On arrivait sur le site
   et on voyait défiler des photos avant de lire quoi que ce
   soit. Elle devient une bande basse, et sa légende dit
   maintenant quelque chose d'utile plutôt que d'habiller.     */
.lx-photo--large{aspect-ratio:3/1}
@media (max-width:760px){.lx-photo--large{aspect-ratio:2/1}}

/* ── Le cadrage, photo par photo ────────────────────────────
   En 32/9 il ne restait que 42 % de la hauteur d'une image en
   3/2, prise au centre par défaut : les deux hommes du bureau
   étaient coupés au front. Le format s'ouvre à 3/1, et surtout
   chaque photo reçoit le point sur lequel elle doit se caler,
   puisque leur sujet n'est pas à la même hauteur.

   Bureau : les visages sont dans le premier quart, on remonte.
   Table de travail : le sujet est la main qui écrit, aux deux
   tiers, on descend. Tablette : le sujet est en haut à gauche
   et le bas de l'image ne montre qu'une chaussure, donc format
   plus large et calage haut.                                  */
.lx-photo img[src*="photo-echange-cabinet"]{object-position:50% 5% !important}
.lx-photo img[src*="photo-session-travail"]{object-position:50% 62% !important}
.lx-photo img[src*="photo-formation-salle"]{object-position:50% 40% !important}
.lx-photo img[src*="photo-participants-notes"]{object-position:52% 46% !important}
.lx-photo--moyenne{aspect-ratio:16/9}
.lx-photo img[src*="photo-devis-echange"]{object-position:50% 12% !important}

/* ── Les visuels des pages d'offre ──────────────────────────
   Le cadre y est vertical, six cent cinquante pixels de haut
   sur une demi page de large : une photo en 3/2 y est donc
   rognée sur les côtés, et c'est la position horizontale qui
   compte. Chaque page cale la sienne sur son sujet.          */
.visual-cover[src*="photo-audit-documents"]{object-position:42% 50%}
.visual-cover[src*="photo-prise-en-main"]{object-position:34% 50%}
.visual-cover[src*="photo-veille-lecture"]{object-position:50% 42%}
.visual-cover[src*="photo-prospection-donnees"]{object-position:50% 44%}
.visual-cover[src*="photo-code-ecran"]{object-position:56% 50%}
.lx-photo figcaption{
  padding:8px 14px;font-size:10.5px;letter-spacing:.16em;
  background:rgba(27,44,107,.92);
}

/* ── 2. Les chiffres clés sans leurs cadres ─────────────────
   Les traits verticaux entre les chiffres, plus le rail doré
   que j'avais ajouté à gauche de chacun, faisaient trois
   séparateurs pour trois nombres. On retire tout : un chiffre
   large et sa légende suffisent à se distinguer.              */
.vstat .lx-seg{display:none}
.video-stats{gap:clamp(28px,3.4vw,52px) !important}
.video-stats .vstat{border:none !important;padding-left:0 !important}
.video-stats .vstat + .vstat{border-left:none !important}
.vstat strong{
  display:block;font-size:clamp(30px,3.2vw,44px);font-weight:400 !important;
  line-height:1;letter-spacing:-.03em;color:var(--lx-navy);margin-bottom:7px;
}
.vstat > span{
  display:block;font-size:12.5px;line-height:1.4;color:#7A7F8E;
  max-width:11ch;
}

/* ── 3. Le bouton devient une pastille ──────────────────────
   Le carré accolé au libellé, même rendu à sa couleur, restait
   deux morceaux mis bout à bout. Cuberto n'a qu'une forme : une
   pastille arrondie, un libellé centré, une flèche à l'intérieur.
   Le voile de remplissage y trouve enfin sa place, puisqu'il
   épouse le contour au lieu de s'arrêter à un angle droit.    */
.btn-duo{
  min-height:auto !important;
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px !important;
  border-radius:999px !important;
  background:var(--lx-red);color:#fff;
  overflow:hidden;
}
.btn-duo .btn-plus{
  order:2;width:auto !important;border:none !important;background:none !important;
  font-size:0;display:flex;align-items:center;position:relative;z-index:2;
}
.btn-duo .btn-plus::after{
  content:'';display:block;width:8px;height:8px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .25s var(--lx-ease);
}
.btn-duo:hover .btn-plus::after{transform:rotate(45deg) translate(2px,-2px)}
.btn-duo .btn-label{
  order:1;padding:0 !important;background:none !important;
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
}
.btn-duo .lx-ripple-fill{border-radius:999px}

/* ── 4. Le bandeau de fin, plus petit et plus tenu ──────────
   En grandes capitales bâtons il criait. En petit, espacé,
   dans une graisse moyenne et une teinte adoucie, il devient
   une frise discrète qui sépare deux sections au lieu d'en
   réclamer une pour lui seul.                                 */
.lx-reel{padding:clamp(15px,1.7vw,24px) 0}
.lx-reel-item{
  padding:0 clamp(13px,1.5vw,24px);
  font-size:clamp(12px,1.05vw,15px);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#8A90A2;
}
.lx-reel-item em{
  font-family:var(--lx-sans);font-style:normal;font-weight:600;
  color:var(--lx-navy);letter-spacing:.2em;
}
.lx-reel-sep{
  width:4px;height:4px;margin:0 0 .12em .9em;
  background:var(--lx-gold);opacity:.7;
}

/* ── 5. La carte de démo sans l'avatar ──────────────────────
   Les initiales dans un rond n'apportaient rien : le nom est
   juste à côté. Elles ajoutaient surtout une pastille de plus
   dans une carte qui en compte déjà beaucoup.                 */
.lx-demo-av{display:none}
.lx-demo-tete{gap:0}

/* ============================================================
   LE HERO, 12/09/2026
   ------------------------------------------------------------
   Le fond bleu nuit avec ses barres lumineuses et sa flèche
   orange était le visuel « croissance corporate » le plus
   répandu du web, et visiblement généré : les volumes n'ont pas
   de géométrie cohérente et les reflets ne suivent aucune source
   de lumière. Pour un organisme qui apprend aux courtiers à user
   de l'IA honnêtement, ouvrir là-dessus était une contradiction.

   À sa place : du clair, une grande typographie légère, et à
   droite un contrat qu'on dépouille. C'est le geste que fait un
   courtier tous les jours, et aucun générateur ne l'invente.
   ============================================================ */

.lx-hero-clair .hero-bg,
.lx-hero-clair .hero-ov{display:none !important}
.lx-hero-clair{
  background:linear-gradient(180deg,#FCFBF8 0%,var(--lx-paper,#F2F4F8) 100%) !important;
  min-height:auto !important;
}
.lx-hero-clair .hero-inner{
  display:grid !important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(36px,4.4vw,72px);
  align-items:center;
  padding-top:clamp(56px,6vw,92px) !important;
  padding-bottom:clamp(56px,6vw,92px) !important;
}
.lx-hero-clair .hero-content{max-width:none}
.lx-hero-clair .hero-title{color:var(--lx-navy) !important;text-shadow:none !important;margin-bottom:24px !important}

/* ── Le surtitre ────────────────────────────────────────────
   Il était en rouge, c'est à dire dans la couleur des boutons.
   Deux rouges dans le même écran, et l'appel à l'action n'est
   plus le seul point qui attire l'œil. Le surtitre passe donc
   au gris bleuté et ne garde de couleur que ses séparateurs,
   dorés comme le filet sous le titre.                        */
.lx-hero-clair .hero-label{
  color:#79839A !important;
  font-size:12.5px !important;
  letter-spacing:.15em !important;
  margin-bottom:20px !important;
  line-height:1.7 !important;
}
.lx-hero-clair .hero-label i{
  font-style:normal;color:var(--lx-gold);
  margin:0 .62em;opacity:.9;
}
.lx-hero-clair .hero-label span,
.lx-hero-clair .hero-label i{
  display:inline-block;
  opacity:0;transform:translateY(7px);
  transition:opacity .5s ease,transform .6s var(--lx-ease);
}
.lx-hero-clair .hero-label.lx-label-on span{
  opacity:1;transform:none;
  transition-delay:calc(var(--i) * 90ms);
}
.lx-hero-clair .hero-label.lx-label-on i{opacity:.9;transform:none;transition-delay:.1s}

.lx-hero-clair .hero-bar{
  background:linear-gradient(90deg,var(--lx-gold),rgba(232,146,26,0)) !important;
  width:64px !important;height:2px !important;margin-bottom:26px !important;
}
.lx-hero-clair .hero-sub{
  color:#4A5163 !important;
  font-size:17px !important;line-height:1.64 !important;
  max-width:47ch;margin-bottom:0 !important;
}

/* ── Les trois promesses ────────────────────────────────────
   Un filet les détache de l'accroche : sans lui, six lignes de
   gris se suivent sans qu'on sache où l'une finit. La flèche
   passe en doré et s'affine, elle accompagne au lieu de
   pointer.                                                   */
.lx-hero-clair .hero-list{
  margin:30px 0 34px !important;padding-top:26px !important;
  border-top:1px solid rgba(27,44,107,.11) !important;
  gap:14px !important;
}
.lx-hero-clair .hero-list li{
  color:#4A5163 !important;
  font-size:15px !important;line-height:1.5 !important;
  gap:13px !important;
}
.lx-hero-clair .hero-list li svg{
  stroke:var(--lx-gold);stroke-width:1.45;
  width:15px;height:15px;margin-top:4px;
}

/* ── Les deux appels ────────────────────────────────────────
   Le bouton était un dégradé à angles vifs sous une ombre
   noire, dessiné pour se détacher d'un fond sombre. Sur du
   clair, cette ombre salit. Aplat de rouge, pastille, et une
   ombre de la couleur du bouton : elle le pose sans le tacher. */
.lx-hero-clair .hero-btn-primary{
  background:var(--lx-red) !important;
  border-radius:999px !important;
  padding:15px 30px !important;
  font-size:13.5px !important;letter-spacing:.005em !important;
  box-shadow:0 15px 30px -16px rgba(192,57,43,.6) !important;
  transition:background .22s ease,box-shadow .28s ease,transform .22s var(--lx-ease) !important;
}
.lx-hero-clair .hero-btn-primary:hover{
  background:#A93226 !important;filter:none !important;
  transform:translateY(-2px);
  box-shadow:0 20px 38px -16px rgba(192,57,43,.68) !important;
}
/* L'ombre reprise ici remplace celle de .lx-press, dont le
   relief de quatre pixels appartenait au bouton à angles vifs.
   L'appui doit rester perceptible : la pastille redescend et son
   ombre se resserre sous elle.                                 */
.lx-hero-clair .hero-btn-primary:active{
  transform:translateY(1px);
  box-shadow:0 7px 16px -12px rgba(192,57,43,.7) !important;
}
.lx-hero-clair .hero-btn-link,
.lx-hero-clair .hero-btn-link *{color:var(--lx-navy) !important}
.lx-hero-clair .hero-btn-link{font-size:13.5px !important}
.lx-hero-clair .hero-cta{gap:22px !important}
.lx-hero-clair .hero-scroll{display:none !important}
@media (max-width:900px){
  .lx-hero-clair .hero-inner{grid-template-columns:1fr}
}
/* ── La constellation d'outils ──────────────────────────────
   À droite du titre, les outils que la formation prend en main,
   posés sur des pastilles blanches qui dérivent lentement et
   s'écartent du curseur quand il passe près d'elles.

   Trois principes tenus :

   Le mouvement est lent. Chaque pastille suit une sinusoïde de
   six à neuf secondes sur une amplitude de quelques pixels. On
   le remarque à peine, et c'est le but : une page qui respire,
   pas une page qui s'agite.

   Il y a de la profondeur. Les quatre modèles de langage sont
   au premier plan, en grand et pleinement opaques. Les deux
   outils de cabinet sont derrière, plus petits et plus pâles,
   et ils réagissent moins fort au curseur. Sans cet écart,
   l'ensemble ressemble à des autocollants posés à plat.

   Les noms sont toujours écrits. Un logo seul se devine, un
   logo nommé s'identifie. C'est aussi ce qui rend la scène
   lisible sans souris et au lecteur d'écran.
   ============================================================ */

/* La scène et sa légende sont enveloppées ensemble : le
   hero-inner est une grille à deux colonnes, deux enfants de
   plus y créeraient une troisième cellule et renverraient la
   légende à la ligne suivante.                               */
.lx-scene-zone{position:relative;width:100%}
.lx-scene{
  position:relative;
  width:100%;
  aspect-ratio:1 / .88;
  touch-action:pan-y;
}
/* Le halo donne un centre à la composition. Sans lui, les
   pastilles flottent sans raison sur un fond vide.           */
.lx-scene::before{
  content:'';position:absolute;inset:6% 4%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(27,44,107,.055),rgba(27,44,107,0) 68%);
  opacity:0;transition:opacity 1.1s ease .2s;
}
.lx-scene-on.lx-scene::before{opacity:1}

.lx-jeton{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--t);
  /* Les marges négatives valent la moitié de la largeur : le
     point (x, y) devient le centre de la pastille, ce qui rend
     le placement lisible et le calcul de répulsion juste.     */
  margin-left:calc(var(--t) / -2);
  margin-top:calc(var(--t) / -2);
  opacity:var(--p);
  transition:opacity .45s ease;
  will-change:transform;
}
/* Deux couches, et c'est volontaire : le JS écrit le transform
   de .lx-jeton pour la dérive, le CSS garde celui de la
   pastille pour l'entrée et le survol. Une seule couche et les
   deux écritures s'annuleraient l'une l'autre.               */
.lx-jeton-c{
  position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:1;
  border-radius:26%;
  background:#fff;
  border:1px solid rgba(20,30,60,.07);
  box-shadow:0 18px 34px -22px rgba(10,14,36,.4),0 2px 5px rgba(10,14,36,.05);
  opacity:0;transform:scale(.78) translateY(20px);
  transition:opacity .6s ease,transform .8s var(--lx-ease),box-shadow .45s ease;
  cursor:default;
}
.lx-scene-on .lx-jeton-c{
  opacity:1;transform:none;
  transition-delay:calc(var(--i) * 45ms);
}
/* La taille du logo dans sa pastille est réglée logo par logo,
   par --z, pour compenser leurs fonds : voir le commentaire de
   la correction optique dans motion.js.                       */
.lx-jeton img{
  width:var(--z,62%);height:var(--z,62%);
  object-fit:contain;border-radius:20%;
  user-select:none;-webkit-user-drag:none;
}
/* ── Les icônes pleines ────────────────────────────────────
   ChatGPT et Apollo ont un fond de couleur. Posés au milieu
   d'une pastille blanche, ils formaient un carré dans un carré,
   avec une marge blanche inégale sur les quatre côtés : c'est
   ce qui les faisait paraître mal cadrés. Leur icône a été
   reconstruite en plein fond, symbole recentré, et elle occupe
   maintenant toute la pastille, dont elle prend les coins
   arrondis. L'icône devient la pastille.

   Pas de bordure ni de fond blanc dessous : l'un comme l'autre
   laisserait un liseré clair le long des courbes.            */
.lx-jeton--plein .lx-jeton-c{overflow:hidden;border:0;background:transparent}
.lx-jeton--plein img{width:100%;height:100%;border-radius:0;object-fit:cover}
.lx-jeton-n{
  display:block;margin-top:10px;text-align:center;
  font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#98A0B2;white-space:nowrap;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s ease,transform .55s var(--lx-ease),color .3s ease;
}
/* Les noms attendent que les pastilles aient trouvé leur place :
   pendant l'ouverture elles tournent, et une étiquette qui
   tourne avec elles ne se lit pas.                            */
.lx-scene-posee .lx-jeton-n{
  opacity:1;transform:none;
  transition-delay:calc(var(--i) * 60ms);
}

/* ── Au survol ──────────────────────────────────────────────
   La pastille monte d'un cran, son ombre s'allonge, son nom
   passe au navy, et les autres reculent. C'est le geste de
   Cuberto : ce n'est pas l'élément touché qui change le plus,
   c'est le reste qui s'efface.                               */
.lx-jeton-c:hover,
.lx-jeton.est-actif .lx-jeton-c{
  transform:scale(1.07);
  box-shadow:0 30px 54px -24px rgba(10,14,36,.45),0 3px 8px rgba(10,14,36,.07);
  border-color:rgba(27,44,107,.16);
}
.lx-jeton.est-actif .lx-jeton-n{color:var(--lx-navy)}
.lx-scene.a-un-actif .lx-jeton:not(.est-actif){opacity:calc(var(--p) * .46)}

/* ── La légende parlante ────────────────────────────────────
   Au repos elle nomme la scène, au survol elle dit l'usage de
   l'outil. La hauteur est réservée d'avance : sans elle, une
   phrase plus courte que la précédente ferait sauter tout ce
   qui suit à chaque passage de souris.                       */
.lx-scene-legende{
  display:flex;align-items:center;justify-content:center;
  margin:16px auto 0;max-width:36ch;min-height:2.9em;
  text-align:center;font-size:12.5px;line-height:1.5;color:#8D95A6;
  opacity:0;transform:translateY(6px);
  transition:opacity .42s ease,transform .5s var(--lx-ease);
}
.lx-scene-posee ~ .lx-scene-legende{
  opacity:1;transform:none;
  transition-delay:.2s;
}
.lx-scene-posee ~ .lx-scene-legende.est-change{
  opacity:0;transform:translateY(4px);
  transition-delay:0s;transition-duration:.16s;
}

/* ── Sur téléphone ──────────────────────────────────────────
   Il n'y a pas de curseur à fuir : seule la dérive reste. La
   scène se réduit et se cale sous le texte, et les noms
   passent en 10 px pour ne pas se chevaucher quand deux
   pastilles voisines dérivent l'une vers l'autre.            */
@media (max-width:760px){
  .lx-hero-clair .hero-inner{
    padding-top:clamp(30px,6vw,52px) !important;
    padding-bottom:clamp(30px,6vw,52px) !important;
    gap:26px;
  }
  /* Sur 327 pixels de colonne, le surtitre passait à la ligne en
     abandonnant un point en fin de première ligne. Un cran de
     corps et un peu moins de chasse suffisent à le tenir sur une
     seule ligne, ce qui vaut mieux qu'une coupure arbitrée par
     le navigateur.                                             */
  .lx-hero-clair .hero-label{font-size:11px !important;letter-spacing:.12em !important}
  .lx-hero-clair .hero-label i{margin:0 .5em}
  .lx-hero-clair .hero-sub{font-size:16px !important}
  .lx-hero-clair .hero-list{margin:24px 0 28px !important;padding-top:22px !important}
  .lx-scene{aspect-ratio:1 / .88;max-width:380px;margin:0 auto}
  .lx-jeton-n{font-size:10px;margin-top:8px;letter-spacing:.06em}
  .lx-scene-legende{margin-top:12px;font-size:11.5px}
}

@media (prefers-reduced-motion: reduce){
  .lx-jeton-c{opacity:1;transform:none}
  .lx-jeton-n{opacity:1;transform:none}
  .lx-scene::before{opacity:1}
  .lx-scene-legende{opacity:1;transform:none}
}