/* ================================================================
   VITRUM STUDIO — v2
   Tokens → Reset → Base → Cursor → Loader → Progress → Nav
   → Sections → Responsive
================================================================ */

/* ================================================================
   § 0 · MASQUAGE TEMPORAIRE
   Voir commentaire "HIDDEN BLOCKS" en haut de index.html pour la liste
   des sections masquées et la date. Retirer class="hidden-temp" pour
   réafficher un bloc.
================================================================ */
.hidden-temp { display: none; }

/* ================================================================
   § 1 · DESIGN TOKENS
================================================================ */
:root {
  /* Brand */
  --bl:     #004aad;
  --bl2:    #003490;
  --bl3:    #001232;
  --bl-rgb: 0,74,173;

  /* Surfaces (light) */
  --bg-body:        #f4f1eb;
  --bg-surface:     #ffffff;
  --bg-surface-alt: #eae7df;

  /* Text (light) */
  --text-main:    #06060e;
  --text-muted:   #606070;
  --text-subtle:  #9898a8;
  --text-inverse: #f4f1eb;

  /* Borders (light) */
  --border-subtle: rgba(var(--bl-rgb),.09);
  --border-mid:    rgba(var(--bl-rgb),.16);
  --border-strong: rgba(var(--bl-rgb),.26);

  /* Shadows (light) */
  --shadow-xs: 0 2px 8px   rgba(var(--bl-rgb),.05);
  --shadow-sm: 0 8px 32px  rgba(var(--bl-rgb),.09);
  --shadow-md: 0 24px 64px rgba(var(--bl-rgb),.12);
  --shadow-lg: 0 48px 96px rgba(var(--bl-rgb),.15);

  /* Nav */
  --nav-bg: rgba(244,241,235,.93);

  /* Motion */
  --ease:        cubic-bezier(0.23,1,0.32,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  /* Compat alias */
  --bor: var(--border-subtle);

  /* Components */
  --radius-btn:  10px;
  --radius-card: 20px;

  /* Button */
  --btn-trans:  transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s ease,border-color .25s ease,color .25s ease;
  --btn-lift:   translateY(-3px);
  --btn-shadow: 0 16px 48px rgba(var(--bl-rgb),.3);

  /* Card */
  --card-trans:  transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s ease;
  --card-lift:   translateY(-8px);
  --card-shadow: var(--shadow-md);
}

[data-theme="dark"] {
  --bg-body:        #040408;
  --bg-surface:     #0b0b10;
  --bg-surface-alt: #111118;

  --text-main:   #eeebe5;
  --text-muted:  #787890;
  --text-subtle: #46465a;

  --border-subtle: rgba(255,255,255,.055);
  --border-mid:    rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --shadow-xs:     0 2px 8px   rgba(0,0,0,.4);
  --shadow-sm:     0 8px 32px  rgba(0,0,0,.5);
  --shadow-md:     0 24px 64px rgba(0,0,0,.6);
  --shadow-lg:     0 48px 96px rgba(0,0,0,.7);

  --nav-bg: rgba(4,4,8,.93);
  --bl:     #2a78d6;
  --bl2:    #1e64bc;
}

/* ================================================================
   § 2 · RESET & BASE
================================================================ */
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { scroll-behavior:smooth }

body {
  font-family:'Montserrat',sans-serif;
  background:var(--bg-body);
  color:var(--text-main);
  cursor:none;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .4s ease,color .4s ease;
}

/* Film grain overlay */
body::after {
  content:'';position:fixed;inset:0;z-index:9990;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  opacity:.45;
}

@media(hover:none) { body { cursor:auto } }

/* ================================================================
   § 3 · CURSOR
================================================================ */
#cd {
  position:fixed;width:8px;height:8px;
  background:var(--bl);border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:opacity .2s,transform .15s;
  mix-blend-mode:multiply;
}
#cr {
  position:fixed;width:38px;height:38px;
  border:1.5px solid var(--bl);border-radius:50%;
  pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease),height .4s var(--ease),background .3s,border-radius .3s,opacity .25s;
}
#cr.big { width:64px;height:64px;background:rgba(var(--bl-rgb),.08) }
#cr.bar { width:2px;height:28px;border-radius:2px;background:var(--bl);border-color:transparent }
body.chov #cd { opacity:0 }
@media(hover:none) { #cd,#cr { display:none } }

/* ================================================================
   § 4 · SCROLL PROGRESS
================================================================ */
#progress {
  position:fixed;top:0;left:0;z-index:99999;
  height:2px;width:0%;
  background:linear-gradient(to right,var(--bl),#4a9eff);
  pointer-events:none;
  transition:width .08s linear;
}

/* ================================================================
   § 5 · LOADER
================================================================ */
#loader {
  position:fixed;inset:0;z-index:99980;
  background:var(--bl3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.l-center  { display:flex;flex-direction:column;align-items:center }
.l-name-row{ display:flex;align-items:baseline;gap:16px }
.l-grid    { position:absolute;inset:0;pointer-events:none }
.l-grid span { position:absolute;background:rgba(255,255,255,.025);transition:opacity 3s ease }
.l-grid span.vl { width:1px;top:0;bottom:0 }
.l-grid span.hl { height:1px;left:0;right:0 }

#l-num {
  position:absolute;bottom:52px;right:60px;
  font-family:'Cormorant Garamond',serif;
  font-size:88px;font-weight:300;
  color:rgba(255,255,255,.04);
  letter-spacing:-4px;line-height:1;user-select:none;
}
.l-name-wrap { overflow:hidden;margin-bottom:4px }
#l-vitrum { display:flex }
#l-vitrum span {
  font-family:'Montserrat',sans-serif;
  font-size:clamp(60px,13vw,160px);font-weight:700;color:#fff;
  opacity:0;transform:translateY(110%) skewY(5deg);
  display:inline-block;line-height:1;letter-spacing:-3px;
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}
#l-vitrum span.on { opacity:1;transform:none }
.l-studio-wrap { overflow:hidden }
#l-studio {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(50px,11vw,140px);font-weight:600;font-style:italic;
  color:#fff;opacity:0;transform:translateY(110%) skewY(5deg);
  transition:opacity .6s ease,transform .6s ease;letter-spacing:-1px;
}
#l-studio.on { opacity:1;transform:none }
#l-bar-wrap { width:min(480px,58vw);height:1px;background:rgba(255,255,255,.08);margin-top:40px;overflow:hidden }
#l-bar { height:1px;width:0;background:#fff;transition:width 2.6s var(--ease) }
#l-bar.go { width:100% }
#l-tag {
  position:absolute;bottom:56px;left:60px;
  font-family:'Cormorant Garamond',serif;
  font-size:15px;font-style:italic;
  color:rgba(255,255,255,.18);
  opacity:0;transition:opacity 1s ease .4s;
}
#l-tag.on { opacity:1 }
#loader.out { transform:translateY(-100%);transition:transform .95s cubic-bezier(.77,0,.18,1) }
#site { opacity:0;transition:opacity .6s ease .15s }
#site.on { opacity:1 }

/* ================================================================
   § 6 · NAV
================================================================ */
nav {
  position:fixed;top:0;left:0;right:0;z-index:5000;
  height:72px;padding:0 64px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s,box-shadow .4s,height .4s;
}
nav.sc {
  height:64px;
  background:var(--nav-bg);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 var(--border-subtle);
}
.logo { text-decoration:none;cursor:none;display:flex;align-items:baseline;gap:6px;line-height:1 }
.logo-v { font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--bl);letter-spacing:2.5px;text-transform:uppercase }
.logo-s { font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:21px;color:var(--bl) }
.nav-ul { display:flex;align-items:center;gap:36px;list-style:none }
.nav-ul a {
  font-size:10.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--text-main);text-decoration:none;cursor:none;
  position:relative;padding-bottom:4px;transition:color .25s;
}
.nav-ul a::after {
  content:'';position:absolute;bottom:0;left:50%;right:50%;
  height:1px;background:var(--bl);transition:left .3s var(--ease),right .3s var(--ease);
}
.nav-ul a:hover { color:var(--bl) }
.nav-ul a:hover::after { left:0;right:0 }

/* Theme toggle */
.theme-toggle {
  width:42px;height:23px;
  background:var(--bg-surface-alt);border:1px solid var(--border-subtle);
  border-radius:12px;position:relative;cursor:none;
  display:flex;align-items:center;padding:0;outline:none;
  transition:background-color .3s,border-color .3s;
}
.theme-toggle:hover { border-color:var(--bl) }
.tt-circle {
  width:15px;height:15px;background:var(--bl);border-radius:50%;
  position:absolute;top:3px;left:3px;
  transition:transform .4s var(--ease);
}
[data-theme="dark"] .tt-circle { transform:translateX(19px) }

/* CTA button in nav */
.ncta {
  background:var(--bl) !important;color:#fff !important;
  padding:11px 26px !important;line-height:1;border-radius:var(--radius-btn);
  display:inline-flex;align-items:center;
  transition:var(--btn-trans) !important;
  font-size:10.5px !important;letter-spacing:1.2px !important;
}
.ncta:hover { background:var(--bl2) !important;box-shadow:var(--btn-shadow) !important;transform:var(--btn-lift) }
.ncta::after { display:none !important }

/* Hamburger */
.ham { display:none;flex-direction:column;gap:5px;cursor:none }
.ham span { display:block;width:24px;height:1.5px;background:var(--bl);transition:transform .35s,opacity .35s;transform-origin:center }
.ham.on span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.ham.on span:nth-child(2) { opacity:0;transform:scaleX(0) }
.ham.on span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* Mobile nav overlay */
.mob-nav {
  position:fixed;top:0;right:0;bottom:0;width:min(76vw,300px);background:var(--bl3);z-index:4900;
  box-shadow:-24px 0 64px rgba(0,0,0,.28);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;
  padding:0 40px;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.mob-nav.on { opacity:1;pointer-events:all }
.mob-nav a {
  font-family:'Montserrat',sans-serif;font-size:19px;font-weight:600;letter-spacing:.2px;
  color:#fff;text-decoration:none;cursor:none;
  opacity:0;transform:translateX(-28px);transition:opacity .4s,transform .4s;
}
.mob-nav.on a { opacity:1;transform:none }
.mob-nav.on a:nth-child(1) { transition-delay:.05s }
.mob-nav.on a:nth-child(2) { transition-delay:.1s }
.mob-nav.on a:nth-child(3) { transition-delay:.15s }
.mob-nav.on a:nth-child(4) { transition-delay:.2s }
.mob-nav.on a:nth-child(5) { transition-delay:.25s }
.mob-nav.on a:nth-child(6) { transition-delay:.3s }
.mob-nav.on a:nth-child(7) { transition-delay:.35s }
.mob-nav.on a:nth-child(8) { transition-delay:.4s }

/* ================================================================
   § 7 · SECTION BASE & TYPE UTILITIES
================================================================ */
.t-main { font-family:'Montserrat',sans-serif;font-weight:700 }
.t-sec  { font-family:'Cormorant Garamond',serif;font-weight:600;font-style:italic }

section { padding:160px 10vw;position:relative }
.container { max-width:1200px;margin:0 auto;width:100% }

.s-label {
  font-size:10px;letter-spacing:5px;text-transform:uppercase;
  color:var(--bl);margin-bottom:20px;font-weight:600;
  display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.s-label::before {
  content:'';display:block;width:24px;height:1px;
  background:var(--bl);flex-shrink:0;
}
.s-label.on { opacity:1;transform:none }

.s-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(44px,5.5vw,88px);
  font-weight:700;line-height:1.02;
  letter-spacing:-2px;margin-bottom:40px;
}
.s-title .tl { display:block;overflow:hidden }
.s-title .ti {
  display:block;opacity:0;
  transform:translateY(90px) skewY(2deg);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.s-title .ti.on     { opacity:1;transform:none }
.s-title .tl:nth-child(2) .ti { transition-delay:.12s }
.s-title .tl:nth-child(3) .ti { transition-delay:.24s }

/* ================================================================
   § 8 · REVEAL HELPERS
================================================================ */
.rv { opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease) }
.rv.on { opacity:1;transform:none }
.rl { opacity:0;transform:translateX(-44px);transition:opacity .8s var(--ease),transform .8s var(--ease) }
.rl.on { opacity:1;transform:none }
.rr { opacity:0;transform:translateX(44px);transition:opacity .8s var(--ease),transform .8s var(--ease) }
.rr.on { opacity:1;transform:none }
.rs { opacity:0;transform:scale(.94);transition:opacity .8s var(--ease),transform .8s var(--ease) }
.rs.on { opacity:1;transform:none }

/* ================================================================
   § 9 · HERO
================================================================ */
#hero {
  height:100vh;min-height:660px;
  background:var(--bg-body);
  display:flex;align-items:center;
  padding:0 10vw;overflow:hidden;
  transition:background-color .4s ease;
}

/* Dot grid background */
#hero::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(var(--bl-rgb),.12) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(ellipse 70% 70% at 70% 50%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 50%,black 0%,transparent 100%);
}

/* Spinning decorative circle */
.hero-deco-circle {
  position:absolute;right:7vw;top:50%;transform:translateY(-50%);
  width:clamp(280px,34vw,520px);height:clamp(280px,34vw,520px);
  border-radius:50%;border:1px solid rgba(var(--bl-rgb),.08);
  animation:cspin 30s linear infinite;pointer-events:none;
}
.hero-deco-circle::before { content:'';position:absolute;inset:48px;border-radius:50%;border:1px solid rgba(var(--bl-rgb),.055) }
.hero-deco-circle::after  { content:'';position:absolute;inset:96px;border-radius:50%;border:1px solid rgba(var(--bl-rgb),.04) }
@keyframes cspin { to { transform:translateY(-50%) rotate(360deg) } }

/* Giant background monogram */
.hero-giant {
  position:absolute;right:-2vw;top:50%;transform:translateY(-50%);
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(180px,26vw,380px);
  font-weight:700;color:rgba(var(--bl-rgb),.035);
  line-height:1;pointer-events:none;letter-spacing:-14px;user-select:none;
}

.hero-content { max-width:820px;position:relative;z-index:2 }

.hero-eyebrow {
  font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--bl);
  margin-bottom:36px;display:flex;align-items:center;gap:12px;
  opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.hero-eyebrow::before { content:'';display:block;width:24px;height:1px;background:var(--bl) }
.hero-eyebrow.on { opacity:1;transform:none }

.hero-title {
  font-size:clamp(56px,9vw,140px);
  color:var(--bl);line-height:1;margin-bottom:40px;
}
.hero-title .hl { display:block;overflow:hidden }
.hero-title .hi {
  display:block;opacity:0;
  transform:translateY(110%) skewY(3deg);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.hero-title .hi.on { opacity:1;transform:none }
.hi-mont { font-family:'Montserrat',sans-serif;font-weight:700;letter-spacing:-3px }
.hi-corm { font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;letter-spacing:-1.5px }

.hero-sub {
  font-size:16px;color:var(--text-muted);max-width:460px;line-height:1.8;
  margin-bottom:52px;
  opacity:0;transform:translateY(20px);
  transition:opacity .65s ease .45s,transform .65s ease .45s,color .4s ease;
}
.hero-sub.on { opacity:1;transform:none }

.hero-btns {
  display:flex;gap:14px;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
  transition:opacity .65s ease .6s,transform .65s ease .6s;
}
.hero-btns.on { opacity:1;transform:none }

/* Primary button */
.bp {
  background:var(--bl);color:#fff;
  padding:15px 36px;border-radius:var(--radius-btn);
  font-size:12.5px;font-weight:500;letter-spacing:.6px;
  text-decoration:none;cursor:none;
  display:inline-block;position:relative;overflow:hidden;
  transition:var(--btn-trans);
}
.bp::before {
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.12);
  transform:translateX(-110%) skewX(-18deg);
  transition:transform .5s var(--ease);
}
.bp:hover::before { transform:translateX(110%) skewX(-18deg) }
.bp:hover { transform:var(--btn-lift);box-shadow:var(--btn-shadow);background:var(--bl2) }

/* Outline button */
.bo {
  background:transparent;color:var(--bl);
  border:1.5px solid var(--bl);
  padding:14px 36px;border-radius:var(--radius-btn);
  font-size:12.5px;font-weight:500;
  text-decoration:none;cursor:none;display:inline-block;
  transition:var(--btn-trans);
}
.bo:hover { background:var(--bl);color:#fff;transform:var(--btn-lift);box-shadow:var(--btn-shadow) }

/* Floating badge */
.hero-badge {
  position:absolute;right:6.5vw;top:27%;
  background:var(--bg-surface);
  border:1.5px solid var(--bl);
  padding:18px 24px;max-width:148px;text-align:center;
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--bl);font-weight:600;line-height:1.8;
  box-shadow:var(--shadow-sm);
  animation:badgef 3.5s ease-in-out infinite;
  opacity:0;transition:opacity .6s ease .9s;
}
.hero-badge.on { opacity:1 }
@keyframes badgef {
  0%,100% { transform:rotate(-12deg) translateY(0) }
  50%      { transform:rotate(-9deg) translateY(-7px) }
}

/* Scroll indicator */
.hero-scroll-ind {
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;transition:opacity .6s ease 1.1s;
}
.hero-scroll-ind.on { opacity:.4 }
.hero-scroll-ind span { font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--bl) }
.scroll-line-track { width:1px;height:48px;background:rgba(var(--bl-rgb),.15);overflow:hidden }
.scroll-line-thumb { width:1px;height:100%;background:var(--bl);animation:slt 1.9s ease-in-out infinite }
@keyframes slt { 0% { transform:translateY(-100%) } 100% { transform:translateY(100%) } }

/* Bottom rule */
.hero-hline {
  position:absolute;bottom:0;left:10vw;right:10vw;height:1px;
  background:var(--bor);transform:scaleX(0);transform-origin:left;
  transition:transform 1.2s var(--ease) .8s;
}
.hero-hline.on { transform:scaleX(1) }

/* ================================================================
   § 10 · MARQUEE
================================================================ */
.mband { background:var(--bl);padding:20px 0;overflow:hidden;position:relative }
.mband::before,.mband::after {
  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;
}
.mband::before { left:0;background:linear-gradient(to right,var(--bl),transparent) }
.mband::after  { right:0;background:linear-gradient(to left,var(--bl),transparent) }
.mtrack { display:flex;white-space:nowrap;animation:mq 22s linear infinite;width:max-content }
.mtrack span {
  font-family:'Cormorant Garamond',serif;
  font-size:19px;font-weight:300;font-style:italic;
  color:rgba(255,255,255,.6);padding:0 32px;letter-spacing:.5px;
}
.mtrack span.dot {
  font-style:normal;font-family:'Montserrat',sans-serif;
  font-size:5px;color:rgba(255,255,255,.25);
  padding:0 4px;vertical-align:middle;letter-spacing:0;
}
@keyframes mq { from { transform:translateX(0) } to { transform:translateX(-50%) } }
.mband2 .mtrack { animation-direction:reverse;animation-duration:26s }
.mband3 { background:var(--bg-surface-alt) }
.mband3::before { background:linear-gradient(to right,var(--bg-surface-alt),transparent) }
.mband3::after  { background:linear-gradient(to left,var(--bg-surface-alt),transparent) }
.mtrack3 { animation-duration:18s;animation-direction:reverse }

/* ================================================================
   § 11 · VALEURS
================================================================ */
#valeurs {
  background:var(--bg-surface);position:relative;z-index:1;
  transition:background-color .4s ease;
}
#valeurs .s-title { color:var(--bl) }
#valeurs::before {
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--bl-rgb),.025) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--bl-rgb),.025) 1px,transparent 1px);
  background-size:48px 48px;
}

.vgrid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px }

.vcard {
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);padding:40px 34px;
  position:relative;overflow:hidden;
  opacity:0;transform:translateY(44px) scale(.97);
  transition:opacity .75s var(--ease),var(--card-trans);
  display:block;text-decoration:none;color:inherit;
  outline:none;-webkit-tap-highlight-color:transparent;
}
.vcard:link,.vcard:visited,.vcard:hover,.vcard:active { color:inherit;text-decoration:none }
.vcard h3,.vcard p,.vcard-n { text-decoration:none }
/* Colored top accent bar */
.vcard::after {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--bl);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.vcard:hover::after { transform:scaleX(1) }
.vgrid .vcard:nth-child(2) { transition-delay:.14s }
.vgrid .vcard:nth-child(3) { transition-delay:.28s }
.vcard.on  { opacity:1;transform:translateY(0) scale(1) }
.vcard:hover {
  transform:var(--card-lift);
  box-shadow:var(--card-shadow);
  border-color:var(--border-mid);
}
.vcard-n {
  font-family:'Cormorant Garamond',serif;
  font-size:64px;font-weight:700;color:var(--bl);
  opacity:.07;line-height:1;margin-bottom:16px;
  transition:opacity .3s var(--ease);
}
.vcard:hover .vcard-n { opacity:.22 }
.vcard-ico {
  width:44px;height:44px;background:var(--bl);border-radius:10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vcard:hover .vcard-ico { transform:scale(1.08);box-shadow:0 8px 24px rgba(var(--bl-rgb),.3) }
.vcard-ico svg { width:20px;height:20px;stroke:var(--bg-surface);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round }
.vcard h3 { font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;margin-bottom:12px;color:var(--text-main);transition:color .4s ease }
.vcard p  { font-size:13px;color:var(--text-muted);line-height:1.75;transition:color .4s ease }

/* ================================================================
   § 12 · OFFRES — HORIZONTAL SCROLL
================================================================ */
#offers { background:var(--bl3);padding:0;height:400vh }
.offers-content { position:relative }
.offers-sticky {
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.bp-fixed-overlay {
  padding:0 10vw;pointer-events:none;
  position:absolute;top:0;left:0;right:0;z-index:10;
}
.s-title--flush { margin-bottom:0 }
.bp-fixed-overlay .s-label {
  color:rgba(255,255,255,.45);display:flex;align-items:center;gap:12px;
  position:relative;margin-bottom:20px;
}
.bp-fixed-overlay .s-label::before { background:rgba(255,255,255,.35) }
.bp-fixed-overlay .s-title { color:#fff }
.bp-fixed-overlay .s-title .ti { color:#fff }

.htrack-outer { width:100vw;overflow:hidden;margin-top:130px }
.blueprint-wall { display:flex;padding:0 10vw;width:max-content;will-change:transform;align-items:center }

.imm-panel {
  width:62vw;height:60vh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
  border-left:1px solid rgba(255,255,255,.07);
  padding-left:5vw;
}
.imm-panel:first-child { border-left:none;padding-left:0;width:56vw }

.imm-n {
  position:absolute;top:0;left:5vw;
  font-size:260px;line-height:.8;
  color:rgba(255,255,255,.025);
  letter-spacing:-12px;user-select:none;z-index:0;
}
.imm-panel:first-child .imm-n { left:0 }

.imm-content { position:relative;z-index:1;max-width:520px }
/* Titre "Hébergement & Maintenance" plus long : conteneur élargi pour tenir sur 2 lignes au lieu de 3 (desktop uniquement, la media query mobile reprend le dessus en dessous de 768px) */
.imm-content--wide { max-width:640px }
.imm-tag  { font-size:10.5px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:28px }
.imm-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(64px,7vw,100px);font-weight:600;
  color:#fff;line-height:.95;margin-bottom:28px;
}
.imm-desc { font-size:16px;color:rgba(255,255,255,.55);line-height:1.65 }

/* ================================================================
   § 13 · TARIFS
================================================================ */
#tarifs { background:var(--bg-body);transition:background-color .4s ease }
#tarifs::before { content:'';display:block;width:100%;height:1px;background:var(--border-subtle);margin-bottom:40px }
#tarifs .s-title { margin-bottom:28px }

.tgrid    { display:grid;grid-template-columns:1fr 1fr;gap:64px }
.tbloc-h  { font-family:'Cormorant Garamond',serif;font-size:34px;font-weight:700;margin-bottom:10px }
.tbloc-s  { font-size:12px;color:var(--text-muted);margin-bottom:28px;letter-spacing:.3px;line-height:1.6 }
.trow {
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;
  border-bottom:1px solid var(--border-subtle);
  transition:background-color .25s ease,border-radius .2s,padding .2s;
}
.trow:first-of-type { border-top:1px solid var(--border-subtle) }
.trow:not(.feat):hover { background:var(--bg-surface-alt);border-radius:8px }
.trow.feat {
  background:var(--bg-surface);border:none;
  border-radius:14px;box-shadow:var(--shadow-sm);margin:8px 0;
  padding:24px 28px;
}
.trow-n { font-weight:500;font-size:14px;display:flex;align-items:center;gap:10px }
.fbadge {
  font-size:8.5px;background:var(--bl);color:#fff;
  padding:3px 10px;border-radius:20px;letter-spacing:1px;text-transform:uppercase;
}
.trow-d   { font-size:12px;color:var(--text-muted);margin-top:3px }
.trow-p   { font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:var(--bl);white-space:nowrap;margin-left:20px }
.tnote {
  margin-top:32px;font-size:13px;color:var(--text-muted);font-style:italic;
  line-height:1.75;border-left:2px solid var(--border-strong);padding-left:20px;
}

/* ================================================================
   § 14 · PROCESSUS / TIMELINE
================================================================ */
#processus { background:var(--bg-surface);overflow:hidden;transition:background-color .4s ease }
#processus .container { display:flex;flex-direction:column;align-items:center }
#processus .s-label { text-align:center }
#processus .s-title { text-align:center }

.vt-step:nth-child(2) .rv { transition-delay:.1s }
.vt-step:nth-child(3) .rv { transition-delay:.2s }
.vt-step:nth-child(4) .rv { transition-delay:.3s }
.vt-step:nth-child(5) .rv { transition-delay:.4s }
.vt-step:nth-child(6) .rv { transition-delay:.5s }

.vert-timeline { position:relative;max-width:760px;margin:88px auto 0;padding-bottom:40px }
.vt-line {
  position:absolute;top:0;bottom:0;left:50%;width:1px;
  background:var(--border-strong);transform:translateX(-50%);
  z-index:1;
}
.vt-step {
  position:relative;display:flex;justify-content:center;
  margin-bottom:80px;z-index:2;cursor:none;
}
.vt-step:last-child { margin-bottom:0 }
.vt-dot {
  position:absolute;top:6px;left:50%;
  transform:translate(-50%,0);
  width:12px;height:12px;border-radius:50%;background:var(--bl);
  box-shadow:0 0 0 8px var(--bg-surface),0 0 0 9px var(--border-subtle);
  transition:transform .35s var(--ease-spring),box-shadow .3s ease,background .3s ease;
}
.vt-step:hover .vt-dot {
  transform:translate(-50%,0) scale(1.5);
  box-shadow:0 0 0 6px var(--bg-surface),0 0 0 8px var(--bl),0 0 24px rgba(var(--bl-rgb),.25);
}
.vt-content { width:calc(50% - 56px);transition:transform .4s var(--ease) }
.vt-step:hover .vt-content { transform:translateY(-6px) }
.vt-left  { margin-right:calc(50% + 56px);text-align:right }
.vt-right { margin-left:calc(50% + 56px);text-align:left }
.vt-n {
  font-family:'Cormorant Garamond',serif;font-size:88px;font-weight:700;
  color:var(--bl);opacity:.07;line-height:1;margin-bottom:10px;
  transition:opacity .35s var(--ease);
}
.vt-step:hover .vt-n { opacity:.9 }
.vt-t { font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;margin-bottom:10px }
.vt-d { font-size:13.5px;color:var(--text-muted);line-height:1.75 }

/* ================================================================
   § 15 · RÉALISATIONS — Stacked cards
================================================================ */
#real { background:var(--bg-body);transition:background-color .4s ease }
.stacked-projects { margin-top:64px;position:relative }

.st-card {
  position:sticky;top:120px;
  min-height:68vh;border-radius:var(--radius-card);
  margin-bottom:40px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:56px 60px;color:#fff;
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
  transition:var(--card-trans);cursor:none;
}
.st-card:nth-child(1) { top:120px }
.st-card:nth-child(2) { top:144px;transition-delay:.1s }
.st-card:nth-child(3) { top:168px;transition-delay:.2s }
.st-card:nth-child(4) { top:192px;transition-delay:.3s }

/* Mock browser bar */
.st-browser {
  position:absolute;top:0;left:0;right:0;
  height:44px;background:rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  display:flex;align-items:center;
  padding:0 20px;gap:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.st-browser-dots { display:flex;gap:6px }
.st-browser-dots span {
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.2);
}
.st-browser-dots span:nth-child(1) { background:#ff5f57 }
.st-browser-dots span:nth-child(2) { background:#febc2e }
.st-browser-dots span:nth-child(3) { background:#28c840 }
.st-browser-url {
  font-family:'Courier New',monospace;font-size:11px;
  color:rgba(255,255,255,.35);letter-spacing:.3px;
}

.st-card-content { position:relative;z-index:2;max-width:560px }
.st-card-tag { font-size:10.5px;letter-spacing:4px;text-transform:uppercase;opacity:.65;margin-bottom:16px }
.st-card-nm  { font-family:'Cormorant Garamond',serif;font-size:54px;font-weight:700;line-height:1.05;margin-bottom:14px }
.st-card-desc{ font-size:15px;color:rgba(255,255,255,.75);line-height:1.65 }

.st-card-deco {
  position:absolute;inset:48px 20px 20px;
  border:1px solid rgba(255,255,255,.08);border-radius:10px;
  z-index:1;pointer-events:none;
}

.st-bg1 { background:linear-gradient(140deg,#0d2b5e,#004aad) }
.st-bg2 { background:linear-gradient(140deg,#0a1f40,#1a527a) }
.st-bg3 { background:linear-gradient(140deg,#18222e,#2b3e55) }
.st-bg4 { background:linear-gradient(140deg,#0a2035,#1a4070) }

/* ================================================================
   § 16 · STATS
================================================================ */
#stats { background:var(--bg-body);padding:80px 10vw 160px;transition:background-color .4s ease }
.stats4 { display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-subtle) }
.sitem {
  padding:72px 40px;
  border-right:1px solid var(--border-subtle);
  transition:background-color .25s ease;
}
.sitem:first-child { padding-left:0 }
.sitem:last-child  { border-right:none;padding-right:0 }
.sitem:hover { background:rgba(var(--bl-rgb),.02) }

.sval {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(72px,7vw,108px);
  font-weight:700;color:var(--bl);line-height:1;
  margin-bottom:12px;white-space:nowrap;
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.sval.on { opacity:1;transform:none }
.slbl { font-size:13px;color:var(--text-muted);letter-spacing:.3px;line-height:1.5 }
.ssub { font-size:10px;color:var(--bl);opacity:.4;margin-top:6px;letter-spacing:1.5px;text-transform:uppercase }

/* ================================================================
   § 17 · À PROPOS
================================================================ */
#apropos { background:var(--bl);overflow:hidden;position:relative }
.ap-container { position:relative }
#apropos .s-label { color:rgba(255,255,255,.35) }
#apropos .s-label::before { background:rgba(255,255,255,.3) }
#apropos .s-title { color:#fff }
#apropos .s-title .ti { color:#fff }

.ap-deco {
  position:absolute;right:-120px;top:-120px;
  width:480px;height:480px;border-radius:50%;
  border:1px solid rgba(255,255,255,.035);pointer-events:none;
}
.ap-deco::before {
  content:'';position:absolute;inset:70px;border-radius:50%;
  border:1px solid rgba(255,255,255,.025);
}

.ap-inner { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center }
.ap-text { font-size:18px;color:rgba(255,255,255,.7);line-height:1.85;font-weight:300 }
.ap-text--sm { font-size:15.5px }
.ap-text-delay1 { transition-delay:.15s }
.ap-cta-delay { transition-delay:.28s }
.ap-bp { display:inline-block }
.ap-text strong { color:#fff;font-weight:500 }

/* Code window in about */
.ap-visual {
  height:440px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.45);
}
.ap-code-win { height:100%;display:flex;flex-direction:column }
.ap-code-bar {
  background:rgba(255,255,255,.04);
  padding:14px 20px;
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.ap-code-dots { display:flex;gap:7px }
.ap-code-dots span { width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.12) }
.ap-code-dots span:nth-child(1) { background:#ff5f57 }
.ap-code-dots span:nth-child(2) { background:#febc2e }
.ap-code-dots span:nth-child(3) { background:#28c840 }
.ap-code-file { font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.5px;margin:0 auto }
.ap-code-body {
  padding:26px 28px;
  font-family:'Courier New',Courier,monospace;
  font-size:12.5px;line-height:2.1;
  flex:1;overflow:hidden;
}
.ap-code-body p { white-space:nowrap }
.ap-code-body .ind { padding-left:22px }
.c-comm { color:rgba(255,255,255,.22);font-style:italic }
.c-kw   { color:#c792ea }
.c-var  { color:#82aaff }
.c-key  { color:#a3c2e0 }
.c-str  { color:#c3e88d }
.c-num  { color:#f78c6c }
.c-bool { color:#ff5370 }

/* ================================================================
   § 18 · TÉMOIGNAGES
================================================================ */
#temoignages {
  background:var(--bg-body);padding:160px 0;overflow:hidden;
  transition:background-color .4s ease;
}
#temoignages .s-label,
#temoignages .s-title { padding:0 10vw }
#temoignages .s-title { margin-bottom:72px }

.temo-wrap { overflow:hidden;position:relative }
.temo-wrap::before,.temo-wrap::after {
  content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;
}
.temo-wrap::before { left:0;background:linear-gradient(to right,var(--bg-body),transparent) }
.temo-wrap::after  { right:0;background:linear-gradient(to left,var(--bg-body),transparent) }

.temo-track {
  display:flex;gap:24px;padding:0 10vw;
  width:max-content;animation:tscroll 32s linear infinite;
}
.temo-track:hover { animation-play-state:paused }
@keyframes tscroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }

.tcard {
  width:390px;flex-shrink:0;
  background:var(--bg-surface);border-radius:var(--radius-card);
  padding:44px 40px;border:1px solid var(--border-subtle);
  cursor:none;position:relative;overflow:hidden;
  transition:var(--card-trans);
}
.tcard::before {
  content:'\201C';
  position:absolute;top:20px;right:24px;
  font-family:'Cormorant Garamond',serif;
  font-size:88px;font-weight:700;
  color:var(--bl);opacity:.07;
  line-height:1;pointer-events:none;
  transition:opacity .3s;
}
.tcard:hover { transform:var(--card-lift);box-shadow:var(--card-shadow);border-color:var(--border-mid) }
.tcard:hover::before { opacity:.16 }

.tcard-stars { color:var(--bl);font-size:12px;margin-bottom:18px;letter-spacing:3px }
.tcard-q {
  font-family:'Cormorant Garamond',serif;
  font-size:21px;font-style:italic;font-weight:400;
  color:var(--text-main);line-height:1.55;margin-bottom:28px;
}
.tcard-who { display:flex;align-items:center;gap:14px }
.tcard-av  {
  width:40px;height:40px;border-radius:50%;background:var(--bl);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;
  color:var(--bg-surface);flex-shrink:0;
}
.tcard-nm   { font-size:13px;font-weight:600 }
.tcard-role { font-size:11px;color:var(--text-muted);margin-top:2px }

/* ================================================================
   § 19 · FAQ
================================================================ */
#faq { background:var(--bg-surface);transition:background-color .4s ease }
.fgrid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start }
.flist { display:flex;flex-direction:column }

.fitem { border-bottom:1px solid var(--border-subtle) }
.fitem:first-child { border-top:1px solid var(--border-subtle) }
.fq {
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;cursor:none;
  font-size:14.5px;font-weight:500;line-height:1.4;
  transition:color .25s;gap:16px;
}
.fitem.open .fq { color:var(--bl) }
.ficon {
  width:28px;height:28px;flex-shrink:0;
  border:1px solid var(--border-subtle);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--bl);
  transition:transform .4s var(--ease),background .3s,border-color .3s;
}
.fitem.open .ficon {
  transform:rotate(45deg);
  background:var(--bl);border-color:var(--bl);color:var(--bg-surface);
}
.fa { max-height:0;overflow:hidden;transition:max-height .55s var(--ease) }
.fa-i { padding:0 0 22px;font-size:13.5px;color:var(--text-muted);line-height:1.75 }
.fitem.open .fa { max-height:300px }

.fcta {
  background:var(--bg-surface-alt);border-radius:var(--radius-card);
  padding:44px 40px;transition:var(--card-trans);
}
.fcta .bp { display:inline-block }
.fcta h3 { font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:700;margin-bottom:16px }
.fcta p   { font-size:13px;color:var(--text-muted);margin-bottom:32px;line-height:1.75 }

/* ================================================================
   § 20 · CONTACT
================================================================ */
#contact { background:var(--bg-body);transition:background-color .4s ease }

/* subtle crosshair pattern */
#contact::before {
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(var(--bl-rgb),.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(var(--bl-rgb),.04) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 0%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 0%,transparent 100%);
}

.chead { text-align:center;margin-bottom:80px;position:relative;z-index:1 }
.cform { transition-delay:.15s }
.cbig {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,6.5vw,104px);
  font-weight:700;color:var(--bl);
  line-height:1;letter-spacing:-2.5px;margin-bottom:24px;
}
.cbig em { font-weight:300;font-style:italic }
.csub { font-size:16px;color:var(--text-muted) }
.cform { max-width:540px;margin:0 auto;position:relative;z-index:1 }
.cf { margin-bottom:16px }
.cf label {
  display:block;font-size:11px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:8px;
  transition:color .4s ease;
}
.cf input,.cf textarea {
  width:100%;background:var(--bg-surface);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-btn);
  padding:16px 20px;
  font-family:'Montserrat',sans-serif;font-size:14px;
  color:var(--text-main);outline:none;cursor:none;
  transition:border-color .25s,box-shadow .25s,background-color .4s ease,color .4s ease;
}
.cf textarea { resize:vertical;min-height:128px }
.cf input:focus,.cf textarea:focus {
  border-color:var(--bl);
  box-shadow:0 0 0 4px rgba(var(--bl-rgb),.1);
}
.cf input::placeholder,.cf textarea::placeholder { color:var(--text-muted) }
.csend {
  width:100%;background:var(--bl);color:#fff;border:none;
  border-radius:var(--radius-btn);padding:18px;
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:500;
  cursor:none;position:relative;overflow:hidden;
  transition:var(--btn-trans);
  letter-spacing:.4px;
}
.csend::before {
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.1);
  transform:translateX(-110%) skewX(-18deg);
  transition:transform .5s var(--ease);
}
.csend:hover::before { transform:translateX(110%) skewX(-18deg) }
.csend:hover { background:var(--bl2);transform:var(--btn-lift);box-shadow:var(--btn-shadow) }
.csend.sent { background:#1a7040 !important;transform:none !important }
.cemail { text-align:center;margin-top:28px;font-size:13px;color:var(--text-muted) }
.cemail a {
  color:var(--bl);text-decoration:none;font-weight:500;cursor:none;
  border-bottom:1px solid transparent;transition:border-color .2s;
}
.cemail a:hover { border-color:var(--bl) }

/* ================================================================
   § 21 · FOOTER
================================================================ */
footer { background:var(--bl3);padding:100px 10vw 48px;position:relative;overflow:hidden }
footer::before {
  content:'VITRUM';
  position:absolute;right:-40px;bottom:-80px;
  font-family:'Cormorant Garamond',serif;
  font-size:240px;font-weight:700;font-style:italic;
  color:rgba(255,255,255,.025);letter-spacing:-10px;
  pointer-events:none;user-select:none;
}

.ft {
  display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:72px;
  padding-bottom:64px;
  border-bottom:1px solid rgba(255,255,255,.07);
  margin-bottom:36px;
}
.fbrand { display:flex;align-items:baseline;gap:6px;margin-bottom:16px }
.fbrand-v { font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:#fff;letter-spacing:2.5px;text-transform:uppercase }
.fbrand-s { font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:20px;color:#fff }
.ftag { font-size:13px;color:rgba(255,255,255,.38);line-height:1.7;max-width:260px }
.fcol h4 { font-size:10px;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,.25);margin-bottom:24px }
.fcol ul { list-style:none;display:flex;flex-direction:column;gap:14px }
.fcol ul a { font-size:13px;color:rgba(255,255,255,.5);text-decoration:none;cursor:none;transition:color .2s }
.fcol ul a:hover { color:#fff }
.fb { display:flex;justify-content:space-between;align-items:center }
.fcp   { font-size:11px;color:rgba(255,255,255,.22) }
.fmade { font-size:11px;color:rgba(255,255,255,.18);font-style:italic }

/* ================================================================
   § 22 · MAGNETIC BUTTON WRAPPER
================================================================ */
.mw { display:inline-block }

/* ================================================================
   § 23 · RESPONSIVE
================================================================ */
@media(max-width:1200px) {
  .tgrid { grid-template-columns:1fr }
}

@media(max-width:1100px) {
  .ap-inner { grid-template-columns:1fr }
  .ap-visual { display:none }
  .fgrid { grid-template-columns:1fr }
  .ft    { grid-template-columns:1fr 1fr }
}

@media(max-width:768px) {

  /* ——— BASE ——— */
  section { padding:72px 6vw }

  /* ——— NAV ——— */
  nav { padding:0 24px }
  .nav-ul { display:none }
  .ham { display:flex }

  /* ——— HERO ——— */
  #hero { padding:0 6vw }
  .hero-badge,.hero-deco-circle,.hero-giant,#hero::before { display:none }
  .hero-title { font-size:clamp(52px,13vw,78px) }
  .hero-sub { font-size:15px;max-width:100%;margin-bottom:40px }
  .hero-btns { flex-direction:column;gap:12px }
  /* Sur mobile : un seul CTA, le bouton outline disparaît */
  .hero-btns .mw:nth-child(2) { display:none }
  .hero-btns .bp { width:100%;display:flex;justify-content:center;padding:18px 28px;font-size:13.5px }

  /* ——— VALEURS — cartes compactes ——— */
  .vgrid { grid-template-columns:1fr;gap:14px;margin-top:24px }
  .vcard { padding:28px 24px }
  .vcard p { display:none }
  .vcard-n { font-size:44px;margin-bottom:8px }

  /* ——— OFFRES — swipe natif ——— */
  #offers { height:auto !important;padding:0 }
  .offers-sticky { position:static;height:auto;overflow:visible }
  .bp-fixed-overlay {
    position:static !important;pointer-events:auto !important;
    padding:72px 6vw 40px !important;
  }
  .htrack-outer {
    margin-top:0;width:100%;
    overflow-x:scroll;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 6vw 48px;
  }
  .htrack-outer::-webkit-scrollbar { display:none }
  .blueprint-wall {
    flex-direction:row;width:max-content;
    padding:0;transform:none !important;
    align-items:center;
  }
  .imm-panel {
    width:78vw !important;height:58vh;min-height:260px;
    border-left:1px solid rgba(255,255,255,.12) !important;
    border-top:none !important;
    padding:32px 6vw !important;
    scroll-snap-align:start;flex-shrink:0;
    display:flex;flex-direction:column;justify-content:center;
  }
  .imm-panel:first-child {
    border-left:none !important;padding-left:0 !important;
    width:78vw !important;
  }
  .imm-n { font-size:120px;left:0 !important;top:-12px }
  .imm-title { font-size:clamp(44px,11vw,60px);margin-bottom:20px }
  .imm-tag { margin-bottom:16px }
  .imm-desc { font-size:14px }
  .imm-content { transform:none;max-width:100% }

  /* ——— TARIFS ——— */
  .tgrid { grid-template-columns:1fr;gap:48px }
  .trow { padding:14px 0 }
  .trow-p { font-size:24px }
  .tbloc-h { font-size:28px }

  /* ——— RÉALISATIONS — swipe natif ——— */
  #real { padding:72px 0 }
  #real .container { padding:0 6vw }
  .stacked-projects {
    display:flex;flex-direction:row;
    overflow-x:scroll;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:40px -6vw 0;
    padding:0 6vw;
    width:calc(100% + 12vw);
    gap:16px;
  }
  .stacked-projects::-webkit-scrollbar { display:none }
  .st-card {
    position:static !important;top:auto !important;
    width:78vw;flex-shrink:0;
    scroll-snap-align:start;
    min-height:52vh;margin-bottom:0;
    border-radius:20px;padding:40px 28px 32px;
    box-shadow:0 8px 32px rgba(0,0,0,.2);
  }
  .st-card:nth-child(1),.st-card:nth-child(2),
  .st-card:nth-child(3),.st-card:nth-child(4) { top:auto !important }
  .st-card-nm { font-size:36px }
  .st-card-desc { font-size:14px }

  /* ——— STATS ——— */
  #stats { padding:72px 6vw }
  .sitem { padding:40px 20px }

  /* ——— PROCESSUS ——— */
  #processus { padding:72px 6vw }
  .vert-timeline { margin-top:48px }
  .vt-line { left:18px;transform:none }
  .vt-dot { left:18px;transform:translateX(-5px);top:4px }
  .vt-step:hover .vt-dot { transform:translateX(-5px) scale(1.4) }
  .vt-content { width:calc(100% - 56px) }
  .vt-left { margin-right:0;margin-left:56px;text-align:left }
  .vt-right { margin-left:56px;text-align:left }
  .vt-n { font-size:56px }
  .vt-step { margin-bottom:44px }

  /* ——— À PROPOS ——— */
  #apropos { padding:72px 6vw }
  .ap-inner { grid-template-columns:1fr;gap:0 }
  .ap-visual { display:none }
  .ap-text { font-size:16px }
  /* Deuxième paragraphe masqué : réduit la section de moitié */
  .ap-text--sm { display:none }

  /* ——— TÉMOIGNAGES ——— */
  #temoignages { padding:72px 0 }
  #temoignages .s-label,#temoignages .s-title { padding:0 6vw }
  .tcard { width:80vw }

  /* ——— FAQ ——— */
  #faq { padding:72px 6vw }
  .fgrid { grid-template-columns:1fr;gap:0 }
  /* CTA latéral masqué sur mobile */
  .fcta { display:none }
  /* 4 questions seulement */
  .fitem:nth-child(n+5) { display:none }

  /* ——— CONTACT ——— */
  #contact { padding:72px 6vw }
  .cbig { font-size:clamp(40px,10vw,60px);letter-spacing:-1.5px }
  .chead { margin-bottom:48px }
  .cf input,.cf textarea { cursor:auto }
  .cf label { font-size:10px }

  /* ——— FOOTER ——— */
  footer { padding:72px 6vw 40px }
  .ft { grid-template-columns:1fr;gap:36px;padding-bottom:40px }
  footer::before { font-size:120px }
}

@media(max-width:480px) {
  section { padding:60px 5vw }
  nav { padding:0 20px }
  .s-title { font-size:clamp(36px,10vw,56px) }
  .hero-title { font-size:clamp(46px,14vw,68px) }
  .stats4 { grid-template-columns:1fr }
  .sitem { border-right:none !important;padding-left:0 !important;padding:32px 0 }
  .imm-panel,.imm-panel:first-child { width:86vw !important }
  .st-card { width:84vw }
}

/* ================================================================
   § 24 · REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto }
  /* Les marquees et le carousel témoignages sont arrêtés */
  .mtrack, .temo-track { animation: none }
  /* Le cercle décoratif du hero est fixe */
  .hero-deco-circle { animation: none }
  /* L'indicateur de scroll est fixe */
  .scroll-line-thumb { animation: none }
  /* Le badge flottant est fixe */
  .hero-badge { animation: none }
}