/* --- CONFIGURATION MOBILE --- */

@media (max-width: 768px) {
    
    /* 1. RÉGLAGES DU BANDEAU */
    header { 
        height: 70px !important; 
        padding: 0 15px !important;
        justify-content: center !important;
    }
    
    :root { 
        --header-height: 70px; 
    }

    .logo { 
        display: none !important; /* FORCE la disparition du logo */
    }

    .header-center { 
        margin-right: 0 !important;
        align-items: center !important; 
        width: 100% !important;
    }

    .titre-site { 
        font-size: 1.3rem !important; /* Taille de sécurité pour éviter le débordement */
        white-space: nowrap !important; 
        text-align: center !important;
        width: auto !important;
    }

    .sous-titre { 
        display: block !important; /* On le fait réapparaître */
        font-size: 0.75rem !important; /* On le met en tout petit */
        opacity: 0.8;
        margin-top: 2px !important;
        text-align: center;
        white-space: nowrap; /* Lui aussi reste sur une ligne */
    }

    /* 2. AJUSTEMENT DU CONTENU */
    .wrapper { 
        margin-top: 70px !important;
        height: auto !important;
        overflow-y: auto !important;
    }

    body, html {
        overflow-y: auto !important; /* Permet de scroller sur mobile */
    }

    main {
        padding: 15px !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .welcome-card {
        padding: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .selection-container {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .nav-card {
        padding: 25px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}