@import url('https://fonts.googleapis.com/css?family=Exo+2:200,300,400,500,600,700');

/* Superposition floue qui couvre toute la page */
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px); /* Flou de l'arrière-plan */
    -webkit-backdrop-filter: blur(10px); /* Pour Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparence pour l'effet de flou */
    display: none; /* Masqué par défaut */
}

/* Loader avec animation */
.loader {
    position: relative;
    height: 62px;
    padding: 0.2em 1em;
    border-radius: 2em;
    font-size: 28px;
    color: #fff;
    font-weight: 300;
    border: 2px solid #008000; /* Vert du Burkina Faso */
    text-shadow: 0 2px 10px #fff;
    box-shadow: 0 0 10px #008000, inset 0 0 10px rgba(0, 128, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: rotate 2s linear infinite; /* Animation de rotation */
}

.loader svg {
    position: absolute;
    left: 10px;
    height: 50px;
    animation: rotate 3s linear infinite;
}

/* Texte dynamique */
.loader .text {
    animation: glow 2s ease-in-out infinite;
}

.loader .length {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #F6A623;
    text-shadow: 0 0 5px #F6A623;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    animation: pulse 2s infinite alternate;
}

/* Animations */
@keyframes glow {
    0% { text-shadow: 0 0 5px #A8D1FF; }
    50% { text-shadow: 0 0 15px #A8D1FF; }
    100% { text-shadow: 0 0 5px #A8D1FF; }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}