/* ==========================================================================
   PROFESSEUR TALL — « ÉCLIPSE »
   Concept : traverser l'ombre vers la lumière.
   Violet cosmique · lumière solaire · aurore.
   Système 3D immersif : perspective réelle, profondeur, parallaxe.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Profondeurs */
  --void:#06040E;
  --abyss:#0B0818;
  --deep:#130D28;
  --mid:#1E1540;
  --haze:#2E2159;
  --veil:#443074;

  /* Lumières */
  --solar:#FF8A5B;
  --ember:#FF6B8A;
  --aurora:#6FE9D6;
  --halo:#B79BFF;
  --gold:#FFC978;

  /* Textes */
  --light:#FCF9FF;
  --soft:#C7BADF;
  --muted:#8E80AE;
  --faint:#5D5280;

  /* Surfaces */
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --line:rgba(183,155,255,.16);
  --line-2:rgba(183,155,255,.30);

  /* Gradients signature */
  --g-solar:linear-gradient(118deg,#FF8A5B 0%,#FF6B8A 58%,#B79BFF 100%);
  --g-aurora:linear-gradient(118deg,#6FE9D6 0%,#B79BFF 100%);
  --g-text:linear-gradient(104deg,#FCF9FF 0%,#FFC978 42%,#FF8A5B 76%,#B79BFF 100%);

  /* Ombres & lueurs */
  --sh-1:0 2px 8px rgba(6,4,14,.4);
  --sh-2:0 18px 44px -14px rgba(6,4,14,.8);
  --sh-3:0 40px 90px -24px rgba(6,4,14,.9);
  --glow-solar:0 0 0 1px rgba(255,138,91,.28),0 12px 40px -10px rgba(255,107,138,.5);
  --glow-aurora:0 0 0 1px rgba(111,233,214,.22),0 12px 40px -12px rgba(111,233,214,.34);

  /* Géométrie */
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:36px;
  --wrap:1220px;
  --bar-h:0px;

  /* Moteur 3D */
  --persp:1400px;
  --tiltX:0deg; --tiltY:0deg;
  --px:0; --py:0;

  /* Typo */
  --f-display:"Instrument Serif",Georgia,serif;
  --f-body:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-3d:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--void);
  color:var(--light);
  font-family:var(--f-body);
  font-size:clamp(15px,.55vw + 13.6px,16.5px);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--bar-h);
}
body.is-open{overflow:hidden}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:400;line-height:1.08;letter-spacing:-.015em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
em{font-style:italic}
::selection{background:rgba(255,138,91,.32);color:var(--light)}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto;position:relative;z-index:2}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--solar);color:var(--void);padding:10px 18px;border-radius:var(--r-sm);font-weight:600}
:focus-visible{outline:2px solid var(--aurora);outline-offset:3px;border-radius:6px}

/* ---------- 3. FOND COSMIQUE ---------- */
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cosmos__stars{position:absolute;inset:0;width:100%;height:100%;opacity:.85}

/* Aurore : nappes de dégradés qui respirent */
.cosmos__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.55}
.cosmos__aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.cosmos__aurora span:nth-child(1){
  width:58vw;height:58vw;left:-12%;top:-14%;
  background:radial-gradient(circle,rgba(183,155,255,.62),transparent 66%);
  animation:drift1 34s var(--ease) infinite alternate;
}
.cosmos__aurora span:nth-child(2){
  width:52vw;height:52vw;right:-14%;top:16%;
  background:radial-gradient(circle,rgba(255,107,138,.48),transparent 66%);
  animation:drift2 41s var(--ease) infinite alternate;
}
.cosmos__aurora span:nth-child(3){
  width:46vw;height:46vw;left:24%;bottom:-18%;
  background:radial-gradient(circle,rgba(111,233,214,.34),transparent 68%);
  animation:drift3 47s var(--ease) infinite alternate;
}
@keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-11vw,10vh,0) scale(1.12)}}
@keyframes drift3{to{transform:translate3d(7vw,-9vh,0) scale(1.22)}}

/* Grain */
.cosmos::after{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 4. TYPOGRAPHIE ---------- */
h1{font-size:clamp(2.6rem,7.4vw,5.4rem);letter-spacing:-.028em}
h2{font-size:clamp(2rem,4.3vw,3.5rem);letter-spacing:-.022em}
h3{font-size:clamp(1.18rem,1.6vw,1.5rem);letter-spacing:-.012em;line-height:1.24}
h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--f-body);font-weight:600;color:var(--halo)}

.grad{background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--halo);margin:0 0 20px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--g-solar);flex:none}

.lede{color:var(--soft);font-size:clamp(.96rem,1.05vw,1.09rem);line-height:1.78;max-width:62ch;font-weight:300}
.head{max-width:760px;margin-bottom:clamp(38px,5vw,64px)}
.head h2{margin-bottom:18px}

/* ---------- 5. BOUTONS ---------- */
.btn{
  --btn-tx:0px; --btn-ty:0px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;border:0;cursor:pointer;
  font-size:.82rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  line-height:1;text-align:center;isolation:isolate;overflow:hidden;
  transform:translate3d(var(--btn-tx),var(--btn-ty),0);
  transition:transform .4s var(--ease-3d),box-shadow .4s var(--ease),filter .3s var(--ease);
}
.btn__ico{width:17px;height:17px;flex:none}
.btn--sm{padding:11px 20px;font-size:.72rem}
.btn--block{width:100%}

.btn--primary{background:var(--g-solar);color:#160A14;box-shadow:var(--glow-solar)}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(118deg,#FFC978,#FF8A5B 55%,#FF6B8A);
  opacity:0;transition:opacity .4s var(--ease);
}
.btn--primary:hover::after{opacity:1}
.btn--primary:hover{box-shadow:0 0 0 1px rgba(255,201,120,.5),0 20px 54px -12px rgba(255,138,91,.62)}

.btn--wa{background:linear-gradient(118deg,#1FBE5C,#0E9E6E);color:#04150D;box-shadow:0 12px 36px -12px rgba(31,190,92,.55)}
.btn--wa:hover{box-shadow:0 18px 48px -12px rgba(31,190,92,.72)}

.btn--ghost{background:var(--glass);color:var(--light);box-shadow:inset 0 0 0 1px var(--line-2);backdrop-filter:blur(14px)}
.btn--ghost:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--halo)}

.btn--outline-dark{background:transparent;color:var(--light);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--outline-dark:hover{background:var(--glass);box-shadow:inset 0 0 0 1px var(--halo)}

.btn--dark{background:var(--light);color:var(--void)}
.btn--dark:hover{background:var(--gold)}

.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:8px}

/* ---------- 6. HEADER ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:90;
  padding-block:20px;
  transition:padding .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease);
}
.header.is-stuck{
  padding-block:11px;
  background:rgba(11,8,24,.76);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 1px 0 var(--line),0 14px 40px -22px rgba(0,0,0,.9);
}
.header__in{display:flex;align-items:center;gap:26px}

.brand{display:inline-flex;align-items:center;gap:12px;flex:none}
.brand__mark{width:42px;height:42px;flex:none;filter:drop-shadow(0 3px 10px rgba(183,155,255,.4))}
.brand__txt{display:flex;flex-direction:column;line-height:1.14}
.brand__name{font-family:var(--f-display);font-size:1.16rem;letter-spacing:.005em}
.brand__sub{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--halo);font-weight:600}

.nav{display:flex;align-items:center;gap:clamp(15px,1.7vw,26px);margin-left:auto}
.nav>a:not(.btn){
  position:relative;font-size:.8rem;font-weight:400;color:var(--soft);white-space:nowrap;
  padding-block:5px;transition:color .3s var(--ease);
}
.nav>a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--g-solar);transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease);
}
.nav>a:not(.btn):hover{color:var(--light)}
.nav>a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
.nav .header__cta{display:none}

.burger{
  display:none;width:44px;height:44px;border-radius:50%;background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line-2);position:relative;cursor:pointer;flex:none;
  backdrop-filter:blur(12px);
}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:13px;width:18px;height:1.5px;background:var(--light);
  border-radius:2px;transition:transform .42s var(--ease),opacity .28s var(--ease);
}
.burger span{top:21px}
.burger::before{top:15px}
.burger::after{top:27px}
body.is-open .burger span{opacity:0}
body.is-open .burger::before{transform:translateY(6px) rotate(45deg)}
body.is-open .burger::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1140px){
  .burger{display:block;margin-left:auto}
  .header__in>.header__cta{display:none}
  .nav{
    position:fixed;inset:0;margin:0;
    flex-direction:column;justify-content:center;gap:6px;
    background:rgba(6,4,14,.96);backdrop-filter:blur(30px);
    opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  }
  .nav.is-open{opacity:1;visibility:visible}
  .nav>a:not(.btn){font-family:var(--f-display);font-size:1.9rem;color:var(--light);padding-block:11px}
  .nav>a:not(.btn)::after{display:none}
  .nav .header__cta{display:inline-flex;margin-top:24px}
}

/* ---------- 7. HERO 3D ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(130px,17vh,190px) clamp(70px,10vh,110px);
  perspective:var(--persp);
  overflow:hidden;
}
.hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,4.6vw,76px);align-items:center;transform-style:preserve-3d}
.hero__body{position:relative;z-index:3;transform-style:preserve-3d}
.hero h1{margin-bottom:24px}
.hero h1 em{display:block;font-style:italic;background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{margin-bottom:32px;font-size:clamp(1rem,1.15vw,1.16rem)}
.hero__third{margin-top:24px;font-size:.85rem;color:var(--muted)}
.hero__third a{color:var(--aurora);border-bottom:1px solid rgba(111,233,214,.35);padding-bottom:1px}
.hero__third a:hover{border-color:var(--aurora)}

/* Système orbital : anneaux 3D autour du portrait */
.orbit{
  position:relative;aspect-ratio:1;width:100%;max-width:520px;margin-inline:auto;
  transform-style:preserve-3d;
  transform:rotateX(calc(var(--tiltX) * .55)) rotateY(calc(var(--tiltY) * .55));
  transition:transform .9s var(--ease-3d);
}
.orbit__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--line-2);
  transform-style:preserve-3d;
}
.orbit__ring:nth-child(1){transform:rotateX(74deg) rotateZ(0deg);animation:spin 26s linear infinite}
.orbit__ring:nth-child(2){inset:8%;border-color:rgba(255,138,91,.26);transform:rotateX(70deg) rotateY(22deg);animation:spin 34s linear infinite reverse}
.orbit__ring:nth-child(3){inset:16%;border-color:rgba(111,233,214,.22);transform:rotateX(78deg) rotateY(-18deg);animation:spin 44s linear infinite}
@keyframes spin{to{transform:rotateX(74deg) rotateZ(360deg)}}

/* Halo derrière le portrait */
.orbit__halo{
  position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 42% 34%,rgba(255,201,120,.38),rgba(255,107,138,.22) 44%,transparent 70%);
  filter:blur(28px);
  animation:pulse 7s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* Portrait masqué dans le disque */
.orbit__media{
  position:absolute;inset:13%;border-radius:50%;overflow:hidden;
  transform:translateZ(60px);
  box-shadow:0 0 0 1px rgba(183,155,255,.3),0 40px 90px -30px rgba(6,4,14,.95),inset 0 0 90px rgba(30,21,64,.5);
}
.orbit__media img{width:100%;height:100%;object-fit:cover;object-position:52% 18%}
.orbit__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(168deg,transparent 28%,rgba(11,8,24,.5) 78%,rgba(6,4,14,.85) 100%);
}

/* Satellites lumineux */
.orbit__dot{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 18px 4px rgba(255,201,120,.65);
  top:50%;left:50%;margin:-5.5px;
}
.orbit__dot--a{animation:orbA 18s linear infinite}
.orbit__dot--b{background:var(--aurora);box-shadow:0 0 18px 4px rgba(111,233,214,.6);animation:orbB 25s linear infinite}
.orbit__dot--c{background:var(--ember);box-shadow:0 0 18px 4px rgba(255,107,138,.6);animation:orbC 32s linear infinite}
@keyframes orbA{to{transform:rotate(360deg) translateX(min(48%,250px)) rotate(-360deg)}}
@keyframes orbB{to{transform:rotate(-360deg) translateX(min(42%,220px)) rotate(360deg)}}
@keyframes orbC{to{transform:rotate(360deg) translateX(min(53%,275px)) rotate(-360deg)}}

/* ---------- 8. STATS (données client réelles) ---------- */
.stats{position:relative;z-index:3;padding-block:clamp(30px,4vw,50px)}
.stats__in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);
  backdrop-filter:blur(20px);
}
.stat{
  background:rgba(19,13,40,.72);padding:clamp(22px,2.6vw,34px) clamp(16px,2vw,26px);
  text-align:center;position:relative;overflow:hidden;
  transition:background .45s var(--ease);
}
.stat::before{
  content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(circle at 50% 0%,rgba(183,155,255,.16),transparent 70%);
  transition:opacity .5s var(--ease);
}
.stat:hover{background:rgba(30,21,64,.8)}
.stat:hover::before{opacity:1}
.stat__ico{width:22px;height:22px;margin:0 auto 12px;color:var(--halo);opacity:.9}
.stat__n{
  display:block;font-family:var(--f-display);font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:7px;letter-spacing:-.02em;
}
.stat__k{display:block;font-size:.73rem;color:var(--soft);line-height:1.45;font-weight:400}
.stat__sub{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:5px}

/* ---------- 9. SECTIONS ---------- */
.section{position:relative;padding-block:clamp(70px,9vw,124px);z-index:2}
.section--glass{
  background:linear-gradient(180deg,rgba(19,13,40,.55),rgba(11,8,24,.3));
  backdrop-filter:blur(8px);
}
.section--lift{
  background:linear-gradient(180deg,rgba(30,21,64,.5),rgba(19,13,40,.2));
}

/* Ruban d'aurore : séparateur 3D (remplace The Rhône Line) */
.rhone{position:absolute;inset:0 0 auto;height:130px;pointer-events:none;z-index:1;overflow:hidden;perspective:800px}
.rhone svg{width:100%;height:100%;transform:rotateX(38deg) scaleY(1.5);transform-origin:top}
.rhone path{
  fill:none;stroke-width:1.2;stroke-linecap:round;
  transition:stroke-dashoffset 2.6s var(--ease-3d);
}
.rhone.is-in path{stroke-dashoffset:0!important}

/* ---------- 10. RÉVÉLATIONS 3D ---------- */
.rv{
  opacity:0;
  transform:translate3d(0,42px,-80px) rotateX(9deg);
  transition:opacity .95s var(--ease-3d),transform 1.05s var(--ease-3d);
  transform-origin:50% 100%;
}
.rv.is-in{opacity:1;transform:none}

/* ---------- 11. CARTES 3D (tilt) ---------- */
.tilt-scene{perspective:var(--persp)}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);perspective:var(--persp)}
.pillar{
  position:relative;padding:clamp(30px,3.2vw,42px) clamp(24px,2.6vw,32px);
  border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:linear-gradient(162deg,rgba(46,33,89,.6),rgba(19,13,40,.72));
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);
  transform-style:preserve-3d;
  transition:box-shadow .5s var(--ease),transform .5s var(--ease-3d);
  will-change:transform;
}
.pillar>*{transform:translateZ(28px)}
.pillar::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(183,155,255,.2),transparent 62%);
  transition:opacity .45s var(--ease);
}
.pillar:hover{box-shadow:inset 0 0 0 1px var(--line-2),0 40px 80px -26px rgba(6,4,14,.95)}
.pillar:hover::before{opacity:1}
.pillar__num{
  position:absolute;top:22px;right:26px;
  font-family:var(--f-display);font-size:2.6rem;line-height:1;
  color:var(--veil);opacity:.5;transform:translateZ(10px);
}
.pillar__ico{width:56px;height:56px;margin-bottom:22px;filter:drop-shadow(0 8px 22px rgba(255,138,91,.35))}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--soft);font-size:.92rem;margin-bottom:22px;font-weight:300}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;perspective:var(--persp)}
.card{
  position:relative;padding:26px 24px;border-radius:var(--r);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  backdrop-filter:blur(12px);transform-style:preserve-3d;
  transition:transform .5s var(--ease-3d),box-shadow .45s var(--ease),background .45s var(--ease);
  will-change:transform;
}
.card:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2),0 26px 56px -22px rgba(6,4,14,.9)}
.card__ico{width:26px;height:26px;color:var(--solar);margin-bottom:15px;transform:translateZ(20px)}
.card h3{font-size:1.06rem;margin-bottom:7px;transform:translateZ(16px)}
.card p{color:var(--muted);font-size:.86rem;margin:0;font-weight:300;transform:translateZ(10px)}

/* ---------- 12. SPLIT MÉDIA 3D ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center;perspective:var(--persp)}
.split--rev .split__media{order:2}
.split__media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3),inset 0 0 0 1px var(--line);
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-3d),box-shadow .6s var(--ease);
  will-change:transform;
}
.split__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.4s var(--ease-3d)}
.split__media:hover img{transform:scale(1.055)}
.split__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(158deg,transparent 42%,rgba(6,4,14,.62) 100%);
}
.split__cap{
  position:absolute;left:18px;bottom:16px;z-index:2;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--light);padding:7px 14px;border-radius:100px;
  background:rgba(6,4,14,.62);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--line-2);
  transform:translateZ(40px);
}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.chips li{
  font-size:.75rem;padding:7px 15px;border-radius:100px;color:var(--soft);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:all .35s var(--ease);
}
.chips li:hover{color:var(--light);background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2);transform:translateY(-2px)}

/* ---------- 13. DISPONIBILITÉ ---------- */
.dispo{padding-block:0;margin-top:clamp(-30px,-3vw,-18px)}
.dispo__card{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:22px clamp(22px,2.6vw,32px);border-radius:var(--r-lg);
  background:linear-gradient(118deg,rgba(46,33,89,.8),rgba(19,13,40,.85));
  box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-2);
  backdrop-filter:blur(20px);
}
.dot{
  width:9px;height:9px;border-radius:50%;background:#2BE07C;flex:none;
  box-shadow:0 0 0 0 rgba(43,224,124,.6);animation:live 2.4s ease-out infinite;
}
@keyframes live{70%{box-shadow:0 0 0 13px rgba(43,224,124,0)}100%{box-shadow:0 0 0 0 rgba(43,224,124,0)}}
.dispo__label{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--aurora);margin:0 0 3px;font-weight:600}
.dispo__txt{margin:0;font-size:.9rem;color:var(--soft);font-weight:300}
.dispo__txt strong{color:var(--light);font-weight:600}
.dispo__actions{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}

/* ---------- 14. RELATION PATH 3D ---------- */
.path{position:relative;margin-block:clamp(36px,4.5vw,60px);perspective:1100px}
.path__track{
  display:flex;justify-content:space-between;gap:8px;position:relative;
  transform:rotateX(16deg);transform-style:preserve-3d;
  padding-block:24px 8px;
}
.path__track::before{
  content:"";position:absolute;left:5%;right:5%;top:31px;height:1px;
  background:linear-gradient(90deg,transparent,var(--veil) 14%,var(--halo) 50%,var(--solar) 86%,transparent);
  opacity:.5;
}
.path__step{display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;position:relative;transform-style:preserve-3d}
.path__bead{
  width:15px;height:15px;border-radius:50%;background:var(--deep);
  box-shadow:inset 0 0 0 1.5px var(--veil);
  transform:translateZ(0) scale(.6);opacity:.35;
  transition:transform .8s var(--ease-3d),opacity .7s var(--ease),box-shadow .7s var(--ease),background .7s var(--ease);
}
.path__step.is-on .path__bead{
  opacity:1;transform:translateZ(34px) scale(1);
  background:var(--g-solar);
  box-shadow:0 0 0 1px rgba(255,201,120,.5),0 0 24px 5px rgba(255,138,91,.5);
}
.path__lbl{
  font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  text-align:center;transition:color .7s var(--ease),transform .8s var(--ease-3d);font-weight:500;
}
.path__step.is-on .path__lbl{color:var(--soft);transform:translateZ(18px)}
.path__step:last-child.is-on .path__lbl{color:var(--gold)}

/* ---------- 15. ÉTAPES ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;perspective:var(--persp)}
.step{
  position:relative;padding:28px 22px;border-radius:var(--r);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  backdrop-filter:blur(12px);transform-style:preserve-3d;
  transition:transform .5s var(--ease-3d),box-shadow .45s var(--ease);
  will-change:transform;
}
.step:hover{box-shadow:inset 0 0 0 1px var(--line-2),0 26px 56px -22px rgba(6,4,14,.9)}
.step__n{
  display:block;font-family:var(--f-display);font-size:2rem;line-height:1;margin-bottom:13px;
  background:var(--g-aurora);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateZ(22px);
}
.step h3{font-size:1rem;margin-bottom:6px;transform:translateZ(14px)}
.step p{color:var(--muted);font-size:.84rem;margin:0;font-weight:300}

/* ---------- 16. CABINET & ZONE ---------- */
.cabinet,.zone{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,52px);align-items:center}
.cabinet__box{
  padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  background:linear-gradient(162deg,rgba(46,33,89,.55),rgba(19,13,40,.7));
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);backdrop-filter:blur(18px);
}
.cabinet__row{display:flex;gap:15px;padding-block:15px;border-bottom:1px solid var(--line)}
.cabinet__row:last-of-type{border-bottom:0}
.cabinet__row svg{width:20px;height:20px;flex:none;color:var(--halo);margin-top:3px}
.cabinet__k{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;font-weight:600}
.cabinet__v{display:block;font-size:.93rem;color:var(--light);font-weight:300}

.zone__map{
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);
  transform:rotateY(-5deg) rotateX(3deg);transform-style:preserve-3d;
  transition:transform .9s var(--ease-3d);
}
.zone__map:hover{transform:rotateY(0) rotateX(0)}
.zone__cities{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 12px}
.zone__cities li{
  font-size:.79rem;padding:7px 15px;border-radius:100px;color:var(--soft);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
}
.zone__cities li.is-all{background:var(--g-solar);color:#160A14;font-weight:600;box-shadow:none}
.zone__note{font-size:.76rem;color:var(--faint);margin:0}

/* ---------- 18. STORIES — COVERFLOW 3D ---------- */
.stories{position:relative}
.stories__empty{
  padding:34px;border-radius:var(--r-lg);text-align:center;color:var(--muted);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:.92rem;
}
.stories__stage{
  position:relative;height:clamp(330px,38vw,400px);
  perspective:1500px;perspective-origin:50% 45%;
  transform-style:preserve-3d;
}
.story{
  position:absolute;top:0;left:50%;width:min(100%,540px);
  padding:clamp(30px,3.4vw,44px);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(46,33,89,.92),rgba(19,13,40,.96));
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-3);
  backdrop-filter:blur(22px);
  transform-style:preserve-3d;
  transition:transform 1s var(--ease-3d),opacity .8s var(--ease),filter .8s var(--ease);
  will-change:transform,opacity;
}
.story[data-pos="0"]{transform:translate3d(-50%,0,0) rotateY(0deg);opacity:1;z-index:4;filter:none}
.story[data-pos="1"]{transform:translate3d(-40%,24px,-200px) rotateY(-16deg);opacity:.42;z-index:3;filter:blur(1.5px)}
.story[data-pos="2"]{transform:translate3d(-31%,46px,-390px) rotateY(-24deg);opacity:.16;z-index:2;filter:blur(3px)}
.story[data-pos="hidden"]{transform:translate3d(-28%,66px,-580px) rotateY(-30deg);opacity:0;z-index:1;pointer-events:none}

.story__tag{
  display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  padding:6px 13px;border-radius:100px;margin-bottom:20px;
  background:var(--g-aurora);color:#04150F;
  transform:translateZ(30px);
}
.story__quote{
  font-family:var(--f-display);font-size:clamp(1.1rem,1.65vw,1.42rem);line-height:1.5;
  color:var(--light);margin-bottom:20px;transform:translateZ(20px);
}
.story__who{font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;color:var(--halo);margin:0;font-weight:500;transform:translateZ(14px)}

.stories__nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(20px,2.6vw,34px)}
.stories__btn{
  width:46px;height:46px;border-radius:50%;flex:none;cursor:pointer;
  display:grid;place-items:center;color:var(--light);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(12px);
  transition:all .4s var(--ease);
}
.stories__btn:hover{background:var(--g-solar);color:#160A14;box-shadow:var(--glow-solar);transform:scale(1.08)}
.stories__dots{display:flex;gap:9px}
.stories__dot{
  width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--veil);transition:all .45s var(--ease);
}
.stories__dot.is-on{width:26px;border-radius:100px;background:var(--g-solar)}

/* ---------- 19. FORMULAIRE ---------- */
.form-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,64px);align-items:start}
.form-aside__list{display:grid;gap:15px;margin:26px 0 0}
.form-aside__list li{display:flex;gap:13px;font-size:.89rem;color:var(--soft);font-weight:300}
.form-aside__list svg{width:19px;height:19px;flex:none;color:var(--aurora);margin-top:3px}

.form-card{
  padding:clamp(26px,3.2vw,40px);border-radius:var(--r-xl);
  background:linear-gradient(162deg,rgba(46,33,89,.6),rgba(19,13,40,.8));
  box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-3);
  backdrop-filter:blur(24px);
}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{margin-bottom:17px;display:flex;flex-direction:column;gap:8px}
.field label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--halo);font-weight:600}
.field input,.field select,.field textarea{
  width:100%;padding:14px 17px;border-radius:var(--r-sm);
  background:rgba(6,4,14,.5);border:1px solid var(--line);
  color:var(--light);font-size:.92rem;font-weight:300;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.field textarea{min-height:126px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--halo);background:rgba(6,4,14,.72);
  box-shadow:0 0 0 3px rgba(183,155,255,.14);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23B79BFF' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 17px center;padding-right:42px;
}
.field select option{background:var(--deep);color:var(--light)}

.pref{display:flex;gap:9px;flex-wrap:wrap}
.pref input{position:absolute;opacity:0;pointer-events:none}
.pref label{
  padding:10px 19px;border-radius:100px;cursor:pointer;font-size:.78rem;
  letter-spacing:.04em;text-transform:none;color:var(--soft);font-weight:400;
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  transition:all .35s var(--ease);
}
.pref input:checked+label{background:var(--g-solar);color:#160A14;font-weight:600;box-shadow:var(--glow-solar)}
.pref input:focus-visible+label{outline:2px solid var(--aurora);outline-offset:3px}

.hp{position:absolute!important;left:-9999px!important}
.form-note{font-size:.74rem;color:var(--faint);margin:15px 0 0;text-align:center}
.form-note a{color:var(--halo);text-decoration:underline;text-underline-offset:3px}
.form-msg{margin:0 0 17px;padding:13px 17px;border-radius:var(--r-sm);font-size:.86rem;display:none}
.form-msg.is-err{display:block;background:rgba(255,107,138,.12);color:#FFB3C4;box-shadow:inset 0 0 0 1px rgba(255,107,138,.3)}
.form-msg.is-ok{display:block;background:rgba(111,233,214,.12);color:var(--aurora);box-shadow:inset 0 0 0 1px rgba(111,233,214,.3)}

/* ---------- 20. FAQ ---------- */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:11px}
.faq__item{
  border-radius:var(--r);overflow:hidden;
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  backdrop-filter:blur(12px);transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.faq__item:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.faq__item[open]{background:rgba(46,33,89,.42);box-shadow:inset 0 0 0 1px var(--line-2)}
.faq__item summary{
  padding:19px 52px 19px 24px;cursor:pointer;list-style:none;position:relative;
  font-size:.95rem;font-weight:500;color:var(--light);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--halo);border-bottom:1.5px solid var(--halo);
  transform:translateY(-70%) rotate(45deg);transition:transform .42s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__item p{padding:0 24px 21px;margin:0;color:var(--soft);font-size:.89rem;font-weight:300;max-width:68ch}
.faq__hidden{display:none}
.faq.is-expanded .faq__hidden{display:block}
.faq__more{display:flex;justify-content:center;margin-top:9px}

/* ---------- 21. CTA FINAL ---------- */
.final__in{text-align:center;max-width:780px;margin-inline:auto}
.final__in .eyebrow{justify-content:center}
.final__in .eyebrow::after{content:"";width:34px;height:1px;background:var(--g-solar)}
.final__in h2{margin-bottom:18px}
.final__in .lede{margin-inline:auto;margin-bottom:32px}
.final__in .cta-row{justify-content:center}

/* ---------- 21bis. PAGES SECONDAIRES (légales, merci, 404) ---------- */
.page{padding-block:clamp(120px,15vh,180px) clamp(60px,8vw,96px);position:relative;z-index:2}
.page__body{max-width:800px}
.page__body h1{margin-bottom:14px}
.page__body h2{
  font-size:clamp(1.3rem,2vw,1.75rem);margin:clamp(34px,4vw,50px) 0 14px;
  padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line);
}
.page__body h2:first-of-type{border-top:0;padding-top:0}
.page__body h3{font-size:1.06rem;margin:24px 0 10px;color:var(--halo)}
.page__body p,.page__body li{color:var(--soft);font-size:.93rem;font-weight:300;line-height:1.78}
.page__body strong{color:var(--light);font-weight:600}
.page__body ul{display:grid;gap:9px;margin:14px 0 18px;padding-left:20px;list-style:disc}
.page__body li{padding-left:4px}
.page__body a:not(.btn){color:var(--halo);text-decoration:underline;text-underline-offset:3px}
.page__body a:not(.btn):hover{color:var(--gold)}
.page__body table{
  width:100%;border-collapse:collapse;font-size:.88rem;margin:18px 0;
  border-radius:var(--r-sm);overflow:hidden;
}
.page__body th{
  text-align:left;padding:11px 15px;color:var(--light);font-weight:600;font-size:.76rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--glass-2);
}
.page__body td{padding:11px 15px;border-top:1px solid var(--line);color:var(--soft)}
.page__lead{color:var(--muted);font-size:.86rem}

/* Page « merci » et 404 : contenu centré */
.page--center{text-align:center}
.page--center .page__body{margin-inline:auto}
.page--center .eyebrow{justify-content:center}
.page--center .cta-row{justify-content:center}

/* ---------- 22. FOOTER ---------- */
.footer{
  position:relative;z-index:2;padding-block:clamp(36px,4.2vw,54px) 22px;
  background:linear-gradient(180deg,rgba(11,8,24,.4),rgba(6,4,14,.9));
  box-shadow:inset 0 1px 0 var(--line);
}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(22px,3vw,44px);margin-bottom:24px}
.footer .brand{margin-bottom:10px}
.footer p{color:var(--muted);font-size:.82rem;font-weight:300;max-width:42ch;line-height:1.6}
.footer h4{margin-bottom:11px;font-size:.68rem}
.footer ul{display:grid;gap:7px}
.footer li,.footer li a{font-size:.82rem;color:var(--soft);font-weight:300;line-height:1.5;transition:color .3s var(--ease)}
.footer li a:hover{color:var(--gold)}
/* p.footer__disc : `.footer p` est plus spécifique et imposerait son max-width */
p.footer__disc{
  font-size:.7rem;color:var(--faint);line-height:1.55;max-width:none;
  padding-top:18px;border-top:1px solid var(--line);
}
.footer__bar{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:14px;font-size:.7rem;color:var(--faint);
}

/* ---------- 23. FLOTTANTS ---------- */
.wa-float{
  position:fixed;right:20px;bottom:calc(20px + var(--bar-h));z-index:70;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#1FBE5C,#0E9E6E);color:#fff;
  box-shadow:0 14px 38px -10px rgba(31,190,92,.6),0 0 0 1px rgba(255,255,255,.1);
  transition:transform .45s var(--ease-3d),box-shadow .4s var(--ease);
}
.wa-float svg{width:29px;height:29px}
.wa-float:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 20px 48px -10px rgba(31,190,92,.75)}

.mobilebar{
  display:none;position:fixed;inset:auto 0 0;z-index:80;
  background:rgba(11,8,24,.9);backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 -1px 0 var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mobilebar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 6px;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);font-weight:500;
}
.mobilebar svg{width:20px;height:20px}
.mobilebar a.is-main{color:var(--gold)}
.mobilebar a.is-wa{color:#2BE07C}

/* ==========================================================================
   24. MISES EN PAGE NON LINÉAIRES
   Chaque section a sa propre logique de lecture : marquee, diagonale,
   défilement horizontal épinglé, split collant, radial, zoom, mosaïque.
   ========================================================================== */

/* ---- 24.1 MARQUEE — bandeau horizontal infini (stats) ---- */
.marquee{
  position:relative;overflow:hidden;
  padding-block:clamp(26px,3.4vw,44px);
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(30,21,64,.42),rgba(11,8,24,.28));
  backdrop-filter:blur(14px);
}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(50px,9vw,150px);z-index:3;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--void),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--void),transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
.marquee__group{display:flex;align-items:center;flex:none}

.mq{
  display:flex;align-items:center;gap:16px;flex:none;
  padding-inline:clamp(24px,3.4vw,52px);
  border-right:1px solid var(--line);
}
.mq__ico{width:26px;height:26px;flex:none;color:var(--halo)}
.mq__n{
  display:block;font-family:var(--f-display);font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1;
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;letter-spacing:-.02em;
}
.mq__k{display:block;font-size:.72rem;color:var(--soft);white-space:nowrap;margin-top:4px;font-weight:300}

/* ---- 24.2 DIAGONALE — piliers en escalier ---- */
.diag{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,30px);align-items:start;
  perspective:var(--persp);
}
/* Décalage par marge, pas par transform : le tilt 3D au survol
   utilise transform et écraserait le décalage. */
.diag>.pillar:nth-of-type(2){margin-top:clamp(30px,5vw,72px)}
.diag>.pillar:nth-of-type(3){margin-top:clamp(60px,10vw,144px)}

/* Trait diagonal qui relie les trois piliers */
.diag-line{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:visible}
.diag-line path{
  fill:none;stroke:url(#diagG);stroke-width:1.2;stroke-dasharray:1600;stroke-dashoffset:1600;
  transition:stroke-dashoffset 2.4s var(--ease-3d) .3s;
}
.is-in .diag-line path{stroke-dashoffset:0}

/* ---- 24.3 DÉFILEMENT HORIZONTAL ÉPINGLÉ ---- */
.hsec{position:relative}
.hsec__pin{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hsec__head{width:min(100% - 40px,var(--wrap));margin:0 auto clamp(26px,3.4vw,44px);flex:none}
.hsec__viewport{overflow:hidden;width:100%}
.hsec__track{
  display:flex;gap:clamp(16px,2vw,26px);width:max-content;
  padding-inline:max(20px,calc((100vw - var(--wrap)) / 2));
  will-change:transform;
}
.hsec__track>*{width:clamp(250px,25vw,330px);flex:none}

/* Barre de progression horizontale */
.hsec__bar{
  width:min(100% - 40px,var(--wrap));margin:clamp(24px,3vw,38px) auto 0;
  height:2px;background:var(--line);border-radius:2px;overflow:hidden;flex:none;
}
.hsec__fill{
  display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:var(--g-solar);border-radius:2px;
}

/* ---- 24.4 SPLIT COLLANT — média épinglé, texte qui défile ---- */
.sticky-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4vw,68px);align-items:start}
.sticky-split__media{position:sticky;top:clamp(90px,12vh,130px)}
.sticky-split__flow{display:grid;gap:clamp(22px,3vw,38px)}
.sticky-split__block{
  padding:clamp(24px,2.8vw,34px);border-radius:var(--r-lg);
  background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);
  backdrop-filter:blur(14px);
  transition:box-shadow .5s var(--ease),background .5s var(--ease);
}
.sticky-split__block:hover{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--line-2)}
.sticky-split__block h3{margin-bottom:10px}
.sticky-split__block p{color:var(--soft);font-size:.9rem;margin:0;font-weight:300}
.sticky-split__n{
  display:inline-block;font-family:var(--f-display);font-size:1.4rem;line-height:1;margin-bottom:12px;
  background:var(--g-aurora);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- 24.5 RADIAL — disposition circulaire (voyance) ---- */
.radial{
  position:relative;aspect-ratio:1;width:min(100%,560px);margin-inline:auto;
  display:grid;place-items:center;perspective:1200px;
}
.radial__core{
  position:relative;z-index:3;width:38%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-align:center;padding:8%;
  background:radial-gradient(circle at 40% 32%,rgba(255,201,120,.22),rgba(30,21,64,.9) 62%);
  box-shadow:inset 0 0 0 1px var(--line-2),0 0 70px -10px rgba(183,155,255,.45);
}
.radial__core span{
  font-family:var(--f-display);font-size:clamp(.95rem,1.5vw,1.25rem);line-height:1.2;
  background:var(--g-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.radial__orbit{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line);
  animation:spinFlat 90s linear infinite}
@keyframes spinFlat{to{transform:rotate(360deg)}}
.radial__item{
  position:absolute;top:50%;left:50%;
  padding:9px 17px;border-radius:100px;white-space:nowrap;
  font-size:.75rem;font-weight:500;color:var(--soft);
  background:rgba(19,13,40,.92);box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(10px);
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a)));
  transition:color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.radial__item:hover{color:var(--light);background:rgba(46,33,89,.95);box-shadow:inset 0 0 0 1px var(--halo)}

/* ---- 24.6 ZOOM AU SCROLL (à propos) ---- */
.zoomer{position:relative;overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--sh-3),inset 0 0 0 1px var(--line)}
.zoomer img{
  width:100%;aspect-ratio:16/11;object-fit:cover;
  transform:scale(var(--z,1.24));transform-origin:center;
  transition:transform .12s linear;will-change:transform;
}
.zoomer__cap{
  position:absolute;left:50%;bottom:clamp(20px,3vw,34px);transform:translateX(-50%);
  z-index:2;text-align:center;width:min(86%,520px);
}
.zoomer__cap span{
  display:inline-block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--light);padding:8px 18px;border-radius:100px;
  background:rgba(6,4,14,.72);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line-2);
}
.zoomer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgba(6,4,14,.72) 100%);
}

/* ---- 24.7 RAIL HORIZONTAL À AIMANTATION (méthode) ---- */
.rail{
  display:flex;gap:clamp(14px,1.8vw,22px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding:4px clamp(20px,6vw,80px) 22px;
  margin-inline:calc(50% - 50vw);
  scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail>*{scroll-snap-align:center;flex:none;width:clamp(230px,23vw,290px)}

.rail-nav{display:flex;align-items:center;gap:14px;margin-top:6px}
.rail-nav__bar{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail-nav__fill{display:block;height:100%;width:30%;background:var(--g-aurora);border-radius:2px;
  transition:transform .25s var(--ease);transform-origin:left}
.rail-nav__hint{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);white-space:nowrap}

/* ---- 24.8 MOSAÏQUE IRRÉGULIÈRE (pratiques) ---- */
.mosaic{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(130px,auto);gap:14px;perspective:var(--persp);
}
.mosaic>*:nth-child(1){grid-column:span 3;grid-row:span 2}
.mosaic>*:nth-child(2){grid-column:span 3}
.mosaic>*:nth-child(3){grid-column:span 2}
.mosaic>*:nth-child(4){grid-column:span 2}
.mosaic>*:nth-child(5){grid-column:span 4}
.mosaic .card{display:flex;flex-direction:column;justify-content:flex-end}

/* ---- 24.9 COUCHES SUPERPOSÉES (cabinet) ---- */
.layered{position:relative;display:grid;grid-template-columns:1fr;align-items:center}
.layered__back{
  grid-area:1/1;width:82%;margin-left:auto;
  border-radius:var(--r-xl);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),var(--sh-2);
  transform:rotateY(-6deg) rotateX(3deg);transform-style:preserve-3d;
  transition:transform .9s var(--ease-3d);
}
.layered:hover .layered__back{transform:rotateY(-2deg) rotateX(1deg)}
.layered__front{
  grid-area:1/1;width:min(56%,470px);z-index:2;
  padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  background:linear-gradient(162deg,rgba(46,33,89,.95),rgba(11,8,24,.97));
  box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-3);
  backdrop-filter:blur(24px);
}

/* ---- 24.10 FAQ EN DEUX COLONNES DÉCALÉES ---- */
.faq--cols{
  max-width:none;
  columns:2;column-gap:14px;display:block;
}
.faq--cols .faq__item{break-inside:avoid;margin-bottom:11px;display:inline-block;width:100%}
.faq--cols .faq__more{columns:1;column-span:all;margin-top:12px}

/* ---- 24.11 BANDES DÉCALÉES (sections alternées) ---- */
.section--offset .wrap{--shift:clamp(0px,3vw,56px)}
.section--offset .head{margin-left:var(--shift)}

/* ==========================================================================
   25. RESPONSIVE — les mises en page non linéaires se déplient
   ========================================================================== */
@media (max-width:1024px){
  .sticky-split{grid-template-columns:1fr}
  .sticky-split__media{position:relative;top:auto}
  .layered__back{width:100%;margin-left:0;transform:none}
  .layered__front{width:100%;margin-top:-40px;position:relative}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mosaic>*:nth-child(1){grid-column:span 4;grid-row:span 1}
  .mosaic>*:nth-child(n+2){grid-column:span 2}
  .diag{grid-template-columns:1fr}
  .diag>.pillar:nth-of-type(2),.diag>.pillar:nth-of-type(3){margin-top:0}
  .diag-line{display:none}
}

@media (max-width:860px){
  /* Le défilement horizontal épinglé devient un carrousel tactile */
  .hsec{height:auto!important}
  .hsec__pin{position:relative;height:auto;display:block;padding-block:0}
  .hsec__head{width:min(100% - 32px,var(--wrap))}
  .hsec__viewport{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
  .hsec__viewport::-webkit-scrollbar{display:none}
  .hsec__track{transform:none!important;padding-inline:16px;gap:14px;padding-bottom:18px}
  .hsec__track>*{width:min(78vw,300px);scroll-snap-align:center}
  .hsec__bar{width:min(100% - 32px,var(--wrap))}

  .radial{width:min(100%,400px)}
  .radial__item{font-size:.68rem;padding:7px 13px}
  .faq--cols{columns:1}
  .rail{padding-inline:16px}
  .rail>*{width:min(74vw,270px)}
  .marquee__track{animation-duration:28s}
  .mq{padding-inline:22px;gap:12px}
}

@media (max-width:560px){
  .mosaic{grid-template-columns:1fr}
  .mosaic>*{grid-column:span 1!important;grid-row:span 1!important}
  .radial{display:none}
  .radial-fallback{display:flex!important}
}

/* ---------- 26. RESPONSIVE ---------- */
@media (max-width:1024px){
  .hero__in{grid-template-columns:1fr;gap:44px}
  .orbit{max-width:400px;order:-1}
  .pillars{grid-template-columns:1fr}
  .split,.split--rev,.cabinet,.zone,.form-grid{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  /* Bloc marque sur toute la largeur, les deux listes côte à côte */
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid>*:first-child{grid-column:1/-1}
  .stats__in{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  :root{--bar-h:66px}
  .mobilebar{display:flex}
  .wa-float{width:50px;height:50px;right:16px}
  .wa-float svg{width:25px;height:25px}
  .dispo__actions{margin-left:0;width:100%}
  .dispo__actions .btn{flex:1}
  .hero{min-height:auto;padding-block:104px 52px}
  .hero__in{gap:30px}
  .hero h1{margin-bottom:18px}
  .hero .lede{margin-bottom:26px}
  .orbit{max-width:min(64vw,270px)}
  .path__track{transform:none;flex-direction:column;gap:0;align-items:flex-start;padding-left:9px}
  .path__track::before{left:16px;right:auto;top:8%;bottom:8%;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--veil) 14%,var(--halo) 50%,var(--solar) 86%,transparent)}
  .path__step{flex-direction:row;align-items:center;gap:18px;padding-block:13px;width:100%}
  .path__lbl{text-align:left}
  .story{width:100%;padding:28px 24px}
  .story[data-pos="1"]{transform:translate3d(-42%,20px,-180px) rotateY(-18deg)}
  .story[data-pos="2"]{transform:translate3d(-34%,36px,-340px) rotateY(-26deg)}
  /* On garde deux colonnes pour Contact / Informations : empiler les
     trois blocs allongeait le pied de page au-delà d'un écran. */
  .footer__grid{grid-template-columns:1fr 1fr;gap:20px}
  .footer__bar{justify-content:flex-start;gap:4px 14px}
  .f-row{grid-template-columns:1fr}
}

@media (max-width:560px){
  .wrap{width:min(100% - 32px,var(--wrap))}
  .stats__in{grid-template-columns:1fr 1fr}
  .hero .cta-row .btn{width:100%}
  .final__in .cta-row .btn{width:100%}
  .stories__stage{height:clamp(300px,90vw,380px)}
}

/* ---------- 25. MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rv{opacity:1;transform:none}
  .cosmos__aurora span{animation:none}
  .orbit,.orbit__ring{transform:none!important}
  .orbit__ring:nth-child(1){transform:rotateX(74deg)!important}
  .orbit__ring:nth-child(2){transform:rotateX(70deg) rotateY(22deg)!important}
  .orbit__ring:nth-child(3){transform:rotateX(78deg) rotateY(-18deg)!important}
  .orbit__dot{display:none}
  .path__step .path__bead{opacity:1;transform:scale(1)}
  .story{transition:none}
  .split__media,.zone__map{transform:none!important}

  /* Mises en page non linéaires : on retire le mouvement, on garde la structure */
  .marquee__track{animation:none;width:100%;justify-content:flex-start;overflow-x:auto}
  .hsec{height:auto!important}
  .hsec__pin{position:relative;height:auto;display:block}
  .hsec__viewport{overflow-x:auto}
  .hsec__track{transform:none!important;padding-inline:20px}
  .radial__orbit{animation:none}
  .zoomer img{transform:none!important}
  .layered__back{transform:none!important}
  .diag>.pillar{margin-top:0}
  .diag-line path{stroke-dashoffset:0}
}