/* =====================================================================
   v10, couche visuelle posée APRÈS la feuille d'origine, qui reste intacte.
   Retours de Youssef du 1er octobre: menu sombre d'origine, héros d'origine
   sur la vague, aucun chiffre en matrice de points, aucun « m » en contour.
   Rien ici n'ajoute ni ne retire un mot de la page.
   ===================================================================== */
:root{
  --rev:cubic-bezier(.22, 1, .36, 1);
  --ink:#05060b;
}
@property --ba{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- menu: la coque sombre d'origine, posée d'emblée ----------
   au-dessus de la vidéo, une coque transparente laissait les liens sur le ciel violet */
html.v9 .nav .shell{background:rgba(14,17,27,.76);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(243,244,246,.10);box-shadow:0 14px 44px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05)}

/* =====================================================================
   HÉROS: la mise en page d'origine, posée sur la vague
   ===================================================================== */
.hx{isolation:isolate}
.hx>.wrap{position:relative;z-index:1}
.hx>.glow{display:none}
.hx>.dust{z-index:1;opacity:.8}
.hx-bg{position:absolute;left:0;right:0;top:0;height:min(100%, max(100vh, 780px));z-index:0;overflow:hidden;pointer-events:none;background:var(--ink)}
.hx-vid{position:absolute;left:-3%;top:-3%;width:106%;height:106%;object-fit:cover;object-position:50% 30%;will-change:transform}
/* voile: sombre derrière le titre à gauche et sous le menu, la vague reste libre à droite */
.hx-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(7,7,14,.86) 0%, rgba(7,7,14,.74) 30%, rgba(7,7,14,.34) 52%, rgba(7,7,14,.08) 72%, rgba(7,7,14,0) 86%),
  linear-gradient(180deg, rgba(7,7,14,.62) 0%, rgba(7,7,14,0) 22%)}
.hx-fade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg, rgba(12,15,24,0), var(--bg) 92%)}

@keyframes mrun{0%{stroke-dashoffset:.08;opacity:0}6%{opacity:1}80%{opacity:1}100%{stroke-dashoffset:-.92;opacity:0}}
@keyframes orb{50%{transform:translateY(-6px)}}
@keyframes breathe{50%{opacity:.22;transform:scale(1.08)}}

/* le titre: la deuxième ligne luit doucement */
.hx h1{text-shadow:0 2px 30px rgba(5,6,12,.55);text-wrap:balance}
.hx h1 b{background:linear-gradient(100deg, #d77ee9 0%, #f6dcff 18%, #d77ee9 36%, #c23fd6 70%, #d77ee9 100%) 0 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;animation:lueur 9s var(--rev) infinite}
.hx h1 b .pt{color:#e48cf7;-webkit-text-fill-color:#e48cf7}
.hx .lead{color:#d3d6df}
.hx .promise{color:#d8dbe4}
.hx .lead .cle{color:#fff;font-weight:500;padding:0 .08em;margin:0 -.08em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(180deg, transparent 58%, rgba(194,63,214,.5) 58%, rgba(155,21,176,.42) 94%, transparent 94%) no-repeat 0 0/0% 100%;
  transition:background-size 1.1s var(--rev), color .6s var(--rev)}
.hx.ready .lead .cle,html:not(.v9) .hx .lead .cle{background-size:100% 100%}
.hx.ready .lead .cle:nth-of-type(1){transition-delay:1.5s}
.hx.ready .lead .cle:nth-of-type(2){transition-delay:2.1s}
.hx.ready .lead + .lead .cle{transition-delay:2.7s}
.hx .lead + .lead{font-size:.92em;color:#b9bdca}
.hx .eyebrow{color:#a4a8b6}

/* entrée au chargement: chaque bloc monte, net, l'un après l'autre */
html.v9 .hx .grid>div:first-child>*{transition-property:opacity, transform, filter;transition-duration:.9s;transition-timing-function:var(--rev)}
html.v9 .hx:not(.ready) .grid>div:first-child>*{opacity:0;transform:translateY(20px);filter:blur(6px)}
html.v9 .hx .grid>div:first-child>:nth-child(2){transition-delay:.08s}
html.v9 .hx .grid>div:first-child>:nth-child(3){transition-delay:.18s}
html.v9 .hx .grid>div:first-child>:nth-child(4){transition-delay:.26s}
html.v9 .hx .grid>div:first-child>:nth-child(5){transition-delay:.36s}
html.v9 .hx .grid>div:first-child>:nth-child(6){transition-delay:.44s}
html.v9 .hx:not(.ready) .schema{opacity:0;transform:scale(.97)}
html.v9 .hx .schema{transition:opacity 1.2s var(--rev) .3s, transform 1.4s var(--rev) .3s}

/* =====================================================================
   BOUTONS: pastille blanche lumineuse (appel principal), verre sombre (secondaire)
   Le menu et la barre collante du mobile gardent le violet d'origine.
   ===================================================================== */
.hx .cta:not(.ghost),section .cta:not(.ghost),footer .cta:not(.ghost),.dlg .cta:not(.ghost),.stick .cta{
  background:#fdfdfd;color:#0c0f18;border:1px solid rgba(255,255,255,.95);border-radius:999px;padding:14px 24px;font-weight:700;
  box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 0 24px rgba(255,255,255,.26), 0 0 60px rgba(194,63,214,.45)}
.hx .cta:not(.ghost):hover,section .cta:not(.ghost):hover,footer .cta:not(.ghost):hover,.dlg .cta:not(.ghost):hover,.stick .cta:hover{
  border-color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5), 0 0 34px rgba(255,255,255,.42), 0 0 90px rgba(194,63,214,.7)}
.hx .cta:not(.ghost)::before,section .cta:not(.ghost)::before,footer .cta:not(.ghost)::before,.dlg .cta:not(.ghost)::before,.stick .cta::before{
  background:linear-gradient(135deg, rgba(194,63,214,.16), rgba(194,63,214,0) 60%)}
.hx .cta.ghost,section .cta.ghost,footer .cta.ghost,.dlg .cta.ghost{border-radius:999px;padding:14px 22px;background:rgba(14,12,24,.5);
  border-color:rgba(255,255,255,.22);color:#f3f4f6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hx .cta.ghost:hover,section .cta.ghost:hover,footer .cta.ghost:hover,.dlg .cta.ghost:hover{background:rgba(28,22,44,.62);border-color:rgba(255,255,255,.5)}
.starter .foot .cta.ghost{padding:11px 16px}
.hx .cta:not(.ghost),section .cta:not(.ghost),footer .cta:not(.ghost),.dlg .cta:not(.ghost),.stick .cta{overflow:visible}
.hx .cta:not(.ghost)::before,section .cta:not(.ghost)::before,footer .cta:not(.ghost)::before,.dlg .cta:not(.ghost)::before,.stick .cta::before{border-radius:inherit}
.cta>.beam{inset:-1px;padding:2px;margin:0;max-width:none}
/* rayon sur le bord: un PETIT disque conique (64 px) qui tourne sous un masque en anneau, agrandi par la carte
   graphique (--bk, posé par v9.js selon la taille de l'hôte). Un dégradé conique est lisse, l'agrandir ne se voit pas.
   ⛔ Ne jamais donner au disque la taille de l'hôte: à 3x sur un téléphone, vingt disques de 500 à 940 px
   faisaient environ 180 Mo de textures (2 oct., le téléphone de Youssef chauffait en quelques secondes). */
.beam{position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.beam::before{content:'';position:absolute;left:50%;top:50%;width:64px;height:64px;translate:-50% -50%;scale:var(--bk, 8);
  background:conic-gradient(transparent 0 64%, rgba(194,63,214,.9) 78%, #fff 84%, rgba(122,60,255,.8) 88%, transparent 94%);
  animation:rayon var(--bd, 3.4s) linear infinite}
.cta>.beam{transition:opacity .5s var(--rev)}
@keyframes rayon{to{rotate:360deg}}
@keyframes beam{to{--ba:360deg}}
.hx .acts .cta:not(.ghost){animation:appel 2.6s 1.8s var(--rev) 1}
@keyframes appel{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6), 0 0 24px rgba(255,255,255,.26), 0 0 60px rgba(194,63,214,.45)}
  100%{box-shadow:0 0 0 18px rgba(255,255,255,0), 0 0 24px rgba(255,255,255,.26), 0 0 60px rgba(194,63,214,.45)}}
.choice:active,.cta:active,.temo .arrow:active{scale:.96;transition-duration:.12s}

/* étincelles au clic */
.spark{position:fixed;width:2px;height:9px;margin:-4.5px 0 0 -1px;border-radius:2px;background:#e48cf7;
  box-shadow:0 0 6px rgba(228,140,247,.9);pointer-events:none;z-index:999;animation:spark .5s var(--rev) forwards}
@keyframes spark{to{translate:var(--sx) var(--sy);opacity:0;scale:.4}}

/* =====================================================================
   SCHÉMA: réseau vivant
   ===================================================================== */
.schema .board::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--rev);
  background:radial-gradient(240px circle at var(--px, 50%) var(--py, 54%), rgba(214,120,236,.2), rgba(214,120,236,0) 62%);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%, #000 45%, transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%, #000 45%, transparent 100%)}
.schema:hover .board::after{opacity:1}
/* aurore qui tourne derrière le coeur, et bat avec lui */
.schema .aura{position:absolute;left:50%;top:54%;width:64%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;z-index:0;
  background:conic-gradient(from 0deg, rgba(155,21,176,0), rgba(194,63,214,.55), rgba(122,60,255,.35), rgba(240,166,200,.4), rgba(155,21,176,0) 70%, rgba(155,21,176,0));
  filter:blur(38px);opacity:.42;animation:tourne 14s linear infinite;mix-blend-mode:screen;transition:opacity .5s var(--rev), scale .6s var(--rev)}
.schema:has(.core.beat) .aura{opacity:.75;scale:1.08}
@keyframes tourne{to{rotate:360deg}}
.schema .rings i{animation-duration:42s}
.schema .rings i+i{animation-duration:64s}
.schema .rings i::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:#f6dcff;box-shadow:0 0 10px 2px rgba(194,63,214,.9), 0 0 22px 6px rgba(194,63,214,.35)}
.schema .rings i+i::after{top:auto;bottom:-3px;width:4px;height:4px;margin-left:-2px;background:#e48cf7}
/* courant permanent dans les fils, qui s'emballe quand un système émet */
.schema svg.wires path.flux{stroke:#f6dcff;stroke-width:1.3;stroke-dasharray:2 14;stroke-dashoffset:0;opacity:0;
  transition:opacity .7s var(--rev), stroke-width .3s var(--rev);animation:flux 1.4s linear infinite}
.schema.live svg.wires path.flux{opacity:.38}
.schema.live svg.wires path.flux.hot{opacity:1;stroke-width:2.2;animation-duration:.45s}
.schema.live svg.wires path.flux.out{opacity:.95;stroke-width:2;animation:fluxout .5s linear infinite}
@keyframes flux{to{stroke-dashoffset:-16}}
@keyframes fluxout{to{stroke-dashoffset:16}}
.schema .pk{width:8px;height:8px;margin:-4px 0 0 -4px;
  box-shadow:0 0 0 2px rgba(241,200,248,.4), 0 0 14px 4px rgba(241,200,248,.95), 0 0 34px 10px rgba(194,63,214,.75)}
/* onde de choc à chaque battement du coeur */
.node.core::before{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(241,200,248,.85);opacity:0;pointer-events:none}
.node.core.beat::before{animation:choc 1.2s var(--rev)}
@keyframes choc{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}
/* noeuds en verre, rayon sur le bord de celui qui émet */
/* sans backdrop-filter: les noeuds flottent (float) au-dessus de fils animés, le flou se recalculait
   à chaque image sur la carte graphique. Fond presque opaque, même rendu à l'oeil. */
.node:not(.core){background:linear-gradient(160deg, rgba(36,26,54,.95), rgba(15,17,25,.95) 70%)}
.node .beam{padding:1.2px;opacity:0;transition:opacity .4s var(--rev);--bd:1.6s}
.schema.live .node.tx .beam{opacity:1}
/* un rayon invisible ne tourne pas */
.node .beam::before{animation-play-state:paused}
.schema.live .node.tx .beam::before{animation-play-state:running}
/* le bouton collant caché (haut de page, formulaire à l'écran) gardait son rayon en marche: 8 points de charge pour rien */
.stick:not(.show) .beam::before{animation-play-state:paused}

/* chiffres de confiance: un trait de lumière court sur la bordure */
.hx .trust{position:relative}
.hx .trust::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:34%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg, rgba(194,63,214,0), #e48cf7 60%, #fff, rgba(255,255,255,0));box-shadow:0 0 12px rgba(194,63,214,.8)}
.hx .trust.in::before{animation:trace 2.4s .4s var(--rev) forwards}
@keyframes trace{0%{opacity:0;translate:-30% 0}15%{opacity:1}100%{opacity:0;translate:300% 0}}
.trust .k{font-variant-numeric:tabular-nums}

/* =====================================================================
   SECTIONS
   ===================================================================== */
/* grain fixe sur toute la page, jamais sur un conteneur qui défile */
/* sans mode de fusion: en « overlay », ce calque plein écran obligeait à recomposer TOUT l'écran à chaque image */
body::after{content:'';position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* titres de section: mots qui montent derrière un masque, passage violet qui luit */
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
/* pas de will-change ici: 52 mots = 52 calques gardés en mémoire pour une entrée qui dure une seconde */
.wd>.wi{display:inline-block}
h2 em:not(.split),h2 em.split .wi{background:linear-gradient(100deg, #c23fd6 0%, #e9a8f8 22%, #c23fd6 44%, #c23fd6 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lueur 9s var(--rev) infinite}
h2 em.split .pt{color:#c23fd6}
@keyframes lueur{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.pull .sw{transition:none}

/* #probleme: la liste */
.prob .list div{position:relative}
.prob .list div::before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg, #c23fd6, rgba(194,63,214,0));transition:transform .7s var(--rev)}
.prob .list div:hover::before{transform:scaleX(1)}

/* #probleme: le mois au siège, en direct. Des paquets arrivent par les fils,
   la personne au centre retape, chaque cellule se remplit sous le curseur. */
.flow{isolation:isolate}
.flow>.beam{position:absolute;z-index:3;padding:1.2px;opacity:.75;--bd:7s}
.flow>.fpks{position:absolute;inset:0;z-index:0;pointer-events:none}
.flow .fpk{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;opacity:0;offset-rotate:0deg;
  box-shadow:0 0 0 2px rgba(240,166,200,.35), 0 0 10px 3px rgba(240,166,200,.9), 0 0 22px 6px rgba(194,63,214,.6);
  animation:fpk var(--fd, 2.6s) cubic-bezier(.45,.05,.55,.95) infinite;animation-delay:var(--fdl, 0s)}
@keyframes fpk{0%{offset-distance:0%;opacity:0}8%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.flow .hub .who::before{content:'';position:absolute;inset:-7px;border-radius:50%;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ba), transparent 0 55%, #f0a6c8 75%, #fff 82%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);animation:beam 1.8s linear infinite}
.flow .hub .who svg{animation:tape .34s steps(2) infinite}
@keyframes tape{50%{translate:0 1px}}
.flow.vivant .sheet .rows div:not(:first-child):not(:nth-child(2)) span:not(.e){clip-path:inset(0 100% 0 0);transition:clip-path .3s linear, opacity .5s var(--rev)}
.flow.vivant .sheet .rows span.t{clip-path:inset(0 0 0 0)}
.flow.vivant .sheet .rows span.x.err{background:#ff6fa8;box-shadow:0 0 0 1px rgba(255,111,168,.6), 0 0 18px rgba(255,111,168,.75);animation:secoue .5s var(--rev)}
.flow.vivant .sheet.efface .rows div:not(:first-child):not(:nth-child(2)) span:not(.e){opacity:0;transition-duration:.6s}
@keyframes secoue{20%{translate:-3px 0}40%{translate:3px 0}60%{translate:-2px 0}80%{translate:2px 0}}
.flow.vivant .sheet .cur{left:0!important;top:0!important;bottom:auto!important;transition:transform .3s linear;will-change:transform}
.sheet .pill{overflow:hidden}
.sheet .pill::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);animation:balaie 4.5s 1s var(--rev) infinite}
@keyframes balaie{0%{left:-60%}35%,100%{left:130%}}

/* #methode: la comète qui relie les trois étapes, au rythme du défilement */
#methode .steps{position:relative}
#methode .steps>svg.fil{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.fil .rail{fill:none;stroke:rgba(243,244,246,.1);stroke-width:1}
.fil .trace{fill:none;stroke:url(#filGrad);stroke-width:2;stroke-linecap:round}
.fil .queue{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;filter:url(#filFlou);opacity:.9}
.fil .tete{fill:#fff;filter:url(#filHalo)}
#methode .steps.comete .step{border-top-color:transparent}
#methode .step::after{content:'';position:absolute;left:-12%;top:-30px;width:70%;height:180px;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(closest-side, rgba(155,21,176,.28), rgba(155,21,176,0));transition:opacity 1s var(--rev)}
#methode .step.lit::after{opacity:1}
#methode .step .no{background:linear-gradient(180deg, #fbe6ff 0%, #e48cf7 38%, #9b15b0 100%) no-repeat 0 0/0% 100%;
  -webkit-background-clip:text;background-clip:text;transition:background-size 1.1s var(--rev), -webkit-text-stroke-color .6s, filter .8s var(--rev)}
#methode .step.lit .no{background-size:100% 100%;-webkit-text-stroke-color:rgba(240,201,251,.9);filter:drop-shadow(0 0 22px rgba(194,63,214,.45))}
#methode .step h3,#methode .step p{transition:color .8s var(--rev)}
#methode .step.lit h3{color:#fff}
#methode .step.lit p{color:#c9cdd8}

/* ce que vous recevez: la feuille de route qu'on parcourt, la jauge qui monte en régime */
.board2{isolation:isolate}
.board2>.beam{position:absolute;z-index:3;padding:1.2px;opacity:.6;--bd:8s}
.board2>.vite{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;
  opacity:calc((var(--v, 0) - .62) * 2.6)}
.board2>.vite::before{content:'';position:absolute;inset:-10% -50%;
  background:repeating-linear-gradient(180deg, transparent 0 13px, rgba(228,140,247,.16) 13px 14px, transparent 14px 31px, rgba(255,255,255,.08) 31px 32px, transparent 32px 47px);
  -webkit-mask:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);mask:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation:file .35s linear infinite}
@keyframes file{to{translate:-12% 0}}
.road .lane{position:absolute;left:0;right:0;top:3px;height:11px;overflow:hidden;pointer-events:none}
.road .runner{position:absolute;inset:0;translate:-100% 0;
  background:linear-gradient(90deg, rgba(194,63,214,0) 55%, rgba(228,140,247,.6) 93%, #fff 99.2%, rgba(255,255,255,0) 100%);
  -webkit-mask:linear-gradient(180deg, transparent 0 4px, #000 4px 7px, transparent 7px);mask:linear-gradient(180deg, transparent 0 4px, #000 4px 7px, transparent 7px)}
.road .tete{position:absolute;top:8.5px;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle, #fff 0 2.6px, rgba(228,140,247,.9) 3.6px, rgba(194,63,214,0) 7px)}
.road.run .runner{animation:roule var(--per, 5s) linear infinite}
.road.run .tete{animation:tete var(--per, 5s) linear infinite}
@keyframes roule{0%{translate:-100% 0}100%{translate:0 0}}
@keyframes tete{0%{left:0%;opacity:0}3%{opacity:1}96%{opacity:1}100%{left:100%;opacity:0}}
.road.run .ms::before{animation:ping var(--per, 5s) linear infinite;animation-delay:calc(var(--at, 0) * var(--per, 5s))}
@keyframes ping{0%{scale:1.9;box-shadow:0 0 0 6px rgba(228,140,247,.25), 0 0 22px 4px rgba(228,140,247,.95)}18%{scale:1;box-shadow:0 0 12px rgba(194,63,214,.9)}100%{scale:1}}
.road.run .ms .t{animation:allume var(--per, 5s) linear infinite;animation-delay:calc(var(--at, 0) * var(--per, 5s))}
@keyframes allume{0%{text-shadow:0 0 14px rgba(228,140,247,.8)}22%,100%{text-shadow:0 0 0 rgba(228,140,247,0)}}
/* la jauge redessinée: graduations, zone rouge, arc qui suit l'aiguille */
.gauge.gx{width:clamp(150px, 7rem + 4vw, 196px);height:auto;aspect-ratio:200/124;overflow:visible}
.gauge.gx::before,.gauge.gx>i,.gauge.gx>b{display:none}
.gauge.gx>svg{display:block;width:100%;height:100%;overflow:visible}
.gx .piste{fill:none;stroke:rgba(243,244,246,.08);stroke-width:9;stroke-linecap:round}
.gx .rouge{fill:none;stroke:#ff4d8d;stroke-width:9;opacity:.35}
.gx .arc{fill:none;stroke:url(#gArc);stroke-width:9;stroke-linecap:round}
.gx .arcflou{fill:none;stroke:#d36cf0;stroke-width:14;stroke-linecap:round;filter:url(#gFlou);opacity:.6}
.gx .grad line{stroke:rgba(243,244,246,.3);stroke-width:1.2;stroke-linecap:round}
.gx .grad line.maj{stroke:rgba(243,244,246,.7);stroke-width:1.8}
.gx .grad line.r{stroke:rgba(255,92,150,.85)}
.gx .aiguille{stroke:#fff;stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(228,140,247,.8))}
.gx .moyeu{fill:#0c0f18;stroke:#fff;stroke-width:2}
.gx .moyeu2{fill:#e48cf7}
.gx .lampe{fill:#ff4d8d;filter:url(#gFlou)}

/* #domaines: chaque chantier a son petit moteur visuel, en marche perpétuelle */
.dom .row.lite{padding:clamp(1.3rem, .9rem + 1vw, 1.9rem);border-radius:20px;border:1px solid rgba(243,244,246,.08);
  background:linear-gradient(165deg, rgba(26,20,41,.78), rgba(16,19,32,.78));overflow:hidden;
  transition-property:transform, border-color, box-shadow;transition-duration:.5s;transition-timing-function:var(--rev)}
.dom .row.lite:hover{transform:translateY(-4px);border-color:rgba(194,63,214,.35);box-shadow:0 26px 60px rgba(0,0,0,.45), 0 0 50px rgba(155,21,176,.12)}
.dom .lite .no{font-family:var(--disp);font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(214,120,236,.75)}
.dom .no{background:linear-gradient(180deg, #fbe6ff, #c23fd6 90%) no-repeat 0 100%/100% 0%;-webkit-background-clip:text;background-clip:text;
  transition:background-size .6s var(--rev)}
.dom .row:hover .no{background-size:100% 100%}
.viz{position:relative;height:120px;border-radius:14px;overflow:hidden;flex:none;
  background:radial-gradient(120% 90% at 50% 0%, rgba(155,21,176,.14), rgba(8,9,16,0) 70%), rgba(8,9,16,.5);
  border:1px solid rgba(243,244,246,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.dom .big .viz{height:clamp(150px, 6rem + 6vw, 196px)}
.viz>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.viz::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:linear-gradient(rgba(243,244,246,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(243,244,246,.035) 1px, transparent 1px);background-size:22px 22px}
.viz:not(.run) *{animation-play-state:paused!important}
.viz .lig{fill:none;stroke:rgba(243,244,246,.12);stroke-width:1}
.viz .vio{fill:none;stroke:rgba(194,63,214,.55);stroke-width:1.4}
.viz .flx{fill:none;stroke:#f6dcff;stroke-width:1.4;stroke-dasharray:2 10;animation:flux 1.2s linear infinite}
.viz .pq{fill:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #c23fd6)}
.viz .pqr{fill:#ff6fa8;filter:drop-shadow(0 0 4px #ff6fa8)}
.viz .puce{fill:#171327;stroke:rgba(214,120,236,.55);stroke-width:1}
.viz .puce.on{stroke:#f6dcff;fill:#24173a}
.viz .bar{fill:rgba(243,244,246,.14)}
.viz .bar.v{fill:url(#vzGrad)}
/* 01, le radar */
.viz .balai{transform-box:view-box;animation:tourne 3.6s linear infinite}
.viz .blip{opacity:0;animation:blip 3.6s linear infinite}
@keyframes blip{0%{opacity:0}2%{opacity:1}40%{opacity:.15}100%{opacity:0}}
.viz .ligne{transform-box:fill-box;transform-origin:0 50%;animation:ecrit 7.2s var(--rev) infinite}
@keyframes ecrit{0%,6%{scale:0 1;opacity:1}22%,86%{scale:1 1;opacity:1}96%,100%{scale:1 1;opacity:0}}
/* 03, les barres */
.viz .bar.anim{transform-box:fill-box;transform-origin:50% 100%;animation:monte 2.8s ease-in-out infinite alternate}
@keyframes monte{0%{scale:1 .35}100%{scale:1 1}}
.viz .courbe{stroke-dasharray:1 1;stroke-dashoffset:1;animation:courbe 5.6s var(--rev) infinite}
@keyframes courbe{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
/* 04, les engrenages */
.viz .eng{transform-box:fill-box;transform-origin:center;animation:tourne 6s linear infinite}
.viz .eng.inv{animation-direction:reverse;animation-duration:4.5s}
.viz .colis{animation:tapis 3.2s linear infinite}
@keyframes tapis{from{translate:-40px 0}to{translate:260px 0}}
/* 05, la pile de documents */
.viz .docs{position:absolute;left:50%;top:50%;width:46%;max-width:150px;aspect-ratio:1.25;translate:-50% -46%}
.viz .doc{position:absolute;inset:0;border-radius:9px;border:1px solid rgba(243,244,246,.14);
  background:linear-gradient(160deg, #221a35, #12131f 80%);box-shadow:0 10px 26px rgba(0,0,0,.45);
  animation:pile 6s var(--rev) infinite;animation-delay:var(--dd, 0s)}
.viz .doc::before{content:'';position:absolute;left:12%;right:12%;top:34%;bottom:16%;
  background:repeating-linear-gradient(180deg, rgba(243,244,246,.18) 0 3px, transparent 3px 11px);
  -webkit-mask:linear-gradient(90deg, #000 70%, transparent);mask:linear-gradient(90deg, #000 70%, transparent)}
.viz .doc::after{content:'';position:absolute;left:12%;top:18%;width:34%;height:3px;border-radius:2px;background:#e48cf7;box-shadow:0 0 8px #c23fd6}
@keyframes pile{
  0%,28%{transform:translate(0, 0) scale(1);opacity:1;z-index:3}
  36%{transform:translate(18%, -62%) rotate(6deg) scale(.96);opacity:0;z-index:3}
  37%,45%{transform:translate(0, 22%) scale(.84);opacity:0;z-index:1}
  62%,95%{transform:translate(0, 11%) scale(.92);opacity:.8;z-index:2}
  100%{transform:translate(0, 0) scale(1);opacity:1;z-index:3}}
.viz .loupe{position:absolute;left:0;right:0;height:18px;top:26%;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(228,140,247,.2), transparent);animation:loupe 3.2s ease-in-out infinite alternate}
@keyframes loupe{to{top:62%}}

.spot{position:relative}
.spot::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(240,170,255,.9), rgba(194,63,214,.35) 30%, transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);transition:opacity .35s var(--rev)}
.spot .lum{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(155,21,176,.16), transparent 55%);transition:opacity .35s var(--rev);
  -webkit-mask-image:radial-gradient(ellipse 52% 60% at 50% 50%, #000 55%, transparent 100%);mask-image:radial-gradient(ellipse 52% 60% at 50% 50%, #000 55%, transparent 100%)}
/* .cta-row a son propre ::before (halo flou, 38 % de large): sans remise à zéro, les deux règles se mêlaient
   en un carré à coins ronds en haut à gauche, allumé par le « survol » collant d'iOS après un toucher */
.spot::before{left:0;top:0;right:0;bottom:0;width:auto;height:auto;aspect-ratio:auto;filter:none}
@media (hover:hover) and (pointer:fine){.spot:hover::before,.spot:hover .lum{opacity:1}}
.dom .row>*:not(.lum){position:relative;z-index:1}
.cta-row:not(.quiet){overflow:hidden}
.cta-row.quiet{overflow:visible}

/* #mandats: cartes empilées au défilement (bureau seulement) */
@media (min-width:1081px){
  .cases{grid-template-columns:1fr;gap:28px;max-width:1080px;margin:0 auto}
  .case,.case:nth-child(n){--r:0deg;margin-top:0;position:sticky;top:calc(110px + var(--i, 0) * 16px);
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(2rem, 1rem + 3vw, 4.5rem);row-gap:14px;
    align-items:start;min-height:420px;transform-origin:50% 0;
    box-shadow:0 -20px 60px rgba(5,6,12,.55), 0 40px 90px rgba(0,0,0,.5)}
  .case .tagline,.case h3{grid-column:1}
  .case h3{font-size:clamp(1.6rem, 1.1rem + 1.3vw, 2.4rem);line-height:1.12}
  .case dl{grid-column:2;grid-row:1 / span 3}
  .case:nth-child(1){--i:0}.case:nth-child(2){--i:1}.case:nth-child(3){--i:2}.case:nth-child(4){--i:3}
  .cases.stag>*,.cases.stag.in>*,.cases.stag.in>*:hover,.case:hover{transform:none;rotate:none}
}
.case{isolation:isolate}
.case::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:#05060b;opacity:var(--voile, 0);z-index:3}
.case .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;overflow:hidden}
.case .glare::before{content:'';position:absolute;top:-50%;bottom:-50%;width:40%;left:-60%;rotate:18deg;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);transition:left .9s var(--rev)}
.case:hover .glare::before{left:120%}

/* #temoignages: flou entre deux témoignages */
.car .sl{transition-property:opacity, filter;transition-duration:.6s;transition-timing-function:var(--rev)}
.car .sl[aria-hidden="true"]{opacity:.2;filter:blur(4px)}
.car .who img{box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 3px rgba(12,15,24,1), 0 0 0 4px rgba(194,63,214,.55), 0 0 24px rgba(194,63,214,.4)}

/* #agence: portrait qui pivote vers le pointeur (le « m » en contour est retiré) */
.portrait{transform:perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));transition:transform .5s var(--rev)}
.portrait .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(500px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.18), transparent 45%)}
.portrait:hover .glare{opacity:1}

/* #diagnostic: rayon qui court sur le bord de la carte de départ; les six tirets seuls */
.starter .card{isolation:isolate}
.starter .card>.beam{position:absolute;padding:1.5px;opacity:.9;--bd:5.5s;z-index:3}
.starter .choice{transition-property:border-color, background-color, box-shadow, transform;transition-duration:.25s}
.starter .choice:hover{box-shadow:0 0 0 1px rgba(194,63,214,.5), 0 10px 30px rgba(155,21,176,.2)}

/* le panneau du formulaire: poussière de lumière et reflet qui passe */
.diag .side>canvas.dpart{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.diag .side>.reflet{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.diag .side>.reflet::before{content:'';position:absolute;top:-30%;bottom:-30%;width:34%;left:-70%;rotate:16deg;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.07) 40%, rgba(246,220,255,.16) 50%, rgba(255,255,255,.07) 60%, transparent);
  animation:reflet 7s 1.2s var(--rev) infinite}
@keyframes reflet{0%{left:-70%}30%,100%{left:150%}}
.diag .side>.aurore{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(40% 30% at 30% 30%, rgba(194,63,214,.35), transparent 70%), radial-gradient(35% 28% at 70% 70%, rgba(122,60,255,.28), transparent 70%);
  animation:aurore 16s ease-in-out infinite alternate}
@keyframes aurore{to{transform:translate(6%, -8%) rotate(14deg)}}
.diag .side .kicker{background:linear-gradient(100deg, #e2b6ea 0%, #fff 14%, #e2b6ea 28%, #e2b6ea 100%) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:kick 6s 1.6s linear infinite}
@keyframes kick{0%{background-position:100% 0}40%,100%{background-position:0 0}}
.diag .side li::before{text-shadow:0 0 12px rgba(194,63,214,.7)}

/* =====================================================================
   PIED DE PAGE: un lever de planète, le « m » qui monte derrière l'horizon
   ===================================================================== */
footer{position:relative;overflow:hidden;isolation:isolate;--scene:clamp(250px, 9rem + 20vw, 470px);padding-bottom:calc(var(--scene) + 30px)}
footer>.wrap{position:relative;z-index:2}
footer>.fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.fx canvas{position:absolute;inset:0;width:100%;height:100%}
.fx .spotf{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--rev);
  background:radial-gradient(520px circle at var(--fx, 50%) var(--fy, 40%), rgba(155,21,176,.14), transparent 60%)}
footer:hover .fx .spotf{opacity:1}
.fx .scene{position:absolute;left:0;right:0;bottom:0;height:var(--scene)}
.fx .ciel{position:absolute;left:50%;bottom:0;width:min(140vw, 1900px);height:150%;translate:-50% 0;
  background:radial-gradient(50% 55% at 50% 100%, rgba(155,21,176,.55), rgba(122,60,255,.18) 45%, rgba(12,15,24,0) 72%);animation:respire 6s ease-in-out infinite}
@keyframes respire{50%{opacity:.75}}
.fx .fm{position:absolute;left:50%;bottom:36%;width:min(46vw, 460px);height:auto;translate:-50% 0;overflow:visible;
  filter:drop-shadow(0 0 2px rgba(255,236,255,.7)) drop-shadow(0 0 22px rgba(194,63,214,.75)) drop-shadow(0 -10px 60px rgba(155,21,176,.5))}
.fm .corps{fill:url(#fmFill)}
.fm .bord{fill:none;stroke:url(#fmRim);stroke-width:3.2;stroke-linejoin:round}
.fm .court{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.07 .93;animation:mrun 5.5s linear infinite}
.fm .lust{fill:url(#fmLust)}
.fx .horizon{position:absolute;left:50%;bottom:0;width:max(170vw, 1500px);height:calc(var(--scene) * 2.4);translate:-50% 74%;border-radius:50%;
  background:radial-gradient(60% 50% at 50% 0%, #120a1e, #05060b 70%);
  box-shadow:0 -1px 0 rgba(255,236,255,.95), 0 -3px 10px rgba(246,200,255,.9), 0 -14px 46px rgba(194,63,214,.85), 0 -46px 140px rgba(155,21,176,.6), 0 -110px 240px rgba(122,60,255,.28)}
.fx .eclat{position:absolute;left:50%;bottom:calc(var(--scene) * 2.4 * .26 - 7px);width:min(70vw, 780px);height:14px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side, #fff, rgba(246,200,255,.85) 30%, rgba(194,63,214,.35) 62%, transparent);filter:blur(1px);animation:eclat 5s ease-in-out infinite}
.fx .eclat::before{content:'';position:absolute;left:50%;top:50%;width:90px;height:90px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(246,200,255,.4) 40%, transparent)}
.road.plie .lane,.road.plie .tete{display:none}
/* v14 lever de soleil: une lueur douce derrière le « m », qui GRANDIT au défilement (GSAP sur .soleil)
   et respire doucement (::before). Pas de mode de fusion: un calque fusionné recompose tout l'écran à chaque image. */
.fx .soleil{position:absolute;left:50%;bottom:62.4%;width:min(150vw, 1800px);aspect-ratio:2.3;translate:-50% 50%;will-change:transform,opacity}
.fx .soleil::before{content:'';position:absolute;inset:0;border-radius:50%;animation:souffle 6s ease-in-out infinite;
  background:radial-gradient(closest-side, rgba(255,246,236,.95), rgba(255,214,176,.7) 10%, rgba(246,150,214,.5) 22%, rgba(214,90,226,.34) 36%, rgba(155,21,176,.18) 56%, rgba(122,60,255,.06) 76%, transparent)}
@keyframes souffle{50%{scale:1.06 1.1;opacity:.82}}
.fx .fm{will-change:transform,opacity}
/* la Terre COBE (v9.js): au-dessus du « m », qu'elle cache sous le limbe. Si elle est là, la planète CSS s'efface. */
.fx .terre{z-index:1}
.fx .eclat{z-index:2}
.fx.globe .horizon{display:none}
@media (prefers-reduced-motion:reduce){.fx .soleil::before{animation:none!important}}
@keyframes eclat{50%{opacity:.7;scale:.92 1}}
/* la planète n'est plus un trou noir: atmosphère éclairée le long du limbe, zone éclairée sous le lever,
   continents et lumières de villes qui s'éteignent vers la face de nuit */
.fx .horizon::before,.fx .horizon::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none}
.fx .horizon::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 920' preserveAspectRatio='none'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0024 .006' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .15  0 0 0 0 .12  0 0 0 0 .3  0 0 0 7 -3.4'/%3E%3C/filter%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0024 .006' numOctaves='5' seed='11' result='t'/%3E%3CfeColorMatrix in='t' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 14 -7.1' result='m'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='4' result='g'/%3E%3CfeColorMatrix in='g' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 -4.4' result='gm'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='1' seed='3' result='n'/%3E%3CfeColorMatrix in='n' values='0 0 0 0 1  0 0 0 0 .78  0 0 0 0 .5  0 0 0 30 -20.6' result='d'/%3E%3CfeComposite in='d' in2='m' operator='in' result='dm'/%3E%3CfeComposite in='dm' in2='gm' operator='in'/%3E%3C/filter%3E%3Crect width='2000' height='920' filter='url(%23l)'/%3E%3Crect width='2000' height='920' filter='url(%23c)'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.75;
  -webkit-mask-image:radial-gradient(ellipse 46% 26% at 50% 0%, #000, rgba(0,0,0,.55) 50%, transparent 100%);
  mask-image:radial-gradient(ellipse 46% 26% at 50% 0%, #000, rgba(0,0,0,.55) 50%, transparent 100%)}
.fx .horizon::after{background:radial-gradient(ellipse 20% 7% at 50% 0%, rgba(255,226,250,.34), rgba(194,63,214,.14) 55%, transparent 100%),
  radial-gradient(ellipse 60% 22% at 50% 0%, rgba(122,60,255,.16), transparent 100%);
  box-shadow:inset 0 5px 14px rgba(214,150,255,.32), inset 0 22px 60px rgba(122,60,255,.16)}
/* v14: retour au pied v12 (Youssef a refusé la Terre NASA). Le « m » centré malgré l'orbe, plus haut dans le lever */
.fx .fm{translate:-57.5% 0;bottom:46%}
body{padding-bottom:0}

footer .claim em{background:linear-gradient(100deg, #c23fd6 0%, #f6dcff 18%, #c23fd6 36%, #c23fd6 100%) 0 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lueur 8s var(--rev) infinite}
footer .fcta{position:relative;padding:clamp(1.4rem, 1rem + 1vw, 2rem);border-radius:24px;border:1px solid rgba(243,244,246,.1);
  background:linear-gradient(160deg, rgba(36,24,56,.82), rgba(12,14,24,.8));
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06)}
footer .fcta>.beam{padding:1.2px;opacity:.7;--bd:6s}
footer .tel{background:linear-gradient(100deg, #fff 0%, #fff 40%, #e48cf7 50%, #fff 60%, #fff 100%) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .9s var(--rev)}
footer .tel:hover{background-position:100% 0}
footer .social a{transform:translate(var(--mx, 0px), var(--my, 0px));transition:color .3s var(--rev), border-color .3s var(--rev), background-color .3s var(--rev), box-shadow .3s var(--rev), transform .25s var(--rev)}
footer .social a:hover{box-shadow:0 0 0 1px rgba(194,63,214,.5), 0 0 26px rgba(194,63,214,.55)}
footer .fbot{border-top-color:rgba(243,244,246,.12)}

/* =====================================================================
   MOBILE ET TABLETTE
   ===================================================================== */
@media (max-width:1080px){
  .hx-scrim{background:
    linear-gradient(180deg, rgba(7,7,14,.72) 0%, rgba(7,7,14,.78) 30%, rgba(7,7,14,.62) 62%, rgba(7,7,14,.25) 88%, rgba(7,7,14,0)),
    linear-gradient(90deg, rgba(7,7,14,.4), rgba(7,7,14,0) 70%)}
  .hx-vid{object-position:62% 50%}
}
@media (max-width:760px){
  .viz{height:108px}
  .dom .big .viz{height:150px}
  footer .fcta{padding:22px 18px}
}

/* =====================================================================
   MOUVEMENT RÉDUIT: tout est posé, rien ne bouge
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .hx .lead .cle{transition:none!important;background-size:100% 100%}
  .m-run,.beam,.beam::before,.hx-orb,.orb-halo,.hx-m,.aura,.hx h1 b,h2 em,h2 em .wi,footer .claim em,.flow .fpk,.flow .hub .who::before,.flow .hub .who svg,
  .sheet .pill::after,.diag .side>.reflet::before,.diag .side>.aurore,.diag .side .kicker,.fx .ciel,.fx .eclat,.fm .court,
  .viz *,.road .runner,.road .tete,.road .ms::before,.road .ms .t,.board2>.vite::before,.schema .rings i{animation:none!important}
  .m-run,.fm .court,.flow .fpk,.road .tete{opacity:0}
  .m-rim{stroke-dashoffset:0!important;animation:none!important}
  html.v9 .hx .grid>div:first-child>*,html.v9 .hx .schema{transition-duration:.01s;transition-delay:0s}
  .portrait{transform:none}
  .car .sl[aria-hidden="true"]{filter:none}
  .board2>.vite{display:none}
  .schema svg.wires path.flux{animation:none;opacity:.3}
  .viz .ligne{scale:1 1}
  .viz .courbe{stroke-dashoffset:0}
}

/* ===== v12 ===== */
/* menu: deux traits asymétriques qui se croisent en X sur un ressort (courbe de kinetics.colorion.co).
   La base laissait la grille étirer ses deux rangées sur 42 px: traits à 21 px l'un de l'autre, X raté. */
.nav .burger{align-content:center;justify-items:center;gap:6px;transition:border-color .3s var(--rev), background-color .3s var(--rev)}
.nav .burger:hover{border-color:rgba(243,244,246,.4);background:rgba(243,244,246,.08)}
.nav .burger i{width:18px;height:1.6px;border-radius:2px;transition:transform .55s cubic-bezier(.34,1.56,.64,1), width .35s var(--rev)}
.nav .burger i:last-child{width:12px;transform:translateX(3px)}
.nav .burger:hover i:last-child{width:18px;transform:none}
.nav .burger[aria-expanded="true"] i:first-child{transform:translateY(3.8px) rotate(45deg)}
.nav .burger[aria-expanded="true"] i:last-child{width:18px;transform:translateY(-3.8px) rotate(-45deg)}
/* bouton collant mobile: blanc, rayon sur le bord, ombre douce */
.stick .cta{box-shadow:0 14px 36px rgba(0,0,0,.55), 0 0 26px rgba(194,63,214,.35)}
/* carte du diagnostic: les étiquettes ne se cassent plus mot par mot */
.starter .top>span:not(.steps){white-space:nowrap}
@media (max-width:620px){
  .starter .top{flex-wrap:wrap;gap:10px 12px;margin-bottom:22px}
  .starter .top .tag{padding:6px 12px;letter-spacing:.08em}
  .starter .top .steps{flex-basis:100%;margin-left:0}
}
/* étiquette d'état du schéma: le violet foncé sur 10,5 px se lisait comme un fantôme */
.schema .state b{color:#e48cf7}
/* fils du schéma: la règle des grandes lueurs (.glow, flou 50 à 70 px + dérive) attrapait aussi
   les traits lumineux des fils, d'où les « tubes » flous sur mobile */
.schema svg.wires path.glow{filter:blur(2.5px);animation:none}
/* héros mobile: tout l'essentiel dans le premier écran, et le haut du schéma vivant (cartes, fils,
   paquets) qui dépasse sous la promesse. C'est lui l'appel à défiler, pas un indicateur ajouté.
   La colonne de texte passe en display:contents pour que le schéma s'intercale avant le 2e paragraphe. */
@media (max-width:760px){
  .hx{padding-top:92px}
  .hx .grid{row-gap:0}
  .hx .grid>div:first-child{display:contents}
  .hx .grid>div:first-child>.eyebrow{order:1}
  .hx h1{order:2;margin-top:14px;font-size:clamp(1.9rem, 1.15rem + 3.4vw, 2.4rem);line-height:1.02}
  .hx .grid>div:first-child>.lead{order:3;margin-top:14px;font-size:16px;line-height:1.5}
  .hx .acts{order:4;margin-top:20px;gap:10px}
  .hx .acts .cta{padding-top:13px;padding-bottom:13px}
  .hx .promise{order:5;margin-top:12px}
  .hx .schema{order:6}
  .hx .grid>div:first-child>.lead + .lead{order:7;margin-top:56px;font-size:14.7px;line-height:1.6}
}

/* schéma mobile en nœud papillon: la sphère au centre exact, trois cartes de chaque côté, des fils
   courts. Le script de base trace les fils depuis offsetLeft/offsetTop (centre de la carte, translate
   -50 %), donc les cartes gardent ce translate et prennent une largeur fixe pour se caler aux bords. */
@media (max-width:760px){
  .hx .schema{--cw:min(112px, 30vw);margin:26px 0 0;aspect-ratio:auto;height:clamp(250px, 74vw, 300px);min-height:0;max-width:none}
  .hx .schema .node:not(.core){width:var(--cw);white-space:normal;line-height:1.2;padding:8px 9px;gap:6px;font-size:10.5px}
  .hx .schema .node:not(.core)>span{flex:1;min-width:0}
  .hx .schema .node:not(.core) .led{display:none}
  .hx .schema .node.core{width:min(98px, 26vw);gap:5px}
  .hx .schema .node.core .lbl{font-size:10.5px}
  .hx .schema .node.n0{left:50%;top:50%}
  .hx .schema .node.n1,.hx .schema .node.n3,.hx .schema .node.n5{left:calc(var(--cw) / 2)}
  .hx .schema .node.n2,.hx .schema .node.n4,.hx .schema .node.n6{left:calc(100% - var(--cw) / 2)}
  .hx .schema .node.n1,.hx .schema .node.n2{top:15%}
  .hx .schema .node.n3,.hx .schema .node.n4{top:50%}
  .hx .schema .node.n5,.hx .schema .node.n6{top:85%}
  .hx .schema .rings i{top:50%;width:52%}
  .hx .schema .rings i+i{width:86%}
  .hx .schema .state{bottom:-26px}
}

/* très petits écrans (≤ 350 px): le bouton du menu et les cartes du schéma tiennent sans rognure */
@media (max-width:350px){
  html .nav .cta{flex:none;padding:9px 10px;font-size:11.5px;gap:6px}
  .hx .schema{--cw:31vw}
  .hx .schema .node:not(.core){font-size:9.6px;padding:7px 7px;gap:5px}
  .hx .schema .node:not(.core) svg{width:11px;height:11px}
}

/* blocs hors écran: animations en pause (v9.js, SOMMEIL HORS ÉCRAN) */
.dors,.dors *,.dors *::before,.dors *::after{animation-play-state:paused!important}
/* sommeil par élément (v9.js, SOMMEIL PAR ÉLÉMENT): une boucle hors de l'écran ne tourne pas */
.hv,.hv::before,.hv::after,svg.hv *{animation-play-state:paused!important}
/* le courant des fils est invisible tant que le schéma n'est pas allumé: il ne tourne pas dans le vide */
.schema:not(.live) svg.wires path.flux{animation-play-state:paused}
/* la boîte du formulaire vit DANS #diagnostic: si la section dort, son animation d'ouverture restait
   gelée à l'image 0 (opacité 0), la boîte s'ouvrait invisible. Elle ne dort jamais. */
.dors .dlg,.dors .dlg *,.dors .dlg *::before,.dors .dlg *::after{animation-play-state:running!important}
/* L'agence, mobile: le visage est à 60 % de la largeur de la photo et la légende couvre le bas.
   Portrait en 4/5, agrandi et décalé pour centrer le visage au-dessus de la légende (la figure rogne). */
@media (max-width:760px){
  .portrait img{aspect-ratio:4/5;scale:1.18;translate:-8% -6%}
}

/* v14 chauffe: les boucles décoratives qui REPEIGNENT à chaque image (reflet des titres, rayon des boutons,
   paquets du flux, coureur du « m ») jouent un nombre fini de fois, puis se taisent. Mesure 10-02 au repos,
   section du milieu: 14,8 % du fil principal, 3,8 % sans animations. Le rayon repart au survol. */
.hx h1 b,h2 em:not(.split),h2 em.split .wi,footer .claim em{animation-iteration-count:2}
/* écran tactile: un seul passage du reflet (il repeint le titre à chaque image, 8 points de processeur à lui seul) */
html.leger .hx h1 b,html.leger h2 em:not(.split),html.leger h2 em.split .wi,html.leger footer .claim em{animation-iteration-count:1}
/* les rayons des boutons tournent sans fin (Youssef: « after some time the animation just stops »);
   hors écran, .dors les met en pause */
.flow .fpk{animation-iteration-count:5}
.fm .court{animation-iteration-count:2}
/* pied mobile: la Terre est plus courbe, le « m » sortait à peine de l'horizon */
@media (max-width:760px){.fx .fm{bottom:53%}}

/* bouton collant mobile: entrée qui glisse du bas, sortie plus courte (Youssef: « pops up too suddenly ») */
.stick{transform:translateY(calc(100% + 28px)) scale(.94);
  transition:opacity .32s cubic-bezier(.4, 0, 1, 1), transform .38s cubic-bezier(.4, 0, 1, 1)}
.stick.show{transform:none;transition:opacity .45s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1)}
@media (prefers-reduced-motion:reduce){.stick,.stick.show{transform:none;transition:opacity .4s ease!important}}

/* =====================================================================
   LÉGÈRETÉ
   1. REPOS (classe posée par v9.js): sans geste depuis quelques secondes, toutes les boucles se mettent
      en pause, la vidéo aussi. Seul le rayon des boutons blancs à l'écran continue (un petit calque qui pivote).
      Au premier geste, tout repart.
   2. LÉGER (classe posée dans le <head> sur écran tactile): pas de flou animé, pas de fusion, poussière fixe.
   ===================================================================== */
html.repos *,html.repos *::after,html.repos :not(.beam)::before,html.repos :not(.cta)>.beam::before{animation-play-state:paused!important}
html.repos .dlg,html.repos .dlg *,html.repos .dlg *::before,html.repos .dlg *::after{animation-play-state:running!important}
html.leger .glow:not(path){animation:none;filter:none;scale:1.15}
html.leger .schema .aura,html.leger .diag .side>.aurore{mix-blend-mode:normal}
html.leger .car .sl[aria-hidden="true"]{filter:none}