/* Style général */
body, html {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* Adaptation de la top-bar pour les petits écrans */
@media (max-width: 768px) {
    .top-bar {
        flex-direction: column;
        padding: 0;
        height: auto; /* Ajuste la hauteur pour éviter les débordements */
    }

    .top-bar .social-media {
        margin-top: 10px; /* Espace entre les éléments */
    }

    .contact-info span a {
        font-size: 11px;
    }

    .nav-logo nav {
        font-size: 15px;
    }

    .nav-logo nav a {
        margin: 0;
    }
}

/* Ajustements pour les sections avec des images */
@media (max-width: 768px) {
    .image-section img {
        width: auto !important;
        height: 55vh;
    }
}

@media (max-width: 480px) {

    .contact-info .contact-icon {
        margin-right: 2px;
        margin-left: 2px;
    }

    .contact-info span {
        margin-right: 9px;
    }

    .contact-info span a {
        font-size: 10px;
    }

    .contact-info {
        display: flex;
        flex-wrap: wrap;
    }

    .link-telephone, .link-mail, .link-map {
        flex: 1 1 45%;
    }

    .link-map {
        flex-basis: 100%; /* Forcer le troisième élément à prendre toute la largeur */
    }

}

/* Adaptation de la section des services et des réalisations */
@media (max-width: 768px) {
    .services-section .service, .realizations-section .realization {
        max-width: 48%;
        margin: 10px auto; /* Centrer les éléments */
    }

    .contact-form-section .p-form, .responsive-masquer {
        display: none;
    }
}

/* Adaptation de la galerie des réalisations */
@media (max-width: 768px) {
    .gallery-description ul li, .gallery-description h3 {
        font-size: 11px;
    }

    .footer-column {
        flex: none;
    }
}

@media (max-width: 480px) {

    h1, h2, h3 {
        font-size: 15px !important;
    }

    p {
        font-size: 11px !important;
        text-align: justify;
    }

    #textarea-details {
        font-size: 13px;
    }

    .service, .realization {
        margin-top: 25px !important;
    }

    .nav-logo, .quality-section .container, .history-section .container {
        flex-direction: column;  
    }

    .services-section .service, .realizations-section .realization {
        max-width: 100%;
    }

    .services-section, .realizations-section {
        padding: 20px 10px; /* Réduire le padding pour les petits écrans */
    }

    .label-details {
        font-size: 10px;
        display: block;
    }

}

/* Adaptation du footer */
@media (max-width: 768px) {
    .services-section .container, .realizations-section .container {
        flex-direction: column;
    }

    .site-footer {
        padding: 0;
    }

    .site-footer img {
        margin: 0px;
        max-width: none;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-columns {
        flex-direction: row;
        width: 100%;
        gap: 20px;
    }

    .footer-column {
        line-height: normal;
    }

    .footer-column h3 {
        font-size: 11px !important;
    }

    .footer-column ul li a {
        font-size: 10px !important;
    }

    .footer-logo {
        margin-bottom: 10px;
    }

    .footer-disclaimer p {
        text-align: center;
    }
}

/* Ajustement des titres et des textes pour les petits écrans */
@media (max-width: 768px) {
    h1, h2, h3 {
        font-size: 1.8rem; /* Réduit la taille des titres */
    }

    .mosaic-gallery {
        column-count: 2 !important;
    }

    .section-title {
        padding: 8px 16px; /* Ajuste le padding pour les petits écrans */
    }
}

@media (max-width: 480px) {
    h1, h2, h3 {
        font-size: 1.6rem;
    }

    .mosaic-gallery {
        column-count: 2 !important;
    }

    .section-title {
        font-size: 1.4rem;
        padding: 6px 12px; /* Réduit davantage le padding pour les petits écrans */
    }
}

/* Ajustement de la section des marques et de la section qualité */
@media (max-width: 768px) {
    .quality-section {
        flex-direction: column;
        padding: 20px 10px; /* Réduction de la marge pour les petits écrans */
    }

    .history-section, .main-politique-et-condition {
        width: 90%;
    }

    .quality-section .image img {
        width: 80%; /* Ajuste la taille des images pour les petits écrans */
        margin: 0 auto; /* Centrage des images */
    }
    
    .image-container {
        flex-direction: column;
    }

    .a-nav {
        display: none;
    }

    .hamburger {
        display: flex;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .mobile-nav.show {
        display: flex;
    }
}

/* Bouton "Retour en haut" pour les petits écrans */
@media (max-width: 768px) {
    #backToTopBtn {
        width: 40px; /* Réduit la taille du bouton pour les petits écrans */
        height: 40px;
        padding: 10px;
        top: 90%;
    }
}

@media (max-width: 480px) {
    #backToTopBtn {
        width: 35px; /* Réduction supplémentaire pour les très petits écrans */
        height: 35px;
        padding: 4px;
        top: 90%;
    }
}