/* Barre supérieure + éphéméride — UNE SEULE implémentation pour tout le site.
   En CSS autonome (pas de Tailwind) parce que les pages publiques ne chargent pas
   Tailwind : c'est ce qui permet au même partial de servir la landing, la page de
   connexion, le paywall et les pages publiques. Toute retouche se fait ici. */
.topbar {
  position: sticky; top: 0; z-index: 30; height: 60px; box-sizing: border-box;
  display: flex; align-items: center;
  background: #f4ecdc; color: #241d12; border-bottom: 1px solid #241d12;
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 20px;
}
@media (min-width: 768px) { .topbar-inner { padding: 0 32px; } }
.topbar-logo {
  font: italic 400 22px/1 Fraunces, Georgia, serif; color: inherit; text-decoration: none;
  white-space: nowrap;
}
.topbar-logo:hover { color: #b9793f; }
/* Logo vectoriel (SPORIA, le O est un champignon gravé) : lettres en currentColor. */
.topbar-logo-svg { display: block; height: 24px; width: auto; }
/* Le mot reste dans le lien pour les lecteurs d'écran et les moteurs, sans s'afficher. */
/* Logo en image dans les pieds de page : aligné sur la ligne de texte qui le suit. */
.logo-sporia { display: inline-block; height: 20px; width: auto; vertical-align: -3px; margin-right: 2px; }
.topbar-logo-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topbar-nav { display: flex; align-items: baseline; gap: 26px; margin-left: auto; }
.topbar-nav a {
  font: 12px/1 "Space Mono", ui-monospace, monospace; color: inherit; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap;
}
.topbar-nav a:hover { color: #b9793f; }
.topbar-nav a[aria-current] { border-bottom-color: currentColor; }
/* Sélecteur plus spécifique que « .topbar-nav a », sinon color:inherit repeint le texte
   en encre sur fond encre (bouton illisible). */
.topbar-nav a.topbar-cta {
  padding: 7px 12px; background: #241d12; color: #f4ecdc; border: 0; cursor: pointer;
  font: 11px/1.1 "Space Mono", ui-monospace, monospace; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.topbar-nav a.topbar-cta:hover { background: #b9793f; color: #f4ecdc; }
/* Bouton menu : n'apparaît que sous 768 px ET seulement si le JS a pris la main
   (attribut data-menu). Sans JS, les liens s'affichent sur une deuxième ligne :
   on ne perd jamais la navigation. */
.topbar-burger { display: none; }
@media (max-width: 767px) {
  .topbar { height: auto; min-height: 60px; }
  .topbar-inner { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; }
  .topbar-logo { font-size: 19px; }
  .topbar-logo-svg { height: 20px; }
  .topbar-nav { order: 3; width: 100%; margin-left: 0; gap: 18px; flex-wrap: wrap; }
  .topbar-nav a.topbar-cta { margin-left: auto; }

  .topbar[data-menu] { height: 60px; }
  .topbar[data-menu] .topbar-inner { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
  .topbar[data-menu] .topbar-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    margin-left: auto; width: 34px; height: 30px; padding: 0 5px;
    background: none; border: 1px solid #241d12; cursor: pointer;
  }
  .topbar[data-menu] .topbar-burger span { display: block; height: 1px; background: #241d12; }
  .topbar[data-menu] .topbar-nav {
    position: absolute; top: 60px; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #f4ecdc; border-bottom: 1px solid #241d12;
  }
  .topbar[data-menu] .topbar-nav[data-open] { display: flex; }
  .topbar[data-menu] .topbar-nav a {
    padding: 14px 20px; border-bottom: 1px solid rgba(36,29,18,.15); font-size: 13px;
  }
  .topbar[data-menu] .topbar-nav a[aria-current] { background: #f9f3e6; border-bottom-color: #241d12; }
  .topbar[data-menu] .topbar-nav a.topbar-cta { margin: 12px 20px 16px; text-align: center; }
}
@media (max-width: 420px) { .topbar-nav a.topbar-cta { padding: 7px 10px; font-size: 10px; } }