/* ═══════════════════════════════════════════════════════════════
   Page « Nos métiers » — survols (équivalents des états React de la maquette)
   ═══════════════════════════════════════════════════════════════ */

/* Notre approche : valeurs */
.metiers-valeur:hover { transform: translateY(-4px) !important; }
.metiers-valeur:hover .metiers-valeur__bar { width: 48px !important; }
.metiers-valeur:hover .metiers-valeur__titre { color: #e30713 !important; }
.metiers-valeur:hover .metiers-valeur__texte { color: #444 !important; }

/* Un métier en mutation : cartes */
.metiers-carte:hover .metiers-carte__img { transform: scale(1.06) !important; }
.metiers-carte:hover .metiers-carte__bar {
  width: 100% !important;
  background: linear-gradient(to right, #e30713, #ffdc03) !important;
}

/* Méthode : étapes */
.metiers-etape:hover { transform: translateY(-8px) !important; }
.metiers-etape:hover .metiers-etape__num { color: #e30713 !important; }

/* Comparateur avant / après */
.metiers-ba [data-ba-handle]:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* Boutons du haut de page (s'ils sont remplis) : empilés sur mobile, comme l'accueil */
@media (max-width: 899.98px) {
  .metiers-hero-btns { flex-direction: column; align-items: flex-start !important; }
}