/* ============================================================
   UTILS.CSS — Helpers BS5-compatible
   Compatible Bootstrap 5 | by Valère Damahou
   ============================================================ */

/* ============================================================
   PALETTE DE COULEURS
   text-{color}-{shade} | bg-{color}-{shade}
   Shades: 50,100,200,300,400,500,600,700,800,900
   ============================================================ */

/* --- GRAY --- */
.text-gray-50  { color: #f9fafb !important; }
.text-gray-100 { color: #f3f4f6 !important; }
.text-gray-200 { color: #e5e7eb !important; }
.text-gray-300 { color: #d1d5db !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-900 { color: #111827 !important; }

.bg-gray-50  { background-color: #f9fafb !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-gray-200 { background-color: #e5e7eb !important; }
.bg-gray-300 { background-color: #d1d5db !important; }
.bg-gray-400 { background-color: #9ca3af !important; }
.bg-gray-500 { background-color: #6b7280 !important; }
.bg-gray-600 { background-color: #4b5563 !important; }
.bg-gray-700 { background-color: #374151 !important; }
.bg-gray-800 { background-color: #1f2937 !important; }
.bg-gray-900 { background-color: #111827 !important; }

.bg-gray-50:hover  { background-color: #f9fafb !important; }
.bg-gray-100-hover:hover { background-color: #f3f4f6 !important; }
.bg-gray-200-hover:hover { background-color: #e5e7eb !important; }
.bg-gray-300-hover:hover { background-color: #d1d5db !important; }
.bg-gray-400-hover:hover { background-color: #9ca3af !important; }
.bg-gray-500-hover:hover { background-color: #6b7280 !important; }
.bg-gray-600-hover:hover { background-color: #4b5563 !important; }
.bg-gray-700-hover:hover { background-color: #374151 !important; }
.bg-gray-800-hover:hover { background-color: #1f2937 !important; }
.bg-gray-900-hover:hover { background-color: #111827 !important; }

/* --- RED --- */
.text-red-50  { color: #fef2f2 !important; }
.text-red-100 { color: #fee2e2 !important; }
.text-red-200 { color: #fecaca !important; }
.text-red-300 { color: #fca5a5 !important; }
.text-red-400 { color: #f87171 !important; }
.text-red-500 { color: #ef4444 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-700 { color: #b91c1c !important; }
.text-red-800 { color: #991b1b !important; }
.text-red-900 { color: #7f1d1d !important; }

.bg-red-50  { background-color: #fef2f2 !important; }
.bg-red-100 { background-color: #fee2e2 !important; }
.bg-red-200 { background-color: #fecaca !important; }
.bg-red-300 { background-color: #fca5a5 !important; }
.bg-red-400 { background-color: #f87171 !important; }
.bg-red-500 { background-color: #ef4444 !important; }
.bg-red-600 { background-color: #dc2626 !important; }
.bg-red-700 { background-color: #b91c1c !important; }
.bg-red-800 { background-color: #991b1b !important; }
.bg-red-900 { background-color: #7f1d1d !important; }

.bg-red-50-hover:hover  { background-color: #fef2f2 !important; }
.bg-red-100-hover:hover { background-color: #fee2e2 !important; }
.bg-red-200-hover:hover { background-color: #fecaca !important; }
.bg-red-300-hover:hover { background-color: #fca5a5 !important; }
.bg-red-400-hover:hover { background-color: #f87171 !important; }
.bg-red-500-hover:hover { background-color: #ef4444 !important; }
.bg-red-600-hover:hover { background-color: #dc2626 !important; }
.bg-red-700-hover:hover { background-color: #b91c1c !important; }
.bg-red-800-hover:hover { background-color: #991b1b !important; }
.bg-red-900-hover:hover { background-color: #7f1d1d !important; }

/* --- ORANGE --- */
.text-orange-50  { color: #fff7ed !important; }
.text-orange-100 { color: #ffedd5 !important; }
.text-orange-200 { color: #fed7aa !important; }
.text-orange-300 { color: #fdba74 !important; }
.text-orange-400 { color: #fb923c !important; }
.text-orange-500 { color: #f97316 !important; }
.text-orange-600 { color: #ea6c0a !important; }
.text-orange-700 { color: #c2410c !important; }
.text-orange-800 { color: #9a3412 !important; }
.text-orange-900 { color: #7c2d12 !important; }

.bg-orange-50  { background-color: #fff7ed !important; }
.bg-orange-100 { background-color: #ffedd5 !important; }
.bg-orange-200 { background-color: #fed7aa !important; }
.bg-orange-300 { background-color: #fdba74 !important; }
.bg-orange-400 { background-color: #fb923c !important; }
.bg-orange-500 { background-color: #f97316 !important; }
.bg-orange-600 { background-color: #ea6c0a !important; }
.bg-orange-700 { background-color: #c2410c !important; }
.bg-orange-800 { background-color: #9a3412 !important; }
.bg-orange-900 { background-color: #7c2d12 !important; }

.bg-orange-50-hover:hover  { background-color: #fff7ed !important; }
.bg-orange-100-hover:hover { background-color: #ffedd5 !important; }
.bg-orange-200-hover:hover { background-color: #fed7aa !important; }
.bg-orange-300-hover:hover { background-color: #fdba74 !important; }
.bg-orange-400-hover:hover { background-color: #fb923c !important; }
.bg-orange-500-hover:hover { background-color: #f97316 !important; }
.bg-orange-600-hover:hover { background-color: #ea6c0a !important; }
.bg-orange-700-hover:hover { background-color: #c2410c !important; }
.bg-orange-800-hover:hover { background-color: #9a3412 !important; }
.bg-orange-900-hover:hover { background-color: #7c2d12 !important; }

/* --- YELLOW --- */
.text-yellow-50  { color: #fefce8 !important; }
.text-yellow-100 { color: #fef9c3 !important; }
.text-yellow-200 { color: #fef08a !important; }
.text-yellow-300 { color: #fde047 !important; }
.text-yellow-400 { color: #facc15 !important; }
.text-yellow-500 { color: #eab308 !important; }
.text-yellow-600 { color: #ca8a04 !important; }
.text-yellow-700 { color: #a16207 !important; }
.text-yellow-800 { color: #854d0e !important; }
.text-yellow-900 { color: #713f12 !important; }

.bg-yellow-50  { background-color: #fefce8 !important; }
.bg-yellow-100 { background-color: #fef9c3 !important; }
.bg-yellow-200 { background-color: #fef08a !important; }
.bg-yellow-300 { background-color: #fde047 !important; }
.bg-yellow-400 { background-color: #facc15 !important; }
.bg-yellow-500 { background-color: #eab308 !important; }
.bg-yellow-600 { background-color: #ca8a04 !important; }
.bg-yellow-700 { background-color: #a16207 !important; }
.bg-yellow-800 { background-color: #854d0e !important; }
.bg-yellow-900 { background-color: #713f12 !important; }

.bg-yellow-50-hover:hover  { background-color: #fefce8 !important; }
.bg-yellow-100-hover:hover { background-color: #fef9c3 !important; }
.bg-yellow-200-hover:hover { background-color: #fef08a !important; }
.bg-yellow-300-hover:hover { background-color: #fde047 !important; }
.bg-yellow-400-hover:hover { background-color: #facc15 !important; }
.bg-yellow-500-hover:hover { background-color: #eab308 !important; }
.bg-yellow-600-hover:hover { background-color: #ca8a04 !important; }
.bg-yellow-700-hover:hover { background-color: #a16207 !important; }
.bg-yellow-800-hover:hover { background-color: #854d0e !important; }
.bg-yellow-900-hover:hover { background-color: #713f12 !important; }

/* --- GREEN --- */
.text-green-50  { color: #f0fdf4 !important; }
.text-green-100 { color: #dcfce7 !important; }
.text-green-200 { color: #bbf7d0 !important; }
.text-green-300 { color: #86efac !important; }
.text-green-400 { color: #4ade80 !important; }
.text-green-500 { color: #22c55e !important; }
.text-green-600 { color: #16a34a !important; }
.text-green-700 { color: #15803d !important; }
.text-green-800 { color: #166534 !important; }
.text-green-900 { color: #14532d !important; }

.bg-green-50  { background-color: #f0fdf4 !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-green-200 { background-color: #bbf7d0 !important; }
.bg-green-300 { background-color: #86efac !important; }
.bg-green-400 { background-color: #4ade80 !important; }
.bg-green-500 { background-color: #22c55e !important; }
.bg-green-600 { background-color: #16a34a !important; }
.bg-green-700 { background-color: #15803d !important; }
.bg-green-800 { background-color: #166534 !important; }
.bg-green-900 { background-color: #14532d !important; }

.bg-green-50-hover:hover  { background-color: #f0fdf4 !important; }
.bg-green-100-hover:hover { background-color: #dcfce7 !important; }
.bg-green-200-hover:hover { background-color: #bbf7d0 !important; }
.bg-green-300-hover:hover { background-color: #86efac !important; }
.bg-green-400-hover:hover { background-color: #4ade80 !important; }
.bg-green-500-hover:hover { background-color: #22c55e !important; }
.bg-green-600-hover:hover { background-color: #16a34a !important; }
.bg-green-700-hover:hover { background-color: #15803d !important; }
.bg-green-800-hover:hover { background-color: #166534 !important; }
.bg-green-900-hover:hover { background-color: #14532d !important; }

/* --- TEAL --- */
.text-teal-50  { color: #f0fdfa !important; }
.text-teal-100 { color: #ccfbf1 !important; }
.text-teal-200 { color: #99f6e4 !important; }
.text-teal-300 { color: #5eead4 !important; }
.text-teal-400 { color: #2dd4bf !important; }
.text-teal-500 { color: #14b8a6 !important; }
.text-teal-600 { color: #0d9488 !important; }
.text-teal-700 { color: #0f766e !important; }
.text-teal-800 { color: #115e59 !important; }
.text-teal-900 { color: #134e4a !important; }

.bg-teal-50  { background-color: #f0fdfa !important; }
.bg-teal-100 { background-color: #ccfbf1 !important; }
.bg-teal-200 { background-color: #99f6e4 !important; }
.bg-teal-300 { background-color: #5eead4 !important; }
.bg-teal-400 { background-color: #2dd4bf !important; }
.bg-teal-500 { background-color: #14b8a6 !important; }
.bg-teal-600 { background-color: #0d9488 !important; }
.bg-teal-700 { background-color: #0f766e !important; }
.bg-teal-800 { background-color: #115e59 !important; }
.bg-teal-900 { background-color: #134e4a !important; }

.bg-teal-50-hover:hover  { background-color: #f0fdfa !important; }
.bg-teal-100-hover:hover { background-color: #ccfbf1 !important; }
.bg-teal-200-hover:hover { background-color: #99f6e4 !important; }
.bg-teal-300-hover:hover { background-color: #5eead4 !important; }
.bg-teal-400-hover:hover { background-color: #2dd4bf !important; }
.bg-teal-500-hover:hover { background-color: #14b8a6 !important; }
.bg-teal-600-hover:hover { background-color: #0d9488 !important; }
.bg-teal-700-hover:hover { background-color: #0f766e !important; }
.bg-teal-800-hover:hover { background-color: #115e59 !important; }
.bg-teal-900-hover:hover { background-color: #134e4a !important; }

/* --- CYAN --- */
.text-cyan-50  { color: #ecfeff !important; }
.text-cyan-100 { color: #cffafe !important; }
.text-cyan-200 { color: #a5f3fc !important; }
.text-cyan-300 { color: #67e8f9 !important; }
.text-cyan-400 { color: #22d3ee !important; }
.text-cyan-500 { color: #06b6d4 !important; }
.text-cyan-600 { color: #0891b2 !important; }
.text-cyan-700 { color: #0e7490 !important; }
.text-cyan-800 { color: #155e75 !important; }
.text-cyan-900 { color: #164e63 !important; }

.bg-cyan-50  { background-color: #ecfeff !important; }
.bg-cyan-100 { background-color: #cffafe !important; }
.bg-cyan-200 { background-color: #a5f3fc !important; }
.bg-cyan-300 { background-color: #67e8f9 !important; }
.bg-cyan-400 { background-color: #22d3ee !important; }
.bg-cyan-500 { background-color: #06b6d4 !important; }
.bg-cyan-600 { background-color: #0891b2 !important; }
.bg-cyan-700 { background-color: #0e7490 !important; }
.bg-cyan-800 { background-color: #155e75 !important; }
.bg-cyan-900 { background-color: #164e63 !important; }

.bg-cyan-50-hover:hover  { background-color: #ecfeff !important; }
.bg-cyan-100-hover:hover { background-color: #cffafe !important; }
.bg-cyan-200-hover:hover { background-color: #a5f3fc !important; }
.bg-cyan-300-hover:hover { background-color: #67e8f9 !important; }
.bg-cyan-400-hover:hover { background-color: #22d3ee !important; }
.bg-cyan-500-hover:hover { background-color: #06b6d4 !important; }
.bg-cyan-600-hover:hover { background-color: #0891b2 !important; }
.bg-cyan-700-hover:hover { background-color: #0e7490 !important; }
.bg-cyan-800-hover:hover { background-color: #155e75 !important; }
.bg-cyan-900-hover:hover { background-color: #164e63 !important; }

/* --- BLUE --- */
.text-blue-50  { color: #eff6ff !important; }
.text-blue-100 { color: #dbeafe !important; }
.text-blue-200 { color: #bfdbfe !important; }
.text-blue-300 { color: #93c5fd !important; }
.text-blue-400 { color: #60a5fa !important; }
.text-blue-500 { color: #3b82f6 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-700 { color: #1d4ed8 !important; }
.text-blue-800 { color: #1e40af !important; }
.text-blue-900 { color: #1e3a8a !important; }

.bg-blue-50  { background-color: #eff6ff !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-blue-200 { background-color: #bfdbfe !important; }
.bg-blue-300 { background-color: #93c5fd !important; }
.bg-blue-400 { background-color: #60a5fa !important; }
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-700 { background-color: #1d4ed8 !important; }
.bg-blue-800 { background-color: #1e40af !important; }
.bg-blue-900 { background-color: #1e3a8a !important; }

.bg-blue-50-hover:hover  { background-color: #eff6ff !important; }
.bg-blue-100-hover:hover { background-color: #dbeafe !important; }
.bg-blue-200-hover:hover { background-color: #bfdbfe !important; }
.bg-blue-300-hover:hover { background-color: #93c5fd !important; }
.bg-blue-400-hover:hover { background-color: #60a5fa !important; }
.bg-blue-500-hover:hover { background-color: #3b82f6 !important; }
.bg-blue-600-hover:hover { background-color: #2563eb !important; }
.bg-blue-700-hover:hover { background-color: #1d4ed8 !important; }
.bg-blue-800-hover:hover { background-color: #1e40af !important; }
.bg-blue-900-hover:hover { background-color: #1e3a8a !important; }

/* --- NAVY --- */
.text-navy-50  { color: #eef2ff !important; }
.text-navy-100 { color: #d0d9f5 !important; }
.text-navy-200 { color: #a1b3eb !important; }
.text-navy-300 { color: #6b8de0 !important; }
.text-navy-400 { color: #3a5fd4 !important; }
.text-navy-500 { color: #1a3ab8 !important; }
.text-navy-600 { color: #122d96 !important; }
.text-navy-700 { color: #0d2070 !important; }
.text-navy-800 { color: #081549 !important; }
.text-navy-900 { color: #040d2e !important; }

.bg-navy-50  { background-color: #eef2ff !important; }
.bg-navy-100 { background-color: #d0d9f5 !important; }
.bg-navy-200 { background-color: #a1b3eb !important; }
.bg-navy-300 { background-color: #6b8de0 !important; }
.bg-navy-400 { background-color: #3a5fd4 !important; }
.bg-navy-500 { background-color: #1a3ab8 !important; }
.bg-navy-600 { background-color: #122d96 !important; }
.bg-navy-700 { background-color: #0d2070 !important; }
.bg-navy-800 { background-color: #081549 !important; }
.bg-navy-900 { background-color: #040d2e !important; }

.bg-navy-50-hover:hover  { background-color: #eef2ff !important; }
.bg-navy-100-hover:hover { background-color: #d0d9f5 !important; }
.bg-navy-200-hover:hover { background-color: #a1b3eb !important; }
.bg-navy-300-hover:hover { background-color: #6b8de0 !important; }
.bg-navy-400-hover:hover { background-color: #3a5fd4 !important; }
.bg-navy-500-hover:hover { background-color: #1a3ab8 !important; }
.bg-navy-600-hover:hover { background-color: #122d96 !important; }
.bg-navy-700-hover:hover { background-color: #0d2070 !important; }
.bg-navy-800-hover:hover { background-color: #081549 !important; }
.bg-navy-900-hover:hover { background-color: #040d2e !important; }

/* --- INDIGO --- */
.text-indigo-50  { color: #eef2ff !important; }
.text-indigo-100 { color: #e0e7ff !important; }
.text-indigo-200 { color: #c7d2fe !important; }
.text-indigo-300 { color: #a5b4fc !important; }
.text-indigo-400 { color: #818cf8 !important; }
.text-indigo-500 { color: #6366f1 !important; }
.text-indigo-600 { color: #4f46e5 !important; }
.text-indigo-700 { color: #4338ca !important; }
.text-indigo-800 { color: #3730a3 !important; }
.text-indigo-900 { color: #312e81 !important; }

.bg-indigo-50  { background-color: #eef2ff !important; }
.bg-indigo-100 { background-color: #e0e7ff !important; }
.bg-indigo-200 { background-color: #c7d2fe !important; }
.bg-indigo-300 { background-color: #a5b4fc !important; }
.bg-indigo-400 { background-color: #818cf8 !important; }
.bg-indigo-500 { background-color: #6366f1 !important; }
.bg-indigo-600 { background-color: #4f46e5 !important; }
.bg-indigo-700 { background-color: #4338ca !important; }
.bg-indigo-800 { background-color: #3730a3 !important; }
.bg-indigo-900 { background-color: #312e81 !important; }

.bg-indigo-50-hover:hover  { background-color: #eef2ff !important; }
.bg-indigo-100-hover:hover { background-color: #e0e7ff !important; }
.bg-indigo-200-hover:hover { background-color: #c7d2fe !important; }
.bg-indigo-300-hover:hover { background-color: #a5b4fc !important; }
.bg-indigo-400-hover:hover { background-color: #818cf8 !important; }
.bg-indigo-500-hover:hover { background-color: #6366f1 !important; }
.bg-indigo-600-hover:hover { background-color: #4f46e5 !important; }
.bg-indigo-700-hover:hover { background-color: #4338ca !important; }
.bg-indigo-800-hover:hover { background-color: #3730a3 !important; }
.bg-indigo-900-hover:hover { background-color: #312e81 !important; }

/* --- PURPLE --- */
.text-purple-50  { color: #faf5ff !important; }
.text-purple-100 { color: #f3e8ff !important; }
.text-purple-200 { color: #e9d5ff !important; }
.text-purple-300 { color: #d8b4fe !important; }
.text-purple-400 { color: #c084fc !important; }
.text-purple-500 { color: #a855f7 !important; }
.text-purple-600 { color: #9333ea !important; }
.text-purple-700 { color: #7e22ce !important; }
.text-purple-800 { color: #6b21a8 !important; }
.text-purple-900 { color: #581c87 !important; }

.bg-purple-50  { background-color: #faf5ff !important; }
.bg-purple-100 { background-color: #f3e8ff !important; }
.bg-purple-200 { background-color: #e9d5ff !important; }
.bg-purple-300 { background-color: #d8b4fe !important; }
.bg-purple-400 { background-color: #c084fc !important; }
.bg-purple-500 { background-color: #a855f7 !important; }
.bg-purple-600 { background-color: #9333ea !important; }
.bg-purple-700 { background-color: #7e22ce !important; }
.bg-purple-800 { background-color: #6b21a8 !important; }
.bg-purple-900 { background-color: #581c87 !important; }

.bg-purple-50-hover:hover  { background-color: #faf5ff !important; }
.bg-purple-100-hover:hover { background-color: #f3e8ff !important; }
.bg-purple-200-hover:hover { background-color: #e9d5ff !important; }
.bg-purple-300-hover:hover { background-color: #d8b4fe !important; }
.bg-purple-400-hover:hover { background-color: #c084fc !important; }
.bg-purple-500-hover:hover { background-color: #a855f7 !important; }
.bg-purple-600-hover:hover { background-color: #9333ea !important; }
.bg-purple-700-hover:hover { background-color: #7e22ce !important; }
.bg-purple-800-hover:hover { background-color: #6b21a8 !important; }
.bg-purple-900-hover:hover { background-color: #581c87 !important; }

/* --- PINK --- */
.text-pink-50  { color: #fdf2f8 !important; }
.text-pink-100 { color: #fce7f3 !important; }
.text-pink-200 { color: #fbcfe8 !important; }
.text-pink-300 { color: #f9a8d4 !important; }
.text-pink-400 { color: #f472b6 !important; }
.text-pink-500 { color: #ec4899 !important; }
.text-pink-600 { color: #db2777 !important; }
.text-pink-700 { color: #be185d !important; }
.text-pink-800 { color: #9d174d !important; }
.text-pink-900 { color: #831843 !important; }

.bg-pink-50  { background-color: #fdf2f8 !important; }
.bg-pink-100 { background-color: #fce7f3 !important; }
.bg-pink-200 { background-color: #fbcfe8 !important; }
.bg-pink-300 { background-color: #f9a8d4 !important; }
.bg-pink-400 { background-color: #f472b6 !important; }
.bg-pink-500 { background-color: #ec4899 !important; }
.bg-pink-600 { background-color: #db2777 !important; }
.bg-pink-700 { background-color: #be185d !important; }
.bg-pink-800 { background-color: #9d174d !important; }
.bg-pink-900 { background-color: #831843 !important; }

.bg-pink-50-hover:hover  { background-color: #fdf2f8 !important; }
.bg-pink-100-hover:hover { background-color: #fce7f3 !important; }
.bg-pink-200-hover:hover { background-color: #fbcfe8 !important; }
.bg-pink-300-hover:hover { background-color: #f9a8d4 !important; }
.bg-pink-400-hover:hover { background-color: #f472b6 !important; }
.bg-pink-500-hover:hover { background-color: #ec4899 !important; }
.bg-pink-600-hover:hover { background-color: #db2777 !important; }
.bg-pink-700-hover:hover { background-color: #be185d !important; }
.bg-pink-800-hover:hover { background-color: #9d174d !important; }
.bg-pink-900-hover:hover { background-color: #831843 !important; }

/* --- ROSE --- */
.text-rose-50  { color: #fff1f2 !important; }
.text-rose-100 { color: #ffe4e6 !important; }
.text-rose-200 { color: #fecdd3 !important; }
.text-rose-300 { color: #fda4af !important; }
.text-rose-400 { color: #fb7185 !important; }
.text-rose-500 { color: #f43f5e !important; }
.text-rose-600 { color: #e11d48 !important; }
.text-rose-700 { color: #be123c !important; }
.text-rose-800 { color: #9f1239 !important; }
.text-rose-900 { color: #881337 !important; }

.bg-rose-50  { background-color: #fff1f2 !important; }
.bg-rose-100 { background-color: #ffe4e6 !important; }
.bg-rose-200 { background-color: #fecdd3 !important; }
.bg-rose-300 { background-color: #fda4af !important; }
.bg-rose-400 { background-color: #fb7185 !important; }
.bg-rose-500 { background-color: #f43f5e !important; }
.bg-rose-600 { background-color: #e11d48 !important; }
.bg-rose-700 { background-color: #be123c !important; }
.bg-rose-800 { background-color: #9f1239 !important; }
.bg-rose-900 { background-color: #881337 !important; }

.bg-rose-50-hover:hover  { background-color: #fff1f2 !important; }
.bg-rose-100-hover:hover { background-color: #ffe4e6 !important; }
.bg-rose-200-hover:hover { background-color: #fecdd3 !important; }
.bg-rose-300-hover:hover { background-color: #fda4af !important; }
.bg-rose-400-hover:hover { background-color: #fb7185 !important; }
.bg-rose-500-hover:hover { background-color: #f43f5e !important; }
.bg-rose-600-hover:hover { background-color: #e11d48 !important; }
.bg-rose-700-hover:hover { background-color: #be123c !important; }
.bg-rose-800-hover:hover { background-color: #9f1239 !important; }
.bg-rose-900-hover:hover { background-color: #881337 !important; }

/* --- WHITE / BLACK --- */
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }
.bg-white-hover:hover { background-color: #ffffff !important; }
.bg-black-hover:hover { background-color: #000000 !important; }

/* ============================================================
   TAILLES DE POLICE RESPONSIVES
   fs-{breakpoint}-{size} | size: 1–10
   1 = largest, 10 = smallest
   ============================================================ */

:root {
  --fs-1: 3rem;
  --fs-2: 2.5rem;
  --fs-3: 2rem;
  --fs-4: 1.75rem;
  --fs-5: 1.5rem;
  --fs-6: 1.25rem;
  --fs-7: 1.1rem;
  --fs-8: 0.95rem;
  --fs-9: 0.85rem;
  --fs-10: 0.75rem;
}

/* xs — max-width: 575px */
@media (max-width: 575.98px) {
  .fs-xs-1  { font-size: var(--fs-1)  !important; }
  .fs-xs-2  { font-size: var(--fs-2)  !important; }
  .fs-xs-3  { font-size: var(--fs-3)  !important; }
  .fs-xs-4  { font-size: var(--fs-4)  !important; }
  .fs-xs-5  { font-size: var(--fs-5)  !important; }
  .fs-xs-6  { font-size: var(--fs-6)  !important; }
  .fs-xs-7  { font-size: var(--fs-7)  !important; }
  .fs-xs-8  { font-size: var(--fs-8)  !important; }
  .fs-xs-9  { font-size: var(--fs-9)  !important; }
  .fs-xs-10 { font-size: var(--fs-10) !important; }
}

/* sm — min-width: 576px */
@media (min-width: 576px) {
  .fs-sm-1  { font-size: var(--fs-1)  !important; }
  .fs-sm-2  { font-size: var(--fs-2)  !important; }
  .fs-sm-3  { font-size: var(--fs-3)  !important; }
  .fs-sm-4  { font-size: var(--fs-4)  !important; }
  .fs-sm-5  { font-size: var(--fs-5)  !important; }
  .fs-sm-6  { font-size: var(--fs-6)  !important; }
  .fs-sm-7  { font-size: var(--fs-7)  !important; }
  .fs-sm-8  { font-size: var(--fs-8)  !important; }
  .fs-sm-9  { font-size: var(--fs-9)  !important; }
  .fs-sm-10 { font-size: var(--fs-10) !important; }
}

/* md — min-width: 768px */
@media (min-width: 768px) {
  .fs-md-1  { font-size: var(--fs-1)  !important; }
  .fs-md-2  { font-size: var(--fs-2)  !important; }
  .fs-md-3  { font-size: var(--fs-3)  !important; }
  .fs-md-4  { font-size: var(--fs-4)  !important; }
  .fs-md-5  { font-size: var(--fs-5)  !important; }
  .fs-md-6  { font-size: var(--fs-6)  !important; }
  .fs-md-7  { font-size: var(--fs-7)  !important; }
  .fs-md-8  { font-size: var(--fs-8)  !important; }
  .fs-md-9  { font-size: var(--fs-9)  !important; }
  .fs-md-10 { font-size: var(--fs-10) !important; }
}

/* lg — min-width: 992px */
@media (min-width: 992px) {
  .fs-lg-1  { font-size: var(--fs-1)  !important; }
  .fs-lg-2  { font-size: var(--fs-2)  !important; }
  .fs-lg-3  { font-size: var(--fs-3)  !important; }
  .fs-lg-4  { font-size: var(--fs-4)  !important; }
  .fs-lg-5  { font-size: var(--fs-5)  !important; }
  .fs-lg-6  { font-size: var(--fs-6)  !important; }
  .fs-lg-7  { font-size: var(--fs-7)  !important; }
  .fs-lg-8  { font-size: var(--fs-8)  !important; }
  .fs-lg-9  { font-size: var(--fs-9)  !important; }
  .fs-lg-10 { font-size: var(--fs-10) !important; }
}

/* xl — min-width: 1200px */
@media (min-width: 1200px) {
  .fs-xl-1  { font-size: var(--fs-1)  !important; }
  .fs-xl-2  { font-size: var(--fs-2)  !important; }
  .fs-xl-3  { font-size: var(--fs-3)  !important; }
  .fs-xl-4  { font-size: var(--fs-4)  !important; }
  .fs-xl-5  { font-size: var(--fs-5)  !important; }
  .fs-xl-6  { font-size: var(--fs-6)  !important; }
  .fs-xl-7  { font-size: var(--fs-7)  !important; }
  .fs-xl-8  { font-size: var(--fs-8)  !important; }
  .fs-xl-9  { font-size: var(--fs-9)  !important; }
  .fs-xl-10 { font-size: var(--fs-10) !important; }
}

/* ============================================================
   MARGES RESPONSIVES (XS only — max-width: 575px)
   m-xs-{0-6} | mx-xs-{0-6} | my-xs-{0-6}
   ============================================================ */

@media (max-width: 575.98px) {
  .m-xs-0  { margin: 0 !important; }
  .m-xs-1  { margin: 0.25rem !important; }
  .m-xs-2  { margin: 0.5rem !important; }
  .m-xs-3  { margin: 1rem !important; }
  .m-xs-4  { margin: 1.5rem !important; }
  .m-xs-5  { margin: 3rem !important; }
  .m-xs-6  { margin: 4rem !important; }

  .mx-xs-0  { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-xs-1  { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
  .mx-xs-2  { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
  .mx-xs-3  { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mx-xs-4  { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
  .mx-xs-5  { margin-left: 3rem !important; margin-right: 3rem !important; }
  .mx-xs-6  { margin-left: 4rem !important; margin-right: 4rem !important; }

  .my-xs-0  { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-xs-1  { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
  .my-xs-2  { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
  .my-xs-3  { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .my-xs-4  { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .my-xs-5  { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .my-xs-6  { margin-top: 4rem !important; margin-bottom: 4rem !important; }

  /* PADDINGS XS */
  .p-xs-0  { padding: 0 !important; }
  .p-xs-1  { padding: 0.25rem !important; }
  .p-xs-2  { padding: 0.5rem !important; }
  .p-xs-3  { padding: 1rem !important; }
  .p-xs-4  { padding: 1.5rem !important; }
  .p-xs-5  { padding: 3rem !important; }
  .p-xs-6  { padding: 4rem !important; }

  .py-xs-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-xs-1  { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
  .py-xs-2  { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .py-xs-3  { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-xs-4  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .py-xs-5  { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-xs-6  { padding-top: 4rem !important; padding-bottom: 4rem !important; }

  .px-xs-0  { padding-right: 0 !important; padding-left: 0 !important; }
  .px-xs-1  { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
  .px-xs-2  { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
  .px-xs-3  { padding-right: 1rem !important; padding-left: 1rem !important; }
  .px-xs-4  { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
  .px-xs-5  { padding-right: 3rem !important; padding-left: 3rem !important; }
  .px-xs-6  { padding-right: 4rem !important; padding-left: 4rem !important; }
}

/* ============================================================
   BORDURES ARRONDIES ÉTENDUES
   rounded-{size} | tailles : 0,4,5,6,8,10,12,16,30,full
   + variantes responsive md (768px) et lg (991px)
   ============================================================ */

.rounded-0  { border-radius: 0 !important; }
.rounded-4  { border-radius: 4px !important; }
.rounded-5  { border-radius: 5px !important; }
.rounded-6  { border-radius: 6px !important; }
.rounded-8  { border-radius: 8px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-12 { border-radius: 12px !important; }
.rounded-16 { border-radius: 16px !important; }
.rounded-30 { border-radius: 30px !important; }
.rounded-full,.rounded-pill { border-radius: 100% !important; }

@media (min-width: 768px) {
  .rounded-md-0    { border-radius: 0 !important; }
  .rounded-md-4    { border-radius: 4px !important; }
  .rounded-md-5    { border-radius: 5px !important; }
  .rounded-md-6    { border-radius: 6px !important; }
  .rounded-md-8    { border-radius: 8px !important; }
  .rounded-md-10   { border-radius: 10px !important; }
  .rounded-md-12   { border-radius: 12px !important; }
  .rounded-md-16   { border-radius: 16px !important; }
  .rounded-md-30   { border-radius: 30px !important; }
  .rounded-md-full,.rounded-md-pill { border-radius: 100% !important; }
}

@media (min-width: 991px) {
  .rounded-lg-0    { border-radius: 0 !important; }
  .rounded-lg-4    { border-radius: 4px !important; }
  .rounded-lg-5    { border-radius: 5px !important; }
  .rounded-lg-6    { border-radius: 6px !important; }
  .rounded-lg-8    { border-radius: 8px !important; }
  .rounded-lg-10   { border-radius: 10px !important; }
  .rounded-lg-12   { border-radius: 12px !important; }
  .rounded-lg-16   { border-radius: 16px !important; }
  .rounded-lg-30   { border-radius: 30px !important; }
  .rounded-lg-full,.rounded-lg-pill { border-radius: 100% !important; }
}

/* ============================================================
   BOITES CARRÉES wh-{size}
   width + height identiques
   ============================================================ */

.wh-20  { width: 20px  !important; height: 20px  !important; flex-shrink: 0; }
.wh-24  { width: 24px  !important; height: 24px  !important; flex-shrink: 0; }
.wh-25  { width: 25px  !important; height: 25px  !important; flex-shrink: 0; }
.wh-28  { width: 28px  !important; height: 28px  !important; flex-shrink: 0; }
.wh-30  { width: 30px  !important; height: 30px  !important; flex-shrink: 0; }
.wh-33  { width: 33px  !important; height: 33px  !important; flex-shrink: 0; }
.wh-35  { width: 35px  !important; height: 35px  !important; flex-shrink: 0; }
.wh-37  { width: 37px  !important; height: 37px  !important; flex-shrink: 0; }
.wh-40  { width: 40px  !important; height: 40px  !important; flex-shrink: 0; }
.wh-45  { width: 45px  !important; height: 45px  !important; flex-shrink: 0; }
.wh-50  { width: 50px  !important; height: 50px  !important; flex-shrink: 0; }
.wh-55  { width: 55px  !important; height: 55px  !important; flex-shrink: 0; }
.wh-60  { width: 60px  !important; height: 60px  !important; flex-shrink: 0; }
.wh-65  { width: 65px  !important; height: 65px  !important; flex-shrink: 0; }
.wh-70  { width: 70px  !important; height: 70px  !important; flex-shrink: 0; }
.wh-80  { width: 80px  !important; height: 80px  !important; flex-shrink: 0; }
.wh-90  { width: 90px  !important; height: 90px  !important; flex-shrink: 0; }
.wh-100 { width: 100px !important; height: 100px !important; flex-shrink: 0; }
.wh-120 { width: 120px !important; height: 120px !important; flex-shrink: 0; }
.wh-140 { width: 140px !important; height: 140px !important; flex-shrink: 0; }
.wh-160 { width: 160px !important; height: 160px !important; flex-shrink: 0; }
.wh-180 { width: 180px !important; height: 180px !important; flex-shrink: 0; }
.wh-200 { width: 200px !important; height: 200px !important; flex-shrink: 0; }
.wh-250 { width: 250px !important; height: 250px !important; flex-shrink: 0; }

@media (max-width: 575.98px) {
  .wh-xs-20  { width: 20px  !important; height: 20px  !important; flex-shrink: 0; }
  .wh-xs-24  { width: 24px  !important; height: 24px  !important; flex-shrink: 0; }
  .wh-xs-25  { width: 25px  !important; height: 25px  !important; flex-shrink: 0; }
  .wh-xs-28  { width: 28px  !important; height: 28px  !important; flex-shrink: 0; }
  .wh-xs-30  { width: 30px  !important; height: 30px  !important; flex-shrink: 0; }
  .wh-xs-33  { width: 33px  !important; height: 33px  !important; flex-shrink: 0; }
  .wh-xs-35  { width: 35px  !important; height: 35px  !important; flex-shrink: 0; }
  .wh-xs-37  { width: 37px  !important; height: 37px  !important; flex-shrink: 0; }
  .wh-xs-40  { width: 40px  !important; height: 40px  !important; flex-shrink: 0; }
  .wh-xs-45  { width: 45px  !important; height: 45px  !important; flex-shrink: 0; }
  .wh-xs-50  { width: 50px  !important; height: 50px  !important; flex-shrink: 0; }
  .wh-xs-55  { width: 55px  !important; height: 55px  !important; flex-shrink: 0; }
  .wh-xs-60  { width: 60px  !important; height: 60px  !important; flex-shrink: 0; }
  .wh-xs-65  { width: 65px  !important; height: 65px  !important; flex-shrink: 0; }
  .wh-xs-70  { width: 70px  !important; height: 70px  !important; flex-shrink: 0; }
  .wh-xs-80  { width: 80px  !important; height: 80px  !important; flex-shrink: 0; }
  .wh-xs-90  { width: 90px  !important; height: 90px  !important; flex-shrink: 0; }
  .wh-xs-100 { width: 100px !important; height: 100px !important; flex-shrink: 0; }
  .wh-xs-120 { width: 120px !important; height: 120px !important; flex-shrink: 0; }
  .wh-xs-140 { width: 140px !important; height: 140px !important; flex-shrink: 0; }
  .wh-xs-160 { width: 160px !important; height: 160px !important; flex-shrink: 0; }
  .wh-xs-180 { width: 180px !important; height: 180px !important; flex-shrink: 0; }
  .wh-xs-200 { width: 200px !important; height: 200px !important; flex-shrink: 0; }
  .wh-xs-250 { width: 250px !important; height: 250px !important; flex-shrink: 0; }
}

@media (min-width: 768px) {
  .wh-md-20  { width: 20px  !important; height: 20px  !important; flex-shrink: 0; }
  .wh-md-24  { width: 24px  !important; height: 24px  !important; flex-shrink: 0; }
  .wh-md-25  { width: 25px  !important; height: 25px  !important; flex-shrink: 0; }
  .wh-md-28  { width: 28px  !important; height: 28px  !important; flex-shrink: 0; }
  .wh-md-30  { width: 30px  !important; height: 30px  !important; flex-shrink: 0; }
  .wh-md-33  { width: 33px  !important; height: 33px  !important; flex-shrink: 0; }
  .wh-md-35  { width: 35px  !important; height: 35px  !important; flex-shrink: 0; }
  .wh-md-37  { width: 37px  !important; height: 37px  !important; flex-shrink: 0; }
  .wh-md-40  { width: 40px  !important; height: 40px  !important; flex-shrink: 0; }
  .wh-md-45  { width: 45px  !important; height: 45px  !important; flex-shrink: 0; }
  .wh-md-50  { width: 50px  !important; height: 50px  !important; flex-shrink: 0; }
  .wh-md-55  { width: 55px  !important; height: 55px  !important; flex-shrink: 0; }
  .wh-md-60  { width: 60px  !important; height: 60px  !important; flex-shrink: 0; }
  .wh-md-65  { width: 65px  !important; height: 65px  !important; flex-shrink: 0; }
  .wh-md-70  { width: 70px  !important; height: 70px  !important; flex-shrink: 0; }
  .wh-md-80  { width: 80px  !important; height: 80px  !important; flex-shrink: 0; }
  .wh-md-90  { width: 90px  !important; height: 90px  !important; flex-shrink: 0; }
  .wh-md-100 { width: 100px !important; height: 100px !important; flex-shrink: 0; }
  .wh-md-120 { width: 120px !important; height: 120px !important; flex-shrink: 0; }
  .wh-md-140 { width: 140px !important; height: 140px !important; flex-shrink: 0; }
  .wh-md-160 { width: 160px !important; height: 160px !important; flex-shrink: 0; }
  .wh-md-180 { width: 180px !important; height: 180px !important; flex-shrink: 0; }
  .wh-md-200 { width: 200px !important; height: 200px !important; flex-shrink: 0; }
  .wh-md-250 { width: 250px !important; height: 250px !important; flex-shrink: 0; }
}

@media (min-width: 991px) {
  .wh-lg-20  { width: 20px  !important; height: 20px  !important; flex-shrink: 0; }
  .wh-lg-24  { width: 24px  !important; height: 24px  !important; flex-shrink: 0; }
  .wh-lg-25  { width: 25px  !important; height: 25px  !important; flex-shrink: 0; }
  .wh-lg-28  { width: 28px  !important; height: 28px  !important; flex-shrink: 0; }
  .wh-lg-30  { width: 30px  !important; height: 30px  !important; flex-shrink: 0; }
  .wh-lg-33  { width: 33px  !important; height: 33px  !important; flex-shrink: 0; }
  .wh-lg-35  { width: 35px  !important; height: 35px  !important; flex-shrink: 0; }
  .wh-lg-37  { width: 37px  !important; height: 37px  !important; flex-shrink: 0; }
  .wh-lg-40  { width: 40px  !important; height: 40px  !important; flex-shrink: 0; }
  .wh-lg-45  { width: 45px  !important; height: 45px  !important; flex-shrink: 0; }
  .wh-lg-50  { width: 50px  !important; height: 50px  !important; flex-shrink: 0; }
  .wh-lg-55  { width: 55px  !important; height: 55px  !important; flex-shrink: 0; }
  .wh-lg-60  { width: 60px  !important; height: 60px  !important; flex-shrink: 0; }
  .wh-lg-65  { width: 65px  !important; height: 65px  !important; flex-shrink: 0; }
  .wh-lg-70  { width: 70px  !important; height: 70px  !important; flex-shrink: 0; }
  .wh-lg-80  { width: 80px  !important; height: 80px  !important; flex-shrink: 0; }
  .wh-lg-90  { width: 90px  !important; height: 90px  !important; flex-shrink: 0; }
  .wh-lg-100 { width: 100px !important; height: 100px !important; flex-shrink: 0; }
  .wh-lg-120 { width: 120px !important; height: 120px !important; flex-shrink: 0; }
  .wh-lg-140 { width: 140px !important; height: 140px !important; flex-shrink: 0; }
  .wh-lg-160 { width: 160px !important; height: 160px !important; flex-shrink: 0; }
  .wh-lg-180 { width: 180px !important; height: 180px !important; flex-shrink: 0; }
  .wh-lg-200 { width: 200px !important; height: 200px !important; flex-shrink: 0; }
  .wh-lg-250 { width: 250px !important; height: 250px !important; flex-shrink: 0; }
}

/* ============================================================
   OMBRES PORTÉES
   shadow-{0-10} | shadow-top-{1-10} | shadow-bottom-{1-10}
   ============================================================ */

.shadow-0  { box-shadow: none !important; }
.shadow-1  { box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; }
.shadow-2  { box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; }
.shadow-3  { box-shadow: 0 2px 6px rgba(0,0,0,.10) !important; }
.shadow-4  { box-shadow: 0 3px 8px rgba(0,0,0,.12) !important; }
.shadow-5  { box-shadow: 0 4px 12px rgba(0,0,0,.14) !important; }
.shadow-6  { box-shadow: 0 6px 16px rgba(0,0,0,.16) !important; }
.shadow-7  { box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; }
.shadow-8  { box-shadow: 0 10px 28px rgba(0,0,0,.20) !important; }
.shadow-9  { box-shadow: 0 14px 36px rgba(0,0,0,.24) !important; }
.shadow-10 { box-shadow: 0 20px 50px rgba(0,0,0,.30) !important; }

.shadow-top-1  { box-shadow: 0 -1px 2px rgba(0,0,0,.06) !important; }
.shadow-top-2  { box-shadow: 0 -2px 4px rgba(0,0,0,.08) !important; }
.shadow-top-3  { box-shadow: 0 -3px 6px rgba(0,0,0,.10) !important; }
.shadow-top-4  { box-shadow: 0 -4px 8px rgba(0,0,0,.12) !important; }
.shadow-top-5  { box-shadow: 0 -5px 12px rgba(0,0,0,.14) !important; }
.shadow-top-6  { box-shadow: 0 -6px 16px rgba(0,0,0,.16) !important; }
.shadow-top-7  { box-shadow: 0 -8px 20px rgba(0,0,0,.18) !important; }
.shadow-top-8  { box-shadow: 0 -10px 28px rgba(0,0,0,.20) !important; }
.shadow-top-9  { box-shadow: 0 -14px 36px rgba(0,0,0,.24) !important; }
.shadow-top-10 { box-shadow: 0 -20px 50px rgba(0,0,0,.30) !important; }

.shadow-bottom-1  { box-shadow: 0 1px 2px rgba(0,0,0,.06) !important; }
.shadow-bottom-2  { box-shadow: 0 2px 4px rgba(0,0,0,.08) !important; }
.shadow-bottom-3  { box-shadow: 0 3px 6px rgba(0,0,0,.10) !important; }
.shadow-bottom-4  { box-shadow: 0 4px 8px rgba(0,0,0,.12) !important; }
.shadow-bottom-5  { box-shadow: 0 5px 12px rgba(0,0,0,.14) !important; }
.shadow-bottom-6  { box-shadow: 0 6px 16px rgba(0,0,0,.16) !important; }
.shadow-bottom-7  { box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; }
.shadow-bottom-8  { box-shadow: 0 10px 28px rgba(0,0,0,.20) !important; }
.shadow-bottom-9  { box-shadow: 0 14px 36px rgba(0,0,0,.24) !important; }
.shadow-bottom-10 { box-shadow: 0 20px 50px rgba(0,0,0,.30) !important; }

/* ============================================================
   BOUTONS STYLE FACEBOOK
   .btn-fb | .btn-fb-{color} | tailles : sm, md (défaut), lg
   .btn-soft-{color}
   ============================================================ */

.btn-fb,.fb-btn, .fbtn,.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .18s ease, transform .1s ease, box-shadow .18s ease;
  padding: 0.5rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.4;
  background-color: #1877f2;
  color: #fff;
  text-decoration: none;
}
.btn-fb:hover,.fb-btn:hover, .fbtn:hover,.button:hover { background-color: #c9cbcd; color: #232323;}
.btn-fb:active,.fb-btn:active, .fbtn:active,.button:active { transform: scale(.97); }

.btn-fb-sm { padding: 0.3rem 0.8rem; font-size: 0.82rem; border-radius: 5px; }
.btn-fb-lg { padding: 0.7rem 1.6rem; font-size: 1.05rem; border-radius: 8px; }

.btn-fb-primary   { background-color: #1877f2; color: #fff; }
.btn-fb-primary:hover   { background-color: #166ee1; color: #fff; }
.btn-fb-secondary { background-color: #e4e6eb; color: #050505; }
.btn-fb-secondary:hover { background-color: #d8dadf; color: #050505; }
.btn-fb-success   { background-color: #42b72a; color: #fff; }
.btn-fb-success:hover   { background-color: #36a420; color: #fff; }
.btn-fb-danger    { background-color: #ef4444; color: #fff; }
.btn-fb-danger:hover    { background-color: #dc2626; color: #fff; }
.btn-fb-dark      { background-color: #1c1e21; color: #fff; }
.btn-fb-dark:hover      { background-color: #050505; color: #fff; }
.btn-fb-orange    { background-color: #f97316; color: #fff; }
.btn-fb-orange:hover    { background-color: #ea6c0a; color: #fff; }
.btn-fb-teal      { background-color: #14b8a6; color: #fff; }
.btn-fb-teal:hover      { background-color: #0d9488; color: #fff; }
.btn-fb-purple    { background-color: #9333ea; color: #fff; }
.btn-fb-purple:hover    { background-color: #7e22ce; color: #fff; }

/* SOFT BUTTONS */
.btn-soft-primary  { background-color: #dbeafe; color: #1d4ed8; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-primary:hover  { background-color: #bfdbfe; color: #1d4ed8; }
.btn-soft-success  { background-color: #dcfce7; color: #15803d; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-success:hover  { background-color: #bbf7d0; color: #15803d; }
.btn-soft-danger   { background-color: #fee2e2; color: #b91c1c; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-danger:hover   { background-color: #fecaca; color: #b91c1c; }
.btn-soft-warning  { background-color: #fef9c3; color: #a16207; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-warning:hover  { background-color: #fef08a; color: #a16207; }
.btn-soft-orange   { background-color: #ffedd5; color: #c2410c; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-orange:hover   { background-color: #fed7aa; color: #c2410c; }
.btn-soft-purple   { background-color: #f3e8ff; color: #7e22ce; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-purple:hover   { background-color: #e9d5ff; color: #7e22ce; }
.btn-soft-pink     { background-color: #fce7f3; color: #be185d; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-pink:hover     { background-color: #fbcfe8; color: #be185d; }
.btn-soft-teal     { background-color: #ccfbf1; color: #0f766e; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-teal:hover     { background-color: #99f6e4; color: #0f766e; }
.btn-soft-dark     { background-color: #f3f4f6; color: #111827; border: none; border-radius: 6px; padding: 0.5rem 1.1rem; font-weight: 600; cursor: pointer; transition: background-color .18s; display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.btn-soft-dark:hover     { background-color: #e5e7eb; color: #111827; }

/* ============================================================
   BADGES
   .badge-{color} | .badge-pill | .badge-rounded
   .badge-xs | .badge-sm | .badge-md | .badge-lg | .badge-xl
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.28em 0.65em;
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
}

.badge-pill     { border-radius: 100px !important; }
.badge-rounded  { border-radius: 6px !important; }

.badge-xs { font-size: 0.6rem  !important; padding: 0.15em 0.45em !important; }
.badge-sm { font-size: 0.68rem !important; padding: 0.2em 0.5em !important; }
.badge-md { font-size: 0.78rem !important; padding: 0.3em 0.7em !important; }
.badge-lg { font-size: 0.88rem !important; padding: 0.35em 0.85em !important; }
.badge-xl { font-size: 1rem   !important; padding: 0.4em 1em !important; }

.badge-primary  { background-color: #1877f2; color: #fff; }
.badge-blue     { background-color: #3b82f6; color: #fff; }
.badge-indigo   { background-color: #6366f1; color: #fff; }
.badge-purple   { background-color: #9333ea; color: #fff; }
.badge-pink     { background-color: #ec4899; color: #fff; }
.badge-rose     { background-color: #f43f5e; color: #fff; }
.badge-red      { background-color: #ef4444; color: #fff; }
.badge-orange   { background-color: #f97316; color: #fff; }
.badge-yellow   { background-color: #eab308; color: #fff; }
.badge-green    { background-color: #22c55e; color: #fff; }
.badge-teal     { background-color: #14b8a6; color: #fff; }
.badge-cyan     { background-color: #06b6d4; color: #fff; }
.badge-navy     { background-color: #1a3ab8; color: #fff; }
.badge-dark     { background-color: #1f2937; color: #fff; }
.badge-gray     { background-color: #6b7280; color: #fff; }
.badge-light    { background-color: #f3f4f6; color: #374151; }
.badge-white    { background-color: #fff; color: #111827; border: 1px solid #e5e7eb; }

/* Soft badges */
.badge-soft-primary { background-color: #dbeafe; color: #1d4ed8; }
.badge-soft-success { background-color: #dcfce7; color: #15803d; }
.badge-soft-danger  { background-color: #fee2e2; color: #b91c1c; }
.badge-soft-warning { background-color: #fef9c3; color: #a16207; }
.badge-soft-orange  { background-color: #ffedd5; color: #c2410c; }
.badge-soft-purple  { background-color: #f3e8ff; color: #7e22ce; }
.badge-soft-pink    { background-color: #fce7f3; color: #be185d; }
.badge-soft-teal    { background-color: #ccfbf1; color: #0f766e; }
.badge-soft-cyan    { background-color: #cffafe; color: #0e7490; }
.badge-soft-gray    { background-color: #f3f4f6; color: #374151; }
.badge-soft-indigo  { background-color: #e0e7ff; color: #4338ca; }

/* ============================================================
   IMAGES
   ============================================================ */

.img-cover    { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.img-contain  { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.img-fluid    { max-width: 100%; height: auto; display: block; }
.img-responsive { width: 100%; height: auto; display: block; }
.img-fill     { width: 100%; height: 100%; object-fit: fill; display: block; }
.img-top      { object-position: top !important; }
.img-bottom   { object-position: bottom !important; }
.img-left     { object-position: left !important; }
.img-right    { object-position: right !important; }

/* ============================================================
   FLEXBOX UTILITAIRES
   ============================================================ */

.d-flex-center,.flex-center  { display: flex !important; align-items: center !important; justify-content: center !important; }
.d-flex-between,.flex-between { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.d-flex-around  { display: flex !important; align-items: center !important; justify-content: space-around !important; }
.d-flex-evenly  { display: flex !important; align-items: center !important; justify-content: space-evenly !important; }
.d-flex-start   { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
.d-flex-end     { display: flex !important; align-items: center !important; justify-content: flex-end !important; }
.d-flex-col     { display: flex !important; flex-direction: column !important; }
.d-flex-col-center { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

.align-start    { align-items: flex-start !important; }
.align-end      { align-items: flex-end !important; }
.align-center   { align-items: center !important; }
.align-stretch  { align-items: stretch !important; }
.align-baseline { align-items: baseline !important; }

.justify-start   { justify-content: flex-start !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }
.justify-evenly  { justify-content: space-evenly !important; }

.flex-1    { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }
.flex-grow { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-wrap   { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.gap-6 { gap: 4rem !important; }

.col-gap-1 { column-gap: 0.25rem !important; }
.col-gap-2 { column-gap: 0.5rem !important; }
.col-gap-3 { column-gap: 1rem !important; }
.col-gap-4 { column-gap: 1.5rem !important; }
.col-gap-5 { column-gap: 3rem !important; }

.row-gap-1 { row-gap: 0.25rem !important; }
.row-gap-2 { row-gap: 0.5rem !important; }
.row-gap-3 { row-gap: 1rem !important; }
.row-gap-4 { row-gap: 1.5rem !important; }
.row-gap-5 { row-gap: 3rem !important; }

/* ============================================================
   UTILITAIRES DIVERS
   ============================================================ */

.transition      { transition: all .2s ease !important; }
.transition-fast { transition: all .1s ease !important; }
.transition-slow { transition: all .4s ease !important; }

.cursor-pointer  { cursor: pointer !important; }
.cursor-default  { cursor: default !important; }

.opacity-0  { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

.object-cover   { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }

.lh-1   { line-height: 1 !important; }
.lh-sm  { line-height: 1.25 !important; }
.lh-md  { line-height: 1.5 !important; }
.lh-lg  { line-height: 1.75 !important; }
.lh-xl  { line-height: 2 !important; }

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

.ls-tight  { letter-spacing: -0.03em !important; }
.ls-normal { letter-spacing: 0 !important; }
.ls-wide   { letter-spacing: 0.05em !important; }
.ls-wider  { letter-spacing: 0.1em !important; }

.no-select { user-select: none !important; }
.pointer-events-none { pointer-events: none !important; }
.overflow-x-auto{overflow-x: auto !important; position: relative;}

@media screen and (max-width: 885px){
  .w-xs-60 { width: 60% !important; }
}