/* ===========================================================
   SYSTEM BY MOHA — landing (ENC build)
   Cormorant Garamond + DM Sans · amber/copper on near-black
   =========================================================== */

:root{
  --amber:#D4A574;
  --copper:#C9856B;
  --ivory:#EDE7DD;
  --bg:#0A0A0F;
  --bg-2:#0B0B10;
  --bg-3:#0c0c11;
  --panel:#16161C;
  --cream:#F5F1EA;
  --ink:#1A1714;
  --brown:#B07B4E;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --maxw:1280px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto} /* NB: 'smooth' casse le pin/scrub ScrollTrigger — smooth géré en JS */
body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{display:block}
a{color:inherit}

/* ---------- shared atoms ---------- */
.diamond{
  width:30px;height:30px;flex:none;transform:rotate(45deg);
  border:1.5px solid var(--amber);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
}
.diamond__core{
  width:6px;height:6px;transform:rotate(-45deg);
  border:1.5px solid var(--amber);border-radius:1px;
}
.diamond--sm{width:22px;height:22px;border-width:1.3px;border-radius:3px}

.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  border-radius:999px;transition:all .3s cubic-bezier(.2,.7,.2,1);
}
.btn--amber{
  padding:16px 30px;border:1px solid var(--amber);color:var(--amber);
  background:rgba(212,165,116,0.05);backdrop-filter:blur(4px);
  box-shadow:0 0 34px -8px rgba(212,165,116,0.45);
}
.btn--amber:hover{
  background:var(--amber);color:#0A0A0F;
  box-shadow:0 0 46px -2px rgba(212,165,116,0.6);transform:translateY(-2px);
}
.link-underline{
  color:rgba(237,231,221,0.78);font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(237,231,221,0.3);padding-bottom:3px;transition:all .25s;
}
.link-underline:hover{color:var(--amber);border-color:var(--amber)}

.pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;
  border:1px solid rgba(212,165,116,0.32);border-radius:999px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(237,231,221,0.74);
}
.pill__dot{
  width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 10px rgba(212,165,116,0.8);flex:none;
}
.meta{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(237,231,221,0.42)}
.meta__dot{width:3px;height:3px;border-radius:50%;background:var(--amber)}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;height:84px;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,4vw,64px);
  background:linear-gradient(180deg,rgba(10,10,15,0.85),rgba(10,10,15,0));
  backdrop-filter:blur(8px);
  transition:background .3s,height .3s,box-shadow .3s;
}
.nav.is-scrolled{
  height:68px;background:rgba(8,8,12,0.9);
  box-shadow:0 1px 0 rgba(255,255,255,0.05);
}
.nav__brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav__word{font-size:14px;font-weight:600;letter-spacing:.32em;color:var(--ivory)}
.nav__links{position:relative;display:flex;align-items:center;gap:42px;font-size:14.5px}
.nav__links a{
  position:relative;color:rgba(237,231,221,0.62);text-decoration:none;
  padding-bottom:6px;transition:color .25s;
}
.nav__links a:hover{color:var(--ivory)}
.nav__links a.is-active{color:var(--ivory)}
/* indicateur actif : ligne ambre qui glisse sous l'item de la section courante
   (position + largeur posées en JS via getBoundingClientRect, recalcul au resize) */
.nav__indicator{
  position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--amber);border-radius:2px;
  box-shadow:0 0 10px rgba(212,165,116,0.55);
  opacity:0;pointer-events:none;transform:translateX(0);
}
.nav__indicator--ready{
  transition:transform .4s cubic-bezier(.2,.7,.2,1),
             width .4s cubic-bezier(.2,.7,.2,1),
             opacity .3s ease;
}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__burger span{width:22px;height:1.6px;background:rgba(237,231,221,0.8)}

/* ===========================================================
   HERO
   =========================================================== */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;
  padding:120px clamp(20px,4vw,64px) 60px}
.hero__halo{position:absolute;border-radius:50%;transform:translate(-50%,-50%);
  mix-blend-mode:screen;pointer-events:none;z-index:0}
.hero__halo--1{left:64%;top:47%;width:min(1080px,90vw);height:min(1080px,90vw);
  background:radial-gradient(circle,rgba(212,165,116,0.34) 0%,rgba(201,133,107,0.16) 30%,rgba(212,165,116,0) 60%);
  filter:blur(8px);animation:haloPulse 8s ease-in-out infinite}
.hero__halo--2{left:62%;top:46%;width:min(520px,52vw);height:min(520px,52vw);
  background:radial-gradient(circle,rgba(212,165,116,0.22) 0%,rgba(212,165,116,0) 65%)}
.hero__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;z-index:6}
.hero__vignette{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 62% 44%,rgba(0,0,0,0) 38%,rgba(0,0,0,0.6) 100%)}

.hero__inner{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:32px;align-items:center}
.hero__text{max-width:600px}
.hero__title{
  font-family:var(--serif);color:var(--ivory);font-weight:500;
  font-size:clamp(34px,4.4vw,58px);line-height:1.05;letter-spacing:-.005em;margin:22px 0 26px;
}
.hero__accent{
  display:inline-block;font-weight:700;font-size:clamp(62px,8.4vw,106px);line-height:.9;
  color:var(--amber);margin-top:8px;text-shadow:0 0 46px rgba(212,165,116,0.3);
}
/* climax « systèmes. » : wrapper qui porte le halo (mobile) ; transparent/identique sur desktop */
.hero__accent-wrap{display:inline-block;position:relative}
.hero__glow{display:none}
.hero__lead{font-size:clamp(15px,1.4vw,18px);line-height:1.62;color:rgba(237,231,221,0.6);
  max-width:476px;margin:0 0 38px}
.hero__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:30px}
.hero__stage{position:relative;justify-self:center;width:100%}

/* device stage — sized at design scale, scaled fluidly */
.stage{position:relative;width:760px;height:640px;margin:0 auto;
  transform-style:preserve-3d;transform-origin:center center;
  --tiltY:-7deg;--tiltX:2deg;
  transform:perspective(1700px) rotateY(var(--tiltY)) rotateX(var(--tiltX));
  animation:riseIn 1.7s cubic-bezier(.2,.7,.2,1) forwards;
}
/* fluid down-scale of the whole cluster on narrower viewports */
@media (max-width:1180px){.stage{transform:perspective(1700px) rotateY(var(--tiltY)) rotateX(var(--tiltX)) scale(.82)}}
@media (max-width:1040px){.stage{transform:perspective(1700px) rotateY(var(--tiltY)) rotateX(var(--tiltX)) scale(.7)}}

/* LAPTOP */
.laptop{position:absolute;left:0;top:120px;width:560px;z-index:2}
.laptop__lid{position:relative;width:560px;height:350px;padding:12px;border-radius:16px;
  background:linear-gradient(150deg,#26262d,#15151a);
  box-shadow:0 50px 90px -30px rgba(0,0,0,0.85),inset 0 0 0 1px rgba(255,255,255,0.05)}
.laptop__screen{position:relative;width:100%;height:100%;border-radius:7px;overflow:hidden;
  background:linear-gradient(140deg,#101015 0%,#0b0b0f 55%,#0d0d12 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6),inset 0 2px 18px rgba(0,0,0,0.7)}
.laptop__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block;border-radius:7px}
.laptop__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 32%,rgba(255,255,255,0.05) 46%,transparent 58%)}
.laptop__topglow{position:absolute;top:0;left:0;right:0;height:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0.035),transparent)}
.laptop__brand{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;opacity:.32}
.laptop__brand span{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(212,165,116,0.7)}
.laptop__brand-d{width:12px;height:12px;transform:rotate(45deg);border:1px solid rgba(212,165,116,0.6);border-radius:2px}
.laptop__cam{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#050507}
.laptop__base{position:relative;width:625px;left:-32px;height:14px;margin-top:-1px;border-radius:3px 3px 11px 11px;
  background:linear-gradient(180deg,#2c2c33 0%,#191920 55%,#0c0c10 100%);
  box-shadow:0 34px 50px -22px rgba(0,0,0,0.85)}
.laptop__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:6px;
  background:linear-gradient(180deg,#0b0b0f,#15151a);border-radius:0 0 7px 7px}

/* PHONE */
.phone{position:absolute;left:396px;top:150px;width:264px;height:548px;z-index:4}
.phone__frame{position:relative;width:100%;height:100%;padding:10px;border-radius:42px;
  background:linear-gradient(155deg,#1c1c22,#0a0a0d);
  box-shadow:0 60px 100px -30px rgba(0,0,0,0.9),inset 0 0 0 1px rgba(212,165,116,0.1)}
.phone__frame>*:not(.phone__island){position:relative}
.phone__frame{display:flex;flex-direction:column}
.phone__island{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:78px;height:23px;background:#000;border-radius:13px;z-index:20}
.phone__statusbar{display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px 5px;font-size:10px;font-weight:600;background:#0E0E12;
  border-radius:32px 32px 0 0}
.phone__status-icons{display:flex;align-items:center;gap:5px}
.phone__body{flex:1;overflow:hidden;padding:4px 13px 0;background:#0E0E12;color:var(--ivory)}
.phone__tabbar{display:flex;align-items:center;justify-content:space-around;
  padding:8px 8px 14px;border-top:1px solid rgba(255,255,255,0.05);
  background:rgba(14,14,18,0.95);border-radius:0 0 32px 32px}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(237,231,221,0.38)}
.tab span{font-size:7.5px}
.tab.is-active{color:var(--amber)}

/* ERP inner */
.erp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.erp__live{display:inline-flex;align-items:center;gap:5px;margin-bottom:5px;
  font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,231,221,0.55)}
.erp__live-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 7px rgba(212,165,116,0.9)}
.erp__title{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1}
.erp__date{font-size:9px;color:rgba(237,231,221,0.45);margin-top:2px}
.erp__head-icons{display:flex;align-items:center;gap:7px}
.erp__circle{width:24px;height:24px;border-radius:50%;border:1px solid rgba(237,231,221,0.14);
  display:flex;align-items:center;justify-content:center}
.erp__avatar{width:24px;height:24px;border-radius:50%;font-size:10px;font-weight:600;color:#0A0A0F;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--amber),var(--copper))}
.erp__kpi{display:flex;align-items:flex-end;justify-content:space-between;padding:12px 13px;margin-bottom:8px;
  border-radius:16px;border:1px solid rgba(212,165,116,0.16);
  background:linear-gradient(150deg,rgba(212,165,116,0.1),rgba(20,20,26,0.2))}
.erp__kpi-label{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,231,221,0.5)}
.erp__kpi-val{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.1;color:var(--ivory)}
.erp__kpi-delta{font-size:9.5px;font-weight:600;color:var(--amber)}
.erp__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.erp__cell{background:var(--panel);border:1px solid rgba(255,255,255,0.04);border-radius:11px;padding:8px 9px}
.erp__cell-label{font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,231,221,0.46)}
.erp__cell-row{display:flex;align-items:baseline;gap:5px}
.erp__cell-num{font-size:16px;font-weight:600}
.erp__cell-up{font-size:8.5px;color:var(--amber)}
.erp__chart{margin-bottom:10px}
.erp__chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;
  font-size:9px;color:rgba(237,231,221,0.7)}
.erp__badge{font-size:7.5px;font-weight:600;color:var(--amber);background:rgba(212,165,116,0.12);padding:2px 6px;border-radius:6px}
.erp__bars{display:flex;align-items:flex-end;gap:6px;height:50px}
.erp__bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.erp__bar i{width:100%;height:var(--h);border-radius:4px 4px 2px 2px;transform-origin:bottom;
  background:linear-gradient(180deg,var(--amber),rgba(201,133,107,0.35));
  animation:barGrow .9s ease var(--d) both}
.erp__bar span{font-size:7px;color:rgba(237,231,221,0.4)}
.erp__bar--peak i{background:linear-gradient(180deg,#E8C39A,var(--amber));box-shadow:0 0 14px rgba(212,165,116,0.5)}
.erp__bar--peak span{color:var(--amber)}
.erp__poses{margin-bottom:9px}
.erp__poses-title{font-size:9px;color:rgba(237,231,221,0.7);margin-bottom:6px}
.erp__pose{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.erp__pose-av{width:22px;height:22px;border-radius:50%;font-size:8.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.erp__pose-av--a{background:rgba(212,165,116,0.14);color:var(--amber)}
.erp__pose-av--b{background:rgba(201,133,107,0.16);color:var(--copper)}
.erp__pose-time{font-size:9.5px;font-weight:600;color:rgba(237,231,221,0.85);width:32px}
.erp__pose-name{font-size:9.5px;color:rgba(237,231,221,0.7)}
.erp__pose-tag{font-size:8.5px;color:rgba(237,231,221,0.4);margin-left:auto}
.erp__loyal{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;
  background:var(--panel);border:1px solid rgba(255,255,255,0.04)}
.erp__ring{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--amber) 0% 94%,rgba(255,255,255,0.08) 94% 100%)}
.erp__ring-in{width:29px;height:29px;border-radius:50%;background:var(--panel);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ivory)}
.erp__loyal-t{font-size:10px;font-weight:600;color:rgba(237,231,221,0.9)}
.erp__loyal-s{font-size:9px;color:rgba(237,231,221,0.5)}

/* FLOATING CARDS */
.floatcard{
  background:rgba(18,18,24,0.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(212,165,116,0.2);border-radius:16px;padding:13px 16px;
  box-shadow:0 24px 56px -18px rgba(0,0,0,0.75);
}
.floatcard--1{position:absolute;top:20px;left:540px;z-index:6;width:178px;animation:floatA 6s ease-in-out infinite}
.floatcard--2{position:absolute;top:500px;left:470px;z-index:6;display:flex;align-items:center;gap:14px;animation:floatB 7s ease-in-out infinite .8s}
.floatcard__head{display:flex;align-items:center;gap:7px;margin-bottom:8px;
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,231,221,0.6)}
.floatcard__dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px rgba(212,165,116,0.9)}
.floatcard__row{display:flex;align-items:baseline;gap:8px}
.floatcard__big{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--ivory);line-height:1;white-space:nowrap}
.floatcard__big--amber{color:var(--amber)}
.floatcard__up{font-size:11px;font-weight:600;color:var(--amber);white-space:nowrap}
.floatcard__label{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,231,221,0.6);margin-bottom:4px}
.floatcard__sub{font-size:9.5px;color:rgba(237,231,221,0.45)}
.floatcard__bar{margin-top:9px;width:148px;height:5px;border-radius:3px;background:rgba(255,255,255,0.08);overflow:hidden}
.floatcard__bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--copper),var(--amber))}

.peek{display:none}

/* ===========================================================
   SHARED SECTION SYSTEM
   =========================================================== */
.section{position:relative;overflow:hidden;padding:clamp(80px,12vw,150px) clamp(20px,6vw,120px) clamp(90px,13vw,170px)}
.section--syst{background:var(--bg);
  /* section resserrée : moins de vide haut/bas autour du fil (scopé syst, n'affecte pas les autres sections) */
  padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,104px)}
.section--syst .head{margin-bottom:48px}
.section--syst .video{margin-bottom:64px}
.section--demos{background:var(--bg-2);border-top:1px solid rgba(255,255,255,0.04)}
.section--cas{background:var(--bg);border-top:1px solid rgba(255,255,255,0.04)}

.head{position:relative;z-index:2;max-width:820px;margin:0 auto 72px;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:28px;
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber)}
.eyebrow--brown{color:var(--brown)}
.eyebrow__line{width:22px;height:1px;background:currentColor}
.h2{font-family:var(--serif);color:var(--ivory);font-weight:500;
  font-size:clamp(31px,4.4vw,62px);line-height:1.1;letter-spacing:-.01em;margin:0 0 26px}
.h2 em{font-style:italic;color:var(--amber)}
.h2--ink{color:var(--ink);font-weight:600}
.h2--ink em{color:var(--brown)}
.head__lead{font-size:clamp(15px,1.4vw,18px);line-height:1.62;color:rgba(237,231,221,0.6);max-width:560px;margin:0 auto}
.head__lead--ink{color:rgba(26,23,20,0.62);max-width:600px}
.center{text-align:center;position:relative;z-index:2}
.center--note{margin-top:60px}
.overline{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,231,221,0.35)}
.note{font-size:13px;color:rgba(237,231,221,0.4);font-style:italic}
.syst__glow{position:absolute;top:50px;left:50%;transform:translateX(-50%);width:1100px;max-width:90%;height:560px;
  background:radial-gradient(ellipse at center,rgba(212,165,116,0.09),transparent 70%);pointer-events:none}

/* video — explainer player (poster + bouton custom, lecture click-to-play avec son) */
.video{position:relative;max-width:1000px;margin:0 auto 116px}
.video__inner{position:relative;border-radius:18px;border:1px solid rgba(212,165,116,0.28);overflow:hidden;background:#000;
  box-shadow:0 50px 120px -45px rgba(0,0,0,0.9),0 0 70px -28px rgba(212,165,116,0.22);aspect-ratio:16/9}
.video__el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;border-radius:18px}
.video__cover{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer;
  background:transparent;border-radius:18px;overflow:hidden;display:block;-webkit-tap-highlight-color:transparent}
.video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video__scrim{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,10,15,0.10),rgba(10,10,15,0.50))}
.video__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none}
.video__play{width:88px;height:88px;border-radius:50%;border:1px solid var(--amber);
  background:rgba(212,165,116,0.07);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 50px -10px rgba(212,165,116,0.6);
  transition:transform .35s ease}
.video__cover:hover .video__play{transform:scale(1.06)}
.video__cover:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.video__tri{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:21px solid var(--amber);margin-left:6px}
.video__cap{font-family:var(--sans);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,231,221,0.62)}
.video.is-playing .video__cover{display:none}
@media (max-width:560px){.video__play{width:70px;height:70px}.video__tri{border-top-width:11px;border-bottom-width:11px;border-left-width:17px}}

/* timeline — organic thread (mobile-first vertical) */
.timeline{position:relative;max-width:720px;margin:0 auto}
.timeline__track{position:relative}
.thread{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.thread__path{fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(212,165,116,0.5));opacity:.92}
.thread__head{fill:var(--amber);opacity:0;will-change:transform;
  filter:drop-shadow(0 0 9px rgba(212,165,116,0.95)) drop-shadow(0 0 3px rgba(212,165,116,1))}
.lever{position:relative;padding:0 0 52px 100px;margin-left:var(--wave,0);z-index:1}
.lever:nth-of-type(1){--wave:6px}
.lever:nth-of-type(2){--wave:30px}
.lever:nth-of-type(3){--wave:50px}
.lever:nth-of-type(4){--wave:34px}
.lever:nth-of-type(5){--wave:10px}
.lever:nth-of-type(6){--wave:26px}
.lever--last{padding-bottom:0}
.lever__node{position:absolute;left:35px;top:14px;width:12px;height:12px;border-radius:50%;
  background:rgba(212,165,116,0.32);border:2px solid var(--bg);box-shadow:0 0 0 rgba(212,165,116,0);
  will-change:transform;transition:background .45s ease,box-shadow .45s ease,transform .45s ease}
.lever__node.is-lit{background:var(--amber);box-shadow:0 0 16px rgba(212,165,116,0.9);transform:scale(1.12)}
.lever__head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px}
.lever__num{font-family:var(--serif);font-size:38px;font-weight:700;color:var(--amber);line-height:1}
.lever__title{font-family:var(--serif);font-size:34px;font-weight:500;color:var(--ivory);margin:0}
.lever__txt{font-size:17px;line-height:1.55;color:rgba(237,231,221,0.58);max-width:470px;margin:0}

/* timeline — HORIZONTAL pinned frieze (desktop). Gated by .is-horizontal (added by JS only)
   so that without JS the section stays vertical and every levier is reachable. */
@media (min-width:981px){
  .section--syst:has(.timeline.is-horizontal){overflow:visible} /* let ScrollTrigger pin (no overflow:hidden ancestor) */
  .timeline.is-horizontal{max-width:none;margin:0;height:min(72vh,680px);overflow:hidden}
  .is-horizontal .timeline__track{display:flex;align-items:center;height:100%;width:max-content;
    padding:0 9vw;gap:64px;will-change:transform}
  .is-horizontal .lever{flex:0 0 270px;width:270px;padding:96px 0 0 0;margin:0;
    transform:translateY(var(--wy,0))}
  /* amplitude verticale élargie (adoucie d'un cran) : remplit le viewport sans zigzag trop marqué */
  .is-horizontal .lever:nth-of-type(1){--wy:-98px}
  .is-horizontal .lever:nth-of-type(2){--wy:74px}
  .is-horizontal .lever:nth-of-type(3){--wy:-82px}
  .is-horizontal .lever:nth-of-type(4){--wy:82px}
  .is-horizontal .lever:nth-of-type(5){--wy:-56px}
  .is-horizontal .lever:nth-of-type(6){--wy:70px}
  .is-horizontal .lever__node{left:6px;top:78px}
  .is-horizontal .lever__head{margin-bottom:10px}
  .is-horizontal .lever__num{font-size:34px}
  .is-horizontal .lever__title{font-size:30px}
  .is-horizontal .lever__txt{font-size:15.5px;max-width:250px}
}

/* demos */
.demos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1200px;margin:0 auto 70px}
.demo{cursor:pointer}
.demo__frame{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.07);
  background:#0e0e13;box-shadow:0 36px 80px -36px rgba(0,0,0,0.85);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.demo:hover .demo__frame{transform:translateY(-8px) rotateX(3deg);
  box-shadow:0 50px 100px -36px rgba(0,0,0,0.9),0 0 50px -20px rgba(212,165,116,0.3)}
.demo__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#16161c;border-bottom:1px solid rgba(255,255,255,0.05)}
.demo__bar span{width:9px;height:9px;border-radius:50%;background:#3a3a42}
.demo__bar i{margin-left:10px;flex:1;height:16px;border-radius:5px;background:rgba(255,255,255,0.04)}
.demo__site{position:relative;height:230px;padding:24px;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(ellipse at 70% 30%,rgba(212,165,116,0.12),transparent 60%),var(--bg-3)}
.demo__site-title{font-family:var(--serif);font-size:26px;color:var(--ivory);line-height:1.15;margin-bottom:12px}
.demo__site-title span{color:var(--amber)}
.demo__site-btn{width:120px;height:30px;border:1px solid var(--amber);border-radius:999px;
  display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--amber);margin-bottom:18px}
.demo__site-img{position:absolute;right:18px;bottom:18px;width:120px;height:140px;border-radius:10px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,0.04) 0 10px,rgba(255,255,255,0.015) 10px 20px);
  border:1px solid rgba(255,255,255,0.05)}
.demo__erp{height:230px;padding:20px;background:var(--bg-3)}
.demo__erp-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.demo__erp-label{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,231,221,0.5)}
.demo__erp-val{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--ivory);line-height:1.1}
.demo__erp-delta{font-size:11px;color:var(--amber)}
.demo__ring{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--amber) 0 94%,rgba(255,255,255,0.08) 94% 100%)}
.demo__ring-in{width:24px;height:24px;border-radius:50%;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--ivory)}
.demo__erp-bars{display:flex;align-items:flex-end;gap:8px;height:80px}
.demo__erp-bars i{flex:1;border-radius:4px;background:linear-gradient(180deg,var(--amber),rgba(201,133,107,0.3))}
.demo__erp-bars i.is-peak{background:linear-gradient(180deg,#E8C39A,var(--amber));box-shadow:0 0 12px rgba(212,165,116,0.5)}
.demo__caption{margin-top:18px}
.demo__name{font-family:var(--serif);font-size:22px;color:var(--ivory);margin-bottom:4px}
.demo__explore{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.demo__explore-dot{width:5px;height:5px;border-radius:50%;background:var(--amber)}

/* Site démo — tablette container-scroll (perspective sur le parent, rotateX/scale sur la tablette en JS) */
.tabscroll{position:relative;perspective:1000px;max-width:1080px;margin:0 auto 84px;padding:8px 0}
.tabscroll__label{text-align:center;margin-bottom:30px;will-change:transform}
.tabscroll__title{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(22px,3vw,36px);line-height:1.1;margin:14px 0 0}
.tablet{position:relative;width:100%;margin:0 auto;border-radius:30px;padding:14px;
  background:linear-gradient(150deg,#26262d,#15151a);
  box-shadow:0 60px 120px -45px rgba(0,0,0,0.92),0 0 70px -30px rgba(212,165,116,0.18),inset 0 0 0 1px rgba(255,255,255,0.05);
  transform-origin:center top;transform:rotateX(0deg) scale(1);will-change:transform}
.tablet__cam{position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:2;
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.16);
  box-shadow:0 0 0 2px rgba(0,0,0,0.4)}
.tablet__screen{position:relative;aspect-ratio:16/9;border-radius:17px;overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.6),inset 0 2px 22px rgba(0,0,0,0.7)}
.tablet__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:17px}

/* ERP démo — dashboard 1440×1024 mis à l'échelle pour remplir l'écran tablette, sans débordement */
.tabscroll--erp{margin-bottom:84px}
.tablet__screen--erp{aspect-ratio:1440/1024;background:#0A0A0F}
.erp-fit{position:absolute;inset:0;overflow:hidden;border-radius:17px}
/* la tablette et la scène ERP animent chacune leur propre transform : aucun conflit */
.erp-stage{transform-origin:top left;transform:scale(var(--erp-scale,0.72));will-change:transform}
.tabscroll__explore{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:24px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
@keyframes leoraDot{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

/* cas — before/after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1100px;margin:0 auto 90px}
.ba__col{border-radius:18px;padding:42px 40px}
.ba__col--before{background:#0e0e13;border:1px solid rgba(255,255,255,0.05)}
.ba__col--after{background:linear-gradient(150deg,rgba(212,165,116,0.12),rgba(201,133,107,0.04));
  border:1px solid rgba(212,165,116,0.28);box-shadow:0 0 60px -28px rgba(212,165,116,0.35)}
.ba__label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,231,221,0.4);margin-bottom:22px}
.ba__label--amber{color:var(--amber)}
.ba__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.ba__list li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.5}
.ba__col--before li{color:rgba(237,231,221,0.55)}
.ba__col--after li{color:var(--ivory)}
.ba__x{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(237,231,221,0.2);
  color:rgba(237,231,221,0.4);display:flex;align-items:center;justify-content:center;font-size:13px}
.ba__check{flex:none;width:22px;height:22px;border-radius:50%;background:var(--amber);color:#0A0A0F;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* chaîne de maillons — langage de la cartographie interne (maillons + connecteurs cuivre) */
.chain{display:flex;align-items:stretch;justify-content:center;flex-wrap:nowrap;
  max-width:1180px;margin:34px auto 0;position:relative;z-index:2}
.link{flex:1 1 0;min-width:0;
  background:linear-gradient(180deg,#1b1b24,#15151c);
  border:1px solid #2a2a38;border-radius:14px;
  padding:24px 20px 26px;display:flex;flex-direction:column;gap:9px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease,box-shadow .4s ease;
  will-change:transform}
.link:hover{transform:translateY(-6px);border-color:var(--amber);
  box-shadow:0 26px 54px -26px rgba(0,0,0,0.6),0 0 34px -16px rgba(212,165,116,0.4)}
.link__num{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--copper);line-height:1}
.link__title{font-family:var(--serif);font-size:clamp(1.18rem,1.5vw,1.5rem);font-weight:500;color:var(--ivory);line-height:1.12;margin:0}
.link__txt{font-size:0.84rem;line-height:1.5;color:rgba(237,231,221,0.55);margin:0}
.chain__conn{flex:0 0 46px;display:flex;align-items:center;justify-content:center;align-self:center;color:var(--copper)}
.chain__conn svg{width:46px;height:22px;overflow:visible;filter:drop-shadow(0 0 4px rgba(201,133,107,0.35))}

/* ===========================================================
   RÉSERVATION — ivoire
   =========================================================== */
/* ===== Réservation — carte bento dark (réf 21st.dev, DA ambre) + Cal.com ===== */
.section--book{background:var(--bg);color:var(--ivory);position:relative;overflow:hidden}
.section--book::before{content:"";position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:1000px;max-width:90%;height:520px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(212,165,116,0.10),transparent 70%)}
.bento{position:relative;z-index:1;max-width:980px;margin:0 auto 26px;display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(155deg,#16161D 0%,#0E0E13 100%);border:1px solid rgba(212,165,116,0.16);
  border-radius:28px;overflow:hidden;
  box-shadow:0 50px 120px -50px rgba(0,0,0,0.9),0 0 90px -45px rgba(212,165,116,0.18)}
.bento__left{padding:clamp(30px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.bento__left .eyebrow{margin-bottom:20px}
.bento__title{font-family:var(--serif);font-weight:500;color:var(--ivory);
  font-size:clamp(30px,3.4vw,46px);line-height:1.08;letter-spacing:-.01em;margin:0 0 16px}
.bento__title em{font-style:italic;color:var(--amber)}
.bento__lead{font-size:clamp(15px,1.3vw,17px);line-height:1.6;color:rgba(237,231,221,0.62);margin:0 0 30px;max-width:380px}
.bento__cta{display:inline-flex;align-items:center;gap:11px;align-self:flex-start;
  padding:15px 26px;border-radius:999px;border:1px solid var(--amber);
  background:rgba(212,165,116,0.08);color:var(--amber);font-family:var(--sans);font-size:15px;font-weight:600;
  cursor:pointer;transition:background .3s,color .3s,transform .3s;backdrop-filter:blur(6px)}
.bento__cta:hover{background:var(--amber);color:#0A0A0F;transform:translateY(-2px)}
.bento__cta svg{transition:transform .3s}
.bento__cta:hover svg{transform:translateX(4px)}
.bento__reassure{display:flex;align-items:center;gap:13px;margin-top:30px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(237,231,221,0.4)}
.bento__dot{width:3px;height:3px;border-radius:50%;background:var(--amber)}

/* carte calendrier */
.bento__cal{padding:clamp(26px,3vw,40px);background:rgba(255,255,255,0.014);border-left:1px solid rgba(212,165,116,0.12)}
.cal__label{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.cal__label-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.cal__month-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal__month{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ivory);text-transform:capitalize}
.cal__nav{width:32px;height:32px;border-radius:50%;border:1px solid rgba(237,231,221,0.16);background:transparent;
  color:rgba(237,231,221,0.7);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.cal__nav:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.cal__nav:disabled{opacity:.22;cursor:default}
.cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:8px}
.cal__dow span{text-align:center;font-size:10.5px;letter-spacing:.04em;color:rgba(237,231,221,0.34)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-family:var(--sans);
  color:rgba(237,231,221,0.78);border-radius:50%;border:1px solid transparent;background:transparent;cursor:pointer;
  padding:0;-webkit-appearance:none;appearance:none;line-height:1;
  transition:background .2s,color .2s,border-color .2s}
.cal__day:hover{background:rgba(212,165,116,0.16);color:var(--amber);border-color:rgba(212,165,116,0.45)}
.cal__day.is-today{border-color:var(--amber);color:var(--amber);font-weight:700}
.cal__day.is-past{color:rgba(237,231,221,0.18);pointer-events:none}
.cal__day.is-empty{pointer-events:none}
.cal__day.is-available{color:var(--amber);font-weight:600;background:rgba(212,165,116,0.08);border-color:rgba(212,165,116,0.32)}
.bento__scarce{position:relative;z-index:1;text-align:center;font-size:14px;color:var(--amber);font-weight:600;margin-top:8px}

/* ===========================================================
   PAGES LÉGALES (mentions-legales / confidentialite)
   =========================================================== */
.legal{position:relative;max-width:820px;margin:0 auto;padding:clamp(120px,16vw,180px) clamp(20px,6vw,40px) clamp(60px,9vw,100px)}
.legal__eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.legal__eyebrow::before{content:"";width:26px;height:1px;background:var(--amber);opacity:.6}
.legal h1{font-family:var(--serif);font-size:clamp(38px,6vw,62px);font-weight:600;line-height:1.04;letter-spacing:-.01em;margin:0 0 14px;color:var(--ivory)}
.legal__intro{font-size:16px;color:rgba(237,231,221,0.58);margin:0 0 12px;line-height:1.65}
.legal__updated{font-size:12px;letter-spacing:.04em;color:rgba(237,231,221,0.38);margin:0 0 48px}
.legal h2{font-family:var(--serif);font-size:clamp(24px,3.4vw,32px);font-weight:600;color:var(--ivory);margin:48px 0 14px;line-height:1.15}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--ivory);margin:26px 0 8px}
.legal p,.legal li{font-size:15.5px;line-height:1.75;color:rgba(237,231,221,0.72)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(212,165,116,0.35);transition:border-color .2s}
.legal a:hover{border-color:var(--amber)}
.legal strong{color:var(--ivory);font-weight:600}
.legal__placeholder{color:var(--copper);font-weight:600;background:rgba(201,133,107,0.1);padding:1px 7px;border-radius:5px}
.legal__divider{border:0;height:1px;background:rgba(255,255,255,0.07);margin:46px 0}
.legal__back{display:inline-flex;align-items:center;gap:9px;margin-top:40px;font-size:14px;color:rgba(237,231,221,0.7);text-decoration:none;transition:color .2s}
.legal__back:hover{color:var(--amber)}
.legal__card{background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:26px 28px;margin:0 0 18px}
.legal__card p{margin:0 0 8px}
.legal__card p:last-child{margin-bottom:0}

/* ===========================================================
   FOOTER
   =========================================================== */
.footer{position:relative;overflow:hidden;background:var(--bg);padding:clamp(70px,10vw,120px) clamp(20px,6vw,120px) 60px}
.footer__glow{position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:1000px;max-width:100%;height:500px;
  background:radial-gradient(ellipse at center bottom,rgba(212,165,116,0.1),transparent 70%);pointer-events:none}
.footer__top{position:relative;text-align:center;margin-bottom:80px}
.footer__logotype{font-family:var(--serif);font-size:clamp(42px,7vw,78px);font-weight:600;letter-spacing:.02em;color:var(--ivory);line-height:1;margin-bottom:22px}
.footer__tag{font-size:17px;color:rgba(237,231,221,0.55);margin:0 0 36px}
.footer__cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:900px;margin:0 auto 70px;
  padding:48px 0;border-top:1px solid rgba(255,255,255,0.07)}
.footer__col-t{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,231,221,0.4);margin-bottom:18px}
.footer__links{display:flex;flex-direction:column;gap:12px}
.footer__links a{font-size:15px;color:rgba(237,231,221,0.7);text-decoration:none;transition:color .2s}
.footer__links a:hover{color:var(--amber)}
.footer__bottom{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:0 auto;
  padding-top:28px;border-top:1px solid rgba(255,255,255,0.05)}
.footer__mini{display:flex;align-items:center;gap:12px}
.footer__mini span:last-child{font-size:11px;font-weight:600;letter-spacing:.28em;color:rgba(237,231,221,0.6)}
.footer__copy{font-size:12px;color:rgba(237,231,221,0.35)}

/* sticky mobile CTA */
.sticky-cta{display:none;position:fixed;left:16px;right:16px;bottom:14px;z-index:80;
  align-items:center;justify-content:center;gap:9px;padding:16px;border-radius:999px;
  background:var(--amber);color:#0A0A0F;font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:0 16px 44px -10px rgba(212,165,116,0.75),0 0 0 4px rgba(10,10,15,0.5)}
.sticky-cta__dot{width:7px;height:7px;border-radius:50%;background:#0A0A0F}

/* ===========================================================
   REVEAL (JS-driven)
   =========================================================== */
[data-reveal]{opacity:0;transform:translateY(32px);will-change:opacity,transform}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
[data-line]{transform:scaleY(0);transform-origin:top}
.steps [data-line],.steps__line{transform:scaleX(0);transform-origin:left}
[data-line].is-in{transform:scaleY(1);transition:transform 1.15s cubic-bezier(.3,.75,.2,1)}
.steps__line.is-in{transform:scaleX(1);transition:transform 1.15s cubic-bezier(.3,.75,.2,1)}

/* ===========================================================
   KEYFRAMES
   =========================================================== */
@keyframes haloPulse{0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(1)}50%{opacity:.92;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes riseIn{from{transform:perspective(1700px) rotateY(-13deg) rotateX(7deg) translateY(46px)}to{transform:perspective(1700px) rotateY(var(--tiltY,-7deg)) rotateX(var(--tiltX,2deg)) translateY(0)}}
@keyframes barGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .hero{min-height:auto;padding-top:120px;text-align:center}
  .hero__inner{grid-template-columns:1fr;gap:8px}
  .hero__text{max-width:none;margin:0 auto}
  .hero__lead{margin-left:auto;margin-right:auto}
  .hero__cta{justify-content:center}
  .meta{justify-content:center}
  /* eyebrow masquée sur mobile : le texte remonte et respire */
  .hero__text .pill{display:none}
  /* lignes du H1 transformables (translateY) pour la chorégraphie d'entrée mobile ;
     desktop reste en inline (rendu identique) */
  .hero__line{display:inline-block;will-change:transform}
  /* climax « systèmes. » : dégradé ambre→cuivre en background-clip:text (mobile only).
     Le reveal anime un masque clip-path => dégradé continu jamais cassé. */
  .hero__accent{
    background:linear-gradient(96deg,var(--amber) 0%,#E8C39A 46%,var(--copper) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    text-shadow:none;will-change:transform}
  /* halo qui pulse derrière le mot (z sous le texte, au-dessus du scrim) */
  .hero__glow{display:block;position:absolute;z-index:-1;
    left:50%;top:54%;width:158%;height:230%;transform:translate(-50%,-50%);
    background:radial-gradient(ellipse at center,rgba(212,165,116,0.55) 0%,rgba(201,133,107,0.24) 42%,rgba(212,165,116,0) 70%);
    filter:blur(12px);border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity}
  /* mockups (laptop + iPhone) en couche de fond, derrière le texte, fortement atténués */
  .hero__stage{position:absolute;inset:0;margin:0;z-index:0;
    pointer-events:none;overflow:hidden}
  .hero__text{position:relative;z-index:2}            /* texte au premier plan */
  /* cluster centré horizontalement, descendu bas (ambiance) pour libérer le H1 et le sous-titre ; +25px X recentre le contenu (laptop+phone occupent 0..660 d'une boîte de 760) */
  .stage{display:block;position:absolute;left:50%;top:66%;margin:0;opacity:.14;animation:none}
  /* transform scoped + spécificité > .stage du bloc reduced-motion (sinon scale perdu sur mobile) */
  .hero__stage .stage{transform:translate(calc(-50% + 25px),-50%) perspective(1700px) rotateY(-7deg) rotateX(2deg) scale(.46);
    transform-origin:50% 50%;will-change:transform}
  /* scrim sombre par-dessus le cluster, sous le texte — lisibilité prioritaire (AA) */
  .hero__stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(10,10,15,0.86) 0%,rgba(10,10,15,0.62) 50%,rgba(10,10,15,0.8) 100%),
      radial-gradient(circle at 50% 60%,rgba(10,10,15,0.24) 0%,rgba(10,10,15,0.52) 85%)}
  /* plus aucune carte KPI flottante sur mobile (intactes sur desktop) */
  .floatcard--1,.floatcard--2,.peek{display:none!important}
  .demos__grid{grid-template-columns:1fr;gap:26px;max-width:420px}
  .ba{grid-template-columns:1fr;gap:18px}
  /* chaîne en pile verticale : connecteurs basculés vers le bas */
  .chain{flex-direction:column;align-items:stretch;max-width:460px}
  .chain__conn{flex:0 0 auto;padding:8px 0}
  .chain__conn svg{transform:rotate(90deg)}
  .bento{grid-template-columns:1fr;max-width:480px}
  .bento__cal{border-left:0;border-top:1px solid rgba(212,165,116,0.12)}
  .bento__left{text-align:center;align-items:center}
  .bento__left .eyebrow{justify-content:center}
  .bento__lead{margin-left:auto;margin-right:auto}
  .bento__cta{align-self:center}
  .bento__reassure{justify-content:center}
  .footer__cols{grid-template-columns:1fr 1fr;gap:28px}
  /* sticky CTA : présente en flux mais masquée hors écran tant que le hero est visible ;
     révélée (slide-up + fade) une fois le hero passé via .is-visible (JS) */
  .sticky-cta{display:flex;transform:translateY(180%);opacity:0;pointer-events:none;
    transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
  .sticky-cta.is-visible{transform:translateY(0);opacity:1;pointer-events:auto}
  .lever{padding-left:56px;padding-bottom:34px}
  .lever__node{left:16px}
  /* amplitude d'ondulation réduite, fil plus proche du bord gauche */
  .lever:nth-of-type(1){--wave:3px}
  .lever:nth-of-type(2){--wave:14px}
  .lever:nth-of-type(3){--wave:24px}
  .lever:nth-of-type(4){--wave:16px}
  .lever:nth-of-type(5){--wave:5px}
  .lever:nth-of-type(6){--wave:12px}
  .lever__num{font-size:26px}
  .lever__title{font-size:24px}
  .lever__txt{font-size:14px}
}
@media (max-width:560px){
  .footer__cols{grid-template-columns:1fr 1fr}
  .footer__bottom{flex-direction:column;gap:14px;text-align:center}
  .ba__col{padding:26px 24px}
  .ba__list li{font-size:14.5px}
}

/* anti-FOUC chorégraphie hero (MOBILE only) : sous html.js et si le mouvement est autorisé,
   on masque les éléments que GSAP fait entrer. Sans JS (pas de .js) ou en reduced-motion => visibles.
   GSAP pose une opacité inline = 1 à l'arrivée, qui l'emporte sur ces règles. */
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  html.js .nav__brand,
  html.js .hero__line,
  html.js .hero__accent-wrap,
  html.js .hero__lead,
  html.js .hero__cta .btn--amber,
  html.js .hero__cta .link-underline,
  html.js .hero .meta{opacity:0}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important}
  [data-reveal]{opacity:1;transform:none}
  [data-line]{transform:none}
  .stage{transform:perspective(1700px) rotateY(-7deg) rotateX(2deg)}
  /* sticky CTA : simple toggle d'affichage, sans animation */
  .sticky-cta{transition:none}
}