/* ==================================================================
   Bannière événement (parts/event-promo.php)

   Une seule bannière, deux emplacements : sous le hero de l'accueil, et
   entre l'en-tête et les filtres de la liste du blog. Ses règles vivent
   ici, et nulle part ailleurs, pour que les deux ne puissent pas
   diverger. Chargée sur l'accueil, la liste du blog et ses catégories ;
   pas sur les articles, qui n'en portent pas.

   Les variables viennent de la feuille de la page, chargée avant
   celle-ci ; leurs valeurs de repli valent la charte, au cas où.
   ================================================================== */
.b-event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3.25rem;
  padding: 2.25rem 2.5rem;
  border-radius: 24px;
  background: #EFEBFD;
  border: 1px solid rgba(18, 18, 78, 0.08);
}

.b-event-copy h2 {
  margin-top: 0.75rem;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy, #12124E);
}

.b-event-copy h2 .accent { color: #685EF8; }

.b-event-copy p {
  margin-top: 0.6rem;
  font-size: 1rem;
  color: rgba(18, 18, 78, 0.7);
}

.b-event-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: var(--navy, #12124E);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s var(--ease-out, cubic-bezier(0.25, 1, 0.5, 1));
}

.b-event-cta:hover { background: #685EF8; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .b-event-cta:hover { transform: none; }
}

@media (max-width: 900px) {
  .b-event {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem;
  }
}

@media (max-width: 640px) {
  .b-event { margin-top: 2.25rem; }
}

/* ---------- Accueil : enveloppe sous le hero ----------
   La bannière y suit le hero, pas un en-tête de page : sa marge haute
   vient de l'enveloppe, et l'écart du bas du padding-top de la section
   « Expertises & prestations » qui suit. */
.event-banner { padding: 2.5rem 0 0; }

.event-banner .b-event { margin-top: 0; }

@media (max-width: 900px) {
  .event-banner { padding-top: 1.5rem; }
}