/* ════════════════════════════════════════════════════════════════════
   Mavelyx — sections GetLayers intégrées aux pages intérieures.
   Dringle (panneau média), Colonnade, Roadmap Ascent, Cards Cascade,
   Slider Slipstream. Mécanique d'origine préservée ; peau Mavelyx.
   ════════════════════════════════════════════════════════════════════ */
:root{--gl-night:#060b17;--gl-navy:#0b1630;--gl-blue:#3471db;--gl-soft:#9dbcff;--gl-tint:#e8f0fd;--gl-ink:#202936;--gl-muted:#697586;--gl-line:#e0e6ef;--gl-ease:cubic-bezier(.22,.61,.36,1)}

/* ───────────────────────── 1. DRINGLE — ouverture « panneau média » ───────────────────────── */
.dr-hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:stretch;background:none!important;color:inherit!important;padding:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;margin-bottom:clamp(40px,6vw,80px)!important}
.dr-hero::after{display:none}
.dr-hero>div:first-child{display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,2vw,24px) 0}
.dr-hero h1{color:var(--gl-ink)}
.dr-hero .detail-description{color:var(--gl-muted)!important}
.dr-hero .eyebrow{color:var(--gl-blue)!important}
.dr-hero a.seo-secondary{display:inline-flex;align-items:center;min-height:46px;padding:12px 18px;border-radius:9px;margin-left:10px;font-weight:700;text-decoration:none;color:var(--gl-ink);border:1px solid #cbd8ee}
/* le panneau : sombre, arrondi, vidéo en fond, modèle chromé par-dessus, cartes de verre */
.dr-panel{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:#05081a;min-height:clamp(420px,44vw,600px);box-shadow:0 50px 100px -40px rgba(6,11,23,.7);opacity:0;transform:scale(.96);transition:opacity .9s var(--gl-ease) .14s,transform .9s var(--gl-ease) .14s}
.dr-panel.-in{opacity:1;transform:none}
.dr-panel video,.dr-panel .dr-poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.dr-panel .dr-model{position:absolute;inset:0;z-index:1;pointer-events:none}
.dr-panel .dr-model canvas{display:block;width:100%;height:100%}
.dr-panel .dr-over{position:absolute;left:30px;top:30px;z-index:3;width:14.3rem;max-width:46%;margin:0;font-size:clamp(14px,1.2vw,18px);line-height:1.2;text-transform:uppercase;color:#fff;letter-spacing:.02em;opacity:0;transform:translateY(10px);transition:opacity .8s var(--gl-ease) .54s,transform .8s var(--gl-ease) .54s}
.dr-panel.-in .dr-over{opacity:1;transform:none}
/* la capture réelle flotte dans le panneau comme un écran */
.dr-panel .dr-screen{position:absolute;z-index:2;right:-6%;top:12%;width:min(78%,560px);border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -24px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);transform:perspective(1400px) rotateY(-14deg) rotateX(6deg) translateY(16px);opacity:0;transition:opacity 1s var(--gl-ease) .4s,transform 1.1s var(--gl-ease) .4s;background:#fff}
.dr-panel.-in .dr-screen{opacity:1;transform:perspective(1400px) rotateY(-10deg) rotateX(4deg) translateY(0)}
.dr-panel .dr-screen img{display:block;width:100%;height:auto}
.dr-panel .dr-screen figcaption{display:none}
.dr-panel .dr-screen figure{margin:0}
.dr-panel .dr-screen .live-preview,.dr-panel .dr-screen .product-view{margin:0!important;border-radius:0!important;box-shadow:none!important;border:0!important}
.dr-panel .dr-screen .live-preview{background:#fff;padding:0!important}
.dr-panel .dr-screen .product-view{transform:scale(.92);transform-origin:0 0;width:108.7%}
/* cartes de verre */
.dr-card{position:absolute;z-index:3;display:flex;flex-direction:column;justify-content:space-between;width:9.875rem;height:10.625rem;max-width:40%;padding:1.25rem;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);color:#fff;opacity:0;transform:translateY(18px);transition:opacity .8s var(--gl-ease),transform .9s var(--gl-ease)}
.dr-panel.-in .dr-card{opacity:1;transform:none}
.dr-card b{display:block;font-size:clamp(28px,2.6vw,42px);line-height:1;font-weight:400;letter-spacing:-.02em}
.dr-card span{display:block;font-size:14px;line-height:1.25}
.dr-card.-a{left:30px;bottom:10px;transition-delay:.78s}
.dr-card.-b{left:calc(30px + 9.875rem + 10px);bottom:10px;transition-delay:.88s}
.dr-card.-c{right:10px;bottom:10px;transition-delay:.98s}
.dr-note{position:absolute;right:14px;top:14px;z-index:3;margin:0;padding:5px 9px;border-radius:999px;background:rgba(5,8,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:980px){
  .dr-hero{grid-template-columns:minmax(0,1fr)}
  .dr-panel{min-height:min(118vw,560px)}
  .dr-panel .dr-screen{right:-10%;top:16%;width:88%}
  .dr-card{width:8.6rem;height:9rem}
  .dr-card.-b{left:calc(30px + 8.6rem + 10px)}
  .dr-hero a.seo-secondary{margin:10px 0 0}
}
@media (max-width:560px){.dr-card.-c{display:none}.dr-panel .dr-over{font-size:14px}}
@media (prefers-reduced-motion:reduce){.dr-panel,.dr-panel .dr-screen,.dr-card,.dr-panel .dr-over{transition:none;opacity:1;transform:none}}

/* ───────────────────────── 2. COLONNADE — étapes métier en colonnes ───────────────────────── */
.cl{--paper:#f6f8fc;--ink:var(--gl-ink);--ink-2:var(--gl-muted);--line:rgba(32,41,54,.14);--accent:var(--gl-blue);--slide:900ms;--ease:cubic-bezier(.76,0,.18,1);
  position:relative;overflow:hidden;height:min(82vh,760px);min-height:560px;border-radius:22px;border:1px solid var(--gl-line);background:var(--paper);font-family:inherit;color:var(--ink);margin-top:28px}
.cl-strip{position:absolute;inset:0;display:flex;background:var(--paper)}
.cl-col{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;border-left:1px solid var(--line);cursor:pointer;outline:none;transition:flex-grow var(--slide) var(--ease)}
.cl-col:first-child{border-left:0}
.cl-col.-active{flex-grow:2.1}
.cl-col::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .4s ease}
.cl-col:focus-visible::after{box-shadow:inset 0 0 0 2px var(--accent)}
/* la couche « art » : part du bas, sort par le haut (un entre, un sort) */
.cl-media{position:absolute;inset:0;z-index:1;transform:translateY(101%);transition:transform var(--slide) var(--ease);will-change:transform}
.cl-media.-in{transform:translateY(0)}
.cl-media.-out{transform:translateY(-101%)}
.cl-media::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(246,248,252,.5) 0%,rgba(246,248,252,0) 24%,rgba(6,11,23,0) 60%,rgba(6,11,23,.72) 100%)}
.cl-scene{position:absolute;inset:0;overflow:hidden;background:var(--s-bg)}
.cl-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 62% at 28% -12%,rgba(255,255,255,.55),rgba(255,255,255,0) 58%);mix-blend-mode:soft-light}
.mx-photo{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .6s ease}
.mx-photo.-ready{opacity:1}
.cl-scene .mx-photo{opacity:0}.cl-scene .mx-photo.-ready{opacity:.96}
.cl-scene--1{--s-bg:radial-gradient(120% 95% at 16% 10%,#f4f8ff 0%,rgba(244,248,255,0) 54%),radial-gradient(95% 85% at 90% 20%,#cfe0fb 0%,rgba(207,224,251,0) 58%),radial-gradient(130% 120% at 74% 104%,#5a86d8 0%,rgba(90,134,216,0) 60%),linear-gradient(148deg,#e7eefb 0%,#c9d9f3 54%,#8fb0e6 100%)}
.cl-scene--2{--s-bg:radial-gradient(115% 95% at 84% 12%,#f4f8fc 0%,rgba(244,248,252,0) 54%),radial-gradient(100% 90% at 10% 30%,#d6e3f0 0%,rgba(214,227,240,0) 58%),radial-gradient(130% 120% at 60% 108%,#2f5fb8 0%,rgba(47,95,184,0) 60%),linear-gradient(158deg,#edf3f9 0%,#cfdcee 54%,#9fb6d6 100%)}
.cl-scene--3{--s-bg:radial-gradient(115% 92% at 22% 14%,#eef3ff 0%,rgba(238,243,255,0) 54%),radial-gradient(100% 95% at 88% 28%,#b9cdf3 0%,rgba(185,205,243,0) 58%),radial-gradient(130% 125% at 70% 104%,#1f4fae 0%,rgba(31,79,174,0) 60%),linear-gradient(153deg,#e4ebf8 0%,#bccdec 54%,#7f9fd6 100%)}
.cl-scene--4{--s-bg:radial-gradient(115% 92% at 80% 12%,#f1f4fa 0%,rgba(241,244,250,0) 52%),radial-gradient(110% 100% at 14% 34%,#c7d6f0 0%,rgba(199,214,240,0) 58%),radial-gradient(135% 130% at 62% 106%,#0b1630 0%,rgba(11,22,48,0) 60%),linear-gradient(153deg,#e9eef8 0%,#c9d6ee 54%,#8da6cf 100%)}
.cl-scene--5{--s-bg:radial-gradient(120% 95% at 16% 10%,#f6f8ff 0%,rgba(246,248,255,0) 54%),radial-gradient(95% 85% at 90% 20%,#d9e4f8 0%,rgba(217,228,248,0) 58%),radial-gradient(130% 120% at 74% 104%,#3471db 0%,rgba(52,113,219,0) 60%),linear-gradient(148deg,#eef2fb 0%,#d4dff4 54%,#9ab7e8 100%)}
.cl-cap{position:absolute;top:20px;left:20px;right:16px;z-index:2;display:flex;align-items:baseline;gap:9px;font-size:11px;color:var(--ink-2);letter-spacing:.02em;opacity:0;transform:translateY(-6px);transition:opacity .5s ease .1s,transform .5s var(--ease) .1s}
.cl-col.-active .cl-cap{opacity:1;transform:none}
.cl-cap b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.1em}
.cl-name{position:absolute;left:20px;bottom:26px;right:16px;z-index:2;margin:0;font-weight:700;font-size:clamp(14px,1.4vw,18px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);transition:color .4s ease}
.cl-name span{display:block;color:var(--ink-2);font-weight:500;text-transform:none;letter-spacing:0;font-size:.85em;margin-top:4px;transition:color .4s ease}
.cl-col.-active .cl-name,.cl-col.-active .cl-name span{color:#fff;text-shadow:0 1px 12px rgba(6,11,23,.6)}
/* le grand titre qui bascule en synchronisation */
.cl-headline{position:absolute;top:clamp(28px,6vh,60px);left:50%;transform:translateX(-50%);z-index:5;width:min(92%,720px);height:clamp(190px,34vh,290px);overflow:hidden;pointer-events:none;text-align:center}
.cl-head{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:22px 26px 24px;border-radius:18px;background:rgba(246,248,252,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -30px rgba(6,11,23,.4);transform:translateY(112%);opacity:0;transition:transform var(--slide) var(--ease),opacity calc(var(--slide) * .7) ease}
.cl-head.-in{transform:translateY(0);opacity:1}
.cl-head.-out{transform:translateY(-112%);opacity:0}
.cl-head h3{margin:0!important;font-weight:400;font-size:clamp(24px,3.6vw,46px)!important;line-height:1.04!important;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.cl-head h3 strong{font-weight:700}
.cl-head p{margin:0;max-width:56ch;font-size:15px;line-height:1.55;color:var(--ink-2)}
.cl-head .cl-pill{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(246,248,252,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ink);text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .2s ease}
.cl-head .cl-pill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-1px)}
@media (max-width:860px){
  .cl{height:auto;min-height:0}
  .cl-strip{position:relative;flex-direction:column;height:min(120vw,560px)}
  .cl-col{border-left:0;border-top:1px solid var(--line);min-height:64px}
  .cl-col:not(.-active) .cl-name span{display:none}
  .cl-col:not(.-active) .cl-name{bottom:auto;top:50%;transform:translateY(-50%)}
  .cl-col:first-child{border-top:0}
  .cl-col.-active{flex-grow:3.4}
  .cl-cap{top:14px}
  .cl-name{bottom:14px;font-size:14px}
  .cl-headline{position:relative;top:auto;left:auto;transform:none;width:auto;height:auto;padding:24px 20px 26px}
  .cl-head{position:relative;transform:translateY(20px);background:none;backdrop-filter:none;box-shadow:none;padding:0}
  .cl-head:not(.-in){display:none}
  .cl-head h3{font-size:clamp(20px,6vw,28px)!important}
}
@media (prefers-reduced-motion:reduce){.cl-media,.cl-head,.cl-col{transition-duration:.01ms}}

/* ───────────────────────── 3. ROADMAP ASCENT — pilotage dans le temps ───────────────────────── */
.as{--acc:#9dbcff;--acc-2:#3471db;position:relative;margin:28px calc(50% - 50vw) 0;width:100vw;color:#eef2f8}
.as-scroll{position:relative}
.as-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(70% 80% at 96% 0%,rgba(52,113,219,.26),transparent 52%),radial-gradient(60% 90% at 100% 50%,rgba(31,79,174,.14),transparent 60%),var(--gl-night);opacity:0;transition:opacity .9s ease}
.as.-ready .as-pin{opacity:1}
.as-pix{position:absolute;right:0;top:0;width:56vw;height:100vh;z-index:0;pointer-events:none}
.as-spine{position:absolute;top:0;height:100%;width:1px;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(233,240,250,.16) 16%,rgba(233,240,250,.16) 84%,transparent)}
.as-months{position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent 2%,#000 26%,#000 74%,transparent 98%);mask:linear-gradient(180deg,transparent 2%,#000 26%,#000 74%,transparent 98%)}
.as-ml{position:absolute;text-align:right;white-space:nowrap;transform-origin:100% 50%;will-change:transform,opacity;font-size:14px;font-weight:700;letter-spacing:.01em;color:#eef4fa}
.as-mt{position:absolute;height:1px;transform:translateY(-50%);background:rgba(233,240,250,.3)}
.as-glow{position:absolute;width:320px;height:320px;z-index:2;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;filter:blur(3px);background:radial-gradient(circle,rgba(157,188,255,.42) 0%,rgba(157,188,255,.1) 36%,transparent 66%)}
.as-node{position:absolute;z-index:3;transform:translate(-50%,-50%);width:var(--cd,76px);height:var(--cd,76px);border-radius:50%;display:grid;place-items:center;pointer-events:none}
.as-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--acc) calc(var(--p,0) * 360deg),rgba(255,255,255,.09) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px))}
.as-face{position:absolute;inset:5px;border-radius:50%;background:radial-gradient(120% 120% at 50% 18%,#17233f,#090f1f 82%);border:1px solid rgba(233,240,250,.09);box-shadow:0 14px 40px -10px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);display:grid;place-items:center}
.as-face svg{width:42%;height:42%;stroke:#e6edf8;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;animation:asBob 2.6s ease-in-out infinite}
@keyframes asBob{0%,100%{transform:translateY(1.5px)}50%{transform:translateY(-2.5px)}}
.as-right{position:absolute;left:52%;top:50%;transform:translateY(calc(-100% - 14px));z-index:4;width:min(40vw,460px);display:flex;flex-direction:column}
.as-right::before,.as-metric::before{content:"";position:absolute;inset:-34px -60px -34px -30px;z-index:-1;background:radial-gradient(78% 88% at 32% 50%,rgba(6,11,23,.74),transparent 72%);pointer-events:none}
.as-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#dce7ff;background:rgba(157,188,255,.08);border:1px solid rgba(157,188,255,.28)}
.as-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.as-title{margin:20px 0 0!important;font-size:clamp(26px,3.4vw,42px)!important;font-weight:700;letter-spacing:-.02em;line-height:1.05!important;color:#f5f8ff!important}
.as-sub{margin:12px 0 0!important;max-width:36ch;font-size:15px!important;line-height:1.5!important;color:rgba(233,240,250,.62)!important}
.as-metric{position:absolute;left:52%;top:50%;transform:translateY(14px);z-index:4;width:min(40vw,460px)}
.as-odo{display:flex;align-items:stretch;font-weight:800;letter-spacing:-.02em;line-height:1;font-size:clamp(46px,7.4vw,86px);color:#f5f8ff;font-variant-numeric:tabular-nums;filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
.as-d{position:relative;overflow:hidden;height:1em;width:.62em;transition:width .3s ease,opacity .3s ease;-webkit-mask:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.as-strip{display:flex;flex-direction:column;will-change:transform}
.as-strip span{height:1em;display:flex;align-items:center;justify-content:center}
.as-sep{width:.3em;transition:width .3s ease;display:flex;align-items:flex-end;justify-content:center}
.as-unit{width:.7em;display:flex;align-items:center;justify-content:center;font-weight:400;font-size:.6em}
.as-reg{margin-top:8px;font-size:14px;font-weight:500;letter-spacing:.01em;color:rgba(233,240,250,.55)}
@keyframes asRise{from{opacity:0;transform:translateY(12px);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
.as .anim{animation:asRise .6s var(--gl-ease) both}
.as-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(233,240,250,.45);transition:opacity .5s ease}
.as.-scrolled .as-hint{opacity:0}
.as-hint .bar{width:1px;height:34px;background:linear-gradient(rgba(233,240,250,.5),transparent)}
.as-fine{position:absolute;left:clamp(18px,4vw,48px);bottom:22px;z-index:5;margin:0;font-size:11px;letter-spacing:.06em;color:rgba(233,240,250,.4)}
@media (prefers-reduced-motion:reduce){.as-face svg{animation:none}.as .anim{animation:none}}
@media (min-width:721px) and (max-width:1024px){.as-right,.as-metric{left:46%;width:min(48vw,400px)}.as-pix{width:46vw}.as-title{font-size:clamp(24px,3.6vw,34px)!important}}
@media (max-width:720px){
  .as-pix{width:48vw;height:26vh}
  .as-ml{text-shadow:0 1px 10px rgba(6,11,23,.85)}
  .as-right{left:6vw;right:6vw;top:5.5vh;width:auto;transform:none}
  .as-title{font-size:30px!important;margin-top:13px!important}
  .as-sub{margin-top:10px!important;font-size:14px!important;max-width:34ch}
  .as-metric{left:6vw;right:auto;top:auto;bottom:7vh;width:auto;transform:none}
  .as-odo{font-size:clamp(42px,14.5vw,66px)}
  .as-right::before,.as-metric::before{display:none}
  .as-glow{width:220px;height:220px}
  .as-hint,.as-fine{display:none}
}

/* ───────────────────────── 4. CARDS CASCADE — fonctionnalités en cascade ───────────────────────── */
.cc{--bg-1:#f7f9fd;--bg-2:#e9eff9;--ink:var(--gl-ink);--muted:rgba(32,41,54,.5);--line:rgba(32,41,54,.14);--accent:var(--gl-blue);position:relative;margin:28px calc(50% - 50vw) 0;width:100vw}
.cc-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:radial-gradient(130% 100% at 50% 12%,var(--bg-1) 0%,var(--bg-2) 78%);color:var(--ink);user-select:none;-webkit-user-select:none}
.cc-stage{position:absolute;inset:0;perspective:var(--persp,1500px);perspective-origin:var(--vanishX,50%) var(--vanish,40%)}
.cc-deck{position:absolute;left:var(--deckX,50%);top:var(--deckY,50%);width:0;height:0;transform-style:preserve-3d}
.cc-card{position:absolute;width:var(--cw,380px);height:var(--ch,440px);left:calc(var(--cw,380px) / -2);top:calc(var(--ch,440px) / -2);transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;margin:0!important;padding:0!important;border:0!important;background:none!important}
.cc-face{position:absolute;inset:0;border-radius:var(--radius,26px);overflow:hidden;background:var(--gl-navy);box-shadow:0 2px 3px rgba(20,24,40,.1),0 24px 44px -18px rgba(20,24,40,.4),inset 0 0 0 1px rgba(255,255,255,.06);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;filter:saturate(1.05)}
.cc-art{position:absolute;inset:0;background:var(--art)}
.cc-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(6,11,23,.9) 0%,rgba(6,11,23,.5) 36%,rgba(6,11,23,0) 64%),linear-gradient(to bottom,rgba(6,11,23,.38) 0%,rgba(6,11,23,0) 22%)}
.cc-face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(160deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 30%,rgba(0,0,0,.2) 100%);opacity:var(--sheen,.5);mix-blend-mode:soft-light}
.cc-body{position:absolute;inset:0;z-index:2;padding:clamp(18px,2.4vw,28px);display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.cc-top{display:flex;align-items:center;justify-content:space-between}
.cc-idx{font:700 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;padding:5px 9px;border-radius:8px;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cc-tag{font:700 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82);max-width:55%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-kicker{margin:0 0 6px!important;font:700 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72)!important}
.cc-title{margin:0!important;font-size:clamp(22px,2.6vw,34px)!important;font-weight:700;letter-spacing:-.02em;line-height:1.05!important;color:#fff!important;text-shadow:0 1px 20px rgba(0,0,0,.18)}
.cc-meta{margin:10px 0 0!important;font-size:14px!important;line-height:1.5!important;color:rgba(255,255,255,.8)!important;max-width:34ch}
.cc-hero{position:absolute;left:clamp(24px,6vw,92px);top:50%;transform:translateY(-50%);z-index:5;width:min(40vw,460px);display:flex;flex-direction:column;align-items:flex-start}
.cc-eyebrow{display:inline-flex;align-items:center;gap:9px;font:700 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(16px,2.4vw,26px)}
.cc-eyebrow::before{content:"";width:clamp(22px,3vw,40px);height:1px;background:currentColor;opacity:.6}
.cc-h{margin:0!important;font-weight:800;font-size:clamp(40px,6.4vw,96px)!important;line-height:.92!important;letter-spacing:-.035em;color:var(--ink)!important;text-wrap:balance}
.cc-h.-long{font-size:clamp(34px,4.4vw,64px)!important;line-height:.98!important}
.cc-h em{font-style:italic;font-weight:700;background:linear-gradient(105deg,var(--accent),#1f4fae 55%,#9dbcff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.1em}
.cc-sub{margin:clamp(18px,2.4vw,28px) 0 0!important;max-width:34ch;font-size:clamp(14px,1.15vw,16.5px)!important;line-height:1.55!important;color:rgba(32,41,54,.65)!important}
.cc-cta{margin-top:clamp(24px,3vw,38px);display:inline-flex;align-items:center;gap:12px;padding:14px 22px 14px 24px;border:0;border-radius:999px;cursor:pointer;font:700 14px/1 inherit;letter-spacing:.01em;color:#fff;background:var(--ink);box-shadow:0 10px 26px -10px rgba(20,21,26,.55);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.cc-cta:hover{transform:translateY(-2px);background:var(--accent)}
.cc-cta .ico{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18)}
.cc-rail{position:absolute;right:clamp(20px,3.4vw,56px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:16px}
.cc-count{display:flex;align-items:baseline;gap:2px;letter-spacing:-.02em;line-height:1}
.cc-cur{font-size:clamp(30px,3.4vw,46px);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.cc-tot{font-size:clamp(13px,1.2vw,16px);font-weight:700;color:var(--muted)}
.cc-track{position:relative;width:22px;height:clamp(210px,42vh,430px);cursor:pointer;touch-action:none}
.cc-track::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:var(--line);border-radius:2px}
.cc-fill{position:absolute;top:0;left:50%;width:2px;height:0;transform:translateX(-50%);border-radius:2px;background:linear-gradient(var(--accent),rgba(52,113,219,.35));box-shadow:0 0 12px rgba(52,113,219,.55)}
.cc-thumb{position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(52,113,219,.2),0 0 16px rgba(52,113,219,.85)}
.cc-tick{position:absolute;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);padding:0;border:0;background:transparent;cursor:pointer}
.cc-tick::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.cc-tick:hover::before{background:#9dbcff;transform:translate(-50%,-50%) scale(1.3)}
.cc-tick[aria-current="true"]::before{opacity:0}
.cc-label{font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--ink);text-transform:uppercase;opacity:.78;writing-mode:vertical-rl}
.cc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:880px){
  .cc-hero{top:clamp(28px,7vw,60px);left:0;right:0;width:auto;transform:none;align-items:center;text-align:center;padding:0 24px}
  .cc-sub{display:none}
  .cc-h{font-size:clamp(36px,12vw,72px)!important}
  .cc-cta{margin-top:18px}
  .cc-rail{right:clamp(10px,3vw,18px);top:72%}
  .cc-track{height:clamp(150px,30vh,280px)}
  .cc-label{display:none}
}

/* ───────────────────────── 5. SLIDER SLIPSTREAM — les autres métiers ───────────────────────── */
.ss{--bg:#060b17;--corner:14px;--lift:1.035;--title-size:19px;--meta-size:11.5px;position:relative;overflow:hidden;margin:clamp(48px,7vw,90px) calc(50% - 50vw) 0;width:100vw;height:min(88vh,760px);min-height:520px;color:#fff;isolation:isolate}
.ss-stage{position:absolute;inset:0;overflow:hidden;z-index:1;background:radial-gradient(130% 100% at 72% 62%,#13224a 0%,var(--bg) 62%,#03060f 100%);perspective:1500px;perspective-origin:50% 64%;cursor:grab;touch-action:pan-y;user-select:none;outline:none}
.ss-stage.-drag{cursor:grabbing}
.ss-belt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--tilt,-32deg))}
.ss-card{position:absolute;left:50%;top:var(--cy,64%);width:var(--cw,230px);height:var(--ch,308px);margin-left:calc(var(--cw,230px) / -2);margin-top:calc(var(--ch,308px) / -2);transform-style:preserve-3d;will-change:transform,opacity;text-decoration:none;color:#fff}
.ss-inner{position:absolute;inset:0;border-radius:var(--corner);overflow:hidden;background:#0d1526;box-shadow:0 40px 80px -24px rgba(0,0,0,.72),0 8px 24px -10px rgba(0,0,0,.6);transition:transform .34s var(--gl-ease),box-shadow .34s ease;will-change:transform}
.ss-card.-active .ss-inner{transform:scale(var(--lift));box-shadow:0 52px 100px -24px rgba(0,0,0,.8),0 10px 30px -10px rgba(0,0,0,.7)}
.ss-inner .mx-photo{background-color:#0d1526}
.ss-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(4,6,14,.94) 0%,rgba(4,6,14,.6) 26%,rgba(4,6,14,.08) 48%,rgba(4,6,14,0) 62%)}
.ss-foot{position:absolute;left:16px;right:14px;bottom:15px;z-index:2}
.ss-title{margin:0!important;font-weight:700;font-size:var(--title-size)!important;line-height:1.15!important;letter-spacing:-.01em;color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.ss-meta{margin:7px 0 0!important;font-size:var(--meta-size)!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)!important}
.ss-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to right,#03060f 0%,rgba(3,6,15,.55) 12%,rgba(3,6,15,0) 34%),linear-gradient(to bottom,rgba(3,6,15,0) 62%,rgba(3,6,15,.5) 100%)}
.ss-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(20px,4vw,56px);pointer-events:none}
.ss-brand{display:flex;align-items:center;gap:14px;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ss-brand .rule{width:34px;height:1px;background:rgba(255,255,255,.5);display:inline-block}
.ss-lede{position:absolute;top:clamp(130px,19vh,190px);left:0;right:0;z-index:4;margin:0!important;padding:0 clamp(22px,6vw,48px);text-align:center;pointer-events:none;font-weight:300;letter-spacing:-.015em;font-size:clamp(24px,3.4vw,48px)!important;line-height:1.1!important;color:#fff!important;text-wrap:balance}
.ss-lede strong{font-weight:700}
.ss-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:5;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.36);pointer-events:none}
@media (max-width:720px){.ss{height:min(96vh,620px)}.ss-top{padding:18px 20px}.ss-lede{top:clamp(70px,11vh,110px)}}
@media (prefers-reduced-motion:reduce){.ss-inner{transition:none}}

/* ── Maquette vivante (capture → démonstration animée) ── */
.mx-live{position:relative;display:block;line-height:0;overflow:hidden;border-radius:inherit}
.mx-live img{display:block;width:100%;height:auto}
.mx-live-frame,.mvx-live figure .mx-live-frame,.mvx-live .detail-intro figure .mx-live-frame,.mvx-live .renovation-intro figure .mx-live-frame{position:absolute;left:0;top:0;width:1280px!important;height:720px!important;min-height:0!important;max-height:none!important;transform-origin:0 0;transform:scale(var(--mx-k,.5));display:block;border:0;opacity:0;transition:opacity .7s ease .2s;pointer-events:none;background:#fff}
.mx-live.-on .mx-live-frame{opacity:1}
.dr-panel .dr-screen .mx-live{display:block}