.background {object-fit: cover;}
.button-dawn {top: 11%; right: 1%; z-index: 2;}
.mt-login {margin-top: 5em;}
.hidden {display: none;}
.vh-50 {height: 50vh;}
.h-65 {height: 65%!important;}

#form {width: 20em; height: auto; background-color: whitesmoke; border-radius: 5px; border: solid 1px darkgray; padding: 1em; text-align: center;}
.form-input1 {border-radius: 0.25em 0.25em 0 0;}
.form-input2 {border-radius: 0 0 0.25em 0.25em; border-top: 0;}

/* Footer */
.login-footer-dark {bottom: 0; position: fixed; width: 100%;}
@media screen and (max-width: 768px) {
    .login-footer-dark {position: unset; width: auto;}
}

/* Color bg */
.bg-orange {background-color: #fd7e14;}
.btn-outline-orange {color: #fd7e14; border-color: #fd7e14;}
.btn-outline-orange:hover {color: #fff!important; background-color: #fd7e14!important; border-color: #fd7e14!important;}
.btn-outline-orange:checked {color: #FFF; background-color: #fd7e14; border-color: #fd7e14;}
.btn-check:active+.btn-outline-orange, .btn-check:checked+.btn-outline-orange, .btn-outline-orange.active, .btn-outline-orange.dropdown-toggle.show, .btn-outline-orange:active {
    color: #fff; background-color: #fd7e14; border-color: #fd7e14;}
.btn-check:focus+.btn-outline-orange, .btn-outline-orange:focus {box-shadow: 0 0 0 0.25rem rgba(253, 126, 20, 0.5);}
.text-orange {color: #fd7e14;}
/* default bg */
.bg-default {background-color: #09829b;}
.btn-outline-default {color: #09829b; border-color: #09829b;}
.btn-outline-default:hover {color: #fff!important; background-color: #09829b!important; border-color: #09829b!important;}
.btn-outline-default:checked {color: #FFF; background-color: #09829b; border-color: #09829b;}
.btn-check:active+.btn-outline-default, .btn-check:checked+.btn-outline-default, .btn-outline-default.active, .btn-outline-default.dropdown-toggle.show, .btn-outline-default:active {
    color: #fff; background-color: #09829b; border-color: #09829b;}
.btn-check:focus+.btn-outline-default, .btn-outline-default:focus {box-shadow: 0 0 0 0.25rem rgba(0, 203, 204, 0.5);}
.text-default {color: #09829b;}
a:hover {color: rgba(0, 203, 204, 0.75);}
.nav-link.active {background-color: #09829b!important;}
/* bg-purple */
.bg-purple {background-color: #6610f2;}
.btn-outline-purple {color: #6610f2; border-color: #6610f2;}
.btn-outline-purple:hover {color: #fff!important; background-color: #6610f2!important; border-color: #6610f2!important;}
.btn-outline-purple:checked {color: #FFF; background-color: #6610f2; border-color: #6610f2;}
.btn-check:active+.btn-outline-purple, .btn-check:checked+.btn-outline-purple, .btn-outline-purple.active, .btn-outline-purple.dropdown-toggle.show, .btn-outline-purple:active {
    color: #fff; background-color: #6610f2; border-color: #6610f2;}
.btn-check:focus+.btn-outline-purple, .btn-outline-purple:focus {box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.5);}
.text-purple {color: #6610f2;}

/* Certification */
.eyes {z-index: -1!important; color: white;}
.img-hover:hover .eyes {transform: rotate(340deg); transition: transform 0.5s ease-in-out;}
.img-hover:hover {z-index: 1;  background-color: rgba(253, 126, 20, 0.75); border-radius: 0.25rem 0.25rem 0 0; transition: 0.5s; cursor: pointer;}
.start-45 {top: 50%; left: 46%;}


/* pannel */
.message-input {flex: 1; border: none; outline: none; padding: 5px; font-size: 14px;}
.chat-input {display: flex; align-items: center; padding: 10px; border-top: 1px solid #ccc;}

/* devis */
.radio1 {display: none;}
.radio2 {display: none;}

.formule {cursor: pointer; border: 2px solid rgba(229, 231, 235, 1); background-color: rgba(249, 250, 251, 1); border-radius: 0.25rem; display: flex; padding: 0.5rem 1rem 0.5rem 1rem;}

input[type="radio"]:checked + .formule {border-color: #212529;}
input[type="radio"]:checked + label span.euro {color: #198754;}
input[type="radio"]:checked + label span.html {color: rgba(253, 126, 20, 0.75);}
input[type="radio"]:checked + label span.css {color: rgba(13, 110, 253, 0.75);}
input[type="radio"]:checked + label span.js {color: rgba(247, 223, 30, 0.75);}
input[type="radio"]:checked + label span.php {color: rgba(119, 123, 179, 0.75);}
input[type="radio"]:checked + label span.sql {color: rgba(227, 27, 95, 0.75);}

.page {display: none;}
.page.active {display: block;}
.step-status {width: 1.75rem; height: 1.75rem;}

/* Drapeaux */
.fr {background: linear-gradient(90deg, rgba(27,0,255,1) 40%, rgba(255,255,255,0) 50%, rgba(255,0,0,1) 60%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.en {background: linear-gradient(90deg, rgba(6,0,255,1) 20%, rgba(255,255,255,1) 25%, rgba(255,0,0,1) 30%, rgba(255,0,0,1) 70%, rgba(255,255,255,1) 75%, rgba(6,0,255,1) 81%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.es {background: linear-gradient(rgba(255,0,0,1) 25%, rgb(252, 214, 0, 1) 50% , rgba(255,0,0,1) 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.all {color: #fd7e14;}

#bandeau .container {max-width: 75%; /* Définir la largeur maximale souhaitée */}
#bandeau .bandeau-content {overflow: hidden; white-space: nowrap;}
#bandeau .bandeau-content p {animation: defilement 25s linear infinite;}
@keyframes defilement {
    0% {transform: translateX(100%);}
    100% {transform: translateX(-100%);}
}