/* ============================================
   🎨 CHARTE DE COULEURS BRICOUP
   ============================================
   Version: 1.0
   Date: 11 décembre 2025
   
   Ce fichier définit toutes les couleurs et badges
   utilisés dans l'application BricoUp.
   
   Inclusion: <link rel="stylesheet" href="css/bricoup-colors.css">
   ============================================ */

/* ============================================
   1. VARIABLES CSS (COULEURS DE BASE)
   ============================================ */
:root {
    /* --- Couleurs principales BricoUp --- */
    --bricoup-primary: #f97316;          /* Orange principal */
    --bricoup-primary-dark: #ea580c;     /* Orange foncé */
    --bricoup-primary-light: #fdba74;    /* Orange clair */
    --bricoup-secondary: #fbbf24;        /* Ambre */
    
    /* --- Couleurs de fond --- */
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --bg-gray: #f3f4f6;
    --bg-dark: #1f2937;
    
    /* --- Couleurs de texte --- */
    --text-primary: #1f2937;             /* Titres */
    --text-secondary: #4b5563;           /* Corps */
    --text-muted: #6b7280;               /* Texte secondaire */
    --text-light: #9ca3af;               /* Texte léger */
    
    /* --- Couleurs de bordure --- */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-orange: #fdba74;
    
    /* --- BADGES DIFFICULTÉ --- */
    --difficulty-beginner-bg: #22c55e;
    --difficulty-beginner-text: #ffffff;
    --difficulty-intermediate-bg: #f97316;
    --difficulty-intermediate-text: #ffffff;
    --difficulty-advanced-bg: #ef4444;
    --difficulty-advanced-text: #ffffff;
    
    /* --- BADGES STATUT LECTURE --- */
    --status-unread-bg: #f3f4f6;
    --status-unread-text: #6b7280;
    --status-progress-bg: #fef3c7;
    --status-progress-text: #d97706;
    --status-complete-bg: #d1fae5;
    --status-complete-text: #059669;
    
    /* --- CATÉGORIES --- */
    --cat-menuiserie-bg: #fef3c7;
    --cat-menuiserie-text: #92400e;
    --cat-plomberie-bg: #dbeafe;
    --cat-plomberie-text: #1d4ed8;
    --cat-electricite-bg: #fef9c3;
    --cat-electricite-text: #a16207;
    --cat-peinture-bg: #f3e8ff;
    --cat-peinture-text: #7c3aed;
    --cat-jardinage-bg: #dcfce7;
    --cat-jardinage-text: #15803d;
    --cat-decoration-bg: #fce7f3;
    --cat-decoration-text: #be185d;
    --cat-maconnerie-bg: #f3f4f6;
    --cat-maconnerie-text: #374151;
    --cat-isolation-bg: #cffafe;
    --cat-isolation-text: #0891b2;
    --cat-toiture-bg: #ffedd5;
    --cat-toiture-text: #c2410c;
    --cat-eclairage-bg: #fef3c7;
    --cat-eclairage-text: #b45309;
    --cat-tendances-bg: #e0e7ff;
    --cat-tendances-text: #4338ca;
    --cat-default-bg: #f3f4f6;
    --cat-default-text: #6b7280;
    
    /* --- BOUTONS --- */
    --btn-primary-bg: #3b82f6;
    --btn-primary-hover: #2563eb;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #f3f4f6;
    --btn-secondary-hover: #e5e7eb;
    --btn-secondary-text: #374151;
    --btn-danger-bg: #fee2e2;
    --btn-danger-hover: #fecaca;
    --btn-danger-text: #dc2626;
    --btn-success-bg: #d1fae5;
    --btn-success-hover: #a7f3d0;
    --btn-success-text: #059669;
}


/* ============================================
   2. CARTES KNOWLEDGE - FOND BLANC
   ============================================ */
.knowledge-card {
    background-color: var(--bg-white) !important;
    background: var(--bg-white) !important;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.knowledge-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.knowledge-card > div:last-child {
    background-color: var(--bg-white) !important;
}

.knowledge-card h4,
.knowledge-card .card-title {
    color: var(--text-primary) !important;
    font-weight: 700;
}

.knowledge-card p,
.knowledge-card .card-description {
    color: var(--text-secondary);
}


/* ============================================
   3. BADGES DIFFICULTÉ
   ============================================ */
.badge-difficulty,
.difficulty-badge,
[class*="badge-debutant"],
[class*="badge-intermediaire"],
[class*="badge-avance"] {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Débutant - Vert */
.badge-debutant,
.badge-beginner,
.difficulty-debutant,
.difficulty-beginner,
[data-difficulty="debutant"],
[data-difficulty="beginner"] {
    background-color: var(--difficulty-beginner-bg) !important;
    color: var(--difficulty-beginner-text) !important;
}

/* Intermédiaire - Orange */
.badge-intermediaire,
.badge-intermediate,
.difficulty-intermediaire,
.difficulty-intermediate,
[data-difficulty="intermediaire"],
[data-difficulty="intermediate"] {
    background-color: var(--difficulty-intermediate-bg) !important;
    color: var(--difficulty-intermediate-text) !important;
}

/* Avancé - Rouge */
.badge-avance,
.badge-advanced,
.difficulty-avance,
.difficulty-advanced,
[data-difficulty="avance"],
[data-difficulty="advanced"] {
    background-color: var(--difficulty-advanced-bg) !important;
    color: var(--difficulty-advanced-text) !important;
}


/* ============================================
   4. BADGES STATUT LECTURE
   ============================================ */
.badge-status,
.status-badge,
.status-pill,
[class*="status-"] {
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* À lire - Gris */
.status-a_lire,
.status-unread,
.badge-a-lire,
[data-state="a_lire"],
[data-status="a_lire"] {
    background-color: var(--status-unread-bg) !important;
    color: var(--status-unread-text) !important;
}

/* En cours - Jaune/Ambre */
.status-en_cours,
.status-progress,
.badge-en-cours,
[data-state="en_cours"],
[data-status="en_cours"] {
    background-color: var(--status-progress-bg) !important;
    color: var(--status-progress-text) !important;
}

/* Terminé - Vert */
.status-fait,
.status-complete,
.status-termine,
.badge-termine,
[data-state="fait"],
[data-status="fait"],
[data-state="complete"] {
    background-color: var(--status-complete-bg) !important;
    color: var(--status-complete-text) !important;
}


/* ============================================
   5. BADGES CATÉGORIES
   ============================================ */
.badge-category,
.category-badge,
[class*="category-"] {
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Menuiserie - Marron/Ambre */
.category-menuiserie,
[data-category="menuiserie"] {
    background-color: var(--cat-menuiserie-bg) !important;
    color: var(--cat-menuiserie-text) !important;
}

/* Plomberie - Bleu */
.category-plomberie,
[data-category="plomberie"] {
    background-color: var(--cat-plomberie-bg) !important;
    color: var(--cat-plomberie-text) !important;
}

/* Électricité - Jaune */
.category-electricite,
.category-électricité,
[data-category="electricite"],
[data-category="électricité"] {
    background-color: var(--cat-electricite-bg) !important;
    color: var(--cat-electricite-text) !important;
}

/* Peinture - Violet */
.category-peinture,
[data-category="peinture"] {
    background-color: var(--cat-peinture-bg) !important;
    color: var(--cat-peinture-text) !important;
}

/* Jardinage - Vert */
.category-jardinage,
[data-category="jardinage"] {
    background-color: var(--cat-jardinage-bg) !important;
    color: var(--cat-jardinage-text) !important;
}

/* Décoration - Rose */
.category-decoration,
.category-décoration,
[data-category="decoration"],
[data-category="décoration"] {
    background-color: var(--cat-decoration-bg) !important;
    color: var(--cat-decoration-text) !important;
}

/* Maçonnerie - Gris */
.category-maconnerie,
.category-maçonnerie,
[data-category="maconnerie"],
[data-category="maçonnerie"] {
    background-color: var(--cat-maconnerie-bg) !important;
    color: var(--cat-maconnerie-text) !important;
}

/* Isolation - Cyan */
.category-isolation,
[data-category="isolation"] {
    background-color: var(--cat-isolation-bg) !important;
    color: var(--cat-isolation-text) !important;
}

/* Toiture - Orange */
.category-toiture,
[data-category="toiture"] {
    background-color: var(--cat-toiture-bg) !important;
    color: var(--cat-toiture-text) !important;
}

/* Éclairage - Ambre */
.category-eclairage,
.category-éclairage,
[data-category="eclairage"],
[data-category="éclairage"] {
    background-color: var(--cat-eclairage-bg) !important;
    color: var(--cat-eclairage-text) !important;
}

/* Tendances - Indigo */
.category-tendances,
[data-category="tendances"] {
    background-color: var(--cat-tendances-bg) !important;
    color: var(--cat-tendances-text) !important;
}

/* Général/Défaut - Gris */
.category-general,
.category-autre,
.category-default,
[data-category="general"],
[data-category="autre"] {
    background-color: var(--cat-default-bg) !important;
    color: var(--cat-default-text) !important;
}


/* ============================================
   5b. BADGES SECTEUR (Teal)
   ============================================ */

/* Variables Teal */
:root {
    --sector-teal-bg: #14b8a6;
    --sector-teal-bg-light: #ccfbf1;
    --sector-teal-text: #ffffff;
    --sector-teal-text-dark: #0f766e;
}

/* Classes Tailwind Teal */
.bg-teal-50  { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }

.text-teal-500 { color: #14b8a6; }
.text-teal-700 { color: #0f766e; }

/* Couleurs texte basiques */
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }

.border-teal-500 { border-color: #14b8a6; }

.hover\:bg-teal-600:hover { background-color: #0d9488; }

/* Badge Secteur générique */
.badge-sector,
.sector-badge,
[class*="sector-"] {
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--sector-teal-bg) !important;
    color: var(--sector-teal-text) !important;
}


/* ============================================
   6. BOUTONS D'ACTION
   ============================================ */

/* Bouton Principal (Voir) - Bleu */
.btn-voir,
.btn-view,
.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-voir:hover,
.btn-view:hover,
.btn-primary:hover {
    background-color: var(--btn-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Bouton Favori - Gris/Jaune */
.btn-favori,
.btn-favorite {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--text-muted) !important;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-favori:hover,
.btn-favorite:hover {
    background-color: #fef3c7 !important;
    color: #f59e0b !important;
}

.btn-favori.active,
.btn-favorite.active,
.btn-favori.favorited,
.btn-favorite.favorited {
    background-color: #fef3c7 !important;
    color: #f59e0b !important;
}

/* Bouton Éditer - Orange (Admin uniquement) */
.btn-edit,
.btn-editer {
    background-color: var(--bricoup-primary) !important;
    color: var(--btn-primary-text) !important;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-edit:hover,
.btn-editer:hover {
    background-color: var(--bricoup-primary-dark) !important;
}

/* Bouton Supprimer - Rouge (Admin uniquement) */
.btn-delete,
.btn-supprimer {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-delete:hover,
.btn-supprimer:hover {
    background-color: var(--btn-danger-hover) !important;
}


/* ============================================
   7. GRILLE RESPONSIVE
   ============================================ */
.knowledge-grid,
#knowledge-grid,
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .knowledge-grid,
    #knowledge-grid,
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .knowledge-grid,
    #knowledge-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ============================================
   8. UTILITAIRES
   ============================================ */

/* Line clamp pour textes */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Transitions */
.transition-smooth {
    transition: all 0.3s ease;
}

/* Ombres */
.shadow-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.shadow-card-hover:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}


/* ============================================
   9. BARRE DE PROGRESSION
   ============================================ */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--bg-gray);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bricoup-primary), var(--bricoup-secondary));
    border-radius: 4px;
    transition: width 0.4s ease;
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.progress-percent {
    color: var(--bricoup-primary);
    font-weight: 700;
}

/* ============================================
   CARTES RECOMMANDÉES / EN COURS
   ============================================ */

/* Grille recommandées - 2 colonnes */
.recommended-grid,
#recommended-grid,
.continue-reading-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .recommended-grid,
    #recommended-grid,
    .continue-reading-grid {
        grid-template-columns: 1fr;
    }
}

/* Style spécifique cartes recommandées */
.recommended-card {
    border: 2px solid #fed7aa !important;
    background: #ffffff !important;
}

.knowledge-theme .recommended-card {
    background: #ffffff !important;
    color: #111827 !important;
    border: 2px solid #fed7aa !important;
}

.knowledge-theme .recommended-card h4 {
    color: #111827 !important;
}

.knowledge-theme .recommended-card p,
.knowledge-theme .recommended-card span {
    color: #374151 !important;
}

.recommended-card:hover {
    border-color: #f97316 !important;
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15);
}

/* Bandeau en-tête */
.recommended-card .banner-in-progress {
    background: linear-gradient(90deg, #f59e0b, #f97316);
}

.recommended-card .banner-almost-done {
    background: linear-gradient(90deg, #10b981, #059669);
}

.recommended-card .banner-discover {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

/* Bouton Continuer - Orange */
.btn-continue {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: 1px solid #059669 !important;
}

.btn-continue:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}