.contact {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    margin: 0 auto; 

    .img-entete {
        width: 100%;
        max-width: 1200px; 
        margin-bottom: 2rem;
        position: relative; // Ajoute un positionnement relatif pour le conteneur
        display: none;

        img:first-child {
            width: 100%;
            height: auto;
            display: block;
        }

        .logo-entete {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;

            img {
                width: 150px;
                height: 150px;
            }
        }
    }

    .infos-et-map {
        width: 100%;
        max-width: 1200px; 
        padding: 0 1rem; 
        margin-bottom: 2rem; 

        div {
            margin-bottom: 2rem; // Espace entre les sections internes
        }

        .separateur {
            width: 100%;
            height: 1px; 
            background-color: #DDAC17; 
            margin: 2rem 0; 
        }

        h1,
        h2 {
            margin: 1rem 0; 
            color: #D1D0CB; 
        }

        h2.location-title {
            margin: 2rem 0 1rem; // Espace au-dessus et en dessous du titre "LOCATION" correction
            color: #D1D0CB; 
        }

        p {
            margin: 0.5rem 0; 
            color: #D1D0CB; 
        }

        iframe {
            width: 100%;
            height: 450px; // Hauteur de l'iframe Google Maps
            border: 0;
            margin-top: 1rem; 
        }
    }

    .infolettre {
        width: 100%;
        max-width: 600px; 
        padding: 0 1rem; 
        margin-top: 2rem; 
        margin-bottom: 4rem; 

        h2 {
            margin-bottom: 1rem; 
            color: #D1D0CB; 
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center; 

            input {
                margin: 0.5rem 0; 
                padding: 0.5rem; 
                border: 1px solid #DDAC17; 
                border-radius: 5px; 
                width: 100%; 
                max-width: 350px; 
            }

            input[type="submit"] {
                background-color: #ad8a21; 
                color: #fff; 
                border: none; 
                cursor: pointer; // Change le curseur au survol
                font-size: 1rem; 
                border-radius: 5px; 
                margin-top: 1rem; 

                &:hover {
                    background-color: #DDAC17;;
                    color: #753612; 
                }
            }
        }
    }
}

// Breakpoint pour les écrans d'au moins 1200px
@media screen and (min-width: 1200px) {
    .contact {
        padding-top: 100px;

        .img-entete {
            display: block;
            position: relative;
            text-align: center;
            width: 100%;
            max-width: 1200px;
            margin-bottom: 2rem;

            img:first-child {
                display: block;
                width: 100%;
                height: auto;
                position: relative;
                z-index: 0;
            }

            .logo-entete {
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;

                img {
                    width: 150px;
                    height: 100px;
                }
            }
        }

        .h1-correction {
            padding-bottom: 1.5rem; // correction de l'espace entre h1 et infolettre
        }

        h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.3rem; 
        }

        p {
            font-size: 1.2rem; 
        }
    }
}
