/**
 * VOG MARQUAGE — accroches publiques vers l'espace agences.
 * ---------------------------------------------------------------------------
 * Ces deux blocs (bandeau de catégorie, bloc d'accueil) vivent dans des pages
 * du THÈME, pas dans l'espace agences. Ils ne peuvent donc pas s'appuyer sur
 * les variables de `.vm-page` : tout est écrit en dur ici.
 *
 * ⚠️ Le CSS d'un module est chargé AVANT celui du thème (piège Hummingbird
 * déjà payé sur les badges et `.product-flags`) : on n'attend jamais de gagner
 * une bataille de cascade, d'où des noms de classes qui n'appartiennent qu'à
 * nous et aucune redéfinition d'élément.
 * ---------------------------------------------------------------------------
 */

.vm-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #16181D;
  color: #fff;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 24px;
  font-family: inherit;
}

.vm-promo--home { margin: 32px 0; }

.vm-promo__text { display: flex; flex-direction: column; gap: 6px; min-width: 260px; flex: 1 1 380px; }

.vm-promo__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D5602A;
}

.vm-promo__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #fff;
}
.vm-promo--home .vm-promo__title { font-size: 26px; }

.vm-promo__sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
}

.vm-promo__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.vm-promo__btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: #16181D;
  border-radius: 10px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.vm-promo__btn:hover,
.vm-promo__btn:focus { background: #EFEDE8; color: #16181D; text-decoration: none; }

.vm-promo__link {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.vm-promo__link:hover,
.vm-promo__link:focus { color: #fff; }

@media (max-width: 767px) {
  .vm-promo { padding: 20px; gap: 16px; }
  .vm-promo--home .vm-promo__title { font-size: 21px; }
  .vm-promo__actions { width: 100%; }
  .vm-promo__btn { flex: 1 1 auto; justify-content: center; }
}