/* ==========================================================================
   Fauna Morocco — base commune (hors encyclopédie)
   Reset + header (nav) + footer + utilitaires, partagés par toutes les pages
   "immersives". À charger APRÈS tokens.css. Version canonique = page d'accueil.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:#efe8db;background:var(--bg-dark);line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.link{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ocre-deep)}

/* -------------------------------- Header / nav -------------------------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 34px;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.16) 72%,transparent);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.logo{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:.03em}
.logo b{color:var(--ocre)}
.nl{display:flex;gap:24px;align-items:center;font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.nl a{display:inline-flex;align-items:center;line-height:1}
.nl .db{background:var(--ocre);padding:9px 18px;border-radius:6px}
.nl a.active{color:var(--ocre)}
.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}
.langsw:hover{border-color:var(--ocre)}
.langsw .glb{width:14px;height:14px;opacity:.9;flex:none}
.langsw a{color:#fff;opacity:.9;font-weight:700}
.langsw a.on{color:var(--ocre);opacity:1}
.langsw a:hover{opacity:1}
.langsw .sep{opacity:.4}
.langm{display:none}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;z-index:60}
.burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;margin:0 auto;transition:.25s}
.mtog{display:none}
@media(max-width:820px){
  .nl .langsw{margin:14px 0 0;align-self:flex-start}.nl .langsw a{padding:0;border:none}
}
@media(max-width:820px){
  .langm{display:block;position:relative;margin-left:auto}.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}.langm>summary::-webkit-details-marker{display:none}.langm .glb{width:14px;height:14px;flex:none}.langm .chev{width:10px;height:10px;opacity:.7;transition:transform .2s}.langm[open] .chev{transform:rotate(180deg)}.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:70}.langm .menu a{padding:9px 12px;border-radius:7px;color:#fff;font-weight:700;font-size:13px;letter-spacing:.05em}.langm .menu a.on{color:var(--ocre)}.burger{margin-left:12px}.nl .langsw{display:none}
}
@media(max-width:820px){
  nav{padding:15px 20px}.burger{display:flex}.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)}.nl a{padding:15px 6px;font-size:15px;border-bottom:1px solid rgba(255,255,255,.09)}.nl a.db,.nl .db{margin-top:18px;border-bottom:none;border-radius:6px;justify-content:center;text-align:center;padding:15px}.mtog:checked~.nl{transform:none}.mtog:checked~.burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}.mtog:checked~.burger span:nth-child(2){opacity:0}.mtog:checked~.burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* -------------------------------- Footer -------------------------------- */
footer{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,#000 60%);color:#999;padding:11px 34px;font-size:12px}
footer .fin{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
footer .fl{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
footer .fin .u{margin-left:auto}
footer .u{color:var(--ocre);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
footer a{color:#ccc}
footer a:hover{color:var(--ocre)}
@media(max-width:820px){
  footer{padding:9px 20px}
  footer .fin{gap:14px;font-size:11px;align-items:flex-end;flex-wrap:nowrap}
  footer .fl{flex-direction:column;gap:0;align-items:flex-start;line-height:1.4}
  footer .fin .u{margin-left:auto;white-space:nowrap}
}

/* -------------------------------------------------------------------------- 
   Typographie + boutons (déplacés depuis tokens.css — pages principales)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Échelle typographique (Oswald pour les titres, Lato pour le texte)
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12.5px;
  color:var(--eyebrow);
}

h1, .t-h1{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.05;
  text-transform:uppercase;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
}
h2, .t-h2{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
}
h3, .t-h3{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.15;
  font-size:clamp(1.15rem, 2vw, 1.35rem);
}

/* --------------------------------------------------------------------------
   Boutons — système unique (hover partagé : léger soulèvement + même timing)
   `.ocre` est conservé comme alias de `.primary` pour ne pas casser l'existant.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:14px 28px;
  border-radius:8px;
  cursor:pointer;
  border:1.5px solid transparent;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
/* Hovers façon page d'accueil : primaire fonce, fantôme se remplit. Pas de soulèvement. */
.btn.primary, .btn.ocre{ background:var(--ocre); color:#fff; }
.btn.primary:hover, .btn.ocre:hover{ background:var(--ocre-deep); }

.btn.ghost-dark{ background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.btn.ghost-dark:hover{ background:#fff; border-color:#fff; color:var(--ink); }

.btn.ghost-light{ background:transparent; border-color:rgba(0,0,0,.25); color:var(--ink); }
.btn.ghost-light:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Utilitaire accessibilité (déjà utilisé sur À propos) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}