/* ========================================================= */
/* --- 📱 Styles pour les appareils mobiles (max 768px) --- */
/* ========================================================= */

@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 90px; /* Ajuste l'espace pour le formulaire fixe */
    }

    .presentation {
        flex-direction: column;
        align-items: center;
        text-align: center;
		margin: 0;
		padding: 0 1.5rem 0.5rem;
    }

    .presentation img {
        width: 100px;
        height: 100px;
        margin-right: 0;
        margin-bottom: -45px;
    }

    .presentation p {
        font-size: 0.9em;
    }

    .presentation button {
        margin-top: 10px;
    }

    h3 {
        font-size: 1em;
        margin-top: 10px;
        margin-bottom: 15px;
		text-align: center;
    }

    #question-container {
        flex-direction: column;
        gap: 10px;
        padding: 0 10px;
    }

    #question {
        width: 100%;
        box-sizing: border-box; /* S'assure que le padding et la bordure sont inclus dans la largeur */
    }
	
    /* 2. Nouveau conteneur des boutons : les met côte à côte */
    #action-buttons-mobile {
        display: flex;
        gap: 10px; /* Espace entre les deux boutons */
        width: 100%; /* Important : prend toute la largeur */
    }

    /* 3. Les boutons Micro et GPX se partagent la largeur */
    #btnSpeech,
    #btnShowGpxPopup {
        flex: 1; /* Chaque bouton prend une part égale de l'espace disponible */
        width: 50%; /* Prévient les problèmes de flex, mais flex: 1 est le plus important */
        box-sizing: border-box;
        height: 40px; /* Assure une hauteur confortable */
    }
    

    .bubble {
        padding: 10px;
        font-size: 0.9em;
		min-width: 90%!important;
    }

    .relais-container {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        text-align: center;
    }

    .relais-image {
        max-width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .popup-content {
        width: 95%;
        margin: 20px auto;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .popup-content h2,
    .popup-content h3 {
        font-size: 1.2em;
    }
    
    .popup-content ul,
    .popup-content p {
        font-size: 0.9em;
    }
    
    .homonyme-options {
        flex-direction: column;
        gap: 5px;
    }

    .btn-ville-option,
    .btn-show-map,
    .btn-download-pdf {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
	
    .feedback-btn {
        width: 10%;
		min-width: 85px;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
    
    /* Styles spécifiques pour le formulaire fixé */
    form#searchForm {
        padding: 10px;
    }
}