/* ======= Conteneur principal ======= */
.contact-container {
    width: 100%;
    max-width: 1200px; /* Largeur max formulaire */
    margin: auto;
    border: 2px solid #ccc;
    border-radius: 20px;
    background: #f7f7f7;
    padding: 20px;
    box-sizing: border-box; /* padding et border inclus dans largeur */
}

/* === Encadré messages success ou erreur === */
#form-messages {
width: 100%;
max-width: 1200px; /* même largeur que formulaire */
margin: 0 auto 15px auto; /* centré horizontalement */
padding: 12px;
border-radius: 8px;
font-weight: bold;
font-size: 1em;
text-align: center;
box-sizing: border-box;
display: none; /* caché par défaut */
}
#form-messages.error {
background: #ff062b; /* fond rouge */
color: #ffffff; /* texte blanc*/
display: block;
text-align: left;
}
/* === A remettre en fonction pour afficher le message directement dans le formulaire=== */
/* === sans passer par la page "messageok"=== */
/*#form-messages.success {
background: #8fde94; /* fond vert clair */
/*color: #010301; /* texte noir */
/*display: block;
text-align: left;
}*/

/* ==== Bloc contenant les deux parties ==== */
.form-block {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* espacement entre colonnes */
}

/* ==== Partie gauche (infos société) ==== */
.partie-gauche {
   /* width: 33.33%;*/
    width: 38%;
    min-width: 340px;
    max-width: 500px;
   /* background: linear-gradient(135deg, #cce0ff 0%, #e6f2ff 100%);*/
    background-image:url('ima/bleuformu.png');
    background-size: 140% auto;
    padding: 30px;
    border-radius: 15px;
    box-sizing: border-box;
}
.partie-gauche h3 {
    margin-bottom: 15px;
    font-weight: bold;
}
.partie-gauche p {
    margin-top: 0;
    font-size: 1.1em;
}

/* ==== Partie droite (formulaire) ==== */
.partie-droite {
    flex: 1 1 0%;
   background: linear-gradient(135deg, #e0e0e0 0%, #f6f6f6 100%);

    /*background: #E4E4E4;*/
    border-radius: 15px;
    padding: 30px;
    box-sizing: border-box;
}

/* ==== Ligne de champs sur une seule ligne ==== */
.ligne {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* ==== Champ textarea "Votre demande" ==== */
.textarea-block {
    margin-bottom: 20px;
}
textarea.form-field {
    width: 100%;    /* occupe toute la largeur */
    height: 180px;  /* hauteur fixe suffisante pour grande saisie */
    resize: none;   /* interdit redimensionnement manuel */
    display: block;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* ==== Zone affichage CAPTCHA ==== */
.ligne-code {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
/* Style image CAPTCHA */
#captcha-img {
border-radius: 8px;
box-shadow: 0 0 4px #aaa;
cursor: pointer;

width: 130px;         /* Largeur fixe */
height: 50px;        /* Hauteur fixe */

}

/* ==== Style champs de formulaire ==== */
.form-field {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #bbb;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
    box-sizing: border-box;
}
/* Focus sur champ */
.form-field:focus {
    border: 2px solid #2196F3;
    box-shadow: 0 0 6px #2196F377;
    outline: none;
}
/* Fond rouge clair en cas d'erreur */
.form-field.error {
    background: #ffc6c6 !important;
}

/* ==== Boutons ==== */
.button-block {
    text-align: center;
}
.btn-submit {
    min-width: 120px;
    padding: 12px 25px;
    border-radius: 8px;
    background: #1e88e5;
    color: white;
    border: none;
    font-size: 1.1em;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-submit:hover {
    background: #42a5f5;
}
.btn-refresh {
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #1e88e5;
    color: white;
    border: none;
    font-size: 1.4em;
    cursor: pointer;
    transition: background 0.2s;
    margin-right: 8px;
}
.btn-refresh:hover {
    background: #64b5f6;
}

/* ==== Textes captcha visibles ==== */
.code-visuel {
    font-weight: bold;
    font-size: 1.2em;
    background: #e0e0ff;
    padding: 10px 25px;
    border-radius: 8px;
    letter-spacing: 3px;
}

/* ============================= */
/* ==== Champ antibot invisible car hors écran avec position: absolute;   et   left: -9999px; ==== */
/* ==== Pour tester cette fonction il suffit de mettre en commentaire ces deux argument  ==== */
/* ==== et dans le champ du formulaire maintement visible d'y saisir quelque chose ==== */
/* ==== C'est dans "verifcontact.php" que le controle s'effectue, ci-dessous le code ==== */
/*if (!empty($_POST['website'])) {
    // Bot détecté : on stoppe ici
    exit;
}*/
.honeypot {
    position: absolute;
    left: -9999px;
}
/* ============================= */


/* ==== Responsive ==== */
@media (max-width: 1200px) {
    .form-block {
        flex-direction: column;
    }
    .partie-gauche,
    .partie-droite {
        width: 100%;
        max-width: 100%;
        margin-bottom: 18px;
    }
}
@media (max-width: 700px) {
    .contact-container {
        padding: 4vw;
    }
    .partie-gauche,
    .partie-droite {
        padding: 2vw;
    }
}
@media (max-width: 600px) {
    /* Champs empilés verticalement sur petits écrans */
    .ligne {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .form-field {
        width: 100% !important;
        max-width: 100% !important;
    }
}