/* ============================================
   HUB/SHARED.CSS — Styles communs des hubs (event + geo)
   Charge sur : template-hub-event.php + template-hub-geo.php (avant le CSS spécifique)
   Contient :
   - Utilitaires partagés (bg-teal, section-intro, accent-line/overline on-dark)
   - Variantes de bouton sur fond sombre (btn--ghost-on-dark)
   - Reset cohérent du <main> hub
   ============================================ */

/* --- Fond Teal pour bascules sombres (mécanisme 2 — inversion). --- */
.section--cta.bg-teal,
.bg-teal {
  background: var(--em-primary-dark);
  color: var(--em-bg);
}

.bg-teal h2,
.bg-teal h3,
.bg-teal p {
  color: var(--em-bg);
}

.bg-teal a:not(.btn) {
  color: var(--em-bg);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Overline et accent-line sur fond sombre. --- */
.overline--on-dark {
  color: var(--em-text-on-teal);
}

.accent-line--on-dark {
  background: var(--em-accent-light);
}

/* --- Intro de section (paragraphe court sous le header). --- */
.section-intro {
  font-family: var(--font-sans);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.6;
  color: var(--em-text-light);
  max-width: 640px;
  margin: 0 0 var(--space-lg);
}

.bg-teal .section-intro {
  color: var(--em-text-on-teal);
}

/* --- Bouton creux sur fond sombre. --- */
.btn--ghost-on-dark {
  background: transparent;
  color: var(--em-bg);
  border: 1px solid var(--em-bg);
  font-weight: 400;
  padding: 13px 31px;
}

.btn--ghost-on-dark:hover {
  background: var(--em-bg);
  color: var(--em-primary-dark);
}

/* --- Centrage section-header dans les CTA (point focal unique). --- */
.section--cta .section-header,
.hub-event__cta-inner {
  text-align: center;
}

.hub-event__cta-inner .accent-line {
  margin-left: auto;
  margin-right: auto;
}

/* --- Le <main> hub n'ajoute pas de padding au-dessus : le hero gère sa propre hauteur. --- */
.hub-event,
.hub-geo {
  display: block;
}