@media screen and (max-width: 767px) {
    /* Hide original logo */
    .login-page .navbar .logo img {
        display: none !important;
    }

    /* Fixed navigation */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: transparent;
        padding: 10px;
    }

    /* New logo styling */
    .login-page .navbar .logo {
        position: relative;
        width: 80px;
        height: 80px;
    }

    .login-page .navbar .logo::after {
        content: '';
        display: block;
        position: fixed;
        top: -136px;
        left: -19px;
        width: 250px;
        height: 370px;
        background: url('../static/logoo.png') no-repeat center center;
        background-size: contain;
        z-index: 1003;
    }

    /* Login container */
    .login-container {
        width: 60%;  /* Réduit de 85% à 80% */
        position: fixed;
        top: 160px;  /* Réduit de 180px à 160px */
        left: 50%;
        transform: translateX(-50%);
        padding: 20px;  /* Réduit de 25px à 20px */
        background: rgba(255, 255, 255, 0.95);
        border-radius: 12px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        text-align: center;
        z-index: 1;
    }
    /* Form styling */
    .login-form {
        gap: 12px;  /* Réduit de 15px à 12px */
        margin-top: 15px;  /* Réduit de 20px à 15px */
    }

    .form-group {
        gap: 6px;
        text-align: left; /* Aligne le contenu à gauche */
    }

    .form-group label {
        font-size: 0.9em;
        color: #333;
        margin-left: 0; /* Supprime la marge à gauche */
        display: block; /* Force le label sur sa propre ligne */
        text-align: left; /* Aligne le texte à gauche */
    }

    .form-group input {
        padding: 10px;
        font-size: 14px;
        width: 100%; /* Assure que l'input prend toute la largeur */
        box-sizing: border-box; /* Inclut padding dans la largeur */
    }

   .btn-auth {
        width: 50%;
        margin-left: 55px;
        padding: 10px;  /* Réduit de 12px à 10px */
        font-size: 14px;  /* Réduit de 16px à 14px */
        margin-top: 8px;  /* Réduit de 10px à 8px */
    }

    .btn-auth:active {
        background: #408382;
    }

    /* Title styling */
    .login-container h2 {
        font-size: 1.2em;  /* Réduit de 1.4em à 1.2em */
        margin-bottom: 12px;  /* Réduit de 15px à 12px */
    }
   
    /* Error message styling for mobile */
    .alert {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        padding: 12px;
        border-radius: 8px;
        text-align: center;
        z-index: 2000;
        animation: slideUp 0.3s ease-out;
    }

    .alert-danger {
        background-color: #ffebee;
        color: #c62828;
        border: 1px solid #ef5350;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    @keyframes slideUp {
        from {
            transform: translate(-50%, 100%);
            opacity: 0;
        }
        to {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }
}