/* ==========================================================================================
   UpTrainer — landing premium (retour n°48, 29/09/2026). Feuille de la page ; les jetons sont dans theme.css.
   Matière : verre fumé (liquid glass) sur velours noir, une lumière rouge très sombre, grain, reflets fins.
   Le texte, les liens, les boutons et le parcours sont ceux de landing.html, mot pour mot.
   ========================================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-texte);
  letter-spacing:var(--ls-texte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  overflow-x:hidden;cursor:default;font-optical-sizing:auto}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font-family:inherit;cursor:pointer}
a,button,label,summary,[data-open],[role="button"]{cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:12px}
h1,h2,h3{text-wrap:balance}
.nw,.nb{white-space:nowrap}
/* Grain sur toute la page (la texture qui enlève le « fond uni ») */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;background-image:var(--grain);background-size:240px 240px;opacity:.055}

/* ---------- Barre de lecture ---------- */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:91;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--red-rgb),0),rgba(var(--red-rgb),.9) 40%,var(--red))}
.prog::after{content:"";position:absolute;right:-2px;top:-1px;width:4px;height:4px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.55)}

/* ---------- WhatsApp : bouton de verre, pastille de notification ---------- */
.nav{position:fixed;top:0;right:0;z-index:96;padding:14px var(--gut) 0 0;pointer-events:none}
.wa{pointer-events:auto;position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--wa);
  background:radial-gradient(120% 120% at 30% 15%,rgba(37,211,102,.22),rgba(37,211,102,.05) 60%),rgba(14,15,17,.55);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.1),0 8px 22px -8px rgba(0,0,0,.7);
  transition:transform var(--d-2) var(--ease)}
.wa:hover{transform:translateY(-1px) scale(1.04)}
/* WhatsApp coupé (Steeve, 30/09) : un seul interrupteur, l'attribut data-whatsapp de <html> ("off" / "on") */
html[data-whatsapp="off"] .nav{display:none}
@media (max-width:899px){html[data-whatsapp="off"] .dock{right:12px}}
.wa::after{content:"";position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 2px var(--bg);animation:pouls 2.6s var(--ease) infinite}
@keyframes pouls{0%{box-shadow:0 0 0 2px var(--bg),0 0 0 2px rgba(var(--red-rgb),.5)}70%,100%{box-shadow:0 0 0 2px var(--bg),0 0 0 9px rgba(var(--red-rgb),0)}}

/* ---------- Boutons ---------- */
.cta{width:100%}
.cta svg{display:block;transform:translateX(1px)}

/* ---------- Apparitions (jamais masqué sans JS) ---------- */
.js .rv{opacity:0;transform:translateY(22px);filter:blur(6px)}
.js .rv.in{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .8s var(--ease) var(--d,0ms)}
/* Texte qui s'allume mot à mot au défilement (repris de la page) */
.scrub .w{display:inline-block;opacity:var(--dim,.14);animation:wr linear both;animation-timeline:view();
  animation-range:cover calc(2% + var(--i) * .35%) cover calc(12% + var(--i) * .35%)}
@keyframes wr{to{opacity:1}}
@supports not (animation-timeline: view()){.scrub .w{animation:none}}
.noscrub .scrub .w{animation:none}

/* Mot en rouge qui prend la lumière : un reflet passe une fois quand il arrive */
.brille{display:inline-block;color:var(--red)}
.js .brille{background:linear-gradient(100deg,var(--red) 0 40%,#ffc9cf 47.5%,#fff1f2 50%,#ffc9cf 52.5%,var(--red) 60% 100%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:.04em .02em;margin:-.04em -.02em}
.js .brille.luit{animation:balaye 1.7s var(--ease-io) both}
@keyframes balaye{from{background-position:100% 0}to{background-position:0% 0}}

/* ==========================================================================================
   1. Premier écran
   ========================================================================================== */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;justify-items:center;text-align:center;
  padding:clamp(96px,11vh,132px) var(--gut) 28px;isolation:isolate;overflow:clip}
.hero-fond{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask:linear-gradient(#000 55%,transparent 98%);mask:linear-gradient(#000 55%,transparent 98%)}
.hero-fond .lum{position:absolute;left:50%;top:-38%;width:max(160vw,1500px);height:118%;transform:translate3d(calc(-50% + var(--px,0px)),var(--py,0px),0);
  background:radial-gradient(closest-side,rgba(var(--red-rgb),.20),rgba(72,7,15,.78) 18%,rgba(48,5,12,.55) 42%,rgba(23,3,6,.22) 68%,transparent 100%);
  filter:saturate(1.05)}
.hero-fond::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
.hero-contenu{align-self:center;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1320px;
  transform:translate3d(var(--cx,0px),var(--cy,0px),0)}
.surtitre{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 clamp(20px,2.8vh,32px);max-width:46em;
  color:var(--ink-2);font-size:clamp(13.5px,.35vw + 12.2px,16.5px);font-weight:500;line-height:1.4;letter-spacing:-.004em;text-wrap:balance}
.surtitre::before,.surtitre::after{content:"";flex:0 0 40px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4))}
.surtitre::after{background:linear-gradient(270deg,transparent,rgba(255,255,255,.4))}
.h1{margin:0;font-size:var(--fs-hero);font-weight:600;line-height:var(--lh-hero);letter-spacing:var(--ls-hero);color:var(--ink);text-wrap:balance}
.h1 .l1,.h1 .l3{display:inline}
.h1 em{display:block;font-style:normal;font-weight:600;margin:.02em 0 .03em;letter-spacing:-.05em}
.hero .sub{margin:clamp(22px,2.6vh,30px) auto 0;max-width:40ch;color:var(--ink-2);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);text-wrap:balance}
.rem{margin:14px 0 0;font-size:clamp(16px,.3vw + 15px,18px);font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.sub .rem{display:block;line-height:1.4}
.rem span{position:relative;display:inline-block;padding-bottom:9px}
.rem span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg,rgba(var(--red-rgb),.25),var(--red) 18%,var(--red) 82%,rgba(var(--red-rgb),.25))}
.rem span::before{content:"";position:absolute;left:0;bottom:-3px;width:26px;height:8px;border-radius:8px;opacity:0;z-index:1;
  background:radial-gradient(closest-side,#fff,rgba(255,255,255,.35) 50%,transparent)}
.js .rem span::after{transform:scaleX(0)}
.js .hero.pret .rem span::after{transform:none;transition:transform 1.1s var(--ease) 1.25s}
.js .hero.pret .rem span::before{animation:etincelle 1.1s var(--ease) 1.25s both}
@keyframes etincelle{0%{opacity:0;left:0}15%{opacity:1}85%{opacity:1}100%{opacity:0;left:calc(100% - 26px)}}
.hero .cta{margin-top:clamp(28px,3.6vh,40px);max-width:440px;min-height:62px;font-size:17px}
.hero .tiny{margin:14px 0 0;color:var(--ink-3);font-size:13.5px;letter-spacing:0}
/* L'équipe : une capsule de verre, les visages se soulèvent au survol (comme le dock du Mac) */
.equipe{margin-top:clamp(30px,4.4vh,48px);display:flex;align-items:center;gap:18px;padding:9px 22px 9px 10px;border-radius:var(--r-pill);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease)}
.equipe .team{display:flex;align-items:center;padding-left:6px;position:relative;z-index:3}
.av{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#1a1b1f;display:block;flex:none}
.equipe .av{width:42px;height:42px;margin-left:-11px;box-shadow:0 0 0 2px #121316,0 0 0 2.5px rgba(255,255,255,.14),0 6px 14px -4px rgba(0,0,0,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);position:relative}
.equipe .av:first-child{margin-left:0}
.equipe .av:hover{transform:translateY(-6px) scale(1.14);z-index:2;box-shadow:0 0 0 2px #121316,0 0 0 3px rgba(255,255,255,.3),0 12px 22px -6px rgba(0,0,0,.8)}
.equipe .tiny{position:relative;z-index:3;margin:0;text-align:left;font-size:13.5px;line-height:1.35;color:var(--ink-3)}
.equipe .tiny b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.js .equipe .av{animation:popin .7s var(--ease) both;animation-delay:calc(1.05s + var(--i,0) * 70ms)}
/* c02 : chaque visage attend que son image soit décodée pour arriver (sinon il surgissait d'un coup) */
.js .equipe .av:not(.charge){animation-play-state:paused}
@keyframes popin{from{opacity:0;transform:translateY(8px) scale(.6)}}
/* Indice de défilement */
.cue{position:relative;width:1px;height:46px;margin:22px auto 0;background:linear-gradient(rgba(255,255,255,.22),transparent);overflow:visible}
.cue i{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(var(--red-rgb),.35);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(40px);opacity:0}}
/* Entrée du premier écran : les mots montent d'un voile, un par un */
.js .h1 .mot{display:inline-block;opacity:0;transform:translateY(.38em);filter:blur(10px)}
.js .hero.pret .h1 .mot{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease) calc(var(--k) * 55ms + 80ms),transform 1.1s var(--ease) calc(var(--k) * 55ms + 80ms),filter .9s var(--ease) calc(var(--k) * 55ms + 80ms)}
.js .hero .entre{opacity:0;transform:translateY(16px);filter:blur(6px)}
.js .hero.pret .entre{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease) var(--d),transform 1s var(--ease) var(--d),filter .9s var(--ease) var(--d)}

/* ==========================================================================================
   2. Ce qu'on te vend partout (le monde d'avant : froid, ardoise)
   ========================================================================================== */
.old{position:relative;padding:clamp(28px,4vw,64px) clamp(10px,2.4vw,40px) 0;overflow-x:clip}
.ailleurs{position:relative;isolation:isolate;max-width:1360px;margin:0 auto;border-radius:var(--r-card);
  padding:clamp(40px,6vw,104px) clamp(18px,5vw,88px) clamp(44px,6vw,104px);background:linear-gradient(180deg,#121317,#0d0e11 60%,#0b0c0e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.07),0 50px 120px -50px rgba(0,0,0,.95)}
.old-fond{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden;
  background:
    radial-gradient(ellipse 58% 42% at 24% 30%,rgba(34,36,42,.72),rgba(23,24,28,.45) 45%,transparent 78%),
    radial-gradient(ellipse 52% 40% at 80% 58%,rgba(23,24,28,.62),transparent 74%),
    linear-gradient(rgba(120,134,160,.05),transparent 40%)}
.old-fond::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask:radial-gradient(ellipse 70% 55% at 50% 45%,#000 20%,transparent 75%);mask:radial-gradient(ellipse 70% 55% at 50% 45%,#000 20%,transparent 75%)}
.old-recit{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(44px,5.4vw,80px);text-align:center}
.old h2{margin:0 auto;max-width:17em;font-size:clamp(33px,2.1vw + 22px,54px);font-weight:600;line-height:1.04;letter-spacing:var(--ls-titre);color:var(--ink);text-wrap:balance}
.old h2.dead>.scrub{color:var(--ink-3)}
.old h2 .end{display:block;margin-top:.12em;color:var(--ink)}
/* La rature : un trait rouge qui traverse les montants au défilement (tient sur plusieurs lignes) */
.ray{background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:0 56%;background-size:0% .07em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;animation:rature linear both;animation-timeline:view();animation-range:cover 16% cover 30%}
@keyframes rature{to{background-size:100% .07em}}
@supports not (animation-timeline: view()){.ray{animation:none;background-size:100% .07em}}
.old .model{margin:0 auto;max-width:34em;color:var(--ink-2);font-size:clamp(16.5px,.3vw + 15.5px,19px);line-height:1.66;text-align:left}
.chute{margin:0;padding:clamp(8px,2vw,32px) 0 0;text-align:center}
.chute p{margin:0 auto;max-width:18ch;font-size:var(--fs-chute);font-weight:600;line-height:1.05;letter-spacing:-.042em;color:var(--ink);text-wrap:balance}
.chute .pr-filet{width:96px;margin:28px auto 0;background:linear-gradient(90deg,rgba(var(--red-rgb),0),rgba(var(--red-rgb),.95),rgba(var(--red-rgb),0))}
.chute .kick{margin:22px auto 0;max-width:26ch;font-size:clamp(19px,.8vw + 14px,26px);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--ink-2)}
.chute .kick em{font-style:normal;font-weight:600;color:var(--red)}

/* ==========================================================================================
   3. Le retournement (le rouge arrive, comme le fond chaud du film)
   ========================================================================================== */
.turn{position:relative;padding:clamp(96px,10vw,168px) var(--gut) clamp(40px,5vw,80px);text-align:center;isolation:isolate}
.turn-fond{position:absolute;left:0;right:0;top:0;bottom:-45%;z-index:-1;pointer-events:none;opacity:var(--allume,1);
  -webkit-mask:linear-gradient(transparent,#000 22%);mask:linear-gradient(transparent,#000 22%);
  background:radial-gradient(ellipse 78% 58% at 50% 48%,rgba(72,7,15,.82),rgba(48,5,12,.5) 38%,rgba(23,3,6,.24) 64%,transparent 86%)}
.turn .who{margin:0}
.who.marque{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(20px,1vw + 15px,28px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.marque .up{flex:none;width:1.55em;height:1.36em;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.turn h2{margin:22px auto 0;max-width:15.5em;font-size:var(--fs-fort);font-weight:600;line-height:1;letter-spacing:-.046em;color:var(--ink)}
.turn h2 b{display:block;margin-top:.06em;font-weight:600;color:var(--red)}
.turn .txt{margin:30px auto 0;max-width:44ch;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5;letter-spacing:var(--ls-lead);text-wrap:pretty}

/* ==========================================================================================
   4. Les étapes : la route, les perles, les photos en verre
   ========================================================================================== */
.steps{position:relative;z-index:2;padding:clamp(24px,3vw,56px) 0 0;overflow-x:clip}
.route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.route .base{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1.5}
.route .ink{fill:none;stroke:url(#g-route);stroke:var(--red);stroke-width:2;stroke-linecap:round}
.route .halo{fill:rgba(var(--red-rgb),.18)}
.route .dot{fill:var(--red)}
.route .coeur{fill:#fff}
.mile{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 9px;border-radius:var(--r-pill);pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),rgba(10,10,12,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.1),0 12px 26px -12px rgba(0,0,0,.85);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.mile .pt{flex:none;width:12px;height:12px;border-radius:50%;background:#1d1e22;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34);
  transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.mile .lb{white-space:nowrap;font-size:clamp(15px,.25vw + 14px,17px);font-weight:600;letter-spacing:-.012em;line-height:1.2;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .5s var(--ease)}
.mile.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(var(--red-rgb),.5),0 12px 26px -12px rgba(0,0,0,.85)}
.mile.on .pt{background:var(--red);box-shadow:0 0 0 4px rgba(var(--red-rgb),.18)}
.mile.on .lb{color:#fff}
.step{position:relative;z-index:1;padding:clamp(44px,5vw,72px) var(--gut) clamp(44px,5vw,72px) 72px;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.step .body{position:relative}
.step h3{margin:0;font-size:var(--fs-h3);font-weight:600;line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--ink);text-wrap:balance}
.step h3 b{font-weight:600;color:var(--red)}
.step p{margin:18px 0 0;max-width:36em;color:var(--ink-2);font-size:var(--fs-body);line-height:1.62}
/* Photo : carte de verre à bord lumineux, le visage bouge un peu dans son cadre, la carte s'incline vers la souris */
.pics{position:relative;display:flex;justify-content:flex-start;align-items:flex-start}
.pic{position:relative;margin:0;width:min(62vw,300px);aspect-ratio:4/5;border-radius:var(--r-card);background:#141518;
  box-shadow:var(--ombre-photo);transform:perspective(1100px) rotateX(calc(var(--rx,0deg) + var(--sx,0deg))) rotateY(var(--ry,0deg)) rotate(var(--rz,0deg));
  transition:transform .6s var(--ease);will-change:transform}
.pic .cadre{position:absolute;inset:0;border-radius:inherit;overflow:hidden;isolation:isolate}
.pic img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;transform:translate3d(0,var(--par,0px),0) scale(1.02);
  filter:saturate(.9) contrast(1.05) brightness(.97)}
.pic .cadre::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:radial-gradient(90% 70% at 25% 0%,rgba(255,255,255,.12),transparent 60%),linear-gradient(to top,rgba(8,9,10,.55),transparent 38%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4)}
.pic .cadre::before{content:"";position:absolute;top:-10%;bottom:-10%;left:-60%;width:40%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-14deg)}
.js .step.in .pic.charge .cadre::before{animation:reflet-photo 1.6s var(--ease-io) .35s both}
@keyframes reflet-photo{0%{opacity:0;left:-60%}20%{opacity:1}100%{opacity:0;left:130%}}
.pic figcaption{position:absolute;left:12px;bottom:12px;z-index:4;padding:7px 13px;color:#fff;font-size:13px;font-weight:600;letter-spacing:-.005em;line-height:1}
.pics .pic{width:min(40vw,210px)}
.pics .pic + .pic{margin-left:-12%;margin-top:14%;--rz:3deg;z-index:2}
.js .pic{opacity:0;transform:perspective(1100px) translateY(40px) rotateX(10deg) scale(.94);filter:blur(6px)}
.js .step.in .pic.charge{opacity:1;transform:perspective(1100px) rotateX(calc(var(--rx,0deg) + var(--sx,0deg))) rotateY(var(--ry,0deg)) rotate(var(--rz,0deg));filter:none;
  transition:opacity .8s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms),filter .8s var(--ease) var(--d,0ms)}
.js .step.in .pic.charge.suit{transition:transform .45s var(--ease)}
.js .pics .pic + .pic{--d:160ms}
/* Thomas : ses références et l'équipe de vente */
.cred{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.cred li{position:relative;padding-left:20px;color:var(--ink-2);font-size:15px;line-height:1.45}
.cred li::before{content:"";position:absolute;left:1px;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)}
.crew2{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.crew2 > div{padding:5px 15px 5px 5px;gap:10px}
.crew2 .av{width:30px;height:30px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.js .crew2 .av{opacity:0;transition:opacity .6s var(--ease)}.js .crew2 .av.charge{opacity:1}   /* c02 : en fondu, une fois prêtes */
.crew2 b{font-size:13.5px;font-weight:600;white-space:nowrap;letter-spacing:-.005em}
/* « Il te reste une chose à faire : coacher. » */
.last{position:relative;padding:clamp(110px,11vw,180px) var(--gut) clamp(90px,9vw,140px);text-align:center}
.last h3{margin:0 auto;max-width:13ch;font-size:var(--fs-final);font-weight:600;line-height:.98;letter-spacing:-.052em;color:var(--ink);text-wrap:balance}
.last h3 em{font-style:normal}
.last p{margin:28px auto 0;max-width:40ch;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5}

/* ==========================================================================================
   5. Fin, pied de page, barre épinglée, fenêtre d'inscription, lecteur
   ========================================================================================== */
.final{position:relative;padding:var(--section-y) var(--gut) calc(var(--section-y) * .9);text-align:center;isolation:isolate;overflow:clip}
.final-fond{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 100%,rgba(72,7,15,.75),rgba(48,5,12,.4) 40%,transparent 76%)}
.final h2{margin:0 auto;max-width:16ch;font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-titre);letter-spacing:var(--ls-titre)}
.final h2 em{font-style:normal;color:var(--red)}
.final .txt{margin:24px auto 0;max-width:46ch;color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5}
.final .cta{max-width:440px;margin:36px auto 0;display:flex}
.equipe-fin{display:inline-flex;align-items:center;gap:16px;margin:34px auto 0;padding:9px 22px 9px 10px;border-radius:var(--r-pill);text-align:left}
.equipe-fin .avs{display:flex;position:relative;z-index:3}
.equipe-fin .av{width:40px;height:40px;margin-left:-10px;box-shadow:0 0 0 2px #121316,0 0 0 2.5px rgba(255,255,255,.14)}
.equipe-fin .av:first-child{margin-left:0}
.equipe-fin p{position:relative;z-index:3;margin:0;font-size:13.5px;line-height:1.35;color:var(--ink-3)}
.equipe-fin p b{display:block;color:var(--ink);font-weight:600;font-size:14.5px}
.foot{padding:56px var(--gut) 120px;color:var(--ink-3);font-size:12px;line-height:1.6;text-align:center;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--line-2),transparent) 1}
.foot nav{display:flex;justify-content:center;gap:22px;margin-bottom:12px}
.foot nav a{transition:color var(--d-2) var(--ease)}
.foot nav a:hover{color:var(--ink)}
.foot p{max-width:70ch;margin:0 auto}

/* Barre épinglée : une capsule de verre en haut de l'écran (le bouton y reste à portée) */
.dock{position:fixed;top:12px;left:12px;right:70px;z-index:95;transform:translateY(-150%);transition:transform .45s var(--ease);pointer-events:none}
.dock.on{transform:none}
.dock-verre{pointer-events:auto;padding:5px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(12,12,14,.5);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 16px 36px -14px rgba(0,0,0,.8)}
.dock .cta{min-height:48px;font-size:15.5px;padding:0 20px 0 5px;gap:10px}
.dock .pr-ico{width:38px;height:38px}

/* Fenêtre d'inscription : une feuille de verre sombre */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;background:rgba(0,0,0,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal[hidden]{display:none}
.sheet{position:relative;width:100%;max-width:500px;padding:32px 28px calc(30px + env(safe-area-inset-bottom,0px));border-radius:var(--r-card) var(--r-card) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 40%),rgba(16,17,20,.92);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.08),0 -30px 80px -20px rgba(0,0,0,.8);animation:monte .45s var(--ease) both}
@keyframes monte{from{transform:translateY(100%)}}
.sheet h3{margin:0 40px 10px 0;font-size:23px;font-weight:600;letter-spacing:-.03em;line-height:1.18}
.sheet p{margin:0 0 22px;color:var(--ink-2);font-size:15px;line-height:1.5}
.x{position:absolute;top:16px;right:14px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;color:var(--ink-2);
  background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07)}
.step-m[hidden]{display:none}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.yn button{min-height:54px;border-radius:var(--r-pill);border:0;color:var(--ink);font-size:16px;font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.1)}
.yn .yes{color:#0b0b0c;background:linear-gradient(180deg,#fff,#e6e3e1);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 8px 20px -8px rgba(0,0,0,.7)}
.fld{display:grid;gap:4px;margin-bottom:18px}
.fld label{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.fld input{width:100%;min-height:46px;padding:0 2px;border:0;border-bottom:1px solid var(--line-3);border-radius:0;background:transparent;color:var(--ink);font-family:inherit;font-size:17px;
  transition:border-color var(--d-2) var(--ease)}
.fld input::placeholder{color:var(--ink-4)}
.fld input:focus{outline:none;border-bottom-color:var(--red)}
.sheet form .cta{margin-top:10px;min-height:56px;padding:0 22px}
.note{margin:14px 0 0;text-align:center;color:var(--ink-3);font-size:12px}
.ghost{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:var(--r-pill);color:var(--ink);font-size:15px;font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.1)}
.player{position:fixed;inset:0;z-index:130;background:rgba(0,0,0,.9);display:grid;place-items:center;padding:16px}
.player[hidden]{display:none}
.player iframe{width:100%;max-width:960px;aspect-ratio:16/9;border:0;border-radius:var(--r-card);box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.player .x{top:20px;right:20px;width:42px;height:42px;color:#fff}

/* ==========================================================================================
   6. La suite de la page (résultats clients, messages) au nouveau thème — le contenu ne change pas
   ========================================================================================== */
.uptv,.uptz{--bg-0:#08090a;--bg-1:#0d0e10;--border:var(--line);--border-strong:var(--line-2);--r-lg:20px;--ink-1:var(--ink);--ink-2:rgba(247,244,242,.74);
  --ink-3:rgba(247,244,242,.56);--maxw:1240px;--accent:var(--red);--accent-2:var(--red);
  --font-mono:var(--font);--font-serif:var(--font);--font-display:var(--font);--font-body:var(--font);background:var(--bg)!important;font-family:var(--font)}
.uptv [class],.uptz [class]{box-shadow:none}
.uptv .section,.uptz .section{padding:0 0 var(--section-y)}
.uptv .container,.uptz .container{max-width:1240px;padding:0 var(--gut)}
.uptv .eyebrow,.uptz .eyebrow{font-family:var(--font);font-weight:500;letter-spacing:.01em;font-size:13px;text-transform:none;padding:0;border:0;background:none;color:var(--ink-3);gap:10px}
.uptv .eyebrow .dot,.uptz .eyebrow .dot{width:6px;height:6px;background:var(--red);box-shadow:0 0 0 3px rgba(var(--red-rgb),.14)!important}
.uptv .h-section,.uptz .h-section{font-family:var(--font);font-weight:600;letter-spacing:-.04em;line-height:1.02;font-size:var(--fs-h2)}
.uptv .serif-em,.uptz .serif-em{font-family:var(--font);font-style:normal;font-weight:600}
.uptv .accent-text,.uptz .accent-text{color:var(--red)!important;-webkit-text-fill-color:currentColor;background:none}
.uptv .lead,.uptz .lead{font-family:var(--font);color:var(--ink-2);font-size:var(--fs-lead);line-height:1.5}
.uptv .cards-grid{display:grid!important;grid-template-columns:1fr;gap:16px;max-width:1240px;margin-inline:auto}
.uptv .cards-grid .case-card,.uptv .cards-grid .case-card:nth-child(3),.uptv .cards-grid .case-card:nth-child(4),.uptv .cards-grid .case-card:nth-child(5){grid-column:auto!important}
.uptv .case-card{position:relative;display:flex;flex-direction:column;padding:8px;border:0!important;border-radius:var(--r-card);overflow:hidden;
  background:var(--verre-fond);box-shadow:var(--arete),inset 0 0 0 1px rgba(255,255,255,.07),var(--ombre-verre)!important;
  transition:transform .5s var(--ease)}
.uptv .case-card:hover{transform:translateY(-3px)}
.uptv .case-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;background:var(--verre-lisere);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.uptv .case-thumb{aspect-ratio:2/1;border-radius:var(--r-sm);overflow:hidden;border:0}
.uptv .case-img{filter:saturate(.95) contrast(1.04);object-position:center 42%;transform:scale(1.16)}
.uptv .case-thumb::after{background:linear-gradient(180deg,transparent 50%,rgba(8,9,10,.6) 100%)}
.uptv .case-tag{top:10px;left:10px;padding:6px 11px;border:0;border-radius:var(--r-pill);font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(12,12,14,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.1)!important}
.uptv .case-tag .dot{box-shadow:none!important}
.uptv .case-play{width:56px;height:56px;border:0;color:#0b0b0c;background:linear-gradient(180deg,#fff,#e3e0de);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 10px 26px -8px rgba(0,0,0,.7)!important}
.uptv .case-meta{display:flex;flex-direction:column;gap:0;padding:16px 12px 12px;text-align:left}
.uptv .case-result{order:1;font-family:var(--font);font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.25;color:var(--ink);text-transform:none;min-height:2.5em;display:block;margin:0}
.uptv .case-result .n{color:var(--red);font-weight:650;font-variant-numeric:tabular-nums}
.uptv .case-name{order:2;font-family:var(--font);font-size:14.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;margin:8px 0 0}
.uptv .case-niche{order:3;font-family:var(--font);font-size:13px;color:var(--ink-3);margin:2px 0 0}
.uptv .tmz-teaser{border:0;border-radius:var(--r-card);background:var(--bg-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.07)!important}
.uptv .tmz-teaser-fade{background:linear-gradient(180deg,rgba(8,9,10,.05) 0%,rgba(8,9,10,.2) 34%,rgba(8,9,10,.72) 62%,rgba(8,9,10,.96) 86%)}
.uptv .tmz-teaser-btn{min-height:56px;padding:0 26px;border:0;border-radius:var(--r-pill);font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:-.01em;color:#0b0b0c;
  background:linear-gradient(180deg,#fff,#e3e0de);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 10px 26px -8px rgba(0,0,0,.7)!important}
.uptv .tmz-teaser-btn:hover{transform:translateY(-1px)}
.uptv .tmz-teaser-count{font-family:var(--font);font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-3)}
.uptz .pv-block{position:relative;border:0;border-radius:var(--r-card);background:var(--verre-fond);box-shadow:var(--arete),inset 0 0 0 1px rgba(255,255,255,.07),var(--ombre-verre)!important}
.uptz .pv-result{font-family:var(--font);font-weight:600;letter-spacing:-.025em;color:var(--red)}
.uptz .pv-name{font-family:var(--font);font-weight:600;color:var(--ink)}
.uptz .pv-niche,.uptz .pv-pitch{font-family:var(--font)}
.uptz .pv-pitch{color:var(--ink-2)}
.uptz .pv-avatar{box-shadow:0 0 0 2px #121316,0 0 0 3px rgba(255,255,255,.14)!important}
.uptz .shot,.uptz .stack-shot{border-radius:var(--r-sm);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)!important}
.uptz .pv-more-btn{font-family:var(--font);font-weight:600;font-size:13px;letter-spacing:.01em;text-transform:none;border:0;border-radius:var(--r-pill);color:var(--ink);padding:12px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.1)!important}
.uptz .wall-note{font-family:var(--font);color:var(--ink-3)}
@media (min-width:760px){.uptv .cards-grid{grid-template-columns:repeat(3,1fr)!important;gap:18px}.uptv .case-result{font-size:22px}}

/* ==========================================================================================
   7. Ordinateur (≥ 900 px)
   ========================================================================================== */
@media (min-width:900px){
  .nav{padding-top:18px}
  .dock{left:50%;right:auto;top:16px;width:auto;transform:translate(-50%,-160%)}
  .dock.on{transform:translate(-50%,0)}
  .dock .cta{width:auto;padding-right:24px}
  .hero{padding-bottom:30px}
  .h1 .l3{display:block}
  .hero .sub{max-width:36ch}
  .step{grid-template-columns:minmax(0,1fr) 210px minmax(0,1fr);align-items:center;gap:0;max-width:1240px;margin:0 auto;padding:clamp(64px,6vw,96px) var(--gut)}
  .step > *{grid-row:1}
  .step > :first-child{grid-column:1}
  .step > .body{grid-column:3}
  .step.r > :first-child{grid-column:3}
  .step.r > .body{grid-column:1}
  .step.l > :first-child{justify-self:end}
  .step.r > :first-child{justify-self:start}
  .step h3{max-width:13em}
  .pic{width:min(30vw,400px)}
  .pics .pic{width:min(24vw,320px)}
  .pics .pic:only-child{width:min(30vw,400px)}
  .pics{align-items:flex-start}
  .step.r .pics{justify-content:flex-start}
  .step.l .pics{justify-content:flex-end}
  .pics .pic + .pic{margin-left:-16%;margin-top:16%}
}
@media (min-width:1280px){
  .step{grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr)}
}
/* Téléphone : la route à gauche, la photo au-dessus du texte */
@media (max-width:899px){
  .surtitre{display:block;max-width:30em;font-size:13px;line-height:1.45;margin-bottom:18px;color:var(--ink-2)}
  .surtitre::before,.surtitre::after{display:none}
  .step{padding-left:68px}
  .step .body{padding-top:62px}
  .step.r .pics,.step.r > figure{margin-left:auto}
  .step .pic{width:min(62vw,280px)}
  .old .model{font-size:16.5px}
  .equipe{flex-direction:column;gap:10px;padding:14px 18px 14px;border-radius:var(--r-card)}
  .equipe .team{padding-left:10px}
  .equipe .av{width:36px;height:36px;margin-left:-9px}
  .equipe .tiny{text-align:center}
  .equipe .tiny b{display:inline}
  .step .pics .pic{width:58%}
  .step .pics .pic:only-child{width:min(62vw,280px)}
  .step .pics{width:100%}
  .pics .pic + .pic{margin-left:-16%;margin-top:16%}
  .equipe-fin{flex-direction:column;border-radius:var(--r-card);text-align:center;padding:14px 18px}
}
@media (max-width:380px){
  :root{--fs-hero:38px}
  .equipe .av{width:32px;height:32px;margin-left:-9px}
}

/* ==========================================================================================
   8. Mouvement réduit : tout est posé à sa place
   ========================================================================================== */
/* c02 : au téléphone, les photos arrivent sans flou ni bascule (le flou d'un grand calque saccade sur mobile) : un fondu qui
   monte de 18 px, plus court, quand l'image est prête */
@media (hover:none),(pointer:coarse){.js .pic{filter:none;transform:translateY(18px) scale(.98)}
  .js .step.in .pic.charge{transition:opacity .6s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .pic,.js .h1 .mot,.js .hero .entre{opacity:1!important;transform:none!important;filter:none!important}
  .scrub .w{opacity:1;animation:none}.route{display:none}.ray{animation:none;background-size:100% .07em}
  .js .brille{animation:none;-webkit-text-fill-color:var(--red);background:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================================
   Correctif 03 (retour n°57 de Steeve, 01/10)
   ========================================================================================== */
/* 57.1 (« pourquoi sur téléphone j'ai une aussi grosse marge en haut ? ») : au téléphone, le vide au-dessus du sur-titre gardait la
   place du bouton WhatsApp, retiré, et le premier écran était centré dans toute la hauteur de l'écran (encore plus de vide sur un
   grand iPhone). Le haut commence maintenant à 36-56 px du bord, sans trou en dessous : la suite de la page vient juste après. */
@media (max-width:899px){
  .hero{min-height:0;padding-top:clamp(36px,6svh,56px)}
  .hero-contenu{align-self:start}
}
/* 57.2 : mesuré sur la page en ligne : le conteneur de page de systeme.io (.lbPmja : la police par défaut de la page) pose Montserrat,
   que nos titres et nos textes héritaient (seuls les boutons, qui ont leur propre police, étaient en Geist ; les cartes de résultats
   étaient en Inter Tight, par un ancien style de l'en-tête). La racine de la landing et nos éléments prennent la police du thème, par
   sa variable : rien hors de #upt-landing n'est touché (pop-up et boutons natifs compris) et la section plateforme garde la sienne. */
#upt-landing,#upt-landing :is(h1,h2,h3,h4,h5,h6,p,ul,ol,li,blockquote,figcaption,a,button,span,b,strong,em,small,label){font-family:var(--font)}
/* 57.4 (« à partir de là où il y a écrit l'adresse, autour, il y a un filtre noir avec une faible opacité ») : vérifié dans Safari
   d'iOS 26.4 (simulateur) : Safari tire de notre calque de grain FIXE plein écran un aplat sombre sous sa barre d'adresse (bord net,
   luminosité 16 → 9). Au téléphone et sur tablette, le grain n'est plus fixe : il défile avec la page (même texture, même opacité),
   et le bas de l'écran retrouve le fondu normal de Safari. Ordinateur inchangé. */
@media (hover:none),(pointer:coarse){.upt-page::after{position:absolute}}

/* ==========================================================================================
   Correctif 04 (retour n°58 de Steeve, 01/10 ; vu sur iPhone dans le navigateur intégré d'Instagram)
   ========================================================================================== */
/* 58.1 : le haut de page entre de lui-même, en CSS, dès que la page s'affiche : il n'attend plus les scripts, chargés en retard dans
   Instagram. Mêmes mouvements et mêmes délais que l'entrée validée : les mots du titre un par un (découpés dans le bloc « Code
   HTML »), puis le sur-titre, le sous-titre, le trait sous « tous rémunérés… », le bouton, la pastille de l'équipe et ses visages,
   le reflet sur le chiffre. */
@keyframes upt-mot-o{from{opacity:0;filter:blur(10px)}}
@keyframes upt-mot-t{from{transform:translateY(.38em)}}
@keyframes upt-entre-o{from{opacity:0;filter:blur(6px)}}
@keyframes upt-entre-t{from{transform:translateY(16px)}}
@keyframes upt-souligne{from{transform:scaleX(0)}}
.hero .h1 .mot{display:inline-block;--dm:calc(var(--k,0) * 55ms + 180ms);
  animation:upt-mot-o .9s var(--ease) var(--dm) backwards,upt-mot-t 1.1s var(--ease) var(--dm) backwards}
.hero .h1 .brille.mot{background:linear-gradient(100deg,var(--red) 0 40%,#ffc9cf 47.5%,#fff1f2 50%,#ffc9cf 52.5%,var(--red) 60% 100%) 100% 0/300% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:.04em .02em;margin:-.04em -.02em;
  animation:upt-mot-o .9s var(--ease) var(--dm) backwards,upt-mot-t 1.1s var(--ease) var(--dm) backwards,balaye 1.7s var(--ease-io) 1.3s both}
.hero .surtitre,.hero .sub,.hero .rem,.hero .cta,.hero .equipe,.hero .cue{
  animation:upt-entre-o .9s var(--ease) var(--de,0ms) backwards,upt-entre-t 1s var(--ease) var(--de,0ms) backwards}
.hero .surtitre{--de:100ms}.hero .sub{--de:620ms}.hero .rem{--de:740ms}.hero .cta{--de:860ms}.hero .equipe{--de:1000ms}.hero .cue{--de:1300ms}
.hero .rem span::after{animation:upt-souligne 1.1s var(--ease) 1.35s backwards}
.hero .rem span::before{animation:etincelle 1.1s var(--ease) 1.35s both}
.hero .equipe .av{animation:popin .7s var(--ease) calc(1.15s + var(--i,0) * 70ms) backwards}   /* avec le script : chacun attend encore son image */
/* l'ancienne entrée par script ne touche plus le haut de page (elle le cachait puis le rejouait quand le script arrivait) */
.js .hero .h1 .mot,.js .hero .entre{opacity:1;transform:none;filter:none}
.js .hero .rem span::after{transform:none}
/* 58.1 (suite) : au téléphone, le bloc « Les agences classiques… », qui pointe en bas du premier écran, n'apparaît qu'après l'entrée
   du haut (1,5 s), puis se découvre au défilement ; jamais avant le haut. L'ordinateur, où il est sous la ligne de flottaison, ne
   change pas. */
@keyframes upt-apres{from{opacity:0}}
@keyframes upt-vue{from{opacity:0;transform:translateY(56px)}}
@media (max-width:899px){
  .hero ~ .old{animation:upt-apres .7s var(--ease) 1.5s backwards}
  @supports (animation-timeline: view()){
    .hero ~ .old .ailleurs{animation:upt-vue linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
/* 58.2 : au téléphone, la lueur rouge du haut se fond dans le noir au bas du premier écran, sous la pastille de l'équipe, et coule
   dans le bloc suivant (depuis le c03, le premier écran est moins haut et le fondu tombait à mi-hauteur). */
@media (max-width:899px){
  .hero{overflow:visible;overflow-x:clip}
  .hero > .hero-fond{bottom:-220px;-webkit-mask:linear-gradient(#000 52%,transparent 100%);mask:linear-gradient(#000 52%,transparent 100%)}
  .hero > .hero-fond .lum{top:-18%;height:104%}
}
@media (prefers-reduced-motion:reduce){
  .hero .h1 .mot,.hero .surtitre,.hero .sub,.hero .rem,.hero .cta,.hero .equipe,.hero .cue,.hero .equipe .av,.hero .rem span::after,
  .hero .rem span::before,.hero ~ .old,.hero ~ .old .ailleurs{animation:none!important}
  .hero .h1 .brille.mot{-webkit-text-fill-color:var(--red);background:none}
}