/* ═══════════════════════════════════════════════════════════
   TheDesk — barre de navigation UNIQUE

   Avant la migration Astro, ce CSS existait en 5 versions
   différentes (une par page). C'est maintenant le seul endroit
   où la nav se modifie. Le markup correspondant vit dans
   src/components/Nav.astro.

   ⚠ Tout est scopé sous `.site-nav`, jamais sous `nav` nu :
   les articles de blog contiennent un second <nav class="breadcrumb">
   qu'une règle `nav {}` attraperait aussi (c'est ce qui rendait
   les breadcrumbs sticky par accident).
   ═══════════════════════════════════════════════════════════ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

/* Largeur unique. L'accueil et la cheatsheet utilisaient 1160px, le blog
   900px — une barre identique partout impose de trancher, on garde le
   standard du site. La barre est donc un peu plus large que la colonne
   de texte des pages de blog, ce qui est voulu. */
.site-nav .nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

@media (max-width: 768px) {
  .site-nav .nav-inner { padding: 0 20px; }
}

.site-nav .logo {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-decoration: none;
}
.site-nav .logo span { color: var(--amber); }

.site-nav .nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav .nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal-mid);
  text-decoration: none;
  transition: color 0.15s;
}
.site-nav .nav-links a:hover { color: var(--charcoal); }
.site-nav .nav-links a.is-cheatsheet {
  color: var(--amber-dark);
  font-weight: 600;
}

.site-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Bouton de langue */
.site-nav .btn-lang {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--charcoal-mid);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s, color 0.15s;
}
.site-nav .btn-lang:hover { border-color: var(--amber); color: var(--charcoal); }

/* CTA — classe propre (.nav-cta) et non .btn-amber : chaque page
   redéfinit .btn-amber pour ses propres boutons de corps de page,
   la nav ne doit pas en dépendre. */
.site-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--amber);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.site-nav .nav-cta:hover { background: var(--amber-dark); transform: translateY(-1px); }

/* Hamburger */
.site-nav .hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.site-nav .hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}
.site-nav .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site-nav .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.site-mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: rgba(250, 247, 242, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  z-index: 99;
  padding: 8px 0 16px;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.2s ease;
}
.site-mobile-menu.open { display: block; transform: translateY(0); opacity: 1; }
.site-mobile-menu a {
  display: block;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.site-mobile-menu a:last-child { border-bottom: none; }
.site-mobile-menu a:active { background: var(--cream-alt); }
.site-mobile-menu .mobile-cta {
  margin: 12px 24px 0;
  display: block;
  text-align: center;
  background: var(--amber);
  color: var(--charcoal);
  border-radius: 8px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: none;
}
.site-mobile-menu .mobile-lang {
  color: var(--charcoal-light);
  font-weight: 600;
  font-size: 14px;
}

@media (max-width: 900px) {
  /* backdrop-filter désactivé : coûteux au scroll sur mobile */
  .site-nav { background: #FAF7F2; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 768px) {
  .site-nav .nav-links { display: none; }
  .site-nav .nav-cta { display: none; }
  /* Le sélecteur de langue passe dans le menu hamburger ("Passer en EN"),
     comme le faisait déjà l'accueil. */
  .site-nav .btn-lang { display: none; }
  .site-nav .hamburger { display: flex; }

  /* ─── Pourquoi `fixed` et non `sticky` sur mobile ───────────────
     `position: sticky` a été tenté trois fois et décroche toujours
     pendant le scroll inertiel de Safari iOS : un élément sticky est
     positionné par rapport à son conteneur de scroll, et iOS ne le
     repositionne pas de façon synchrone pendant l'inertie.

     `fixed` est ancré au viewport : il ne dépend ni du conteneur de
     scroll, ni de l'overflow des ancêtres, ni du moment où le
     navigateur recalcule la position. Il ne peut pas décrocher.

     Contrepartie : la barre sort du flux, donc il faut compenser sa
     hauteur avec un padding sur le body, sinon le haut de page passe
     dessous. */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  /* 61px et non 60 : 60px de contenu + 1px de bordure basse. */
  body { padding-top: 61px; }
  /* Pour que les ancres (#mechanism, #calendrier…) ne s'arrêtent pas
     cachées derrière la barre. */
  html { scroll-padding-top: 61px; }
}