/* OJA - bouton « hamburger » dore, avec relief (version 1, 16/10/2026).
   Demande JMH (16/10/2026 22:59, capture iPhone / Brave) : « le hamburger du menu est bleu ... dore avec relief plutot ».

   CAUSE DU BLEU. Sur l'accueil, le <nav class="nav jour"> n'est PAS dans .page-jour : la variable --jour-ink (definie seulement
   sur .page-jour) y est vide. La regle `.nav.jour .burger span { color: var(--jour-ink) }` devient alors invalide au moment du
   calcul, les 3 barres (background: currentColor) heritent de la couleur du <button> lui-meme, et ce <button> n'a pas de
   `color` : iOS/WebKit y applique la teinte systeme (bleu iOS, rgb(0,137,240) sur la capture). Chrome/Android : barres NOIRES.
   Sur /histoire et /pro (nav dans .page-jour) les barres etaient brun fonce (#2e2415) : jamais dorees.

   CORRECTIF (CSS pur, aucun JS, aucun changement de structure) :
   - `color` explicite sur le bouton et les barres (plus aucune teinte systeme) ;
   - barres en degrade dore metallique (haut clair #f1d27a, corps #c9a047, bas fonce #8a6420), meme famille que le logo OJA ;
   - relief : fine lumiere en haut (ombre interne), contour sombre fin, ombre portee douce : lisible sur la photo claire de la
     jungle comme sur le creme de l'en-tete plein ;
   - etats : appui, focus clavier (double anneau), menu ouvert (barres -> croix doree, via :has(), sinon barres inchangees) ;
   - boite du bouton INCHANGEE (36 x 28 px, centres des barres a +-0,5 px) : aucun decalage de mise en page ;
   - aucun degrade « clippe » sur du texte (aucun texte ici) : simples fonds en degrade + box-shadow, proprietes sures sur Safari iOS.
   Fichier versionne : /assets/ est servi en cache immuable 30 jours, toute retouche = nouveau nom (-v2.css) + nouvelle ligne <link>. */

.nav .burger {
  color: #c9a047;                         /* explicite : jamais la teinte systeme */
  background-color: transparent;
  -webkit-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
  gap: 4px;                               /* 3 barres de 3 px + 2 x 4 px = 17 px (avant : 3 x 2 + 2 x 5 = 16 px) */
  padding: 5px 6px 6px;                   /* hauteur totale du bouton inchangee : 5 + 17 + 6 = 28 px */
  transition: transform .18s ease;
}

.nav .burger > span,
.nav.jour .burger > span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  color: #c9a047;
  background-color: #c9a047;              /* repli si les degrades ne sont pas pris en charge */
  background-image:
    linear-gradient(90deg, rgba(255, 247, 218, 0) 0%, rgba(255, 247, 218, .45) 50%, rgba(255, 247, 218, 0) 100%),
    linear-gradient(180deg, #f1d27a 0%, #c9a047 42%, #8a6420 100%);
  box-shadow:
    inset 0 .5px 0 rgba(255, 249, 226, .95),   /* fine lumiere en haut */
    0 0 0 .5px rgba(84, 58, 14, .75),          /* leger contour sombre */
    0 1px 2.5px rgba(46, 36, 21, .42);         /* ombre portee douce */
  transition: transform .25s ease, opacity .2s ease, filter .15s ease;
}

/* Survol (souris seulement) */
@media (hover: hover) {
  .nav .burger:hover > span { filter: brightness(1.08) saturate(1.05); }
}

/* Appui */
.nav .burger:active { transform: scale(.94); }
.nav .burger:active > span,
.nav.jour .burger:active > span {
  filter: brightness(.9) saturate(1.1);
  background-image:
    linear-gradient(90deg, rgba(255, 247, 218, 0) 0%, rgba(255, 247, 218, .2) 50%, rgba(255, 247, 218, 0) 100%),
    linear-gradient(180deg, #d9b45c 0%, #b48a36 45%, #7a561a 100%);
}

/* Focus clavier : double anneau (sombre a l'interieur, clair a l'exterieur) lisible sur creme comme sur photo sombre */
.nav .burger:focus:not(:focus-visible) { outline: none; }
.nav .burger:focus-visible {
  outline: 2px solid #f1d27a;
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #6b4d14;
}

/* Menu ouvert : les 3 barres se referment en croix doree (le panneau .nav-mobile.open suit immediatement le <nav>) */
.nav:has(+ .nav-mobile.open) .burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav:has(+ .nav-mobile.open) .burger > span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.nav:has(+ .nav-mobile.open) .burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav .burger,
  .nav .burger > span { transition: none; }
}

/* Mode contraste eleve : couleurs systeme, sans degrade */
@media (forced-colors: active) {
  .nav .burger > span,
  .nav.jour .burger > span { background: CanvasText; box-shadow: none; }
}