/* ==========================================================================
   Sous-navigation de l'espace Premium (bande "Mes offres / Outils / Mon
   Patrimoine" sous le header principal) — extraite le 2026-08-12 pour
   s'afficher sur TOUTES les pages Premium (pas seulement espace-membre.html),
   à la demande de Jean. Sur espace-membre.html les onglets sont des
   <button> pilotés en JS (bascule de panneaux sans rechargement). Sur les
   autres pages Premium, ce sont de simples <a href="espace-membre.html?tab=..">
   stylées à l'identique — cliquer ramène vers le bon onglet du hub.
   ========================================================================== */
main.dark-section { background: #000; }

/* CORRECTIF 2026-08-14 : à la demande de Jean, la sous-nav Premium reprend
   maintenant le même traitement "pilule flottante" que le header principal
   (.hero-page-header, voir assets/css/site-header-glass.css) au lieu d'une
   simple barre plate collée sous le header — même rayon, même largeur max,
   même effet verre.
   CORRECTIF 2026-08-14 (bis) : un premier essai de sticky top:0 sur cette
   pilule la collait exactement sous la première (même position que le
   header, lui aussi top:0) — elle disparaissait entièrement derrière au
   scroll. Le sticky a alors été retiré, mais résultat identique en pratique
   dès qu'on scrolle un peu : cette pilule (flux normal) remonte sous le
   header sticky et se retrouve coupée par lui — signalé par Jean ("barre
   coupée en bas"). Fix définitif : sticky réactivé ici, mais avec un top
   calculé dynamiquement en JS (giPositionPremiumSubnav dans main.js) égal à
   la hauteur réellement occupée par le header — cette pilule se colle donc
   juste sous le header au lieu de se cacher derrière, quelle que soit la
   position de scroll. Le top ci-dessous n'est qu'une valeur de repli avant
   l'exécution du JS. */
.premium-subnav {
  position: sticky;
  top: 90px;
  z-index: 99;
  margin: 12px auto 0;
  max-width: 1180px;
  width: calc(100% - 32px);
  border-radius: 999px;
  /* Noir vrai (pas le navy par défaut de .hero-page-header) : cette pilule
     ne vit que dans l'espace Premium, toujours en thème sombre — même noir
     que .dark-header.hero-page-header (voir style.css), à la demande de
     Jean. */
  background: rgba(8, 9, 11, 0.85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.premium-subnav-inner {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 8px 0;
}
.premium-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.premium-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.premium-tab.is-active { color: #050609; background: var(--gold-light); }
.premium-tab[hidden] { display: none; }
.premium-panel { display: none; }
.premium-panel.is-active {
  display: block;
  animation: premiumPanelReveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes premiumPanelReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .premium-panel.is-active { animation: none; }
}
@media (max-width: 760px) {
  .premium-subnav { border-radius: 22px; width: calc(100% - 20px); }
  .premium-subnav-inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 16px; }
  .premium-tab { flex-shrink: 0; }
}

/* CORRECTIF 2026-08-14 : "Outils" devient un menu déroulant (liste directe
   des 7 outils par famille d'actifs, à la demande de Jean) — réutilise le
   même mécanisme que Simulateur/L'observatoire/Roadmaps dans le header
   (.nav-dropdown.nav-hover-dropdown, voir style.css + main.js, aucun JS
   supplémentaire nécessaire). Seul ajustement : .nav-dropdown-trigger-link
   a une règle .open par défaut pensée pour un fond clair (background:
   var(--off-white); color: var(--navy)) — jamais neutralisée par la
   variante .dark-header ici, car cette pilule n'est pas un descendant du
   header. Surchargée localement pour rester sombre/cohérente. */
.premium-subnav .nav-dropdown { position: relative; }
.premium-subnav .nav-dropdown-trigger-link,
.premium-subnav .nav-dropdown-trigger { gap: 4px; }
.premium-subnav .nav-dropdown.open .nav-dropdown-trigger-link,
.premium-subnav .nav-dropdown.open .nav-dropdown-trigger {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.premium-subnav .premium-tab.is-active.nav-dropdown-trigger-link,
.premium-subnav .nav-dropdown.open .premium-tab.is-active {
  color: #050609;
  background: var(--gold-light);
}
.premium-subnav .nav-dropdown-caret { width: 11px; height: 11px; }

/* CORRECTIF 2026-08-12 : trop d'espace mort entre les sections empilées de
   l'espace Premium (remonté par Jean) — .page-hero et .section-tight ont
   un padding pensé pour des pages marketing publiques, disproportionné une
   fois plusieurs sections utilitaires empilées à la suite. Resserré
   uniquement dans le contexte Premium (.dark-section), jamais sur les
   pages publiques (.page-hero reste partagé par 36 pages, cf. sa propre
   note dans style.css — on ne touche jamais la règle de base). */
.dark-section .page-hero { padding: 24px 0 12px; }
.dark-section .section-tight { padding: 26px 0; }
.dark-section .section-header { margin-bottom: 22px; }