/* ==========================================================================
   V3 — Corrections apportées par rapport à V2 :
   1. Briques dorées/violettes chassées par la souris (code repris de la prod)
   2. Mode Jour plus doux (blanc cassé/doré au lieu d'ivoire trop clair)
   3. Section Objectif : texte toujours lisible en Jour (overlay sombre conservé)
   4. Trajectoire : animations hover restaurées (opacité, couleur, scale)
   5. Signature : radar 4 axes cardinaux (N/S/E/O), style Chart.js
   6. Horizon : cockpit lisible avec labels ALTITUDE / CAP / INCLINAISON
   ========================================================================== */

:root[data-theme="nuit"] {
  --void: #000000;
  --space: #0A0A0F;
  --space-2: #0F0F18;
  --space-3: #141420;
  --quantum: #C8A956;
  --quantum-dim: #8B6F2A;
  --psych: #7B2CBF;
  --neon: #FF006E;
  --cyan: #00FFF0;
  --cyan-signal: #00D4FF;
  --text-strong: #FFFFFF;
  --text-default: #E5E5E8;
  --text-muted: #9CA3AF;
  --text-subtle: #6B7280;
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --glass-bg: rgba(10, 10, 15, 0.6);
  --glass-border: rgba(255, 255, 255, 0.05);
  --scanline-opacity: 0.05;
  --card-bg: rgba(255, 255, 255, 0.05);
  --cursor-blend: difference;
  --nav-blend: difference;
  --brick-base: #1a1a1a;
  --brick-wireframe: rgba(255,255,255,0.85);
  --objective-overlay: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
}

/* ========================================================================
   Mode Jour — palette "blanc cassé / doré" (V3)
   Plus doux pour les yeux, contraste maîtrisé, teinte chaude
   ======================================================================== */
:root[data-theme="jour"] {
  --void: #FFFFFF;
  --space: #EFE7D2;            /* Blanc cassé doré (V3 — était #F5F3EF) */
  --space-2: #E8DFC5;            /* Légèrement plus foncé pour contraste */
  --space-3: #DFD4B4;
  --quantum: #7A5F1F;            /* Or foncé plus saturé pour lisibilité */
  --quantum-dim: #A68A3C;
  --psych: #4E1781;              /* Violet sombre pour lisibilité */
  --neon: #A8003D;               /* Rose profond */
  --cyan: #006B78;               /* Cyan profond */
  --cyan-signal: #006B78;
  --text-strong: #1F1A0D;        /* Presque noir chaud */
  --text-default: #2E281A;
  --text-muted: #5A5240;
  --text-subtle: #857B63;
  --border-subtle: rgba(122, 95, 31, 0.12);
  --border: rgba(122, 95, 31, 0.22);
  --border-strong: rgba(122, 95, 31, 0.4);
  --glass-bg: rgba(250, 244, 225, 0.85);
  --glass-border: rgba(122, 95, 31, 0.14);
  --scanline-opacity: 0;
  --card-bg: rgba(122, 95, 31, 0.05);
  --cursor-blend: normal;
  --nav-blend: normal;
  --brick-base: rgba(122, 95, 31, 0.18);
  --brick-wireframe: rgba(31, 26, 13, 0.5);
  /* Section Objectif : même overlay sombre qu'en Nuit — les images sont foncées */
  --objective-overlay: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, transparent 100%);
}

/* Base */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  background-color: var(--space);
  color: var(--text-strong);
  cursor: auto;
  font-family: 'Exo 2', sans-serif;
  transition: background-color 450ms ease, color 450ms ease;
}
body, body *:not(script):not(style) {
  transition: background-color 450ms ease, border-color 450ms ease,
              color 450ms ease, fill 450ms ease, stroke 450ms ease,
              box-shadow 450ms ease, opacity 450ms ease;
}
body.no-transitions, body.no-transitions * { transition: none !important; }
body.custom-cursor-loaded { cursor: none; }

.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-rajdhani { font-family: 'Rajdhani', sans-serif; }
.font-code { font-family: 'Source Code Pro', monospace; }

/* ========================================================================
   Theme-aware overrides
   ======================================================================== */
[data-theme="jour"] .bg-\[\#0A0A0F\]\/80 { background-color: rgba(232,223,197,0.75) !important; }
[data-theme="jour"] .bg-\[\#0A0A0F\],
[data-theme="jour"] .bg-black,
[data-theme="jour"] .bg-\[\#050507\] { background-color: var(--space-2) !important; }
[data-theme="jour"] .bg-black\/40 { background-color: rgba(250,244,225,0.55) !important; }
[data-theme="jour"] .bg-white\/5 { background-color: rgba(122,95,31,0.05) !important; }
[data-theme="jour"] .bg-white\/10 { background-color: rgba(122,95,31,0.08) !important; }

[data-theme="jour"] .text-white { color: var(--text-strong) !important; }
[data-theme="jour"] .text-white\/90 { color: rgba(31,26,13,0.92) !important; }
[data-theme="jour"] .text-white\/80 { color: rgba(31,26,13,0.82) !important; }
[data-theme="jour"] .text-white\/70 { color: rgba(31,26,13,0.72) !important; }
[data-theme="jour"] .text-gray-300 { color: var(--text-default) !important; }
[data-theme="jour"] .text-gray-400 { color: var(--text-muted) !important; }
[data-theme="jour"] .text-gray-500 { color: var(--text-muted) !important; }
[data-theme="jour"] .text-gray-600 { color: var(--text-subtle) !important; }
[data-theme="jour"] .text-neutral-300 { color: var(--text-default) !important; }

/* Accents adaptés Jour */
[data-theme="jour"] .text-\[\#C8A956\] { color: var(--quantum) !important; }
[data-theme="jour"] .border-\[\#C8A956\] { border-color: var(--quantum) !important; }
[data-theme="jour"] .bg-\[\#C8A956\] { background-color: var(--quantum) !important; }
[data-theme="jour"] .text-\[\#7B2CBF\] { color: var(--psych) !important; }
[data-theme="jour"] .border-\[\#7B2CBF\] { border-color: var(--psych) !important; }
[data-theme="jour"] .bg-\[\#7B2CBF\] { background-color: var(--psych) !important; }
[data-theme="jour"] .text-\[\#FF006E\] { color: var(--neon) !important; }
[data-theme="jour"] .border-\[\#FF006E\] { border-color: var(--neon) !important; }
[data-theme="jour"] .text-\[\#00FFF0\] { color: var(--cyan) !important; }
[data-theme="jour"] .border-\[\#00FFF0\] { border-color: var(--cyan) !important; }
[data-theme="jour"] .text-\[\#00d4ff\] { color: var(--cyan-signal) !important; }
[data-theme="jour"] .border-\[\#00d4ff\]\/20 { border-color: rgba(0,107,120,0.3) !important; }
[data-theme="jour"] .bg-\[\#00d4ff\]\/\[0\.03\] { background-color: rgba(0,107,120,0.05) !important; }
[data-theme="jour"] .border-\[\#C8A956\]\/20 { border-color: rgba(122,95,31,0.28) !important; }
[data-theme="jour"] .bg-\[\#C8A956\]\/\[0\.03\] { background-color: rgba(122,95,31,0.04) !important; }
[data-theme="jour"] .text-\[\#C8A956\]\/60 { color: rgba(122,95,31,0.75) !important; }

[data-theme="jour"] .border-white\/5 { border-color: var(--border-subtle) !important; }
[data-theme="jour"] .border-white\/10 { border-color: var(--border) !important; }
[data-theme="jour"] .border-white\/20 { border-color: var(--border-strong) !important; }
[data-theme="jour"] .border-gray-800 { border-color: rgba(122,95,31,0.3) !important; }

[data-theme="jour"] .mix-blend-screen { mix-blend-mode: multiply !important; opacity: 0.45 !important; }
[data-theme="jour"] .mix-blend-difference { mix-blend-mode: normal !important; }
[data-theme="jour"] .mix-blend-luminosity { mix-blend-mode: normal !important; opacity: 0.15 !important; }

/* V4 — Hero bottom gradient : en mode Jour, remplace le noir par un dégradé doré clair
   qui se fond vers le fond ivoire sans assombrir le texte */
[data-theme="jour"] .hero-gradient {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(200, 169, 86, 0.08) 40%,
    rgba(232, 223, 197, 0.85) 80%,
    var(--space) 100%) !important;
}

/* V5 — Terminal caret clignotant (restauré du site prod) */
@keyframes caretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.terminal-caret-block {
  display: block;
  width: 12px;
  height: 18px;
  margin: 8px auto 0;
  background: var(--quantum);
  border-radius: 1px;
  animation: caretBlink 1s steps(1) infinite;
  box-shadow: 0 0 8px var(--accent-glow, rgba(200,169,86,0.4));
}

/* V7 — Animations cercle rose + carré violet passent AU PREMIER PLAN (z-20)
   Cercle rose : rotation lente + clignotement d'intensité */
@keyframes ringPulse {
  0%, 100% {
    opacity: 0.35;
    box-shadow: 0 0 4px rgba(255, 0, 110, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 14px rgba(255, 0, 110, 0.8),
      0 0 28px rgba(255, 0, 110, 0.4),
      inset 0 0 8px rgba(255, 0, 110, 0.5);
  }
}
.ring-rose-anim {
  animation:
    spin-slow 18s linear infinite,
    ringPulse 2.4s ease-in-out infinite;
}
@keyframes squareFloat {
  0%, 100% { transform: rotate(45deg) scale(1); opacity: 0.6; }
  50% { transform: rotate(90deg) scale(1.08); opacity: 1; }
}
.square-psych-anim {
  animation: squareFloat 14s ease-in-out infinite;
}

/* V10.1 (Robin) — Carré violet CENTRÉ sur le tag FONDATEUR, tourne sur lui-même.
   Le wrapper est un point (width/height 0), repositionné dynamiquement par JS
   au chargement + resize pour coïncider avec le centre visuel du tag #fondateur-tag
   (plus robuste qu'une valeur CSS fixe — la police Orbitron peut se charger en retard).
   Valeurs bottom/left ci-dessous = fallback si JS désactivé. */
.fondateur-orbit-wrap {
  position: absolute;
  bottom: 25px;
  left: 58px;
  width: 0;
  height: 0;
  z-index: 22;
}
.fondateur-orbit-square {
  position: absolute;
  /* Carré assez grand pour englober le mot FONDATEUR (~120px de diagonale) */
  width: 110px;
  height: 110px;
  top: -55px;     /* -height/2 → centre du carré aligné avec le centre du tag */
  left: -55px;    /* -width/2 */
  border: 2px solid var(--psych);
  opacity: 0.55;
  box-shadow: 0 0 14px rgba(123, 44, 191, 0.35);
  transform-origin: center center;
  animation: fondateurSquareSpin 9s linear infinite;
}
@keyframes fondateurSquareSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* V6 — "SINGULARITÉ ARCHITECTURALE" rayonne comme une étoile lointaine
   Double animation : apparition initiale + twinkle permanent
   Le halo respire, ne touche pas à l'opacité du texte (lisibilité préservée) */
@keyframes starlightAppear {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes starlightTwinkle {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(0, 255, 240, 0.25),
      0 0 10px rgba(0, 255, 240, 0.12);
  }
  35% {
    text-shadow:
      0 0 8px rgba(0, 255, 240, 0.55),
      0 0 16px rgba(0, 255, 240, 0.28);
  }
  55% {
    text-shadow:
      0 0 12px rgba(0, 255, 240, 0.9),
      0 0 22px rgba(0, 255, 240, 0.55),
      0 0 36px rgba(0, 255, 240, 0.25),
      0 0 50px rgba(0, 255, 240, 0.1);
  }
  75% {
    text-shadow:
      0 0 7px rgba(0, 255, 240, 0.45),
      0 0 14px rgba(0, 255, 240, 0.22);
  }
}
@keyframes starlightDotPulse {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) scale(0.9);
    box-shadow: 0 0 4px rgba(0, 255, 240, 0.4);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 10px rgba(0, 255, 240, 1), 0 0 20px rgba(0, 255, 240, 0.5);
  }
}
.starlight {
  position: relative;
  display: inline-block;
  animation:
    starlightAppear 1.2s ease 1.2s forwards,
    starlightTwinkle 4.8s ease-in-out 2.4s infinite;
  opacity: 0;
}
/* Petit point qui clignote (comme le pixel d'une étoile) à gauche ET à droite du texte */
.starlight::before,
.starlight::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #00FFF0;
  animation: starlightDotPulse 2.6s ease-in-out infinite;
}
.starlight::before { left: -18px; }
.starlight::after { right: -18px; animation-delay: 1.3s; }
[data-theme="jour"] .starlight::before,
[data-theme="jour"] .starlight::after { background: var(--cyan); }

/* V3 — Section Objectif : texte blanc FORCÉ dans les 4 encadrés (fond image sombre dans les 2 modes) */
.objectif-card,
.objectif-card * { color: #FFFFFF !important; }
.objectif-card .font-orbitron,
.objectif-card h3 { color: #FFFFFF !important; }
.objectif-card .font-rajdhani { color: #E5E7EB !important; }
.objectif-card [class*="text-gray-"] { color: #D1D5DB !important; }

/* Scrollbar + focus */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--space); }
::-webkit-scrollbar-thumb { background: var(--quantum); border-radius: 2px; }
:focus-visible { outline: 2px solid var(--quantum); outline-offset: 2px; }

/* ========================================================================
   Animations
   ======================================================================== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pulseSoft { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.94); } }
@keyframes glitch {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}
.glitch-hover:hover { animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite; color: var(--quantum); }
.perspective-1000 { perspective: 1000px; }

/* ========================================================================
   Cursor
   ======================================================================== */
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%, -50%); will-change: transform;
}
#cursor-dot {
  width: 8px; height: 8px; background: var(--quantum);
  box-shadow: 0 0 8px var(--quantum); mix-blend-mode: var(--cursor-blend);
}
#cursor-ring {
  width: 40px; height: 40px; border: 2px solid var(--quantum);
  opacity: 0.7; mix-blend-mode: var(--cursor-blend);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
#cursor-ring.hover { width: 64px; height: 64px; opacity: 1; }
@media (hover: none) { #cursor-dot, #cursor-ring { display: none !important; } }

/* Scanlines */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(200,169,86,0.6) 2px 3px);
  opacity: var(--scanline-opacity); mix-blend-mode: overlay;
}

nav.main-nav { mix-blend-mode: var(--nav-blend); }
[data-theme="jour"] nav.main-nav .text-gray-400 { color: #3A3020 !important; }

/* Theme toggle */
.theme-toggle {
  position: relative; width: 52px; height: 28px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  cursor: pointer; transition: all 250ms ease; flex-shrink: 0;
}
[data-theme="jour"] .theme-toggle { background: rgba(122,95,31,0.1); }
.theme-toggle:hover { border-color: var(--quantum); }
.theme-toggle-thumb {
  position: absolute; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--quantum); display: grid; place-items: center;
  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 14px rgba(200,169,86,0.4);
}
.theme-toggle-thumb svg { width: 12px; height: 12px; color: var(--space); stroke-width: 2.4; }
/* V10.1 (Robin) — Thumb positionné sur l'icône du mode ACTIF :
   - Nuit  → thumb à droite (sur la LUNE)
   - Jour  → thumb à gauche (sur le SOLEIL) */
[data-theme="nuit"] .theme-toggle-thumb { left: 26px; }
[data-theme="jour"] .theme-toggle-thumb { left: 2px; }
.theme-toggle-icons { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; pointer-events: none; }
.theme-toggle-icons svg { width: 11px; height: 11px; color: var(--text-subtle); }
/* V10.1 (Robin) — Les 2 icônes (soleil à gauche + lune à droite) restent visibles
   en permanence. Le thumb doré glisse de l'une à l'autre. On ne masque plus
   l'icône du mode opposé (qui donnait l'impression de voir 2 lunes ou 2 soleils). */
.theme-toggle-thumb svg { display: none; }

/* ========================================================================
   Presentation section — halos kept + abstract motif
   ======================================================================== */
.presentation-motif { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.presentation-motif .shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.4; }
[data-theme="jour"] .presentation-motif .shape { opacity: 0.28; filter: blur(70px); }
.presentation-motif .s1 { top: -10%; left: 10%; width: 340px; height: 340px;
  background: radial-gradient(circle, var(--quantum) 0%, transparent 60%); }
.presentation-motif .s2 { bottom: -10%; right: 15%; width: 420px; height: 420px;
  background: radial-gradient(circle, var(--psych) 0%, transparent 60%); }
.presentation-motif .s3 { top: 40%; left: 55%; width: 220px; height: 220px;
  background: radial-gradient(circle, var(--cyan-signal) 0%, transparent 60%); opacity: 0.2; }
.presentation-motif .grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--quantum) 1px, transparent 1px),
    linear-gradient(to bottom, var(--quantum) 1px, transparent 1px);
  background-size: 80px 80px; opacity: 0.04;
}
[data-theme="jour"] .presentation-motif .grid-overlay { opacity: 0.08; }

/* V4 — Photo Robin dans la section Présentation (cadre sombre permanent, fonctionne en Nuit ET Jour) */
.robin-photo-frame {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  flex-shrink: 0;
}
.robin-photo-halo {
  position: absolute;
  inset: -14px;
  background: radial-gradient(circle at 30% 20%, rgba(200,169,86,0.45) 0%, transparent 55%),
              radial-gradient(circle at 70% 80%, rgba(123,44,191,0.35) 0%, transparent 60%);
  filter: blur(30px);
  opacity: 0.7;
  z-index: 0;
  pointer-events: none;
  animation: pulseSoft 6s ease-in-out infinite;
}
.robin-photo-inner {
  position: absolute;
  inset: 0;
  background: #0A0A0F;                    /* Reste sombre dans les 2 modes */
  border: 1px solid rgba(200,169,86,0.35);
  border-radius: 4px;
  overflow: hidden;
  z-index: 1;
}
.robin-photo-inner::before {
  /* Coins décoratifs en haut à gauche — effet "viseur" */
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 24px; height: 24px;
  border-top: 1px solid var(--quantum);
  border-left: 1px solid var(--quantum);
  z-index: 3;
}
.robin-photo-inner::after {
  content: '';
  position: absolute;
  bottom: 10px; right: 10px;
  width: 24px; height: 24px;
  border-bottom: 1px solid var(--quantum);
  border-right: 1px solid var(--quantum);
  z-index: 3;
}
.robin-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* V10.1 (Robin) — Photo en couleurs naturelles (option D) :
     retrait de `mix-blend-mode: luminosity`, `opacity: 0.9` et du filtre
     contrast/brightness qui donnaient un rendu N&B stylisé. */
  opacity: 1;
}
.robin-photo-overlay {
  /* Dégradé subtil qui donne de la texture */
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(200,169,86,0.1) 50%,
    rgba(10,10,15,0.6) 100%);
  z-index: 2;
  pointer-events: none;
}
.robin-photo-rec {
  position: absolute;
  top: 14px; right: 14px;
  display: flex; align-items: center; gap: 5px;
  z-index: 4;
  font-family: 'Source Code Pro', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--neon);
}
.robin-photo-rec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  animation: pulseSoft 1.4s ease-in-out infinite;
}
.robin-photo-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  padding: 5px 9px;
  background: rgba(10,10,15,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--quantum);
  border-radius: 2px;
  z-index: 4;
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--quantum);
}

/* Fallback silhouette si l'image pp-vr-pro.png n'est pas dispo (mode maquette) */
.robin-photo-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1a1a1f 0%, #0a0a0f 100%);
}
.robin-photo-fallback svg { width: 50%; opacity: 0.35; color: var(--quantum); }

.genesis-card-motif {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(135deg, rgba(200,169,86,0.18) 0%, rgba(123,44,191,0.12) 50%, rgba(0,212,255,0.15) 100%);
}
[data-theme="jour"] .genesis-card-motif {
  background: linear-gradient(135deg, rgba(122,95,31,0.22) 0%, rgba(78,23,129,0.12) 50%, rgba(0,107,120,0.15) 100%);
}
.genesis-card-motif::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(200,169,86,0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200,169,86,0.3) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0.25;
}
.genesis-card-motif::after {
  content: ''; position: absolute; top: 40%; left: 50%;
  width: 260px; height: 260px; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, var(--quantum) 0%, transparent 65%);
  filter: blur(40px); opacity: 0.4; animation: pulseSoft 5s ease-in-out infinite;
}

/* ========================================================================
   Trajectoire — hover animations restaurées (V3)
   ======================================================================== */
.timeline-node .timeline-label {
  opacity: 0.45;
  transition: opacity 400ms ease, color 400ms ease;
}
.timeline-node:hover .timeline-label { opacity: 1; }
.timeline-node .timeline-label .timeline-title { transition: color 400ms ease; }
.timeline-node:hover .timeline-label.gold .timeline-title { color: var(--quantum) !important; }
.timeline-node:hover .timeline-label.neon .timeline-title { color: var(--neon) !important; }
.timeline-node:hover .timeline-label.psych .timeline-title { color: var(--psych) !important; }

.timeline-dot {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), background-color 350ms ease;
}
.timeline-node:hover .timeline-dot { transform: rotate(45deg) scale(1.55); }
.timeline-node:hover .timeline-dot.gold { background: var(--quantum) !important; }
.timeline-node:hover .timeline-dot.neon { background: var(--neon) !important; }
.timeline-node:hover .timeline-dot.psych { background: var(--psych) !important; }

.timeline-reveal {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.timeline-node:hover .timeline-reveal { opacity: 1; transform: translateX(0); }
@media (max-width: 1023px) {
  .timeline-reveal { opacity: 1 !important; transform: none !important; text-align: center !important; }
}

/* ========================================================================
   V3 — Signature & Horizon visuals
   ======================================================================== */
.viz-wrap-v3 {
  position: relative; width: 100%; max-width: 300px; margin: 24px auto 16px;
  aspect-ratio: 1 / 1;
}
.viz-label {
  font-family: 'Source Code Pro', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--text-muted);
}
.viz-label-strong {
  fill: var(--quantum);
  font-weight: 700;
}

/* Signature orbit — V6 : inset ajusté pour matcher la nouvelle taille du radar (viewBox élargi) */
.sig-orbit {
  position: absolute; inset: 20%;
  border-radius: 50%;
  border: 1px dashed rgba(200, 169, 86, 0.3);
  pointer-events: none;
  animation: spin-slow 50s linear infinite;
}
[data-theme="jour"] .sig-orbit { border-color: rgba(122, 95, 31, 0.35); }
.sig-orbit::before {
  content: ''; position: absolute; top: -4px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--quantum); border-radius: 50%;
  box-shadow: 0 0 12px var(--quantum);
}

/* Horizon rotating outer ring */
.hz-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  animation: spin-slow 80s linear infinite;
  pointer-events: none;
}

/* V5 — Canvas constellation en fond de la section Signature + Horizon.
   Fondu progressif piloté par le JS via la variable --constellation-alpha. */
.constellation-section {
  position: relative;
  overflow: hidden;
}
.constellation-section > .constellation-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.constellation-section.awake > .constellation-canvas-wrap { opacity: 1; }
.constellation-section > .constellation-canvas-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* Overlay de fondu côté haut/bas pour que la constellation se fonde dans les sections voisines */
.constellation-section::before,
.constellation-section::after {
  content: ''; position: absolute; left: 0; right: 0; height: 120px;
  z-index: 1; pointer-events: none;
}
.constellation-section::before {
  top: 0;
  background: linear-gradient(to bottom, var(--space) 0%, transparent 100%);
}
.constellation-section::after {
  bottom: 0;
  background: linear-gradient(to top, var(--space) 0%, transparent 100%);
}
.constellation-section > .max-w-5xl { position: relative; z-index: 2; }

/* Intro banner */
.intro-banner {
  position: fixed; bottom: 24px; left: 24px; max-width: 300px;
  background: var(--space-2); backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong); border-left: 3px solid var(--quantum);
  border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5); z-index: 100;
  animation: fadeIn 600ms ease 800ms both;
}
[data-theme="jour"] .intro-banner { background: #FAF5E9; box-shadow: 0 20px 40px rgba(31,26,13,0.2); }
.intro-banner-title {
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--quantum); text-transform: uppercase;
  margin-bottom: 8px; display: flex; justify-content: space-between;
}
.intro-banner-close { cursor: pointer; opacity: 0.6; }
.intro-banner-close:hover { opacity: 1; }
.intro-banner p { font-size: 11.5px; color: var(--text-default); line-height: 1.5; margin: 4px 0; }
.intro-banner kbd {
  font-family: 'Source Code Pro', monospace; font-size: 10px;
  padding: 1px 5px; border-radius: 3px; background: var(--card-bg);
  border: 1px solid var(--border); color: var(--quantum);
}

@media (max-width: 767px) {
  nav { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  #cursor-dot, #cursor-ring { display: none !important; }
  /* V10 mobile — sections moins gourmandes en padding vertical */
  section { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .constellation-section { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  /* V10 mobile — le bouton CONTACT desktop disparaît au profit du menu hamburger */
  .nav-cta-desktop { display: none !important; }
  /* V10 mobile — tags "COSMOS.ACTIF / FLUX.ACTIF" peuvent wrapper proprement */
  .section-right-tag { white-space: normal !important; text-align: right; max-width: 160px; line-height: 1.5; }
}
@media (min-width: 768px) {
  .nav-burger, #mobile-menu { display: none !important; }
}

/* ==========================================================================
   V10 mobile — Menu hamburger + drawer overlay
   ========================================================================== */
.nav-burger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  transition: all 200ms ease;
}
.nav-burger:hover { border-color: var(--quantum); }
.nav-burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--quantum);
  transition: all 200ms ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(10, 10, 15, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
[data-theme="jour"] #mobile-menu { background: rgba(239, 231, 210, 0.98); }
#mobile-menu.open { opacity: 1; pointer-events: auto; }
#mobile-menu a {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-strong);
  transition: color 200ms ease;
}
#mobile-menu a:hover { color: var(--quantum); }
#mobile-menu .mobile-menu-cta {
  margin-top: 16px;
  padding: 12px 32px;
  border: 1px solid var(--quantum);
  color: var(--quantum);
  font-size: 13px;
  letter-spacing: 0.2em;
}

/* ============================================================================
   Bouton "TRANSMETTRE SIGNAL" — section "Initier le contact" (homepage)
   Fix 2026-05-06 (Robin) : au hover, le fond passe en --text-strong (blanc en
   mode Nuit, presque-noir en mode Jour) via l'overlay div en width:100%.
   Le texte doit donc s'inverser pour rester lisible → --space-2 dans les
   deux thèmes (noir profond en Nuit, crème en Jour) garantit le contraste.
   ============================================================================ */
.btn-transmit-text {
  color: var(--text-strong);
  transition: color 250ms ease-out;
}
.btn-transmit:hover .btn-transmit-text,
.btn-transmit:focus-visible .btn-transmit-text {
  color: var(--space-2);
}

/* ============================================================================
   PROMESSE — Face-à-face cells (V5 refonte section "La Promesse")
   Bandeau accroche 88% + 3 paires problème/solution + connecteur cercle.
   Markup : voir v10-body.php colonne droite.
   ============================================================================ */

/* Jauge animée 0 → cible (var(--gauge-target) injectée inline) */
.stat-gauge {
  width: 0 !important;
  transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-cell.in-view .stat-gauge {
  width: var(--gauge-target) !important;
}

/* ===== Cellule PROBLÈME : "enfoncée" — ombre interne + opacité douce ===== */
.cell-problem {
  background: rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.stat-pair:hover .cell-problem { opacity: 1; }

/* ===== Cellule SOLUTION : "soulevée" — ombre externe + glow identité ===== */
.cell-solution {
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}
.cell-solution.glow-quantum {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(200, 169, 86, 0.12),
    inset 0 1px 0 rgba(200, 169, 86, 0.15);
}
.cell-solution.glow-cyan {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(0, 255, 240, 0.14),
    inset 0 1px 0 rgba(0, 255, 240, 0.15);
}
.cell-solution.glow-success {
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(74, 222, 128, 0.12),
    inset 0 1px 0 rgba(74, 222, 128, 0.15);
}

/* ===== Connecteur cercle "→" entre cellules (desktop) ===== */
.pair-connector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--space-bg, #0A0A0F);
  border: 1px solid rgba(200, 169, 86, 0.4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--quantum, #C8A956);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  box-shadow: 0 0 16px rgba(200, 169, 86, 0.2);
}

/* Mobile : stack vertical, flèche rotate 90° pour pointer vers le bas */
@media (max-width: 767px) {
  .pair-connector {
    position: relative;
    top: auto;
    left: auto;
    margin: -8px auto;
    transform: rotate(90deg);
  }
}

/* ===== Pulse indicateur bandeau accroche 88% ===== */
@keyframes promesse-pulse-glow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.pulse-indicator {
  animation: promesse-pulse-glow 2s ease-in-out infinite;
}