/* =========================================================================
Palette Halfmoon personnalisée : teintes plus foncées et moins vives.
À charger APRÈS halfmoon(.min).css — surcharge ses variables :root.
Utilisé par :
- web/static/css/root.css (@import en tête) -> base_user / base_admin
- connect.html, account_add.html,
password_forgotten.html,
password_reset_confirm.html ( après le CDN Halfmoon)
Deux leviers par couleur :
--bs--saturation -> abaissée => couleur moins vive
--bs--<400..900>-hsl -> luminosité abaissée => couleur plus foncée
Les couleurs sémantiques héritent automatiquement de leur couleur de base :
primary = blue danger = red success = green
info = cyan warning = yellow
Pour ré-ajuster : modifier les % de saturation / luminosité ci-dessous.
========================================================================= */
:root,
[data-bs-theme=light] {
/* ---- Bleu / primary ---- */
--bs-blue-saturation: 52%;
--bs-blue-400-hsl: var(--bs-blue-hue), var(--bs-blue-saturation), 55%;
--bs-blue-500-hsl: var(--bs-blue-hue), var(--bs-blue-saturation), 42%;
--bs-blue-600-hsl: var(--bs-blue-hue), var(--bs-blue-saturation), 34%;
--bs-blue-700-hsl: var(--bs-blue-hue), var(--bs-blue-saturation), 26%;
--bs-blue-800-hsl: var(--bs-blue-hue), var(--bs-blue-saturation), 18%;
--bs-blue-900-hsl: var(--bs-blue-hue), var(--bs-blue-saturation), 11%;
/* ---- Rouge / danger ---- */
--bs-red-saturation: 48%;
--bs-red-400-hsl: var(--bs-red-hue), var(--bs-red-saturation), 55%;
--bs-red-500-hsl: var(--bs-red-hue), var(--bs-red-saturation), 43%;
--bs-red-600-hsl: var(--bs-red-hue), var(--bs-red-saturation), 35%;
--bs-red-700-hsl: var(--bs-red-hue), var(--bs-red-saturation), 27%;
--bs-red-800-hsl: var(--bs-red-hue), var(--bs-red-saturation), 19%;
--bs-red-900-hsl: var(--bs-red-hue), var(--bs-red-saturation), 11%;
/* ---- Vert / success ---- */
--bs-green-saturation: 40%;
--bs-green-400-hsl: var(--bs-green-hue), var(--bs-green-saturation), 44%;
--bs-green-500-hsl: var(--bs-green-hue), var(--bs-green-saturation), 36%;
--bs-green-600-hsl: var(--bs-green-hue), var(--bs-green-saturation), 29%;
--bs-green-700-hsl: var(--bs-green-hue), var(--bs-green-saturation), 22%;
--bs-green-800-hsl: var(--bs-green-hue), var(--bs-green-saturation), 15%;
--bs-green-900-hsl: var(--bs-green-hue), var(--bs-green-saturation), 10%;
/* ---- Orange ---- */
--bs-orange-saturation: 55%;
--bs-orange-400-hsl: var(--bs-orange-hue), var(--bs-orange-saturation), 52%;
--bs-orange-500-hsl: var(--bs-orange-hue), var(--bs-orange-saturation), 42%;
--bs-orange-600-hsl: var(--bs-orange-hue), var(--bs-orange-saturation), 34%;
--bs-orange-700-hsl: var(--bs-orange-hue), var(--bs-orange-saturation), 26%;
--bs-orange-800-hsl: var(--bs-orange-hue), var(--bs-orange-saturation), 18%;
--bs-orange-900-hsl: var(--bs-orange-hue), var(--bs-orange-saturation), 11%;
/* ---- Indigo ---- */
--bs-indigo-saturation: 45%;
--bs-indigo-400-hsl: var(--bs-indigo-hue), var(--bs-indigo-saturation), 55%;
--bs-indigo-500-hsl: var(--bs-indigo-hue), var(--bs-indigo-saturation), 43%;
--bs-indigo-600-hsl: var(--bs-indigo-hue), var(--bs-indigo-saturation), 35%;
--bs-indigo-700-hsl: var(--bs-indigo-hue), var(--bs-indigo-saturation), 27%;
--bs-indigo-800-hsl: var(--bs-indigo-hue), var(--bs-indigo-saturation), 19%;
--bs-indigo-900-hsl: var(--bs-indigo-hue), var(--bs-indigo-saturation), 11%;
/* ---- Purple ---- */
--bs-purple-saturation: 50%;
--bs-purple-400-hsl: var(--bs-purple-hue), var(--bs-purple-saturation), 55%;
--bs-purple-500-hsl: var(--bs-purple-hue), var(--bs-purple-saturation), 43%;
--bs-purple-600-hsl: var(--bs-purple-hue), var(--bs-purple-saturation), 35%;
--bs-purple-700-hsl: var(--bs-purple-hue), var(--bs-purple-saturation), 27%;
--bs-purple-800-hsl: var(--bs-purple-hue), var(--bs-purple-saturation), 19%;
--bs-purple-900-hsl: var(--bs-purple-hue), var(--bs-purple-saturation), 11%;
/* ---- Pink ---- */
--bs-pink-saturation: 45%;
--bs-pink-400-hsl: var(--bs-pink-hue), var(--bs-pink-saturation), 55%;
--bs-pink-500-hsl: var(--bs-pink-hue), var(--bs-pink-saturation), 43%;
--bs-pink-600-hsl: var(--bs-pink-hue), var(--bs-pink-saturation), 35%;
--bs-pink-700-hsl: var(--bs-pink-hue), var(--bs-pink-saturation), 27%;
--bs-pink-800-hsl: var(--bs-pink-hue), var(--bs-pink-saturation), 19%;
--bs-pink-900-hsl: var(--bs-pink-hue), var(--bs-pink-saturation), 11%;
/* ---- Cyan / info ----
Halfmoon en fait un bouton "clair" (texte foncé, survol plus clair).
On le bascule en bouton "foncé" : cyan soutenu + survol plus sombre,
et texte blanc (boutons ET badges .text-bg-info). */
--bs-cyan-saturation: 45%;
--bs-cyan-400-hsl: var(--bs-cyan-hue), var(--bs-cyan-saturation), 48%;
--bs-cyan-500-hsl: var(--bs-cyan-hue), var(--bs-cyan-saturation), 39%;
--bs-cyan-600-hsl: var(--bs-cyan-hue), var(--bs-cyan-saturation), 32%;
--bs-cyan-700-hsl: var(--bs-cyan-hue), var(--bs-cyan-saturation), 25%;
--bs-cyan-foreground-hsl: var(--bs-white-hsl);
--bs-cyan-hover-bg: var(--bs-cyan-600);
--bs-cyan-active-bg: var(--bs-cyan-700);
/* ---- Teal (couleur utilitaire, non sémantique) : simple désaturation. */
--bs-teal-saturation: 42%;
--bs-teal-400-hsl: var(--bs-teal-hue), var(--bs-teal-saturation), 52%;
--bs-teal-500-hsl: var(--bs-teal-hue), var(--bs-teal-saturation), 42%;
/* ---- Jaune / warning ----
Basculé en bouton "foncé" : ambre soutenu + survol plus sombre,
et texte blanc (boutons ET badges .text-bg-warning). */
--bs-yellow-saturation: 62%;
--bs-yellow-400-hsl: var(--bs-yellow-hue), var(--bs-yellow-saturation), 52%;
--bs-yellow-500-hsl: var(--bs-yellow-hue), var(--bs-yellow-saturation), 40%;
--bs-yellow-600-hsl: var(--bs-yellow-hue), var(--bs-yellow-saturation), 33%;
--bs-yellow-700-hsl: var(--bs-yellow-hue), var(--bs-yellow-saturation), 26%;
--bs-yellow-foreground-hsl: var(--bs-white-hsl);
--bs-yellow-hover-bg: var(--bs-yellow-600);
--bs-yellow-active-bg: var(--bs-yellow-700);
}
/* Le texte blanc sur fond ambre/cyan a un contraste moyen : un léger
text-shadow renforce la lisibilité sur les boutons warning et info.
(Les alertes warning/info gardent leur fond clair + texte foncé.) */
.btn-warning,
.btn-info {
text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}