/* ============================================================
   Fauna Morocco — Nav / header unifié (feuille UNIQUE)
   Chargée par TOUTES les pages. Scopée body>nav = ne touche JAMAIS
   les <nav class="breadcrumb"> internes de l'encyclopédie.
   Défaut = noir plein (pages contenu). .nav--hero = transparent +
   dégradé au scroll (pages vitrine avec hero). Couleurs en dur = homogène.
   ============================================================ */
body>nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:18px 34px;background:var(--bg-dark);text-shadow:0 1px 10px rgba(0,0,0,.55);transition:background .3s ease}
/* Variante vitrine : transparent au-dessus du hero, se solidifie au scroll (JS ajoute .is-scrolled) */
body>nav.nav--hero{background:transparent}
body>nav.nav--hero.is-scrolled{background:linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.94) 10%,rgba(0,0,0,.91) 20%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.66) 50%,rgba(0,0,0,.54) 58%,rgba(0,0,0,.44) 64%,rgba(0,0,0,.34) 70%,rgba(0,0,0,.25) 75%,rgba(0,0,0,.17) 80%,rgba(0,0,0,.11) 84%,rgba(0,0,0,.07) 87%,rgba(0,0,0,.04) 90%,rgba(0,0,0,.02) 93%,rgba(0,0,0,.008) 96%,transparent 100%)}

/* Logo */
body>nav .logo{font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;letter-spacing:.03em;color:#fff;text-decoration:none;line-height:1;text-transform:none}
body>nav .logo b,body>nav .logo strong{color:var(--ocre);font-weight:700}

/* Liens */
body>nav .nl{display:flex;gap:24px;align-items:center;font-family:'Lato',Helvetica,Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
body>nav .nl a{display:inline-flex;align-items:center;line-height:1;color:#fff;text-decoration:none}
body>nav .nl a:hover{color:var(--ocre)}
body>nav .nl a.active{color:var(--ocre)}
body>nav .nl .db{background:var(--ocre);color:#fff;padding:9px 18px;border-radius:2px}
body>nav .nl .db:hover{background:var(--ocre-deep);color:#fff}

/* Sélecteur de langue desktop (pastille arrondie = exception charte) */
body>nav .langsw{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.32);border-radius:20px;padding:5px 12px;transition:border-color .2s}
body>nav .langsw:hover{border-color:var(--ocre)}
body>nav .langsw .glb{width:14px;height:14px;opacity:.9;flex:none;stroke:#fff}
body>nav .langsw a{color:#fff;opacity:.9;font-weight:700}
body>nav .langsw a.on{color:var(--ocre);opacity:1}
body>nav .langsw a:hover{opacity:1}
body>nav .langsw .sep{opacity:.4}

/* Sélecteur mobile (dropdown) + burger : cachés en desktop */
body>nav .langm{display:none}
body>nav .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;z-index:1001}
body>nav .burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;margin:0 auto;transition:transform .25s ease, opacity .25s ease}
body>nav .mtog{display:none}

/* ---- Mobile (<=1000px) ---- 2026-09-21 : seuil remonté de 820 à 1000, le menu complet cassait sur 2-3 lignes entre 821 et 953 px (FR) */
@media(max-width:1000px){
  body>nav{padding:15px 20px}
  /* léger dégradé du haut derrière le nav vitrine non-scrollé (lisibilité au-dessus des zones claires) */
  body>nav.nav--hero:not(.is-scrolled){background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 55%,rgba(0,0,0,0) 100%)}
  body>nav .nl{position:fixed;top:0;right:0;height:100vh;width:min(82vw,320px);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:78px 24px 28px;background:var(--bg-dark);transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
  body>nav .nl a{padding:15px 6px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.09)}
  body>nav .nl a.db,body>nav .nl .db{margin-top:18px;border-bottom:none;border-radius:2px;justify-content:center;text-align:center;padding:15px}
  body>nav .mtog:checked~.nl{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.55)}
  body>nav .mtog:checked~.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body>nav .mtog:checked~.burger span:nth-child(2){opacity:0}
  body>nav .mtog:checked~.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* langue : switcher desktop caché, dropdown mobile visible (ancré à droite) */
  body>nav .nl .langsw{display:none}
  body>nav .langm{display:block;position:relative;margin-left:auto}
  body>nav .langm>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid rgba(255,255,255,.34);border-radius:20px;padding:5px 11px;color:#fff;font-weight:700;font-size:13px;line-height:1}
  body>nav .langm>summary::-webkit-details-marker{display:none}
  body>nav .langm .glb{width:14px;height:14px;flex:none;stroke:#fff}
  body>nav .langm .chev{width:10px;height:10px;opacity:.7;transition:transform .2s}
  body>nav .langm[open] .chev{transform:rotate(180deg)}
  body>nav .langm .menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg-dark);border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:5px;display:flex;flex-direction:column;gap:2px;min-width:82px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:70;transform-origin:top right}
  body>nav .burger{display:flex; margin-left:12px}
  body>nav .langm .menu a{padding:9px 12px;border-radius:2px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.05em}
  body>nav .langm .menu a.on{color:var(--ocre)}
}