/* Reset some default spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Set body background and layout */
body {
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Style the header and h1 */
header {
    width: 100%;
    background-color: #4f46e5;
    height: 150px;
    margin-bottom: 0;
}

/* NORMAL HEADER
  header h1 {
    color: white;
    font-size: 3rem;
    padding-left: 125px;
  
    /*font-size: clamp(1.5rem, 5vw, 5rem);
    padding-left: clamp(10px, 8vw, 125px);
    
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    text-align: center;
  } */

/* CENTER HEADER
  header h1 {
    color: white;
    font-size: 3rem;
    font-weight: bold;
    height: 100%;
    text-align: center;
  
    /* Center it fluidly
    max-width: 800px;
    margin-inline: clamp(10px, 10vw, auto); /* left/right margins shrink fluidly 
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    transition: margin 0.3s ease;
  } */

header h1 {
    color: white;
    font-size: 3rem;
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: clamp(20px, 8vw, 125px);
    /* progressively shrinks */
    height: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

/* Image de fond pour le header */
.banner {
    background-image: url(https://www.greta-cfa-alsace.fr/wp-content/themes/greta/img/back_title_form.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 120% !important;
}

/* Container general pour le tout */
.container {
    display: flex;
    /* flex-direction: row;
       flex-wrap: wrap; */
    margin-top: 80px;
    overflow: auto;
}

/* Information de contact */
.contact-info {
    background-color: white;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: auto;
}

.contact-info h2 {
    color: #172e97;
    margin-bottom: 8px;
    font-size: 1.5rem;
    /* smaller title */
}

.contact-info p {
    font-size: 0.9rem;
    /* slightly smaller text */
    color: #333;
    margin-bottom: 6px;
}

/* Map */
.map-container {
    padding: 40px 30px 20px 80px;
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
    width: 65%;
    overflow: hidden;
}

.map-container iframe {
    height: auto;
    min-height: 710px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
    width: 100%;
}

/* Form */
.form-container {
    padding: 40px 80px 20px 30px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    width: 35%;
}

/* Paragraph */
.form-container p {
    margin-bottom: 20px;
    font-size: 1.2rem;
    color: #172e97;
    text-align: center;
    font-style: bold;
    font-weight: 600;
}

/* Form styling */
form {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Inputs, select, textarea */
input[type="text"],
textarea,
select {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
}

select {
    color: rgb(100, 100, 100);
    /* Match font color */
    background-color: white;
    /* Avoid system gray backgrounds */
    font-family: Arial, sans-serif;
    /* Match other inputs */
    appearance: none;
    /* Remove native styles */
    -webkit-appearance: none;
    /* Remove iOS/Safari native styles */
    -moz-appearance: none;
    /* Remove Firefox styles */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='gray' d='M1 3l6 6 6-6z'/%3E%3C/svg%3E");
    /* Custom down arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
    /* Give space for arrow */
}

textarea {
    resize: vertical;
    min-height: 100px;
    max-height: fit-content;
}

/* boutton envoyer */
input[type="submit"] {
    background-color: #4f46e5;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #3730a3;
}

/* Footer */
footer {
    background-color: #f9f9f9;
    padding: 15px 8px;
    /* réduit un peu plus le padding */
    margin-top: 100px;
    font-size: 0.85rem;
    /* taille globale plus petite */
    margin-bottom: 100px;
}

footer>div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
}

footer img.logo {
    max-width: 198px;
    margin-bottom: 8px;
    align-self: flex-start;
    padding-right: 15px;
}

.footer-content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.footer1,
.footer2,
.footer3,
.footer4 {
    flex: 1;
    min-width: 180px;
    margin: 4px;
}

.footer1 p,
.footer2 p,
.footer3 p,
.footer4 p {
    font-weight: bold;
    margin-bottom: 4px;
    color: #172e97;
    font-size: 0.9rem;
}

.footer1 ul,
.footer2 ul,
.footer3 ul,
.footer4 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer1 li,
.footer2 li,
.footer3 li,
.footer4 li {
    margin-bottom: 4px;
}

.footer1 a,
.footer2 a,
.footer3 a,
.footer4 a {
    color: #172e97;
    text-decoration: none;
    font-size: 0.8rem;
}

.footer1 a:hover,
.footer2 a:hover,
.footer3 a:hover,
.footer4 a:hover {
    text-decoration: underline;
}

/* Réseaux sociaux */
.menu-nous-suivre li {
    display: inline-block;
    margin-right: 8px;
}

.menu-nous-suivre a {
    color: #ffaa0c;
    font-size: 1.4rem;
    transition: color 0.3s;
}

.menu-nous-suivre a:hover {
    color: #ffaa0c;
}



@media (max-width: 1000px) {

    footer>div,
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
    }

    footer img.logo {
        align-self: center;
        margin: 16px auto;
        padding-right: 0;
        display: block;
        max-width: 500px;
        /* make the logo bigger on small screens */
        width: 80%;
        /* responsive scaling */
    }

    .footer1,
    .footer2,
    .footer3,
    .footer4 {
        flex: none;
        width: 100%;
        max-width: 400px;
        margin: 8px 0;
    }

    .footer1 ul,
    .footer2 ul,
    .footer3 ul,
    .footer4 ul {
        padding-left: 0;
    }

    .menu-nous-suivre {
        text-align: center;
        margin-top: 16px;
    }

    .menu-nous-suivre li {
        margin: 0 8px;
    }
}


/* Responsive mobile view */
@media (max-width: 1000px) {
    .container {
        flex-direction: column-reverse;
        /* stack form and map vertically */
        align-items: center;
        flex-wrap: wrap;
    }

    .map-container {
        width: 80%;
        padding-left: clamp(10px, 5vw, 30px);
        padding-right: clamp(10px, 5vw, 30px);
    }

    .form-container {
        width: 70%;
        padding-left: clamp(10px, 5vw, 30px);
        padding-right: clamp(10px, 5vw, 30px);
    }
}

/* Responsive mobile view */
@media (max-width: 670px) {
    .container {
        flex-direction: column-reverse;
        /* stack form and map vertically */
        align-items: center;
        flex-wrap: wrap;
    }

    header h1 {
        justify-content: center;
        padding-left: 0;
        text-align: center;
    }

    .map-container {
        width: 100%;
        padding-left: clamp(10px, 5vw, 30px);
        padding-right: clamp(10px, 5vw, 30px);
    }

    .map-container iframe {
        min-height: 300px;
        /* or use height: 300px; */
        aspect-ratio: 1 / 1;
        /* Optional: makes it perfectly square */
    }

    .form-container {
        width: 100%;
        padding-left: clamp(10px, 5vw, 30px);
        padding-right: clamp(10px, 5vw, 30px);
        padding-top: 0px;
    }
}