/* ============================= */
/* MESSAGES */
/* ============================= */


.errors,
.success {

    width:70%;

    margin:30px auto;

    padding:20px;

    border-radius:12px;

}



.errors {

    background:#ffeaea;

    border-left:5px solid #c62828;

}



.error {

    color:#c62828;

}



.success {

    background:#e8f5e9;

    border-left:5px solid #2e7d32;

    color:#2e7d32;

}





/* ============================= */
/* SECTION PRINCIPALE */
/* ============================= */


.formation-contact-section {

    margin-bottom:80px;

}



.formation-contact-container {

    width:78%;
    max-width:78%;
    overflow-x:hidden;

    margin:auto;

    display:grid;

    grid-template-columns:40% minmax(0,1fr);

    gap:40px;

    align-items:start;

}

/* ============================= */
/* BLOC INFORMATIONS */
/* ============================= */


.formation-info {


    background:#f5f5f5;

    padding:35px;

    border-radius:15px;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.08);


}


.formation-info h2 {

    font-size:2rem;

    color:#003b5c;

    margin-bottom:20px;

}



.formation-form-box h2 {

    font-size:2rem;

    color:#003b5c;

    text-align:center;

    margin-bottom:35px;

}



.formation-info p {


    line-height:1.7;

    font-size:18px;

    color:#333;


}



.formation-info ul {


    list-style:none;

    padding:0;

    margin:25px 0;


}

.check-list {
    list-style: none;
    padding: 0;
}


.check-list li {
    margin-bottom: 12px;
    font-size: 18px;
}


.check-list li::before {

    content: "✓";

    color: #22d0d6;

    font-weight: bold;

    margin-right: 10px;

}


.formation-info li {


    margin-bottom:15px;

    font-size:17px;

    color:#333;


}




.formation-highlight {


    margin-top:30px;

    padding:20px;


    background:white;


    border-left:4px solid #22d0d6;


    border-radius:8px;


}





/* ============================= */
/* CARTE FORMULAIRE */
/* ============================= */


.formation-form-box {


    background:#f5f5f5;


    padding:40px;


    border-radius:15px;


    box-shadow:
    0 8px 25px rgba(0,0,0,0.08);


}



.formation-form-box h2 {

    text-align:center;

    font-size:2rem;

    color:#003b5c;

    margin-bottom:35px;

}





/* ============================= */
/* FORMULAIRE */
/* ============================= */


.formation-form-box form {


    max-width:650px;

    margin:auto;


}



.formation-form-box label {


    display:block;


    font-weight:600;


    color:#333;


    margin-bottom:8px;


}




.formation-form-box input[type="text"],

.formation-form-box input[type="tel"],

.formation-form-box input[type="email"],

.formation-form-box input[type="number"],

.formation-form-box select {



    width:100%;


    padding:14px;


    margin-bottom:22px;


    border:1px solid #ccc;


    border-radius:8px;


    font-size:16px;


    box-sizing:border-box;


}





.formation-form-box select {


    background:white;


}





.formation-form-box input:focus,

.formation-form-box select:focus {


    outline:none;


    border-color:#22d0d6;


    box-shadow:
    0 0 5px rgba(34,208,214,0.4);


}
/* ============================= */
/* BOUTONS AJOUT / RETRAIT */
/* ============================= */


.btn-group {


    display:flex;

    gap:15px;

    margin-bottom:30px;


}



.btn-group button {


    flex:1;


    padding:12px;


    border:none;


    border-radius:8px;


    background:#5c5c5c;


    color:white;


    cursor:pointer;


    transition:0.3s;


}



.btn-group button:hover {


    background:#22d0d6;


}

.formation-form-box textarea {

    width:100%;

    padding:14px;

    margin-bottom:22px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:16px;

    box-sizing:border-box;

    resize:vertical;

}


.formation-form-box textarea:focus {

    outline:none;

    border-color:#22d0d6;

    box-shadow:0 0 5px rgba(34,208,214,0.4);

}


/* ============================= */
/* CAPTCHA */
/* ============================= */


.captcha-container {

    text-align:center;

    margin:30px 0;

}


.captcha-image {

    display:block;

    margin:15px auto;

}



.captcha-container button {

    display:block;

    margin:15px auto 0;

    padding:10px 25px;

    border:none;

    border-radius:8px;

    background:#5c5c5c;

    color:white;

    cursor:pointer;

    transition:0.3s;

}



.captcha-container button:hover {


    background:#22d0d6;


}





/* ============================= */
/* BOUTON ENVOYER */
/* ============================= */


.btn-submit {
    width: 100%;
    padding: 14px;
    background-color: #22d0d6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-submit:hover {
    background-color: #18aeb4;
}



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


@media screen and (max-width:1000px){


    .formation-contact-container {

        grid-template-columns:1fr;

        width:85%;

    }


}



@media screen and (max-width:700px){


    .formation-contact-container {

        width:90%;

    }


    .formation-info,
    .formation-form-box {

        padding:25px;

    }


    .formation-info h2,
    .formation-form-box h2 {

        font-size:24px;

    }


    .btn-group {

        flex-direction:column;

    }


    input[type="submit"] {

        width:100%;

    }


}