/* ============================================================
   NEBULA — aperçu des directions de design.
   Deux palettes FIGÉES, jamais retouchées :
   - Sombre = Marine (ex-V6)   - Clair = (ex-V12)
   Appliquées via .nbx[data-mode="dark|light"] (défaut = dark).
   Chaque page importe dist/styles.css (fonts Outfit/DM Mono + tokens de base)
   puis ce fichier surcharge la palette et fournit le "chrome" d'aperçu.
   ============================================================ */

/* ---- Palette SOMBRE (Marine) : défaut ---- */
.nbx {
  --nb-bg: #0d1520; --nb-surface-1: #121c29; --nb-surface-2: #172433; --nb-surface-3: #1d2c3e;
  --nb-bg-glass: rgba(13, 21, 32, 0.82);
  --nb-teal: #2ec4b6; --nb-teal-strong: #25a89c; --nb-teal-soft: rgba(46, 196, 182, 0.12);
  --nb-teal-border: rgba(46, 196, 182, 0.35); --nb-teal-glow: rgba(46, 196, 182, 0.16); --nb-on-teal: #06211e;
  --nb-text: #e9eef4; --nb-text-muted: #93a4b5; --nb-text-faint: #7a8ea1;
  --nb-border: rgba(255, 255, 255, 0.09); --nb-border-strong: rgba(255, 255, 255, 0.16);
  --nb-elevate: 0 24px 60px rgba(0, 0, 0, 0.45);
  --nb-grid-line: rgba(255, 255, 255, 0.05);
}
/* ---- Palette CLAIRE ---- */
.nbx[data-mode="light"] {
  --nb-bg: #f4f5f7; --nb-surface-1: #ffffff; --nb-surface-2: #eceef1; --nb-surface-3: #e3e6ea;
  --nb-bg-glass: rgba(244, 245, 247, 0.82);
  --nb-teal: #0c807d; --nb-teal-strong: #0a6764; --nb-teal-soft: rgba(12, 128, 125, 0.12);
  --nb-teal-border: rgba(12, 128, 125, 0.35); --nb-teal-glow: rgba(12, 128, 125, 0.16); --nb-on-teal: #ffffff;
  --nb-text: #141b26; --nb-text-muted: #485261; --nb-text-faint: #586374;
  --nb-border: rgba(0, 0, 0, 0.1); --nb-border-strong: rgba(0, 0, 0, 0.2);
  --nb-elevate: 0 24px 60px rgba(20, 27, 38, 0.12);
  --nb-grid-line: rgba(20, 27, 38, 0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.nbx {
  background: var(--nb-bg); color: var(--nb-text);
  font-family: var(--nb-font-sans, "Outfit", system-ui, sans-serif);
  min-height: 100vh; overflow-x: hidden;

  transition: background 0.4s cubic-bezier(.2,.7,.3,1), color 0.4s cubic-bezier(.2,.7,.3,1);
}
.nbx img { max-width: 100%; display: block; }
.nbx a { color: inherit; }

/* ============================================================
   Utilitaires partagés
   ============================================================ */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 860px; }
.eyebrow {
  font-family: var(--nb-font-mono, "DM Mono", monospace); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-teal);
}
.mono { font-family: var(--nb-font-mono, "DM Mono", monospace); }
.hair { height: 1px; background: var(--nb-border); border: 0; margin: 0; }

/* Révélation au scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
  .nbx { scroll-behavior: auto; }
}

/* ============================================================
   Sélecteur de langue + liens de pied de page (toutes pages)
   ============================================================ */
.lang { display: inline-flex; gap: 2px; font-family: var(--nb-font-mono); font-size: 11px; letter-spacing: .1em; }
.lang a { color: var(--nb-text-faint); padding: 6px 7px; border-radius: 8px; text-decoration: none; }
.lang a:hover { color: var(--nb-text); }
.lang a[aria-current="true"] { color: var(--nb-teal); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-nav a { color: var(--nb-text-muted); text-decoration: none; }
.foot-nav a:hover { color: var(--nb-teal); }
/* Barre de navigation : jamais de retour à la ligne, éléments secondaires masqués en largeur moyenne */
.pf-nav .pf-brand, .pf-nav__links a, .pf-nav .pf-btn { white-space: nowrap; }
@media (max-width: 1180px) { .pf-nav .nav-opt, .pf-nav .pf-brand small { display: none; } }