/* Couleurs créatives pour Lokossue Connect */

/* Variables pour les couleurs créatives */
:root {
    --creative-orange: #ff6b35;
    --creative-green: #00d4aa;
    --creative-purple: #8b5cf6;
    --creative-pink: #ec4899;
    --creative-orange-light: #ff8a65;
    --creative-green-light: #4dd0e1;
    --creative-purple-light: #b39ddb;
    --creative-pink-light: #f48fb1;
}

/* Classes de texte pour les couleurs créatives */
.text-creative-orange {
    color: var(--creative-orange) !important;
}

.text-creative-green {
    color: var(--creative-green) !important;
}

.text-creative-purple {
    color: var(--creative-purple) !important;
}

.text-creative-pink {
    color: var(--creative-pink) !important;
}

/* Classes de fond pour les couleurs créatives */
.bg-creative-orange {
    background-color: var(--creative-orange) !important;
}

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

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

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

/* Classes de bordure pour les couleurs créatives */
.border-creative-orange {
    border-color: var(--creative-orange) !important;
}

.border-creative-green {
    border-color: var(--creative-green) !important;
}

.border-creative-purple {
    border-color: var(--creative-purple) !important;
}

.border-creative-pink {
    border-color: var(--creative-pink) !important;
}

/* Dégradés créatifs */
.bg-gradient-creative {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--creative-orange) 50%, var(--creative-green) 100%);
}

.bg-gradient-orange-green {
    background: linear-gradient(135deg, var(--creative-orange) 0%, var(--creative-green) 100%);
}

.bg-gradient-purple-pink {
    background: linear-gradient(135deg, var(--creative-purple) 0%, var(--creative-pink) 100%);
}

.bg-gradient-green-purple {
    background: linear-gradient(135deg, var(--creative-green) 0%, var(--creative-purple) 100%);
}

.bg-gradient-orange-purple {
    background: linear-gradient(135deg, var(--creative-orange) 0%, var(--creative-purple) 100%);
}

.bg-gradient-pink-orange {
    background: linear-gradient(135deg, var(--creative-pink) 0%, var(--creative-orange) 100%);
}

/* Boutons créatifs */
.btn-creative-orange {
    background: var(--creative-orange);
    border-color: var(--creative-orange);
    color: white;
}

.btn-creative-orange:hover {
    background: var(--creative-orange-light);
    border-color: var(--creative-orange-light);
    color: white;
}

.btn-creative-green {
    background: var(--creative-green);
    border-color: var(--creative-green);
    color: white;
}

.btn-creative-green:hover {
    background: var(--creative-green-light);
    border-color: var(--creative-green-light);
    color: white;
}

.btn-creative-purple {
    background: var(--creative-purple);
    border-color: var(--creative-purple);
    color: white;
}

.btn-creative-purple:hover {
    background: var(--creative-purple-light);
    border-color: var(--creative-purple-light);
    color: white;
}

.btn-creative-pink {
    background: var(--creative-pink);
    border-color: var(--creative-pink);
    color: white;
}

.btn-creative-pink:hover {
    background: var(--creative-pink-light);
    border-color: var(--creative-pink-light);
    color: white;
}

/* Boutons outline créatifs */
.btn-outline-creative-orange {
    border-color: var(--creative-orange);
    color: var(--creative-orange);
}

.btn-outline-creative-orange:hover {
    background: var(--creative-orange);
    border-color: var(--creative-orange);
    color: white;
}

.btn-outline-creative-green {
    border-color: var(--creative-green);
    color: var(--creative-green);
}

.btn-outline-creative-green:hover {
    background: var(--creative-green);
    border-color: var(--creative-green);
    color: white;
}

.btn-outline-creative-purple {
    border-color: var(--creative-purple);
    color: var(--creative-purple);
}

.btn-outline-creative-purple:hover {
    background: var(--creative-purple);
    border-color: var(--creative-purple);
    color: white;
}

.btn-outline-creative-pink {
    border-color: var(--creative-pink);
    color: var(--creative-pink);
}

.btn-outline-creative-pink:hover {
    background: var(--creative-pink);
    border-color: var(--creative-pink);
    color: white;
}

/* Badges créatifs */
.badge-creative-orange {
    background: var(--creative-orange);
    color: white;
}

.badge-creative-green {
    background: var(--creative-green);
    color: white;
}

.badge-creative-purple {
    background: var(--creative-purple);
    color: white;
}

.badge-creative-pink {
    background: var(--creative-pink);
    color: white;
}

/* Animations pour les couleurs créatives */
@keyframes creative-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.creative-pulse {
    animation: creative-pulse 2s infinite;
}

/* Effets de survol pour les cartes avec couleurs créatives */
.card-creative-orange:hover {
    border-color: var(--creative-orange);
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.2);
}

.card-creative-green:hover {
    border-color: var(--creative-green);
    box-shadow: 0 10px 25px rgba(0, 212, 170, 0.2);
}

.card-creative-purple:hover {
    border-color: var(--creative-purple);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
}

.card-creative-pink:hover {
    border-color: var(--creative-pink);
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.2);
}

/* Styles pour les icônes avec couleurs créatives */
.icon-creative-orange {
    color: var(--creative-orange);
    transition: all 0.3s ease;
}

.icon-creative-orange:hover {
    color: var(--creative-orange-light);
    transform: scale(1.1);
}

.icon-creative-green {
    color: var(--creative-green);
    transition: all 0.3s ease;
}

.icon-creative-green:hover {
    color: var(--creative-green-light);
    transform: scale(1.1);
}

.icon-creative-purple {
    color: var(--creative-purple);
    transition: all 0.3s ease;
}

.icon-creative-purple:hover {
    color: var(--creative-purple-light);
    transform: scale(1.1);
}

.icon-creative-pink {
    color: var(--creative-pink);
    transition: all 0.3s ease;
}

.icon-creative-pink:hover {
    color: var(--creative-pink-light);
    transform: scale(1.1);
}