/* Titre principal */
h1 {
    text-align: center;
    color: #e4e8ed; /* Couleur plus foncée et élégante */
    font-size: 2.8em; /* Plus grand et impactant */
    margin-bottom: 40px; /* Plus d'espace sous le titre */
    font-weight: 700; /* Gras pour plus d'emphase */
    letter-spacing: 1px; /* Espacement des lettres pour un look moderne */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Légère ombre pour le titre */
}

/* Styles pour la section de contact avec l'image de fond */
#contact-section {
    width: 100%; /* S'assurer que la section prend toute la largeur */
    min-height: 100vh; /* Minimum la hauteur de la vue pour que l'image soit visible */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    background-image: url('../imgs/bg_contact.jpg'); /* REMPLACEZ CE CHEMIN */
    background-size: cover; /* L'image couvrira toute la zone, peut couper les bords */
    background-position: center center; /* Centre l'image dans la section */
    background-repeat: no-repeat; /* Empêche l'image de se répéter */
    padding: 60px 20px; /* Ajouter un padding pour ne pas coller les bords */
    box-sizing: border-box; /* Inclure padding et border dans la largeur/hauteur */
}


/* Conteneur principal du formulaire */
.contact-container-1 {
    max-width: 650px; /* Légèrement plus large */
    width: 90%; /* S'adapte mieux aux petits écrans */
    margin: 30px auto; /* Marge ajustée */
    padding: 40px; /* Plus de padding interne */
    background-color: #ffffff; /* Fond blanc propre */
    border-radius: 12px; /* Bords plus arrondis */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Ombre plus prononcée et douce */
    border: 1px solid #e0e0e0; /* Bordure subtile */
    display: flex; /* Utilisation de flexbox pour le conteneur lui-même */
    flex-direction: column; /* Organise le contenu en colonne */
    gap: 20px; /* Espacement entre les éléments flex */
   
}

/* Formulaire lui-même (peu de changements car le conteneur gère Flexbox) */
.contact-container-1 form {
    display: flex;
    flex-direction: column;
}

/* Labels des champs */
.contact-container-1 label {
    margin-bottom: 8px; /* Marge sous le label */
    color: #4a4a4a; /* Couleur de texte plus douce pour les labels */
    font-weight: 600; /* Labels plus gras */
    font-size: 1.1em; /* Légèrement plus grand */
}

/* Champs de saisie (text, email, textarea) - Styles COMMUNS */
.contact-container-1 input[type="text"],
.contact-container-1 input[type="email"],
.contact-container-1 textarea,
.contact-container-1 select { /* <-- select ajouté ici pour les styles de base */
    width: calc(100% - 20px); /* Ajuste la largeur pour le padding */
    padding: 12px; /* Plus de padding pour un meilleur toucher */
    margin-bottom: 25px; /* Plus d'espace entre les champs */
    border: 1px solid #dcdcdc; /* Bordure plus douce */
    border-radius: 6px; /* Bords légèrement plus arrondis */
    font-size: 1em;
    transition: all 0.3s ease; /* Transition douce pour les focus */
    background-color: #fcfcfc; /* Très léger fond pour les champs */
}

/* Effet au focus des champs - Styles COMMUNS */
.contact-container-1 input[type="text"]:focus,
.contact-container-1 input[type="email"]:focus,
.contact-container-1 textarea:focus,
.contact-container-1 select:focus { /* <-- select ajouté ici */
    border-color: #007bff; /* Bordure bleue plus vive au focus */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* Ombre légère bleue */
    outline: none; /* Supprime le contour par défaut du navigateur */
    background-color: #ffffff; /* Fond blanc au focus */
}

/* Styles spécifiques pour le SELECT */
.contact-container-1 select {
    appearance: none; /* Supprime l'apparence par défaut du système */
    -webkit-appearance: none; /* Pour Chrome/Safari */
    -moz-appearance: none; /* Pour Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20512%22%3E%3Cpath%20fill%3D%22%234a4a4a%22%20d%3D%22M192%20320c-8.18%200-16.35-3.12-22.63-9.37l-128-128c-12.5-12.5-12.5-32.75%200-45.25s32.75-12.5%2045.25%200L192%20237.75l105.37-105.37c12.5-12.5%2032.75-12.5%2045.25%200s12.5%2032.75%200%2045.25l-128%20128C208.35%20316.88%20200.18%20320%20192%20320z%22%2F%3E%3C%2Fsvg%3E'); /* Icône de flèche déroulante */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px; /* Espace pour l'icône */
}


/* Styles spécifiques pour la textarea */
.contact-container-1 textarea {
    resize: vertical; /* Permet de redimensionner verticalement */
    min-height: 120px; /* Hauteur minimale pour le message */
}

/* Bouton d'envoi */
.contact-container-1 button {
    padding: 15px 25px; /* Plus de padding pour un bouton plus grand */
    background-color: #007bff; /* Bleu primaire */
    color: white;
    border: none;
    border-radius: 8px; /* Bords plus arrondis */
    cursor: pointer;
    font-size: 1.2em; /* Texte plus grand */
    font-weight: 700; /* Gras */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* Transitions multiples */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* Ombre pour le bouton */
    align-self: center; /* Centrer le bouton dans le formulaire flex */
    width: 100%; /* S'étend sur toute la largeur du formulaire */
    max-width: 250px; /* Limite la largeur du bouton pour ne pas être trop grand */
    margin-top: 15px; /* Marge au-dessus du bouton */
}

/* Effet au survol du bouton */
.contact-container-1 button:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
    transform: translateY(-3px); /* Léger mouvement vers le haut */
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3); /* Ombre plus forte au survol */
}

.contact-container-1 button:active {
    transform: translateY(0); /* Retour à la position normale au clic */
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); /* Légère ombre au clic */
}

/* Responsive design */
@media (max-width: 768px) {
    h1 {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
    .contact-container-1 {
        padding: 30px;
        margin: 20px auto;
        width: 95%; /* Prend plus de largeur sur les petits écrans */
    }
    .contact-container-1 label {
        font-size: 1em;
    }
    .contact-container-1 input[type="text"],
    .contact-container-1 input[type="email"],
    .contact-container-1 textarea,
    .contact-container-1 select { /* <-- select ajouté ici */
        padding: 10px;
        margin-bottom: 20px;
    }
    .contact-container-1 button {
        padding: 12px 20px;
        font-size: 1.1em;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .contact-container-1 {
        padding: 20px;
        margin: 15px auto;
        border-radius: 10px;
    }
    .contact-container-1 input[type="text"],
    .contact-container-1 input[type="email"],
    .contact-container-1 textarea,
    .contact-container-1 select { /* <-- select ajouté ici */
        margin-bottom: 15px;
    }
    .contact-container-1 textarea {
        min-height: 100px;
    }
    .contact-container-1 button {
        font-size: 1em;
        max-width: 180px;
    }
}