/* ==========================================================================
   ECOPHOT - UTILITAIRES DE COULEURS
   Classes pour couleurs de texte, arrière-plans et bordures
   ========================================================================== */

/* ==========================================================================
   COULEURS DE TEXTE PRINCIPALES
   ========================================================================== */

.text-primary { color: var(--primary, #1a73e8) !important; }
.text-secondary { color: var(--secondary, #34a853) !important; }
.text-accent { color: var(--accent, #fbbc05) !important; }
.text-warning { color: var(--warning, #ff3b30) !important; }
.text-dark { color: var(--dark, #333) !important; }
.text-medium { color: var(--medium, #e0e0e0) !important; }
.text-light { color: var(--light, #f8f9fa) !important; }

/* Couleurs d'état */
.text-success { color: #28a745 !important; }
.text-info { color: #17a2b8 !important; }
.text-danger { color: #dc3545 !important; }

/* Couleurs neutres */
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.text-body { color: #212529 !important; }

/* ==========================================================================
   ÉCHELLE DE GRIS POUR TEXTE
   ========================================================================== */

.text-gray-50 { color: #fafafa !important; }
.text-gray-100 { color: #f5f5f5 !important; }
.text-gray-200 { color: #e5e5e5 !important; }
.text-gray-300 { color: #d4d4d4 !important; }
.text-gray-400 { color: #a3a3a3 !important; }
.text-gray-500 { color: #737373 !important; }
.text-gray-600 { color: #525252 !important; }
.text-gray-700 { color: #404040 !important; }
.text-gray-800 { color: #262626 !important; }
.text-gray-900 { color: #171717 !important; }

/* ==========================================================================
   COULEURS SPÉCIALISÉES POUR TEXTE
   ========================================================================== */

/* Couleurs techniques */
.text-blue-500 { color: #3b82f6 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-700 { color: #1d4ed8 !important; }

.text-green-500 { color: #10b981 !important; }
.text-green-600 { color: #059669 !important; }
.text-green-700 { color: #047857 !important; }

.text-yellow-500 { color: #f59e0b !important; }
.text-yellow-600 { color: #d97706 !important; }
.text-yellow-700 { color: #b45309 !important; }

.text-red-500 { color: #ef4444 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-700 { color: #b91c1c !important; }

.text-purple-500 { color: #8b5cf6 !important; }
.text-purple-600 { color: #7c3aed !important; }
.text-purple-700 { color: #6d28d9 !important; }

.text-orange-500 { color: #f97316 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-orange-700 { color: #c2410c !important; }

/* ==========================================================================
   ARRIÈRE-PLANS PRINCIPAUX
   ========================================================================== */

.bg-primary { background-color: var(--primary, #1a73e8) !important; }
.bg-secondary { background-color: var(--secondary, #34a853) !important; }
.bg-accent { background-color: var(--accent, #fbbc05) !important; }
.bg-warning { background-color: var(--warning, #ff3b30) !important; }
.bg-dark { background-color: var(--dark, #333) !important; }
.bg-medium { background-color: var(--medium, #e0e0e0) !important; }
.bg-light { background-color: var(--light, #f8f9fa) !important; }

/* Couleurs d'état */
.bg-success { background-color: #28a745 !important; }
.bg-info { background-color: #17a2b8 !important; }
.bg-danger { background-color: #dc3545 !important; }

/* Couleurs neutres */
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }
.bg-transparent { background-color: transparent !important; }

/* ==========================================================================
   ÉCHELLE DE GRIS POUR ARRIÈRE-PLANS
   ========================================================================== */

.bg-gray-50 { background-color: #fafafa !important; }
.bg-gray-100 { background-color: #f5f5f5 !important; }
.bg-gray-200 { background-color: #e5e5e5 !important; }
.bg-gray-300 { background-color: #d4d4d4 !important; }
.bg-gray-400 { background-color: #a3a3a3 !important; }
.bg-gray-500 { background-color: #737373 !important; }
.bg-gray-600 { background-color: #525252 !important; }
.bg-gray-700 { background-color: #404040 !important; }
.bg-gray-800 { background-color: #262626 !important; }
.bg-gray-900 { background-color: #171717 !important; }

/* ==========================================================================
   COULEURS SPÉCIALISÉES POUR ARRIÈRE-PLANS
   ========================================================================== */

/* Bleus */
.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; }

/* Verts */
.bg-green-50 { background-color: #ecfdf5 !important; }
.bg-green-100 { background-color: #d1fae5 !important; }
.bg-green-200 { background-color: #a7f3d0 !important; }
.bg-green-300 { background-color: #6ee7b7 !important; }
.bg-green-400 { background-color: #34d399 !important; }
.bg-green-500 { background-color: #10b981 !important; }
.bg-green-600 { background-color: #059669 !important; }
.bg-green-700 { background-color: #047857 !important; }
.bg-green-800 { background-color: #065f46 !important; }
.bg-green-900 { background-color: #064e3b !important; }

/* Jaunes */
.bg-yellow-50 { background-color: #fffbeb !important; }
.bg-yellow-100 { background-color: #fef3c7 !important; }
.bg-yellow-200 { background-color: #fde68a !important; }
.bg-yellow-300 { background-color: #fcd34d !important; }
.bg-yellow-400 { background-color: #fbbf24 !important; }
.bg-yellow-500 { background-color: #f59e0b !important; }
.bg-yellow-600 { background-color: #d97706 !important; }
.bg-yellow-700 { background-color: #b45309 !important; }
.bg-yellow-800 { background-color: #92400e !important; }
.bg-yellow-900 { background-color: #78350f !important; }

/* Rouges */
.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; }

/* Violets */
.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: #7c3aed !important; }
.bg-purple-800 { background-color: #6b21a8 !important; }
.bg-purple-900 { background-color: #581c87 !important; }

/* ==========================================================================
   BORDURES PRINCIPALES
   ========================================================================== */

.border-primary { border-color: var(--primary, #1a73e8) !important; }
.border-secondary { border-color: var(--secondary, #34a853) !important; }
.border-accent { border-color: var(--accent, #fbbc05) !important; }
.border-warning { border-color: var(--warning, #ff3b30) !important; }
.border-dark { border-color: var(--dark, #333) !important; }
.border-medium { border-color: var(--medium, #e0e0e0) !important; }
.border-light { border-color: var(--light, #f8f9fa) !important; }

/* Couleurs d'état pour bordures */
.border-success { border-color: #28a745 !important; }
.border-info { border-color: #17a2b8 !important; }
.border-danger { border-color: #dc3545 !important; }

/* Bordures neutres */
.border-white { border-color: #ffffff !important; }
.border-black { border-color: #000000 !important; }
.border-transparent { border-color: transparent !important; }

/* ==========================================================================
   BORDURES GRISES
   ========================================================================== */

.border-gray-100 { border-color: #f5f5f5 !important; }
.border-gray-200 { border-color: #e5e5e5 !important; }
.border-gray-300 { border-color: #d4d4d4 !important; }
.border-gray-400 { border-color: #a3a3a3 !important; }
.border-gray-500 { border-color: #737373 !important; }
.border-gray-600 { border-color: #525252 !important; }
.border-gray-700 { border-color: #404040 !important; }
.border-gray-800 { border-color: #262626 !important; }
.border-gray-900 { border-color: #171717 !important; }

/* ==========================================================================
   ÉPAISSEUR DES BORDURES
   ========================================================================== */

.border-0 { border-width: 0 !important; }
.border { border-width: 1px !important; }
.border-2 { border-width: 2px !important; }
.border-4 { border-width: 4px !important; }
.border-8 { border-width: 8px !important; }

/* Bordures directionnelles */
.border-t { border-top-width: 1px !important; }
.border-r { border-right-width: 1px !important; }
.border-b { border-bottom-width: 1px !important; }
.border-l { border-left-width: 1px !important; }

.border-t-0 { border-top-width: 0 !important; }
.border-r-0 { border-right-width: 0 !important; }
.border-b-0 { border-bottom-width: 0 !important; }
.border-l-0 { border-left-width: 0 !important; }

.border-t-2 { border-top-width: 2px !important; }
.border-r-2 { border-right-width: 2px !important; }
.border-b-2 { border-bottom-width: 2px !important; }
.border-l-2 { border-left-width: 2px !important; }

.border-t-4 { border-top-width: 4px !important; }
.border-r-4 { border-right-width: 4px !important; }
.border-b-4 { border-bottom-width: 4px !important; }
.border-l-4 { border-left-width: 4px !important; }

/* ==========================================================================
   STYLES DE BORDURES
   ========================================================================== */

.border-solid { border-style: solid !important; }
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }
.border-double { border-style: double !important; }
.border-none { border-style: none !important; }

/* ==========================================================================
   RAYONS DE BORDURES (BORDER RADIUS)
   ========================================================================== */

.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: 0.125rem !important; }
.rounded { border-radius: 0.25rem !important; }
.rounded-md { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* Bordures directionnelles arrondies */
.rounded-t-none { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rounded-r-none { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-b-none { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rounded-l-none { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }

.rounded-t { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
.rounded-r { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
.rounded-b { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
.rounded-l { border-bottom-left-radius: 0.25rem !important; border-top-left-radius: 0.25rem !important; }

.rounded-t-lg { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; }
.rounded-r-lg { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
.rounded-b-lg { border-bottom-right-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
.rounded-l-lg { border-bottom-left-radius: 0.5rem !important; border-top-left-radius: 0.5rem !important; }

/* ==========================================================================
   OMBRES
   ========================================================================== */

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important; }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important; }

/* Ombres colorées */
.shadow-primary { box-shadow: 0 4px 14px 0 rgba(26, 115, 232, 0.25) !important; }
.shadow-secondary { box-shadow: 0 4px 14px 0 rgba(52, 168, 83, 0.25) !important; }
.shadow-accent { box-shadow: 0 4px 14px 0 rgba(251, 188, 5, 0.25) !important; }
.shadow-warning { box-shadow: 0 4px 14px 0 rgba(255, 59, 48, 0.25) !important; }

/* ==========================================================================
   OUTLINE (CONTOURS)
   ========================================================================== */

.outline-none { outline: 2px solid transparent !important; outline-offset: 2px !important; }
.outline { outline: 2px solid #3b82f6 !important; outline-offset: 2px !important; }
.outline-dashed { outline: 2px dashed #3b82f6 !important; outline-offset: 2px !important; }
.outline-dotted { outline: 2px dotted #3b82f6 !important; outline-offset: 2px !important; }
.outline-double { outline: 3px double #3b82f6 !important; outline-offset: 2px !important; }

/* Couleurs d'outline */
.outline-primary { outline-color: var(--primary, #1a73e8) !important; }
.outline-secondary { outline-color: var(--secondary, #34a853) !important; }
.outline-accent { outline-color: var(--accent, #fbbc05) !important; }
.outline-warning { outline-color: var(--warning, #ff3b30) !important; }

/* ==========================================================================
   COULEURS AVEC OPACITÉ
   ========================================================================== */

/* Backgrounds avec opacité */
.bg-primary-10 { background-color: rgba(26, 115, 232, 0.1) !important; }
.bg-primary-20 { background-color: rgba(26, 115, 232, 0.2) !important; }
.bg-primary-30 { background-color: rgba(26, 115, 232, 0.3) !important; }
.bg-primary-50 { background-color: rgba(26, 115, 232, 0.5) !important; }

.bg-secondary-10 { background-color: rgba(52, 168, 83, 0.1) !important; }
.bg-secondary-20 { background-color: rgba(52, 168, 83, 0.2) !important; }
.bg-secondary-30 { background-color: rgba(52, 168, 83, 0.3) !important; }
.bg-secondary-50 { background-color: rgba(52, 168, 83, 0.5) !important; }

.bg-black-10 { background-color: rgba(0, 0, 0, 0.1) !important; }
.bg-black-20 { background-color: rgba(0, 0, 0, 0.2) !important; }
.bg-black-30 { background-color: rgba(0, 0, 0, 0.3) !important; }
.bg-black-50 { background-color: rgba(0, 0, 0, 0.5) !important; }
.bg-black-75 { background-color: rgba(0, 0, 0, 0.75) !important; }

.bg-white-10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white-20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-white-30 { background-color: rgba(255, 255, 255, 0.3) !important; }
.bg-white-50 { background-color: rgba(255, 255, 255, 0.5) !important; }
.bg-white-75 { background-color: rgba(255, 255, 255, 0.75) !important; }

/* ==========================================================================
   UTILITAIRES SPÉCIAUX
   ========================================================================== */

/* Fill pour SVG */
.fill-current { fill: currentColor !important; }
.fill-primary { fill: var(--primary, #1a73e8) !important; }
.fill-secondary { fill: var(--secondary, #34a853) !important; }
.fill-white { fill: #ffffff !important; }
.fill-black { fill: #000000 !important; }

/* Stroke pour SVG */
.stroke-current { stroke: currentColor !important; }
.stroke-primary { stroke: var(--primary, #1a73e8) !important; }
.stroke-secondary { stroke: var(--secondary, #34a853) !important; }
.stroke-white { stroke: #ffffff !important; }
.stroke-black { stroke: #000000 !important; }

.stroke-0 { stroke-width: 0 !important; }
.stroke-1 { stroke-width: 1 !important; }
.stroke-2 { stroke-width: 2 !important; }

/* ==========================================================================
   RESPONSIVE COLORS (sélection)
   ========================================================================== */

@media (max-width: 768px) {
    .text-md-center { text-align: center !important; }
    .bg-md-white { background-color: #ffffff !important; }
    .bg-md-light { background-color: var(--light, #f8f9fa) !important; }
}

@media (max-width: 576px) {
    .text-sm-center { text-align: center !important; }
    .bg-sm-white { background-color: #ffffff !important; }
    .bg-sm-light { background-color: var(--light, #f8f9fa) !important; }
}

/* ==========================================================================
   COULEURS POUR ÉTAT HOVER/FOCUS
   ========================================================================== */

.hover\:bg-primary:hover { background-color: var(--primary, #1a73e8) !important; }
.hover\:bg-secondary:hover { background-color: var(--secondary, #34a853) !important; }
.hover\:bg-gray-100:hover { background-color: #f5f5f5 !important; }

.focus\:bg-primary:focus { background-color: var(--primary, #1a73e8) !important; }
.focus\:border-primary:focus { border-color: var(--primary, #1a73e8) !important; }

.hover\:text-primary:hover { color: var(--primary, #1a73e8) !important; }
.hover\:text-white:hover { color: #ffffff !important; }