/**
 * Couleurs personnalisées basées sur le logo
 * Logo: logo_sansBG.png (Noir et blanc)
 * Palette moderne avec noir comme couleur principale
 */

:root {
    /* Couleurs principales du logo (Noir) */
    --logo-primary: #000000;
    --logo-primary-dark: #000000;
    --logo-primary-light: #333333;
    
    /* Palette moderne et élégante */
    --primary-color: #000000;
    --primary-hover: #1a1a1a;
    --primary-active: #000000;
    
    /* Couleurs complémentaires pour un design équilibré */
    --secondary-color: #2c3e50;
    --accent-color: #27322e;
    --accent-light: #3d4a45;
    
    /* Couleurs de texte */
    --text-dark: #000000;
    --text-light: #ffffff;
    --text-muted: #6b7280;
    
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-dark: #000000;
    
    /* Bordures */
    --border-color: #e5e7eb;
    --border-dark: #333333;
    
    /* États */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}

/* Application des couleurs aux éléments principaux */

/* Header */
.ec-header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.header-top {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.header-top a {
    color: var(--text-light);
}

.header-top a:hover {
    color: var(--accent-light);
}

/* Boutons primaires */
.btn-primary,
.ec-btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}

.btn-primary:hover,
.ec-btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-primary:active,
.ec-btn-primary:active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
}

/* Liens */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--primary-hover);
}

/* Navigation */
.ec-main-menu ul li a:hover,
.ec-main-menu ul li.active a {
    color: var(--primary-color);
}

/* Prix et éléments importants */
.ec-price,
.price,
.new-price {
    color: var(--primary-color);
}

/* Badges et labels */
.ec-badge,
.badge-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Footer */
.ec-footer {
    background-color: var(--bg-dark);
    color: var(--text-light) !important;
}

.ec-footer * {
    color: var(--text-light) !important;
}

.ec-footer a {
    color: var(--text-light) !important;
}

.ec-footer a:hover {
    color: var(--accent-light) !important;
}

.ec-footer h4,
.ec-footer h5,
.ec-footer h6,
.ec-footer p,
.ec-footer span,
.ec-footer li,
.ec-footer .ec-footer-heading {
    color: var(--text-light) !important;
}

/* Footer Copyright */
.footer-copy {
    margin: 20px 0;
}

.footer-bottom-copy {
    padding: 15px 0;
}

.ec-copy {
    color: var(--text-light) !important;
    font-size: 14px;
}

.ec-copy a.site-name {
    color: var(--text-light) !important;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ec-copy a.site-name:hover {
    color: var(--accent-color) !important;
    text-decoration: underline;
}

/* Icônes et éléments d'accent */
.ec-header-icon,
.ec-icon {
    color: var(--primary-color);
}

/* Bordures et séparateurs */
.ec-border,
.border-primary {
    border-color: var(--primary-color) !important;
}

/* Backgrounds d'accent */
.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
}

/* Boutons secondaires */
.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-light) !important;
}

.btn-secondary:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Formulaires */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(18, 37, 31, 0.1);
}

/* Cartes produits */
.ec-product-inner:hover {
    border-color: var(--primary-color);
}

/* Pagination */
.pagination .active a {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Sliders et progress bars */
.slick-dots li.slick-active button,
.progress-bar {
    background-color: var(--primary-color);
}

/* Overlay et modals */
.modal-header {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Notifications et alertes */
.alert-primary {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
    color: var(--text-dark);
}

/* Scrollbar personnalisée */
::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
}

/* Sélection de texte */
::selection {
    background-color: var(--primary-color);
    color: var(--text-light);
}

::-moz-selection {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Animations et transitions */
.ec-transition {
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-top {
        padding: 8px 0;
    }
}