@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  --bg-deep: #020205;
  --bg-metal: #0A0A12;
  --cyan: #00f0ff;
  --cyan-glow: rgba(0, 240, 255, 0.6);
  --mag: #ff00ea;
  --mag-glow: rgba(255, 0, 234, 0.6);
  --glass: rgba(5, 10, 25, 0.3);
  --glass-border: rgba(0, 240, 255, 0.2);
  --grid-line: rgba(255, 255, 255, 0.03);
}

.pg-lang-switch {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 22000;
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 999px;
  background: rgba(4, 8, 22, 0.78);
  backdrop-filter: blur(8px);
}

.pg-lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #b8f9ff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.pg-lang-switch a.is-active {
  color: #03131a;
  background: #00f0ff;
}

.pg-lang-page {
  position: relative;
  inset: auto;
  min-height: 100vh;
  z-index: 1;
}

.pg-lang-panel {
  max-width: 980px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  /* Fond galactique très léger plutôt que noir pur pour y voir parfaitement */
  background: radial-gradient(circle at 50% -20%, #151d38 0%, var(--bg-deep) 70%, #010103 100%);
  font-family: 'Rajdhani', sans-serif;
  color: var(--cyan);
  overflow: hidden;
  perspective: 1200px;
}

/* Background Effects */
.scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0) 50%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0.2)
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.3;
}

.vignette {
  position: absolute;
  inset: 0;
  /* Éclairage plus doux, moins charbonneux, ambiance cockpit bleutée */
  background: radial-gradient(circle at 50% 40%, transparent 30%, rgba(0, 5, 20, 0.7) 100%);
  pointer-events: none;
  z-index: 99;
}

.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.entry-gate.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.entry-gate__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top center, rgba(255, 0, 234, 0.15), transparent 25%),
    linear-gradient(180deg, rgba(3, 8, 18, 0.88), rgba(2, 4, 12, 0.94));
  backdrop-filter: blur(14px);
}

/* ==========================================================================
   🌍 GLOBE PHOTORÉALISTE — PAGE D'ENTRÉE
   Skeuomorphisme extrême · 7 couches · Effet NASA
   ========================================================================== */

.entry-globe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* ── AURA EXTERNE : halo atmosphérique diffus ── */
.entry-globe__aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 180, 255, 0.12) 0%,
    rgba(0, 120, 255, 0.06) 30%,
    rgba(0, 60, 180, 0.02) 50%,
    transparent 70%
  );
  filter: blur(30px);
  animation: auraPulse 6s ease-in-out infinite alternate;
}
.entry-globe__aura--2 {
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    rgba(100, 180, 255, 0.05) 0%,
    rgba(0, 100, 200, 0.02) 40%,
    transparent 65%
  );
  filter: blur(50px);
  animation: auraPulse 8s ease-in-out infinite alternate-reverse;
}

@keyframes auraPulse {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* ── WRAPPER HOLOGRAPHIQUE ── */
.entry-globe__wrapper {
  position: relative;
  padding: 38px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(180, 220, 255, 0.04) 0%,
    rgba(3, 10, 20, 0.35) 100%
  );
  border: 1px solid rgba(0, 200, 255, 0.12);
  box-shadow:
    inset 0 0 50px rgba(0, 200, 255, 0.08),
    0 0 80px rgba(0, 140, 255, 0.1),
    0 0 160px rgba(0, 100, 200, 0.06);
}

.entry-globe__wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(0, 240, 255, 0.35);
  border-bottom-color: rgba(255, 0, 234, 0.2);
  opacity: 0.6;
  pointer-events: none;
  animation: spinR3 12s linear infinite;
}

/* ── SPHÈRE ── */
.entry-globe__sphere {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: globeBreath 8s ease-in-out infinite alternate;
}

@keyframes globeBreath {
  0%   { box-shadow: 0 0 60px rgba(0, 160, 255, 0.35), 0 0 120px rgba(0, 80, 200, 0.15); }
  100% { box-shadow: 0 0 80px rgba(0, 180, 255, 0.5),  0 0 160px rgba(0, 100, 220, 0.25); }
}

/* ── COUCHE 1 : Surface Terre (texture NASA) ── */
.entry-globe__surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #010d1f;
  background-image: url('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg');
  background-repeat: repeat-x;
  background-size: 200% 100%;
  /* Terminateur d'ombre photoréaliste : lumière venant du haut-droit */
  box-shadow:
    inset -80px -50px 80px rgba(0, 0, 0, 0.97),
    inset -130px -80px 120px rgba(0, 0, 0, 0.9),
    inset 30px 15px 50px rgba(200, 230, 255, 0.25),
    inset 10px 5px 20px rgba(255, 255, 255, 0.1),
    inset 0 0 30px rgba(0, 180, 255, 0.15);
  animation: rotateGlobe 60s linear infinite;
}

/* ── COUCHE 2 : City Lights (côté nuit) ── */
.entry-globe__citylights {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 70% 60%,
    transparent 0%,
    transparent 30%,
    rgba(255, 200, 80, 0.03) 45%,
    rgba(255, 180, 60, 0.06) 55%,
    rgba(255, 160, 40, 0.04) 65%,
    rgba(255, 140, 30, 0.02) 80%,
    transparent 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: cityFlicker 4s ease-in-out infinite alternate;
}

@keyframes cityFlicker {
  0%   { opacity: 0.5; }
  100% { opacity: 0.8; }
}

/* ── COUCHE 3 : Nuages (texture NASA) ── */
.entry-globe__clouds {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background-image: url('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_clouds_1024.png');
  background-repeat: repeat-x;
  background-size: 200% 100%;
  mix-blend-mode: screen;
  opacity: 0.7;
  box-shadow:
    inset -80px -50px 80px rgba(0, 0, 0, 1),
    inset 30px 15px 60px rgba(255, 255, 255, 0.2);
  animation: rotateGlobe 80s linear infinite;
  pointer-events: none;
}

/* ── COUCHE 4 : Reflet spéculaire (soleil) ── */
.entry-globe__specular {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 35% 40% at 32% 28%,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(200, 230, 255, 0.12) 25%,
    rgba(150, 200, 255, 0.04) 50%,
    transparent 70%
  );
  pointer-events: none;
}

/* ── COUCHE 5 : Effet Fresnel (rim light) ── */
.entry-globe__fresnel {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 55%,
    rgba(80, 180, 255, 0.08) 65%,
    rgba(60, 160, 255, 0.15) 75%,
    rgba(40, 140, 255, 0.25) 85%,
    rgba(20, 120, 255, 0.35) 92%,
    rgba(0, 180, 255, 0.55) 100%
  );
  pointer-events: none;
}

/* ── COUCHE 6 : Atmosphère externe (glow bleuté) ── */
.entry-globe__atmosphere {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 52%,
    rgba(40, 140, 255, 0.0) 58%,
    rgba(50, 160, 255, 0.06) 65%,
    rgba(60, 180, 255, 0.1) 72%,
    rgba(70, 200, 255, 0.06) 82%,
    transparent 92%
  );
  box-shadow:
    inset 0 0 40px rgba(0, 150, 255, 0.08);
  pointer-events: none;
  animation: atmosphereShimmer 10s ease-in-out infinite alternate;
}

@keyframes atmosphereShimmer {
  0%   { opacity: 0.8; filter: brightness(1); }
  100% { opacity: 1;   filter: brightness(1.15); }
}

/* ── COUCHE 7 : Anneaux orbitaux ── */
.entry-globe__rings {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  transform-style: preserve-3d;
}

.entry-globe__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
}

.entry-globe__ring--1 {
  border-image: linear-gradient(
    135deg,
    rgba(0, 240, 255, 0.4) 0%,
    rgba(0, 240, 255, 0.05) 40%,
    rgba(0, 240, 255, 0.3) 70%,
    rgba(0, 240, 255, 0.05) 100%
  ) 1;
  border-width: 1.5px;
  border-style: solid;
  filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.3));
  transform: rotateX(70deg) rotateY(20deg);
  animation: spinR1 10s linear infinite;
}
.entry-globe__ring--2 {
  border-image: linear-gradient(
    45deg,
    rgba(0, 200, 255, 0.3) 0%,
    rgba(0, 200, 255, 0.02) 50%,
    rgba(0, 200, 255, 0.25) 100%
  ) 1;
  border-width: 1px;
  border-style: solid;
  filter: drop-shadow(0 0 3px rgba(0, 180, 255, 0.2));
  transform: rotateX(40deg) rotateY(60deg);
  animation: spinR2 15s linear infinite reverse;
}
.entry-globe__ring--3 {
  border-image: linear-gradient(
    90deg,
    rgba(255, 0, 234, 0.35) 0%,
    rgba(255, 0, 234, 0.03) 45%,
    rgba(255, 0, 234, 0.3) 80%,
    rgba(255, 0, 234, 0.03) 100%
  ) 1;
  border-width: 1px;
  border-style: solid;
  filter: drop-shadow(0 0 5px rgba(255, 0, 234, 0.25));
  transform: rotateX(80deg) rotateY(10deg);
  animation: spinR3 12s linear infinite;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .entry-globe__sphere { width: 220px; height: 220px; }
  .entry-globe__wrapper { padding: 26px; }
  .entry-globe__rings { inset: -36px; }
  .entry-globe__aura { width: 380px; height: 380px; }
  .entry-globe__aura--2 { width: 460px; height: 460px; }
  .entry-globe { opacity: 0.55; }
}
@media (max-width: 480px) {
  .entry-globe__sphere { width: 170px; height: 170px; }
  .entry-globe__wrapper { padding: 20px; }
  .entry-globe__rings { inset: -26px; }
  .entry-globe__aura { width: 280px; height: 280px; }
  .entry-globe__aura--2 { width: 340px; height: 340px; }
  .entry-globe { opacity: 0.4; }
}
.entry-gate__panel {
  position: relative;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 22px;
  padding: 32px;
  border-radius: 30px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: linear-gradient(180deg, rgba(7, 12, 26, 0.92), rgba(4, 8, 18, 0.96));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), inset 0 0 50px rgba(0, 240, 255, 0.06);
}

/* ── SNIPER BANNER ── */
.entry-ticker {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 0;
  padding: 16px 20px;
  border-top: 1px solid var(--carbon-light, #7a7a7a);
  border-bottom: 1px solid var(--carbon-light, #7a7a7a);
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: var(--carbon-dark, #000);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.04);
}
.entry-ticker__label {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 0;
  border: 1px solid var(--carbon-light, #7a7a7a);
  background: linear-gradient(145deg, var(--carbon-dark, #000) 0%, var(--carbon-mid, #2c2c2c) 50%, var(--carbon-dark, #000) 100%);
  color: var(--carbon-light, #7a7a7a);
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--carbon-light, #7a7a7a) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
}
.entry-ticker__viewport {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-inline: 2px;
}
.entry-ticker__viewport::before,
.entry-ticker__viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42px;
  z-index: 2;
  pointer-events: none;
}
.entry-ticker__viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--carbon-dark, #000), transparent);
}
.entry-ticker__viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--carbon-dark, #000), transparent);
}
.entry-ticker__track {
  display: flex;
  width: max-content;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  animation: tickerScroll 40s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.entry-ticker__text {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  padding: 0 22px;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(12px, 1.22vw, 15px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  color: transparent;
  background: linear-gradient(145deg, var(--carbon-light, #7a7a7a) 0%, var(--carbon-shine, #ffffff) 25%, var(--carbon-mid, #2c2c2c) 60%, var(--carbon-dark, #000) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none;
  filter: none;
}
@keyframes tickerScroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 768px) {
  .entry-ticker {
    gap: 10px;
    padding: 12px 14px;
    border-radius: 0;
  }

  .entry-ticker__text {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .entry-ticker__label {
    min-height: 36px;
    padding: 0 12px;
    font-size: 9px;
    letter-spacing: 1.6px;
  }
}

@media (max-width: 1024px) {
  .entry-gate {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 18px 14px 30px;
  }

  .entry-gate__panel {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
  }

  .entry-gate__hero {
    padding: 6px 2px 2px;
    max-width: 100%;
  }

  .entry-gate__eyebrow {
    font-size: 10px;
    letter-spacing: 1.4px;
    line-height: 1.5;
  }

  .entry-gate__hero h1 {
    font-size: clamp(26px, 6vw, 40px);
    line-height: 1.08;
    max-width: 12ch;
  }

  .carbon-royal-paragraph {
    font-size: 0.98rem;
    line-height: 1.68;
    margin-bottom: 16px;
    max-width: 62ch;
  }

  .entry-gate__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
  }

  .entry-gate__btn {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    font-size: 11px;
    text-align: center;
  }

  .entry-freeboard {
    gap: 16px;
    padding: 20px;
    border-radius: 24px;
  }

  .entry-freeboard__head {
    max-width: 72ch;
  }

  .entry-freeboard__head h2 {
    font-size: clamp(20px, 4.4vw, 28px);
  }

  .entry-freeboard__layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .entry-freeboard__card,
  .entry-freeboard__card--media {
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
  }

  .entry-freeboard__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .entry-freeboard__link {
    width: 100%;
  }

  .entry-freeboard__placeholder {
    min-height: 140px;
    padding: 18px;
  }

  .entry-ticker {
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 0;
    gap: 12px;
    align-items: stretch;
  }

  .entry-ticker__label {
    min-height: 38px;
    padding: 10px 12px;
    align-self: center;
  }

  .entry-ticker__viewport {
    min-height: 24px;
  }

  .entry-ticker__viewport::before,
  .entry-ticker__viewport::after {
    width: 22px;
  }

  .entry-globe {
    opacity: 0.18;
    transform: translate(-50%, -46%) scale(0.72);
  }
}

.entry-gate__eyebrow {
  margin-bottom: 14px;
  color: var(--mag);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.entry-gate__hero h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  margin-bottom: 16px;
}
.entry-gate__lead {
  max-width: 680px;
  color: rgba(255,255,255,0.76);
  font-size: 18px;
  line-height: 1.65;
}
.entry-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.entry-gate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  cursor: pointer;
  text-decoration: none;
}
.entry-gate__btn--primary {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(145deg, #e6e6e6 0%, #ffffff 20%, #c8c8c8 50%, #999999 100%);
  color: #1a1a1a;
}
.entry-gate__btn--ghost {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.entry-gate__themes {
  display: grid;
  gap: 14px;
}
.entry-freeboard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background:
    radial-gradient(circle at top right, rgba(0, 240, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
.entry-freeboard__head {
  display: grid;
  gap: 10px;
}
.entry-freeboard__label,
.entry-freeboard__card-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.82);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.entry-freeboard__head h2,
.entry-freeboard__card h3 {
  font-family: 'Orbitron', sans-serif;
  color: #fff;
}
.carbon-royal-h2 {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;

  color: #1a1a1a;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  
  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 20%, var(--carbon-mid) 50%, var(--carbon-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.4)) drop-shadow(0px -1px 4px rgba(255, 255, 255, 0.08));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.carbon-royal-eyebrow {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;

  color: #1a1a1a;
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;

  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 20%, var(--carbon-mid) 50%, var(--carbon-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.4)) drop-shadow(0px -1px 4px rgba(255, 255, 255, 0.08));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.carbon-royal-p {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;
  
  color: #1a1a1a;
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;

  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 20%, var(--carbon-mid) 50%, var(--carbon-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.4)) drop-shadow(0px -1px 4px rgba(255, 255, 255, 0.08));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.carbon-royal-h3 {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;
  
  color: #1a1a1a;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;

  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 20%, var(--carbon-mid) 50%, var(--carbon-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.4)) drop-shadow(0px -1px 4px rgba(255, 255, 255, 0.08));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.carbon-royal-tag {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;
  
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;

  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 20%, var(--carbon-mid) 50%, var(--carbon-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.4)) drop-shadow(0px -1px 4px rgba(255, 255, 255, 0.08));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.carbon-royal-link {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;
  
  color: #1a1a1a;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.05em;

  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 20%, var(--carbon-mid) 50%, var(--carbon-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.4)) drop-shadow(0px -1px 4px rgba(255, 255, 255, 0.08));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: filter 0.3s ease;
}
.carbon-royal-link:hover {
  filter: drop-shadow(0px 1px 2px rgba(255, 255, 255, 0.6)) drop-shadow(0px -1px 8px rgba(255, 255, 255, 0.2));
}
.entry-freeboard__head h2 {
  font-size: 24px;
  line-height: 1.2;
}
.entry-freeboard__head p,
.entry-freeboard__card p {
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.entry-freeboard__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.entry-freeboard__card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  min-height: 190px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(4, 12, 28, 0.56);
}
.entry-freeboard__card--media {
  min-height: 220px;
}
.entry-freeboard__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.entry-freeboard__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.entry-freeboard__link--contact {
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 72px;
  padding: 12px 18px;
  border-color: rgba(0, 240, 255, 0.24);
  background:
    radial-gradient(circle at left center, rgba(0, 240, 255, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), inset 0 0 22px rgba(0, 240, 255, 0.06);
}
.entry-freeboard__link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0, 240, 255, 0.12);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.entry-freeboard__link-copy {
  display: grid;
  gap: 3px;
}
.entry-freeboard__link-copy strong {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.entry-freeboard__link-copy small {
  color: rgba(255,255,255,0.68);
  font-size: 10px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.entry-freeboard__link:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.entry-freeboard__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 12px, transparent 12px, transparent 24px);
  color: rgba(255,255,255,0.5);
  text-align: center;
  line-height: 1.7;
  padding: 20px;
}

.entry-gate__themes-head {
  padding: 6px 2px 10px;
}
.entry-gate__themes-label {
  margin-bottom: 8px;
  color: rgba(255,255,255,0.52);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.entry-gate__themes-head h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
}
.entry-theme-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background: rgba(255,255,255,0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.entry-theme-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 255, 0.24);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.entry-theme-card--signature {
  background:
    radial-gradient(circle at top left, rgba(255, 0, 234, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border-color: rgba(255, 0, 234, 0.18);
}
.entry-theme-card--showroom {
  background:
    radial-gradient(circle at top right, rgba(0, 240, 255, 0.1), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border-color: rgba(0, 240, 255, 0.18);
}
.entry-theme-card--payment {
  min-height: 252px;
  padding: 28px;
  border-color: rgba(0, 240, 255, 0.4);
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(0, 240, 255, 0.16), rgba(0, 16, 36, 0.94) 58%, rgba(255, 255, 255, 0.05));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 0 42px rgba(0, 240, 255, 0.1);
  animation: paymentCardPulse 3.6s ease-in-out infinite;
}
.entry-theme-card--payment::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-100%);
  animation: paymentSweep 4.8s linear infinite;
  pointer-events: none;
}
.entry-theme-card--payment::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.26), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
.entry-theme-card--soft {
  border-color: rgba(255, 0, 234, 0.12);
  background: rgba(255, 0, 234, 0.04);
}
.entry-theme-card__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 240, 255, 0.12);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.entry-theme-card h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  margin-bottom: 10px;
}
.entry-theme-card__payment-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.entry-theme-card__payment-head h2 {
  margin-bottom: 0;
}
.entry-theme-card__payment-ping {
  flex-shrink: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}
.entry-theme-card__payment-points {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.entry-theme-card__payment-points span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.16);
  background: rgba(4, 12, 28, 0.58);
  color: rgba(255,255,255,0.86);
  font-size: 14px;
  line-height: 1;
}
.entry-theme-card p {
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}
.entry-theme-card__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.entry-theme-card__highlights span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.84);
  font-size: 13px;
  line-height: 1;
}
.entry-theme-card--signature .entry-theme-card__tag,
.entry-theme-card--signature .entry-theme-card__highlights span {
  border-color: rgba(255, 0, 234, 0.18);
}
.entry-theme-card--showroom .entry-theme-card__tag,
.entry-theme-card--showroom .entry-theme-card__highlights span {
  border-color: rgba(0, 240, 255, 0.18);
}
.entry-theme-card__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), #00b2ff);
  color: #00131a;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.18);
}
.entry-theme-card__cta:hover {
  box-shadow: 0 0 32px rgba(0, 240, 255, 0.28);
}
.entry-theme-card--payment .entry-theme-card__cta {
  width: 100%;
  min-height: 54px;
  margin-top: auto;
  background: linear-gradient(135deg, #b4fff8, var(--cyan) 45%, #00b2ff);
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.26), inset 0 -6px 12px rgba(255, 255, 255, 0.18);
  animation: paymentCtaGlow 2.8s ease-in-out infinite;
}
.entry-theme-card--payment .entry-theme-card__cta:hover {
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.34), inset 0 -6px 12px rgba(255, 255, 255, 0.18);
}

@keyframes paymentSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes paymentCardPulse {
  0%, 100% {
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), inset 0 0 42px rgba(0, 240, 255, 0.1);
  }
  50% {
    border-color: rgba(180, 255, 248, 0.62);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36), inset 0 0 54px rgba(0, 240, 255, 0.16), 0 0 28px rgba(0, 240, 255, 0.14);
  }
}

@keyframes paymentCtaGlow {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.26), inset 0 -6px 12px rgba(255, 255, 255, 0.18);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 42px rgba(0, 240, 255, 0.36), inset 0 -6px 12px rgba(255, 255, 255, 0.22);
  }
}

.interface-back-btn {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 11000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  border-radius: 999px;
  background: rgba(6, 12, 24, 0.78);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.interface-back-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.interface-back-btn:hover {
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.18);
}
.interface-back-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.12);
  font-size: 16px;
  line-height: 1;
}

/* The actual 3D Room */
.room {
  position: absolute;
  width: 100vw;
  height: 100vh;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ceiling */
.ceiling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  display: flex;
  justify-content: space-around;
  background: var(--mag);
  /* Éclairage violet zénithal baignant le haut du cockpit */
  box-shadow: 0 0 60px 30px var(--mag), 0 0 150px 80px rgba(255, 0, 234, 0.3);
  z-index: 100;
  transform: none; /* Retrait de la rotation 3D qui causait le bug visuel au centre */
}
.neon-strip {
  width: 15%;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 20px 5px #fff;
}
.neon-strip.left, .neon-strip.right { width: 5%; opacity: 0.7; }

/* GLOBE (Center) */
.center-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-400px); /* Éloigne la planète du premier plan */
  z-index: 10;
}

/* Contour vitrée ajouté de toutes pièces autour de la planète */
.hologram-wrapper {
  position: relative;
  padding: 40px; /* Espace autour du globe */
  border-radius: 50%;
  /* Effet de vitre avec un léger dégradé */
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05) 0%, rgba(3, 10, 20, 0.5) 100%);
  border: 1px solid rgba(0, 240, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 
    inset 0 0 50px rgba(0, 240, 255, 0.2), 
    0 0 80px rgba(255, 0, 234, 0.2);
}

.hologram-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--mag);
  opacity: 0.6;
  pointer-events: none;
  animation: spinR3 10s linear infinite;
}

@keyframes spinR3 {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

.globe {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  transform-style: preserve-3d;
  /* Halo atmosphérique spatial extrêmement réaliste */
  box-shadow: 
    0 0 50px rgba(0, 180, 255, 0.5), 
    0 0 100px rgba(0, 100, 255, 0.3), 
    0 0 20px rgba(255, 255, 255, 0.2);
}
.globe-surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #021a36;
  /* Texture haute résolution NASA mappée sur sphère */
  background-image: url('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_2048.jpg');
  background-repeat: repeat-x;
  background-size: 200% 100%;
  /* Volume 3D Photorealiste : soleil vers le haut gauche, ligne de terminateur d'ombre en bas à droite */
  box-shadow: 
    inset -60px -40px 60px rgba(0, 0, 0, 0.95),
    inset -100px -60px 100px rgba(0, 0, 0, 0.8),
    inset 20px 10px 40px rgba(255, 255, 255, 0.5),
    inset 0 0 25px rgba(0, 240, 255, 0.3);
  animation: rotateGlobe 60s linear infinite;
}
.globe-glow {
  /* Calque des nuages (Clouds) photoréaliste */
  position: absolute;
  inset: -1px; /* Légèrement englobant pour simuler l'épaisseur de l'atmosphère */
  border-radius: 50%;
  background-image: url('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_clouds_1024.png');
  background-repeat: repeat-x;
  background-size: 200% 100%;
  mix-blend-mode: screen; /* Le noir devient transparent, les nuages blancs restent */
  opacity: 0.8;
  /* Reflets spéculaires et ombres sur l'atmosphère */
  box-shadow: 
    inset -60px -40px 60px rgba(0, 0, 0, 1),
    inset 25px 15px 50px rgba(255, 255, 255, 0.3);
  animation: rotateGlobe 80s linear infinite; /* Les nuages tournent à une vitesse légèrement différente */
  pointer-events: none;
}
@keyframes rotateGlobe {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}
.globe-rings {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  transform-style: preserve-3d;
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--cyan-glow);
}
.r1 { transform: rotateX(70deg) rotateY(20deg); animation: spinR1 10s linear infinite; }
.r2 { transform: rotateX(40deg) rotateY(60deg); animation: spinR2 15s linear infinite reverse; }
.r3 { transform: rotateX(80deg) rotateY(10deg); border-color: var(--mag-glow); animation: spinR3 12s linear infinite; }

@keyframes spinR1 { to { transform: rotateX(70deg) rotateY(380deg); } }
@keyframes spinR2 { to { transform: rotateX(40deg) rotateY(420deg); } }
@keyframes spinR3 { to { transform: rotateZ(360deg) rotateX(80deg) rotateY(10deg); } }

/* SCREENS LAYER */
.screens-layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.glass-panel {
  position: absolute;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.1), 0 0 15px rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.glass-panel::before {
  content: ''; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  position: absolute;
}
.glass-panel::after {
  content: ''; bottom: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--mag), transparent);
  position: absolute;
}

.screen-top {
  top: 50px;
  left: 50%;
  width: 500px;
  height: 100px;
  transform: translateX(-50%) translateZ(-100px) rotateX(-10deg);
  text-align: center;
  justify-content: center;
}
.brand-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 10px var(--cyan);
}
.brand-subtitle {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--mag);
}
.stripe-launch-btn {
  margin: 10px auto 0;
  padding: 10px 18px;
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 999px;
  background: rgba(2, 8, 20, 0.7);
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}
.stripe-launch-btn:hover {
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
  background: rgba(5, 18, 40, 0.9);
}

.screen-left-1 {
  top: 150px; left: 5%; width: 350px; height: 300px;
  transform: translateZ(-200px) rotateY(25deg);
}
.screen-left-2 {
  top: 250px; left: 2%; width: 250px; height: 200px;
  transform: translateZ(-50px) rotateY(40deg);
  border-color: var(--mag-glow);
}
.screen-right-1 {
  top: 150px; right: 5%; width: 350px; height: 300px;
  transform: translateZ(-200px) rotateY(-25deg);
}
.screen-right-2 {
  top: 250px; right: 2%; width: 250px; height: 200px;
  transform: translateZ(-50px) rotateY(-40deg);
}

/* Internal Screen UI Elements */
.data-header {
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  border-bottom: 1px solid var(--cyan-glow);
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.map-grid {
  height: 120px;
  background-image: radial-gradient(#00f0ff 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.4;
  margin-bottom: 10px;
}
.chart-bars {
  display: flex; align-items: flex-end; gap: 10px; height: 100px;
}
.bar {
  flex: 1; background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  opacity: 0.8;
}
.bar--30 { height: 30%; }
.bar--40 { height: 40%; }
.bar--60 { height: 60%; }
.bar--80 { height: 80%; }
.bar--90 { height: 90%; }

.target-circle {
  width: 150px; height: 150px; border: 2px dashed var(--mag);
  border-radius: 50%; margin: 10px auto; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.crosshair {
  width: 100%; height: 1px; background: var(--mag); position: absolute;
}
.crosshair::before {
  content: ''; width: 1px; height: 100%; background: var(--mag);
  position: absolute; top: -75px; left: 75px;
}
.readout-l2 { font-family: 'Share Tech Mono'; color: var(--mag); }

.sine-wave {
  height: 80px; margin-bottom: 15px; border: 1px solid var(--cyan-glow);
}
.wave-path { fill: none; stroke: var(--cyan); stroke-width: 1; }

.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.data-box { background: rgba(0,0,0,0.5); border: 1px solid var(--glass-border); padding: 5px; font-family: 'Share Tech Mono'; font-size: 12px; }
.cy { color: var(--cyan); font-weight: bold; font-size: 16px; }

.hex-grid { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 15px; }
.hex { width: 30px; height: 35px; background: var(--cyan-glow); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0.2; }
.hex.on { opacity: 0.8; background: var(--mag); }

.text-logs { font-family: 'Share Tech Mono'; font-size: 11px; line-height: 1.5; color: var(--cyan-glow); }

/* BOTTOM CONSOLES */
.consoles-layer {
  position: absolute;
  bottom: -50px;
  width: 100vw;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transform-style: preserve-3d;
  transform: rotateX(40deg);
}

.desk-panel {
  background: linear-gradient(180deg, #1b2035, #080a13);
  border-top: 3px solid var(--cyan);
  box-shadow: 0 -10px 40px rgba(0, 240, 255, 0.3), inset 0 5px 20px rgba(255,255,255,0.1);
  height: 250px;
  transform-style: preserve-3d;
}

.desk-left {
  width: 300px; transform: translateZ(-50px) rotateY(15deg) skewX(-10deg);
  border-right: 2px solid var(--mag);
  display: flex; padding: 20px; gap: 20px;
}
.desk-center {
  width: 700px; transform: translateZ(60px);
  z-index: 5;
  display: flex; flex-direction: row; padding: 15px; gap: 15px;
  justify-content: space-between; align-items: stretch;
}
.desk-right {
  width: 300px; transform: translateZ(-50px) rotateY(-15deg) skewX(10deg);
  border-left: 2px solid var(--mag);
  display: flex; flex-direction: column; padding: 20px; gap: 20px;
}

/* Buttons / Switches */
.button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.button-grid.mini { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.btn { width: 40px; height: 30px; background: #222; border-radius: 4px; box-shadow: inset 0 0 5px #000; border-bottom: 3px solid #111; cursor: pointer; transition: 0.1s; }
.btn:active { transform: translateY(5px); border-bottom-width: 0; box-shadow: inset 0 3px 5px rgba(0,0,0,0.8); }
.btn.cyan { background: var(--cyan); box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), inset 2px 2px 5px rgba(255,255,255,0.5), 0 0 10px var(--cyan); }
.btn.magenta { background: var(--mag); box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), inset 2px 2px 5px rgba(255,255,255,0.5), 0 0 10px var(--mag); }
.btn.round { 
  width: 60px; 
  height: 60px; 
  border-radius: 50%; 
  border: 4px solid #111;
  position: relative;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.round::after {
  content: '';
  position: absolute;
  top: 5px; left: 10px; right: 10px; height: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
  border-radius: 50px 50px 0 0;
  pointer-events: none;
}
.btn.round:hover {
  filter: brightness(1.3);
  box-shadow: inset -2px -2px 5px rgba(0,0,0,0.5), inset 2px 2px 5px rgba(255,255,255,0.5), 0 0 25px currentColor;
}

.fader { width: 30px; height: 150px; background: #000; border-radius: 15px; position: relative; border: 1px solid #333; }
.fader.horizontal { width: 150px; height: 30px; }
.fader-knob { width: 30px; height: 40px; background: linear-gradient(to bottom, #444, #222); position: absolute; bottom: 20px; border-radius: 5px; border-top: 2px solid var(--mag); box-shadow: 0 5px 10px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.2); }
.fader.horizontal .fader-knob { width: 40px; height: 30px; bottom: 0; left: 20px; border-top: none; border-left: 2px solid var(--cyan); background: linear-gradient(to right, #444, #222); }

/* --- MEGA CONSOLE (CENTER MAIN PANEL) --- */
.mega-console {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: stretch;
  /* Effet Tablette Galactique Transparente / Vitrée */
  background: rgba(10, 15, 30, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-top: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  padding: 15px;
  border-radius: 20px;
  box-shadow: 
    inset 0 0 30px rgba(0, 240, 255, 0.1), 
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 240, 255, 0.2);
}

.mc-section {
  display: flex;
  flex-direction: column;
}

.mc-left {
  width: 140px;
  border-right: 1px solid rgba(0, 240, 255, 0.2);
  padding-right: 15px;
  justify-content: center;
}

.grid-switches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sq-btn {
  width: 32px;
  height: 32px;
  background: #111;
  border-radius: 4px;
  border: 1px solid #000;
  border-bottom: 3px solid #050505;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.1);
  cursor: pointer;
}
.sq-btn.out { background: #1a1a1a; }
.sq-btn.mag-lit {
  background: var(--mag);
  box-shadow: 0 0 10px var(--mag), inset 0 2px 5px rgba(255,255,255,0.4);
  border-bottom-color: #88007a;
}
.sq-btn.mag-lit.dimmed {
  background: #5c004d;
  box-shadow: none;
  border-bottom-color: #33002b;
}

/* CENTER RADAR HOLO DISPLAY */
.mc-main {
  flex: 1;
  padding: 0 20px;
}
.holo-display {
  /* Écran central lui-même transparent/glassy au lieu d'opaque */
  background: rgba(2, 6, 17, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: 12px;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9), inset 0 0 15px rgba(0, 240, 255, 0.1);
}
.holo-display::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 240, 255, 0.03) 3px, transparent 4px);
  pointer-events: none;
}

.hd-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 240, 255, 0.3);
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-family: 'Share Tech Mono', monospace;
}
.hd-time {
  color: var(--cyan);
  font-size: 20px;
  text-shadow: 0 0 8px var(--cyan);
}
.hd-badge {
  background: rgba(0, 240, 255, 0.2);
  color: var(--cyan);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--cyan);
  font-size: 12px;
}

.hd-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.hd-data-blocks, .hd-side-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.d-blk {
  width: 50px;
  height: 40px;
  border: 1px dashed rgba(0, 240, 255, 0.4);
  background: rgba(0,0,0,0.5);
}
.pill-btn {
  width: 60px; height: 25px;
  border: 1px solid #333;
  border-radius: 12px;
  background: #111;
}
.pill-btn.lit {
  border-color: var(--mag);
  box-shadow: 0 0 10px rgba(255,0,234, 0.5);
}

.hd-radar {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 10px var(--cyan), inset 0 0 10px var(--cyan);
}
.radar-ring.outer { width: 100%; height: 100%; border-style: dashed; animation: spin 10s linear infinite; }
.radar-ring.inner { width: 60%; height: 60%; animation: spin 5s linear infinite reverse; }
.radar-core { width: 15%; height: 15%; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 15px var(--cyan); }
.radar-cross { position: absolute; width: 100%; height: 1px; background: rgba(0,240,255,0.4); }
.radar-cross::after { content: ''; position: absolute; left: 50%; top: -50px; height: 100px; width: 1px; background: rgba(0,240,255,0.4); }

.hd-bottom-leds {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 240, 255, 0.1);
}
.led-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #111;
}
.led-dot.cyan {
  background: var(--cyan);
  box-shadow: 0 0 8px 2px rgba(0,240,255, 0.8);
}

/* RIGHT CONSOLE CONTROLS */
.mc-right {
  width: 140px;
  border-left: 1px solid rgba(0, 240, 255, 0.2);
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.mech-throttle {
  width: 40px;
  height: 100px;
  background: #000;
  border-radius: 5px;
  border: 2px solid #333;
  position: relative;
  display: flex;
  justify-content: center;
}
.throttle-track {
  width: 10px;
  height: 80%;
  background: #111;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: inset 0 5px 10px #000;
  position: relative;
}
.throttle-handle {
  width: 30px;
  height: 20px;
  background: #888;
  border-radius: 3px;
  position: absolute;
  left: -10px;
  top: 60%;
  border-bottom: 4px solid #444;
  cursor: pointer;
}
.mech-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.rocker-sw {
  width: 30px;
  height: 40px;
  background: #111;
  border: 2px solid #222;
  border-top: 15px solid #2a2a2a;
  border-radius: 2px;
}
.big-red-btn {
  width: 40px; height: 40px; border-radius: 5px;
  background: radial-gradient(circle at 30% 30%, #ff4d4d, #aa0000);
  border: 2px solid #222;
  border-bottom: 5px solid #550000;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
  cursor: pointer;
}

.stripe-funnel-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 13050;
  transition: opacity 0.35s ease;
}
.stripe-funnel-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.stripe-funnel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 14, 0.78);
  backdrop-filter: blur(10px);
}
.contact-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 13100;
  transition: opacity 0.35s ease;
}
.contact-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.contact-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 12, 0.82);
  backdrop-filter: blur(16px);
}
.contact-overlay__panel {
  position: relative;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 30px;
  border-radius: 30px;
  border: 1px solid rgba(0, 240, 255, 0.18);
  background:
    radial-gradient(circle at top right, rgba(0, 240, 255, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255, 0, 234, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(8, 15, 30, 0.98), rgba(4, 8, 18, 0.97));
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.54), inset 0 0 46px rgba(0, 240, 255, 0.07);
}
.contact-overlay__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}
.contact-overlay__eyebrow {
  margin-bottom: 10px;
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.contact-overlay__head h2 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 1px;
}
.contact-overlay__intro {
  max-width: 760px;
  margin-top: 10px;
  color: rgba(255,255,255,0.74);
  line-height: 1.75;
}
.contact-overlay__close {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.contact-overlay__body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 22px;
}
.contact-aside,
.contact-form {
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-radius: 26px;
  background: rgba(7, 12, 26, 0.84);
  box-shadow: inset 0 0 28px rgba(0, 240, 255, 0.05);
}
.contact-aside {
  display: grid;
  gap: 14px;
  padding: 20px;
}
.contact-channel-switch {
  display: grid;
  gap: 12px;
}
.contact-channel-switch__item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 24px rgba(255,255,255,0.03);
}
.contact-channel-switch__item--primary {
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.1), rgba(255,255,255,0.04));
  border-color: rgba(0, 240, 255, 0.16);
}
.contact-channel-switch__item--secondary {
  background: linear-gradient(180deg, rgba(255, 0, 234, 0.08), rgba(255,255,255,0.04));
  border-color: rgba(255, 0, 234, 0.14);
}
.contact-channel-switch__tag,
.contact-form__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.contact-channel-switch__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
.contact-channel-switch__item h3,
.contact-form__head h3 {
  margin: 0 0 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 19px;
}
.contact-channel-switch__item p,
.contact-form__head p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}
.contact-channel-switch__points {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.contact-channel-switch__points li {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
.contact-channel-switch__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.contact-channel-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 234, 0.24);
  background: rgba(255, 0, 234, 0.08);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-channel-switch__link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 0, 234, 0.42);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.contact-aside__card,
.contact-aside__mini-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
}
.contact-aside__card {
  padding: 18px;
}
.contact-aside__card h3 {
  margin: 0 0 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
}
.contact-aside__card p {
  margin: 0;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.contact-aside__label {
  margin: 0 0 8px;
  color: var(--mag);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.contact-aside__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.contact-aside__mini-card {
  display: grid;
  gap: 6px;
  padding: 16px;
}
.contact-aside__mini-card span {
  color: rgba(255,255,255,0.56);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
}
.contact-aside__mini-card strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}
.contact-aside__card--note {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
}
.contact-aside__external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 14px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.24);
  background: rgba(0, 240, 255, 0.08);
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-aside__external-link:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 240, 255, 0.4);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}
.contact-form {
  padding: 24px;
}
.contact-form__head {
  margin-bottom: 18px;
}
.contact-form__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.contact-form__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background: rgba(0, 240, 255, 0.06);
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.contact-form label {
  display: grid;
  gap: 8px;
}
.contact-form label span {
  color: rgba(255,255,255,0.76);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  padding: 14px 16px;
  font: inherit;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(0, 240, 255, 0.36);
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.08);
  background: rgba(255,255,255,0.06);
}
.contact-form textarea {
  resize: vertical;
  min-height: 170px;
}
.contact-form__message {
  margin-top: 16px;
}
.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.contact-form__status {
  margin: 0;
  flex: 1;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
}
.contact-form__status[data-state="success"] {
  color: #8cffc9;
}
.contact-form__status[data-state="error"] {
  color: #ff9ea7;
}
.contact-form__submit {
  min-width: 220px;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  padding: 0 24px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.96), rgba(255, 0, 234, 0.86));
  color: #02111b;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.contact-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.38);
}
.contact-form__submit:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}
.stripe-funnel-panel {
  position: relative;
  width: min(1080px, calc(100vw - 40px));
  max-height: calc(100vh - 50px);
  overflow: auto;
  padding: 28px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(8, 15, 30, 0.97), rgba(4, 8, 18, 0.96));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 45px rgba(0, 240, 255, 0.08);
}
.stripe-funnel-panel__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.stripe-funnel-panel__eyebrow {
  margin-bottom: 8px;
  color: var(--mag);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.stripe-funnel-panel__head h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
}
.stripe-funnel-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}
.stripe-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.stripe-step {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.62);
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}
.stripe-step.is-active,
.stripe-step.is-complete {
  color: var(--cyan);
  border-color: rgba(0, 240, 255, 0.28);
  box-shadow: inset 0 0 16px rgba(0, 240, 255, 0.08);
}
.stripe-funnel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 22px;
}
.stripe-offer-card,
.stripe-payment-card,
.mobile-checkout-card {
  border: 1px solid rgba(0, 240, 255, 0.16);
  border-radius: 24px;
  background: rgba(7, 12, 26, 0.82);
  box-shadow: inset 0 0 28px rgba(0, 240, 255, 0.05);
}
.stripe-offer-card {
  padding: 24px;
}
.stripe-offer-card__badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 0, 234, 0.12);
  color: var(--mag);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.stripe-offer-card h3,
.stripe-step-copy h3,
.mobile-checkout-card h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.stripe-offer-card p,
.stripe-step-copy p,
.mobile-checkout-card p {
  color: rgba(255,255,255,0.75);
}
.stripe-offer-card__stats,
.mobile-checkout-card__rows {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.stripe-offer-card__stats div,
.mobile-checkout-card__rows div,
.stripe-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.stripe-offer-card__stats span,
.mobile-checkout-card__rows span,
.stripe-summary span,
.stripe-step-copy__label {
  color: rgba(255,255,255,0.52);
}

.mobile-command-interface,
.mobile-command-overlay {
  display: none;
}
.stripe-payment-card {
  padding: 22px;
}
.stripe-summary {
  display: grid;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.stripe-summary__items {
  display: grid;
  gap: 12px;
}

.stripe-summary__meta {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.55;
}
.stripe-summary__total strong {
  font-size: 24px;
  color: #fff;
}
.stripe-fields {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}
.stripe-fields label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}
.stripe-fields input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.stripe-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stripe-live-config {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 179, 71, 0.25);
  background: rgba(255, 179, 71, 0.08);
  color: #ffd28a;
  font-size: 13px;
  line-height: 1.5;
}
.stripe-live-config.is-ready {
  border-color: rgba(0, 240, 255, 0.26);
  background: rgba(0, 240, 255, 0.08);
  color: #9af7ff;
}
.stripe-payment-choices {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(0, 240, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.stripe-payment-choices__label {
  color: rgba(255,255,255,0.58);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.stripe-payment-choices__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.stripe-payment-choices__note {
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  line-height: 1.6;
}
.stripe-pay-option {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 100%;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}
.stripe-pay-option--lemon {
  border-color: rgba(0, 240, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.06);
}
.stripe-pay-option__head {
  display: grid;
  gap: 6px;
}
.stripe-pay-option__eyebrow {
  margin: 0;
  color: rgba(154, 247, 255, 0.84);
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.stripe-pay-option h4 {
  margin: 0;
  color: #fff;
  font-size: 18px;
}
.stripe-pay-option__text {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.6;
}
.stripe-pay-option__button {
  width: 100%;
}
.stripe-payment-rules {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}
.stripe-payment-rules__title {
  margin: 0;
  color: #9af7ff;
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.stripe-payment-rules__item {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  line-height: 1.65;
}
.stripe-primary-btn,
.stripe-secondary-btn,
.stripe-mobile-btn {
  min-height: 50px;
  border-radius: 16px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  cursor: pointer;
}
.stripe-primary-btn,
.stripe-mobile-btn {
  border: 0;
  background: linear-gradient(135deg, var(--cyan), #00b2ff);
  color: #00131a;
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
}
.stripe-secondary-btn {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
}
.mobile-checkout-card {
  width: 95%;
  max-width: 420px;
  padding: 24px;
}
.mobile-checkout-card__eyebrow {
  margin-bottom: 10px;
  color: var(--mag);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.stripe-mobile-btn {
  width: 100%;
  margin-top: 20px;
}
.stripe-launch-btn.is-live,
.stripe-mobile-btn.is-live,
.big-red-btn.is-live {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.32), 0 0 16px rgba(0, 255, 170, 0.16);
}
@keyframes spin { 100% { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .room {
    display: none !important;
  }

  .mobile-command-interface {
    position: relative;
    z-index: 90;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 108px 20px 42px;
  }

  .mobile-command-interface__hero,
  .mobile-command-interface__console {
    width: min(680px, 100%);
    margin: 0 auto;
    border-radius: 28px;
    border: 1px solid rgba(0, 240, 255, 0.12);
    background: linear-gradient(180deg, rgba(8, 14, 28, 0.88), rgba(4, 8, 18, 0.94));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 0 36px rgba(0, 240, 255, 0.05);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .mobile-command-interface__hero {
    position: relative;
    overflow: hidden;
    padding: 24px;
  }

  .mobile-command-interface__orb {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(0, 240, 255, 0.28) 34%, rgba(0,0,0,0) 70%);
    box-shadow: 0 0 36px rgba(0, 240, 255, 0.22);
  }

  .mobile-command-interface__eyebrow {
    margin-bottom: 12px;
    color: var(--mag);
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .mobile-command-interface__hero h2 {
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(28px, 6vw, 44px);
    line-height: 1.02;
  }

  .mobile-command-interface__hero p:last-child {
    max-width: 520px;
    color: rgba(255,255,255,0.76);
    line-height: 1.6;
  }

  .mobile-command-interface__console {
    padding: 22px;
  }

  .mobile-command-interface__screen {
    position: relative;
    min-height: 220px;
    margin-bottom: 20px;
    border-radius: 24px;
    border: 1px solid rgba(0, 240, 255, 0.14);
    background: linear-gradient(180deg, rgba(12, 20, 40, 0.72), rgba(7, 12, 22, 0.84));
    overflow: hidden;
  }

  .mobile-command-interface__screen-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 0;
    color: rgba(255,255,255,0.6);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }

  .mobile-command-interface__screen-grid {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.14;
  }

  .mobile-command-interface__screen-ring {
    position: absolute;
    inset: 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 0, 234, 0.18);
    box-shadow: inset 0 0 34px rgba(0, 240, 255, 0.08);
  }

  .mobile-command-deck {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  .mobile-command-deck__left {
    display: grid;
    grid-template-columns: repeat(3, 46px);
    gap: 10px;
    align-items: center;
  }

  .mobile-command-square {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 0, 234, 0.42), rgba(130, 18, 120, 0.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 18px rgba(255, 0, 234, 0.12);
    cursor: pointer;
  }

  .mobile-command-square.is-active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 24px rgba(255, 0, 234, 0.22);
  }

  .mobile-command-deck__labels {
    display: grid;
    gap: 8px;
    color: rgba(255,255,255,0.7);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  .mobile-command-launch {
    grid-column: 1 / -1;
    min-height: 56px;
    padding: 0 16px;
    border: 1px solid rgba(136, 247, 255, 0.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(136, 247, 255, 0.16), rgba(255, 0, 234, 0.12));
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 26px rgba(0, 240, 255, 0.08);
  }

  .mobile-command-overlay {
    position: fixed;
    inset: 0;
    z-index: 13040;
  }

  .mobile-command-overlay[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-command-overlay[aria-hidden="false"] {
    display: block;
  }

  .mobile-command-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .mobile-command-overlay__panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 720px);
    max-height: min(82vh, 760px);
    margin: 24px auto;
    padding: 20px;
    border-radius: 28px;
    border: 1px solid rgba(0, 240, 255, 0.14);
    background: linear-gradient(180deg, rgba(8, 14, 28, 0.84), rgba(4, 8, 18, 0.94));
    box-shadow: 0 24px 70px rgba(0,0,0,0.42);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    overflow: hidden;
  }

  .mobile-command-overlay__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .mobile-command-overlay__eyebrow {
    margin-bottom: 10px;
    color: rgba(255,255,255,0.54);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .mobile-command-overlay__head h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(24px, 5vw, 34px);
    line-height: 1.05;
  }

  .mobile-command-overlay__close {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mobile-command-overlay__screen {
    position: relative;
    min-height: 340px;
    max-height: calc(82vh - 140px);
    border-radius: 24px;
    border: 1px solid rgba(0,240,255,0.14);
    background: linear-gradient(180deg, rgba(10, 20, 42, 0.44), rgba(6, 12, 24, 0.66));
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 240, 255, 0.08);
  }

  .mobile-command-overlay__scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.18));
    background-size: 100% 4px;
    opacity: 0.22;
    pointer-events: none;
  }

  .mobile-command-overlay__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
    padding: 20px;
  }

  .mobile-command-overlay__label {
    color: var(--cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  .mobile-command-overlay__ticker {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px;
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
  }

  .mobile-command-overlay__ticker p {
    margin-bottom: 12px;
    color: rgba(255,255,255,0.82);
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    animation: mobileTicker 18s linear infinite;
  }

  .entry-gate__panel {
    grid-template-columns: 1fr;
  }

  .stripe-funnel-panel {
    width: min(100vw - 24px, 1080px);
    padding: 18px;
  }

  .stripe-funnel-body,
  .stripe-steps,
  .stripe-actions {
    grid-template-columns: 1fr;
  }

  .stripe-payment-choices__buttons {
    grid-template-columns: 1fr;
  }

  .entry-theme-card--payment {
    min-height: 0;
    padding: 24px;
  }

  .entry-theme-card__highlights span {
    font-size: 12px;
  }

  .entry-theme-card__payment-head {
    flex-direction: column;
  }

  .entry-theme-card__payment-ping {
    align-self: flex-start;
  }

  .entry-gate__actions {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .entry-gate {
    padding: 10px 10px 22px;
  }

  .entry-gate__panel {
    padding: 14px;
    gap: 14px;
    border-radius: 20px;
  }

  .entry-gate__hero {
    padding: 2px 0 0;
  }

  .entry-gate__eyebrow {
    margin-bottom: 10px;
    font-size: 9px;
    letter-spacing: 1.1px;
  }

  .entry-gate__hero h1 {
    max-width: 100%;
    font-size: clamp(21px, 8.2vw, 31px);
    line-height: 1.06;
  }

  .carbon-royal-paragraph {
    font-size: 0.92rem;
    line-height: 1.62;
    margin-bottom: 14px;
  }

  .entry-gate__actions {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }

  .entry-gate__btn {
    min-height: 48px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 1.2px;
  }

  .entry-freeboard {
    padding: 14px;
    border-radius: 20px;
  }

  .entry-freeboard__head {
    gap: 8px;
  }

  .entry-freeboard__head h2 {
    font-size: 18px;
  }

  .entry-freeboard__head p,
  .entry-freeboard__card p {
    font-size: 0.9rem;
    line-height: 1.58;
  }

  .entry-freeboard__layout,
  .entry-freeboard__links {
    grid-template-columns: 1fr;
  }

  .entry-freeboard__card,
  .entry-freeboard__card--media {
    padding: 14px;
    gap: 10px;
  }

  .entry-freeboard__card h3 {
    font-size: 15px;
    line-height: 1.3;
  }

  .entry-freeboard__placeholder {
    min-height: 120px;
    font-size: 14px;
  }

  .entry-ticker {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 10px 8px;
    border-radius: 0;
  }

  .entry-ticker__label {
    width: 100%;
    justify-content: flex-start;
    min-height: 32px;
    padding: 0 10px;
    font-size: 8px;
    letter-spacing: 1.3px;
  }

  .entry-ticker__viewport {
    min-height: 20px;
  }

  .entry-ticker__viewport::before,
  .entry-ticker__viewport::after {
    width: 12px;
  }

  .entry-ticker__text {
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .entry-ticker__text::before {
    left: 4px;
  }

  .entry-globe {
    opacity: 0.12;
    transform: translate(-50%, -38%) scale(0.58);
  }

  .mobile-command-interface {
    padding: 96px 14px 28px;
  }

  .mobile-command-interface__hero,
  .mobile-command-interface__console,
  .mobile-command-overlay__panel {
    width: 100%;
  }

  .mobile-command-deck {
    grid-template-columns: 1fr;
  }

  .mobile-command-deck__left {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-command-overlay__panel {
    margin-top: 74px;
    padding: 16px;
  }

  .mobile-command-overlay__screen {
    min-height: 280px;
  }
}

@keyframes mobileTicker {
  0%, 8% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(-22px); }
  75% { transform: translateY(-34px); }
  100% { transform: translateY(0); }
}

/* ========== MATRIX "QUI SOMMES-NOUS" — DEVANT LE GLOBE ========== */

/* PC : fixed centré devant le globe, non-bloquant */
.matrix-holo {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  width: 480px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.matrix-holo.is-active {
  opacity: 1;
  visibility: visible;
}

.matrix-holo__mask {
  position: relative;
  max-height: 400px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 85%, transparent 100%);
}

.matrix-holo__text {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  line-height: 1.9;
  color: #a8a8a8;
  text-shadow:
    0 0 3px rgba(140, 140, 140, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.8);
  text-align: center;
  transform: translateY(420px);
  animation: matrixScroll 100s linear forwards;
  animation-play-state: paused;
}

.matrix-holo.is-active .matrix-holo__text {
  animation-play-state: running;
}

.matrix-holo__text span {
  display: block;
}

@keyframes matrixScroll {
  0%   { transform: translateY(420px); }
  100% { transform: translateY(-280%); }
}

/* Hover tooltip sur bouton violet PC */
.sq-btn-about {
  position: relative;
  cursor: pointer;
}

.sq-btn-about::after {
  content: 'Qui sommes-nous';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(4, 8, 18, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.18);
  color: rgba(0, 240, 255, 0.6);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sq-btn-about:hover::after {
  opacity: 1;
}

/* Hover tooltip sur bouton Mentions Légales PC */
.sq-btn-mentions {
  position: relative;
  cursor: pointer;
}

.sq-btn-mentions::after {
  content: 'Mentions Légales';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(4, 8, 18, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.18);
  color: rgba(0, 240, 255, 0.6);
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.sq-btn-mentions:hover::after {
  opacity: 1;
}

/* MENTIONS LEGALES — Panel défilant */
.mentions-holo {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 110;
  width: 480px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.mentions-holo.is-active {
  opacity: 1;
  visibility: visible;
}

.mentions-holo__mask {
  position: relative;
  max-height: 400px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 85%, transparent 100%);
}

.mentions-holo__text {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  font-family: 'Share Tech Mono', monospace;
  font-size: 16px;
  line-height: 1.9;
  color: #c8a84e;
  text-shadow:
    0 0 3px rgba(255, 180, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.8);
  text-align: center;
  transform: translateY(420px);
  animation: mentionsScroll 200s linear forwards;
  animation-play-state: paused;
}

.mentions-holo.is-active .mentions-holo__text {
  animation-play-state: running;
}

.mentions-holo__text span {
  display: block;
}

@keyframes mentionsScroll {
  0%   { transform: translateY(420px); }
  100% { transform: translateY(-280%); }
}

/* Bulle engagement contractuel Stripe */
.stripe-engagement-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 180, 0, 0.06);
  border: 1px solid rgba(255, 180, 0, 0.18);
}

.stripe-engagement-bubble__icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.stripe-engagement-bubble__text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 180, 0, 0.7);
  margin: 0;
}

/* Mobile : matrix en fixed centré */
@media (max-width: 1024px) {
  .matrix-holo {
    top: 45%;
    width: min(360px, 88vw);
    z-index: 200;
  }

  .matrix-holo__mask {
    max-height: 52vh;
    border-radius: 22px;
    border: 1px solid rgba(0, 240, 255, 0.12);
    background: rgba(2, 4, 10, 0.85);
    backdrop-filter: blur(10px);
    padding: 18px;
  }

  .matrix-holo__text {
    font-size: 16px;
    transform: translateY(56vh);
  }

  @keyframes matrixScroll {
    0%   { transform: translateY(56vh); }
    100% { transform: translateY(-280%); }
  }

  .mentions-holo {
    top: 45%;
    width: min(360px, 88vw);
    z-index: 200;
  }

  .mentions-holo__mask {
    max-height: 52vh;
    border-radius: 22px;
    border: 1px solid rgba(255, 180, 0, 0.12);
    background: rgba(2, 4, 10, 0.85);
    backdrop-filter: blur(10px);
    padding: 18px;
  }

  .mentions-holo__text {
    font-size: 16px;
    transform: translateY(56vh);
  }

  @keyframes mentionsScroll {
    0%   { transform: translateY(56vh); }
    100% { transform: translateY(-280%); }
  }
}

/* Hover tooltip sur bouton violet mobile */
.mobile-command-square-about {
  position: relative;
}

.mobile-command-square-about::after {
  content: 'Qui sommes-nous';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(4, 8, 18, 0.92);
  border: 1px solid rgba(0, 240, 255, 0.18);
  color: rgba(0, 240, 255, 0.5);
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-command-square-about:hover::after {
  opacity: 1;
}





/* --- SYSTEM LOADER --- */
#system-loader {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #020204;
  z-index: 99999;
  display: flex;
  align-items: center; justify-content: center;
  transition: opacity 1s ease-out, visibility 1s ease-out;
}
#system-loader.hidden {
  opacity: 0;
  visibility: hidden;
}
.loader-content {
  text-align: center;
}
.loader-ring {
  width: 80px; height: 80px;
  border: 4px solid rgba(0, 240, 255, 0.2);
  border-top: 4px solid var(--cyan);
  border-right: 4px solid var(--mag);
  border-radius: 50%;
  margin: 0 auto 20px auto;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 20px var(--cyan), inset 0 0 20px var(--mag);
}
.loader-text {
  font-family: "Orbitron", sans-serif;
  color: var(--cyan);
  font-size: 1.2rem;
  letter-spacing: 4px;
  text-shadow: 0 0 10px var(--cyan);
  animation: pulse 1.5s ease-in-out infinite alternate;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 0.5; } 100% { opacity: 1; } }

/* ═══════ PANIER FLOTTANT (cross-page) ═══════ */

.pg-cart-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 40px;
  border: 1px solid rgba(0, 229, 255, 0.28);
  background: rgba(6, 8, 18, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 42px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.12);
  font-family: 'Rajdhani', sans-serif;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: translateY(120px);
  opacity: 0;
}

.pg-cart-float.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.pg-cart-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 56px rgba(0, 0, 0, 0.55), 0 0 36px rgba(0, 229, 255, 0.2);
}

.pg-cart-float__icon {
  font-size: 20px;
}

.pg-cart-float__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--cyan);
  color: #060812;
  font-size: 13px;
  font-weight: 700;
}

.pg-cart-float__total {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 780px) {
  .pg-cart-float {
    bottom: max(12px, env(safe-area-inset-bottom));
    right: 12px;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 24px;
    max-width: calc(100vw - 24px);
  }

  .pg-cart-float__icon {
    font-size: 16px;
  }

  .pg-cart-float__count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
  }

  .pg-cart-float__total {
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .mobile-command-interface {
    padding: 96px 16px 28px;
    gap: 18px;
  }

  .mobile-command-interface__hero,
  .mobile-command-interface__console,
  .mobile-command-overlay__panel {
    width: 100%;
  }

  .mobile-command-deck {
    grid-template-columns: 1fr;
  }

  .mobile-command-deck__left {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mobile-command-square {
    width: 100%;
  }

  .mobile-command-deck__labels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    font-size: 9px;
  }

  .mobile-command-overlay__panel {
    max-height: calc(100vh - 24px);
    margin: 12px auto;
    padding: 16px;
    border-radius: 24px;
  }

  .mobile-command-overlay__head {
    gap: 12px;
    align-items: flex-start;
  }

  .mobile-command-overlay__close {
    flex-shrink: 0;
  }

  .mobile-command-overlay__screen {
    max-height: calc(100vh - 180px);
    min-height: 280px;
  }

  .contact-overlay__panel {
    padding: 24px;
  }

  .contact-overlay__body,
  .contact-form__grid,
  .contact-aside__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form__meta {
    flex-direction: column;
  }

  .contact-form__submit {
    width: 100%;
    min-width: 0;
  }

  .entry-freeboard__link--contact {
    width: 100%;
    align-items: flex-start;
  }

  .entry-freeboard__link-badge {
    min-width: 0;
  }
}

body.is-mobile-panel-open,
body.is-checkout-open,
body.is-contact-open {
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ✦ SURCOUCHE PREMIUM DE LUXURE EXTRÊME — DIRECTEUR ARTISTIQUE NUMÉRIQUE ✦
   Skeuomorphisme photo-réaliste · Glassmorphism haute couture · Micro-velours
   Objectif : transformer chaque pixel en expérience sensorielle de luxe absolu.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 0. VARIABLES RAFFINÉES — Palette Titanium-Sapphire ────────────────── */
:root {
  --lux-ivory: #e8e4dc;
  --lux-silver: #c0bfbd;
  --lux-titanium: #1c1c24;
  --lux-obsidian: #0e0e14;
  --lux-gold: #c9a84c;
  --lux-gold-glow: rgba(201, 168, 76, 0.35);
  --lux-chrome-hi: rgba(255, 255, 255, 0.12);
  --lux-chrome-lo: rgba(0, 0, 0, 0.65);
  --lux-bezier: cubic-bezier(0.25, 1, 0.5, 1);
  --lux-bezier-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── 1. GLOBAL — Fond & Typographie Haute Couture ──────────────────────── */

/* Fond galactique plus profond avec grain photo-réaliste */
html, body {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(30, 44, 86, 0.78) 0%, transparent 62%),
    radial-gradient(ellipse at 80% 90%, rgba(42, 18, 58, 0.40) 0%, transparent 46%),
    radial-gradient(circle at 50% -20%, #151d38 0%, var(--bg-deep) 70%, #010103 100%);
  color: #d0eef2; /* Pas de blanc pur — blanc argenté glacé */
}

/* Scanlines ultra-subtiles (luxe = discrétion) */
.scanlines {
  opacity: 0.14;
  mix-blend-mode: overlay;
}

/* Vignette plus soyeuse, dégradé élargi */
.vignette {
  background:
    radial-gradient(circle at 50% 40%, transparent 30%, rgba(0, 3, 14, 0.42) 74%, rgba(0, 0, 0, 0.70) 100%);
}


/* ── 2. ENTRY GATE — Accueil Premium Photoréaliste ─────────────────────── */

/* Backdrop : couche de verre fumé + lumière chaude subtile */
.entry-gate__backdrop {
  background:
    radial-gradient(circle at 42% 28%, rgba(201, 168, 76, 0.08), transparent 32%),
    radial-gradient(circle at top center, rgba(255, 0, 234, 0.15), transparent 24%),
    linear-gradient(180deg, rgba(6, 12, 24, 0.82), rgba(3, 7, 16, 0.90));
  backdrop-filter: blur(18px) saturate(1.2);
}

/* Panel principal : renfort multi-ombres + bord chrome liseré */
.entry-gate__panel {
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(178deg, rgba(12, 18, 36, 0.94), rgba(4, 8, 18, 0.98));
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04),          /* Chrome highlight top */
    0 40px 100px rgba(0, 0, 0, 0.6),              /* Ombre de profondeur */
    0 8px 32px rgba(0, 0, 0, 0.4),                /* Ombre de contact */
    inset 0 1px 0 rgba(255, 255, 255, 0.06),      /* Reflet interne haut */
    inset 0 0 60px rgba(0, 240, 255, 0.04);       /* Lueur interne */
  padding: 38px;
  gap: 28px;
  border-radius: 34px;
  transition: box-shadow 0.5s var(--lux-bezier);
}

/* Eyebrow : espacement haute couture */
.entry-gate__eyebrow {
  letter-spacing: 3px;
  font-size: 11px;
  text-shadow: 0 0 12px rgba(255, 0, 234, 0.3);
}

/* H1 hero : text-shadow chrome + espacement ajusté */
.entry-gate__hero h1 {
  letter-spacing: 1px;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.8),
    0 0 24px rgba(0, 240, 255, 0.12);
}

/* Lead text : couleur nuancée, pas de blanc pur */
.entry-gate__lead {
  color: rgba(224, 228, 236, 0.74);
  font-size: 17px;
  letter-spacing: 0.2px;
}

/* CTA boutons : finition titane, ombre 4 couches, transition soyeuse */
.entry-gate__btn {
  transition:
    transform 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier),
    background 0.4s var(--lux-bezier);
  letter-spacing: 2px;
}

/* Bouton Primaire (Finition Carbon Sombre) */
.entry-gate__btn--primary {
  background: linear-gradient(145deg, #2b2b2b 0%, #3a3a3a 20%, #151515 50%, #050505 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 4px 18px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.8);
  color: #1a1a1a;
  text-shadow: none;
}

.entry-gate__btn--primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #3a3a3a 0%, #4f4f4f 30%, #1f1f1f 60%, #0a0a0a 100%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 8px rgba(0, 0, 0, 0.9);
}

/* Application du texte Carbon Royal dans le bouton (via span interne ou mixin) */
.carbon-royal-btn-text {
  --carbon-base: #7a7a7a;
  --carbon-light: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;
  
  display: inline-block;
  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 25%, var(--carbon-mid) 60%, var(--carbon-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  filter: drop-shadow(0px 1px 1px rgba(255, 255, 255, 0.2)) drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.8));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.entry-gate__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.3);
  transition:
    border-color 0.4s var(--lux-bezier),
    background 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier),
    transform 0.4s var(--lux-bezier);
}

.entry-gate__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 28px rgba(0, 0, 0, 0.36);
}


/* ── 3. CARDS THÈME — Profondeur Skeuomorphe ───────────────────────────── */

.entry-theme-card {
  padding: 26px;
  border-radius: 26px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.03),
    0 16px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform 0.45s var(--lux-bezier),
    border-color 0.45s var(--lux-bezier),
    box-shadow 0.45s var(--lux-bezier);
}

.entry-theme-card:hover:not(.is-tilt-ready) {
  transform: translateY(-6px) scale(1.005);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.05),
    0 24px 64px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(0, 240, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.entry-gate__hero,
.entry-theme-card,
.entry-freeboard,
.carbon-royal-title {
  transform-style: preserve-3d;
}

.entry-gate__hero.is-tilt-ready,
.entry-theme-card.is-tilt-ready,
.entry-freeboard.is-tilt-ready,
.carbon-royal-title.is-tilt-ready {
  will-change: transform;
}

.entry-gate__hero {
  position: relative;
  border-radius: 24px;
}

/* ══ FOND SPATIAL — Étoiles + Filante (Plein écran derrière le panel) ══════════════ */
.space-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  filter: brightness(1.12) saturate(1.08);
}

/* Layer 1 : Étoiles principales (Scintillement Lent + Halo Réaliste WebGL) */
.space-stars::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    /* ==============================================================
       TECHNIQUE NOYAU + HALO : chaque grosse étoile a 2 ombres
       1. Noyau éclatant (blanc) pour le piqué
       2. Halo diffus (couleur) pour le bloom
       ============================================================== */
    /* Sirius (Bleue) */
    12vw 15vh 0px 0px rgba(255,255,255,1),  12vw 15vh 6px 2px rgba(180,220,255,0.9),
    /* Antarès (Chaud/Orangé) */
    85vw 25vh 0px 0px rgba(255,255,255,1),  85vw 25vh 8px 3px rgba(255,180,140,0.85),
    /* Véga (Blanche intense) */
    45vw 85vh 0px 0px rgba(255,255,255,1),  45vw 85vh 5px 2px rgba(255,255,255,0.95),
    /* Bételgeuse (Orangée) */
    75vw 65vh 0px 0px rgba(255,240,230,1),  75vw 65vh 7px 3px rgba(255,160,120,0.8),
    /* Rigel (Bleutée) */
    95vw 88vh 0px 0px rgba(255,255,255,1),  95vw 88vh 5px 2px rgba(150,210,255,0.9),
    /* Capella */
    5vw  60vh 0px 0px rgba(255,255,255,1),  5vw  60vh 4px 1px rgba(255,255,240,0.8),
    /* Arcturus (Dorée) */
    35vw 35vh 0px 0px rgba(255,255,240,1),  35vw 35vh 6px 2px rgba(255,210,160,0.85),
    /* Procyon */
    55vw 10vh 0px 0px rgba(255,255,255,1),  55vw 10vh 4px 1px rgba(255,240,210,0.8),

    /* ====== Nébuleuse diffuse (Ambiance lactée profonde) ====== */
    30vw 30vh 80px 30px rgba(180,220,255,0.08),
    70vw 70vh 120px 40px rgba(200,180,255,0.07),
    80vw 20vh 100px 25px rgba(255,200,180,0.06),

    /* Moyennes avec petit halo subtil */
    22vw  8vh  0px 0px rgba(255,255,255,1), 22vw  8vh  2px 1px rgba(255,255,255,0.6),
    32vw  48vh 0px 0px rgba(255,255,255,1), 32vw  48vh 3px 1px rgba(200,225,255,0.6),
    68vw  14vh 0px 0px rgba(255,255,255,1), 68vw  14vh 2px 1px rgba(255,235,210,0.5),
    18vw  72vh 0px 0px rgba(255,255,255,1), 18vw  72vh 2px 1px rgba(255,255,255,0.6),
    88vw  42vh 0px 0px rgba(255,255,255,1), 88vw  42vh 3px 1px rgba(220,200,255,0.6),
    42vw  18vh 0px 0px rgba(255,255,255,1), 42vw  18vh 2px 1px rgba(255,255,255,0.6),
    62vw  82vh 0px 0px rgba(255,255,255,1), 62vw  82vh 2px 1px rgba(200,240,255,0.5),
    2vw   92vh 0px 0px rgba(255,255,255,1), 2vw   92vh 2px 1px rgba(255,255,255,0.6),
    92vw  78vh 0px 0px rgba(255,255,255,1), 92vw  78vh 2px 1px rgba(255,210,180,0.5),
    28vw  95vh 0px 0px rgba(255,255,255,1), 28vw  95vh 2px 1px rgba(255,255,255,0.6),
    78vw  5vh  0px 0px rgba(255,255,255,1), 78vw  5vh  2px 1px rgba(200,230,255,0.5),
    52vw  52vh 0px 0px rgba(255,255,255,1), 52vw  52vh 2px 1px rgba(255,255,255,0.6),
    72vw  28vh 0px 0px rgba(255,255,255,1), 72vw  28vh 2px 1px rgba(255,255,240,0.5),
    38vw  68vh 0px 0px rgba(255,255,255,1), 38vw  68vh 2px 1px rgba(230,210,255,0.6);
  animation: space-twinkle-slow 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 3px rgba(210, 235, 255, 0.55));
}

/* Layer 2 : Multitude d'étoiles lointaines très pures */
.space-stars::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
  box-shadow:
    /* Petites étoiles (Lointaines - 100% nettes ou mini-halo) */
    8vw   38vh 0px 0px rgba(255,255,255,0.85),
    15vw  25vh 0px 0px rgba(180,220,255,0.90),
    48vw  28vh 0px 0px rgba(255,255,255,0.85),
    82vw  92vh 0px 0px rgba(255,210,190,0.90),
    25vw  58vh 0px 0px rgba(255,255,255,0.85),
    9vw   18vh 0px 0px rgba(200,230,255,0.85),
    91vw  12vh 0px 0px rgba(255,255,255,0.85),
    14vw  42vh 0px 0px rgba(255,220,200,0.90),
    34vw  82vh 0px 0px rgba(255,255,255,0.85),
    64vw  35vh 1px 0px rgba(200,210,255,0.90),
    74vw  85vh 0px 0px rgba(255,255,255,0.75),
    44vw  55vh 0px 0px rgba(255,240,220,0.85),
    84vw  62vh 0px 0px rgba(255,255,255,0.85),
    54vw  75vh 1px 0px rgba(220,200,255,0.90),
    24vw  88vh 0px 0px rgba(255,255,255,0.70),
    11vw  6vh  0px 0px rgba(200,240,255,0.85),
    41vw  3vh  0px 0px rgba(255,255,255,0.90),
    61vw  96vh 0px 0px rgba(255,210,180,0.85),
    17vw  90vh 0px 0px rgba(255,255,255,0.75),
    37vw  15vh 1px 0px rgba(180,220,255,0.90),
    58vw  45vh 0px 0px rgba(255,255,255,0.85),
    96vw  35vh 0px 0px rgba(255,230,200,0.95),
    3vw   80vh 0px 0px rgba(255,255,255,0.85),
    79vw  72vh 1px 0px rgba(210,200,255,0.90),
    29vw  32vh 0px 0px rgba(255,255,255,0.85),
    49vw  98vh 0px 0px rgba(200,255,240,0.65),
    89vw  54vh 0px 0px rgba(255,255,255,0.50);
  animation: space-twinkle-fast 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 2px rgba(220, 240, 255, 0.4));
}

/* L'étoile filante — Injectée séparément pour ne pas interférer avec le Layer 2 */
.space-stars-shooting {
  position: absolute;
  top: 15%;
  /* Tête à droite, traînée à gauche */
  left: -300px;
  width: 350px;
  height: 2px;
  border-radius: 2px;
  /* Le dégradé part de la gauche (transparent) vers la droite (blanc très pur) */
  background: linear-gradient(to right, transparent 0%, rgba(100, 180, 255, 0.55) 50%, rgba(200, 230, 255, 0.96) 80%, rgba(255, 255, 255, 1) 100%);
  transform: rotate(-22deg);
  opacity: 0;
  animation: space-shooting 220s linear infinite;
  /* Gros halo stellaire autour de la tête */
  filter: drop-shadow(0 0 18px rgba(200,230,255,1)) drop-shadow(0 0 8px rgba(255,255,255,1));
}

@keyframes space-twinkle-slow {
  0%   { opacity: 0.96; box-shadow: inherit; }
  50%  { opacity: 1.00; }
  100% { opacity: 1.00; }
}

@keyframes space-twinkle-fast {
  0%   { opacity: 0.84; }
  50%  { opacity: 0.98; }
  100% { opacity: 1.00; }
}

@keyframes space-shooting {
  0%,    96.4% { opacity: 0; transform: rotate(-22deg) translateX(0px) scale(0.8); }
  96.5%        { opacity: 0; transform: rotate(-22deg) translateX(0px) scale(1); }
  97.0%        { opacity: 1; transform: rotate(-22deg) translateX(45vw) scale(1.2); }
  97.5%        { opacity: 0; transform: rotate(-22deg) translateX(120vw) scale(0.6); }
  97.51%, 100% { opacity: 0; transform: rotate(-22deg) translateX(0px) scale(0.8); }
}

.entry-gate__hero::after,
.entry-theme-card::after,
.entry-freeboard::after,
.carbon-royal-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 46%);
  transition: opacity 0.24s ease;
}

.entry-gate__hero::after,
.entry-theme-card::after,
.entry-freeboard::after {
  border-radius: inherit;
}

.carbon-royal-title {
  position: relative;
  display: inline-block;
}

.carbon-royal-title::after {
  border-radius: 18px;
}

.entry-gate__hero.is-tilt-ready:hover::after,
.entry-theme-card.is-tilt-ready:hover::after,
.entry-freeboard.is-tilt-ready:hover::after,
.carbon-royal-title.is-tilt-ready:hover::after {
  opacity: 1;
}

.entry-gate__hero > * {
  transform: translateZ(26px);
}

.entry-freeboard > * {
  transform: translateZ(16px);
}

.entry-theme-card > * {
  transform: translateZ(18px);
}

.entry-theme-card .entry-theme-card__cta,
.entry-gate__hero .entry-gate__btn,
.entry-gate__hero .carbon-royal-title {
  transform: translateZ(34px);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .entry-gate__hero,
  .entry-theme-card,
  .entry-freeboard,
  .carbon-royal-title,
  .entry-gate__hero > *,
  .entry-freeboard > *,
  .entry-theme-card > * {
    transform: none !important;
  }
}

.entry-theme-card h2 {
  letter-spacing: 0.8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.entry-theme-card p {
  color: rgba(220, 224, 234, 0.7);
}

.entry-theme-card__tag {
  letter-spacing: 1.4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.35s var(--lux-bezier);
}

.entry-theme-card__highlights span {
  backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.35s var(--lux-bezier), border-color 0.35s var(--lux-bezier);
}

.entry-theme-card__highlights span:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

/* CTA dans les cards : chrome + velours */
.entry-theme-card__cta {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.12),
    0 6px 22px rgba(0, 240, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -3px 8px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier);
}

.entry-theme-card__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.16),
    0 12px 36px rgba(0, 240, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 8px rgba(0, 0, 0, 0.15);
}


/* ── 4. COCKPIT — Consoles, Panneaux vitrés, Boutons ──────────────────── */

/* Glass panels : verre fumé 4 couches d'ombre */
.glass-panel {
  background: rgba(5, 10, 25, 0.25);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.03),
    0 16px 50px rgba(0, 0, 0, 0.65),
    inset 0 0 24px rgba(0, 240, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
}

/* Brand title : chrome texturé */
.brand-title {
  letter-spacing: 5px;
  text-shadow:
    0 0 14px var(--cyan),
    0 2px 4px rgba(0, 0, 0, 0.7);
}

.brand-subtitle {
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(255, 0, 234, 0.4);
}

/* Desk panels : finition métal brossé avec reflet interne */
.desk-panel {
  background:
    linear-gradient(180deg, #1d2340 0%, #0c0e1a 60%, #080a13 100%);
  border-top: 2px solid var(--cyan);
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.06),
    0 -12px 50px rgba(0, 240, 255, 0.25),
    inset 0 6px 24px rgba(255, 255, 255, 0.06),
    inset 0 -8px 20px rgba(0, 0, 0, 0.5);
}

/* Mega Console : glass premium multi-reflet */
.mega-console {
  background: rgba(8, 13, 28, 0.28);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-top: 2px solid rgba(0, 240, 255, 0.6);
  border-bottom: 1px solid rgba(255, 0, 234, 0.2);
  border-radius: 24px;
  padding: 18px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.05),
    0 16px 60px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(0, 240, 255, 0.14),
    inset 0 0 40px rgba(0, 240, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Boutons carrés : micro-3D photoréaliste */
.sq-btn {
  border-radius: 6px;
  transition:
    transform 0.3s var(--lux-bezier),
    box-shadow 0.3s var(--lux-bezier),
    filter 0.3s var(--lux-bezier);
}

.sq-btn.mag-lit {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25), transparent 50%),
    linear-gradient(180deg, #ff22ee, #cc00bb 50%, #88007a);
  box-shadow:
    0 3px 0 #660060,
    0 0 12px var(--mag),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  border-bottom: none;
}

.sq-btn.mag-lit:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow:
    0 4px 0 #660060,
    0 0 20px var(--mag),
    0 0 40px rgba(255, 0, 234, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.sq-btn.mag-lit:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 #660060,
    0 0 8px var(--mag),
    inset 0 3px 6px rgba(0, 0, 0, 0.5);
}

.sq-btn.mag-lit.dimmed {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.06), transparent 50%),
    linear-gradient(180deg, #5c004d, #400038);
  box-shadow:
    0 2px 0 #2a0024,
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

/* Holo Display : profondeur extrême */
.holo-display {
  background: rgba(2, 5, 14, 0.5);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(0, 240, 255, 0.24);
  border-top-color: rgba(0, 240, 255, 0.4);
  border-radius: 16px;
  box-shadow:
    0 2px 0 rgba(0, 240, 255, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.7),
    inset 0 0 40px rgba(0, 0, 0, 0.85),
    inset 0 0 20px rgba(0, 240, 255, 0.08),
    inset 0 1px 0 rgba(0, 240, 255, 0.12);
}

/* Big Red Button : skeuomorphe 3D tactile */
.big-red-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.3), transparent 40%),
    radial-gradient(circle at 50% 50%, #ff4d4d, #cc0000 45%, #880000);
  border: 2px solid #1a0000;
  border-bottom: 5px solid #440000;
  box-shadow:
    0 4px 0 #330000,
    0 0 20px rgba(255, 0, 0, 0.35),
    0 0 50px rgba(255, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.2),
    inset 0 -3px 6px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.2s var(--lux-bezier),
    box-shadow 0.2s var(--lux-bezier);
}

.big-red-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 5px 0 #330000,
    0 0 28px rgba(255, 0, 0, 0.45),
    0 0 60px rgba(255, 0, 0, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.4);
}

.big-red-btn:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
  box-shadow:
    0 1px 0 #330000,
    0 0 14px rgba(255, 0, 0, 0.3),
    inset 0 4px 8px rgba(0, 0, 0, 0.6);
}

.big-red-btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.45;
  filter: saturate(0.35) brightness(0.9);
  box-shadow:
    0 2px 0 #220000,
    0 0 8px rgba(255, 0, 0, 0.14),
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55);
}

.big-red-btn.is-disabled:hover,
.big-red-btn.is-disabled:active {
  transform: none;
  border-bottom-width: 5px;
  box-shadow:
    0 2px 0 #220000,
    0 0 8px rgba(255, 0, 0, 0.14),
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.55);
}


/* ── 5. STRIPE FUNNEL — Tunnel Premium ─────────────────────────────────── */

.stripe-funnel-backdrop {
  background: rgba(1, 3, 10, 0.82);
  backdrop-filter: blur(14px) saturate(1.1);
}

.stripe-funnel-panel {
  border: 1px solid rgba(0, 240, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 32px;
  background:
    linear-gradient(178deg, rgba(10, 18, 36, 0.97), rgba(4, 8, 18, 0.98));
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04),
    0 40px 100px rgba(0, 0, 0, 0.55),
    0 12px 36px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 50px rgba(0, 240, 255, 0.06);
  padding: 32px;
}

.stripe-funnel-panel__eyebrow {
  letter-spacing: 2.5px;
  text-shadow: 0 0 10px rgba(255, 0, 234, 0.3);
}

.stripe-funnel-panel__head h2 {
  letter-spacing: 3px;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 0 18px rgba(0, 240, 255, 0.08);
}

.stripe-funnel-close {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    background 0.35s var(--lux-bezier),
    border-color 0.35s var(--lux-bezier),
    transform 0.35s var(--lux-bezier);
}

.stripe-funnel-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.06);
}

/* Steps indicators : pilules chrome */
.stripe-step {
  padding: 14px 16px;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    color 0.4s var(--lux-bezier),
    border-color 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier),
    background 0.4s var(--lux-bezier);
  letter-spacing: 1.2px;
}

.stripe-step.is-active,
.stripe-step.is-complete {
  background: rgba(0, 240, 255, 0.04);
  box-shadow:
    inset 0 0 20px rgba(0, 240, 255, 0.06),
    0 0 14px rgba(0, 240, 255, 0.06);
}

/* Offer card & payment card : verre premium */
.stripe-offer-card,
.stripe-payment-card {
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(10, 16, 32, 0.85), rgba(6, 10, 22, 0.9));
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.03),
    0 18px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 32px rgba(0, 240, 255, 0.04);
}

.stripe-offer-card {
  padding: 28px;
}

.stripe-payment-card {
  padding: 26px;
}

/* Inputs : finition intérieure sombre vitrée */
.stripe-fields input {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
  padding: 16px 18px;
  transition:
    border-color 0.35s var(--lux-bezier),
    box-shadow 0.35s var(--lux-bezier);
}

.stripe-fields input:focus {
  outline: none;
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.2),
    0 0 12px rgba(0, 240, 255, 0.08);
}

/* Boutons primaires : finition chrome + micro-rebond */
.stripe-primary-btn,
.stripe-mobile-btn {
  background:
    linear-gradient(140deg, #b4fff8 0%, var(--cyan) 35%, #0090cc 100%);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.14),
    0 6px 24px rgba(0, 240, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  min-height: 54px;
  transition:
    transform 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier);
}

.stripe-primary-btn:hover,
.stripe-mobile-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.18),
    0 12px 36px rgba(0, 240, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 6px rgba(0, 0, 0, 0.15);
}

.stripe-primary-btn:active,
.stripe-mobile-btn:active {
  transform: translateY(1px);
}

/* ══════════════════════════════════
   FOOTER COCKPIT (index.html)
   ══════════════════════════════════ */
.pg-footer--cockpit {
  position: relative;
  z-index: 5;
  padding: 1rem 2rem;
  background: transparent;
  border-top: 1px solid rgba(0,180,216,0.08);
}
.pg-footer--cockpit .pg-footer__bottom {
  margin: 0 auto;
  padding: 0;
  border: none;
  text-align: center;
}
.pg-footer--cockpit .pg-footer__bottom p {
  font-size: 0.7rem;
  color: rgba(200,210,230,0.25);
  letter-spacing: 0.04em;
}
.pg-footer--cockpit .pg-footer__link {
  color: rgba(0,180,216,0.5);
  text-decoration: none;
}
.pg-footer--cockpit .pg-footer__address {
  margin-top: 0.3rem;
  font-size: 0.65rem;
  color: rgba(200,210,230,0.18);
}
.pg-footer--cockpit .pg-footer__bottom a:hover {
  color: #00d4ff;
}

.stripe-secondary-btn {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  min-height: 54px;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    background 0.35s var(--lux-bezier),
    border-color 0.35s var(--lux-bezier),
    transform 0.35s var(--lux-bezier);
}

.stripe-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

/* Bulle engagement : finition dorée vitrée */
.stripe-engagement-bubble {
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 180, 0, 0.04);
  border: 1px solid rgba(255, 180, 0, 0.14);
  backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Live config : coins plus luxueux */
.stripe-live-config {
  border-radius: 18px;
}


/* ── 6. MATRIX & MENTIONS — Overlays Défilants ─────────────────────────── */

.matrix-holo__text span,
.mentions-holo__text span {
  text-shadow:
    0 0 4px currentColor,
    0 1px 4px rgba(0, 0, 0, 0.8);
}


/* ── 7. GLOBE — Éclat photoréaliste renforcé ───────────────────────────── */

.globe {
  box-shadow:
    0 0 60px rgba(0, 180, 255, 0.45),
    0 0 120px rgba(0, 100, 255, 0.25),
    0 0 24px rgba(255, 255, 255, 0.18),
    0 0 200px rgba(0, 140, 255, 0.08);
}

.hologram-wrapper {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.06) 0%, rgba(3, 10, 20, 0.45) 100%);
  border: 1px solid rgba(0, 240, 255, 0.22);
  box-shadow:
    inset 0 0 60px rgba(0, 240, 255, 0.16),
    0 0 100px rgba(255, 0, 234, 0.14),
    0 0 200px rgba(0, 100, 255, 0.06);
}


/* ── 8. INTERFACE BACK BUTTON — Pilule Chrome ──────────────────────────── */

.interface-back-btn {
  border: 1px solid rgba(0, 240, 255, 0.14);
  background: rgba(6, 12, 24, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04),
    0 12px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    opacity 0.4s var(--lux-bezier),
    transform 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier);
}

.interface-back-btn:hover {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06),
    0 0 28px rgba(0, 240, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.interface-back-btn__arrow {
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.2), transparent 50%),
    rgba(0, 240, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}


/* ── 9. PANIER FLOTTANT — Capsule vitrée ───────────────────────────────── */

.pg-cart-float {
  border: 1px solid rgba(0, 229, 255, 0.22);
  background: rgba(6, 8, 18, 0.9);
  backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 44px;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04),
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(0, 229, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    transform 0.4s var(--lux-bezier),
    box-shadow 0.4s var(--lux-bezier),
    opacity 0.4s var(--lux-bezier);
}

.pg-cart-float:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.06),
    0 18px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(0, 229, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pg-cart-float__count {
  background:
    linear-gradient(140deg, #b4fff8, var(--cyan));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.3);
}


/* ── 10. LOADER — Finition joaillerie ──────────────────────────────────── */

.loader-ring {
  box-shadow:
    0 0 24px var(--cyan),
    0 0 60px rgba(0, 240, 255, 0.2),
    inset 0 0 24px var(--mag),
    inset 0 0 60px rgba(255, 0, 234, 0.15);
}

.loader-text {
  letter-spacing: 5px;
  text-shadow:
    0 0 14px var(--cyan),
    0 1px 3px rgba(0, 0, 0, 0.7);
}


/* ── 11. STRIPE LAUNCH (header) — Pilule tactile ──────────────────────── */

.stripe-launch-btn {
  border: 1px solid rgba(0, 240, 255, 0.3);
  background: rgba(2, 8, 20, 0.75);
  backdrop-filter: blur(8px);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04),
    0 6px 22px rgba(0, 240, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    box-shadow 0.4s var(--lux-bezier),
    background 0.4s var(--lux-bezier),
    transform 0.4s var(--lux-bezier);
}

.stripe-launch-btn:hover {
  transform: translateY(-1px);
  background: rgba(5, 18, 40, 0.92);
  box-shadow:

.stripe-launch-btn.is-disabled,
.mobile-command-launch.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(0.2) saturate(0.2);
  box-shadow: none;
}

.stripe-launch-btn.is-disabled:hover,
.mobile-command-launch.is-disabled:hover,
.stripe-launch-btn.is-disabled:active,
.mobile-command-launch.is-disabled:active {
  transform: none;
  box-shadow: none;
}
    0 2px 0 rgba(255, 255, 255, 0.06),
    0 0 30px rgba(0, 240, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ── 12. MOBILE PREMIUM (≤1024px) ──────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Hero card mobile : respiration + verre profond */
  .mobile-command-interface__hero,
  .mobile-command-interface__console {
    border-radius: 32px;
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      0 2px 0 rgba(255, 255, 255, 0.03),
      0 28px 80px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 0 44px rgba(0, 240, 255, 0.04);
  }

  .mobile-command-interface__hero {
    padding: 28px;
  }

  .mobile-command-interface__console {
    padding: 26px;
  }

  /* Boutons carrés mobile : skeuomorphe 3D */
  .mobile-command-square {
    border-radius: 16px;
    background:
      radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.2), transparent 50%),
      linear-gradient(180deg, rgba(255, 0, 234, 0.45), rgba(130, 18, 120, 0.9));
    box-shadow:
      0 3px 0 rgba(80, 0, 70, 0.8),
      0 0 20px rgba(255, 0, 234, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    transition:
      transform 0.3s var(--lux-bezier),
      box-shadow 0.3s var(--lux-bezier);
  }

  .mobile-command-square:active {
    transform: translateY(2px);
    box-shadow:
      0 1px 0 rgba(80, 0, 70, 0.8),
      inset 0 3px 6px rgba(0, 0, 0, 0.5);
  }

  /* Bouton Commander : finition soyeuse */
  .mobile-command-launch {
    border-radius: 20px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 6px 24px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(0, 240, 255, 0.06);
    transition:
      transform 0.4s var(--lux-bezier),
      box-shadow 0.4s var(--lux-bezier);
  }

  .mobile-command-launch:active {
    transform: translateY(1px);
  }

  /* Overlay panel mobile */
  .mobile-command-overlay__panel {
    border-radius: 32px;
    border-top-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      0 2px 0 rgba(255, 255, 255, 0.03),
      0 28px 80px rgba(0, 0, 0, 0.48);
  }

  .mobile-command-overlay__close {
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition:
      background 0.35s var(--lux-bezier),
      border-color 0.35s var(--lux-bezier);
  }

  .mobile-command-overlay__close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .mobile-command-overlay__screen {
    border-radius: 26px;
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.2),
      inset 0 0 56px rgba(0, 240, 255, 0.06);
  }
}

/* ═══════ FIN SURCOUCHE PREMIUM ═══════ */

/* ── CARBON ROYAL TITLE ── */
:root {
  --carbon-base: #1a1a1a;
  --carbon-light: #7a7a7a;
  --carbon-shine: #ffffff;
  --carbon-mid: #2c2c2c;
  --carbon-dark: #000000;
  --carbon-edge-highlight: rgba(255, 255, 255, 0.4);
}

.carbon-royal-title {
  /* Fallback & Accessibilité */
  color: var(--carbon-base);
  
  /* Typographie & Crénage Statutaire */
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  
  /* Lissage Parfait & Rendu Awwwards */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Responsive Fluide Chirurgical (Min: 40px, Max: 80px) */
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  
  /* Teinte & Matière : Onyx / Carbone Métallique Brillant */
  background: linear-gradient(
    145deg, 
    var(--carbon-light) 0%, 
    var(--carbon-shine) 18%, 
    var(--carbon-mid) 40%, 
    var(--carbon-dark) 85%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Relief Invisible (Reflet Métallique ultra-net) */
  text-shadow: 
    0px 1px 2px var(--carbon-edge-highlight),
    0px -1px 8px rgba(255, 255, 255, 0.08); /* Halo minimal pour sublimer le noir */
}

/* ── CARBON ROYAL SUBTITLE (Eyebrow Sur-titre) ── */
.carbon-royal-subtitle {
  /* Fallback & Accessibilité */
  color: var(--carbon-base);
  
  /* Typographie & Espacement (Élégance discrète) */
  font-weight: 700;
  letter-spacing: 0.18em; /* Plus espacé pour la lisibilité en petite taille */
  text-transform: uppercase;
  
  /* Lissage Parfait Algorithmique */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Teinte & Matière : Onyx Brillant (Ajusté pour petits caractères) */
  background: linear-gradient(
    145deg, 
    var(--carbon-light) 0%, 
    #ffffff 25%, 
    var(--carbon-mid) 60%, 
    var(--carbon-dark) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Relief Invisible (Micro-gravure précise) */
  text-shadow: 
    0px 1px 1px rgba(255, 255, 255, 0.5), /* Contraste renforcé sur le petit texte */
    0px -1px 3px rgba(255, 255, 255, 0.1);
}

/* ── CARBON ROYAL PARAGRAPH (Texte de description) ── */
.carbon-royal-paragraph {
  /* Fallback & Accessibilité */
  color: var(--carbon-base);
  
  /* Typographie & Espacement (Lisibilité premium) */
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.6;
  margin-bottom: 24px;
  
  /* Lissage Parfait Algorithmique */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  /* Responsive Fluide Chirurgical (Min: 16px, Max: 19px) */
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.15rem);
  
  /* Teinte & Matière : Onyx Brillant (Lisible pour long texte) */
  background: linear-gradient(
    145deg, 
    #a8a8a8 0%, 
    #ffffff 18%, 
    #5f5f5f 40%, 
    #0a0a0a 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Relief Invisible (Micro-gravure précise) */
  text-shadow: 
    0px 1px 1px rgba(255, 255, 255, 0.4),
    0px -1px 2px rgba(255, 255, 255, 0.05);
}

/* ========================================================
   FIX AUTO-FORMATTER : RESTAURATION GLOBALE CARBON ROYAL
   ======================================================== */
.carbon-royal-title,
.carbon-royal-subtitle,
.carbon-royal-paragraph,
.carbon-royal-eyebrow,
.carbon-royal-h2,
.carbon-royal-h3,
.carbon-royal-p,
.carbon-royal-tag,
.carbon-royal-link,
.carbon-royal-btn-text {
  background: linear-gradient(145deg, var(--carbon-base) 0%, var(--carbon-light) 25%, var(--carbon-mid) 60%, var(--carbon-dark) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ========================================================
   CURSEUR SNIPER PLANNETGLOBE — AWWWARDS EDITION
   ======================================================== */

@media (pointer: fine) {
  html, body, *, a, button {
    cursor: none !important;
  }

  .png-sniper-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
  }

  /* ── Core Dot ── */
  .png-sniper-dot {
    position: absolute;
    width: 8px; height: 8px;
    background: var(--cyan, #00f0ff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
      0 0 6px var(--cyan, #00f0ff),
      0 0 20px rgba(0, 240, 255, 0.4);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease, box-shadow 0.2s ease;
  }

  .png-sniper-wrapper.is-hovering .png-sniper-dot {
    transform: translate(-50%, -50%) scale(0.4);
    background: #ff2a2a;
    box-shadow: 0 0 14px #ff2a2a, 0 0 40px rgba(255, 42, 42, 0.5);
  }

  /* ── Outer Scope Ring ── */
  .png-sniper-ring {
    position: absolute;
    width: 52px; height: 52px;
    border: 1.5px solid rgba(0, 240, 255, 0.35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition:
      width 0.35s cubic-bezier(0.25, 1, 0.5, 1),
      height 0.35s cubic-bezier(0.25, 1, 0.5, 1),
      border-color 0.25s ease,
      box-shadow 0.25s ease;
    animation: sniper-rotate 12s linear infinite;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.08);
  }

  .png-sniper-wrapper.is-hovering .png-sniper-ring {
    width: 72px; height: 72px;
    border-color: rgba(255, 42, 42, 0.8);
    border-style: solid;
    border-width: 2px;
    animation-play-state: paused;
    box-shadow: 0 0 18px rgba(255, 42, 42, 0.25);
  }

  /* ── Reticle Crosshair Ticks ── */
  .png-tick {
    position: absolute;
    background: rgba(0, 240, 255, 0.55);
    transition: background 0.2s ease, box-shadow 0.2s ease, width 0.2s ease, height 0.2s ease;
  }

  .png-tick.top    { width: 1.5px; height: 10px; top: -12px; left: 50%; transform: translateX(-50%); }
  .png-tick.bottom { width: 1.5px; height: 10px; bottom: -12px; left: 50%; transform: translateX(-50%); }
  .png-tick.left   { width: 10px; height: 1.5px; left: -12px; top: 50%; transform: translateY(-50%); }
  .png-tick.right  { width: 10px; height: 1.5px; right: -12px; top: 50%; transform: translateY(-50%); }

  .png-sniper-wrapper.is-hovering .png-tick {
    background: #ff2a2a;
    box-shadow: 0 0 10px rgba(255, 42, 42, 0.6);
  }

  .png-sniper-wrapper.is-hovering .png-tick.top,
  .png-sniper-wrapper.is-hovering .png-tick.bottom { height: 14px; }
  .png-sniper-wrapper.is-hovering .png-tick.left,
  .png-sniper-wrapper.is-hovering .png-tick.right  { width: 14px; }

  /* ── Label HUD ── */
  .png-sniper-text {
    position: absolute;
    top: -28px; left: 20px;
    color: rgba(0, 240, 255, 0.75);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 3px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease;
  }

  .png-sniper-wrapper.is-hovering .png-sniper-text {
    opacity: 1;
    transform: translateX(0);
    color: #ff2a2a;
    text-shadow: 0 0 8px rgba(255, 42, 42, 0.5);
  }

  @keyframes sniper-rotate {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
}

/* ══ Mobile rescue v7 — production safety net ══ */
@media (max-width: 1024px) {

  /* ── 1. Document scroll fix ── */
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y;
    overscroll-behavior-x: none;
  }

  /* ── 2. Hide desktop-only 3D room + visual overlays ── */
  .room,
  .screens-layer,
  .desk-panel,
  .center-stage {
    display: none !important;
  }

  /* ── 3. Kill vignette + scanlines on mobile (they overlay everything) ── */
  .vignette,
  .scanlines {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ── 4. Entry gate: flow-based, above everything ── */
  .entry-gate {
    position: relative !important;
    inset: auto !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 18px 14px 30px !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .entry-gate.is-hidden {
    display: none !important;
  }

  /* ── 5. GRID OVERFLOW FIX — the core bug ──
       1fr = minmax(auto,1fr) → auto = min-content = 1730px.
       minmax(0,1fr) forces minimum to 0 so track = container width.
       min-width:0 on children prevents intrinsic sizing propagation. */
  .entry-gate__panel {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .entry-gate__panel > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .entry-freeboard {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .entry-freeboard > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .entry-ticker {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .entry-gate__backdrop,
  .space-stars {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .entry-ticker__viewport {
    overflow: hidden !important;
    min-width: 0 !important;
  }

  /* ── 6. Button layout fix ── */
  .entry-gate__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .entry-gate__btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .entry-gate__btn--primary {
    background: linear-gradient(145deg, rgba(0,240,255,0.15), rgba(0,240,255,0.05)) !important;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    color: #eaf6ff !important;
    -webkit-text-fill-color: #eaf6ff !important;
  }

  .entry-gate__btn--ghost {
    border: 1px solid rgba(255,255,255,0.2) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }

  /* ── 7. Hero text overflow fix ── */
  .entry-gate__hero {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  .entry-gate__hero h1 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
  }

  .entry-gate__lead {
    max-width: 100% !important;
    word-break: break-word !important;
  }

  /* ── 8. Mobile command interface: MUST stay visible ── */
  .mobile-command-interface {
    display: flex !important;
    position: relative !important;
    z-index: 50 !important;
    flex-direction: column;
    min-height: auto;
  }

  .mobile-command-overlay {
    display: block;
  }

  /* ── 9. Carbon-royal text: FORCE readable on mobile ── */
  .carbon-royal-title,
  .carbon-royal-subtitle,
  .carbon-royal-paragraph,
  .carbon-royal-eyebrow,
  .carbon-royal-h2,
  .carbon-royal-h3,
  .carbon-royal-p,
  .carbon-royal-tag,
  .carbon-royal-link,
  .carbon-royal-btn-text,
  .entry-gate .carbon-royal-title,
  .entry-gate .carbon-royal-subtitle,
  .entry-gate .carbon-royal-paragraph,
  .entry-gate .carbon-royal-btn-text,
  .entry-freeboard .carbon-royal-eyebrow,
  .entry-freeboard .carbon-royal-h2,
  .entry-freeboard .carbon-royal-p,
  .entry-freeboard .carbon-royal-link {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #eaf6ff !important;
    color: #eaf6ff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
    filter: none !important;
  }
}