/* ==========================================================================
   QUANTUM FRAME DOCK & NEURAL PORTAL — ELNE REEL OFFICIAL NAVIGATION
   Conception d'Avant-Garde : Spatial Glassmorphism, Magnetic HUD & 3D Portals
   ========================================================================== */

/* 1. Flottement & Positionnement de la Capsule */
.quantum-dock-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
  z-index: 9999;
  pointer-events: none; /* Laisse cliquer à travers sauf sur la capsule */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.quantum-dock-header.dock-scrolled {
  transform: translateY(-4px) scale(0.985);
}

.quantum-dock-header.dock-hidden {
  transform: translateY(-120%);
  opacity: 0;
}

/* La Capsule Principale en Verre Poli Obsidienne */
.quantum-dock-pill {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px 8px 10px;
  background: rgba(10, 13, 18, 0.82);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  border-radius: 9999px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.65),
    0 0 25px rgba(245, 158, 11, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.8);
  max-width: 1280px;
  width: auto;
  box-sizing: border-box;
  margin: 0 auto;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-dock-pill:hover {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(245, 158, 11, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* 2. Orbe Holographique de Marque ER */
.quantum-brand-orb {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  position: relative;
  padding: 4px 10px 4px 4px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-brand-orb:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.brand-monogram-orb-wrapper {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-monogram-orb {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 50%, #92400e 100%);
  color: #05070a;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
  z-index: 2;
  transition: transform 0.3s ease;
}

.quantum-brand-orb:hover .brand-monogram-orb {
  transform: scale(1.08) rotate(5deg);
}

/* Anneau Orbital de Particules en Rotation 3D */
.orbital-particles-ring {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  border: 1.5px dashed rgba(245, 158, 11, 0.6);
  animation: orbitRotate 10s linear infinite;
  pointer-events: none;
  opacity: 0.75;
}

@keyframes orbitRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.quantum-brand-details {
  display: flex;
  flex-direction: column;
}

.brand-name-hud {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.8px;
  color: #ffffff;
  line-height: 1.1;
}

.brand-coords-hud {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold, #f59e0b);
  text-transform: uppercase;
  margin-top: 2px;
}

/* 3. Live Mini Equalizer (Audio Signal Pulse) */
.quantum-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  padding: 0 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.eq-bar {
  width: 2.5px;
  background: var(--gold, #f59e0b);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}

.eq-bar-1 { height: 8px; animation-delay: 0.1s; }
.eq-bar-2 { height: 14px; animation-delay: 0.35s; background: #fbbf24; }
.eq-bar-3 { height: 6px; animation-delay: 0.2s; }
.eq-bar-4 { height: 11px; animation-delay: 0.5s; background: #38bdf8; }

@keyframes eqBounce {
  0% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.45); }
}

/* 4. Desktop Navigation Nodes (Magnetic Physics & Glow Tracker) */
.quantum-nav-nodes {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
}

/* Spotlight Tracker Fluide Sous les Liens */
.quantum-glow-tracker {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.1) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  z-index: 1;
}

.quantum-glow-tracker.visible {
  opacity: 1;
}

.quantum-node-item {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 9999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.node-index {
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  color: rgba(245, 158, 11, 0.85);
  opacity: 0.8;
  letter-spacing: 0.5px;
}

.node-label {
  transition: color 0.2s;
}

.quantum-node-item:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.quantum-node-item.active {
  color: #ffffff;
  font-weight: 800;
}

.quantum-node-item.active .node-label {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Onglet Spécial OUT OF FRAME avec Phare Quantique */
.node-item-secret {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.secret-pulse-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
  animation: beaconPulse 1.8s infinite;
}

@keyframes beaconPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; box-shadow: 0 0 6px #f59e0b; }
  50% { transform: scale(1.6); opacity: 1; box-shadow: 0 0 16px #f59e0b, 0 0 25px rgba(245, 158, 11, 0.5); }
}

.secret-node-badge {
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  letter-spacing: 0.8px;
}

/* 5. Quantum Control Hub (Lang Switch, VIP, Neural Trigger) */
.quantum-control-hub {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Laser Lang Switch */
.quantum-lang-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 2px 5px;
}

.quantum-lang-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 7px;
  cursor: pointer;
  border-radius: 9999px;
  transition: all 0.2s;
}

.quantum-lang-btn.active {
  color: #05070a;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.lang-divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
}

/* Bouton VIP Spatial */
.quantum-btn-vip {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.08) 100%);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #f59e0b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-btn-vip:hover {
  background: #f59e0b;
  color: #05070a;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6);
  transform: translateY(-1px) scale(1.03);
}

.quantum-btn-vip.unlocked {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(14, 165, 233, 0.1) 100%);
  border-color: #06b6d4;
  color: #38bdf8;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.35);
}

.quantum-btn-vip.unlocked:hover {
  background: #06b6d4;
  color: #05070a;
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.7);
}

/* Bouton Déclencheur du Portail Neural (Le Burger Spatial) */
.quantum-btn-portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.quantum-btn-portal:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--gold, #f59e0b);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
  transform: scale(1.05);
}

.portal-trigger-icon {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  gap: 3px;
}

.portal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  transition: all 0.3s ease;
}

.quantum-btn-portal:hover .portal-dot {
  background: var(--gold, #f59e0b);
  transform: scale(1.2);
}

.quantum-btn-portal:hover .p-dot-1 { transform: translate(-1px, -1px); }
.quantum-btn-portal:hover .p-dot-2 { transform: translate(1px, -1px); }
.quantum-btn-portal:hover .p-dot-3 { transform: translate(-1px, 1px); }
.quantum-btn-portal:hover .p-dot-4 { transform: translate(1px, 1px); }


/* ==========================================================================
   5. LE PORTAIL NEURAL 3D PLEIN ÉCRAN (NEURAL PORTAL OVERLAY)
   ========================================================================== */
.neural-portal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: rgba(6, 8, 12, 0.94);
  backdrop-filter: blur(40px) brightness(0.65);
  -webkit-backdrop-filter: blur(40px) brightness(0.65);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
  overflow-y: auto;
  perspective: 1200px;
}

.neural-portal-overlay.portal-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

/* Grille Cosmique en Fond */
.portal-cosmic-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center center;
  transform: perspective(600px) rotateX(45deg) scale(2);
  transform-origin: center top;
  pointer-events: none;
  opacity: 0.6;
}

/* Header du Portail */
.portal-top-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.portal-brand-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-studio-clock {
  font-family: monospace;
  font-size: 13px;
  color: var(--gold, #f59e0b);
  letter-spacing: 2px;
  background: rgba(245, 158, 11, 0.1);
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.portal-close-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 9999px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-close-btn:hover {
  background: #f59e0b;
  color: #000;
  border-color: #f59e0b;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.6);
  transform: scale(1.05);
}

/* Les 4 Monolithes Dimensionnels (Accordéon Flex 3D & Holo-Tiles Réactifs) */
.portal-monoliths-grid {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
  margin: 0;
  transform-style: preserve-3d;
  overflow: hidden;
  height: 100%;
}

.portal-monolith-col {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 34px;
  background: rgba(8, 11, 16, 0.94);
  text-decoration: none;
  overflow: hidden;
  transition: 
    flex 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    filter 0.4s ease;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  will-change: flex, transform;
}

.portal-monolith-col::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(245, 158, 11, 0);
  pointer-events: none;
  z-index: 5;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Expansion fluide cinématique au survol ou au toucher */
.portal-monoliths-grid:hover .portal-monolith-col {
  flex: 0.72;
  filter: brightness(0.48) saturate(0.55);
}

.portal-monoliths-grid .portal-monolith-col:hover,
.portal-monolith-col.touch-focused {
  flex: 2.3 !important;
  filter: brightness(1) saturate(1.15) !important;
  z-index: 5;
  box-shadow: 
    0 0 50px rgba(0, 0, 0, 0.85),
    inset 0 0 60px rgba(245, 158, 11, 0.3),
    0 0 35px rgba(245, 158, 11, 0.25);
}

.portal-monolith-col:hover::after,
.portal-monolith-col.touch-focused::after {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: inset 0 0 30px rgba(245, 158, 11, 0.2);
}

/* Couche de lueur holographique interactive (Holo-Glare suiveur de curseur / doigt) */
.portal-holo-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(circle 380px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(245, 158, 11, 0.45) 0%, rgba(251, 191, 36, 0.15) 35%, transparent 75%);
}

.portal-monolith-col:hover .portal-holo-glare,
.portal-monolith-col.touch-focused .portal-holo-glare {
  opacity: 1;
}

/* Image de fond haute définition des 4 tuiles */
.monolith-bg-image {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  background-size: cover;
  background-position: center 25%;
  opacity: 0.38;
  filter: grayscale(35%) contrast(1.1) brightness(0.72);
  transition: 
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.55s ease;
  transform: scale(1.04);
  z-index: 1;
  pointer-events: none;
}

.col-portal-1 .monolith-bg-image { background-image: url('assets/img/portal-tile-1.jpg'); background-position: center 20%; }
.col-portal-2 .monolith-bg-image { background-image: url('assets/img/portal-tile-2.jpg'); background-position: center 25%; }
.col-portal-3 .monolith-bg-image { background-image: url('assets/img/portal-tile-3.png'); background-position: center top; }
.col-portal-4 .monolith-bg-image { background-image: url('assets/img/portal-tile-4.jpg'); background-position: center center; }

.portal-monolith-col:hover .monolith-bg-image,
.portal-monolith-col.touch-focused .monolith-bg-image {
  opacity: 0.9;
  filter: grayscale(0%) contrast(1.15) brightness(1.03);
  transform: scale(1);
}

/* Voile de gradation sombre cinématographique pour garantir une lisibilité absolue */
.monolith-scrim-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 8, 12, 0.25) 0%,
    rgba(6, 8, 12, 0.55) 45%,
    rgba(6, 8, 12, 0.95) 88%,
    rgba(6, 8, 12, 1) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: background 0.5s ease;
}

.portal-monolith-col:hover .monolith-scrim-gradient,
.portal-monolith-col.touch-focused .monolith-scrim-gradient {
  background: linear-gradient(
    to bottom,
    rgba(6, 8, 12, 0.12) 0%,
    rgba(6, 8, 12, 0.38) 40%,
    rgba(6, 8, 12, 0.88) 85%,
    rgba(6, 8, 12, 0.98) 100%
  );
}

/* Onde de choc Ripple au clic/toucher */
.portal-ripple-wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  border: 2.5px solid rgba(245, 158, 11, 0.95);
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.8);
  transform: translate(-50%, -50%) scale(0);
  animation: portalRippleAnim 0.75s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes portalRippleAnim {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; }
}

/* Ligne de scan laser holographique */
.portal-laser-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.95) 50%, transparent 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.85);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.portal-monolith-col:hover .portal-laser-scanline,
.portal-monolith-col.touch-focused .portal-laser-scanline {
  animation: laserScanMove 2.2s linear infinite;
  opacity: 1;
}

@keyframes laserScanMove {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Contenu textuel et typographique en profondeur */
.portal-monolith-content {
  position: relative;
  z-index: 4;
  transform: translateZ(25px);
  transition: transform 0.35s ease;
}

.monolith-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 14px;
  width: fit-content;
  transition: all 0.3s ease;
}

.portal-monolith-col:hover .monolith-badge-pill,
.portal-monolith-col.touch-focused .monolith-badge-pill {
  border-color: rgba(245, 158, 11, 0.65);
  background: rgba(245, 158, 11, 0.16);
}

.monolith-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #f59e0b);
  box-shadow: 0 0 8px var(--gold, #f59e0b);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.35); }
}

.monolith-number {
  font-family: monospace;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold, #f59e0b);
  letter-spacing: 2.2px;
  display: inline-block;
  opacity: 0.95;
}

.monolith-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin-bottom: 12px;
  text-transform: uppercase;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s, text-shadow 0.3s, font-size 0.4s ease;
  word-break: break-word;
}

.portal-monolith-col:hover .monolith-title,
.portal-monolith-col.touch-focused .monolith-title {
  font-size: clamp(26px, 3.2vw, 42px);
  color: #ffffff;
  text-shadow: 0 0 25px rgba(245, 158, 11, 0.65);
  transform: translateX(8px);
}

.portal-monoliths-grid:hover .portal-monolith-col:not(:hover) .monolith-title {
  font-size: clamp(16px, 1.8vw, 24px);
  opacity: 0.85;
}

.portal-monoliths-grid:hover .portal-monolith-col:not(:hover) .monolith-desc {
  opacity: 0.4;
}

.portal-monoliths-grid:hover .portal-monolith-col:not(:hover) .monolith-cta-row {
  opacity: 0.45;
}

.monolith-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  max-width: 340px;
  margin-bottom: 22px;
  transition: color 0.3s, opacity 0.3s;
}

.portal-monolith-col:hover .monolith-desc,
.portal-monolith-col.touch-focused .monolith-desc {
  color: #ffffff;
  opacity: 1;
}

.monolith-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--gold, #f59e0b);
  text-transform: uppercase;
  transition: transform 0.3s ease;
}

.monolith-cta-icon {
  font-size: 16px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-monolith-col:hover .monolith-cta-row,
.portal-monolith-col.touch-focused .monolith-cta-row {
  transform: translateX(8px);
}

.portal-monolith-col:hover .monolith-cta-icon,
.portal-monolith-col.touch-focused .monolith-cta-icon {
  transform: translateX(6px);
}

/* Footer du Portail Neural */
.portal-bottom-bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(6, 8, 12, 0.85);
}

.portal-shortcuts-hint {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal-kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: monospace;
  font-size: 11px;
  color: #ffffff;
}


/* ==========================================================================
   6. RESPONSIVE ADAPTATIONS (MOBILE / TABLETTE)
   ========================================================================== */
@media (max-width: 900px) {
  .quantum-nav-nodes {
    display: none; /* Remplacé par le bouton Portail sur mobile / tablette */
  }
  
  .quantum-equalizer {
    display: none;
  }
  
  .brand-coords-hud {
    display: none;
  }
  
  .neural-portal-overlay {
    overflow-y: auto;
  }
  
  .portal-monoliths-grid {
    flex-direction: column;
    overflow-y: visible;
    gap: 4px;
    height: auto;
    min-height: calc(100vh - 140px);
  }
  
  .portal-monolith-col {
    min-height: 140px;
    flex: 1;
    padding: 24px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .portal-monoliths-grid:hover .portal-monolith-col {
    flex: 1;
    filter: none;
  }
  
  .portal-monolith-col.touch-focused,
  .portal-monolith-col:active,
  .portal-monolith-col:hover {
    flex: 2.2 !important;
    min-height: 220px;
    filter: brightness(1) saturate(1.15) !important;
  }
  
  .monolith-title {
    font-size: 26px;
    margin-bottom: 8px;
  }
  
  .monolith-desc {
    font-size: 13px;
    max-width: 100%;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .quantum-dock-header {
    top: 10px;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .quantum-dock-pill {
    padding: 5px 8px 5px 6px;
    gap: 6px;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
    margin: 0 auto;
    justify-content: space-between;
  }

  .quantum-brand-orb {
    padding: 2px 6px 2px 2px;
    gap: 8px;
  }

  .brand-monogram-orb-wrapper {
    width: 32px;
    height: 32px;
  }

  .brand-monogram-orb {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .brand-name-hud {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .quantum-control-hub {
    gap: 6px;
  }

  .quantum-lang-switch {
    padding: 2px 3px;
  }

  .quantum-lang-btn {
    font-size: 10px;
    padding: 3px 5px;
  }

  .quantum-btn-portal {
    padding: 5px 9px;
    font-size: 10px;
    letter-spacing: 1px;
    gap: 6px;
  }

  .portal-trigger-icon {
    grid-template-columns: repeat(2, 3px);
    gap: 2px;
  }

  .portal-dot {
    width: 3px;
    height: 3px;
  }
  
  .quantum-btn-vip .vip-label-text {
    display: none; /* Cadenas seul sur tout petit écran */
  }
  
  .quantum-btn-vip {
    padding: 5px 8px;
    font-size: 11px;
  }
  
  .portal-top-bar {
    padding: 16px 20px;
  }
  
  .portal-studio-clock {
    display: none;
  }
  
  .portal-bottom-bar {
    padding: 14px 20px;
    font-size: 11px;
  }
  
  .portal-shortcuts-hint {
    display: none;
  }
}

/* ==========================================================================
   6. PAGE D'ACCUEIL : LE GRAND PORTAIL PLEIN ÉCRAN (INDEX.HTML)
   ========================================================================== */
.body-home-portal {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.home-portal-main {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 82px;
  box-sizing: border-box;
  z-index: 10;
}

/* HUD Supérieur Subtil sous le Dock */
.home-portal-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 36px 12px;
  position: relative;
  z-index: 12;
}

.portal-hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--gold, #f59e0b);
  text-transform: uppercase;
}

.portal-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #f59e0b);
  box-shadow: 0 0 8px var(--gold, #f59e0b);
  animation: hudDotPulse 2s ease-in-out infinite;
}

@keyframes hudDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.25); }
}

.home-portal-grid {
  flex: 1;
  min-height: 0; /* Permet le dimensionnement dynamique sans dépasser */
  height: auto;
}

/* Footer Épuré du Grand Portail d'Accueil */
.home-portal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 36px 18px;
  background: rgba(6, 8, 12, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--text-muted);
  position: relative;
  z-index: 12;
}

.home-portal-socials {
  display: flex;
  align-items: center;
  gap: 20px;
}

.home-portal-socials a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.home-portal-socials a:hover {
  color: var(--gold, #f59e0b);
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  transform: translateY(-1px);
}

.home-portal-copy {
  font-size: 11px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 900px) {
  .body-home-portal {
    overflow-y: auto;
    height: auto;
  }
  .home-portal-main {
    height: auto;
    min-height: 100vh;
    padding-top: 75px;
  }
  .home-portal-hud {
    padding: 8px 16px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .home-portal-footer {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .home-portal-socials {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
}

/* ==========================================================================
   7. LE VOLET LATÉRAL MINIATURE DE PORTAIL (SIDEBAR MINI-PORTAL)
   ========================================================================== */
.sidebar-mini-portal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
  z-index: 100002;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.4s;
}

.sidebar-mini-portal.active {
  pointer-events: auto;
  visibility: visible;
}

/* Fond Flouté Assombrissant */
.sidebar-portal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.sidebar-mini-portal.active .sidebar-portal-backdrop {
  opacity: 1;
}

/* Le Panneau Coulissant Latéral */
.sidebar-portal-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  height: 100%;
  background: rgba(9, 12, 17, 0.94);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  border-left: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 
    -20px 0 60px rgba(0, 0, 0, 0.85),
    -2px 0 25px rgba(245, 158, 11, 0.15),
    inset 1px 0 1px rgba(255, 255, 255, 0.1);
  transform: translate3d(105%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  z-index: 2;
  box-sizing: border-box;
}

.sidebar-mini-portal.active .sidebar-portal-panel {
  transform: translate3d(0, 0, 0);
}

/* Header du Tiroir */
.sidebar-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-portal-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 2px;
  color: #ffffff;
}

.sidebar-portal-clock {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold, #f59e0b);
  letter-spacing: 1px;
}

.sidebar-portal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sidebar-portal-close:hover {
  background: var(--gold, #f59e0b);
  color: #05070a;
  border-color: var(--gold, #f59e0b);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
  transform: rotate(90deg) scale(1.08);
}

.sidebar-portal-intro {
  padding: 14px 24px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.sidebar-portal-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.3) 0%, transparent 100%);
}

/* Grille des 4 Tuiles Miniatures Latérales */
.sidebar-portal-tiles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.3) transparent;
}

.sidebar-portal-tiles::-webkit-scrollbar {
  width: 4px;
}

.sidebar-portal-tiles::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.3);
  border-radius: 4px;
}

/* Une Tuile Miniature */
.sidebar-portal-tile {
  position: relative;
  min-height: 106px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(13, 17, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
  text-decoration: none;
  transition: 
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-portal-tile:hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(245, 158, 11, 0.3),
    inset 0 0 20px rgba(245, 158, 11, 0.15);
}

/* Tuile Active de la page actuelle */
.sidebar-portal-tile.current-page {
  border-color: var(--gold, #f59e0b);
  box-shadow: 
    0 0 20px rgba(245, 158, 11, 0.4),
    inset 0 0 15px rgba(245, 158, 11, 0.15);
}

/* Arrière-plan de la tuile miniature */
.mini-tile-bg {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  background-size: cover;
  background-position: center 25%;
  opacity: 0.35;
  filter: grayscale(25%) contrast(1.1) brightness(0.75);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease, opacity 0.4s ease;
  z-index: 1;
}

.sidebar-portal-tile.tile-1 .mini-tile-bg { background-image: url('assets/img/portal-tile-1.jpg'); background-position: center 20%; }
.sidebar-portal-tile.tile-2 .mini-tile-bg { background-image: url('assets/img/portal-tile-2.jpg'); background-position: center 25%; }
.sidebar-portal-tile.tile-3 .mini-tile-bg { background-image: url('assets/img/portal-tile-3.png'); background-position: center top; }
.sidebar-portal-tile.tile-4 .mini-tile-bg { background-image: url('assets/img/portal-tile-4.jpg'); background-position: center center; }

.sidebar-portal-tile:hover .mini-tile-bg,
.sidebar-portal-tile.current-page .mini-tile-bg {
  opacity: 0.85;
  filter: grayscale(0%) contrast(1.15) brightness(1.02);
  transform: scale(1.05);
}

.mini-tile-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 8, 12, 0.95) 0%, rgba(6, 8, 12, 0.5) 60%, rgba(6, 8, 12, 0.2) 100%);
  z-index: 2;
}

.mini-tile-content {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.mini-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.mini-tile-pill {
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--gold, #f59e0b);
  background: rgba(245, 158, 11, 0.12);
  padding: 2px 7px;
  border-radius: 9999px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.mini-tile-pill.pill-vip {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
}

.mini-tile-active-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #05070a;
  background: var(--gold, #f59e0b);
  padding: 2px 6px;
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.mini-tile-vip-tag {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #05070a;
  background: #38bdf8;
  padding: 2px 6px;
  border-radius: 9999px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
}

.mini-tile-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 900;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
  transition: color 0.25s ease;
}

.sidebar-portal-tile:hover .mini-tile-title {
  color: var(--gold, #f59e0b);
}

.mini-tile-title.title-vip {
  color: #38bdf8;
}

.sidebar-portal-tile:hover .mini-tile-title.title-vip {
  color: #7dd3fc;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.7);
}

.mini-tile-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-tile-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold, #f59e0b);
  letter-spacing: 0.5px;
  transition: transform 0.25s ease;
}

.sidebar-portal-tile:hover .mini-tile-action {
  transform: translateX(4px);
}

.mini-tile-action.action-vip {
  color: #38bdf8;
}

.mini-arrow {
  transition: transform 0.25s ease;
}

.sidebar-portal-tile:hover .mini-arrow {
  transform: translateX(4px);
}

/* Footer du Panneau Latéral */
.sidebar-portal-footer {
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(6, 8, 12, 0.95);
}

.sidebar-home-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--gold, #f59e0b);
  text-decoration: none;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  transition: all 0.25s ease;
}

.sidebar-home-link:hover,
.sidebar-home-link.active {
  background: var(--gold, #f59e0b);
  color: #05070a;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
}

.sidebar-portal-copy {
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 1px;
}

/* ==========================================================================
   8. DÉSACTIVATION DE LA LANGUETTE FLOTTANTE DU BORD DROIT
   (Le bord droit reste 100% libre et dégagé pour le scroll tactile sur mobile)
   L'ouverture du mini-portail se fait uniquement via le bouton PORTAIL en haut.
   ========================================================================== */
.floating-portal-tab {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ==========================================================================
   9. MOTEUR DE RETOURNEMENT 3D D'ÉCRAN (3D SCREEN FLIP TURNOVER)
   L'écran se retourne entièrement en 3D entre chaque page (contenu ET fond d'écran),
   tandis que le menu en haut reste parfaitement fixe et imperturbable.
   AU SCROLL : le fond d'écran reste rigoureusement en PLAN FIXE sous la page.
   ========================================================================== */

/* ARRIÈRE-PLANS DE PAGE EN PLAN FIXE ABSOLU AU SCROLL */
.studio-backdrop-wrapper,
.portal-cosmic-grid,
.music-audio-canvas,
.world-map-canvas,
.sand-reservoir-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform-origin: 50% 50vh;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.page-flip-stage {
  width: 100%;
  min-height: 100vh;
  transform-style: preserve-3d;
  transform-origin: 50% 50vh;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

/* Évitement de FOUC si la page arrive d'un retournement 3D : Contenu ET Fond synchronisés */
html.page-flipping-in .page-flip-stage,
html.page-flipping-in .studio-backdrop-wrapper,
html.page-flipping-in .portal-cosmic-grid,
html.page-flipping-in .music-audio-canvas,
html.page-flipping-in .world-map-canvas,
html.page-flipping-in .sand-reservoir-canvas {
  transform: perspective(1800px) rotateY(90deg) translateZ(-240px) scale(0.86);
  filter: brightness(0.15) contrast(1.4) blur(8px);
  opacity: 0;
}

/* Animation de Sortie : Retournement 3D synchrone du contenu ET du fond d'écran */
.page-flip-stage.screen-flipping-out,
.studio-backdrop-wrapper.screen-flipping-out,
.portal-cosmic-grid.screen-flipping-out,
.music-audio-canvas.screen-flipping-out,
.world-map-canvas.screen-flipping-out,
.sand-reservoir-canvas.screen-flipping-out {
  animation: screen3DFlipOut 0.42s cubic-bezier(0.55, 0.05, 0.2, 1) forwards !important;
  pointer-events: none !important;
}

@keyframes screen3DFlipOut {
  0% {
    transform: perspective(1800px) rotateY(0deg) translateZ(0px) scale(1);
    filter: brightness(1) contrast(1) blur(0px);
    opacity: 1;
  }
  40% {
    filter: brightness(1.35) contrast(1.15) drop-shadow(0 0 50px rgba(245, 158, 11, 0.45));
  }
  100% {
    transform: perspective(1800px) rotateY(-90deg) translateZ(-240px) scale(0.86);
    filter: brightness(0.15) contrast(1.4) blur(8px);
    opacity: 0;
  }
}

/* Animation d'Entrée : Déploiement et révélation 3D synchrone du contenu ET du fond d'écran */
.page-flip-stage.screen-flipping-in,
.studio-backdrop-wrapper.screen-flipping-in,
.portal-cosmic-grid.screen-flipping-in,
.music-audio-canvas.screen-flipping-in,
.world-map-canvas.screen-flipping-in,
.sand-reservoir-canvas.screen-flipping-in {
  animation: screen3DFlipIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes screen3DFlipIn {
  0% {
    transform: perspective(1800px) rotateY(90deg) translateZ(-240px) scale(0.86);
    filter: brightness(0.15) contrast(1.4) blur(8px);
    opacity: 0;
  }
  55% {
    filter: brightness(1.25) contrast(1.1) drop-shadow(0 0 40px rgba(245, 158, 11, 0.3));
  }
  100% {
    transform: perspective(1800px) rotateY(0deg) translateZ(0px) scale(1);
    filter: brightness(1) contrast(1) blur(0px);
    opacity: 1;
  }
}

/* Balayage Optique Lumineux lors du Retournement */
.flip-optic-sheen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9995;
  background: linear-gradient(115deg, transparent 25%, rgba(245, 158, 11, 0.18) 48%, rgba(254, 240, 138, 0.45) 50%, rgba(245, 158, 11, 0.18) 52%, transparent 75%);
  opacity: 0;
  transform: translateX(-100%) skewX(-20deg);
}

.flip-optic-sheen.active {
  animation: opticSheenSweep 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes opticSheenSweep {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(-20deg);
  }
  30% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(100%) skewX(-20deg);
  }
}