:root {
  --img0: url(/assets/img/epx-96972cc4.webp);
  --img1: url(/assets/img/epx-caf4eba1.webp);
  --img2: url(/assets/img/epx-413f8510.webp);
  --img3: url(/assets/img/epx-e3c567ab.webp);
  --img4: url(/assets/img/epx-bcec1dd2.webp);
  --img5: url(/assets/img/epx-20243b35.webp);
  --img6: url(/assets/img/epx-46bd0746.webp);
  --img7: url(/assets/img/epx-b6c71502.webp);
  --img8: url(/assets/img/epx-54df6ca6.webp);
  --img9: url(/assets/img/epx-d2efd340.webp);
}
/* ============================================================
   EPOXYA — Design Tokens
   Modifier ici pour changer toute la DA en un seul endroit
   ============================================================ */
:root {
  /* Palette obsidienne */
  --obs:    #0c0c0f;
  --obs2:   #131318;
  --panel:  #191920;

  /* Or EPOXYA */
  --gold:      #c9a45c;
  --gold-l:    #e8cf96;
  --gold-d:    #8a6b32;
  --gold-pale: #fff8e8;
  --grad-gold: linear-gradient(180deg, #fff8e8 0%, #e8cf96 45%, #a07e3c 100%);

  /* Texte */
  --txt:     #f3ede1;
  --txt-dim: #cdc6b8;

  /* Lignes */
  --line:   rgba(201, 164, 92, 0.18);
  --line-h: rgba(201, 164, 92, 0.5);

  /* Typographie */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, sans-serif;

  /* Ombres */
  --sh:      0 34px 80px -22px rgba(0, 0, 0, 0.9);
  --sh-gold: 0 0 44px rgba(201, 164, 92, 0.4);
  --tsh:     0 2px 18px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.5);

  /* Easings */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo:  cubic-bezier(0.87, 0, 0.13, 1);
  --ease-p4:    cubic-bezier(0.76, 0, 0.24, 1);

  /* Layout */
  --s-pad: clamp(80px, 10vw, 160px);
  --h-pad: clamp(24px, 5vw, 80px);
  --max-w: 1480px;

  /* Z-index scale — ordre croissant = premier plan */
  --z-base:      1;
  --z-raised:    10;
  --z-nav:       100;
  --z-tunnel:    200;
  --z-cursor:    300;
  --z-preloader: 400;
}

/* ---- Focus visible : indicateur clavier global (toutes pages, tous pointeurs) ---- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Souris/tactile sans navigation clavier : pas de halo */
:focus:not(:focus-visible) { outline: none; }

/* ---- Reduced motion : désactive toutes les animations lourdes ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
    scroll-behavior: auto !important;
  }
  .hero-layer { transform: none !important; }
  #cursor-dot, #cursor-halo { display: none !important; }
}

/* ============================================================
   EPOXYA — Layout & Sections
   ============================================================ */

/* ---- Reset & Base ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--obs);
  color: var(--txt);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
  animation: bodyRevealFallback 0s 4s forwards;
}
body.ready { visibility: visible; animation: none; }
@keyframes bodyRevealFallback { to { visibility: visible; } }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--sans); }
::selection { background: var(--gold); color: #000; }

/* ---- Grain & Vignette globaux ---- */
#grain {
  position: fixed; inset: 0; z-index: calc(var(--z-cursor) + 1); pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#vig {
  position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none;
  box-shadow: inset 0 0 200px 20px rgba(0,0,0,.5);
}

/* ============================
   PRELOADER
   ============================ */
#preloader {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  background: var(--obs);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  visibility: visible; /* Override body { visibility:hidden } — le preloader doit toujours être visible */
}
.pl-inner { text-align: center; }
.pl-logo svg {
  width: clamp(180px, 30vw, 320px);
  overflow: visible;
}
.pl-logo text {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: plDraw 1.6s var(--ease) forwards;
}
@keyframes plDraw { to { stroke-dashoffset: 0; } }
.pl-line {
  width: clamp(180px, 30vw, 320px);
  height: 1px;
  background: rgba(201,164,92,.15);
  margin: 28px auto 16px;
  overflow: hidden;
}
.pl-fill {
  height: 100%;
  background: var(--grad-gold);
  width: 0%;
  transition: width 0.1s linear;
}
.pl-count {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--gold);
}

/* ============================
   NAVIGATION
   ============================ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px var(--h-pad);
  transition: padding .5s var(--ease), background .5s;
}
#nav::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,7,8,.75), transparent);
  transition: opacity .5s;
}
#nav.scrolled {
  padding: 16px var(--h-pad);
  background: rgba(7,7,8,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
#nav.scrolled::before { opacity: 0; }

.logo {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: .42em;
  font-weight: 400;
  padding-left: .42em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-links {
  display: flex; gap: clamp(9px, 1.2vw, 26px);
  font-size: clamp(9.5px, 0.7vw, 11px); letter-spacing: .16em; text-transform: uppercase;
  flex-wrap: nowrap; white-space: nowrap;
  margin-right: clamp(14px, 1.7vw, 36px);
}
.nav-links a {
  position: relative; color: #d8d2c4;
  transition: color .4s;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--gold-l); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px; background: var(--gold); transition: width .4s;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  border: 1px solid var(--line);
  padding: 11px 22px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt);
  background: transparent;
  transition: background .4s, color .4s, border-color .4s, box-shadow .4s;
  flex-shrink: 0; white-space: nowrap;
}
.nav-cta:hover {
  background: var(--gold); color: #000;
  border-color: var(--gold);
  box-shadow: var(--sh-gold);
}

/* ============================
   HERO — Multiplane depth
   ============================ */
#hero {
  position: relative;
  height: 100vh; min-height: 680px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}

/* Layers — photo + lumière pour parallax visible */
.hero-layer {
  position: absolute; inset: -18%;
  will-change: transform;
  contain: layout style;
}

/* Résine macro WebGL : couvre la photo (hL0) quand le shader tourne ;
   si WebGL absent / mobile / reduced-motion, le canvas est retiré
   et la photo d'origine reste visible. */
#heroResin {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; /* z-index auto : sous hL1/hL2 (lumières) et .hero-overlay */
}

#hL0 {
  background: url(/assets/img/epx-fda898c5.webp) center/cover no-repeat;
  animation: heroBreathL 8s ease-in-out infinite alternate;
}

#hL1 {
  background:
    radial-gradient(ellipse 52% 38% at 54% 46%, rgba(232,207,150,.28) 0%, rgba(201,164,92,.14) 35%, transparent 65%),
    radial-gradient(circle 280px at 46% 50%, rgba(201,164,92,.12) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: heroBreathC 6s ease-in-out infinite alternate;
}

#hL2 {
  background:
    radial-gradient(circle 120px at 50% 46%, rgba(255,248,232,.30) 0%, rgba(232,207,150,.18) 40%, transparent 75%),
    radial-gradient(ellipse 60% 4% at 50% 47%, rgba(255,248,232,.12) 0%, transparent 100%);
  mix-blend-mode: screen;
  animation: heroBreathR 7s ease-in-out infinite alternate;
}

@keyframes heroBreathL {
  from { transform: translate(-8px, 4px) scale(1.00); }
  to   { transform: translate( 8px,-4px) scale(1.04); }
}
@keyframes heroBreathC {
  from { transform: translate( 6px,-6px) scale(1.02); opacity: .85; }
  to   { transform: translate(-6px, 6px) scale(0.97); opacity: 1; }
}
@keyframes heroBreathR {
  from { transform: translate(-10px, 5px) scale(1.06); opacity: .80; }
  to   { transform: translate( 10px,-5px) scale(0.94); opacity: 1; }
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 0%, rgba(7,7,8,.5) 75%),
    linear-gradient(180deg,
      rgba(7,7,8,.55) 0%,
      rgba(7,7,8,.06) 32%,
      rgba(7,7,8,.42) 70%,
      var(--obs) 100%);
  z-index: 2; pointer-events: none;
}

.hero-content {
  position: relative; z-index: 3;
  text-align: center;
  margin-top: 16vh;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.hero-content::before {
  content: '';
  position: absolute;
  top: -8vh; left: 50%; transform: translateX(-50%);
  width: 70vw; height: calc(100% + 28vh);
  background: radial-gradient(ellipse at center, rgba(12,12,15,.65) 0%, rgba(12,12,15,.3) 40%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-logo :is(h1,.ph1) {
  font-family: var(--serif);
  font-size: clamp(52px, 10vw, 136px);
  font-weight: 300;
  letter-spacing: .34em;
  padding-left: .34em;
  line-height: 1;
  background: linear-gradient(180deg, #fffdf6 0%, #ffe9b8 38%, #e0b86a 72%, #b8923f 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 32px rgba(0,0,0,.85)) drop-shadow(0 0 55px rgba(201,164,92,.38));
  opacity: 0;
  animation: heroFadeUp 1.8s .4s var(--ease) forwards;
}
.hero-logo .sub {
  font-size: clamp(13px, 1.8vw, 17px);
  letter-spacing: .56em;
  text-transform: uppercase;
  margin-top: 22px;
  padding-left: .56em;
  font-weight: 500;
  background: linear-gradient(180deg, #fffdf6 0%, #ffe9b8 40%, #d4a84e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0,0,0,1)) drop-shadow(0 0 40px rgba(201,164,92,.35));
  opacity: 0;
  animation: heroFadeUp 1.8s .7s var(--ease) forwards;
}
.hero-tagline {
  position: absolute; bottom: -15vh; left: 50%; transform: translateX(-50%);
  width: max-content;
  opacity: 0;
  animation: heroFadeUp 1.8s 1.1s var(--ease) forwards;
}
.hero-tagline p {
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 34px);
  font-style: italic;
  letter-spacing: .2em;
  font-weight: 400;
  background: linear-gradient(180deg, #fffdf6 0%, #ffe9b8 40%, #d4a84e 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 24px rgba(0,0,0,1)) drop-shadow(0 0 48px rgba(201,164,92,.3));
}
.hero-tagline .hero-crafts {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: .38em;
  text-transform: uppercase;
  margin-top: 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,253,246,.92) 0%, rgba(212,168,78,.82) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,.95));
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}

.scroll-ind {
  position: absolute; bottom: 5vh; z-index: 3;
  left: 50%; transform: translateX(-50%);
  opacity: 0;
  animation: fadeIn 2.4s 2s forwards;
}
.scroll-ind .chev {
  width: 1px; height: 48px;
  background: linear-gradient(var(--gold), transparent);
  margin: 0 auto;
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* ---- Perf : contenu hors viewport non rendu ---- */
#faq, #valeurs, footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
#showroom {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ============================
   VISION
   ============================ */
#vision {
  position: relative;
  padding: var(--s-pad) var(--h-pad);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 90px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
#vision::before {
  content: '';
  position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
  background:
    radial-gradient(ellipse at 22% 45%, rgba(201,164,92,.07) 0%, transparent 52%),
    linear-gradient(180deg, var(--obs) 0%, var(--obs2) 100%);
}
.section-tag {
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
  display: flex; align-items: center; gap: 14px;
}
.section-tag::before {
  content: ''; width: 34px; height: 1px; background: var(--gold); flex-shrink: 0;
}
.vision-txt h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 300; line-height: 1.18;
  margin-bottom: 28px; color: var(--gold-l);
}
.vision-txt p {
  color: var(--txt-dim); font-size: 16px; line-height: 1.95;
  max-width: 460px; text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.vision-imgs {
  position: relative; height: 480px;
}
.vi {
  position: absolute; background-size: cover; background-position: center;
  box-shadow: var(--sh); overflow: hidden; border-radius: 4px;
}
.vi::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 80px rgba(0,0,0,.55);
}
.vi1 {
  top: 0; right: 0; width: 80%; height: 52%; z-index: 1;
  background: var(--img0) center/cover no-repeat;
  box-shadow: var(--sh), 0 0 50px -10px rgba(201,164,92,.3);
}
.vi2 {
  bottom: 0; left: 0; width: 54%; height: 56%; z-index: 2;
  border: 6px solid var(--obs);
  background: var(--img1) center/cover no-repeat;
}

/* ============================
   MANIFESTE — Sections détaillées
   ============================ */
.manifeste {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--h-pad) var(--s-pad);
}
.mf-block {
  margin-bottom: 110px;
}
.mf-block:last-child { margin-bottom: 0; }

.mf-tag {
  font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px;
}
.mf-tag::before {
  content: ''; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0;
}

.mf-heading {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 300; line-height: 1.3;
  color: var(--gold-l);
  margin-bottom: 24px;
}
.mf-heading-lg {
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.18;
  margin-bottom: 32px;
}

.mf-lead {
  font-size: 16.5px; line-height: 1.85;
  color: var(--txt-dim);
  max-width: 680px;
}

.mf-rule {
  width: 100%; max-width: 260px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto;
}

/* ---- Quote blocks ---- */
.mf-quote {
  text-align: center;
  padding: 52px 0;
}
.mf-quote p {
  font-family: var(--serif);
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 300; font-style: italic;
  line-height: 1.5;
  color: var(--gold-l);
}
.mf-quote-final p {
  font-style: normal;
  font-weight: 400;
}
.mf-signature {
  text-align: center;
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin: 36px 0 46px;
}

/* ---- Two-column splits ---- */
.mf-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.mf-col p {
  font-size: 15.5px; line-height: 1.85;
  color: var(--txt-dim);
  margin-bottom: 18px;
}
.mf-col p:last-child { margin-bottom: 0; }
.mf-col p em {
  color: var(--gold-l); font-style: normal;
  border-bottom: 1px solid rgba(201,164,92,.25);
}

/* ---- Three pillars ---- */
.mf-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 56px;
}
.mf-pillar {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.mf-pillar-icon {
  font-size: 10px; color: var(--gold);
  display: block; margin-bottom: 14px;
}
.mf-pillar h4 {
  font-family: var(--serif);
  font-size: 20px; font-weight: 300;
  color: var(--txt);
  margin-bottom: 12px;
}
.mf-pillar p {
  font-size: 14px; line-height: 1.75;
  color: var(--txt-dim);
}

/* ---- Systems grid ---- */
.mf-sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 60px;
  margin-top: 52px;
}
.mf-sys {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.mf-sys-num {
  font-size: 11px; letter-spacing: .22em;
  color: var(--gold); margin-bottom: 12px;
}
.mf-sys h4 {
  font-family: var(--serif);
  font-size: 24px; font-weight: 300; letter-spacing: .08em;
  color: var(--txt);
  margin-bottom: 6px;
}
.mf-sys-type {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.mf-sys p:last-child {
  font-size: 14.5px; line-height: 1.8;
  color: var(--txt-dim);
}

/* ---- Responsive manifeste ---- */
@media (max-width: 1024px) {
  .manifeste { padding: 0 24px 80px; }
  .mf-block { margin-bottom: 80px; }
  .mf-split { grid-template-columns: 1fr; gap: 32px; }
  .mf-pillars { grid-template-columns: 1fr; gap: 32px; }
  .mf-sys-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================
   COLLECTIONS — Horizontal scroll
   ============================ */
#collections {
  position: relative;
  background: linear-gradient(180deg, var(--obs) 0%, var(--obs2) 50%, var(--obs) 100%);
  padding: clamp(60px, 8vh, 120px) 0;
}
.coll-sticky {
  position: relative;
}
.coll-header {
  padding-left: var(--h-pad);
  margin-bottom: clamp(28px, 4vh, 48px);
}
.coll-header h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 54px);
  font-weight: 300;
  color: var(--gold-l);
  margin-top: 8px;
}
.coll-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--h-pad);
  gap: clamp(20px, 2.5vw, 32px);
  scroll-padding-left: var(--h-pad);
  cursor: grab;
}
.coll-track.is-dragging,
.coll-track.is-wheeling { scroll-snap-type: none; }
.coll-track.is-dragging { cursor: grabbing; }
.coll-track.is-dragging .ci-link { pointer-events: none; }
.coll-track::-webkit-scrollbar { display: none; }

/* Filet de sécurité reveal : garantit la visibilité des sections critiques
   même si le moteur GSAP ne déclenche pas (surclasse l'opacity:0 inline). */
#estimation.sect-live [data-reveal],
#temoignages.sect-live [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
.coll-item {
  flex: 0 0 clamp(320px, 42vw, 580px);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--sh);
  cursor: pointer;
  backface-visibility: hidden;
  height: clamp(400px, 70vh, 680px);
  transition: box-shadow .6s var(--ease), transform .5s var(--ease);
}
.coll-item:last-child { margin-right: var(--h-pad); }
/* Lien pleine carte (cliquable + crawlable) vers la page collection.
   z-index au-dessus de tous les calques décoratifs (visuel, shine, ::after,
   ::before, ci-info) pour capter le clic partout sur la carte. */
.ci-link { position: absolute; inset: 0; z-index: 9; cursor: pointer; }
.coll-item:hover {
  box-shadow: 0 50px 100px -28px rgba(0,0,0,.95), 0 0 60px -12px rgba(201,164,92,.28);
}
.ci-visual {
  position: absolute; inset: 0;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 1s var(--ease);
}
.coll-item:hover .ci-visual { transform: scale(1.04); }

/* Collection visual backgrounds */
.ci-flow {
  background: var(--img2) center 30%/cover no-repeat;
}
.ci-signature {
  background: var(--img3) center 30%/cover no-repeat;
}
.ci-imperium {
  background: var(--img4) center 30%/cover no-repeat;
}
.ci-architekt {
  background: var(--img5) center 30%/cover no-repeat;
}
.ci-shine {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.coll-item::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7,7,8,.30) 0%,
      rgba(7,7,8,.15) 20%,
      rgba(7,7,8,.10) 35%,
      rgba(7,7,8,.08) 50%,
      rgba(7,7,8,.12) 65%,
      rgba(7,7,8,.25) 80%,
      rgba(7,7,8,.45) 100%);
  z-index: 3; transition: opacity .6s; pointer-events: none;
}
.coll-item::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  border: 1px solid transparent;
  transition: border-color .6s, box-shadow .6s; pointer-events: none;
}
.coll-item:hover::before {
  border-color: rgba(201,164,92,.4);
  box-shadow: inset 0 0 32px rgba(201,164,92,.09);
}
.ci-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  padding: 34px 36px;
  pointer-events: none; /* purement décoratif : le clic passe au lien .ci-link */
}
.ci-num {
  display: none;
}
.ci-info h4 {
  font-family: var(--serif); font-size: 36px;
  font-weight: 400; letter-spacing: .16em;
  margin-bottom: 10px; color: var(--gold-l);
  text-shadow: 0 2px 22px rgba(0,0,0,.7);
}
.ci-line {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); text-shadow: 0 1px 10px rgba(0,0,0,.95);
  font-weight: 400; transition: opacity .6s;
}
.ci-desc {
  font-size: 13px; color: var(--gold-l); line-height: 1.6;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .6s;
  margin-top: 0;
}
.coll-item:hover .ci-desc { max-height: 90px; opacity: 1; margin-top: 14px; }
.ci-arrow {
  display: inline-block; font-size: 18px; color: var(--gold);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease), opacity .6s;
}
.coll-item:hover .ci-arrow { max-height: 40px; opacity: 1; margin-top: 8px; }

.coll-scroll-hint {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(20px, 3vh, 36px) var(--h-pad) 0;
}
.coll-progress {
  flex: 1; height: 2px;
  background: rgba(201,164,92,.15); border-radius: 1px;
  overflow: hidden;
}
.coll-progress-fill {
  height: 100%; width: 25%;
  background: var(--gold);
  border-radius: 1px;
  transition: width .15s linear;
}
.coll-hint-text {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(201,164,92,.5);
  white-space: nowrap;
  animation: hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* ============================
   CTA BAND
   ============================ */
#cta-band {
  position: relative; height: 520px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.cta-bg {
  position: absolute; inset: -10%;
  will-change: transform;
  contain: layout style;
  background: url(/assets/img/epx-2543a0b4.webp) center/cover no-repeat;
  filter: brightness(.45);
}
.cta-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent, rgba(7,7,8,.7));
}
.cta-inner {
  position: relative; z-index: 2;
  max-width: 780px; padding: 0 24px;
}
.cta-inner h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4.2vw, 58px);
  font-weight: 300; line-height: 1.18;
  margin-bottom: 36px;
  text-shadow: var(--tsh); color: var(--gold-l);
}
.cta-btn {
  display: inline-block;
  border: 1px solid var(--gold);
  padding: 17px 44px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-l); background: transparent;
  transition: background .5s, color .5s, box-shadow .5s, letter-spacing .5s;
}
.cta-btn:hover {
  background: var(--gold); color: #000;
  box-shadow: 0 0 44px rgba(201,164,92,.5);
  letter-spacing: .34em;
}

/* ============================
   VALEURS
   ============================ */
#valeurs { padding: var(--s-pad) var(--h-pad); }
.val-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 50px; text-align: center;
}
.val-item .vsym {
  font-family: var(--serif); font-size: 36px;
  color: var(--gold); margin-bottom: 20px;
  text-shadow: 0 0 30px rgba(201,164,92,.45);
  display: block;
}
.val-item h6 {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.val-item p {
  font-size: 14px; color: var(--txt-dim); line-height: 1.7;
  max-width: 230px; margin: 0 auto;
}

/* ============================
   SHOWROOM
   ============================ */
#showroom {
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  overflow: hidden;
  padding: var(--s-pad) var(--h-pad);
  border-top: 1px solid var(--line);
}
.sh-bg {
  position: absolute; inset: -10%;
  will-change: transform;
  contain: layout style;
  background: url(/assets/img/epx-8749ad75.webp) center/cover no-repeat;
}
.sh-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(12,12,15,.93) 0%,
    rgba(12,12,15,.5) 55%,
    rgba(12,12,15,.72) 100%);
}
.sh-inner {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto; width: 100%;
}
.sh-inner h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.8vw, 70px);
  font-weight: 300; line-height: 1.08;
  margin-bottom: 26px; color: var(--gold-l);
}
.sh-lead {
  font-size: 17px; line-height: 1.9;
  color: var(--txt-dim); max-width: 540px; margin-bottom: 40px;
}
.sh-info {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 50px; margin-bottom: 42px;
}
.sh-info .it h4 {
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.sh-info .it p { font-size: 15px; line-height: 1.6; color: var(--txt); }
.sh-ctas { display: flex; gap: 18px; flex-wrap: wrap; }
.btn-primary {
  background: var(--gold); color: #000;
  padding: 17px 40px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  transition: box-shadow .4s, transform .4s;
  border: 1px solid var(--gold);
}
.btn-primary:hover {
  box-shadow: 0 0 40px rgba(201,164,92,.5);
  transform: translateY(-2px);
}
.btn-ghost {
  border: 1px solid var(--line);
  padding: 17px 40px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-l); background: transparent;
  transition: border-color .4s, background .4s;
}
.btn-ghost:hover {
  border-color: var(--gold);
  background: rgba(201,164,92,.08);
}
.sh-vip {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px; max-width: 900px;
}
.sh-vip .v h5 {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-l); margin-bottom: 8px;
}
.sh-vip .v p { font-size: 13px; color: var(--txt-dim); line-height: 1.6; }
.sh-vip .v-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-l);
  border-bottom: 1px solid rgba(201,164,92,.4);
  padding-bottom: 2px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.sh-vip .v-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ============================
   FOOTER
   ============================ */
footer {
  padding: 90px var(--h-pad) 46px;
  border-top: 1px solid var(--line);
  text-align: center;
  background: var(--obs);
}
.foot-logo {
  font-family: var(--serif); font-size: 30px;
  letter-spacing: .42em; padding-left: .42em;
  margin-bottom: 32px;
  background: var(--grad-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}
.foot-nav {
  display: flex; justify-content: center;
  gap: 30px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-dim); margin-bottom: 42px;
}
.foot-nav a:hover { color: var(--gold-l); }
.foot-legal {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 18px;
}
.foot-legal a {
  position: relative;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--txt-dim); transition: color .3s;
}
.foot-legal a:hover { color: var(--gold-l); }
.foot-copy {
  font-size: 11px; letter-spacing: .16em; color: var(--txt-dim); opacity: .6;
}

/* ============================
   SCROLL REVEAL
   GSAP gère l'état initial via gsap.from() — pas de masquage CSS.
   Fallback IntersectionObserver (reduced-motion / no-JS) :
   ============================ */
.reveal-hidden {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal-hidden.in {
  opacity: 1;
  transform: none;
}

/* ============================
   TUNNEL
   ============================ */
#tunnel {
  position: fixed; inset: 0; z-index: var(--z-tunnel);
  background: var(--obs);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#tunnel.open { display: flex; }
#tunnelCanvas {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.tn-top {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px var(--h-pad);
}
.tn-logo {
  font-family: var(--serif); font-size: 20px;
  letter-spacing: .4em; padding-left: .4em; color: var(--gold-l);
}
.tn-close {
  font-size: 26px; color: var(--txt-dim); background: transparent; border: none;
  transition: color .3s, transform .3s; line-height: 1;
}
.tn-close:hover { color: var(--gold-l); transform: rotate(90deg); }
.tn-progress {
  position: relative; z-index: 3;
  height: 1px; background: rgba(201,164,92,.14);
  margin: 0 var(--h-pad);
}
.tn-bar {
  height: 100%; background: var(--grad-gold);
  width: 11%; transition: width .6s var(--ease);
}
.tn-body {
  position: relative; z-index: 3;
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px; text-align: center;
  overflow: hidden;
}
.tn-step {
  display: none; max-width: 720px; width: 100%;
}
.tn-step.active { display: block; }
.tn-count {
  font-family: var(--serif); font-size: 14px;
  letter-spacing: .3em; color: var(--gold); margin-bottom: 16px;
}
.tn-q {
  font-family: var(--serif);
  font-size: clamp(26px, 4.2vw, 44px);
  font-weight: 300; color: var(--gold-l);
  line-height: 1.2; margin-bottom: 14px;
}
.tn-sub {
  font-size: 14px; color: var(--txt-dim); margin-bottom: 40px;
}
.tn-opts {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.tn-opt {
  border: 1px solid var(--line);
  padding: 18px 30px;
  font-size: 14px; color: var(--txt); font-family: var(--sans); font-weight: 300;
  background: rgba(255,255,255,.02);
  min-width: 150px;
  transition: border-color .35s, background .35s, transform .35s, color .35s;
}
.tn-opt:hover {
  border-color: var(--gold);
  background: rgba(201,164,92,.1);
  transform: translateY(-3px);
}
.tn-opt.sel {
  border-color: var(--gold);
  background: var(--gold);
  color: #000;
}
.tn-input, .tn-textarea {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  padding: 18px 22px;
  color: var(--txt); font-family: var(--sans); font-size: 15px; font-weight: 300;
  transition: border-color .35s, background .35s;
  margin-bottom: 14px;
}
.tn-input:focus, .tn-textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(201,164,92,.06);
}
.tn-textarea { resize: vertical; min-height: 120px; }
.tn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tn-upload {
  border: 1.5px dashed var(--line);
  padding: 44px; text-align: center;
  color: var(--txt-dim);
  cursor: pointer; transition: border-color .35s, color .35s, background .35s;
}
.tn-upload:hover, .tn-upload:focus {
  border-color: var(--gold); color: var(--gold-l);
  background: rgba(201,164,92,.04);
  outline: none;
}
.tn-upload-icon {
  font-size: 32px; margin-bottom: 12px; color: var(--gold); display: block;
}
.tn-upload-hint { font-size: 12px; opacity: .7; display: block; margin-top: 8px; }
#tnFileName { margin-top: 14px; font-size: 13px; color: var(--gold-l); min-height: 20px; }
#tnFile { display: none; }
.tn-nav {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px var(--h-pad);
}
.tn-back {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-dim); background: transparent; border: none;
  opacity: 0; pointer-events: none;
  transition: color .3s, opacity .3s;
}
.tn-back.show { opacity: 1; pointer-events: auto; }
.tn-back:hover { color: var(--gold-l); }
.tn-next {
  background: var(--gold); color: #000;
  padding: 16px 44px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  border: none;
  transition: box-shadow .4s, letter-spacing .4s;
}
.tn-next:hover { box-shadow: 0 0 36px rgba(201,164,92,.5); letter-spacing: .3em; }
.tn-final { text-align: center; }
.tn-final-icon { font-size: 60px; color: var(--gold); margin-bottom: 22px; }

/* ---- Consentement ---- */
.tn-consent {
  margin-top: 4px; text-align: left;
  font-size: 13px; color: var(--txt-dim); line-height: 1.5;
}
.tn-consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.tn-consent input { margin-top: 2px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }

/* ---- Champs invalides ---- */
.tn-input.invalid {
  border-color: #c0573e;
  background: rgba(192,87,62,.06);
}

/* ---- Message d'erreur ---- */
.tn-error {
  margin-top: 16px; min-height: 18px;
  font-size: 13px; color: #e08a6a;
  opacity: 0; transition: opacity .3s;
}
.tn-error.show { opacity: 1; }

/* ---- Shake (option requise non choisie) ---- */
@keyframes tnShake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-7px); }
  40%,60% { transform: translateX(7px); }
}
.tn-opts.shake { animation: tnShake .5s; }

/* ---- Bouton « Envoi… » spinner ---- */
.tn-next.loading { position: relative; color: transparent; pointer-events: none; }
.tn-next.loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.28); border-top-color: #000;
  border-radius: 50%; animation: tnspin .7s linear infinite;
}
@keyframes tnspin { to { transform: rotate(360deg); } }

/* ---- Upload : état drag + nom fichier erreur ---- */
.tn-upload.drag {
  border-color: var(--gold);
  background: rgba(201,164,92,.08);
  color: var(--gold-l);
}
#tnFileName.err { color: #e08a6a; }

/* ---- Aperçus photos ---- */
.tn-previews {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 18px;
}
.tn-prev {
  position: relative; width: 96px; height: 96px;
  border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; background: rgba(255,255,255,.03);
}
.tn-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-prev-pdf {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--serif); letter-spacing: .15em;
  color: var(--gold-l); font-size: 14px;
}
.tn-prev-rm {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(12,12,15,.85); color: #fff;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, color .25s;
}
.tn-prev-rm:hover { background: var(--gold); color: #000; }
.tn-prev-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-size: 10px; text-align: center; padding: 2px;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff;
}

/* ============================================================
   FAQ — Questions fréquentes
   ============================================================ */
#faq { padding: var(--s-pad) var(--h-pad); background: var(--obs); }
.faq-wrap { max-width: 920px; margin: 0 auto; }
.faq-head { text-align: center; margin-bottom: 56px; }
.faq-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 4vw, 46px); color: var(--gold-l);
  line-height: 1.15; margin: 14px 0 22px;
}
.faq-intro {
  max-width: 680px; margin: 0 auto;
  color: var(--txt-dim); font-size: 15px; line-height: 1.85; font-weight: 300;
}
.faq-intro strong { color: var(--txt); font-weight: 400; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 4px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(18px, 2.4vw, 24px); color: var(--txt);
  margin: 0; line-height: 1.3; transition: color .3s;
}
.faq-item[open] summary h3, .faq-item summary:hover h3 { color: var(--gold-l); }
.faq-plus { position: relative; width: 18px; height: 18px; flex: none; }
.faq-plus::before, .faq-plus::after {
  content: ''; position: absolute; background: var(--gold);
  transition: transform .35s var(--ease), opacity .35s;
}
.faq-plus::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.faq-plus::after  { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-plus::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-item p {
  padding: 0 4px 28px; max-width: 760px;
  color: var(--txt-dim); font-size: 15px; line-height: 1.85; font-weight: 300; margin: 0;
}
.faq-item p strong { color: var(--txt); font-weight: 400; }

/* ============================================================
   SIMULATEUR D'ESTIMATION
   ============================================================ */
#estimation { position: relative; padding: var(--s-pad) var(--h-pad); background: var(--obs2); overflow: hidden; }

/* Ambiance locale — particules d'or (dots injectés en JS) */
.est-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.est-dot {
  position: absolute; border-radius: 50%;
  background: var(--gold-l); opacity: 0;
  animation-name: estFloat; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes estFloat {
  0%   { transform: translateY(0); opacity: 0; }
  35%  { opacity: .18; }
  70%  { opacity: .08; }
  100% { transform: translateY(-70px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .est-dot { animation: none; opacity: 0; }
}

.est-wrap { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; }

/* En-tête éditorial : kicker + titre à gauche, annotation calée à droite */
.est-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: 76px;
}
.est-head .section-tag::before { width: 40px; }
.est-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 4.5vw, 54px); color: var(--gold-l);
  line-height: 1.12; margin: 0;
}
.est-annot {
  flex: none; max-width: 300px; text-align: right;
  color: var(--txt-dim); font-size: 13px; line-height: 1.75; font-weight: 300;
  padding-bottom: 6px;
}

/* Corps — split asymétrique */
.est-body { display: grid; grid-template-columns: 5fr 4fr; gap: 60px; align-items: start; }
.est-col-label {
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--txt-dim); margin-bottom: 26px;
}

/* Gammes — lignes éditoriales verticales */
.est-gammes { display: flex; flex-direction: column; margin-bottom: 54px; border-top: 1px solid var(--line); }
.est-card { position: relative; display: block; cursor: pointer; }
.est-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.est-card-in {
  display: flex; align-items: center; gap: 18px;
  padding: 21px 16px 21px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  transition: background .35s, border-color .35s;
}
.est-card:hover .est-card-in { background: rgba(255,255,255,.02); border-bottom-color: var(--line-h); }
.est-card input:checked + .est-card-in,
.est-card.is-checked .est-card-in {
  border-left-color: var(--gold);
  background: rgba(201,164,92,.05);
}
.est-card input:focus-visible + .est-card-in { outline: 2px solid var(--gold); outline-offset: -2px; }
.est-card-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--gold-d); background: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.est-card input:checked + .est-card-in .est-card-dot {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 10px rgba(201,164,92,.55);
}
.est-card-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.est-card-name { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--txt); line-height: 1.3; }
.est-card-desc { font-size: 12px; color: var(--txt-dim); font-weight: 300; letter-spacing: .04em; }
.est-card-prix {
  margin-left: auto; flex: none; white-space: nowrap;
  font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--gold); line-height: 1;
}

/* Surface */
.est-surface > label {
  display: block; margin-bottom: 18px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.est-range-row { display: flex; align-items: center; gap: 26px; }
.est-range-row input[type="range"] { flex: 1; accent-color: var(--gold); cursor: pointer; }
.est-range-row output {
  flex: none; min-width: 110px; text-align: right;
  font-family: var(--serif); font-size: 30px; color: var(--gold-l); line-height: 1;
}

/* Scène — panneau résultat, matière minérale assombrie */
.est-panel {
  position: relative; display: flex; flex-direction: column;
  min-height: 480px; padding: 44px;
  border: 1px solid rgba(201,164,92,.35);
  background-color: #cfc7b6;
  background-image:
    linear-gradient(rgba(12,12,15,.88), rgba(12,12,15,.94)),
    radial-gradient(circle at 14px 10px, rgba(201,164,92,.25) 0 2.5px, transparent 4px),
    radial-gradient(circle at 9px  9px,  #f2ede3 0 7px, rgba(242,237,227,0) 8.5px),
    radial-gradient(circle at 31px 23px, #b8ae9c 0 6px, rgba(184,174,156,0) 7.5px),
    radial-gradient(circle at 19px 37px, #e8e2d6 0 8px, rgba(232,226,214,0) 9.5px),
    radial-gradient(circle at 41px 13px, #d6cfc0 0 5px, rgba(214,207,192,0) 6.5px),
    radial-gradient(circle at 7px  27px, #c9bfa9 0 5px, rgba(201,191,169,0) 6.5px),
    radial-gradient(circle at 27px 6px,  #f2ede3 0 6px, rgba(242,237,227,0) 7.5px),
    radial-gradient(circle at 45px 39px, #b8ae9c 0 7px, rgba(184,174,156,0) 8.5px),
    radial-gradient(circle at 17px 17px, #a79d8a 0 4px, rgba(167,157,138,0) 5.5px);
  background-size:
    100% 100%,
    87px 73px,
    46px 46px,
    62px 62px,
    54px 54px,
    38px 38px,
    58px 58px,
    42px 42px,
    66px 66px,
    50px 50px;
  background-position:
    center,
    9px 15px,
    0 0, 21px 13px, 9px 31px, 5px 3px, 27px 19px, 13px 7px, 33px 27px, 3px 23px;
  background-repeat:
    no-repeat,
    repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .est-panel.est-prep { clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.16,1,.3,1); }
  .est-panel.est-prep.est-in { clip-path: inset(0 0 0 0); }
}
.est-corner { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.est-corner-tl { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.est-corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.est-result-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.est-result { margin: auto 0; padding: 34px 0; }
.est-result-sub {
  font-variant: small-caps; letter-spacing: .2em;
  font-size: 14px; color: var(--txt-dim); margin-bottom: 10px;
}
.est-result-num {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(52px, 6vw, 84px); line-height: 1; margin: 0 0 18px;
  font-variant-numeric: tabular-nums;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.est-recap { font-size: 13px; color: var(--txt-dim); font-weight: 300; letter-spacing: .04em; line-height: 1.6; }
.est-panel-foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 26px; }
.est-disclaimer { color: var(--txt-dim); font-size: 11.5px; line-height: 1.8; font-weight: 300; margin-bottom: 22px; }
.est-cta {
  display: block; width: 100%; padding: 17px 44px;
  font-family: var(--sans); font-size: 14px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  color: #000; background: var(--grad-gold); border: 0; cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.est-cta:hover { transform: translateY(-2px); box-shadow: var(--sh-gold); }
.est-cta:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }

/* ---- Visualiseur avant/après du configurateur ---- */
.est-visu { margin-top: 70px; }
.est-visu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 26px; flex-wrap: wrap; }
.est-visu-sub { max-width: 520px; font-size: 13.5px; color: var(--txt-dim); line-height: 1.7; }
.est-visu-sub strong { color: var(--txt); font-weight: 400; }
.est-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 220px; padding: 40px;
  border: 1px dashed var(--line-h); border-radius: 8px;
  background: rgba(255,255,255,.012);
  cursor: pointer; text-align: center;
  transition: border-color .3s, background .3s;
}
.est-drop:hover, .est-drop.is-drag { border-color: var(--gold); background: rgba(201,164,92,.05); }
.est-drop:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.est-drop-ic { font-size: 30px; color: var(--gold); }
.est-drop-txt { font-size: 14px; color: var(--txt-dim); line-height: 1.7; }
.est-drop-txt em { font-style: normal; color: var(--gold); }
.est-cmp-stage {
  position: relative; overflow: hidden; border-radius: 8px;
  border: 1px solid rgba(201,164,92,.35);
  aspect-ratio: 16 / 9; max-height: 640px;
  user-select: none; touch-action: pan-y; cursor: ew-resize;
  background: var(--obs2);
}
.est-cmp-before, .est-cmp-afterwrap { position: absolute; inset: 0; }
.est-cmp-before { width: 100%; height: 100%; object-fit: cover; }
.est-cmp-afterwrap { clip-path: inset(0 0 0 50%); }
.est-cmp-after { width: 100%; height: 100%; object-fit: cover; display: block; }
.est-cmp-divider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  cursor: ew-resize;
}
.est-cmp-divider:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.est-cmp-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,15,.82); border: 1px solid var(--gold);
  color: var(--gold); font-size: 17px;
  box-shadow: 0 4px 24px rgba(0,0,0,.6);
}
.est-cmp-tag {
  position: absolute; bottom: 14px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 3px;
  background: rgba(12,12,15,.72); border: 1px solid var(--line);
  color: var(--txt-dim); pointer-events: none;
}
.est-cmp-tag-b { left: 14px; }
.est-cmp-tag-a { right: 14px; color: var(--gold); border-color: rgba(201,164,92,.4); }
.est-visu-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.est-visu-note { max-width: 460px; font-size: 11.5px; color: var(--txt-dim); line-height: 1.8; }
.est-visu-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.est-visu-btn {
  padding: 12px 22px; background: transparent;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--txt); font-family: var(--sans); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: border-color .3s, color .3s;
}
.est-visu-btn:hover { border-color: var(--gold); color: var(--gold); }
.est-visu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.est-visu-btn-gold { border-color: rgba(201,164,92,.5); color: var(--gold); }
.est-visu-btn-gold:hover { background: rgba(201,164,92,.08); }
.est-visu-btn[disabled] { opacity: .45; cursor: default; }
.est-visu-status { width: 100%; font-size: 12.5px; color: var(--gold-l); min-height: 1em; }
@media (max-width: 800px) {
  .est-visu-head, .est-visu-foot { flex-direction: column; align-items: flex-start; }
  .est-cmp-stage { aspect-ratio: 4 / 3; }
}
@media (max-width: 1000px) {
  .est-body { grid-template-columns: 1fr; gap: 56px; }
  .est-panel { min-height: 0; }
}
@media (max-width: 900px) {
  .est-head { flex-direction: column; align-items: flex-start; gap: 26px; margin-bottom: 56px; }
  .est-annot { text-align: left; padding-bottom: 0; }
}
@media (max-width: 800px) {
  .est-panel { padding: 34px 26px; }
  .est-card-in { padding: 17px 10px 17px 16px; gap: 14px; }
  .est-card-name { font-size: 16px; }
  .est-range-row output { font-size: 24px; min-width: 90px; }
}

/* ---- Barre de progression de scroll ---- */
#scrollProgress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold-d), var(--gold), var(--gold-l)); z-index: 9999; transition: none; pointer-events: none; }

/* ---- Bouton retour en haut (coin bas-gauche : WhatsApp occupe le bas-droit) ---- */
#backTop { position: fixed; bottom: 32px; left: 32px; z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--obs2); border: 1px solid var(--gold); color: var(--gold); cursor: pointer; opacity: 0; transition: opacity .4s, transform .4s var(--ease), box-shadow .4s; }
.btt[hidden] { display: none; }
.btt.is-visible { opacity: 1; }
.btt:hover { box-shadow: var(--sh-gold); transform: translateY(-3px); }
.btt:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }
.btt svg { width: 20px; height: 20px; }

/* ============================================================
   UTILITAIRE — masqué visuellement mais lu par lecteurs/robots
   ============================================================ */
.vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   POLISH AP — révélations par lignes masquées
   ============================================================ */
.rl-mask {
  display: block; overflow: hidden;
  padding-bottom: .14em; margin-bottom: -.14em;   /* évite de rogner les jambages */
}
.rl-inner { display: block; will-change: transform; }

/* ============================================================
   POLISH AP — soulignés de liens (footer) + balayage boutons
   ============================================================ */
.foot-nav a { position: relative; }
.foot-nav a::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.foot-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Balayage de lumière dorée au survol des boutons */
.btn-primary, .nav-cta, .cta-btn {
  position: relative; overflow: hidden;
}
.btn-primary::after, .nav-cta::after, .cta-btn::after {
  content: ''; position: absolute; top: 0; left: -130%;
  width: 65%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg);
}
.btn-primary:hover::after, .nav-cta:hover::after, .cta-btn:hover::after {
  animation: btnShine .9s ease;
}
@keyframes btnShine { from { left: -130%; } to { left: 150%; } }

/* ============================
   ACTUALITÉS — Le Journal + Hub social
   ============================ */
#actualites {
  padding: var(--s-pad) var(--h-pad);
  background: var(--obs2);
}
.actu-wrap { max-width: var(--max-w); margin: 0 auto; }
.actu-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.actu-head h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 300; line-height: 1.04;
  color: var(--txt); margin: 18px 0 20px;
}
.actu-head p { color: var(--txt-dim); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.7; }

.actu-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
  margin-bottom: 88px;
}
/* Entrée pilotée par le scroll — progressive enhancement.
   Par défaut (non supporté / JS off) : éléments pleinement visibles. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .actu-card {
      animation: actuRise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
  }
}
@keyframes actuRise {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: translateY(0); }
}
.actu-card {
  background: linear-gradient(180deg, rgba(20,20,26,.6), rgba(12,12,15,.4));
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .6s var(--ease), box-shadow .6s, border-color .6s;
}
.actu-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.9), 0 0 36px -12px rgba(201,164,92,.22);
  border-color: rgba(201,164,92,.4);
}
.actu-media {
  position: relative; display: block;
  height: 230px; overflow: hidden;
}
.actu-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s var(--ease);
}
.actu-card:hover .actu-media img { transform: scale(1.07); }
.actu-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,8,.05) 40%, rgba(7,7,8,.55) 100%);
  pointer-events: none;
}
.actu-cat {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--obs); background: var(--grad-gold);
  padding: 6px 12px; font-weight: 500;
}
.actu-play {
  position: absolute; inset: 0; z-index: 2; margin: auto;
  width: 58px; height: 58px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.7); border-radius: 50%;
  color: #fff; font-size: 16px; padding-left: 4px;
  background: rgba(12,12,15,.35); backdrop-filter: blur(2px);
  transition: transform .4s var(--ease), background .4s;
}
.actu-card:hover .actu-play { transform: scale(1.12); background: rgba(201,164,92,.4); }
.actu-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.actu-date {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.actu-body h3 {
  font-family: var(--serif); font-size: 23px; font-weight: 400;
  line-height: 1.25; color: var(--gold-l); margin-bottom: 12px;
}
.actu-body p { font-size: 14px; color: var(--txt-dim); line-height: 1.7; margin-bottom: 20px; flex: 1; }
.actu-link {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--txt); transition: color .4s, letter-spacing .4s;
  align-self: flex-start;
}
.actu-link:hover { color: var(--gold-l); letter-spacing: .2em; }

/* ---- Hub réseaux sociaux ---- */
.social-hub {
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(201,164,92,.08), transparent 60%),
    rgba(12,12,15,.5);
  padding: clamp(40px, 5vw, 70px) clamp(24px, 4vw, 60px);
  text-align: center;
}
.social-hub-head h3 {
  font-family: var(--serif); font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 300; color: var(--txt); margin-bottom: 14px;
}
.social-hub-head p { color: var(--txt-dim); font-size: 15px; line-height: 1.7; max-width: 560px; margin: 0 auto 44px; }
.social-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 1000px; margin: 0 auto;
}
.social-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 30px 20px; text-align: center;
  border: 1px solid var(--line); background: rgba(20,20,26,.45);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .5s, background .5s;
}
.social-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,164,92,.5);
  box-shadow: 0 30px 60px -26px rgba(0,0,0,.9);
}
.social-ico {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  color: var(--gold-l); transition: color .5s, border-color .5s, transform .5s var(--ease);
}
.social-ico svg { width: 26px; height: 26px; }
.social-card:hover .social-ico { transform: scale(1.1); border-color: var(--gold); }
.social-txt { display: flex; flex-direction: column; gap: 3px; }
.social-name {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--txt);
}
.social-handle { font-size: 12px; color: var(--txt-dim); letter-spacing: .04em; }
.social-cta {
  margin-top: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); opacity: 0; transform: translateY(6px);
  transition: opacity .5s, transform .5s var(--ease);
}
.social-card:hover .social-cta { opacity: 1; transform: translateY(0); }
.social-ig:hover .social-ico { color: #e1306c; border-color: #e1306c; }
.social-yt:hover .social-ico { color: #ff0000; border-color: #ff0000; }
.social-wa:hover .social-ico { color: #25d366; border-color: #25d366; }

/* ---- Bouton WhatsApp flottant ---- */
#waFloat {
  position: fixed; right: clamp(18px, 2.4vw, 34px); bottom: clamp(18px, 2.4vw, 34px);
  z-index: 90; width: 58px; height: 58px;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: #25d366;
  box-shadow: 0 12px 34px -8px rgba(37,211,102,.6), 0 6px 18px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), box-shadow .4s;
}
#waFloat svg { width: 30px; height: 30px; position: relative; z-index: 2; }
#waFloat:hover { transform: scale(1.08); box-shadow: 0 18px 44px -8px rgba(37,211,102,.75); }
.wa-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; opacity: .55; z-index: 1;
  animation: waPulse 2.4s var(--ease) infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---- Icônes sociales du footer ---- */
.foot-social { display: flex; justify-content: center; gap: 16px; margin: 28px 0 6px; }
.foot-social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--txt-dim); transition: color .4s, border-color .4s, transform .4s var(--ease);
}
.foot-social a svg { width: 20px; height: 20px; }
.foot-social a:hover { color: var(--gold-l); border-color: var(--gold); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .wa-pulse { animation: none; }
}

/* ============================
   RESPONSIVE
   ============================ */
/* Le nav complet (7 entrées + CTA) ne tient proprement qu'au-delà de 1100px.
   En deçà, on masque les liens — navigation via le footer (pas de hamburger),
   cohérent avec le comportement historique du site. */
@media (max-width: 1100px) {
  .nav-links { display: none; }
}
@media (max-width: 1024px) {
  #nav { padding: 20px 24px; }
  #vision {
    grid-template-columns: 1fr; gap: 50px;
    padding: 110px 24px 90px;
  }
  .vision-imgs { height: 420px; }

  /* Collections: pleine largeur sur mobile */
  #collections { padding: clamp(40px, 6vh, 80px) 0; }
  .coll-header { padding-left: 24px; margin-bottom: 28px; }
  .coll-track {
    padding: 0 24px;
    gap: 16px;
    scroll-padding-left: 24px;
  }
  .coll-item {
    flex: 0 0 85vw; height: 420px;
  }
  .coll-item:last-child { margin-right: 24px; }

  .val-grid { grid-template-columns: repeat(2, 1fr); gap: 44px; }
  #valeurs, #showroom, #faq, #estimation, #actualites { padding-left: 24px; padding-right: 24px; }
  .sh-info { grid-template-columns: 1fr; gap: 24px; }
  .sh-vip { grid-template-columns: 1fr; gap: 26px; }
  .tn-top, .tn-nav { padding-left: 24px; padding-right: 24px; }
  .tn-progress { margin: 0 24px; }
  .tn-grid2 { grid-template-columns: 1fr; }
  .actu-grid { grid-template-columns: 1fr; gap: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .val-grid { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr; }
  .mnf-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SAVOIR-FAIRE — 6 étapes du processus
   ============================================================ */
#savoir-faire {
  padding: var(--s-pad) var(--h-pad);
  max-width: var(--max-w);
  margin: 0 auto;
  content-visibility: auto;
}
.sf-head {
  text-align: center;
  margin-bottom: 64px;
}
.sf-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 16px;
}
.sf-head p {
  font-size: 15px;
  color: var(--txt-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
.sf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sf-step {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
  backface-visibility: hidden;
}
.sf-step:hover {
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(201,164,92,.12), 0 16px 50px rgba(0,0,0,.35);
  transform: translateY(-4px);
}
.sf-img {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.sf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s;
}
.sf-step:hover .sf-img img {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.sf-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12,12,15,.6) 100%);
  pointer-events: none;
}
.sf-shine {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.sf-step:hover .sf-shine { opacity: 1; }
.sf-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 300;
  color: var(--gold);
  opacity: .5;
  z-index: 2;
  line-height: 1;
}
.sf-body {
  padding: 20px;
}
.sf-body h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 8px;
  letter-spacing: .02em;
}
.sf-body p {
  font-size: 13px;
  color: var(--txt-dim);
  line-height: 1.7;
}

/* ============================================================
   MANIFESTE — 3 piliers de la marque
   ============================================================ */
#manifeste {
  padding: var(--s-pad) var(--h-pad);
  max-width: var(--max-w);
  margin: 0 auto;
  content-visibility: auto;
}
.mnf-head {
  text-align: center;
  margin-bottom: 64px;
}
.mnf-head h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 16px;
}
.mnf-head p {
  font-size: 15px;
  color: var(--txt-dim);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
.mnf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mnf-pillar {
  position: relative;
  padding: 40px 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
  backface-visibility: hidden;
}
.mnf-pillar:hover {
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(201,164,92,.12), 0 16px 50px rgba(0,0,0,.35);
  transform: translateY(-4px);
}
.mnf-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--gold);
  transition: box-shadow .4s;
}
.mnf-pillar:hover .mnf-icon {
  box-shadow: 0 0 20px rgba(201,164,92,.25);
}
.mnf-pillar h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: .03em;
}
.mnf-pillar p {
  font-size: 13.5px;
  color: var(--txt-dim);
  line-height: 1.7;
}
.mnf-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 16px auto 0;
  opacity: .4;
  transition: width .4s var(--ease), opacity .4s;
}
.mnf-pillar:hover .mnf-line {
  width: 60px;
  opacity: .8;
}

/* ============================================================
   INVESTISSEURS / MARCHANDS DE BIENS
   ============================================================ */
#investisseurs {
  padding: var(--s-pad) var(--h-pad);
  max-width: var(--max-w);
  margin: 0 auto;
  content-visibility: auto;
}
#investisseurs .mnf-pillar p strong,
#investisseurs .mf-col p strong {
  color: var(--gold-l);
  font-weight: 400;
}

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
#temoignages {
  position: relative;
  padding: var(--s-pad) var(--h-pad);
  content-visibility: auto;
  overflow: hidden;
}

/* Ambiance locale — particules d'or (dots injectés en JS) */
.tem-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tem-dot {
  position: absolute; border-radius: 50%;
  background: var(--gold-l); opacity: 0;
  animation-name: estFloat; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tem-dot { animation: none; opacity: 0; }
}

.tem-wrap { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; }

/* En-tête éditorial : kicker + titre à gauche, annotation calée à droite */
.tem-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; margin-bottom: clamp(48px, 6vw, 72px);
}
.tem-head .section-tag::before { width: 40px; }
.tem-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 4.5vw, 54px); color: var(--gold-l);
  line-height: 1.12; margin: 0;
}
.tem-annot {
  flex: none; max-width: 300px; text-align: right;
  color: var(--txt-dim); font-size: 13px; line-height: 1.75; font-weight: 300;
  padding-bottom: 6px;
}

/* ---- Bande de chiffres — les nombres vivants ---- */
.tem-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(30px, 4vw, 46px) 0;
  margin-bottom: clamp(56px, 7vw, 90px);
}
.tem-stat { text-align: center; }
.tem-stat-num {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 4vw, 52px); line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 12px;
}
.tem-stat-suffix { font-size: .6em; }
.tem-stat-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--txt-dim); font-weight: 300;
}

/* ---- Corps : invitation + formulaire en split asymétrique ---- */
.tem-body {
  display: grid; grid-template-columns: 4fr 5fr;
  gap: 60px; align-items: start;
  text-align: left;
}
.tem-invite { padding-top: 26px; }
.tem-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(120px, 14vw, 160px); line-height: 0;
  color: var(--gold); opacity: .18;
  height: .42em; margin-bottom: 34px;
  user-select: none;
}
.tem-invite-txt {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.2vw, 22px); color: var(--txt);
  line-height: 1.7; font-weight: 300;
  margin: 0 0 34px;
}
.tem-invite-line {
  display: block; width: 40px; height: 1px;
  background: var(--gold); margin-bottom: 22px;
}
.tem-invite-note {
  font-size: 12px; color: var(--txt-dim);
  letter-spacing: .06em; font-weight: 300; line-height: 1.7;
  margin: 0;
}

/* ---- Formulaire d'avis (modération) — panneau matière ---- */
.tem-form {
  position: relative;
  padding: 40px;
  border: 1px solid rgba(201,164,92,.35);
  text-align: left;
  background-color: #cfc7b6;
  background-image:
    linear-gradient(rgba(12,12,15,.88), rgba(12,12,15,.94)),
    radial-gradient(circle at 14px 10px, rgba(201,164,92,.25) 0 2.5px, transparent 4px),
    radial-gradient(circle at 9px  9px,  #f2ede3 0 7px, rgba(242,237,227,0) 8.5px),
    radial-gradient(circle at 31px 23px, #b8ae9c 0 6px, rgba(184,174,156,0) 7.5px),
    radial-gradient(circle at 19px 37px, #e8e2d6 0 8px, rgba(232,226,214,0) 9.5px),
    radial-gradient(circle at 41px 13px, #d6cfc0 0 5px, rgba(214,207,192,0) 6.5px),
    radial-gradient(circle at 7px  27px, #c9bfa9 0 5px, rgba(201,191,169,0) 6.5px),
    radial-gradient(circle at 27px 6px,  #f2ede3 0 6px, rgba(242,237,227,0) 7.5px),
    radial-gradient(circle at 45px 39px, #b8ae9c 0 7px, rgba(184,174,156,0) 8.5px),
    radial-gradient(circle at 17px 17px, #a79d8a 0 4px, rgba(167,157,138,0) 5.5px);
  background-size:
    100% 100%,
    87px 73px,
    46px 46px,
    62px 62px,
    54px 54px,
    38px 38px,
    58px 58px,
    42px 42px,
    66px 66px,
    50px 50px;
  background-position:
    center,
    9px 15px,
    0 0, 21px 13px, 9px 31px, 5px 3px, 27px 19px, 13px 7px, 33px 27px, 3px 23px;
  background-repeat:
    no-repeat,
    repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .tem-form.tem-prep { clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.16,1,.3,1); }
  .tem-form.tem-prep.tem-in { clip-path: inset(0 0 0 0); }
}
.tem-corner { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.tem-corner-tl { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.tem-corner-br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.tem-form-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.tem-form-title::before {
  content: ''; width: 34px; height: 1px; background: var(--gold); flex-shrink: 0;
}
.tem-form-intro {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--txt-dim);
  font-weight: 300;
  margin: 0 0 28px;
}
.tem-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tem-field { margin-bottom: 18px; }
.tem-field label,
.tem-rating legend {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-dim);
  margin-bottom: 8px;
}
.tem-field input[type="text"],
.tem-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--txt);
  background: var(--obs);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color .3s, box-shadow .3s;
}
.tem-field input[type="text"]:focus,
.tem-field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,164,92,.15);
}
.tem-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* ---- Sélecteur d'étoiles (radios accessibles) ---- */
.tem-rating { border: 0; padding: 0; margin: 0 0 18px; }
.tem-rating-stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.tem-rating-stars .sr-star {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tem-rating-stars label {
  font-size: 30px;
  line-height: 1;
  color: rgba(201,164,92,.25);
  cursor: pointer;
  transition: color .2s, transform .2s;
  margin: 0;
}
.tem-rating-stars label:hover { transform: scale(1.12); }
.tem-rating-stars label:hover,
.tem-rating-stars label:hover ~ label,
.tem-rating-stars .sr-star:checked ~ label {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(201,164,92,.35);
}
.tem-rating-stars .sr-star:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}
.tem-rating-hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--txt-dim);
  margin: 8px 0 0;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tem-form .btn-gold {
  display: inline-block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #000;
  background: var(--grad-gold);
  border: none;
  padding: 16px 40px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.tem-form .btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201,164,92,.25);
}
.tem-form .btn-gold[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.tem-form-status {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
  color: var(--txt-dim);
}
.tem-form-status.ok { color: var(--gold-l); }
.tem-form-status.err { color: #d98f8f; }

@media (max-width: 900px) {
  .tem-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   ZONES D'INTERVENTION
   ============================================================ */
#zones {
  padding: var(--s-pad) var(--h-pad);
  max-width: var(--max-w);
  margin: 0 auto;
  content-visibility: auto;
}
.zones-wrap { text-align: center; }
.zones-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.zones-head p { font-size: 15px; color: var(--txt-dim); line-height: 1.7; max-width: 700px; margin: 16px auto 0; }
.zones-head p strong { color: var(--gold-l); font-weight: 400; }
.zones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
}
.zone-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 32px);
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.zone-item:hover {
  border-color: rgba(201,164,92,.4);
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 20px rgba(201,164,92,.08);
  transform: translateY(-4px);
}
.zone-item h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 400;
  color: var(--gold-l);
  margin-bottom: 10px;
  letter-spacing: .02em;
}
.zone-item p {
  font-size: 13px;
  color: var(--txt-dim);
  line-height: 1.7;
  margin: 0;
}
.zones-cta {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 15px;
  color: var(--txt-dim);
}
.zones-cta strong { color: var(--gold-l); font-weight: 400; }
.zones-cta a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,164,92,.3);
  transition: border-color .3s, color .3s;
}
.zones-cta a:hover {
  color: var(--gold-l);
  border-color: var(--gold);
}

/* ============================================================
   FOOTER SEO
   ============================================================ */
.foot-seo {
  max-width: 700px;
  margin: 16px auto;
  text-align: center;
}
.foot-seo p {
  font-size: 11px;
  color: rgba(205,198,184,.4);
  line-height: 1.8;
  margin: 4px 0;
  letter-spacing: .02em;
}
.foot-seo p strong {
  color: rgba(205,198,184,.55);
  font-weight: 400;
}

@media (max-width: 1100px) {
  .zones-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
  .mnf-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  #investisseurs .mnf-grid { grid-template-columns: 1fr !important; }
  .zones-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .zones-grid { max-width: 100%; }
}

/* ============================================================
   EPOXYA — Custom Cursor
   Masqué sur appareils tactiles via pointer: coarse
   ============================================================ */
/* Curseur masqué seulement quand le custom cursor JS est actif */
body.cursor-active * { cursor: none !important; }

/* Le curseur personnalisé (dot/halo/label) n'est jamais animé par le JS :
   ces éléments sont vestigiaux. On les masque en toutes circonstances pour
   éviter qu'un point doré reste bloqué en haut à gauche quand le JS d'animation
   ne s'exécute pas (fenêtre étroite, prefers-reduced-motion, repli sans GSAP). */
#cursor-dot, #cursor-halo, #cursor-label { display: none !important; }

@media (pointer: fine) {

  #cursor-dot {
    position: fixed;
    z-index: calc(var(--z-cursor) + 2);
    top: 0; left: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ease), height .25s var(--ease),
                background .25s, opacity .25s;
    will-change: transform;
  }

  #cursor-halo {
    position: fixed;
    z-index: calc(var(--z-cursor) + 1);
    top: 0; left: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(201,164,92,.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: width .4s var(--ease), height .4s var(--ease),
                border-color .3s, opacity .3s;
  }

  #cursor-label {
    position: fixed;
    z-index: calc(var(--z-cursor) + 2);
    top: 0; left: 0;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #000;
    background: var(--gold);
    padding: 6px 12px;
    border-radius: 2px;
    pointer-events: none;
    transform: translate(16px, -50%);
    opacity: 0;
    transition: opacity .2s;
    white-space: nowrap;
  }

  /* États curseur */
  body.cursor-hover #cursor-dot {
    width: 14px; height: 14px;
    background: var(--gold-l);
  }
  body.cursor-hover #cursor-halo {
    width: 56px; height: 56px;
    border-color: rgba(201,164,92,.8);
  }
  body.cursor-discover #cursor-dot {
    width: 10px; height: 10px;
    opacity: .6;
  }
  body.cursor-discover #cursor-halo {
    width: 70px; height: 70px;
    border-color: rgba(201,164,92,.6);
    background: rgba(201,164,92,.06);
  }
  body.cursor-discover #cursor-label {
    opacity: 1;
  }

  /* Focus visible (accessibilité clavier) */
  :focus-visible {
    cursor: auto !important;
    outline: 1px solid var(--gold);
    outline-offset: 3px;
  }
}



/* ====== HERITAGE (scoped) ====== */

    #page-heritage button { cursor: pointer; font-family: var(--sans); }


    #page-heritage .grain {
      position: fixed; inset: 0; z-index: 300; pointer-events: none;
      opacity: .04; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    #page-heritage .gold { color: var(--gold); }


    #page-heritage /* ============================================================
       PERSISTENT NAV — Progress bar fixe
       ============================================================ */
    .nav-fixed {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 36px;
      height: 52px;
      background: rgba(12,12,15,.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    #page-heritage .nav-logo {
      font-family: var(--serif);
      font-size: 22px;
      letter-spacing: .12em;
      background: var(--grad-gold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    #page-heritage .nav-steps {
      display: flex;
      align-items: center;
      gap: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    #page-heritage .nav-step {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 18px;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--txt-dim);
      cursor: pointer;
      transition: color .4s;
      position: relative;
      height: 52px;
      line-height: 52px;
    }

    #page-heritage .nav-step::after {
      content: '';
      position: absolute;
      bottom: 0; left: 18px; right: 18px;
      height: 2px;
      background: transparent;
      transition: background .4s;
    }

    #page-heritage .nav-step.active { color: var(--gold); }

    #page-heritage .nav-step.active::after { background: var(--gold); }

    #page-heritage .nav-step.done { color: var(--txt); }

    #page-heritage .nav-step-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      border: 1.5px solid var(--line);
      transition: all .4s;
      flex-shrink: 0;
    }

    #page-heritage .nav-step.done .nav-step-dot { background: var(--gold); border-color: var(--gold); }

    #page-heritage .nav-step.active .nav-step-dot {
      background: var(--gold);
      border-color: var(--gold);
      box-shadow: 0 0 10px rgba(201,164,92,.5);
    }

    #page-heritage .nav-close {
      display: flex; align-items: center; gap: 10px;
      font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-dim); background: none; border: none;
      transition: color .3s;
    }

    #page-heritage .nav-close:hover { color: var(--gold); }

    #page-heritage .nav-close svg { width: 14px; height: 14px; }


    #page-heritage /* ============================================================
       SECTIONS — Full-screen snap
       ============================================================ */
    .tr-section {
      width: 100vw;
      height: 100vh;
      scroll-snap-align: start;
      display: grid;
      position: relative;
      overflow: hidden;
    }


    #page-heritage /* ---- Layout commun : panneau gauche + centre + sidebar ---- */
    .layout-3 {
      grid-template-columns: 340px 1fr 170px;
      grid-template-rows: 1fr;
      padding-top: 52px;
    }


    #page-heritage .tr-left {
      padding: 32px 28px;
      background: rgba(12,12,15,.96);
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 20px;
      overflow-y: auto;
      z-index: 5;
    }

    #page-heritage .tr-tag {
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
    }

    #page-heritage .tr-left h2 {
      font-family: var(--serif);
      font-size: 32px;
      font-weight: 300;
      line-height: 1.15;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    #page-heritage .tr-left > p {
      font-size: 13px;
      color: var(--txt-dim);
      line-height: 1.75;
    }


    #page-heritage /* ---- Centre : zone visuelle ---- */
    .tr-center {
      position: relative;
      overflow: hidden;
    }


    #page-heritage /* ---- Sidebar droite (commune) ---- */
    .tr-sidebar {
      background: rgba(12,12,15,.96);
      border-left: 1px solid var(--line);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
      z-index: 5;
    }


    #page-heritage /* ============================================================
       IMAGE CARD — Traitement visuel UNIFIÉ
       ============================================================ */
    .vcard {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--line);
      cursor: pointer;
      transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
    }

    #page-heritage .vcard img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .6s var(--ease), filter .4s;
    }

    #page-heritage .vcard::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(12,12,15,.6) 100%);
      pointer-events: none;
      transition: opacity .4s;
    }

    #page-heritage .vcard .shine {
      position: absolute; inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
    }

    #page-heritage .vcard:hover {
      border-color: var(--gold);
      box-shadow: 0 0 30px rgba(201,164,92,.15), 0 20px 60px rgba(0,0,0,.4);
    }

    #page-heritage .vcard:hover img {
      transform: scale(1.05);
      filter: brightness(1.12);
    }

    #page-heritage .vcard:hover .shine { opacity: 1; }

    #page-heritage .vcard.active {
      border-color: var(--gold);
      box-shadow: 0 0 24px rgba(201,164,92,.2);
    }

    #page-heritage .vcard.active img { filter: brightness(1.08); }

    #page-heritage .vcard-label {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 10px 14px;
      z-index: 2;
    }

    #page-heritage .vcard-name {
      display: block;
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--txt);
    }

    #page-heritage .vcard-sub {
      display: block;
      font-size: 9px;
      color: var(--txt-dim);
      letter-spacing: .04em;
    }


    #page-heritage /* ---- Sidebar thumbnail (taille réduite) ---- */
    .vcard.thumb { flex-shrink: 0; }

    #page-heritage .vcard.thumb img { height: 85px; }


    #page-heritage /* ---- Full-screen hero card ---- */
    .vcard.hero-card {
      position: absolute; inset: 0;
      border-radius: 0; border: none;
    }

    #page-heritage .vcard.hero-card img { position: absolute; inset: 0; }

    #page-heritage .vcard.hero-card::after {
      background: linear-gradient(180deg, rgba(12,12,15,.15) 0%, transparent 30%, transparent 60%, rgba(12,12,15,.5) 100%);
    }


    #page-heritage /* ---- Floating badge on cards ---- */
    .vcard-badge {
      position: absolute;
      top: 12px; left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 9.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--txt);
      background: rgba(12,12,15,.65);
      backdrop-filter: blur(12px);
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid var(--line);
      z-index: 3;
    }

    #page-heritage .vcard-cta {
      position: absolute;
      bottom: 14px; left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 9.5px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gold);
      background: rgba(12,12,15,.7);
      backdrop-filter: blur(12px);
      padding: 7px 16px;
      border-radius: 20px;
      border: 1px solid var(--line-h);
      z-index: 3;
      display: flex; align-items: center; gap: 5px;
    }


    #page-heritage /* ============================================================
       SECTION 1 — VISION
       ============================================================ */
    .vision-mosaic {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      height: 100%;
    }

    #page-heritage .vision-mosaic .vcard:first-child {
      grid-row: 1 / -1;
    }


    #page-heritage /* ============================================================
       SECTION 2 — UNIVERS (sélecteur émotions)
       ============================================================ */
    .emo-grid {
      display: flex; gap: 5px;
    }

    #page-heritage .emo-btn {
      flex: 1;
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      padding: 12px 3px 9px;
      background: rgba(25,25,32,.5);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--txt-dim);
      font-size: 8.5px;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: all .35s var(--ease);
    }

    #page-heritage .emo-btn:hover { border-color: var(--line-h); background: rgba(25,25,32,.9); }

    #page-heritage .emo-btn.active { border-color: var(--gold); background: rgba(201,164,92,.07); color: var(--gold); }

    #page-heritage .emo-icon {
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      border-radius: 6px;
      transition: background .3s;
    }

    #page-heritage .emo-btn.active .emo-icon { background: rgba(201,164,92,.12); }


    #page-heritage .emo-desc {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 12px 14px;
      background: rgba(25,25,32,.45);
      border-radius: 8px;
      border: 1px solid var(--line);
    }

    #page-heritage .emo-desc-icon {
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--line-h); border-radius: 6px;
      font-size: 15px; color: var(--gold); flex-shrink: 0;
    }

    #page-heritage .emo-desc-title {
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      font-weight: 500; margin-bottom: 3px;
    }

    #page-heritage .emo-desc-text {
      font-size: 12px; color: var(--txt-dim); line-height: 1.6;
    }


    #page-heritage /* Univers main image */
    .univers-img {
      position: absolute; inset: 0;
    }

    #page-heritage .univers-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s;
      filter: brightness(1.05);
    }

    #page-heritage .univers-img .shine {
      position: absolute; inset: 0;
      opacity: 0; pointer-events: none;
      background: radial-gradient(ellipse at 50% 40%, rgba(201,164,92,.08) 0%, transparent 60%);
      transition: opacity .5s;
    }

    #page-heritage .univers-img:hover .shine { opacity: 1; }

    #page-heritage .univers-img:hover img { transform: scale(1.02); filter: brightness(1.1); }

    #page-heritage .univers-gradient {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(12,12,15,.12) 0%, transparent 30%, transparent 65%, rgba(12,12,15,.4) 100%);
      pointer-events: none;
    }

    #page-heritage .tr-drag {
      position: absolute;
      bottom: 28px; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 10px;
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim); white-space: nowrap;
    }

    #page-heritage .tr-drag-icon {
      width: 30px; height: 30px;
      border: 1px solid var(--line-h); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px;
    }


    #page-heritage /* ============================================================
       SECTION 3 — VARIANTES (galerie 3D)
       ============================================================ */
    .gallery-3d {
      position: relative;
      background: radial-gradient(ellipse at 50% 75%, rgba(25,25,32,.5) 0%, var(--obs) 65%);
    }


    #page-heritage .gallery-floor {
      position: absolute;
      bottom: 70px; left: 50%; transform: translateX(-50%);
      width: 360px; height: 360px; pointer-events: none;
    }

    #page-heritage .gallery-floor .circle {
      position: absolute;
      border: 1px solid rgba(201,164,92,.1);
      border-radius: 50%;
      left: 50%; bottom: 0;
      transform: translateX(-50%) perspective(400px) rotateX(72deg);
    }

    #page-heritage .c1 { width: 100px; height: 100px; }

    #page-heritage .c2 { width: 180px; height: 180px; opacity: .65; }

    #page-heritage .c3 { width: 280px; height: 280px; opacity: .35; }

    #page-heritage .c4 { width: 400px; height: 400px; opacity: .18; }


    #page-heritage .gallery-silhouette {
      position: absolute;
      bottom: 85px; left: 50%; transform: translateX(-50%);
      width: 44px; height: 120px;
      z-index: 3; pointer-events: none;
    }

    #page-heritage .gallery-silhouette::before {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(35,33,30,.95);
      border: 1px solid rgba(70,62,50,.25);
    }

    #page-heritage .gallery-silhouette::after {
      content: '';
      position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
      width: 26px; height: 100px;
      background: linear-gradient(180deg, rgba(35,33,30,.95), rgba(20,18,15,.75));
      border-radius: 12px 12px 4px 4px;
      border: 1px solid rgba(70,62,50,.15);
    }


    #page-heritage .var-cards { position: absolute; inset: 0; z-index: 2; }

    #page-heritage .var-card.vcard {
      position: absolute;
      box-shadow: 0 16px 50px rgba(0,0,0,.55);
    }

    #page-heritage .var-card.vcard:hover {
      z-index: 10;
    }


    #page-heritage .gallery-nav {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      display: flex; align-items: center; gap: 16px; z-index: 5;
    }

    #page-heritage .gnav-btn {
      width: 38px; height: 38px; border-radius: 50%;
      border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      color: var(--txt-dim); background: rgba(12,12,15,.5);
      backdrop-filter: blur(10px);
      font-size: 16px;
      transition: all .3s;
    }

    #page-heritage .gnav-btn:hover { border-color: var(--gold); color: var(--gold); }

    #page-heritage .gnav-center {
      width: 42px; height: 42px; border-radius: 50%;
      border: 1px solid var(--line-h);
      background: rgba(201,164,92,.08);
      display: flex; align-items: center; justify-content: center;
      color: var(--gold);
    }

    #page-heritage .gnav-label {
      font-size: 9.5px; letter-spacing: .13em;
      text-transform: uppercase; color: var(--txt-dim);
    }


    #page-heritage /* ============================================================
       SECTION 4 — RÉSULTAT
       ============================================================ */
    .result-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      padding: 40px;
    }

    #page-heritage .result-card {
      width: min(520px, 90%);
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--gold);
      box-shadow: 0 0 40px rgba(201,164,92,.12), 0 30px 80px rgba(0,0,0,.5);
      position: relative;
    }

    #page-heritage .result-card img {
      width: 100%; height: 320px; object-fit: cover;
      filter: brightness(1.08);
    }

    #page-heritage .result-card .shine {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 30%, rgba(201,164,92,.1) 0%, transparent 60%);
      pointer-events: none;
    }

    #page-heritage .result-card::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(12,12,15,.5) 100%);
      pointer-events: none;
    }

    #page-heritage .result-seal {
      text-align: center;
    }

    #page-heritage .result-seal-icon {
      width: 56px; height: 56px; margin: 0 auto 12px;
      border: 1.5px solid var(--gold); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; color: var(--gold);
      box-shadow: 0 0 20px rgba(201,164,92,.2);
    }

    #page-heritage .result-seal-text {
      font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold);
    }


    #page-heritage /* ============================================================
       SCORE CARD — unifié
       ============================================================ */
    .score-card {
      background: rgba(25,25,32,.45);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 18px;
    }

    #page-heritage .score-top {
      font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim); margin-bottom: 8px;
    }

    #page-heritage .score-row {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;
    }

    #page-heritage .score-value {
      font-family: var(--serif); font-size: 48px; font-weight: 300;
      line-height: 1; color: var(--txt);
    }

    #page-heritage .score-value span { font-size: 20px; color: var(--txt-dim); }

    #page-heritage .score-badge {
      display: inline-block;
      font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--gold); border: 1px solid var(--gold);
      padding: 4px 12px; border-radius: 4px;
    }

    #page-heritage .score-name {
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--gold); margin: 6px 0 12px;
    }

    #page-heritage .score-details {
      display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
      border-top: 1px solid var(--line); padding-top: 12px;
    }

    #page-heritage .score-detail { text-align: center; }

    #page-heritage .score-d-label {
      display: block; font-size: 7.5px; letter-spacing: .07em;
      text-transform: uppercase; color: var(--txt-dim); margin-bottom: 3px;
    }

    #page-heritage .score-d-val {
      display: block; font-size: 12px; font-weight: 500;
    }


    #page-heritage /* ============================================================
       BOUTONS
       ============================================================ */
    .btn-outline {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt); background: none;
      border: 1px solid var(--line);
      padding: 12px 20px; border-radius: 4px;
      transition: all .3s var(--ease);
    }

    #page-heritage .btn-outline:hover { border-color: var(--gold); color: var(--gold); }

    #page-heritage .btn-gold {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
      color: #000; font-weight: 400;
      background: var(--grad-gold); border: none;
      padding: 12px 22px; border-radius: 4px;
      transition: all .3s var(--ease);
    }

    #page-heritage .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-gold);
    }

    #page-heritage .tr-btns {
      display: flex; gap: 10px; margin-top: auto;
    }


    #page-heritage /* ---- More button sidebar ---- */
    .thumb-more {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      padding: 12px 6px;
      font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-dim);
      border: 1px dashed var(--line); border-radius: 6px;
      background: none; cursor: pointer;
      margin-top: auto; transition: all .3s;
    }

    #page-heritage .thumb-more:hover { border-color: var(--gold); color: var(--gold); }


    #page-heritage /* ============================================================
       LIGHTBOX
       ============================================================ */
    .lightbox {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(12,12,15,.96);
      backdrop-filter: blur(24px);
      display: none; align-items: center; justify-content: center;
      cursor: zoom-out;
    }

    #page-heritage .lightbox.open { display: flex; }

    #page-heritage .lightbox img {
      max-width: 90vw; max-height: 88vh;
      object-fit: contain; border-radius: 6px;
      box-shadow: var(--sh);
    }

    #page-heritage .lightbox-close {
      position: absolute; top: 24px; right: 32px;
      font-size: 28px; color: var(--txt-dim);
      background: none; border: none; cursor: pointer;
      transition: color .3s;
    }

    #page-heritage .lightbox-close:hover { color: var(--gold); }


    #page-heritage /* ============================================================
       SOUND TOGGLE
       ============================================================ */
    .sound-toggle {
      position: fixed; bottom: 24px; left: 24px; z-index: 50;
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(12,12,15,.65);
      backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      color: var(--txt-dim); transition: all .3s;
    }

    #page-heritage .sound-toggle:hover { border-color: var(--gold); color: var(--gold); }


    #page-heritage /* ============================================================
       ANIMATIONS
       ============================================================ */
    @keyframes fadeUpHeritage { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

    @keyframes pulseRing {
      0%,100% { box-shadow: 0 0 12px rgba(201,164,92,.25); }
      50%     { box-shadow: 0 0 28px rgba(201,164,92,.5); }
    }

    #page-heritage .tr-section .tr-left > * {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .6s var(--ease), transform .6s var(--ease);
    }

    #page-heritage .tr-section.visible .tr-left > * {
      opacity: 1;
      transform: translateY(0);
    }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(1) { transition-delay: .08s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(2) { transition-delay: .14s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(3) { transition-delay: .20s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(4) { transition-delay: .26s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(5) { transition-delay: .32s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(6) { transition-delay: .38s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(7) { transition-delay: .44s; }

    #page-heritage .tr-section.visible .tr-left > *:nth-child(8) { transition-delay: .50s; }


    #page-heritage /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1100px) {
      .layout-3 { grid-template-columns: 300px 1fr 0; }
      .tr-sidebar { display: none; }
    }

    @media (max-width: 768px) {

      #page-heritage .layout-3 { grid-template-columns: 1fr; grid-template-rows: auto; }

      #page-heritage .tr-section { min-height: 100vh; height: auto; }

      #page-heritage .nav-steps { display: none; }

      #page-heritage .tr-left { border-right: none; border-bottom: 1px solid var(--line); padding: 20px; }

      #page-heritage .tr-center, #page-heritage .gallery-3d { min-height: 55vh; }

      #page-heritage .tr-left h2 { font-size: 26px; }

      #page-heritage .emo-grid { flex-wrap: wrap; }

      #page-heritage .emo-btn { min-width: 56px; }

      #page-heritage .score-details { grid-template-columns: repeat(3, 1fr); }

      #page-heritage .result-center { padding: 24px; }

      #page-heritage .var-card.vcard { transform: none !important; }

    
}

  

/* ====== COMPTE (scoped) ====== */


    #page-compte /* ============================================================
       SPLIT LAYOUT
       ============================================================ */
    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
    }


    #page-compte /* ---- Left : hero image ---- */
    .split-visual {
      position: relative;
      overflow: hidden;
    }

    #page-compte .split-visual img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      filter: brightness(.7);
      transition: transform 12s ease-out;
    }

    #page-compte .split-visual:hover img { transform: scale(1.04); }

    #page-compte .split-visual::after {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(12,12,15,.5) 0%, transparent 35%, transparent 60%, rgba(12,12,15,.7) 100%),
        linear-gradient(90deg, transparent 60%, rgba(12,12,15,.95) 100%);
      pointer-events: none;
    }

    #page-compte .split-brand {
      position: absolute;
      bottom: 48px; left: 48px;
      z-index: 2;
    }

    #page-compte .split-brand-logo {
      font-family: var(--serif);
      font-size: 32px;
      letter-spacing: .15em;
      background: var(--grad-gold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 12px;
    }

    #page-compte .split-brand-text {
      font-size: 14px;
      color: var(--txt-dim);
      line-height: 1.7;
      max-width: 320px;
    }

    #page-compte .split-grain {
      position: absolute; inset: 0; z-index: 3; pointer-events: none;
      opacity: .04; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }


    #page-compte /* ---- Right : auth panel ---- */
    .split-auth {
      display: flex;
      flex-direction: column;
      position: relative;
      background: var(--obs);
    }


    #page-compte .auth-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 40px;
      border-bottom: 1px solid var(--line);
    }

    #page-compte .auth-nav .logo {
      font-family: var(--serif);
      font-size: 20px;
      letter-spacing: .12em;
      background: var(--grad-gold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    #page-compte .auth-nav .back {
      font-size: 13px;
      letter-spacing: .06em;
      color: var(--txt-dim);
      transition: color .3s;
      display: flex; align-items: center; gap: 6px;
    }

    #page-compte .auth-nav .back:hover { color: var(--gold); }


    #page-compte .auth-body {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }


    #page-compte .auth-card {
      width: 100%;
      max-width: 400px;
    }


    #page-compte /* ---- Header ---- */
    .auth-icon {
      width: 52px; height: 52px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; color: var(--gold);
      margin: 0 auto 20px;
      box-shadow: 0 0 20px rgba(201,164,92,.12);
    }

    #page-compte .auth-card :is(h1,.ph1) {
      font-family: var(--serif);
      font-size: 30px;
      font-weight: 300;
      text-align: center;
      margin-bottom: 8px;
      letter-spacing: .02em;
    }

    #page-compte .auth-sub {
      text-align: center;
      font-size: 14px;
      color: var(--txt-dim);
      margin-bottom: 32px;
      line-height: 1.6;
    }


    #page-compte /* ---- Tabs ---- */
    .auth-tabs {
      display: flex;
      background: var(--obs2);
      border-radius: 8px;
      padding: 4px;
      margin-bottom: 28px;
      border: 1px solid var(--line);
    }

    #page-compte .auth-tab {
      flex: 1;
      padding: 11px 0;
      text-align: center;
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--txt-dim);
      background: none;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all .35s var(--ease);
      font-family: var(--sans);
      font-weight: 400;
    }

    #page-compte .auth-tab.active {
      color: #000;
      background: var(--grad-gold);
      box-shadow: 0 2px 10px rgba(201,164,92,.25);
    }


    #page-compte /* ---- Form ---- */
    .auth-form { display: none; }

    #page-compte .auth-form.active { display: block; animation: fadeUpCompte .4s var(--ease); }


    @keyframes fadeUpCompte {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    #page-compte .field { margin-bottom: 18px; }

    #page-compte .field label {
      display: block;
      font-size: 11.5px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--txt-dim);
      margin-bottom: 7px;
    }

    #page-compte .field-input {
      position: relative;
    }

    #page-compte .field input {
      width: 100%;
      padding: 13px 16px;
      font-family: var(--sans);
      font-size: 14.5px;
      font-weight: 300;
      color: var(--txt);
      background: rgba(25,25,32,.5);
      border: 1px solid var(--line);
      border-radius: 6px;
      outline: none;
      transition: border-color .3s, box-shadow .3s;
    }

    #page-compte .field input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201,164,92,.08);
    }

    #page-compte .field input::placeholder { color: rgba(205,198,184,.3); }


    #page-compte .field-input .toggle-pass {
      position: absolute;
      right: 12px; top: 50%; transform: translateY(-50%);
      background: none; border: none;
      color: var(--txt-dim); cursor: pointer;
      padding: 4px; font-size: 16px;
      transition: color .3s;
    }

    #page-compte .field-input .toggle-pass:hover { color: var(--gold); }


    #page-compte /* ---- Password strength ---- */
    .pass-strength {
      display: flex; gap: 4px; margin-top: 8px;
    }

    #page-compte .pass-strength-bar {
      flex: 1; height: 3px; border-radius: 2px;
      background: var(--line);
      transition: background .3s;
    }

    #page-compte .pass-strength-bar.weak { background: #c85032; }

    #page-compte .pass-strength-bar.medium { background: #c8a032; }

    #page-compte .pass-strength-bar.strong { background: #4cb860; }

    #page-compte .pass-strength-label {
      font-size: 11px; color: var(--txt-dim);
      margin-top: 4px; text-align: right;
      transition: color .3s;
    }


    #page-compte /* ---- Button ---- */
    .auth-btn {
      width: 100%;
      padding: 14px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #000;
      background: var(--grad-gold);
      border: none;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 6px;
      transition: transform .3s var(--ease), box-shadow .3s, opacity .3s;
      position: relative;
      overflow: hidden;
    }

    #page-compte .auth-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-gold);
    }

    #page-compte .auth-btn:active { transform: translateY(0); }

    #page-compte .auth-btn.loading {
      pointer-events: none;
      opacity: .7;
    }

    #page-compte .auth-btn .spinner {
      display: none;
      width: 18px; height: 18px;
      border: 2px solid rgba(0,0,0,.2);
      border-top-color: #000;
      border-radius: 50%;
      animation: spin .6s linear infinite;
      margin: 0 auto;
    }

    #page-compte .auth-btn.loading .btn-text { display: none; }

    #page-compte .auth-btn.loading .spinner { display: block; }

    @keyframes spin { to { transform: rotate(360deg); } }

    #page-compte /* ---- Messages ---- */
    .auth-msg {
      font-size: 13px;
      padding: 11px 14px;
      border-radius: 6px;
      margin-bottom: 16px;
      display: none;
      animation: fadeUpCompte .3s var(--ease);
      line-height: 1.5;
    }

    #page-compte .auth-msg.visible { display: block; }

    #page-compte .auth-msg.error {
      background: rgba(200,50,50,.1);
      border: 1px solid rgba(200,50,50,.25);
      color: #e8a0a0;
    }

    #page-compte .auth-msg.success {
      background: rgba(50,180,80,.1);
      border: 1px solid rgba(50,180,80,.25);
      color: #a0e8b0;
    }


    #page-compte /* ---- Consent ---- */
    .consent-label {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 12.5px;
      color: var(--txt-dim);
      line-height: 1.6;
      margin-bottom: 20px;
      cursor: pointer;
    }

    #page-compte .consent-label input[type="checkbox"] {
      margin-top: 3px;
      accent-color: var(--gold);
      width: 16px; height: 16px;
      flex-shrink: 0;
    }

    #page-compte .consent-label a { color: var(--gold); transition: opacity .3s; }

    #page-compte .consent-label a:hover { opacity: .7; }


    #page-compte /* ---- Forgot password ---- */
    .forgot-link {
      display: block;
      text-align: right;
      font-size: 12px;
      color: var(--txt-dim);
      margin-top: -10px;
      margin-bottom: 18px;
      transition: color .3s;
    }

    #page-compte .forgot-link:hover { color: var(--gold); }


    #page-compte /* ---- Separator ---- */
    .auth-sep {
      display: flex; align-items: center; gap: 14px;
      margin: 24px 0;
      font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-dim);
    }

    #page-compte .auth-sep::before, #page-compte .auth-sep::after {
      content: ''; flex: 1; height: 1px; background: var(--line);
    }


    #page-compte /* ---- Social hint ---- */
    .auth-social {
      display: flex; gap: 10px;
    }

    #page-compte .auth-social-btn {
      flex: 1;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px;
      font-family: var(--sans);
      font-size: 12px; font-weight: 400;
      letter-spacing: .04em;
      color: var(--txt-dim);
      background: rgba(25,25,32,.5);
      border: 1px solid var(--line);
      border-radius: 6px;
      cursor: not-allowed;
      opacity: .5;
      transition: all .3s;
    }


    #page-compte /* ---- Footer ---- */
    .auth-footer {
      padding: 20px 40px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      color: var(--txt-dim);
      text-align: center;
    }

    #page-compte .auth-footer a { color: var(--gold); }


    #page-compte /* ---- Entrance animations ---- */
    .auth-card > * {
      opacity: 0;
      transform: translateY(12px);
      animation: fadeUpCompte .5s var(--ease) forwards;
    }

    #page-compte .auth-card > *:nth-child(1) { animation-delay: .1s; }

    #page-compte .auth-card > *:nth-child(2) { animation-delay: .15s; }

    #page-compte .auth-card > *:nth-child(3) { animation-delay: .2s; }

    #page-compte .auth-card > *:nth-child(4) { animation-delay: .25s; }

    #page-compte .auth-card > *:nth-child(5) { animation-delay: .3s; }

    #page-compte .auth-card > *:nth-child(6) { animation-delay: .35s; }

    #page-compte .auth-card > *:nth-child(7) { animation-delay: .4s; }


    #page-compte /* ---- Responsive ---- */
    @media (max-width: 900px) {
      .split { grid-template-columns: 1fr; }
      .split-visual { display: none; }
      .auth-body { padding: 32px 24px; }
      .auth-nav { padding: 20px 24px; }
    }

    @media (max-width: 480px) {

      #page-compte .auth-card :is(h1,.ph1) { font-size: 26px; }

      #page-compte .auth-social { flex-direction: column; }

    
}

  

/* ====== AVANT-APRÈS (scoped) ====== */

    #page-avantapres /* ---- Reset ---- */

    /* ---- Grain & Vignette ---- */
    .grain {
      position: fixed; inset: 0; z-index: 300; pointer-events: none;
      opacity: .05; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    #page-avantapres .vig {
      position: fixed; inset: 0; z-index: 299; pointer-events: none;
      box-shadow: inset 0 0 200px 20px rgba(0,0,0,.5);
    }


    #page-avantapres /* ---- Navigation ---- */
    .ap-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; justify-content: space-between; align-items: center;
      padding: 28px clamp(24px, 5vw, 80px);
      background: rgba(7,7,8,.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    #page-avantapres .ap-nav .logo {
      font-family: var(--serif);
      font-size: 26px;
      letter-spacing: .12em;
      background: var(--grad-gold);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    #page-avantapres .ap-nav .back {
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: .06em;
      color: var(--txt-dim);
      transition: color .3s;
    }

    #page-avantapres .ap-nav .back:hover { color: var(--gold); }


    #page-avantapres /* ---- Hero header ---- */
    .ap-hero {
      padding: 160px clamp(24px, 5vw, 80px) 60px;
      text-align: center;
      max-width: 900px;
      margin: 0 auto;
    }

    #page-avantapres .ap-tag {
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 20px;
    }

    #page-avantapres .ap-hero :is(h1,.ph1) {
      font-family: var(--serif);
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 300;
      line-height: 1.2;
      color: var(--txt);
      margin-bottom: 20px;
    }

    #page-avantapres .ap-hero p {
      font-size: 16px;
      color: var(--txt-dim);
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.7;
    }


    #page-avantapres /* ---- Comparison slider ---- */
    .compare-section {
      padding: 40px clamp(24px, 5vw, 80px) 100px;
      max-width: 1200px;
      margin: 0 auto;
    }

    #page-avantapres .compare-container {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid var(--line);
      cursor: ew-resize;
      user-select: none;
      -webkit-user-select: none;
    }

    #page-avantapres .compare-container img {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    #page-avantapres .compare-after {
      z-index: 1;
    }

    #page-avantapres .compare-before {
      z-index: 2;
      clip-path: inset(0 50% 0 0);
    }


    #page-avantapres .compare-handle {
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      z-index: 10;
      width: 4px;
      transform: translateX(-50%);
      background: var(--gold);
      box-shadow: 0 0 20px rgba(201,164,92,.4);
      pointer-events: none;
    }

    #page-avantapres .compare-handle::before, #page-avantapres .compare-handle::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--obs);
      border: 2px solid var(--gold);
      box-shadow: var(--sh-gold);
    }

    #page-avantapres .compare-handle::before {
      top: 50%;
      transform: translate(-50%, -50%);
      background: var(--obs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c9a45c' stroke-width='1.5'%3E%3Cpath d='M8 4l-6 8 6 8M16 4l6 8-6 8'/%3E%3C/svg%3E") center / 20px no-repeat;
    }

    #page-avantapres .compare-handle::after { display: none; }


    #page-avantapres /* Labels AVANT / APRÈS */
    .compare-label {
      position: absolute;
      bottom: 20px;
      z-index: 5;
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold-pale);
      background: rgba(12,12,15,.75);
      backdrop-filter: blur(8px);
      padding: 8px 18px;
      border-radius: 4px;
      border: 1px solid var(--line);
      pointer-events: none;
    }

    #page-avantapres .compare-label-before { left: 20px; }

    #page-avantapres .compare-label-after { right: 20px; }


    #page-avantapres /* ---- Project details ---- */
    .ap-details {
      padding: 0 clamp(24px, 5vw, 80px) 100px;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }

    #page-avantapres .ap-detail-col h3 {
      font-family: var(--serif);
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 300;
      color: var(--txt);
      margin-bottom: 20px;
    }

    #page-avantapres .ap-detail-col p {
      font-size: 15px;
      color: var(--txt-dim);
      line-height: 1.8;
      margin-bottom: 16px;
    }

    #page-avantapres .ap-specs {
      list-style: none;
    }

    #page-avantapres .ap-specs li {
      display: flex;
      justify-content: space-between;
      padding: 14px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }

    #page-avantapres .ap-specs li span:first-child {
      color: var(--txt-dim);
      letter-spacing: .04em;
    }

    #page-avantapres .ap-specs li span:last-child {
      color: var(--gold);
      font-weight: 400;
    }


    #page-avantapres /* ---- CTA ---- */
    /* ---- Réalisations (galerie projets fusionnée) ---- */
    .ap-projets {
      padding: 90px clamp(24px, 5vw, 80px);
      max-width: 1200px;
      margin: 0 auto;
      border-top: 1px solid var(--line);
    }

    #page-avantapres .ap-projets-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 48px;
    }

    #page-avantapres .ap-projets-head .ap-tag { margin-bottom: 10px; }

    #page-avantapres .ap-projets-head h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.6vw, 46px);
      font-weight: 300;
      color: var(--gold-l);
      line-height: 1.05;
    }

    #page-avantapres .ap-projets-head p {
      color: var(--txt-dim);
      font-size: 15px;
      max-width: 420px;
    }

    #page-avantapres .ap-proj-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 34px;
    }

    #page-avantapres .ap-proj-card { cursor: default; }

    #page-avantapres .ap-proj-img {
      position: relative;
      height: 340px;
      overflow: hidden;
      margin-bottom: 22px;
      box-shadow: var(--sh);
    }

    #page-avantapres .ap-proj-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .8s var(--ease);
    }

    #page-avantapres .ap-proj-card:hover .ap-proj-img img { transform: scale(1.06); }

    #page-avantapres .ap-proj-img::after {
      content: '';
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0 64px rgba(0,0,0,.5);
      background: linear-gradient(180deg, rgba(7,7,8,.04) 0%, rgba(7,7,8,.30) 100%);
      pointer-events: none;
    }

    #page-avantapres .ap-proj-card .pc {
      font-size: 10px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 12px;
    }

    #page-avantapres .ap-proj-card h5 {
      font-family: var(--serif);
      font-size: 26px;
      font-weight: 400;
      letter-spacing: .08em;
      margin-bottom: 6px;
      color: var(--gold-l);
    }

    #page-avantapres .ap-proj-card p {
      font-size: 14px;
      color: var(--txt-dim);
      line-height: 1.7;
    }


    #page-avantapres .ap-cta {
      text-align: center;
      padding: 80px clamp(24px, 5vw, 80px);
      border-top: 1px solid var(--line);
      max-width: 1200px;
      margin: 0 auto;
    }

    #page-avantapres .ap-cta h3 {
      font-family: var(--serif);
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 300;
      margin-bottom: 12px;
    }

    #page-avantapres .ap-cta p {
      color: var(--txt-dim);
      margin-bottom: 28px;
      font-size: 15px;
    }

    #page-avantapres .btn-gold {
      display: inline-block;
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #000;
      background: var(--grad-gold);
      border: none;
      padding: 16px 40px;
      border-radius: 4px;
      cursor: pointer;
      transition: transform .3s var(--ease), box-shadow .3s;
    }

    #page-avantapres .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-gold);
    }


    #page-avantapres /* ---- Footer ---- */
    .ap-footer {
      text-align: center;
      padding: 40px clamp(24px, 5vw, 80px);
      border-top: 1px solid var(--line);
      font-size: 13px;
      color: var(--txt-dim);
    }

    #page-avantapres .ap-footer a { color: var(--gold); }


    #page-avantapres /* ---- Studio IA ---- */
    .ai-studio {
      padding: 60px clamp(24px, 5vw, 80px) 90px;
      max-width: 1200px;
      margin: 0 auto;
      border-top: 1px solid var(--line);
    }

    #page-avantapres .ai-studio-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }

    #page-avantapres .ai-studio-head h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 300;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    #page-avantapres .ai-studio-head p { color: var(--txt-dim); font-size: 15px; line-height: 1.7; }

    #page-avantapres .ai-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    #page-avantapres .ai-panel-label {
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 16px;
    }

    #page-avantapres /* Dropzone */
    .ai-connect-hint {
      margin-top: 14px; padding: 12px 16px; font-size: 12.5px; line-height: 1.7;
      color: var(--txt-dim); border: 1px solid rgba(201,164,92,.35);
      border-radius: 6px; background: rgba(201,164,92,.05);
    }
    .ai-connect-hint strong { color: var(--gold); font-weight: 500; }
    .ai-connect-hint a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,164,92,.4); }
    .ai-connect-hint a:hover { border-bottom-color: var(--gold); }
    .ai-connect-badge { margin-top: 10px; font-size: 11.5px; letter-spacing: .08em; color: var(--txt-dim); }
    .ai-connect-badge em { font-style: normal; color: var(--gold); }
    .ai-optional { text-transform: none; letter-spacing: .04em; color: var(--txt-dim); font-size: 11px; }
    .ai-wishes {
      width: 100%; padding: 14px 16px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--line); border-radius: 6px;
      color: var(--txt); font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
      resize: vertical; min-height: 74px;
      transition: border-color .3s;
    }
    .ai-wishes:focus { outline: none; border-color: var(--gold); }
    .ai-wishes::placeholder { color: rgba(205,198,184,.4); }
    .ai-wishes-hint { margin-top: 6px; font-size: 11px; color: var(--txt-dim); letter-spacing: .04em; }

    .ai-drop {
      position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px;
      aspect-ratio: 4 / 3;
      border: 1.5px dashed var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.015);
      cursor: pointer;
      text-align: center;
      padding: 24px;
      transition: border-color .3s, background .3s;
      overflow: hidden;
    }

    #page-avantapres .ai-drop:hover, #page-avantapres .ai-drop.dragover { border-color: var(--gold); background: rgba(201,164,92,.06); }

    #page-avantapres .ai-drop svg { width: 40px; height: 40px; stroke: var(--gold-pale); opacity: .8; }

    #page-avantapres .ai-drop .ai-drop-title { font-size: 15px; color: var(--txt); }

    #page-avantapres .ai-drop .ai-drop-hint { font-size: 12px; color: var(--txt-dim); letter-spacing: .03em; }

    #page-avantapres .ai-drop img.ai-preview {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; border-radius: 6px;
    }

    #page-avantapres .ai-drop.has-image .ai-drop-inner { display: none; }

    #page-avantapres .ai-drop-replace {
      position: absolute; bottom: 10px; right: 10px; z-index: 2;
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
      background: rgba(12,12,15,.8); color: var(--gold-pale);
      border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px;
      backdrop-filter: blur(8px); display: none;
    }

    #page-avantapres .ai-drop.has-image .ai-drop-replace { display: block; }

    #page-avantapres /* Product picker */
    .ai-products { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }

    #page-avantapres .ai-product {
      text-align: left;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.015);
      border-radius: 6px;
      padding: 14px 16px;
      cursor: pointer;
      transition: border-color .25s, background .25s, transform .25s;
      font-family: var(--sans);
      color: var(--txt);
    }

    #page-avantapres .ai-product:hover { transform: translateY(-2px); }

    #page-avantapres .ai-product.active { border-color: var(--gold); background: rgba(201,164,92,.08); }

    #page-avantapres .ai-product .ai-product-name {
      font-size: 13px; letter-spacing: .08em; color: var(--gold);
      display: block; margin-bottom: 4px;
    }

    #page-avantapres .ai-product .ai-product-desc { font-size: 12px; color: var(--txt-dim); line-height: 1.4; }

    #page-avantapres .ai-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

    #page-avantapres .btn-gold[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

    #page-avantapres .ai-status { font-size: 13px; color: var(--txt-dim); min-height: 18px; }

    #page-avantapres .ai-status.error { color: #e08a7a; }

    #page-avantapres /* Result panel */
    .ai-result {
      position: relative;
      aspect-ratio: 4 / 3;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(255,255,255,.015);
      display: flex; align-items: center; justify-content: center;
    }

    #page-avantapres .ai-result .ai-result-empty {
      color: var(--txt-dim); font-size: 13px; letter-spacing: .04em; padding: 24px; text-align: center;
    }

    #page-avantapres .ai-result img.ai-out { width: 100%; height: 100%; object-fit: cover; display: none; }

    #page-avantapres .ai-result.has-output img.ai-out { display: block; }

    #page-avantapres .ai-result.has-output .ai-result-empty { display: none; }

    #page-avantapres /* Spinner overlay */
    .ai-loading {
      position: absolute; inset: 0; z-index: 4;
      display: none; flex-direction: column; align-items: center; justify-content: center;
      gap: 16px;
      background: rgba(7,7,8,.78); backdrop-filter: blur(6px);
      color: var(--gold-pale); font-size: 13px; letter-spacing: .08em;
    }

    #page-avantapres .ai-result.loading .ai-loading { display: flex; }

    #page-avantapres .ai-spinner {
      width: 42px; height: 42px; border-radius: 50%;
      border: 3px solid rgba(201,164,92,.25); border-top-color: var(--gold);
      animation: aiSpin 1s linear infinite;
    }

    @keyframes aiSpin { to { transform: rotate(360deg); } }
    #page-avantapres .ai-download {
      margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; letter-spacing: .06em; color: var(--gold);
      border: 1px solid var(--line); border-radius: 4px; padding: 10px 20px;
      transition: border-color .3s; pointer-events: none; opacity: .4;
    }

    #page-avantapres .ai-download.ready { pointer-events: auto; opacity: 1; }

    #page-avantapres .ai-download.ready:hover { border-color: var(--gold); }

    #page-avantapres .ai-disclaimer { margin-top: 28px; font-size: 12px; color: var(--txt-dim); text-align: center; line-height: 1.6; }


    #page-avantapres /* ---- 3D Studio Immersive ---- */
    .ap-scene { perspective: 1200px; perspective-origin: 50% 50%; }


    #page-avantapres /* Initial states (GSAP fromTo handles animation, #page-avantapres these are fallbacks) */
    .ap-hero .ap-tag, #page-avantapres .ap-hero :is(h1,.ph1), #page-avantapres .ap-hero p { opacity: 0; }

    #page-avantapres .compare-section { opacity: 0; }

    #page-avantapres .ap-detail-col, #page-avantapres .ap-cta, #page-avantapres .ai-studio { opacity: 0; }


    #page-avantapres /* Cinematic gold light sweep on comparator */
    .compare-container::after {
      content: '';
      position: absolute; inset: 0; z-index: 15;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 40%, rgba(201,164,92,.12) 48%, rgba(201,164,92,.3) 50%, rgba(201,164,92,.12) 52%, transparent 60%);
      transform: translateX(-200%);
      mix-blend-mode: screen;
      will-change: transform;
    }

    #page-avantapres .compare-container.sweep-active::after {
      animation: goldSweep 1.8s var(--ease-p4) forwards;
    }

    @keyframes goldSweep {
      to { transform: translateX(200%); }
    }

    #page-avantapres /* Floating ambient particles */
    .ap-particles {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    }

    #page-avantapres .ap-particle {
      position: absolute;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--gold);
      opacity: 0;
      will-change: transform, opacity;
    }


    #page-avantapres /* Parallax depth layers */
    .ap-depth-bg {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      z-index: -1; pointer-events: none;
      overflow: hidden;
    }

    #page-avantapres .ap-depth-line {
      position: absolute;
      width: 1px; height: 200px;
      background: linear-gradient(to bottom, transparent, rgba(201,164,92,.08), transparent);
      will-change: transform;
    }


    #page-avantapres /* Enhanced handle glow on scroll entry */
    .compare-handle.glow-pulse {
      filter: drop-shadow(0 0 12px rgba(201,164,92,.6));
    }

    #page-avantapres .compare-handle.glow-pulse::before {
      box-shadow: 0 0 24px rgba(201,164,92,.6), 0 0 48px rgba(201,164,92,.3);
    }


    #page-avantapres /* Detail cards 3D tilt on reveal */
    .ap-detail-col {
      transform-style: preserve-3d;
    }


    #page-avantapres /* Specs list stagger */
    .ap-specs li {
      opacity: 0;
      transform: translateX(-20px);
    }

    #page-avantapres .ap-specs li.revealed {
      opacity: 1;
      transform: translateX(0);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }


    #page-avantapres /* Studio IA cinematic entry */
    .ai-studio-head, #page-avantapres .ai-col-input, #page-avantapres .ai-col-output { opacity: 0; }


    #page-avantapres /* CTA section pulse ring */
    .ap-cta .btn-gold { position: relative; overflow: visible; }

    #page-avantapres .ap-cta .btn-gold::after {
      content: '';
      position: absolute; inset: -4px;
      border: 1px solid var(--gold);
      border-radius: 6px;
      opacity: 0;
      will-change: transform, opacity;
    }

    #page-avantapres .ap-cta.in-view .btn-gold::after {
      animation: ctaPulse 2s var(--ease) 0.5s;
    }

    @keyframes ctaPulse {
      0%   { transform: scale(1); opacity: .6; }
      100% { transform: scale(1.15); opacity: 0; }
    }

    #page-avantapres /* Responsive */
    @media (max-width: 768px) {
      .ap-details { grid-template-columns: 1fr; gap: 40px; }
      .compare-container { aspect-ratio: 4 / 3; }
      .ai-grid { grid-template-columns: 1fr; gap: 32px; }
      .ai-products { grid-template-columns: 1fr; }
      .ap-proj-grid { grid-template-columns: 1fr; gap: 28px; }
    }

  

/* ====== PAGES ADDITIONNELLES (scoped) ====== */
/* -- flow -- */

    #page-flow .wrap {max-width:1200px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}

    #page-flow .grain {position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

    #page-flow .vig {position:fixed;inset:0;z-index:299;pointer-events:none;box-shadow:inset 0 0 200px 20px rgba(0,0,0,.5)}

    #page-flow /* Nav */
    .nav {position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(24px,5vw,80px);background:rgba(7,7,8,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}

    #page-flow .nav .logo {font-family:var(--serif);font-size:26px;letter-spacing:.12em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

    #page-flow .nav .back {font-size:14px;letter-spacing:.06em;color:var(--txt-dim);transition:color .3s}

    #page-flow .nav .back:hover {color:var(--gold)}

    #page-flow /* Hero */
    .hero {padding:150px clamp(24px,5vw,80px) 50px;max-width:1200px;margin:0 auto}

    #page-flow .crumb {font-size:12px;letter-spacing:.08em;color:var(--txt-dim);margin-bottom:24px}

    #page-flow .crumb a {color:var(--txt-dim)}
#page-flow .crumb a:hover {color:var(--gold)}

    #page-flow .hero-num {font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--gold);margin-bottom:14px}

    #page-flow .hero :is(h1,.ph1) {font-family:var(--serif);font-size:clamp(40px,7vw,84px);font-weight:300;line-height:1.02;margin-bottom:10px}

    #page-flow .hero .tl {font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--gold-pale);margin-bottom:28px}

    #page-flow .hero .lead {max-width:680px;font-size:17px;line-height:1.8;color:var(--txt-dim);margin-bottom:32px}

    #page-flow .hero-meta {display:flex;gap:40px;flex-wrap:wrap;align-items:center}

    #page-flow .hero-price {font-family:var(--serif);font-size:22px;color:var(--txt)}

    #page-flow .hero-price span {display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:4px}

    #page-flow /* Section heads */
    .sec {padding:70px clamp(24px,5vw,80px);max-width:1200px;margin:0 auto}

    #page-flow .sec-tag {font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

    #page-flow .sec h2 {font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:300;line-height:1.15;margin-bottom:14px}

    #page-flow .sec .sec-intro {max-width:640px;color:var(--txt-dim);font-size:15px;line-height:1.7;margin-bottom:44px}

    #page-flow /* Réalisation */
    .real {margin-bottom:72px}

    #page-flow .real:last-child {margin-bottom:0}

    #page-flow .real-head {display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}

    #page-flow .real-title {font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:300}

    #page-flow .real-loc {font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}

    #page-flow .real-surf {font-size:13px;letter-spacing:.06em;color:var(--txt-dim);white-space:nowrap}

    #page-flow .real-desc {max-width:760px;color:var(--txt-dim);font-size:15px;line-height:1.8;margin-top:20px}

    #page-flow /* Comparateur */
    .compare {position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;border:1px solid var(--line);cursor:ew-resize;user-select:none;-webkit-user-select:none}

    #page-flow .compare picture {position:absolute;inset:0}

    #page-flow .compare picture img {width:100%;height:100%;object-fit:cover;pointer-events:none}

    #page-flow .cmp-after {z-index:1}

    #page-flow .cmp-before {z-index:2;clip-path:inset(0 50% 0 0)}

    #page-flow .compare-handle {position:absolute;top:0;bottom:0;left:50%;z-index:10;width:4px;transform:translateX(-50%);background:var(--gold);box-shadow:0 0 20px rgba(201,164,92,.4);pointer-events:none}

    #page-flow .compare-handle::before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--obs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c9a45c' stroke-width='1.5'%3E%3Cpath d='M8 4l-6 8 6 8M16 4l6 8-6 8'/%3E%3C/svg%3E") center/20px no-repeat;border:2px solid var(--gold);box-shadow:var(--sh-gold)}

    #page-flow .compare-label {position:absolute;bottom:18px;z-index:5;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);background:rgba(12,12,15,.75);backdrop-filter:blur(8px);padding:7px 16px;border-radius:4px;border:1px solid var(--line);pointer-events:none}

    #page-flow .compare-label-before {left:18px}
#page-flow .compare-label-after {right:18px}

    #page-flow /* Specs */
    .specs {border-top:1px solid var(--line)}

    #page-flow .specs li {display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;list-style:none}

    #page-flow .specs li span:first-child {color:var(--txt-dim);letter-spacing:.04em}

    #page-flow .specs li span:last-child {color:var(--gold);text-align:right}

    #page-flow .split {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

    #page-flow .split h2 {margin-bottom:24px}

    #page-flow /* FAQ */
    .faq details {border-bottom:1px solid var(--line);padding:6px 0}

    #page-flow .faq summary {cursor:pointer;list-style:none;padding:18px 0;font-size:16px;color:var(--txt);display:flex;justify-content:space-between;gap:20px;align-items:center}

    #page-flow .faq summary::-webkit-details-marker {display:none}

    #page-flow .faq summary::after {content:'+';color:var(--gold);font-size:22px;transition:transform .3s}

    #page-flow .faq details[open] summary::after {transform:rotate(45deg)}

    #page-flow .faq p {padding:0 0 20px;color:var(--txt-dim);font-size:15px;line-height:1.8;max-width:820px}

    #page-flow /* Related */
    .rel-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

    #page-flow .rel-card {position:relative;display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015);transition:border-color .3s,transform .3s,background .3s}

    #page-flow .rel-card:hover {border-color:var(--gold);transform:translateY(-3px);background:rgba(201,164,92,.05)}

    #page-flow .rel-num {font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold)}

    #page-flow .rel-name {font-family:var(--serif);font-size:24px;font-weight:300}

    #page-flow .rel-sub {font-size:13px;color:var(--txt-dim)}

    #page-flow .rel-arrow {position:absolute;top:26px;right:26px;color:var(--gold);transition:transform .3s}

    #page-flow .rel-card:hover .rel-arrow {transform:translateX(4px)}

    #page-flow /* CTA */
    .cta {text-align:center;padding:90px clamp(24px,5vw,80px);border-top:1px solid var(--line);max-width:1200px;margin:0 auto}

    #page-flow .cta h2 {font-family:var(--serif);font-size:clamp(26px,4vw,42px);font-weight:300;margin-bottom:12px}

    #page-flow .cta p {color:var(--txt-dim);margin-bottom:30px;font-size:15px}

    #page-flow .btns {display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

    #page-flow .btn-gold {display:inline-block;font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#000;background:var(--grad-gold);border:none;padding:16px 40px;border-radius:4px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}

    #page-flow .btn-gold:hover {transform:translateY(-2px);box-shadow:var(--sh-gold)}

    #page-flow .btn-ghost {display:inline-block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:16px 40px;border-radius:4px;transition:border-color .3s}

    #page-flow .btn-ghost:hover {border-color:var(--gold)}

    #page-flow /* Footer */
    .foot {text-align:center;padding:40px clamp(24px,5vw,80px);border-top:1px solid var(--line);font-size:13px;color:var(--txt-dim)}

    #page-flow .foot a {color:var(--gold)}

    @media (max-width:768px){

      #page-flow .split {grid-template-columns:1fr;gap:36px}

    #page-flow .gamme-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px}
    #page-flow .gamme-card {display:flex;flex-direction:column;padding:34px 28px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015);transition:border-color .3s,transform .3s}
    #page-flow .gamme-card:hover {border-color:var(--line-h);transform:translateY(-3px)}
    #page-flow .gamme-card .g-tier {font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt-dim)}
    #page-flow .gamme-card h3 {font-family:var(--serif);font-size:26px;font-weight:300;margin:12px 0 4px}
    #page-flow .g-price {font-family:var(--serif);font-size:28px;color:var(--gold);margin:10px 0 16px}
    #page-flow .g-price span {font-family:var(--sans);font-size:13px;color:var(--txt-dim);letter-spacing:.06em}
    #page-flow .gamme-card p {font-size:13.5px;color:var(--txt-dim);line-height:1.7;margin:0}
    #page-flow .g-star {border-color:rgba(201,164,92,.45);background:linear-gradient(180deg,rgba(201,164,92,.06),rgba(255,255,255,.01))}
    #page-flow .g-star:hover {border-color:var(--gold)}
      #page-flow .rel-grid {grid-template-columns:1fr}

      #page-flow .compare {aspect-ratio:4/3}

      #page-flow .hero-meta {gap:24px}

    
}

  
/* -- signature -- */

    #page-signature .wrap {max-width:1200px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}

    #page-signature .grain {position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

    #page-signature .vig {position:fixed;inset:0;z-index:299;pointer-events:none;box-shadow:inset 0 0 200px 20px rgba(0,0,0,.5)}

    #page-signature /* Nav */
    .nav {position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(24px,5vw,80px);background:rgba(7,7,8,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}

    #page-signature .nav .logo {font-family:var(--serif);font-size:26px;letter-spacing:.12em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

    #page-signature .nav .back {font-size:14px;letter-spacing:.06em;color:var(--txt-dim);transition:color .3s}

    #page-signature .nav .back:hover {color:var(--gold)}

    #page-signature /* Hero */
    .hero {padding:150px clamp(24px,5vw,80px) 50px;max-width:1200px;margin:0 auto}

    #page-signature .crumb {font-size:12px;letter-spacing:.08em;color:var(--txt-dim);margin-bottom:24px}

    #page-signature .crumb a {color:var(--txt-dim)}
#page-signature .crumb a:hover {color:var(--gold)}

    #page-signature .hero-num {font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--gold);margin-bottom:14px}

    #page-signature .hero :is(h1,.ph1) {font-family:var(--serif);font-size:clamp(40px,7vw,84px);font-weight:300;line-height:1.02;margin-bottom:10px}

    #page-signature .hero .tl {font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--gold-pale);margin-bottom:28px}

    #page-signature .hero .lead {max-width:680px;font-size:17px;line-height:1.8;color:var(--txt-dim);margin-bottom:32px}

    #page-signature .hero-meta {display:flex;gap:40px;flex-wrap:wrap;align-items:center}

    #page-signature .hero-price {font-family:var(--serif);font-size:22px;color:var(--txt)}

    #page-signature .hero-price span {display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:4px}

    #page-signature /* Section heads */
    .sec {padding:70px clamp(24px,5vw,80px);max-width:1200px;margin:0 auto}

    #page-signature .sec-tag {font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

    #page-signature .sec h2 {font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:300;line-height:1.15;margin-bottom:14px}

    #page-signature .sec .sec-intro {max-width:640px;color:var(--txt-dim);font-size:15px;line-height:1.7;margin-bottom:44px}

    #page-signature /* Réalisation */
    .real {margin-bottom:72px}

    #page-signature .real:last-child {margin-bottom:0}

    #page-signature .real-head {display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}

    #page-signature .real-title {font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:300}

    #page-signature .real-loc {font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}

    #page-signature .real-surf {font-size:13px;letter-spacing:.06em;color:var(--txt-dim);white-space:nowrap}

    #page-signature .real-desc {max-width:760px;color:var(--txt-dim);font-size:15px;line-height:1.8;margin-top:20px}

    #page-signature /* Comparateur */
    .compare {position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;border:1px solid var(--line);cursor:ew-resize;user-select:none;-webkit-user-select:none}

    #page-signature .compare picture {position:absolute;inset:0}

    #page-signature .compare picture img {width:100%;height:100%;object-fit:cover;pointer-events:none}

    #page-signature .cmp-after {z-index:1}

    #page-signature .cmp-before {z-index:2;clip-path:inset(0 50% 0 0)}

    #page-signature .compare-handle {position:absolute;top:0;bottom:0;left:50%;z-index:10;width:4px;transform:translateX(-50%);background:var(--gold);box-shadow:0 0 20px rgba(201,164,92,.4);pointer-events:none}

    #page-signature .compare-handle::before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--obs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c9a45c' stroke-width='1.5'%3E%3Cpath d='M8 4l-6 8 6 8M16 4l6 8-6 8'/%3E%3C/svg%3E") center/20px no-repeat;border:2px solid var(--gold);box-shadow:var(--sh-gold)}

    #page-signature .compare-label {position:absolute;bottom:18px;z-index:5;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);background:rgba(12,12,15,.75);backdrop-filter:blur(8px);padding:7px 16px;border-radius:4px;border:1px solid var(--line);pointer-events:none}

    #page-signature .compare-label-before {left:18px}
#page-signature .compare-label-after {right:18px}

    #page-signature /* Specs */
    .specs {border-top:1px solid var(--line)}

    #page-signature .specs li {display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;list-style:none}

    #page-signature .specs li span:first-child {color:var(--txt-dim);letter-spacing:.04em}

    #page-signature .specs li span:last-child {color:var(--gold);text-align:right}

    #page-signature .split {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

    #page-signature .split h2 {margin-bottom:24px}

    #page-signature /* FAQ */
    .faq details {border-bottom:1px solid var(--line);padding:6px 0}

    #page-signature .faq summary {cursor:pointer;list-style:none;padding:18px 0;font-size:16px;color:var(--txt);display:flex;justify-content:space-between;gap:20px;align-items:center}

    #page-signature .faq summary::-webkit-details-marker {display:none}

    #page-signature .faq summary::after {content:'+';color:var(--gold);font-size:22px;transition:transform .3s}

    #page-signature .faq details[open] summary::after {transform:rotate(45deg)}

    #page-signature .faq p {padding:0 0 20px;color:var(--txt-dim);font-size:15px;line-height:1.8;max-width:820px}

    #page-signature /* Related */
    .rel-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

    #page-signature .rel-card {position:relative;display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015);transition:border-color .3s,transform .3s,background .3s}

    #page-signature .rel-card:hover {border-color:var(--gold);transform:translateY(-3px);background:rgba(201,164,92,.05)}

    #page-signature .rel-num {font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold)}

    #page-signature .rel-name {font-family:var(--serif);font-size:24px;font-weight:300}

    #page-signature .rel-sub {font-size:13px;color:var(--txt-dim)}

    #page-signature .rel-arrow {position:absolute;top:26px;right:26px;color:var(--gold);transition:transform .3s}

    #page-signature .rel-card:hover .rel-arrow {transform:translateX(4px)}

    #page-signature /* CTA */
    .cta {text-align:center;padding:90px clamp(24px,5vw,80px);border-top:1px solid var(--line);max-width:1200px;margin:0 auto}

    #page-signature .cta h2 {font-family:var(--serif);font-size:clamp(26px,4vw,42px);font-weight:300;margin-bottom:12px}

    #page-signature .cta p {color:var(--txt-dim);margin-bottom:30px;font-size:15px}

    #page-signature .btns {display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

    #page-signature .btn-gold {display:inline-block;font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#000;background:var(--grad-gold);border:none;padding:16px 40px;border-radius:4px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}

    #page-signature .btn-gold:hover {transform:translateY(-2px);box-shadow:var(--sh-gold)}

    #page-signature .btn-ghost {display:inline-block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:16px 40px;border-radius:4px;transition:border-color .3s}

    #page-signature .btn-ghost:hover {border-color:var(--gold)}

    #page-signature /* Footer */
    .foot {text-align:center;padding:40px clamp(24px,5vw,80px);border-top:1px solid var(--line);font-size:13px;color:var(--txt-dim)}

    #page-signature .foot a {color:var(--gold)}

    @media (max-width:768px){

      #page-signature .split {grid-template-columns:1fr;gap:36px}

      #page-signature .rel-grid {grid-template-columns:1fr}

      #page-signature .compare {aspect-ratio:4/3}

      #page-signature .hero-meta {gap:24px}

    
}

  
/* -- imperium -- */

    #page-imperium .wrap {max-width:1200px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}

    #page-imperium .grain {position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

    #page-imperium .vig {position:fixed;inset:0;z-index:299;pointer-events:none;box-shadow:inset 0 0 200px 20px rgba(0,0,0,.5)}

    #page-imperium /* Nav */
    .nav {position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(24px,5vw,80px);background:rgba(7,7,8,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}

    #page-imperium .nav .logo {font-family:var(--serif);font-size:26px;letter-spacing:.12em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

    #page-imperium .nav .back {font-size:14px;letter-spacing:.06em;color:var(--txt-dim);transition:color .3s}

    #page-imperium .nav .back:hover {color:var(--gold)}

    #page-imperium /* Hero */
    .hero {padding:150px clamp(24px,5vw,80px) 50px;max-width:1200px;margin:0 auto}

    #page-imperium .crumb {font-size:12px;letter-spacing:.08em;color:var(--txt-dim);margin-bottom:24px}

    #page-imperium .crumb a {color:var(--txt-dim)}
#page-imperium .crumb a:hover {color:var(--gold)}

    #page-imperium .hero-num {font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--gold);margin-bottom:14px}

    #page-imperium .hero :is(h1,.ph1) {font-family:var(--serif);font-size:clamp(40px,7vw,84px);font-weight:300;line-height:1.02;margin-bottom:10px}

    #page-imperium .hero .tl {font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--gold-pale);margin-bottom:28px}

    #page-imperium .hero .lead {max-width:680px;font-size:17px;line-height:1.8;color:var(--txt-dim);margin-bottom:32px}

    #page-imperium .hero-meta {display:flex;gap:40px;flex-wrap:wrap;align-items:center}

    #page-imperium .hero-price {font-family:var(--serif);font-size:22px;color:var(--txt)}

    #page-imperium .hero-price span {display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:4px}

    #page-imperium /* Section heads */
    .sec {padding:70px clamp(24px,5vw,80px);max-width:1200px;margin:0 auto}

    #page-imperium .sec-tag {font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

    #page-imperium .sec h2 {font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:300;line-height:1.15;margin-bottom:14px}

    #page-imperium .sec .sec-intro {max-width:640px;color:var(--txt-dim);font-size:15px;line-height:1.7;margin-bottom:44px}

    #page-imperium /* Réalisation */
    .real {margin-bottom:72px}

    #page-imperium .real:last-child {margin-bottom:0}

    #page-imperium .real-head {display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}

    #page-imperium .real-title {font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:300}

    #page-imperium .real-loc {font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}

    #page-imperium .real-surf {font-size:13px;letter-spacing:.06em;color:var(--txt-dim);white-space:nowrap}

    #page-imperium .real-desc {max-width:760px;color:var(--txt-dim);font-size:15px;line-height:1.8;margin-top:20px}

    #page-imperium /* Comparateur */
    .compare {position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;border:1px solid var(--line);cursor:ew-resize;user-select:none;-webkit-user-select:none}

    #page-imperium .compare picture {position:absolute;inset:0}

    #page-imperium .compare picture img {width:100%;height:100%;object-fit:cover;pointer-events:none}

    #page-imperium .cmp-after {z-index:1}

    #page-imperium .cmp-before {z-index:2;clip-path:inset(0 50% 0 0)}

    #page-imperium .compare-handle {position:absolute;top:0;bottom:0;left:50%;z-index:10;width:4px;transform:translateX(-50%);background:var(--gold);box-shadow:0 0 20px rgba(201,164,92,.4);pointer-events:none}

    #page-imperium .compare-handle::before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--obs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c9a45c' stroke-width='1.5'%3E%3Cpath d='M8 4l-6 8 6 8M16 4l6 8-6 8'/%3E%3C/svg%3E") center/20px no-repeat;border:2px solid var(--gold);box-shadow:var(--sh-gold)}

    #page-imperium .compare-label {position:absolute;bottom:18px;z-index:5;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);background:rgba(12,12,15,.75);backdrop-filter:blur(8px);padding:7px 16px;border-radius:4px;border:1px solid var(--line);pointer-events:none}

    #page-imperium .compare-label-before {left:18px}
#page-imperium .compare-label-after {right:18px}

    #page-imperium /* Specs */
    .specs {border-top:1px solid var(--line)}

    #page-imperium .specs li {display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;list-style:none}

    #page-imperium .specs li span:first-child {color:var(--txt-dim);letter-spacing:.04em}

    #page-imperium .specs li span:last-child {color:var(--gold);text-align:right}

    #page-imperium .split {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

    #page-imperium .split h2 {margin-bottom:24px}

    #page-imperium /* FAQ */
    .faq details {border-bottom:1px solid var(--line);padding:6px 0}

    #page-imperium .faq summary {cursor:pointer;list-style:none;padding:18px 0;font-size:16px;color:var(--txt);display:flex;justify-content:space-between;gap:20px;align-items:center}

    #page-imperium .faq summary::-webkit-details-marker {display:none}

    #page-imperium .faq summary::after {content:'+';color:var(--gold);font-size:22px;transition:transform .3s}

    #page-imperium .faq details[open] summary::after {transform:rotate(45deg)}

    #page-imperium .faq p {padding:0 0 20px;color:var(--txt-dim);font-size:15px;line-height:1.8;max-width:820px}

    #page-imperium /* Related */
    .rel-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

    #page-imperium .rel-card {position:relative;display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015);transition:border-color .3s,transform .3s,background .3s}

    #page-imperium .rel-card:hover {border-color:var(--gold);transform:translateY(-3px);background:rgba(201,164,92,.05)}

    #page-imperium .rel-num {font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold)}

    #page-imperium .rel-name {font-family:var(--serif);font-size:24px;font-weight:300}

    #page-imperium .rel-sub {font-size:13px;color:var(--txt-dim)}

    #page-imperium .rel-arrow {position:absolute;top:26px;right:26px;color:var(--gold);transition:transform .3s}

    #page-imperium .rel-card:hover .rel-arrow {transform:translateX(4px)}

    #page-imperium /* CTA */
    .cta {text-align:center;padding:90px clamp(24px,5vw,80px);border-top:1px solid var(--line);max-width:1200px;margin:0 auto}

    #page-imperium .cta h2 {font-family:var(--serif);font-size:clamp(26px,4vw,42px);font-weight:300;margin-bottom:12px}

    #page-imperium .cta p {color:var(--txt-dim);margin-bottom:30px;font-size:15px}

    #page-imperium .btns {display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

    #page-imperium .btn-gold {display:inline-block;font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#000;background:var(--grad-gold);border:none;padding:16px 40px;border-radius:4px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}

    #page-imperium .btn-gold:hover {transform:translateY(-2px);box-shadow:var(--sh-gold)}

    #page-imperium .btn-ghost {display:inline-block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:16px 40px;border-radius:4px;transition:border-color .3s}

    #page-imperium .btn-ghost:hover {border-color:var(--gold)}

    #page-imperium /* Footer */
    .foot {text-align:center;padding:40px clamp(24px,5vw,80px);border-top:1px solid var(--line);font-size:13px;color:var(--txt-dim)}

    #page-imperium .foot a {color:var(--gold)}

    @media (max-width:768px){

      #page-imperium .split {grid-template-columns:1fr;gap:36px}

      #page-imperium .rel-grid {grid-template-columns:1fr}

      #page-imperium .compare {aspect-ratio:4/3}

      #page-imperium .hero-meta {gap:24px}

    
}

  
/* -- architekt -- */

    #page-architekt .wrap {max-width:1200px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}

    #page-architekt .grain {position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

    #page-architekt .vig {position:fixed;inset:0;z-index:299;pointer-events:none;box-shadow:inset 0 0 200px 20px rgba(0,0,0,.5)}

    #page-architekt /* Nav */
    .nav {position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(24px,5vw,80px);background:rgba(7,7,8,.88);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}

    #page-architekt .nav .logo {font-family:var(--serif);font-size:26px;letter-spacing:.12em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

    #page-architekt .nav .back {font-size:14px;letter-spacing:.06em;color:var(--txt-dim);transition:color .3s}

    #page-architekt .nav .back:hover {color:var(--gold)}

    #page-architekt /* Hero */
    .hero {padding:150px clamp(24px,5vw,80px) 50px;max-width:1200px;margin:0 auto}

    #page-architekt .crumb {font-size:12px;letter-spacing:.08em;color:var(--txt-dim);margin-bottom:24px}

    #page-architekt .crumb a {color:var(--txt-dim)}
#page-architekt .crumb a:hover {color:var(--gold)}

    #page-architekt .hero-num {font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--gold);margin-bottom:14px}

    #page-architekt .hero :is(h1,.ph1) {font-family:var(--serif);font-size:clamp(40px,7vw,84px);font-weight:300;line-height:1.02;margin-bottom:10px}

    #page-architekt .hero .tl {font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--gold-pale);margin-bottom:28px}

    #page-architekt .hero .lead {max-width:680px;font-size:17px;line-height:1.8;color:var(--txt-dim);margin-bottom:32px}

    #page-architekt .hero-meta {display:flex;gap:40px;flex-wrap:wrap;align-items:center}

    #page-architekt .hero-price {font-family:var(--serif);font-size:22px;color:var(--txt)}

    #page-architekt .hero-price span {display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:4px}

    #page-architekt /* Section heads */
    .sec {padding:70px clamp(24px,5vw,80px);max-width:1200px;margin:0 auto}

    #page-architekt .sec-tag {font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}

    #page-architekt .sec h2 {font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:300;line-height:1.15;margin-bottom:14px}

    #page-architekt .sec .sec-intro {max-width:640px;color:var(--txt-dim);font-size:15px;line-height:1.7;margin-bottom:44px}

    #page-architekt /* Réalisation */
    .real {margin-bottom:72px}

    #page-architekt .real:last-child {margin-bottom:0}

    #page-architekt .real-head {display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}

    #page-architekt .real-title {font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:300}

    #page-architekt .real-loc {font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:6px}

    #page-architekt .real-surf {font-size:13px;letter-spacing:.06em;color:var(--txt-dim);white-space:nowrap}

    #page-architekt .real-desc {max-width:760px;color:var(--txt-dim);font-size:15px;line-height:1.8;margin-top:20px}

    #page-architekt /* Comparateur */
    .compare {position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:8px;border:1px solid var(--line);cursor:ew-resize;user-select:none;-webkit-user-select:none}

    #page-architekt .compare picture {position:absolute;inset:0}

    #page-architekt .compare picture img {width:100%;height:100%;object-fit:cover;pointer-events:none}

    #page-architekt .cmp-after {z-index:1}

    #page-architekt .cmp-before {z-index:2;clip-path:inset(0 50% 0 0)}

    #page-architekt .compare-handle {position:absolute;top:0;bottom:0;left:50%;z-index:10;width:4px;transform:translateX(-50%);background:var(--gold);box-shadow:0 0 20px rgba(201,164,92,.4);pointer-events:none}

    #page-architekt .compare-handle::before {content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--obs) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c9a45c' stroke-width='1.5'%3E%3Cpath d='M8 4l-6 8 6 8M16 4l6 8-6 8'/%3E%3C/svg%3E") center/20px no-repeat;border:2px solid var(--gold);box-shadow:var(--sh-gold)}

    #page-architekt .compare-label {position:absolute;bottom:18px;z-index:5;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);background:rgba(12,12,15,.75);backdrop-filter:blur(8px);padding:7px 16px;border-radius:4px;border:1px solid var(--line);pointer-events:none}

    #page-architekt .compare-label-before {left:18px}
#page-architekt .compare-label-after {right:18px}

    #page-architekt /* Specs */
    .specs {border-top:1px solid var(--line)}

    #page-architekt .specs li {display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;list-style:none}

    #page-architekt .specs li span:first-child {color:var(--txt-dim);letter-spacing:.04em}

    #page-architekt .specs li span:last-child {color:var(--gold);text-align:right}

    #page-architekt .split {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

    #page-architekt .split h2 {margin-bottom:24px}

    #page-architekt /* FAQ */
    .faq details {border-bottom:1px solid var(--line);padding:6px 0}

    #page-architekt .faq summary {cursor:pointer;list-style:none;padding:18px 0;font-size:16px;color:var(--txt);display:flex;justify-content:space-between;gap:20px;align-items:center}

    #page-architekt .faq summary::-webkit-details-marker {display:none}

    #page-architekt .faq summary::after {content:'+';color:var(--gold);font-size:22px;transition:transform .3s}

    #page-architekt .faq details[open] summary::after {transform:rotate(45deg)}

    #page-architekt .faq p {padding:0 0 20px;color:var(--txt-dim);font-size:15px;line-height:1.8;max-width:820px}

    #page-architekt /* Related */
    .rel-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

    #page-architekt .rel-card {position:relative;display:flex;flex-direction:column;gap:6px;padding:26px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.015);transition:border-color .3s,transform .3s,background .3s}

    #page-architekt .rel-card:hover {border-color:var(--gold);transform:translateY(-3px);background:rgba(201,164,92,.05)}

    #page-architekt .rel-num {font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold)}

    #page-architekt .rel-name {font-family:var(--serif);font-size:24px;font-weight:300}

    #page-architekt .rel-sub {font-size:13px;color:var(--txt-dim)}

    #page-architekt .rel-arrow {position:absolute;top:26px;right:26px;color:var(--gold);transition:transform .3s}

    #page-architekt .rel-card:hover .rel-arrow {transform:translateX(4px)}

    #page-architekt /* CTA */
    .cta {text-align:center;padding:90px clamp(24px,5vw,80px);border-top:1px solid var(--line);max-width:1200px;margin:0 auto}

    #page-architekt .cta h2 {font-family:var(--serif);font-size:clamp(26px,4vw,42px);font-weight:300;margin-bottom:12px}

    #page-architekt .cta p {color:var(--txt-dim);margin-bottom:30px;font-size:15px}

    #page-architekt .btns {display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

    #page-architekt .btn-gold {display:inline-block;font-size:14px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#000;background:var(--grad-gold);border:none;padding:16px 40px;border-radius:4px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}

    #page-architekt .btn-gold:hover {transform:translateY(-2px);box-shadow:var(--sh-gold)}

    #page-architekt .btn-ghost {display:inline-block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:16px 40px;border-radius:4px;transition:border-color .3s}

    #page-architekt .btn-ghost:hover {border-color:var(--gold)}

    #page-architekt /* Footer */
    .foot {text-align:center;padding:40px clamp(24px,5vw,80px);border-top:1px solid var(--line);font-size:13px;color:var(--txt-dim)}

    #page-architekt .foot a {color:var(--gold)}

    @media (max-width:768px){

      #page-architekt .split {grid-template-columns:1fr;gap:36px}

      #page-architekt .rel-grid {grid-template-columns:1fr}

      #page-architekt .compare {aspect-ratio:4/3}

      #page-architekt .hero-meta {gap:24px}

    
}

  
/* -- bibliotheque -- */

    #page-bibliotheque button { cursor: pointer; font-family: var(--sans); }


    #page-bibliotheque /* ============================================================
       NAV
       ============================================================ */
    .pn {
      position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px var(--h-pad);
      background: rgba(7,7,8,.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    #page-bibliotheque .pn-logo {
      font-family: var(--serif);
      font-size: 22px; letter-spacing: .42em; font-weight: 400;
      padding-left: .42em;
      background: var(--grad-gold);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-bibliotheque .pn-sub {
      font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
      color: var(--gold); opacity: .7;
      margin-left: 16px;
    }

    #page-bibliotheque .pn-back {
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); border: 1px solid var(--line);
      padding: 10px 20px; background: transparent;
      transition: background .3s, color .3s, border-color .3s;
    }

    #page-bibliotheque .pn-back:hover {
      background: var(--gold); color: #000; border-color: var(--gold);
    }


    #page-bibliotheque /* ============================================================
       HERO — COUCHE 01
       ============================================================ */
    .bib-hero {
      padding: 140px var(--h-pad) 80px;
      border-bottom: 1px solid var(--line);
      position: relative;
      overflow: hidden;
    }

    #page-bibliotheque .bib-hero::before {
      content: '';
      position: absolute; top: 0; right: -10%; width: 60%; height: 100%;
      background: radial-gradient(ellipse at 70% 50%, rgba(201,164,92,.06) 0%, transparent 70%);
      pointer-events: none;
    }

    #page-bibliotheque .bib-hero-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 60px;
      align-items: center;
    }

    #page-bibliotheque .bib-hero-left .couche-tag {
      font-size: 9px; letter-spacing: .4em; text-transform: uppercase;
      color: var(--gold); opacity: .6;
      margin-bottom: 10px;
    }

    #page-bibliotheque .bib-hero-left :is(h1,.ph1) {
      font-family: var(--serif);
      font-size: clamp(38px, 5.5vw, 64px);
      font-weight: 300; line-height: 1.05;
      margin-bottom: 28px;
    }

    #page-bibliotheque .bib-hero-left :is(h1,.ph1) span {
      display: block;
      background: linear-gradient(180deg, #fffdf6 0%, #ffe9b8 38%, #e0b86a 72%, #b8923f 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-bibliotheque .bib-hero-left .bib-sub {
      font-size: 18px; line-height: 1.7;
      color: var(--txt-dim); margin-bottom: 16px;
      max-width: 440px;
    }

    #page-bibliotheque .bib-hero-left .bib-detail {
      font-size: 14px; line-height: 1.8;
      color: var(--txt-dim); opacity: .8;
      max-width: 440px; margin-bottom: 32px;
    }

    #page-bibliotheque .compat-badge {
      display: inline-flex; align-items: center; gap: 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 16px 24px;
      background: rgba(25,25,32,.6);
    }

    #page-bibliotheque .compat-badge .cb-icon {
      width: 40px; height: 40px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--gold);
    }

    #page-bibliotheque .compat-badge .cb-txt strong {
      display: block;
      font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold); font-weight: 500;
    }

    #page-bibliotheque .compat-badge .cb-txt span {
      font-size: 12px; color: var(--txt-dim);
      line-height: 1.5;
    }


    #page-bibliotheque /* ============================================================
       UNIVERS TABS — navigation par univers
       ============================================================ */
    .univ-header {
      text-align: center;
      padding: 10px var(--h-pad) 0;
      max-width: var(--max-w);
      margin: 0 auto;
    }

    #page-bibliotheque .univ-header .sec-tag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 10px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
    }

    #page-bibliotheque .univ-header .sec-tag::before, #page-bibliotheque .univ-header .sec-tag::after {
      content: ''; width: 28px; height: 1px; background: var(--gold);
    }

    #page-bibliotheque .univ-header h2 {
      font-family: var(--serif);
      font-size: clamp(22px, 3vw, 38px);
      font-weight: 300; line-height: 1.2;
      color: var(--gold-l);
      margin-bottom: 8px;
    }


    #page-bibliotheque .univ-tabs {
      display: flex;
      justify-content: center;
      gap: 0;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 32px var(--h-pad) 0;
      border-bottom: 1px solid var(--line);
      flex-wrap: wrap;
    }

    #page-bibliotheque .univ-tab {
      flex: 1; min-width: 140px; max-width: 220px;
      padding: 28px 16px 22px;
      text-align: center;
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      transition: border-color .4s, background .4s;
      position: relative;
    }

    #page-bibliotheque .univ-tab:hover {
      background: rgba(201,164,92,.04);
    }

    #page-bibliotheque .univ-tab.active {
      border-bottom-color: var(--gold);
      background: rgba(201,164,92,.06);
    }

    #page-bibliotheque .ut-icon {
      width: 44px; height: 44px;
      margin: 0 auto 12px;
      border: 1.5px solid var(--line);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; color: var(--gold);
      transition: border-color .4s, box-shadow .4s;
    }

    #page-bibliotheque .univ-tab.active .ut-icon {
      border-color: var(--gold);
      box-shadow: 0 0 20px rgba(201,164,92,.2);
    }

    #page-bibliotheque .ut-name {
      font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--txt); font-weight: 400;
      margin-bottom: 3px;
    }

    #page-bibliotheque .ut-desc {
      font-size: 10px; color: var(--txt-dim);
      letter-spacing: .06em;
    }


    #page-bibliotheque /* ============================================================
       PRODUITS GRID
       ============================================================ */
    .univ-content {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 48px var(--h-pad) var(--s-pad);
    }

    #page-bibliotheque .univ-panel {
      display: none;
      animation: panelIn .5s var(--ease);
    }

    #page-bibliotheque .univ-panel.active { display: block; }

    @keyframes panelIn {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }

    #page-bibliotheque .prod-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    #page-bibliotheque .prod-card {
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
      position: relative;
    }

    #page-bibliotheque .prod-card:hover {
      border-color: var(--gold);
      box-shadow: 0 0 28px rgba(201,164,92,.1), 0 14px 44px rgba(0,0,0,.4);
      transform: translateY(-4px);
    }

    #page-bibliotheque .prod-swatch {
      height: 140px;
      position: relative;
      overflow: hidden;
    }

    #page-bibliotheque .prod-swatch::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(12,12,15,.9) 100%);
    }

    #page-bibliotheque .prod-swatch-icon {
      position: absolute; top: 12px; right: 12px;
      width: 28px; height: 28px;
      border: 1px solid rgba(201,164,92,.3);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; color: var(--gold);
      background: rgba(12,12,15,.6);
      z-index: 2;
      backdrop-filter: blur(6px);
    }

    #page-bibliotheque .prod-body {
      padding: 18px;
    }

    #page-bibliotheque .prod-body h3 {
      font-family: var(--serif);
      font-size: 16px; font-weight: 400;
      margin-bottom: 2px;
    }

    #page-bibliotheque .prod-type {
      font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 10px;
    }

    #page-bibliotheque .prod-body p {
      font-size: 12.5px; line-height: 1.65; color: var(--txt-dim);
      margin-bottom: 12px;
    }

    #page-bibliotheque .prod-specs {
      display: flex; flex-wrap: wrap; gap: 6px;
    }

    #page-bibliotheque .prod-spec {
      font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(201,164,92,.2);
      padding: 3px 8px;
      border-radius: 3px;
    }


    #page-bibliotheque /* Product detail panel (expandable) */
    .prod-detail {
      display: none;
      padding: 0 18px 18px;
      border-top: 1px solid var(--line);
      margin-top: -1px;
    }

    #page-bibliotheque .prod-card.expanded .prod-detail {
      display: block;
      animation: panelIn .4s var(--ease);
    }

    #page-bibliotheque .pd-row {
      display: flex; justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid rgba(201,164,92,.08);
      font-size: 12px;
    }

    #page-bibliotheque .pd-row:last-child { border-bottom: none; }

    #page-bibliotheque .pd-label {
      color: var(--txt-dim);
      display: flex; align-items: center; gap: 8px;
    }

    #page-bibliotheque .pd-label .pd-ico {
      width: 18px; height: 18px;
      border: 1px solid var(--line);
      border-radius: 4px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 8px; color: var(--gold);
    }

    #page-bibliotheque .pd-val {
      color: var(--gold-l); font-weight: 400;
      text-align: right;
    }


    #page-bibliotheque /* ============================================================
       SPECS BAR — Chaque produit est défini par
       ============================================================ */
    .specs-bar {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(25,25,32,.5);
    }

    #page-bibliotheque .specs-bar-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 48px var(--h-pad);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    #page-bibliotheque .sb-block {
      text-align: center;
    }

    #page-bibliotheque .sb-block h3 {
      font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 24px;
      position: relative; display: inline-block;
    }

    #page-bibliotheque .sb-block h3::after {
      content: '';
      position: absolute; bottom: -8px; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }


    #page-bibliotheque .sb-icons {
      display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
    }

    #page-bibliotheque .sb-icon {
      text-align: center; width: 80px;
    }

    #page-bibliotheque .sb-icon-circle {
      width: 44px; height: 44px;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      margin: 0 auto 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--gold);
      transition: border-color .4s, box-shadow .4s, transform .4s var(--ease);
    }

    #page-bibliotheque .sb-icon:hover .sb-icon-circle {
      border-color: var(--gold);
      box-shadow: 0 0 16px rgba(201,164,92,.2);
      transform: translateY(-2px);
    }

    #page-bibliotheque .sb-icon-label {
      font-size: 10px; color: var(--txt-dim);
      line-height: 1.4;
    }


    #page-bibliotheque .sb-text {
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      padding-top: 8px;
    }

    #page-bibliotheque .sb-text p {
      font-size: 13px; line-height: 1.7; color: var(--txt-dim);
      max-width: 280px; text-align: center;
    }


    #page-bibliotheque .sb-values {
      display: flex; gap: 28px; justify-content: center;
    }

    #page-bibliotheque .sb-val {
      text-align: center;
    }

    #page-bibliotheque .sb-val-icon {
      width: 40px; height: 40px;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      margin: 0 auto 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; color: var(--gold);
    }

    #page-bibliotheque .sb-val-title {
      font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--gold); font-weight: 500;
      margin-bottom: 3px;
    }

    #page-bibliotheque .sb-val-desc {
      font-size: 10px; color: var(--txt-dim); line-height: 1.4;
      max-width: 140px; margin: 0 auto;
    }


    #page-bibliotheque /* ============================================================
       COMPATIBILITY ENGINE — interactive
       ============================================================ */
    .compat-section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: var(--s-pad) var(--h-pad);
    }

    #page-bibliotheque .compat-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    #page-bibliotheque .compat-left .sec-tag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 16px;
      display: flex; align-items: center; gap: 12px;
    }

    #page-bibliotheque .compat-left .sec-tag::before {
      content: ''; width: 28px; height: 1px; background: var(--gold);
    }

    #page-bibliotheque .compat-left h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 3.2vw, 42px);
      font-weight: 300; line-height: 1.15;
      margin-bottom: 24px;
    }

    #page-bibliotheque .compat-left h2 em {
      font-style: normal;
      color: var(--gold-l);
    }

    #page-bibliotheque .compat-left > p {
      font-size: 15px; line-height: 1.8;
      color: var(--txt-dim);
      margin-bottom: 32px;
      max-width: 480px;
    }

    #page-bibliotheque .compat-features {
      display: flex; flex-direction: column; gap: 20px;
    }

    #page-bibliotheque .cf-item {
      display: flex; gap: 16px; align-items: flex-start;
    }

    #page-bibliotheque .cf-icon {
      width: 36px; height: 36px; flex-shrink: 0;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: var(--gold);
    }

    #page-bibliotheque .cf-text h4 {
      font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--gold); font-weight: 500;
      margin-bottom: 3px;
    }

    #page-bibliotheque .cf-text p {
      font-size: 13px; line-height: 1.6; color: var(--txt-dim);
    }


    #page-bibliotheque /* Compat simulator */
    .compat-sim {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(25,25,32,.5);
    }

    #page-bibliotheque .cs-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; gap: 12px;
    }

    #page-bibliotheque .cs-header .cs-logo {
      font-family: var(--serif);
      font-size: 14px; letter-spacing: .2em;
      color: var(--gold);
    }

    #page-bibliotheque .cs-header span {
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim);
    }

    #page-bibliotheque .cs-body {
      padding: 28px 24px;
    }

    #page-bibliotheque .cs-score-wrap {
      text-align: center;
      margin-bottom: 28px;
    }

    #page-bibliotheque .cs-ring {
      position: relative;
      width: 140px; height: 140px;
      margin: 0 auto 16px;
    }

    #page-bibliotheque .cs-ring svg {
      width: 100%; height: 100%;
      transform: rotate(-90deg);
    }

    #page-bibliotheque .cs-ring-bg {
      fill: none; stroke: rgba(201,164,92,.12); stroke-width: 4;
    }

    #page-bibliotheque .cs-ring-fill {
      fill: none; stroke: url(#ringGrad); stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 408;
      stroke-dashoffset: 408;
      transition: stroke-dashoffset 2s var(--ease);
    }

    #page-bibliotheque .cs-ring-val {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--serif);
      font-size: 36px; font-weight: 300;
      color: var(--gold-l);
    }

    #page-bibliotheque .cs-ring-val small {
      font-size: 16px; color: var(--gold);
    }

    #page-bibliotheque .cs-ring-label {
      font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
      color: var(--txt-dim);
    }


    #page-bibliotheque .cs-bars {
      display: flex; flex-direction: column; gap: 14px;
      margin-bottom: 24px;
    }

    #page-bibliotheque .cs-bar {
      display: flex; align-items: center; gap: 12px;
    }

    #page-bibliotheque .cs-bar-label {
      font-size: 11px; color: var(--txt-dim);
      width: 140px; flex-shrink: 0;
      text-align: right;
    }

    #page-bibliotheque .cs-bar-track {
      flex: 1; height: 4px;
      background: rgba(201,164,92,.1);
      border-radius: 2px;
      overflow: hidden;
    }

    #page-bibliotheque .cs-bar-fill {
      height: 100%;
      background: var(--grad-gold);
      border-radius: 2px;
      width: 0;
      transition: width 2s var(--ease);
    }

    #page-bibliotheque .cs-bar-pct {
      font-size: 11px; color: var(--gold);
      width: 36px; text-align: right;
    }


    #page-bibliotheque .cs-result {
      border-top: 1px solid var(--line);
      padding-top: 20px;
    }

    #page-bibliotheque .cs-result-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 0;
      font-size: 12px;
    }

    #page-bibliotheque .cs-result-row span:first-child { color: var(--txt-dim); }

    #page-bibliotheque .cs-result-row span:last-child { color: var(--gold-l); }


    #page-bibliotheque .cs-cta {
      margin-top: 20px;
      width: 100%;
      padding: 14px;
      font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold);
      background: transparent;
      border: 1px solid var(--line);
      transition: background .3s, color .3s, border-color .3s;
    }

    #page-bibliotheque .cs-cta:hover {
      background: var(--gold); color: #000; border-color: var(--gold);
    }


    #page-bibliotheque /* ============================================================
       PARCOURS — 6 étapes (from partner deck)
       ============================================================ */
    .parcours {
      border-top: 1px solid var(--line);
      max-width: var(--max-w);
      margin: 0 auto;
      padding: var(--s-pad) var(--h-pad);
    }

    #page-bibliotheque .parcours-head {
      text-align: center; margin-bottom: 56px;
    }

    #page-bibliotheque .parcours-head .sec-tag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 12px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
    }

    #page-bibliotheque .parcours-head .sec-tag::before, #page-bibliotheque .parcours-head .sec-tag::after {
      content: ''; width: 28px; height: 1px; background: var(--gold);
    }

    #page-bibliotheque .parcours-head h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 300; line-height: 1.2;
      color: var(--gold-l);
      margin-bottom: 12px;
    }

    #page-bibliotheque .parcours-head p {
      font-size: 15px; line-height: 1.8; color: var(--txt-dim);
      max-width: 620px; margin: 0 auto;
    }


    #page-bibliotheque .parc-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    #page-bibliotheque .parc-step {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 32px 24px;
      text-align: center;
      transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
      position: relative;
    }

    #page-bibliotheque .parc-step:hover {
      border-color: var(--gold);
      box-shadow: 0 0 24px rgba(201,164,92,.1);
      transform: translateY(-3px);
    }

    #page-bibliotheque .parc-num {
      font-size: 10px; letter-spacing: .22em;
      color: var(--gold); opacity: .6;
      margin-bottom: 14px;
    }

    #page-bibliotheque .parc-icon {
      width: 48px; height: 48px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      margin: 0 auto 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; color: var(--gold);
      transition: box-shadow .4s;
    }

    #page-bibliotheque .parc-step:hover .parc-icon {
      box-shadow: 0 0 20px rgba(201,164,92,.25);
    }

    #page-bibliotheque .parc-step h3 {
      font-family: var(--serif);
      font-size: 18px; font-weight: 400;
      margin-bottom: 8px;
    }

    #page-bibliotheque .parc-step p {
      font-size: 12.5px; line-height: 1.65; color: var(--txt-dim);
    }


    #page-bibliotheque /* ============================================================
       FOOTER VALUES
       ============================================================ */
    .foot-values {
      border-top: 1px solid var(--line);
      background: rgba(25,25,32,.4);
      padding: 48px var(--h-pad);
    }

    #page-bibliotheque .fv-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }

    #page-bibliotheque .fv-item {
      text-align: center;
    }

    #page-bibliotheque .fv-icon {
      width: 40px; height: 40px;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      margin: 0 auto 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--gold);
    }

    #page-bibliotheque .fv-item h4 {
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); font-weight: 500;
      margin-bottom: 4px;
    }

    #page-bibliotheque .fv-item p {
      font-size: 11px; line-height: 1.5; color: var(--txt-dim);
    }


    #page-bibliotheque /* ============================================================
       CTA
       ============================================================ */
    .cta-band {
      text-align: center;
      padding: var(--s-pad) var(--h-pad);
      border-top: 1px solid var(--line);
    }

    #page-bibliotheque .cta-band h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 3.2vw, 42px);
      font-weight: 300; line-height: 1.2;
      margin-bottom: 20px;
    }

    #page-bibliotheque .cta-band p {
      font-size: 15px; line-height: 1.8; color: var(--txt-dim);
      max-width: 600px; margin: 0 auto 36px;
    }

    #page-bibliotheque .cta-band .btn {
      display: inline-block;
      border: 1px solid var(--gold);
      padding: 16px 40px;
      font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
      color: var(--gold); background: transparent;
      transition: background .4s, color .4s, box-shadow .4s;
    }

    #page-bibliotheque .cta-band .btn:hover {
      background: var(--gold); color: #000;
      box-shadow: 0 0 44px rgba(201,164,92,.4);
    }


    #page-bibliotheque /* ============================================================
       FOOTER
       ============================================================ */
    .ft {
      border-top: 1px solid var(--line);
      padding: 40px var(--h-pad);
      text-align: center;
      font-size: 12px; color: var(--txt-dim);
      letter-spacing: .06em;
    }

    #page-bibliotheque .ft a { color: var(--gold); transition: color .3s; }

    #page-bibliotheque .ft a:hover { color: var(--gold-l); }

    #page-bibliotheque .ft-nav { margin-bottom: 12px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }

    #page-bibliotheque .ft-legal { margin-bottom: 8px; display: flex; justify-content: center; gap: 20px; }

    #page-bibliotheque .ft-motto {
      font-size: 9px; letter-spacing: .32em; text-transform: uppercase;
      color: var(--gold); opacity: .5;
      margin-top: 12px;
    }


    #page-bibliotheque /* Swatch backgrounds */
    .sw-resine-metal { background: linear-gradient(135deg, #3d3530, #6b5f50, #4d4238, #7a6e5e, #3d3530); }

    #page-bibliotheque .sw-resine-marbre { background: linear-gradient(135deg, #d4cfc5, #f0ece2 30%, #c4bfb2 50%, #e8e3d8 70%, #b8b3a6); }

    #page-bibliotheque .sw-resine-unie { background: linear-gradient(135deg, #eae4da, #f8f2e8, #e0dace); }

    #page-bibliotheque .sw-moquette { background: linear-gradient(135deg, #c9b99a, #d4c4a5, #b8a88a, #c9b99a); }

    #page-bibliotheque .sw-stucco { background: linear-gradient(135deg, #e0d8c8, #f0e8d8, #d0c8b8); }

    #page-bibliotheque .sw-mineraux { background: linear-gradient(135deg, #d8ceb8, #e8dece, #c8bea8); }

    #page-bibliotheque .sw-marbre-exc { background: linear-gradient(135deg, #c4bfb2, #e8e3d8 40%, #b8b3a6 60%, #d4cfc5); }

    #page-bibliotheque .sw-beton { background: linear-gradient(135deg, #3e3c38, #4e4c48, #2e2c28); }

    #page-bibliotheque .sw-caissons { background: linear-gradient(135deg, #1a1a22 0%, #2a2520 30%, #c9a45c22 50%, #1a1a22 70%); }

    #page-bibliotheque .sw-led { background: linear-gradient(135deg, #0e0e12, #1a1820, #c9a45c15, #0e0e12); }

    #page-bibliotheque .sw-plaf-susp { background: linear-gradient(135deg, #1e1e24, #2a2a32, #1e1e24); }

    #page-bibliotheque .sw-plaf-tendu { background: linear-gradient(135deg, #2a2a30, #3a3a40, #2a2a30); }

    #page-bibliotheque .sw-meuble-tv { background: linear-gradient(135deg, #1a1a1e, #2e2a24, #1a1a1e); }

    #page-bibliotheque .sw-claustra { background: linear-gradient(135deg, #3d3530, #2a2520, #3d3530); }

    #page-bibliotheque .sw-habillage { background: linear-gradient(135deg, #2a2a30, #4a4a52, #2a2a30); }

    #page-bibliotheque .sw-niches { background: linear-gradient(135deg, #1e1e24, #3a3a42, #1e1e24); }

    #page-bibliotheque .sw-jonctions { background: linear-gradient(90deg, #1a1a1e 48%, var(--gold) 49%, var(--gold) 51%, #2a2a30 52%); }

    #page-bibliotheque .sw-profiles { background: linear-gradient(135deg, #c9a45c, #a07e3c, #c9a45c); }

    #page-bibliotheque .sw-finitions-met { background: linear-gradient(135deg, #c9a45c 0%, #3a3a3e 33%, #8a8a8e 66%, #1a1a1e 100%); }

    #page-bibliotheque .sw-eclairages { background: radial-gradient(circle at 50% 50%, rgba(201,164,92,.3), transparent 60%), linear-gradient(135deg, #0e0e12, #1a1a1e); }


    #page-bibliotheque /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1100px) {
      .bib-hero-inner { grid-template-columns: 1fr; }
      .prod-grid { grid-template-columns: repeat(3, 1fr); }
      .compat-inner { grid-template-columns: 1fr; }
      .compat-sim { max-width: 480px; margin: 0 auto; }
    }

    @media (max-width: 900px) {

      #page-bibliotheque .prod-grid { grid-template-columns: repeat(2, 1fr); }

      #page-bibliotheque .specs-bar-inner { grid-template-columns: 1fr; gap: 48px; }

      #page-bibliotheque .parc-grid { grid-template-columns: repeat(2, 1fr); }

      #page-bibliotheque .fv-inner { grid-template-columns: repeat(2, 1fr); }

    
}

    @media (max-width: 640px) {

      #page-bibliotheque .univ-tab { min-width: 0; padding: 18px 10px 14px; }

      #page-bibliotheque .ut-icon { width: 36px; height: 36px; font-size: 16px; }

      #page-bibliotheque .ut-name { font-size: 10px; }

      #page-bibliotheque .ut-desc { display: none; }

      #page-bibliotheque .prod-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }

      #page-bibliotheque .parc-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }

      #page-bibliotheque .fv-inner { grid-template-columns: 1fr; }

    
}

  
/* -- partenaires -- */

    #page-partenaires button { cursor: pointer; font-family: var(--sans); }


    #page-partenaires /* ---- Page nav ---- */
    .pn {
      position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px var(--h-pad);
      background: rgba(7,7,8,.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    #page-partenaires .pn-logo {
      font-family: var(--serif);
      font-size: 22px; letter-spacing: .42em; font-weight: 400;
      padding-left: .42em;
      background: var(--grad-gold);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-partenaires .pn-back {
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); border: 1px solid var(--line);
      padding: 10px 20px; background: transparent;
      transition: background .3s, color .3s, border-color .3s;
    }

    #page-partenaires .pn-back:hover {
      background: var(--gold); color: #000; border-color: var(--gold);
    }


    #page-partenaires /* ---- Hero compact ---- */
    .pg-hero {
      padding: 160px var(--h-pad) 80px;
      text-align: center;
      border-bottom: 1px solid var(--line);
    }

    #page-partenaires .pg-hero .stag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 20px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
    }

    #page-partenaires .pg-hero .stag::before, #page-partenaires .pg-hero .stag::after {
      content: ''; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0;
    }

    #page-partenaires .pg-hero :is(h1,.ph1) {
      font-family: var(--serif);
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 300; line-height: 1.15;
      margin-bottom: 20px;
      background: linear-gradient(180deg, #fffdf6 0%, #ffe9b8 38%, #e0b86a 72%, #b8923f 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-partenaires .pg-hero p {
      font-size: 16px; line-height: 1.8; color: var(--txt-dim);
      max-width: 680px; margin: 0 auto;
    }


    #page-partenaires /* ---- Section wrapper ---- */
    .sec {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: var(--s-pad) var(--h-pad);
    }

    #page-partenaires .sec-tag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 24px;
      display: flex; align-items: center; gap: 12px;
    }

    #page-partenaires .sec-tag::before {
      content: ''; width: 28px; height: 1px; background: var(--gold); flex-shrink: 0;
    }

    #page-partenaires .sec h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 3.2vw, 42px);
      font-weight: 300; line-height: 1.2;
      color: var(--gold-l);
      margin-bottom: 24px;
    }

    #page-partenaires .sec > p {
      font-size: 15.5px; line-height: 1.85;
      color: var(--txt-dim);
      max-width: 720px;
      margin-bottom: 48px;
    }


    #page-partenaires /* ---- Partner categories grid ---- */
    .part-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 48px;
    }

    #page-partenaires .part-card {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 40px 32px;
      transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
    }

    #page-partenaires .part-card:hover {
      border-color: var(--gold);
      box-shadow: 0 0 28px rgba(201,164,92,.12), 0 16px 50px rgba(0,0,0,.35);
      transform: translateY(-4px);
    }

    #page-partenaires .part-icon {
      font-size: 28px; color: var(--gold); margin-bottom: 18px;
    }

    #page-partenaires .part-card h3 {
      font-family: var(--serif);
      font-size: 22px; font-weight: 400;
      margin-bottom: 12px;
    }

    #page-partenaires .part-card p {
      font-size: 14px; line-height: 1.75; color: var(--txt-dim);
    }

    #page-partenaires .part-card ul {
      list-style: none; margin-top: 16px;
    }

    #page-partenaires .part-card li {
      font-size: 13px; line-height: 2; color: var(--txt-dim);
      padding-left: 18px; position: relative;
    }

    #page-partenaires .part-card li::before {
      content: '◆'; position: absolute; left: 0; color: var(--gold); font-size: 8px; top: 2px;
    }


    #page-partenaires /* ---- Why partner ---- */
    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      margin-top: 48px;
    }

    #page-partenaires .why-item {
      border-top: 1px solid var(--line);
      padding-top: 28px;
    }

    #page-partenaires .why-num {
      font-size: 11px; letter-spacing: .22em;
      color: var(--gold); margin-bottom: 12px;
    }

    #page-partenaires .why-item h3 {
      font-family: var(--serif);
      font-size: 22px; font-weight: 300;
      color: var(--txt); margin-bottom: 10px;
    }

    #page-partenaires .why-item p {
      font-size: 14.5px; line-height: 1.8; color: var(--txt-dim);
    }


    #page-partenaires /* ---- CTA band ---- */
    .cta-band {
      text-align: center;
      padding: var(--s-pad) var(--h-pad);
      border-top: 1px solid var(--line);
    }

    #page-partenaires .cta-band h2 {
      font-family: var(--serif);
      font-size: clamp(24px, 3.2vw, 42px);
      font-weight: 300; line-height: 1.2;
      margin-bottom: 20px;
    }

    #page-partenaires .cta-band p {
      font-size: 15px; line-height: 1.8; color: var(--txt-dim);
      max-width: 600px; margin: 0 auto 36px;
    }

    #page-partenaires .cta-band .btn {
      display: inline-block;
      border: 1px solid var(--gold);
      padding: 16px 40px;
      font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
      color: var(--gold);
      background: transparent;
      transition: background .4s, color .4s, box-shadow .4s;
    }

    #page-partenaires .cta-band .btn:hover {
      background: var(--gold); color: #000;
      box-shadow: 0 0 44px rgba(201,164,92,.4);
    }


    #page-partenaires /* ---- Footer ---- */
    .ft {
      border-top: 1px solid var(--line);
      padding: 40px var(--h-pad);
      text-align: center;
      font-size: 12px; color: var(--txt-dim);
      letter-spacing: .06em;
    }

    #page-partenaires .ft a { color: var(--gold); transition: color .3s; }

    #page-partenaires .ft a:hover { color: var(--gold-l); }

    #page-partenaires .ft-nav { margin-bottom: 12px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }

    #page-partenaires .ft-legal { margin-bottom: 8px; display: flex; justify-content: center; gap: 20px; }


    @media (max-width: 1024px) {

      #page-partenaires .part-grid { grid-template-columns: 1fr; max-width: 520px; margin: 48px auto 0; }

      #page-partenaires .why-grid { grid-template-columns: 1fr; gap: 40px; }

    
}

  
/* -- connect -- */

    #page-connect button { cursor: pointer; font-family: var(--sans); }


    #page-connect /* ============================================================
       NAV
       ============================================================ */
    .pn {
      position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px var(--h-pad);
      background: rgba(7,7,8,.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    #page-connect .pn-logo {
      font-family: var(--serif);
      font-size: 22px; letter-spacing: .42em; font-weight: 400;
      padding-left: .42em;
      background: var(--grad-gold);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-connect .pn-sub {
      font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
      color: var(--gold); opacity: .7;
      margin-left: 16px;
    }

    #page-connect .pn-back {
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); border: 1px solid var(--line);
      padding: 10px 20px; background: transparent;
      transition: background .3s, color .3s, border-color .3s;
    }

    #page-connect .pn-back:hover {
      background: var(--gold); color: #000; border-color: var(--gold);
    }


    #page-connect /* ============================================================
       HERO — EPOXYA CONNECT
       ============================================================ */
    .cx-hero {
      padding: 160px var(--h-pad) 100px;
      position: relative;
      overflow: hidden;
      text-align: center;
      border-bottom: 1px solid var(--line);
    }

    #page-connect .cx-hero::before {
      content: '';
      position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(201,164,92,.08) 0%, transparent 70%);
      pointer-events: none;
    }

    #page-connect .cx-hero::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    #page-connect .cx-hero-tag {
      font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 24px;
      display: flex; align-items: center; justify-content: center; gap: 14px;
    }

    #page-connect .cx-hero-tag::before, #page-connect .cx-hero-tag::after {
      content: ''; width: 40px; height: 1px; background: var(--gold); opacity: .4;
    }

    #page-connect .cx-hero :is(h1,.ph1) {
      font-family: var(--serif);
      font-size: clamp(42px, 6vw, 80px);
      font-weight: 300;
      line-height: 1.05;
      margin-bottom: 20px;
    }

    #page-connect .cx-hero :is(h1,.ph1) .cx-brand {
      display: block;
      background: linear-gradient(180deg, #fffdf6 0%, #ffe9b8 35%, #e0b86a 70%, #b8923f 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-connect .cx-hero :is(h1,.ph1) .cx-tm {
      font-size: .4em; vertical-align: super; color: var(--gold);
      -webkit-text-fill-color: var(--gold);
    }

    #page-connect .cx-hero-sub {
      font-family: var(--serif);
      font-size: clamp(18px, 2.5vw, 28px);
      font-weight: 300;
      color: var(--txt-dim);
      font-style: italic;
      margin-bottom: 40px;
      letter-spacing: .02em;
    }

    #page-connect .cx-hero-desc {
      font-size: 16px; line-height: 1.8;
      color: var(--txt-dim);
      max-width: 640px; margin: 0 auto 48px;
    }


    #page-connect /* Universe selector pills */
    .cx-universe-selector {
      display: flex; justify-content: center; gap: 20px;
      flex-wrap: wrap;
    }

    #page-connect .cx-pill {
      display: flex; align-items: center; gap: 14px;
      padding: 18px 36px;
      border: 1px solid var(--line);
      border-radius: 60px;
      background: rgba(25,25,32,.5);
      font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim);
      transition: all .5s var(--ease);
      position: relative;
      overflow: hidden;
    }

    #page-connect .cx-pill::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(201,164,92,.08), transparent);
      opacity: 0;
      transition: opacity .5s;
    }

    #page-connect .cx-pill:hover, #page-connect .cx-pill.active {
      border-color: var(--gold);
      color: var(--gold-l);
      box-shadow: 0 0 40px rgba(201,164,92,.12);
    }

    #page-connect .cx-pill:hover::before, #page-connect .cx-pill.active::before { opacity: 1; }

    #page-connect .cx-pill-icon {
      width: 42px; height: 42px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: var(--gold);
      transition: box-shadow .5s;
      position: relative; z-index: 1;
    }

    #page-connect .cx-pill.active .cx-pill-icon {
      box-shadow: 0 0 24px rgba(201,164,92,.3);
    }

    #page-connect .cx-pill-text {
      position: relative; z-index: 1;
    }

    #page-connect .cx-pill-text strong {
      display: block;
      font-weight: 500;
      letter-spacing: .12em;
    }

    #page-connect .cx-pill-text span {
      font-size: 10px; letter-spacing: .08em;
      color: var(--txt-dim); text-transform: none;
    }


    #page-connect /* ============================================================
       SECTION UTILITY CLASSES
       ============================================================ */
    .cx-section {
      max-width: var(--max-w);
      margin: 0 auto;
      padding: var(--s-pad) var(--h-pad);
    }

    #page-connect .cx-section-head {
      text-align: center;
      margin-bottom: 60px;
    }

    #page-connect .cx-section-head .sec-tag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 14px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
    }

    #page-connect .cx-section-head .sec-tag::before, #page-connect .cx-section-head .sec-tag::after {
      content: ''; width: 28px; height: 1px; background: var(--gold);
    }

    #page-connect .cx-section-head h2 {
      font-family: var(--serif);
      font-size: clamp(26px, 3.5vw, 44px);
      font-weight: 300; line-height: 1.15;
      margin-bottom: 16px;
    }

    #page-connect .cx-section-head h2 em {
      font-style: normal; color: var(--gold-l);
    }

    #page-connect .cx-section-head p {
      font-size: 16px; line-height: 1.8;
      color: var(--txt-dim);
      max-width: 640px; margin: 0 auto;
    }


    #page-connect /* Universe containers */
    .cx-universe { display: none; }

    #page-connect .cx-universe.active { display: block; }


    #page-connect /* ============================================================
       UNIVERSE TRANSITION
       ============================================================ */
    @keyframes cxFadeInConnect {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: none; }
    }

    #page-connect .cx-universe.active {
      animation: cxFadeInConnect .6s var(--ease);
    }


    #page-connect /* ============================================================
       ESPACE PRIVÉ — Feature cards
       ============================================================ */
    .ep-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }

    #page-connect .ep-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 36px 32px;
      background: rgba(25,25,32,.4);
      transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
      position: relative;
      overflow: hidden;
    }

    #page-connect .ep-card::before {
      content: '';
      position: absolute; top: 0; right: 0; width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(201,164,92,.04) 0%, transparent 70%);
      pointer-events: none;
    }

    #page-connect .ep-card:hover {
      border-color: var(--gold);
      box-shadow: 0 0 40px rgba(201,164,92,.08), 0 20px 60px rgba(0,0,0,.3);
      transform: translateY(-4px);
    }

    #page-connect .ep-card-head {
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 20px;
    }

    #page-connect .ep-icon {
      width: 52px; height: 52px;
      border: 1.5px solid var(--gold);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; color: var(--gold);
      flex-shrink: 0;
      transition: box-shadow .4s;
    }

    #page-connect .ep-card:hover .ep-icon {
      box-shadow: 0 0 20px rgba(201,164,92,.2);
    }

    #page-connect .ep-card-head h3 {
      font-family: var(--serif);
      font-size: 22px; font-weight: 400;
      line-height: 1.2;
    }

    #page-connect .ep-card-head h3 small {
      display: block;
      font-family: var(--sans);
      font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); font-weight: 400;
      margin-top: 4px;
    }

    #page-connect .ep-card > p {
      font-size: 14px; line-height: 1.75;
      color: var(--txt-dim);
      margin-bottom: 24px;
    }

    #page-connect .ep-features {
      display: flex; flex-direction: column; gap: 10px;
    }

    #page-connect .ep-feat {
      display: flex; align-items: center; gap: 12px;
      font-size: 13px; color: var(--txt-dim);
      padding: 8px 14px;
      border-radius: 8px;
      background: rgba(201,164,92,.03);
      border: 1px solid rgba(201,164,92,.06);
      transition: background .3s, border-color .3s;
    }

    #page-connect .ep-feat:hover {
      background: rgba(201,164,92,.06);
      border-color: rgba(201,164,92,.12);
    }

    #page-connect .ep-feat-dot {
      width: 6px; height: 6px;
      background: var(--gold);
      border-radius: 50%;
      flex-shrink: 0;
    }


    #page-connect /* Full-width feature card */
    .ep-card.full { grid-column: 1 / -1; }

    #page-connect .ep-card.full .ep-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }


    #page-connect /* ============================================================
       SCORE EPOXYA™ — Interactive
       ============================================================ */
    .score-demo {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(25,25,32,.6);
    }

    #page-connect .score-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between;
    }

    #page-connect .score-header-left {
      display: flex; align-items: center; gap: 12px;
    }

    #page-connect .score-header-logo {
      font-family: var(--serif);
      font-size: 14px; letter-spacing: .2em;
      color: var(--gold);
    }

    #page-connect .score-header span {
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim);
    }

    #page-connect .score-status {
      font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--gold);
      padding: 4px 12px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(201,164,92,.06);
    }

    #page-connect .score-body {
      padding: 32px 28px;
    }

    #page-connect .score-axes {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }

    #page-connect .score-axis {
      text-align: center;
      padding: 20px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      transition: border-color .4s, transform .3s var(--ease);
    }

    #page-connect .score-axis:hover {
      border-color: rgba(201,164,92,.3);
      transform: translateY(-2px);
    }

    #page-connect .score-axis-icon {
      width: 40px; height: 40px;
      border: 1.5px solid var(--line);
      border-radius: 50%;
      margin: 0 auto 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--gold);
    }

    #page-connect .score-axis-name {
      font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-dim); margin-bottom: 8px;
    }

    #page-connect .score-axis-val {
      font-family: var(--serif);
      font-size: 28px; font-weight: 300;
      color: var(--gold-l);
    }

    #page-connect .score-axis-val small { font-size: 14px; color: var(--gold); }

    #page-connect .score-axis-bar {
      width: 100%; height: 3px;
      background: rgba(201,164,92,.1);
      border-radius: 2px;
      margin-top: 10px;
      overflow: hidden;
    }

    #page-connect .score-axis-fill {
      height: 100%;
      background: var(--grad-gold);
      border-radius: 2px;
      width: 0;
      transition: width 2s var(--ease);
    }


    #page-connect .score-total {
      text-align: center;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(201,164,92,.03);
    }

    #page-connect .score-total-label {
      font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 8px;
    }

    #page-connect .score-total-ring {
      position: relative;
      width: 120px; height: 120px;
      margin: 0 auto 12px;
    }

    #page-connect .score-total-ring svg {
      width: 100%; height: 100%;
      transform: rotate(-90deg);
    }

    #page-connect .str-bg { fill: none; stroke: rgba(201,164,92,.12); stroke-width: 4; }

    #page-connect .str-fill {
      fill: none; stroke: url(#scoreGrad); stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 339;
      stroke-dashoffset: 339;
      transition: stroke-dashoffset 2.5s var(--ease);
    }

    #page-connect .score-total-val {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--serif);
      font-size: 32px; font-weight: 300;
      color: var(--gold-l);
    }

    #page-connect .score-total-val small { font-size: 14px; color: var(--gold); }

    #page-connect .score-total-tag {
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold-l);
    }


    #page-connect /* ============================================================
       JUMEAU ARCHITECTURAL™
       ============================================================ */
    .twin-demo {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(25,25,32,.4);
      position: relative;
    }

    #page-connect .twin-viewport {
      aspect-ratio: 16 / 9;
      background: linear-gradient(135deg, #14141a, #1a1a22, #14141a);
      position: relative;
      overflow: hidden;
    }

    #page-connect .twin-viewport::before {
      content: '';
      position: absolute; inset: 0;
      background:
        linear-gradient(135deg, transparent 40%, rgba(201,164,92,.04) 50%, transparent 60%),
        repeating-linear-gradient(0deg, rgba(201,164,92,.02) 0px, rgba(201,164,92,.02) 1px, transparent 1px, transparent 60px),
        repeating-linear-gradient(90deg, rgba(201,164,92,.02) 0px, rgba(201,164,92,.02) 1px, transparent 1px, transparent 60px);
    }

    #page-connect .twin-room {
      position: absolute; inset: 15%;
      border: 1px solid rgba(201,164,92,.15);
      border-radius: 4px;
    }

    #page-connect .twin-room::before {
      content: 'JUMEAU ARCHITECTURAL';
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
      color: var(--gold); opacity: .3;
      white-space: nowrap;
    }

    #page-connect .twin-floor {
      position: absolute; bottom: 20%; left: 18%; right: 18%; height: 25%;
      background: linear-gradient(180deg, rgba(201,164,92,.06), rgba(201,164,92,.02));
      border-radius: 2px;
    }

    #page-connect .twin-wall-l {
      position: absolute; top: 20%; bottom: 20%; left: 18%; width: 3%;
      background: linear-gradient(90deg, rgba(201,164,92,.08), transparent);
    }

    #page-connect .twin-wall-r {
      position: absolute; top: 20%; bottom: 20%; right: 18%; width: 3%;
      background: linear-gradient(270deg, rgba(201,164,92,.08), transparent);
    }

    #page-connect .twin-hotspot {
      position: absolute;
      width: 32px; height: 32px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: var(--gold);
      cursor: pointer;
      transition: box-shadow .4s, transform .3s var(--ease);
      background: rgba(12,12,15,.7);
      backdrop-filter: blur(4px);
    }

    #page-connect .twin-hotspot:hover {
      box-shadow: 0 0 24px rgba(201,164,92,.3);
      transform: scale(1.15);
    }

    #page-connect .twin-hotspot::after {
      content: '';
      position: absolute;
      width: 48px; height: 48px;
      border: 1px solid rgba(201,164,92,.2);
      border-radius: 50%;
      animation: twinPulse 2s ease-out infinite;
    }

    @keyframes twinPulse {
      0% { transform: scale(1); opacity: .6; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    #page-connect .twin-controls {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 24px;
      border-top: 1px solid var(--line);
    }

    #page-connect .twin-controls-left {
      display: flex; gap: 12px;
    }

    #page-connect .twin-ctrl-btn {
      padding: 8px 16px;
      font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--txt-dim); background: transparent;
      border: 1px solid var(--line);
      border-radius: 6px;
      transition: all .3s;
    }

    #page-connect .twin-ctrl-btn:hover, #page-connect .twin-ctrl-btn.active {
      color: var(--gold); border-color: var(--gold);
      background: rgba(201,164,92,.06);
    }

    #page-connect .twin-meta {
      font-size: 10px; color: var(--txt-dim);
      letter-spacing: .08em;
    }


    #page-connect /* ============================================================
       PASSEPORT EPOXYA™
       ============================================================ */
    .passport-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(25,25,32,.6), rgba(201,164,92,.03));
    }

    #page-connect .passport-header {
      padding: 24px 28px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between;
    }

    #page-connect .passport-header-left h4 {
      font-family: var(--serif);
      font-size: 18px; font-weight: 400;
      margin-bottom: 2px;
    }

    #page-connect .passport-header-left span {
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold);
    }

    #page-connect .passport-number {
      font-family: var(--serif);
      font-size: 16px; color: var(--gold-l);
      letter-spacing: .08em;
    }

    #page-connect .passport-body {
      padding: 24px 28px;
    }

    #page-connect .passport-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    #page-connect .passport-field {
      padding: 14px;
      border: 1px solid rgba(201,164,92,.08);
      border-radius: 8px;
      background: rgba(12,12,15,.3);
    }

    #page-connect .passport-field-label {
      font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 6px;
    }

    #page-connect .passport-field-val {
      font-size: 14px; color: var(--txt);
    }


    #page-connect /* ============================================================
       EPOXYA PARTNERS™ — Portal
       ============================================================ */
    .pt-hero {
      text-align: center;
      padding: var(--s-pad) var(--h-pad);
      border-bottom: 1px solid var(--line);
      position: relative;
      overflow: hidden;
    }

    #page-connect .pt-hero::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse at 30% 50%, rgba(201,164,92,.04) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 50%, rgba(201,164,92,.04) 0%, transparent 50%);
      pointer-events: none;
    }


    #page-connect /* System Library Cards */
    .sys-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    #page-connect .sys-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      transition: all .5s var(--ease);
      position: relative;
    }

    #page-connect .sys-card:hover {
      border-color: var(--gold);
      box-shadow: 0 0 32px rgba(201,164,92,.1), 0 16px 48px rgba(0,0,0,.3);
      transform: translateY(-4px);
    }

    #page-connect .sys-swatch {
      height: 100px;
      position: relative;
    }

    #page-connect .sys-swatch::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(12,12,15,.85) 100%);
    }

    #page-connect .sys-body {
      padding: 20px;
    }

    #page-connect .sys-body h3 {
      font-family: var(--serif);
      font-size: 18px; font-weight: 400;
      margin-bottom: 4px;
    }

    #page-connect .sys-body .sys-tag {
      font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 12px;
    }

    #page-connect .sys-body p {
      font-size: 12.5px; line-height: 1.65; color: var(--txt-dim);
      margin-bottom: 14px;
    }

    #page-connect .sys-meta {
      display: flex; gap: 8px;
    }

    #page-connect .sys-meta-item {
      font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--gold);
      border: 1px solid rgba(201,164,92,.2);
      padding: 3px 8px;
      border-radius: 3px;
    }


    #page-connect /* ============================================================
       CONFIGURATEUR PROFESSIONNEL
       ============================================================ */
    .config-demo {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(25,25,32,.4);
    }

    #page-connect .config-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between;
    }

    #page-connect .config-header-left {
      display: flex; align-items: center; gap: 12px;
    }

    #page-connect .config-header-logo {
      font-family: var(--serif);
      font-size: 14px; letter-spacing: .2em;
      color: var(--gold);
    }

    #page-connect .config-header span {
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim);
    }

    #page-connect .config-steps {
      display: flex;
      border-bottom: 1px solid var(--line);
    }

    #page-connect .config-step {
      flex: 1;
      padding: 14px 12px;
      text-align: center;
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim);
      border-bottom: 2px solid transparent;
      background: transparent;
      border-top: none; border-left: none; border-right: none;
      transition: all .3s;
    }

    #page-connect .config-step.active {
      color: var(--gold);
      border-bottom-color: var(--gold);
      background: rgba(201,164,92,.04);
    }

    #page-connect .config-step-num {
      display: inline-flex; align-items: center; justify-content: center;
      width: 20px; height: 20px;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 9px;
      margin-right: 6px;
    }

    #page-connect .config-body {
      padding: 32px 28px;
    }

    #page-connect .config-panel {
      display: none;
    }

    #page-connect .config-panel.active { display: block; animation: cxFadeInConnect .4s var(--ease); }


    #page-connect .config-options {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }

    #page-connect .config-opt {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 10px;
      cursor: pointer;
      transition: all .3s;
      background: transparent;
      text-align: left;
      width: 100%;
    }

    #page-connect .config-opt:hover, #page-connect .config-opt.selected {
      border-color: var(--gold);
      background: rgba(201,164,92,.04);
    }

    #page-connect .config-opt h4 {
      font-size: 13px; font-weight: 400;
      margin-bottom: 4px;
    }

    #page-connect .config-opt p {
      font-size: 11px; color: var(--txt-dim); line-height: 1.5;
    }


    #page-connect /* Config dimension inputs */
    .config-dims {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    #page-connect .config-dim-field label {
      display: block;
      font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--txt-dim); margin-bottom: 6px;
    }

    #page-connect .config-dim-field input {
      width: 100%;
      padding: 12px 14px;
      font-family: var(--sans);
      font-size: 14px; font-weight: 300;
      color: var(--txt);
      background: rgba(25,25,32,.5);
      border: 1px solid var(--line);
      border-radius: 6px;
      outline: none;
      transition: border-color .3s;
    }

    #page-connect .config-dim-field input:focus {
      border-color: var(--gold);
    }

    #page-connect .config-dim-field input::placeholder {
      color: rgba(205,198,184,.3);
    }


    #page-connect /* Config result */
    .config-result {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }

    #page-connect .config-result-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold);
      background: rgba(201,164,92,.04);
    }

    #page-connect .config-result-body {
      padding: 20px;
    }

    #page-connect .config-result-row {
      display: flex; justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid rgba(201,164,92,.06);
      font-size: 13px;
    }

    #page-connect .config-result-row:last-child { border-bottom: none; }

    #page-connect .config-result-row span:first-child { color: var(--txt-dim); }

    #page-connect .config-result-row span:last-child { color: var(--gold-l); font-weight: 400; }

    #page-connect .config-result-total {
      display: flex; justify-content: space-between;
      padding: 16px 0 0;
      margin-top: 8px;
      border-top: 1px solid var(--line);
      font-size: 15px;
    }

    #page-connect .config-result-total span:first-child { color: var(--txt); }

    #page-connect .config-result-total span:last-child {
      font-family: var(--serif);
      font-size: 22px; color: var(--gold-l);
    }

    #page-connect .config-result-total.config-result-sub {
      padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(201,164,92,.12);
      font-size: 13px;
    }

    #page-connect .config-result-total.config-result-sub span:last-child {
      font-family: var(--sans); font-size: 14px;
    }


    #page-connect /* Configurateur — éléments upgradés */
    .config-sub {
      font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold); margin: 22px 0 12px;
    }

    #page-connect .config-sub:first-child { margin-top: 0; }

    #page-connect .config-dims.config-dims-2 { grid-template-columns: repeat(2, 1fr); }

    #page-connect .config-opt { position: relative; }

    #page-connect .config-toggle.selected::after {
      content: '✓'; position: absolute; top: 14px; right: 16px;
      font-size: 12px; color: var(--gold);
    }

    #page-connect .config-price {
      font-size: 10px; color: var(--gold); letter-spacing: .04em;
      margin-left: 6px; opacity: .85;
    }

    #page-connect .config-opt h4 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }

    #page-connect .config-cta {
      display: block; width: 100%; margin-top: 18px;
      padding: 15px; text-align: center;
      font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
      color: #0c0c0f; background: var(--grad-gold, var(--gold));
      border-radius: 8px; transition: filter .3s, box-shadow .3s;
    }

    #page-connect .config-cta:hover { filter: brightness(1.05); box-shadow: var(--sh-gold, 0 10px 30px rgba(201,164,92,.25)); }

    #page-connect .config-disclaimer {
      font-size: 11px; line-height: 1.6; color: var(--txt-dim);
      margin-top: 12px; text-align: center;
    }


    #page-connect /* ============================================================
       ACADEMY LEVELS
       ============================================================ */
    .acad-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    #page-connect .acad-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 32px 24px;
      text-align: center;
      transition: all .5s var(--ease);
      position: relative;
      overflow: hidden;
    }

    #page-connect .acad-card::before {
      content: '';
      position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
      background: conic-gradient(from 0deg, transparent 0%, rgba(201,164,92,.04) 25%, transparent 50%);
      animation: acad-glow 8s linear infinite;
      pointer-events: none;
      opacity: 0;
      transition: opacity .5s;
    }

    #page-connect .acad-card:hover::before { opacity: 1; }

    @keyframes acad-glow {
      to { transform: rotate(360deg); }
    }
    #page-connect .acad-card:hover {
      border-color: var(--gold);
      transform: translateY(-4px);
      box-shadow: 0 0 32px rgba(201,164,92,.1);
    }

    #page-connect .acad-level {
      font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 16px;
    }

    #page-connect .acad-icon {
      width: 56px; height: 56px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      margin: 0 auto 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; color: var(--gold);
      position: relative; z-index: 1;
    }

    #page-connect .acad-card h3 {
      font-family: var(--serif);
      font-size: 20px; font-weight: 400;
      margin-bottom: 10px;
      position: relative; z-index: 1;
    }

    #page-connect .acad-card p {
      font-size: 12.5px; line-height: 1.65; color: var(--txt-dim);
      position: relative; z-index: 1;
      margin-bottom: 16px;
    }

    #page-connect .acad-hours {
      font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
      color: var(--gold); opacity: .7;
      position: relative; z-index: 1;
    }


    #page-connect /* ============================================================
       SCORE DE MAÎTRISE
       ============================================================ */
    .mastery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    #page-connect .mastery-card {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 28px 20px;
      text-align: center;
      transition: all .4s var(--ease);
    }

    #page-connect .mastery-card:hover {
      transform: translateY(-3px);
    }

    #page-connect .mastery-card.bronze { border-color: rgba(205,127,50,.3); }

    #page-connect .mastery-card.bronze .mastery-badge { border-color: #cd7f32; color: #cd7f32; }

    #page-connect .mastery-card.bronze .mastery-name { color: #cd7f32; }

    #page-connect .mastery-card.silver { border-color: rgba(192,192,192,.3); }

    #page-connect .mastery-card.silver .mastery-badge { border-color: #c0c0c0; color: #c0c0c0; }

    #page-connect .mastery-card.silver .mastery-name { color: #c0c0c0; }

    #page-connect .mastery-card.gold-tier { border-color: rgba(201,164,92,.3); }

    #page-connect .mastery-card.gold-tier .mastery-badge { border-color: var(--gold); color: var(--gold); }

    #page-connect .mastery-card.gold-tier .mastery-name { color: var(--gold); }

    #page-connect .mastery-card.elite { border-color: rgba(201,164,92,.5); box-shadow: 0 0 20px rgba(201,164,92,.1); }

    #page-connect .mastery-card.elite .mastery-badge {
      border-color: var(--gold-l); color: var(--gold-l);
      box-shadow: 0 0 16px rgba(201,164,92,.2);
    }

    #page-connect .mastery-card.elite .mastery-name { color: var(--gold-l); }


    #page-connect .mastery-badge {
      width: 52px; height: 52px;
      border: 2px solid var(--line);
      border-radius: 50%;
      margin: 0 auto 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      transition: box-shadow .4s;
    }

    #page-connect .mastery-card:hover .mastery-badge {
      box-shadow: 0 0 20px currentColor;
    }

    #page-connect .mastery-name {
      font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
      font-weight: 500; margin-bottom: 8px;
    }

    #page-connect .mastery-req {
      font-size: 11px; line-height: 1.6; color: var(--txt-dim);
    }


    #page-connect /* ============================================================
       MARKETPLACE
       ============================================================ */
    .mp-tabs {
      display: flex; justify-content: center; gap: 0;
      border-bottom: 1px solid var(--line);
      margin-bottom: 40px;
    }

    #page-connect .mp-tab {
      padding: 16px 28px;
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim); background: transparent;
      border: none; border-bottom: 2px solid transparent;
      transition: all .3s;
    }

    #page-connect .mp-tab:hover { color: var(--txt); }

    #page-connect .mp-tab.active {
      color: var(--gold); border-bottom-color: var(--gold);
    }

    #page-connect .mp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    #page-connect .mp-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 24px;
      transition: all .4s var(--ease);
    }

    #page-connect .mp-item:hover {
      border-color: var(--gold);
      transform: translateY(-3px);
      box-shadow: 0 0 24px rgba(201,164,92,.08);
    }

    #page-connect .mp-item-head {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 14px;
    }

    #page-connect .mp-item-icon {
      width: 40px; height: 40px;
      border: 1.5px solid var(--line);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; color: var(--gold);
    }

    #page-connect .mp-item h4 {
      font-size: 14px; font-weight: 400;
    }

    #page-connect .mp-item h4 small {
      display: block;
      font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--gold); font-weight: 400;
      margin-top: 2px;
    }

    #page-connect .mp-item p {
      font-size: 12.5px; line-height: 1.65; color: var(--txt-dim);
      margin-bottom: 14px;
    }

    #page-connect .mp-item-price {
      font-family: var(--serif);
      font-size: 18px; color: var(--gold-l);
    }


    #page-connect /* ============================================================
       RÉSEAU MAP
       ============================================================ */
    .network-map {
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: rgba(25,25,32,.4);
    }

    #page-connect .network-map-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between;
    }

    #page-connect .network-map-header h4 {
      font-size: 13px; letter-spacing: .12em;
      color: var(--gold);
    }

    #page-connect .network-map-header span {
      font-size: 10px; color: var(--txt-dim);
    }

    #page-connect .network-map-visual {
      aspect-ratio: 16 / 7;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(12,12,15,.3), rgba(25,25,32,.5));
    }

    #page-connect .network-map-visual svg {
      width: 100%; height: 100%;
    }

    #page-connect .network-dot {
      fill: var(--gold);
      opacity: .7;
      transition: opacity .3s;
    }

    #page-connect .network-dot:hover { opacity: 1; }

    #page-connect .network-pulse {
      fill: none; stroke: var(--gold); stroke-width: .5;
      opacity: 0;
      animation: netPulse 3s ease-out infinite;
    }

    @keyframes netPulse {
      0% { r: 4; opacity: .5; }
      100% { r: 20; opacity: 0; }
    }
    #page-connect .network-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid var(--line);
    }

    #page-connect .network-stat {
      padding: 18px;
      text-align: center;
      border-right: 1px solid var(--line);
    }

    #page-connect .network-stat:last-child { border-right: none; }

    #page-connect .network-stat-val {
      font-family: var(--serif);
      font-size: 24px; color: var(--gold-l);
      margin-bottom: 2px;
    }

    #page-connect .network-stat-label {
      font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt-dim);
    }


    #page-connect /* ============================================================
       GLOBAL CTA
       ============================================================ */
    .cx-cta {
      text-align: center;
      padding: var(--s-pad) var(--h-pad);
      border-top: 1px solid var(--line);
      position: relative;
    }

    #page-connect .cx-cta::before {
      content: '';
      position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
      width: 600px; height: 400px;
      background: radial-gradient(ellipse, rgba(201,164,92,.06) 0%, transparent 70%);
      pointer-events: none;
    }

    #page-connect .cx-cta h2 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.5vw, 48px);
      font-weight: 300; line-height: 1.15;
      margin-bottom: 20px;
    }

    #page-connect .cx-cta p {
      font-size: 16px; line-height: 1.8; color: var(--txt-dim);
      max-width: 600px; margin: 0 auto 40px;
    }

    #page-connect .cx-cta-btns {
      display: flex; justify-content: center; gap: 20px;
      flex-wrap: wrap;
    }

    #page-connect .btn-gold {
      display: inline-block;
      padding: 16px 40px;
      font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
      color: #000; background: var(--grad-gold);
      border: none; border-radius: 4px;
      transition: transform .3s var(--ease), box-shadow .3s;
    }

    #page-connect .btn-gold:hover {
      transform: translateY(-2px);
      box-shadow: var(--sh-gold);
    }

    #page-connect .btn-outline {
      display: inline-block;
      padding: 16px 40px;
      font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
      color: var(--gold); background: transparent;
      border: 1px solid var(--gold);
      border-radius: 4px;
      transition: all .3s;
    }

    #page-connect .btn-outline:hover {
      background: var(--gold); color: #000;
      box-shadow: 0 0 40px rgba(201,164,92,.3);
    }


    #page-connect /* ============================================================
       DIVIDER
       ============================================================ */
    .cx-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%);
      opacity: .3;
      max-width: var(--max-w);
      margin: 0 auto;
    }


    #page-connect /* ============================================================
       FOOTER
       ============================================================ */
    .ft {
      border-top: 1px solid var(--line);
      padding: 40px var(--h-pad);
      text-align: center;
      font-size: 12px; color: var(--txt-dim);
      letter-spacing: .06em;
    }

    #page-connect .ft a { color: var(--gold); transition: color .3s; }

    #page-connect .ft a:hover { color: var(--gold-l); }

    #page-connect .ft-nav { margin-bottom: 12px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }

    #page-connect .ft-legal { margin-bottom: 8px; display: flex; justify-content: center; gap: 20px; }

    #page-connect .ft-motto {
      font-size: 9px; letter-spacing: .32em; text-transform: uppercase;
      color: var(--gold); opacity: .5;
      margin-top: 12px;
    }


    #page-connect /* ============================================================
       RESPONSIVE
       ============================================================ */
    @media (max-width: 1100px) {
      .ep-grid { grid-template-columns: 1fr; }
      .ep-card.full .ep-inner { grid-template-columns: 1fr; }
      .sys-grid { grid-template-columns: repeat(2, 1fr); }
      .acad-grid { grid-template-columns: repeat(2, 1fr); }
      .mastery-grid { grid-template-columns: repeat(2, 1fr); }
      .score-axes { grid-template-columns: repeat(2, 1fr); }
      .mp-grid { grid-template-columns: repeat(2, 1fr); }
      .config-options { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {

      #page-connect .cx-pill { padding: 14px 24px; }

      #page-connect .cx-universe-selector { flex-direction: column; align-items: center; }

      #page-connect .sys-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

      #page-connect .acad-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

      #page-connect .mastery-grid { grid-template-columns: repeat(2, 1fr); }

      #page-connect .mp-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

      #page-connect .config-dims { grid-template-columns: 1fr; }

      #page-connect .config-steps { flex-wrap: wrap; }

      #page-connect .passport-grid { grid-template-columns: 1fr; }

      #page-connect .network-stats { grid-template-columns: repeat(2, 1fr); }

      #page-connect .network-stat:nth-child(2) { border-right: none; }

      #page-connect .cx-cta-btns { flex-direction: column; align-items: center; }

    
}

    @media (max-width: 480px) {

      #page-connect .mastery-grid { grid-template-columns: 1fr; }

      #page-connect .score-axes { grid-template-columns: 1fr; }

      #page-connect .mp-tabs { flex-wrap: wrap; justify-content: center; }

      #page-connect .twin-hotspot { width: 24px; height: 24px; font-size: 10px; }

    
}


    #page-connect /* ============================================================
       SE CONNECTER — Auth section
       ============================================================ */
    .cx-auth {
      max-width: 440px;
      margin: 0 auto;
      padding: var(--s-pad) var(--h-pad);
    }

    #page-connect .cx-auth-card {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: clamp(32px, 5vw, 48px);
      background: linear-gradient(180deg, rgba(25,25,32,.6), rgba(12,12,15,.4));
      position: relative;
      overflow: hidden;
    }

    #page-connect .cx-auth-card::before {
      content: '';
      position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(201,164,92,.06) 0%, transparent 70%);
      pointer-events: none;
    }

    #page-connect .cx-auth-icon {
      width: 52px; height: 52px;
      border: 1.5px solid var(--gold);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; color: var(--gold);
      margin: 0 auto 20px;
      box-shadow: 0 0 20px rgba(201,164,92,.12);
      position: relative; z-index: 1;
    }

    #page-connect .cx-auth-card h2 {
      font-family: var(--serif);
      font-size: 28px; font-weight: 300;
      text-align: center; margin-bottom: 8px;
      position: relative; z-index: 1;
    }

    #page-connect .cx-auth-sub {
      text-align: center; font-size: 14px;
      color: var(--txt-dim); margin-bottom: 32px;
      line-height: 1.6; position: relative; z-index: 1;
    }

    #page-connect .cx-auth-tabs {
      display: flex; background: var(--obs2);
      border-radius: 8px; padding: 4px;
      margin-bottom: 28px; border: 1px solid var(--line);
      position: relative; z-index: 1;
    }

    #page-connect .cx-auth-tab {
      flex: 1; padding: 11px 0; text-align: center;
      font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-dim); background: none; border: none;
      border-radius: 6px; cursor: pointer;
      transition: all .35s var(--ease);
      font-family: var(--sans); font-weight: 400;
    }

    #page-connect .cx-auth-tab.active {
      color: #000; background: var(--grad-gold);
      box-shadow: 0 2px 10px rgba(201,164,92,.25);
    }

    #page-connect .cx-auth-form { display: none; position: relative; z-index: 1; }

    #page-connect .cx-auth-form.active { display: block; animation: cxFadeInConnect .4s var(--ease); }

    #page-connect .cx-field { margin-bottom: 18px; }

    #page-connect .cx-field label {
      display: block; font-size: 11.5px;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--txt-dim); margin-bottom: 7px;
    }

    #page-connect .cx-field-input { position: relative; }

    #page-connect .cx-field input {
      width: 100%; padding: 13px 16px;
      font-family: var(--sans); font-size: 14.5px; font-weight: 300;
      color: var(--txt); background: rgba(25,25,32,.5);
      border: 1px solid var(--line); border-radius: 6px; outline: none;
      transition: border-color .3s, box-shadow .3s;
    }

    #page-connect .cx-field input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(201,164,92,.08);
    }

    #page-connect .cx-field input::placeholder { color: rgba(205,198,184,.3); }

    #page-connect .cx-field-input .cx-toggle-pass {
      position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--txt-dim);
      cursor: pointer; padding: 4px; font-size: 16px; transition: color .3s;
    }

    #page-connect .cx-field-input .cx-toggle-pass:hover { color: var(--gold); }

    #page-connect .cx-pass-strength {
      display: flex; gap: 4px; margin-top: 8px;
    }

    #page-connect .cx-pass-bar {
      flex: 1; height: 3px; border-radius: 2px;
      background: var(--line); transition: background .3s;
    }

    #page-connect .cx-pass-bar.weak { background: #c85032; }

    #page-connect .cx-pass-bar.medium { background: #c8a032; }

    #page-connect .cx-pass-bar.strong { background: #4cb860; }

    #page-connect .cx-pass-label {
      font-size: 11px; color: var(--txt-dim);
      margin-top: 4px; text-align: right;
    }

    #page-connect .cx-auth-btn {
      width: 100%; padding: 14px;
      font-family: var(--sans); font-size: 13px; font-weight: 400;
      letter-spacing: .12em; text-transform: uppercase;
      color: #000; background: var(--grad-gold);
      border: none; border-radius: 6px; cursor: pointer;
      margin-top: 6px;
      transition: transform .3s var(--ease), box-shadow .3s;
      position: relative; overflow: hidden;
    }

    #page-connect .cx-auth-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(201,164,92,.3);
    }

    #page-connect .cx-auth-btn.loading { pointer-events: none; opacity: .7; }

    #page-connect .cx-auth-btn .btn-text { transition: opacity .3s; }

    #page-connect .cx-auth-btn.loading .btn-text { opacity: 0; }

    #page-connect .cx-auth-btn .spinner {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 20px; height: 20px;
      border: 2px solid rgba(0,0,0,.2);
      border-top-color: #000; border-radius: 50%;
      opacity: 0; animation: none;
    }

    #page-connect .cx-auth-btn.loading .spinner {
      opacity: 1; animation: spin .7s linear infinite;
    }

    @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
    #page-connect .cx-forgot {
      display: block; text-align: right;
      font-size: 12px; color: var(--txt-dim);
      margin-bottom: 16px; transition: color .3s;
    }

    #page-connect .cx-forgot:hover { color: var(--gold); }

    #page-connect .cx-consent-label {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 12px; color: var(--txt-dim);
      margin-bottom: 16px; line-height: 1.5; cursor: pointer;
    }

    #page-connect .cx-consent-label input[type="checkbox"] {
      width: 16px; height: 16px; margin-top: 2px;
      accent-color: var(--gold); flex-shrink: 0;
    }

    #page-connect .cx-consent-label a { color: var(--gold); border-bottom: 1px solid rgba(201,164,92,.3); }

    #page-connect .cx-auth-msg {
      padding: 12px 16px; border-radius: 6px;
      font-size: 13px; margin-bottom: 16px;
      display: none;
    }

    #page-connect .cx-auth-msg.visible { display: block; }

    #page-connect .cx-auth-msg.error { background: rgba(200,80,50,.1); border: 1px solid rgba(200,80,50,.3); color: #e8a090; }

    #page-connect .cx-auth-msg.success { background: rgba(76,184,96,.1); border: 1px solid rgba(76,184,96,.3); color: #90e8a0; }

    #page-connect .cx-auth-sep {
      text-align: center; font-size: 11px;
      letter-spacing: .15em; text-transform: uppercase;
      color: var(--txt-dim); margin: 24px 0 16px;
      opacity: .5;
    }

  
/* -- marketplace -- */

    #page-marketplace .mk-root *, #page-marketplace .mk-root *::before, #page-marketplace .mk-root *::after { margin: 0; padding: 0; box-sizing: border-box; }

    #page-marketplace .mk-root {
      background: var(--obs);
      color: var(--txt);
      font-family: var(--sans);
      font-weight: 300;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    #page-marketplace .mk-root img { display: block; max-width: 100%; }

    #page-marketplace .mk-root a { color: inherit; text-decoration: none; }

    #page-marketplace .mk-root button { cursor: pointer; font-family: var(--sans); color: inherit; background: none; border: none; }

    #page-marketplace .mk-root ::selection { background: var(--gold); color: #000; }


    #page-marketplace /* ---- Nav ---- */
    .mk-pn {
      position: sticky; top: 0; z-index: 50;
      display: flex; justify-content: space-between; align-items: center;
      padding: 16px var(--h-pad);
      background: rgba(7,7,8,.9);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    #page-marketplace .mk-pn-logo {
      font-family: var(--serif);
      font-size: 22px; letter-spacing: .42em; font-weight: 400;
      padding-left: .42em;
      background: var(--grad-gold);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #page-marketplace .mk-pn-right { display: flex; align-items: center; gap: 14px; }

    #page-marketplace .mk-pn-back {
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
      color: var(--gold); border: 1px solid var(--line);
      padding: 10px 18px; transition: background .3s, color .3s, border-color .3s;
    }

    #page-marketplace .mk-pn-back:hover { background: var(--gold); color: #000; border-color: var(--gold); }

    #page-marketplace .mk-cart-btn {
      position: relative;
      display: flex; align-items: center; gap: 8px;
      font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
      color: var(--txt); border: 1px solid var(--line);
      padding: 10px 18px; transition: border-color .3s, color .3s;
    }

    #page-marketplace .mk-cart-btn:hover { border-color: var(--gold); color: var(--gold); }

    #page-marketplace .mk-cart-count {
      min-width: 18px; height: 18px; padding: 0 5px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--gold); color: #000; border-radius: 9px;
      font-size: 10px; font-weight: 500; letter-spacing: 0;
    }

    #page-marketplace .mk-cart-count[data-empty="1"] { display: none; }


    #page-marketplace /* ---- Hero ---- */
    .mk-hero {
      padding: 72px var(--h-pad) 40px; text-align: center;
      border-bottom: 1px solid var(--line);
    }

    #page-marketplace .mk-stag {
      font-size: 10.5px; letter-spacing: .36em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 18px;
      display: flex; align-items: center; justify-content: center; gap: 12px;
    }

    #page-marketplace .mk-stag::before, #page-marketplace .mk-stag::after { content: ''; width: 28px; height: 1px; background: var(--gold); }

    #page-marketplace .mk-hero :is(h1,.ph1) {
      font-family: var(--serif);
      font-size: clamp(32px, 5vw, 56px); font-weight: 300; line-height: 1.15;
      margin-bottom: 16px;
      background: linear-gradient(180deg,#fffdf6 0%,#ffe9b8 38%,#e0b86a 72%,#b8923f 100%);
      -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }

    #page-marketplace .mk-hero p { font-size: 16px; line-height: 1.8; color: var(--txt-dim); max-width: 640px; margin: 0 auto; }


    #page-marketplace /* ---- Login gate ---- */
    .mk-gate { max-width: 560px; margin: 0 auto; padding: 80px var(--h-pad) 120px; text-align: center; }

    #page-marketplace .mk-gate-card {
      border: 1px solid var(--line); border-radius: 14px; padding: 56px 40px;
      background: linear-gradient(160deg, rgba(25,25,32,.6), rgba(12,12,15,.4));
    }

    #page-marketplace .mk-gate-ico { font-size: 34px; color: var(--gold); margin-bottom: 20px; }

    #page-marketplace .mk-gate h2 { font-family: var(--serif); font-size: 30px; font-weight: 300; margin-bottom: 16px; color: var(--gold-l); }

    #page-marketplace .mk-gate p { font-size: 15px; line-height: 1.8; color: var(--txt-dim); margin-bottom: 32px; }

    #page-marketplace .mk-btn {
      display: inline-block; border: 1px solid var(--gold); padding: 15px 38px;
      font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
      background: transparent; transition: background .4s, color .4s, box-shadow .4s;
    }

    #page-marketplace .mk-btn:hover { background: var(--gold); color: #000; box-shadow: var(--sh-gold); }

    #page-marketplace .mk-btn-solid { background: var(--gold); color: #000; }

    #page-marketplace .mk-btn-solid:hover { box-shadow: var(--sh-gold); filter: brightness(1.05); }

    #page-marketplace .mk-btn[disabled] { opacity: .5; pointer-events: none; }


    #page-marketplace /* ---- Toolbar ---- */
    .mk-shop { max-width: var(--max-w); margin: 0 auto; padding: 36px var(--h-pad) 120px; }

    #page-marketplace .mk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 40px; padding: 4px; margin-bottom: 28px; }

    #page-marketplace .mk-seg-btn {
      padding: 10px 26px; border-radius: 40px;
      font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-dim);
      transition: background .3s, color .3s; position: relative;
    }

    #page-marketplace .mk-seg-btn.active { background: var(--grad-gold); color: #000; font-weight: 500; }

    #page-marketplace .mk-seg-btn[data-locked="1"] { color: rgba(205,198,184,.4); cursor: not-allowed; }

    #page-marketplace .mk-seg-btn[data-locked="1"]::after { content: ' ⬡'; font-size: 9px; }


    #page-marketplace .mk-bar { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; }

    #page-marketplace .mk-chips { display: flex; flex-wrap: wrap; gap: 10px; }

    #page-marketplace .mk-chip {
      font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-dim);
      border: 1px solid var(--line); padding: 8px 16px; border-radius: 30px;
      transition: border-color .3s, color .3s, background .3s;
    }

    #page-marketplace .mk-chip:hover { border-color: var(--gold); color: var(--gold); }

    #page-marketplace .mk-chip.active { background: rgba(201,164,92,.12); border-color: var(--gold); color: var(--gold-l); }

    #page-marketplace .mk-note {
      font-size: 12.5px; color: var(--txt-dim); margin: 4px 0 26px;
      display: flex; align-items: center; gap: 8px;
    }

    #page-marketplace .mk-note b { color: var(--gold-l); font-weight: 400; }


    #page-marketplace /* ---- Product grid ---- */
    .mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }

    #page-marketplace .mk-card {
      border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
      display: flex; flex-direction: column;
      background: linear-gradient(160deg, rgba(25,25,32,.5), rgba(12,12,15,.2));
      transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
    }

    #page-marketplace .mk-card:hover { border-color: var(--line-h); box-shadow: 0 18px 50px rgba(0,0,0,.4); transform: translateY(-4px); }

    #page-marketplace .mk-swatch { height: 150px; position: relative; }

    #page-marketplace .mk-swatch::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(12,12,15,.55));
    }

    #page-marketplace .mk-badge {
      position: absolute; top: 12px; left: 12px; z-index: 2;
      font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
      background: rgba(7,7,8,.78); color: var(--gold-l);
      border: 1px solid var(--line); padding: 5px 10px; border-radius: 20px;
    }

    #page-marketplace .mk-cat-tag {
      position: absolute; bottom: 10px; left: 12px; z-index: 2;
      font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-dim);
    }

    #page-marketplace .mk-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }

    #page-marketplace .mk-name { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.2; margin-bottom: 4px; }

    #page-marketplace .mk-unit { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }

    #page-marketplace .mk-desc { font-size: 13px; line-height: 1.7; color: var(--txt-dim); margin-bottom: 18px; flex: 1; }

    #page-marketplace .mk-priceline { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }

    #page-marketplace .mk-price { font-family: var(--serif); font-size: 26px; color: var(--gold-l); }

    #page-marketplace .mk-price small { font-size: 12px; color: var(--txt-dim); font-family: var(--sans); letter-spacing: .06em; }

    #page-marketplace .mk-stock { font-size: 11px; color: var(--txt-dim); }

    #page-marketplace .mk-stock[data-low="1"] { color: #d9a05b; }

    #page-marketplace .mk-add {
      width: 100%; border: 1px solid var(--gold); padding: 13px;
      font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
      transition: background .3s, color .3s;
    }

    #page-marketplace .mk-add:hover { background: var(--gold); color: #000; }

    #page-marketplace .mk-add[data-in="1"] { background: rgba(201,164,92,.14); }


    #page-marketplace .mk-empty { text-align: center; padding: 80px 20px; color: var(--txt-dim); font-size: 15px; }


    #page-marketplace /* ---- Cart drawer ---- */
    .mk-overlay {
      position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6);
      opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
    }

    #page-marketplace .mk-overlay.open { opacity: 1; visibility: visible; }

    #page-marketplace .mk-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(440px, 92vw);
      background: var(--obs2); border-left: 1px solid var(--line);
      transform: translateX(100%); transition: transform .42s var(--ease);
      display: flex; flex-direction: column;
    }

    #page-marketplace .mk-drawer.open { transform: translateX(0); }

    #page-marketplace .mk-dr-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 22px 24px; border-bottom: 1px solid var(--line);
    }

    #page-marketplace .mk-dr-head h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; }

    #page-marketplace .mk-dr-close { font-size: 22px; color: var(--txt-dim); transition: color .3s; line-height: 1; }

    #page-marketplace .mk-dr-close:hover { color: var(--gold); }

    #page-marketplace .mk-dr-items { flex: 1; overflow-y: auto; padding: 8px 24px; }

    #page-marketplace .mk-li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }

    #page-marketplace .mk-li-sw { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--line); }

    #page-marketplace .mk-li-mid { flex: 1; }

    #page-marketplace .mk-li-name { font-size: 14px; line-height: 1.3; margin-bottom: 3px; }

    #page-marketplace .mk-li-unit { font-size: 11px; color: var(--gold); margin-bottom: 8px; }

    #page-marketplace .mk-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; }

    #page-marketplace .mk-step button { width: 28px; height: 28px; font-size: 15px; color: var(--txt-dim); transition: color .2s; }

    #page-marketplace .mk-step button:hover { color: var(--gold); }

    #page-marketplace .mk-step span { min-width: 26px; text-align: center; font-size: 13px; }

    #page-marketplace .mk-li-right { text-align: right; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }

    #page-marketplace .mk-li-price { font-family: var(--serif); font-size: 18px; color: var(--gold-l); }

    #page-marketplace .mk-li-rm { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-dim); transition: color .2s; }

    #page-marketplace .mk-li-rm:hover { color: #d9776b; }

    #page-marketplace .mk-dr-foot { padding: 22px 24px; border-top: 1px solid var(--line); }

    #page-marketplace .mk-tot { display: flex; justify-content: space-between; font-size: 13px; color: var(--txt-dim); margin-bottom: 8px; }

    #page-marketplace .mk-tot.grand { font-size: 17px; color: var(--txt); margin: 14px 0 4px; }

    #page-marketplace .mk-tot.grand b { font-family: var(--serif); font-size: 24px; color: var(--gold-l); font-weight: 400; }

    #page-marketplace .mk-tva-note { font-size: 11px; color: var(--txt-dim); margin-bottom: 18px; }

    #page-marketplace .mk-checkout { width: 100%; padding: 16px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }

    #page-marketplace .mk-cart-empty { text-align: center; color: var(--txt-dim); padding: 70px 20px; font-size: 14px; }

    #page-marketplace .mk-secure { font-size: 11px; color: var(--txt-dim); text-align: center; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; }


    #page-marketplace /* ---- Order confirmation ---- */
    .mk-confirm { max-width: 600px; margin: 0 auto; padding: 80px var(--h-pad) 120px; text-align: center; }

    #page-marketplace .mk-confirm-card { border: 1px solid var(--line); border-radius: 14px; padding: 56px 40px; background: linear-gradient(160deg, rgba(25,25,32,.6), rgba(12,12,15,.4)); }

    #page-marketplace .mk-confirm-ico { font-size: 46px; color: var(--gold); margin-bottom: 18px; }

    #page-marketplace .mk-confirm h2 { font-family: var(--serif); font-size: 32px; font-weight: 300; color: var(--gold-l); margin-bottom: 14px; }

    #page-marketplace .mk-confirm p { font-size: 15px; line-height: 1.8; color: var(--txt-dim); margin-bottom: 10px; }

    #page-marketplace .mk-confirm .mk-ref { font-family: var(--serif); font-size: 22px; color: var(--txt); letter-spacing: .04em; margin: 18px 0 6px; }

    #page-marketplace .mk-confirm .mk-btn { margin-top: 28px; }

    #page-marketplace .mk-confirm[data-state="cancel"] .mk-confirm-ico { color: #d9776b; }


    #page-marketplace /* ---- Toast ---- */
    .mk-toast {
      position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
      z-index: 80; background: var(--panel); border: 1px solid var(--line);
      padding: 14px 24px; border-radius: 40px; font-size: 13px; color: var(--txt);
      opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility .3s;
      box-shadow: var(--sh);
    }

    #page-marketplace .mk-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

    #page-marketplace .mk-toast b { color: var(--gold-l); font-weight: 400; }


    #page-marketplace .mk-hidden { display: none !important; }


    @media (max-width: 700px) {

      #page-marketplace .mk-grid { grid-template-columns: 1fr; }

      #page-marketplace .mk-pn-back { display: none; }

    
}

  
/* -- mentions-legales -- */

/* -- politique-confidentialite -- */

/* -- conditions-generales-vente -- */


/* ====== SPA ROUTER ====== */
html, body { overflow: hidden; height: 100vh; margin: 0; }
.spa-page { display: none; overflow-y: auto; height: 100vh; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.spa-page.active { display: block; }
#page-site { scroll-behavior: auto; }
#page-heritage { scroll-snap-type: y mandatory; }
#page-heritage > section { scroll-snap-align: start; }
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:12px 24px;background:var(--gold);color:var(--obs);font-family:var(--sans);font-weight:500;border-radius:0 0 8px 8px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:0}
  
/* === SEO build additions === */
.h1-kw{display:block;font-family:'Jost',sans-serif;font-size:clamp(11px,1.1vw,14px);font-weight:400;letter-spacing:.32em;text-transform:uppercase;line-height:1.6;margin-top:.9em;opacity:.78;-webkit-text-fill-color:currentColor}
.seo-txt .sec-intro{max-width:760px}
.seo-txt .sec-intro + .sec-intro{margin-top:-12px}
.seo-list{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 28px;max-width:900px}
.seo-list li{position:relative;padding-left:20px;line-height:1.6;opacity:.85}

.seo-txt a{color:var(--gold,#C9A45C);border-bottom:1px solid rgba(201,164,92,.35);text-decoration:none}
.seo-list li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--gold,#C9A45C)}