/* Écran de chargement qui prend toute la page */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }

        /* Logo */
        .loading-overlay .logo {
            width: 250px;
            margin-bottom: 3.5rem;
            animation: pulseRotate 2.5s ease-in-out infinite;
        }

        @keyframes pulseRotate {
            0% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: scale(1.5) rotate(0deg);
                opacity: 0.9;
            }
            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
        }

        /* Message */
        .loading-overlay .message {
            font-size: 1.2rem;
            color: #c2185b;
            margin-bottom: 2rem;
            font-weight: 500;
            text-align: center;
            max-width: 600px;
            padding: 0 2rem;
            line-height: 1.6;
        }

        /* Loader */
       /* Logo - version corrigée pour éviter l'étirement */
.loading-overlay .logo {
    width: 250px;
    height: 250px; /* Ajoutez cette ligne */
    object-fit: contain; /* Cette ligne préserve le ratio */
    margin-bottom: 3.5rem;
    animation: pulseRotate 2.5s ease-in-out infinite;
}

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Classe pour cacher l'écran de chargement */
        .loading-overlay.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Animation de disparition */
        @keyframes fadeOut {
            from {
                opacity: 1;
                visibility: visible;
            }
            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        /* --- Responsive --- */
        @media (max-width: 768px) {
            .loading-overlay .logo {
                width: 180px;
                margin-bottom: 2.5rem;
            }
            
            .loading-overlay .message {
                font-size: 1.1rem;
                padding: 0 1.5rem;
                margin-bottom: 1.8rem;
            }
            
            .loading-overlay .loader {
                width: 35px;
                height: 35px;
                border-width: 3.5px;
            }
        }

        @media (max-width: 600px) {
            .loading-overlay {
                padding: 2rem 1rem 3rem 1rem;
            }

            .loading-overlay .message {
                font-size: 1rem;
                padding: 0 1rem;
                margin-bottom: 1.5rem;
            }

            .loading-overlay .loader {
                width: 30px;
                height: 30px;
                border-width: 3px;
                margin-top: 0.8rem;
            }

            .loading-overlay .logo {
                width: 150px;
                margin-bottom: 1.7rem;
            }
        }

        @media (max-width: 480px) {
            .loading-overlay .logo {
                width: 130px;
                margin-bottom: 1.5rem;
            }
            
            .loading-overlay .message {
                font-size: 0.95rem;
                padding: 0 0.8rem;
                margin-bottom: 1.3rem;
            }
            
            .loading-overlay .loader {
                width: 28px;
                height: 28px;
                border-width: 2.5px;
            }
        }

        /* Pour les très grands écrans */
        @media (min-width: 1200px) {
            .loading-overlay .logo {
                width: 280px;
                margin-bottom: 4rem;
            }
            
            .loading-overlay .message {
                font-size: 1.3rem;
                max-width: 700px;
            }
            
            .loading-overlay .loader {
                width: 45px;
                height: 45px;
                border-width: 4.5px;
            }
        }

        /* Animation des points dans le message (optionnel) */
        .loading-overlay .message::after {
            content: '';
            animation: dots 1.5s steps(4, end) infinite;
        }

        @keyframes dots {
            0%, 20% {
                content: '';
            }
            40% {
                content: '.';
            }
            60% {
                content: '..';
            }
            80%, 100% {
                content: '...';
            }
        }