/* Styles pour la page Contact (template personnalisé) */
.contact-client{
    max-width: 1200px;
    box-sizing: border-box;
    height: calc(100vh - 180px);
    margin:0 auto!important;
    padding: 60px 0px 100px;
}

.contact-client h1{
    font-size: 2.5em;
    margin-bottom: 58px;
    color: #000;
    text-align: center;
    text-transform: lowercase;
}

.contact-client .wp-block-columns{
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.contact-client .wp-block-column{
    flex: 1;
}

/* Formulaire Contact Form 7 */
.contact-client .wpcf7{
    background: #fff;
    padding: 30px;
}

.contact-client .wpcf7-form{
    display: block;
    margin-top: 50px;
}

/* Layout des colonnes AVEC wrapper form-columns */
.contact-client .form-columns{
    display: flex !important;
    gap: 4% !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
}

.contact-client .form-contact-left,
.contact-client .form-contact-right{
    width: 48% !important;
    box-sizing: border-box !important;
}

/* Espacement uniforme des éléments dans les colonnes */
.contact-client .form-contact-left p,
.contact-client .form-contact-right p{
    margin-bottom: 24px !important;
    padding: 0 !important;
    min-height: 85px; /* Hauteur fixe uniforme pour chaque champ */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.contact-client .form-contact-left p:last-child,
.contact-client .form-contact-right p:last-child{
    margin-bottom: 0 !important;
}

/* Hauteur fixe pour le textarea */
.contact-client .form-contact-right p textarea{
    height: 270px !important; /* Hauteur fixe pour équilibrer avec les champs de gauche */
    resize: vertical;
}

/* Forcer le layout des colonnes */
.contact-client .form-columns{
    display: flex !important;
    gap: 4% !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

.contact-client .form-contact-left{
    width: 48% !important;
    float: none !important;
    margin-right: 0 !important;
}

.contact-client .form-contact-right{
    width: 48% !important;
    float: none !important;
    margin-right: 0 !important;
}

/* Bouton d'envoi FORCÉ en dessous */
.contact-client .wpcf7-form p:last-child,
.contact-client .wpcf7-form div:last-child,
.contact-client .wpcf7-form .wpcf7-submit{
    display: block !important;
    text-align: center !important;
}


.contact-client .wpcf7-form p{
    margin: 0;
}

.contact-client .wpcf7-form label{
    display: block;
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    min-height: 20px;
    text-align: left;

}

/* Champs de formulaire */
.contact-client .wpcf7-form input[type="text"],
.contact-client .wpcf7-form input[type="email"],
.contact-client .wpcf7-form input[type="tel"],
.contact-client .wpcf7-form input[type="url"],
.contact-client .wpcf7-form textarea,
.contact-client .wpcf7-form select{
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #000;
    background: #fff;
    font-size: 16px;
    box-sizing: border-box;
}

.contact-client .wpcf7-form input[type="text"]:focus,
.contact-client .wpcf7-form input[type="email"]:focus,
.contact-client .wpcf7-form input[type="tel"]:focus,
.contact-client .wpcf7-form textarea:focus,
.contact-client .wpcf7-form select:focus{
    outline: none;
    background: #f8f8f8;
}

.contact-client .wpcf7-form textarea{
    min-height: 270px;
    resize: vertical;
}

/* Cases à cocher et boutons radio */
.contact-client .wpcf7-form .wpcf7-checkbox,
.contact-client .wpcf7-form .wpcf7-radio{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-client .wpcf7-form .wpcf7-list-item{
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-client .wpcf7-form .wpcf7-list-item input[type="checkbox"],
.contact-client .wpcf7-form .wpcf7-list-item input[type="radio"]{
    margin: 0;
    width: auto;
}

/* Bouton d'envoi */
.contact-client .wpcf7-form .wpcf7-submit{
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 14px 28px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin: auto;
}

.contact-client .wpcf7-form .wpcf7-submit:hover{
    background: #fff;
    color: #000;
}

.contact-client .wpcf7-form .wpcf7-submit:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

/* Messages de validation */
.contact-client .wpcf7-response-output{
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #000;
    background: #fff;
    font-weight: 500;
}

.contact-client .wpcf7-response-output.wpcf7-mail-sent-ok{
    background: #d4edda; /* BLEU CLAIR comme WooCommerce message */
    border: 1px solid #17a2b8;
    color: #155724;
}

.contact-client .wpcf7-response-output.wpcf7-validation-errors{
    background: #f8d7da; /* ROSE comme WooCommerce error */
    border: 1px solid #dc3545;
    color: #721c24;
}

.contact-client .wpcf7-response-output.wpcf7-spam-blocked{
    background: #f8f9fa; /* GRIS comme WooCommerce not-set */
    border: 1px solid #dee2e6;
    color: #6c757d;
}

/* Erreurs de validation sur les champs */
.contact-client .wpcf7-form .wpcf7-not-valid{
    border-color: #ff6b6b !important;
    background: #ffeaea !important;
}

.contact-client .wpcf7-form .wpcf7-not-valid-tip{
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: block;
    text-align: left;
}


.wpcf7 form .wpcf7-response-output{border:0px!important;}

.wpcf7-response-output{
    width:fit-content;
    padding:15px 20px!important;
    margin:0 auto!important;
    margin-top:15px;
    font-weight:bold;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output{
    background: #f8d7da; /* ROSE comme WooCommerce error */
    border: 1px solid #f8d7da!important;
    color: #721c24;
    font-weight:bold;
}

.wpcf7-spinner{display:flex;margin:0 auto;margin-top:10px;}

/* Champs obligatoires */
.contact-client .wpcf7-form .wpcf7-validates-as-required::after{
    content: " *";
    color: #dc3545;
    font-weight: bold;
}








/* ========================================
   RESPONSIVE
======================================== */


/* option responsive : réduire le nombre de colonnes sur petits écrans */
@media (max-width: 1400px){  }

@media (max-width: 1200px){ 
    
    .contact-client{height:auto;}
}

@media (max-width: 768px){
    
    .contact-client .wpcf7{width:70%;margin:0 auto;}
    .contact-client .wpcf7-form{display:flex;flex-direction: column;}
    .contact-client .form-columns{flex-direction: column;}

    .contact-client .form-contact-left{width:100%!important;}
    .contact-client .form-contact-right{width:100%!important;margin-top:24px;}
}

@media (max-width: 480px){

    .contact-client .wpcf7{width:90%;}
}