/* Thème sombre et couleurs sémantiques */
:root {
    --bg-primary: #121212;
    --bg-secondary: #1E1E1E;
    --bg-tertiary: #282828;
    --text-primary: #E0E0E0;
    --text-secondary: #B3B3B3;
    --accent-primary: #1DB954;
    --border-color: #333333;

    /* Couleurs sémantiques pour les tags (Annexe A) */
    --tag-blue: #0d6efd;     /* Genres & Sous-Genres */
    --tag-violet: #8420e1;   /* Ambiances & Tonalités */
    --tag-orange: #fd7e14;   /* Époques & Technologies */
    --tag-green: #198754;    /* Cultures & Mythologies */
    --tag-red: #dc3545;      /* Archétypes & Rôles */
    /* --- COULEUR CORRIGÉE --- */
    --tag-cyan: #17a2b8;     /* Concepts & Forces Cosmiques (cyan plus foncé) */
    /* --- FIN DE LA CORRECTION --- */
    --tag-yellow: #ffc107;   /* Éléments & Nature */
    --tag-pink: #d63384;     /* Traits & Alignement */
    --tag-brown: #a0522d;    /* Factions & Classes Sociales */
    --tag-default: #6c757d;  /* Défaut */
}

body { background-color: var(--bg-primary); color: var(--text-primary); }

.filters-panel { background-color: var(--bg-secondary); }
.results-panel { background-color: var(--bg-primary); }
h1 { color: var(--text-primary); }
.results-count, .section-label { color: var(--text-secondary); }

button, input, textarea {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.75rem; border-radius: 6px; font-size: 1rem;
}
button:hover { background-color: #333; }
.view-selector button.active, .gender-selector button.active {
    background-color: var(--accent-primary); color: white; border-color: var(--accent-primary);
}
.generate-button, .export-button { background-color: var(--accent-primary); color: white; border: none; }
.generate-button:hover, .export-button:hover { background-color: #1ed760; }

.tag-convocator { border: 1px solid var(--border-color); }
.tag-convocator:focus-within { border-color: var(--accent-primary); }
.suggestion-item:hover { background-color: var(--bg-tertiary); }

.result-item, .favorite-item { border-bottom: 1px solid var(--border-color); }
.result-item:last-child, .favorite-item:last-child { border-bottom: none; }
.result-item:hover, .favorite-item:hover { background-color: var(--bg-tertiary); }
.result-item .lock.locked { color: var(--accent-primary); }

.results-placeholder { color: var(--text-secondary); }
.modal-content { background-color: var(--bg-secondary); }
.modal-close-btn { color: var(--text-secondary); }
.modal-content label { display: block; margin: 1rem 0 0.5rem; color: var(--text-secondary); }

/* Classes de couleur pour les tags */
.tag-badge, .pill { color: white; }
.tag-color-blue { background-color: var(--tag-blue); }
.tag-color-violet { background-color: var(--tag-violet); }
.tag-color-orange { background-color: var(--tag-orange); }
.tag-color-green { background-color: var(--tag-green); }
.tag-color-red { background-color: var(--tag-red); }
.tag-color-cyan { background-color: var(--tag-cyan); }
.tag-color-yellow { background-color: var(--tag-yellow); text-shadow: 0 0 2px #000; }
.tag-color-pink { background-color: var(--tag-pink); }
.tag-color-brown { background-color: var(--tag-brown); }
.tag-color-default { background-color: var(--tag-default); }