/* OJA - marque doree en tete de menu.
   13/10/2026, demande JMH : "reproduire le meme dore en haut a gauche en petit sur
   toutes les pages", puis "idem sur l'accueil au scroll, comme si le gros logo
   migrait la-haut a gauche".

   Principe : on reprend exactement la technique du logo du hero (.hero-oja) :
   un degrade peint dans la silhouette du logo via un masque CSS, anime en boucle.
   Le PNG du logo sert de masque, donc aucune nouvelle image a maintenir.

   Pourquoi le degrade n'est pas celui du hero a l'identique : ses tons clairs
   (#f4e6bf) tombent a 1,05:1 de contraste sur le fond creme du site. A 220 px dans
   le hero c'est invisible ; a 36 px dans le menu, la moitie du logo disparait au
   sommet du scintillement. Les tons sont donc rabattus : meme famille, meme
   scintillement, mais le point le plus clair reste lisible. */

@keyframes oja-shine-nav {
  0%, 100% { background-position: 80%; }
  50%      { background-position: 20%; }
}

nav .brand {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* L'image d'origine garde sa place (et, sur l'accueil, son opacite au defilement)
   mais ses pixels noirs ne sont plus peints. */
nav .brand .brand-img { visibility: hidden; }

nav .brand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg, #6f511b, #8a6526, #a8832e, #c9a45c, #a8832e, #8a6526, #6f511b);
  background-size: 210% 100%;
  background-position: 80%;
  background-repeat: no-repeat;
  -webkit-mask: url(/assets/logo-jour.png) 50% / contain no-repeat;
          mask: url(/assets/logo-jour.png) 50% / contain no-repeat;
  animation: 8s ease-in-out infinite oja-shine-nav;
  filter: drop-shadow(0 1px 1px rgba(46, 36, 21, .35));
  /* Sur l'accueil, oja-logo-or.js recopie ici l'opacite du fondu au defilement.
     Ailleurs la variable n'existe pas et vaut 1 : le logo est visible d'emblee. */
  opacity: var(--oja-brand-op, 1);
}

@media (prefers-reduced-motion: reduce) {
  nav .brand::after { animation: none; background-position: 50%; }
}