/* =========================================
   RESPONSIVE.CSS - Adaptations Mobile/Tablette
   Version: 1.2
   ========================================= */

/* --- MOBILE & TABLETTE (Max 768px) --- */
@media (max-width: 768px) {
    
    /* 1. Afficher le bouton burger */
    .burger-menu {
        display: block;
    }

    /* 2. Cacher la navigation par défaut et la styliser en colonne */
    .main-nav {
        display: none; /* Caché tant que pas 'open' */
        position: absolute;
        top: 70px; /* Hauteur du header */
        left: 0;
        width: 100%;
        background-color: var(--color-surface);
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
        padding: 0;
        z-index: 999;
        border-top: 1px solid #eee;
    }

    /* Classe ajoutée par JS pour ouvrir le menu */
    .main-nav.open {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }

    .main-nav ul li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .main-nav ul li a {
        display: block;
        padding: 15px 20px;
        width: 100%;
        border-bottom: none; /* On retire le style desktop */
    }

    .main-nav ul li a:hover {
        background-color: #f9f9f9;
        color: var(--color-primary);
        padding-left: 25px; /* Petit effet de décalage */
    }

    /* Ajustements généraux */
    main { padding: 15px; }
    
    /* Formulaires en pleine largeur */
    .login-form, .register-form {
        width: 100%;
        box-shadow: none;
        padding: 0;
        background: transparent;
    }
	
	.mobile-only {
        display: block; /* Affiche le lien déconnexion dans le burger */
    }
    
    .header-right {
        gap: 10px;
    }
}

/* --- DESKTOP (Min 769px) --- */
@media (min-width: 769px) {
    /* Style centré pour les formulaires de login/register */
    .login-form, .register-form {
        max-width: 450px;
        margin: 60px auto;
        padding: 40px;
        background-color: var(--color-surface);
        border-radius: var(--border-radius);
        box-shadow: var(--box-shadow-hover);
    }
}

/* Petite animation pour le menu mobile */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}