/* Conteneur principal de la page contact */
.contact-container {
    display: grid; /* Mise en page en grille */
    grid-template-columns: 2fr 1fr; /* Formulaire plus large que les infos */
    gap: 50px; /* Espacement entre les deux colonnes */
    margin-top: 100px; /* Espace entre le haut de la page et le contenu */
}

/* Formulaire de contact */
.contact-form {
    background: #f8f9fa; /* Fond gris clair */
    padding: 40px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    margin-bottom: 40px; /* Espace sous le formulaire */
}

/* Ligne contenant deux champs côte à côte */
.form-row {
    display: grid; /* Utilisation d’une grille */
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 20px; /* Espacement entre les champs */
    margin-bottom: 20px; /* Espace sous la ligne */
}

/* Zone de validation des données personnelles (RGPD) */
.privacy-check {
    display: flex; /* Alignement horizontal */
    align-items: flex-start; /* Alignement en haut */
    gap: 10px; /* Espace entre la case et le texte */
    margin: 30px 0; /* Espacement vertical */
}

/* Case à cocher RGPD */
.privacy-check input {
    margin-top: 3px; /* Ajuste l’alignement vertical */
}

/* Texte de la mention RGPD */
.privacy-check label {
    color: #555; /* Gris foncé */
    font-size: 0.9em; /* Texte légèrement plus petit */
}

/* Bouton d’envoi du formulaire */
.submit-btn {
    background-color: #2c5530; /* Vert principal */
    color: white; /* Texte blanc */
    padding: 15px 40px; /* Taille du bouton */
    border: none; /* Suppression de la bordure */
    border-radius: 5px; /* Coins arrondis */
    font-size: 1.1em; /* Taille du texte */
    font-weight: bold; /* Texte en gras */
    cursor: pointer; /* Curseur en forme de main */
    width: 100%; /* Bouton pleine largeur */
}

/* Bloc d’informations de contact */
.contact-info {
    background: #e8f4ea; /* Fond vert clair */
    padding: 40px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    height: fit-content; /* Hauteur adaptée au contenu */
}

/* Titre de la section infos */
.contact-info h3 {
    color: #2c5530; /* Couleur principale */
    margin-bottom: 25px; /* Espace sous le titre */
    font-size: 1.3em; /* Taille du titre */
}

/* Détail de contact (adresse, mail, etc.) */
.contact-detail {
    margin-bottom: 25px; /* Espacement entre chaque info */
}

/* Titre d’un détail */
.contact-detail h4 {
    color: #2c5530; /* Vert */
    margin-bottom: 8px; /* Espace sous le titre */
    font-size: 1em; /* Taille standard */
}

/* Texte d’un détail */
.contact-detail p {
    color: #555; /* Gris foncé */
    margin: 0; /* Suppression des marges par défaut */
}

/* Note ou information complémentaire */
.contact-note {
    background: #f8f9fa; /* Fond gris clair */
    padding: 20px; /* Espacement interne */
    border-radius: 4px; /* Coins légèrement arrondis */
    margin-top: 30px; /* Espace au-dessus */
    font-size: 0.9em; /* Texte plus petit */
    color: #666; /* Gris */
}

/* ================= FORMULAIRES ================= */

/* Groupe de champs */
.form-group {
    margin-bottom: 20px; /* Espacement entre les champs */
}

/* Label des champs */
.form-group label {
    display: block; /* Label sur une ligne */
    margin-bottom: 8px; /* Espace sous le label */
    color: #2c5530; /* Vert principal */
    font-weight: bold; /* Texte en gras */
}

/* Champs input, select et textarea */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%; /* Pleine largeur */
    padding: 12px; /* Espacement interne */
    border: 1px solid #ddd; /* Bordure grise */
    border-radius: 4px; /* Coins arrondis */
    font-size: 1em; /* Taille du texte */
}

/* Zone de texte */
.form-group textarea {
    height: 120px; /* Hauteur par défaut */
    resize: vertical; /* Redimensionnement vertical uniquement */
}

/* Groupe de champ pleine largeur */
.form-group-full {
    position: relative; /* Nécessaire pour animations futures */
    margin-bottom: 20px; /* Espacement */
}

/* Label du groupe pleine largeur */
.form-group-full label {
    display: block; /* Label visible */
    margin-bottom: 8px; /* Espacement */
    color: #2c5530; /* Vert */
    font-weight: bold; /* Texte en gras */
    transition: all 0.3s ease; /* Animation fluide */
    transform-origin: left center; /* Origine de transformation */
}

/* Champs du groupe pleine largeur */
.form-group-full input,
.form-group-full select,
.form-group-full textarea {
    width: 100%; /* Pleine largeur */
    padding: 12px; /* Espacement interne */
    border: 1px solid #ddd; /* Bordure */
    border-radius: 4px; /* Coins arrondis */
    font-size: 1em; /* Taille du texte */
}