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

@media (max-width: 768px) {
    
    /* 1. RÉGLAGES DE BASE */
    body, html { 
        overflow-y: auto !important; /* Force le scroll pour voir toutes les vitrines */
    }
    
    :root { 
        --header-height: 100px; /* On réduit la hauteur pour gagner de l'écran */
    }

    /* 2. LE BANDEAU (HEADER) */
    header { 
        height: 100px; 
        padding: 0 10px;
    }

    .logo { 
        height: 60px; 
    }

    .header-center { 
        margin-right: 0; 
    }

    .titre-site { 
        font-size: 1.4rem; 
    }

    .sous-titre { 
        display: none; /* On cache le sous-titre pour éviter l'encombrement */
    }

    /* 3. STRUCTURE DU CONTENU */
    .wrapper { 
        margin-top: 100px;
        height: auto; 
    }

    main {
        padding: 20px;
        align-items: center; /* On recentre tout sur mobile */
    }

    /* 4. LA CARTE DE BIENVENUE */
    .welcome-card {
        padding: 20px;
        margin-bottom: 25px;
        width: 100%;
        max-width: 100%;
    }

    /* 5. LES VITRINES (CARTES) */
    .selection-container {
        max-width: 100%;
        gap: 20px;
    }

    .nav-card {
        padding: 25px 15px;
        width: 100%;
        box-sizing: border-box; /* Évite que la carte ne dépasse de l'écran */
    }

    .nav-card:hover {
        transform: none; /* On désactive le décalage sur mobile (pas de souris) */
    }

    .nav-card .icon { 
        font-size: 2.5rem; 
        margin-bottom: 10px;
    }

    .nav-card h3 { 
        font-size: 1.2rem; 
    }

    .nav-card p {
        font-size: 0.85rem;
    }
}