/* Styles du loader */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 105%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
    background-color: #f8f9fa; /* Même couleur que le fond de la page */
}

.loading {
    position: relative;
    width: 128px;
    height: 96px;
}

.loading svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 128px;
    height: 96px;
}

.loading svg polyline {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.loading svg polyline#back {
    fill: none;
    stroke: #cccccc;
}

.loading svg polyline#front {
    fill: none;
    /* stroke: #0d6efd;  */
    stroke: #198754; 

    stroke-dasharray: 96, 288;
    stroke-dashoffset: 384;
    animation: dash_682 1.4s linear infinite;
}

@keyframes dash_682 {
    72.5% {
        opacity: 0;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Assure le bon centrage sur tous les appareils */
@media (max-width: 767px) {
    .loader-container {
        width: 115%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .loading {
        width: 128px;
        height: 96px;
    }
}