/* ============================================================
   Fauna Morocco — Reskin encyclopédie (header + footer + typo)
   Ne touche pas au contenu ni à l'affichage des images.
   Chargé APRÈS general.css / encyclopedia.css / species-account.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

:root{--ocre:#C06A2C;--ocre-deep:#9E5220}

/* ===== Typographie : Lato (corps + titres), Oswald réservé au logo ===== */
body{font-family:'Lato',Helvetica,Arial,sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'Lato',Helvetica,Arial,sans-serif}
.section-header h1,.section-header h2{font-family:'Lato',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:0}
.species-item h3{font-family:'Lato',Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:0}
.scientific-name{font-family:'Lato',Helvetica,Arial,sans-serif;font-style:italic}

/* ===== Header : strictement identique aux pages redesign, fond noir =====
   Scopé sur body>nav pour NE PAS toucher les <nav class="breadcrumb"> internes */
body>nav{position:fixed !important;top:0;left:0;right:0;z-index:1000;display:flex !important;justify-content:space-between;align-items:center;padding:18px 34px !important;background:#000 !important;border:none !important;height:auto !important;min-height:0 !important}
body>nav .logo{font-family:'Oswald',sans-serif !important;font-weight:700 !important;font-size:20px !important;letter-spacing:.03em;color:#fff !important;text-decoration:none;line-height:1 !important;text-transform:none}
body>nav .logo b,body>nav .logo strong{color:var(--ocre) !important;font-weight:700}
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 !important;text-decoration:none}
body>nav .nl a:hover{color:var(--ocre) !important}
body>nav .nl a.active{color:var(--ocre) !important}
body>nav .nl .db{background:var(--ocre) !important;color:#fff !important;padding:9px 18px !important;border-radius:6px !important}
body>nav .nl .db:hover{background:var(--ocre-deep) !important;color:#fff !important}
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:.25s}
body>nav .mtog{display:none}
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 !important;opacity:.9;font-weight:700}
body>nav .langsw a.on{color:var(--ocre) !important;opacity:1}
body>nav .langsw a:hover{opacity:1}
body>nav .langsw .sep{opacity:.4}
@media(max-width:820px){body>nav{padding:15px 20px !important}body>nav .burger{display:flex}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:#0b0b0b;transform:translateX(100%);transition:transform .28s ease;box-shadow:-24px 0 60px rgba(0,0,0,.55)}body>nav .nl a{padding:15px 6px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.09)}body>nav .nl .db{margin-top:18px;border-bottom:none;border-radius:6px;justify-content:center;text-align:center;padding:15px}body>nav .mtog:checked~.nl{transform:none}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)}body>nav .langsw{margin:14px 0 0;align-self:flex-start}body>nav .langsw a{padding:0;border:none}}

/* ===== Footer (noir épuré, Lato, liens ocre au survol) ===== */
.footer{background:#000 !important;padding:12px 34px !important}
.footer,.footer p,.footer span{color:#999 !important;font-family:'Lato',Helvetica,Arial,sans-serif;font-size:12px}
.footer .container{max-width:1200px;margin:0 auto;display:flex !important;align-items:center;gap:22px;flex-wrap:wrap;text-align:left !important}
.footer .container span,.footer .container p{margin:0 !important}
.footer .container::after{content:"fauna-morocco.org";margin-left:auto;color:var(--ocre) !important;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:12px;white-space:nowrap}
.footer a{color:#ccc !important;text-decoration:none}
.footer a:hover{color:var(--ocre) !important}
@media(max-width:600px){.footer{padding:10px 20px !important}.footer .container{gap:4px 16px}}

/* ===== Sélecteur de langue compact sur mobile (sorti à gauche du burger) ===== */
body>nav .langm{display:none}
@media(max-width:820px){
  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 !important;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;stroke:#fff;transition:transform .2s}
  body>nav .langm[open] .chev{transform:rotate(180deg)}
  body>nav .langm .menu{position:absolute;right:0;top:calc(100% + 8px);background:#0b0b0b;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px;display:flex;flex-direction:column;gap:2px;min-width:82px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:1003}
  body>nav .langm .menu a{padding:9px 12px !important;border-radius:7px;color:#fff !important;font-weight:700;font-size:13px;letter-spacing:.05em;border:none !important}
  body>nav .langm .menu a.on{color:var(--ocre) !important}
  body>nav .burger{margin-left:12px}
  body>nav .nl .langsw{display:none}
}

/* Accessibilité : focus clavier visible */
:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}