/* ═══════════════════════════════════════════════════════════════════════════
   NÉOVA — les styles de la navigation partagée (voir `nav.html`).

   Repris à l'identique de `neova-site.html`, qui faisait déjà autorité
   visuellement. Ce fichier sert les pages qui n'ont PAS les styles historiques
   du corporate : le blog, les articles, le hub des ressources, les dix
   ressources, les pages légales.

   ⚠️ Les couleurs ont une VALEUR DE SECOURS écrite en dur : ce fichier doit tenir
   seul sur le blog, qui ne charge pas /tokens.css. Sans elle, le soulignement et
   le bouton devenaient invisibles — une panne silencieuse de plus.
   ⚠️ Les pages du corporate gardent leurs propres règles en plus ; elles sont
   identiques, donc l'ordre de chargement ne change rien.
   ═══════════════════════════════════════════════════════════════════════════ */

.brand { display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand svg { display:block; width:32px; height:32px; flex-shrink:0;
  transition:transform .3s cubic-bezier(.4,0,.2,1); }
.brand:hover svg { transform:rotate(-4deg) scale(1.06); }
.brand .wm { font-family:'Space Grotesk',sans-serif; font-size:1.4rem;
  font-weight:800; letter-spacing:-.035em; }
.lg-spark { transform-origin:23px 8px; }
.brand:hover .lg-spark { animation:lgPulse 1.4s ease-in-out infinite; }
@keyframes lgPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.5); } }

#main-nav {
  position:sticky; top:0; z-index:200;
  height:78px; padding:0 5%;
  display:flex; align-items:center; justify-content:space-between;
  /* ⚠️ OPAQUE, pas translucide. La valeur d'origine était rgba(13,13,16,.72)
     avec un flou : superbe sur la page d'accueil, dont le haut est sombre — mais
     sur les pages CLAIRES (blog, ressources, pages légales) le noir à 72 %
     laissait passer le fond et la barre virait au GRIS. Signalé par Olivier le
     02/08/2026. Une barre de marque ne change pas de couleur selon la page.
     Les pages du corporate gardent leur propre règle translucide, écrite dans
     leur style en ligne : elle passe APRÈS celle-ci et l'emporte. */
  background:var(--anthracite, #1A1A1E);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:height .35s cubic-bezier(.4,0,.2,1), background .35s, border-color .35s, box-shadow .35s;
}
#main-nav.scrolled {
  height:62px; background:var(--night, #0D0D10);
  border-bottom-color:rgba(255,255,255,.09);
  box-shadow:0 10px 40px -12px rgba(0,0,0,.6);
}
#main-nav .brand .wm { color:#fff; }

#main-nav .nav-links { display:flex; gap:2.6rem; list-style:none; margin:0; padding:0; }
#main-nav .nav-links a {
  position:relative; font-size:.92rem; font-weight:500;
  color:rgba(255,255,255,.6); text-decoration:none;
  transition:color .25s; padding:4px 0;
}
#main-nav .nav-links a::after {
  content:''; position:absolute; left:0; bottom:-2px;
  width:100%; height:2px; background:var(--accent, #E84A1A);
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#main-nav .nav-links a:hover, #main-nav .nav-links a:focus-visible { color:#fff; }
#main-nav .nav-links a:hover::after,
#main-nav .nav-links a.active::after { transform:scaleX(1); transform-origin:left; }
#main-nav .nav-links a.active { color:#fff; }

#main-nav .nav-cta {
  font-size:.88rem; font-weight:700;
  color:#fff; background:var(--accent, #E84A1A); text-decoration:none;
  padding:.6rem 1.4rem; border-radius:7px;
  transition:opacity .2s, transform .15s, box-shadow .3s;
  box-shadow:0 0 0 0 rgba(232,74,26,.5);
}
#main-nav .nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px -6px rgba(232,74,26,.6); }

/* ⚠️ Même point de rupture que le corporate (900 px) : le menu disparaît sur
   mobile, la marque et le bouton restent. Sans cette règle, les six entrées
   débordaient et poussaient le bouton hors de l'écran. */
@media (max-width:900px) {
  #main-nav .nav-links { display:none; }
}

/* ── Les réseaux, en pied de page ──────────────────────────────────────────
   Source unique : `social.html`. Cinq icônes, pas plus — voir le commentaire
   de ce fichier pour savoir ce qui y entre et ce qui reste dans le `sameAs`.
   ⚠️ Les icônes sont des SVG inline, jamais des images distantes : aucune
   requête vers un serveur tiers, donc aucun pisteur posé chez le visiteur. */
.reseaux { display:flex; gap:1.05rem; list-style:none; margin:1.2rem 0 0; padding:0; align-items:center; }

/* ⚠️ COULEUR EXPLICITE, surtout pas `currentColor` — essayé le 02/08/2026, et les
   icônes sortaient NOIRES SUR FOND NOIR. Le pied de page du corporate ne pose
   aucune couleur sur lui-même : il n en met qu'à ses liens. On héritait donc du
   `--ink` du corps de page, invisible sur le fond sombre.

   Ce gris moyen est le seul choix qui tienne des DEUX côtés : le pied de page du
   corporate est sombre, celui du hub et des ressources est clair. Contraste
   suffisant sur les deux, et le survol passe à l orange de la marque. */
.reseaux a { display:inline-flex; color:var(--lgray, #8C8C90); text-decoration:none;
  transition:color .2s, transform .15s; }
.reseaux svg { width:19px; height:19px; fill:currentColor; display:block; }
.reseaux a:hover, .reseaux a:focus-visible { color:var(--accent, #E84A1A); transform:translateY(-1px); }