/*
 * 🔧 FIX SIMPLE ET PROPRE - Juste ce qui est cassé
 * Pas de CSS de porc, juste les corrections nécessaires
 */

/* ===== DRAPEAUX FIX ===== */

/* Fix pour le drapeau anglais qui apparaît blanc */
.lang-option[data-lang="en"] .flag-icon,
.lang-option-mobile[data-lang="en"] .flag-icon {
    background: #012169 !important;
    position: relative;
}

.lang-option[data-lang="en"] .flag-icon::after,
.lang-option-mobile[data-lang="en"] .flag-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Croix blanche diagonales */
        linear-gradient(45deg, transparent 30%, white 30%, white 35%, transparent 35%),
        linear-gradient(-45deg, transparent 30%, white 30%, white 35%, transparent 35%),
        linear-gradient(45deg, transparent 65%, white 65%, white 70%, transparent 70%),
        linear-gradient(-45deg, transparent 65%, white 65%, white 70%, transparent 70%),
        /* Croix rouge */
        linear-gradient(to right, transparent 45%, #ce1126 45%, #ce1126 55%, transparent 55%),
        linear-gradient(to bottom, transparent 45%, #ce1126 45%, #ce1126 55%, transparent 55%);
}

/* Assure-toi que les drapeaux français fonctionnent */
.lang-option[data-lang="fr"] .flag-icon,
.lang-option-mobile[data-lang="fr"] .flag-icon,
.lang-btn .flag-icon[data-lang="fr"],
.lang-btn-mobile .flag-icon[data-lang="fr"] {
    background: linear-gradient(to right, 
        #002654 0% 33.33%, 
        #ffffff 33.33% 66.66%, 
        #ce1126 66.66% 100%);
}

/* ===== GRADIENT ANIMATION FIX ===== */

/* Force l'animation si elle ne marche pas */
.text-gradient {
    animation: quantumGradientRotate 3s linear infinite !important;
    background: linear-gradient(135deg, 
        #4a9b8e 0%, 
        #63d4c1 20%, 
        #2d8b7f 40%,
        #4fcfa6 60%,
        #2c5f54 80%, 
        #63d4c1 100%) !important;
    background-size: 400% 400% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Si l'animation n'existe pas, la recréer */
@keyframes quantumGradientRotate {
    0% { 
        background-position: 0% 50%;
    }
    50% { 
        background-position: 100% 50%;
    }
    100% { 
        background-position: 0% 50%;
    }
}