/*
 * Sérenitas – Correctif boutons bleus
 * ─────────────────────────────────────────────
 * Problème : la règle globale `a:hover { color: var(--color-blue-dark) }`
 * s'applique aussi aux <a> stylés comme boutons (.bg-serenitas-blue),
 * rendant le texte bleu foncé sur fond bleu = illisible au survol.
 *
 * Solution : forcer le blanc sur TOUS les états des liens-boutons bleus,
 * avec une spécificité supérieure à la règle globale a:hover.
 *
 * À charger APRÈS main.css (enqueue avec une dépendance sur 'serenitas-main').
 */

/* ══════════════════════════════════════════════════════
   BOUTONS PLEINS BLEUS — texte blanc dans tous les états
   ══════════════════════════════════════════════════════ */

a.bg-serenitas-blue,
a.bg-serenitas-blue:link,
a.bg-serenitas-blue:visited,
a.bg-serenitas-blue:hover,
a.bg-serenitas-blue:focus,
a.bg-serenitas-blue:focus-visible,
a.bg-serenitas-blue:active,

button.bg-serenitas-blue,
button.bg-serenitas-blue:hover,
button.bg-serenitas-blue:focus,

/* Variante bleu foncé (hover des boutons bleus) */
a.bg-serenitas-blue-dark,
a.bg-serenitas-blue-dark:link,
a.bg-serenitas-blue-dark:visited,
a.bg-serenitas-blue-dark:hover,
a.bg-serenitas-blue-dark:focus,
a.bg-serenitas-blue-dark:focus-visible,
a.bg-serenitas-blue-dark:active,

button.bg-serenitas-blue-dark,
button.bg-serenitas-blue-dark:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* Conserver les icônes SVG en blanc également (currentColor hérite de color) */
a.bg-serenitas-blue svg,
a.bg-serenitas-blue:hover svg,
button.bg-serenitas-blue svg,
button.bg-serenitas-blue:hover svg,
a.bg-serenitas-blue-dark svg,
a.bg-serenitas-blue-dark:hover svg {
  color: #FFFFFF !important;
}

/* Au survol : on garde le fond qui s'assombrit (hover:bg-serenitas-blue-dark)
   mais le texte reste blanc — pas de changement de couleur de texte au hover */
a.bg-serenitas-blue.hover\:bg-serenitas-blue-dark:hover,
button.bg-serenitas-blue.hover\:bg-serenitas-blue-dark:hover {
  color: #FFFFFF !important;
}


/* ══════════════════════════════════════════════════════
   BOUTON JAUNE — texte bleu foncé dans tous les états
   (même logique inverse : éviter jaune-sur-jaune au hover)
   ══════════════════════════════════════════════════════ */

a.bg-serenitas-yellow,
a.bg-serenitas-yellow:link,
a.bg-serenitas-yellow:visited,
a.bg-serenitas-yellow:hover,
a.bg-serenitas-yellow:focus,
a.bg-serenitas-yellow:focus-visible,
a.bg-serenitas-yellow:active,

button.bg-serenitas-yellow,
button.bg-serenitas-yellow:hover {
  color: #1E3A5F !important; /* serenitas-blue-dark */
  text-decoration: none !important;
}

a.bg-serenitas-yellow svg,
a.bg-serenitas-yellow:hover svg,
button.bg-serenitas-yellow svg {
  color: #1E3A5F !important;
}


/* ══════════════════════════════════════════════════════
   BOUTONS OUTLINE / BORDER BLEU — comportement inverse normal
   (texte bleu par défaut, devient blanc UNIQUEMENT quand
   le fond devient bleu au survol)
   ══════════════════════════════════════════════════════ */

a.border-serenitas-blue,
button.border-serenitas-blue {
  color: var(--color-blue, #1D4ED8) !important;
}

a.border-serenitas-blue:hover,
a.border-serenitas-blue:focus-visible,
button.border-serenitas-blue:hover,
button.border-serenitas-blue:focus-visible {
  color: #FFFFFF !important;
  background-color: var(--color-blue, #1D4ED8) !important;
}

a.border-serenitas-blue:hover svg,
button.border-serenitas-blue:hover svg {
  color: #FFFFFF !important;
}