body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.magasin {
    display: flex;
    align-items: center;
}

.menu {
    padding: 15px 20px 0 20px;
    display: flex;
    align-items: center;
}

a {
    font-weight: 600px;
}

.dropdown-langue {
    margin-left: 40px;
    margin-top: 9px;
}

.dropdown-menu {
    margin-left: 70px;
    margin-top: 5px;
    display: none;
}

.dropmenu {
    background: linear-gradient(270deg, #717634 0%, #5088C4 100%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 18px;
    font-weight: 500;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

.dropdown-credit,
.dropdown-payer,
.dropdown-assurance {
    margin-left: 50px;
    font-size: 18px;
    font-weight: 600;
}

.dropdown-credit a,
.dropdown-payer a,
.dropdown-assurance a {
    text-decoration: none;
    color: black;
}

.dropdown-assurance a:hover,
.dropdown-payer a:hover {
    color: #105978;
    border-bottom: 3px solid #105978;
}

.logo-menu {
    width: 100px;
}

.france {
    width: 30px;
}

.dropdown-content {
    background-color: white;
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    margin-top: 5px;
}

.dropdown-content-1,
.dropdown-content-2,
.dropdown-content-3 {
    background-color: white;
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    margin-top: 5px;
}

.credit-perso,
.credit-renouv {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 400;
}

.credit-perso:hover,
.credit-renouv:hover,
.credit-perso a:hover,
.credit-renouv a:hover {
    background-color: #105978;
    color: white;
}

.dropdown-content a,
.dropdown-content-3 a {
    text-decoration: none;
    color: black;
}

.english {
    display: flex;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 15px;
}

.english:hover,
.canada:hover,
.dropdown-content a:hover {
    background-color: #105978;
    color: white;
}

.enter {
    margin-top: 7px;
    margin-left: 5px;
    font-weight: 600;
    font-size: 20px;
}

.canada {
    display: flex;
    margin-top: 10px;
    padding-bottom: 5px;
    padding-right: 15px;
    padding-top: 5px;
    padding-left: 15px;
}

.img-drapeau {
    width: 30px;
}

.uk {
    margin-left: 10px;
    padding-top: 5px;
}

.show {
    display: block;
}

.dropcredit,
.droppayer,
.dropassu,
.dropbtn {
    cursor: pointer;
    color: #000;
}

.dropcredit:hover {
    color: #105978;
    border-bottom: 3px solid #105978;
}

.droppayer:hover {
    color: #105978;
    border-bottom: 3px solid #105978;
}


.btnlog {
    background-color: #082641;
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    margin-left: auto;
    border-radius: 10px;
    margin-right: 40px;
}

.btnlog:hover {
    background-color: #264e96;
}

.btnreg {
    padding-left: 15px;
    padding-right: 15px;
    height: 35px;
    border-radius: 10px;
    border: 1px solid #082641;
}

.btnreg:hover {
    background-color: #a1b0be;
    border: none;
}

.btnlog a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    position: relative;
    top: 4px;
    font-weight: 600;
}

.btnreg a {
    text-decoration: none;
    color: #082641;
    font-size: 16px;
    position: relative;
    top: 4px;
    font-weight: 600;
}

.btnreg a:hover {
    color: white;
}

.hero {
    margin-top: 15px;
    margin-bottom: 20px;
    background-color: #082641;
}

.all-hero {
    margin-left: 70px;
    margin-right: 70px;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
}

.all_large{
   margin-left: 70px;
    margin-right: 70px;
    padding-top: 40px;
    display: flex;  
}

.hero-titre {
    font-size: 35px;
    font-weight: 600;
    color: white;
}

.h-t {
    font-size: 18px;
    margin-top: 20px;
    font-weight: 400;
    color: white;
}

.btn-demande {
    border: 1px solid white;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    width: fit-content;
    border-radius: 10px;
}

.btn-demande:hover {
    background-color: #264e96;
    border: none;
}

.btn-demande a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.hero-img {
    margin-left: 100px;
    position: relative;
    bottom: 40px;
}

.hero-img-1 {
    margin-left: 100px;
    position: relative;
    top: 30px;
}

.illustration {
    width: 270px;
}

.illustration-1 {
    width: 170px;
}

.besoin {
    background-color: #676c26;
    margin-left: 300px;
    margin-right: 300px;
    margin-top: 40px;
    border-radius: 20px;
    color: white;
}

.all-besoin {
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
}

.besoin-text {
    width: 400px;
}

.besoin-titre {
    font-size: 25px;
    font-weight: 600;
}

.besoin-t {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 400;
}

.btn-simuler {
    background-color: #082641;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    width: fit-content;
    margin-top: 20px;
    border-radius: 10px;
}

.btn-simuler:hover {
    background-color: #264e96;
}

.btn-simuler a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
}


.besoin-img {
    margin-left: 100px;
}

.besoin-illu {
    width: 200px;
}

.pub {
    background: linear-gradient(270deg, #509BC5 0.04%, #082641 12.61%, #082641 85.59%, #509BC5 99.98%);
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    border-radius: 10px;
}

.pub a {
    text-decoration: none;
    color: white;
}

.all-pub {
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
}

.gift {
    width: 50px;
}

.pub-text {
    margin-left: auto;
    color: white;
    margin-right: 20px;
}

.p-t {
    font-weight: 500;
    font-size: 20px;
}

.p-red {
    background-color: #B43838;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    margin-top: 10px;
}

.pub-illu {
    margin-left: auto;
}

.pig {
    width: 100px;
}

.pub-img-1 {
    margin-left: auto;
}

.confiance,
.solutions {
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.titre-confiance,
.solution-titre {
    font-size: 25px;
    font-weight: 600;
}

.all-clients {
    display: flex;
    margin-top: 40px;
}

.client {
    width: 300px;
    text-align: center;
}

.client-1,
.client-2 {
    width: 300px;
    text-align: center;
    margin-left: auto;
}

.etoile {
    width: 200px;
}

.name {
    font-size: 13px;
    margin-top: 10px;
}

.all-solution {
    margin-top: 40px;
    display: flex;
}

.cadre-solution {
    background-color: #082641;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    width: 400px;
    border-radius: 10px;
}

.safe {
    width: 150px;
    margin-top: 10px;
}

.cadre-solution-text {
    background-color: white;
    margin-left: 20px;
    border-radius: 10px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
}

.cadre-titre {
    font-size: 20px;
    font-weight: 500;
}

.cadre-text {
    margin-top: 10px;
}

.btn-credit {
    margin-top: 20px;
    background-color: #082641;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
    padding-left: 15px;
    width: fit-content;
    border-radius: 10px;
    margin-bottom: 20px;
}

.btn-credit:hover {
    background-color: #264e96;
}

.btn-create {
    margin-top: 15px;
    text-align: center;
    border: 1px solid white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: 80px;
    margin-right: 80px;
    border-radius: 10px;
}

.btn-create:hover {
    background-color: #264e96;
    border: none;
}

.btn-credit a,
.btn-create a {
    font-weight: 500;
    text-decoration: none;
    color: white;
}

.compte {
    margin-top: 70px;
    background-color: #082641;
    margin-left: 100px;
    margin-right: 100px;
    border-radius: 10px;
}

.all-compte {
    display: flex;
    padding: 50px;
}

.compte-illu {
    width: 200px;
}

.compte-text {
    color: white;
    margin-left: auto;
    width: 500px;
    text-align: center;
}

.compte-titre {
    font-size: 25px;
    font-weight: 500;
}

.compte-t {
    font-size: 15px;
    font-weight: 400;
    margin-top: 10px;
}

.footer {
    padding: 50px;
    background-color: #082641;
    color: #ffffff;
}

.all-foot {
    display: flex;
    color: #ffffff;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;
}



.foot-1,
.foot-2 {
    margin-left: auto;
    width: 300px;
    text-align: right;
}

.foot-titre {
    font-weight: 600;
    color: #ffffff;
}

.foot-text {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
    width: 100%;
}

.foot-contact {
    margin-top: 10px;
    width: 100%;
}

#email-foot {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 15px;
    height: 35px;
    border-radius: 10px;
    border: 0px;
    padding-left: 10px;
    width: -moz-available;
    width: -webkit-fill-available;
}

#send-foot,
#suivant,
#suivant-reg {
    font-family: 'Poppins';
    font-weight: 600;
    color: white;
    font-size: 15px;
    height: 35px;
    border-radius: 10px;
    border: 0px;
    padding-left: 15px;
    padding-right: 15px;
    width: fit-content;
    margin-top: 15px;
    background-color: #264e96;
}

#send-foot:hover,
#suivant:hover,
#suivant-reg:hover {
    background-color: #a8c1d8;
    color: black;
    cursor: pointer;
}

.foot-media {
    display: flex;
    margin-top: 10px;
}

.foot-compte {
    margin-top: 15px;
}

.foot-compte a {
    text-decoration: none;
    color: white;
}

.foot-compte a:hover {
    color: #264e96;
}

.facebook {
    margin-left: auto;
}

.instagram {
    margin-left: 10px;
}

.fb {
    width: 25px;
}

.foot-link a {
    text-decoration: none;
    color: white;
    font-size: 15px;
}

.foot-link a:hover {
    color: #264e96;
}

.avantages {
    margin-top: 50px;
    margin-left: 100px;
    margin-right: 100px;
    text-align: center;
}

.avantage-titre {
    font-size: 30px;
    font-weight: 600;
}

.all-avantage {
    display: flex;
    margin-top: 40px;
}

.avantage {
    width: 300px;
}

.avantage-1,
.avantage-2 {
    width: 300px;
    margin-left: auto;
}

.av-up {
    text-align: center;
    background-color: #264e96;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
}

.avr-up {
    text-align: center;
    background-color: #264e96;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
}

.av {
    width: 200px;
}

.av-down {
    background-color: #ABD7D4;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
    border-radius: 10px;
}

.avr-down {
    background-color: #C3D0E7;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
    border-radius: 10px;
}

.av-titre {
    font-size: 18px;
    font-weight: 500;
}

.av-text {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 300;
}

.hesiter {
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 10px;
}

.hesiter-titre {
    font-size: 40px;
    font-weight: 600;
    color: black;
}

.hesiter-text {
    font-size: 18px;
    color: black;
    font-weight: 400;
    margin-top: 10px;
}

.all-hesiter {
    margin-left: 300px;
    margin-right: 300px;
    display: flex;
    margin-top: 40px;
    padding-bottom: 30px;
}

.box-hesiter {
    background-color: #264e96;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    border-radius: 10px;
}

.sm {
    width: 200px;
}

.box-text {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    color: white;
}

.box a,
.box-1 a {
    text-decoration: none;
}

.box-1 {
    margin-left: auto;
}

.form-perso {
    margin-left: 70px;
    margin-right: 700px;
    margin-bottom: 50px;
    padding-bottom: 70px;
    color: white;
}

#nom {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 15px;
    height: 45px;
    border-radius: 5px;
    border: 0px;
    padding-left: 10px;
    width: -moz-available;
    width: -webkit-fill-available;
}

#prenom,
#mail,
#tel,
#banque,
#credit,
#message,
#date {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 15px;
    height: 45px;
    border-radius: 5px;
    margin-top: 20px;
    border: 0px;
    padding-left: 10px;
    width: -moz-available;
    width: -webkit-fill-available;
}

#message {
    height: 100px;
}


#suivant-reg-1 {
    font-family: 'Poppins';
    font-weight: 600;
    color: #105978;
    font-size: 15px;
    height: 45px;
    border-radius: 10px;
    border: 0px;
    width: fit-content;
    margin-top: 10px;
    background: none;
    cursor: pointer;
}

#suivant-reg {
    margin-top: 20px;
}

.importer {
    margin-top: 20px;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.importer-text {
    margin-top: 10px;
    color: white;
    font-size: 13px;
    font-weight: 400;
}



#capture,
#capture-1,
#capture2,
#capture3,
#montant,
#duree,
#autre_projet_detail{
    margin-top: 20px;
    width: -moz-available;
    width: -webkit-fill-available;
    text-align: left;
    color: black;
    background: -webkit-linear-gradient(top, #ffffff, #ffffff);
    border: 1px solid #999;
    border-radius: 5px;
    padding: 10px 10px;
    outline: none;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Poppins';
    border: 0px;
}

#capture-1 {
    text-align: center;
}

.info-mail {
    font-size: 15px;
    margin-top: 10px;
    color: #105978;
    font-weight: 500;
}

.form-payer {
    margin-top: 40px;
    margin-left: 300px;
    margin-right: 300px;
    background-color: #264e96;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 50px;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 40px;
}

.payer-titre {
    font-size: 25px;
    font-weight: 500;
    color: white;
}

.payer-text {
    margin-top: 10px;
    font-size: 15px;
    color: white;
}

#nom-payer,
#date-expiration,
#cvv,
#card-number,
#num{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    height: 45px;
    border-radius: 5px;
    border: 0px;
    padding-left: 10px;
    width: -moz-available;
    width: -webkit-fill-available;
    margin-top: 20px;
}

#nom-payer-1 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: 15px;
    height: 45px;
    border-radius: 5px;
    border: 0px;
    padding-left: 10px;
    width: -moz-available;
    width: -webkit-fill-available;
    margin-top: 20px;
    background-color: #082641;
    color: white;
}

.option {
    background-color: white;
    color: #000;
}

#send-payer,
#send-simu,
#send-valider,
#secret_send {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 600;
    color: white;
    font-size: 15px;
    height: 45px;
    border-radius: 10px;
    border: 0px;
    padding-left: 35px;
    padding-right: 35px;
    width: fit-content;
    margin-top: 35px;
    background-color: #082641;
    cursor: pointer;
}


#send-payer:hover,
#send-simu:hover,
#send-valider:hover {
    background-color: #a3d3ff;
    color: #000;
}

.btn-virement {
    background-color: #105978;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 30px;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.btn-virement a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 500;
}

.info-virement {
    background-color: white;
    text-align: left;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

.info-v {
    font-size: 18px;
    font-weight: 500;
}

.info-v-1 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 20px;
}

.payer-illu {
    margin-top: 30px;
}

.py {
    width: 150px;
}

.all-atout {
    margin-left: 200px;
    margin-right: 200px;
}

.box-atout {
    display: none;
    background-color: #FFE3C1;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
    border-radius: 10px;
}

.atout {
    width: 250px;
}

.box-atout-text {
    background-color: white;
    margin-top: 10px;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 40px;
    text-align: left;
}

.atout-text-1 {
    font-size: 15px;
}

.atout-text-2,
.atout-text-3 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 15px;
}

.atout-text-3 {
    font-weight: 300;
}

.about {
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.about-titre {
    font-size: 25px;
    font-weight: 600;
}

.about-text {
    font-weight: 300;
    margin-top: 10px;
}

.about-2 {
    margin-top: 40px;
}

.about-pub {
    width: 400px;
    margin-top: 40px;
}

.about-pub-box {
    background-color: #88B5AB;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    text-align: center;
}

.about-pub-box-1 {
    background-color: #B9E5DB;
    padding-top: 20px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    text-align: left;
    margin-top: 10px;
}

.about-pub-text-1 {
    color: #4F4F4F;
}

.noel {
    width: 150px;
}

.about-pub-text {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.btn-pub-about {
    background-color: #105978;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    width: fit-content;
    margin-top: 20px;
    border-radius: 10px;
}

.btn-pub-about a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.btn-pub-about-1 {
    margin-top: 10px;
}

.btn-pub-about-1 a {
    font-size: 15px;
    font-weight: 600;
    color: #105978;
    text-decoration: none;
}

.all-simul {
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
    padding-top: 20px;
    margin-bottom: 50px;
}

.simulation-titre {
    font-size: 40px;
    font-weight: 600;
    color: white;
}

.simulation-text {
    font-size: 15px;
    font-weight: 400;
    margin-top: 10px;
    color: white;
}

.all-simulation {
    margin-left: 200px;
    margin-right: 200px;
    display: flex;
    margin-top: 40px;
    padding-bottom: 30px;

}

.sm-1 {
    width: 160px;
}

.box-simulation {
    background-color: #264e96;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 30px;
    padding-right: 30px;
}

.simul {
    width: 100px;
}

.box-simulation-titre {
    font-size: 17px;
    font-weight: 500;
    color: white;
    margin-top: 5px;
}

.box-resultat {
    background-color: white;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 30px;
    padding-left: 30px;
    text-align: left;
    margin-top: 20px;
}

.montant-simulation,
.montant-simulation-1 {
    font-size: 16px;
    font-weight: 500;
}

.montant-simulation-1 {
    margin-top: 15px;
}

.btn-demande-simu {
    background-color: #082641;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 30px;
    padding-left: 30px;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 30px;
}

.btn-demande-simu:hover {
    background-color: #5f8cb6
}

.btn-demande-simu a {
    text-decoration: none;
    color: white;
    font-size: 17px;
    font-weight: 600;
}

.btn-refaire {
    margin-top: 15px;
}

.btn-refaire a {
    font-size: 17px;
    font-weight: 600;
    color: #264e96;
    text-decoration: none;
}

.date {
    margin-top: 20px;
    font-weight: 500;
    color: white;
}

#date {
    margin-top: 10px;
}

.resend {
    margin-top: 15px;
}

.resend a {
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #105978;
}

.error {
    font-size: 13px;
    font-weight: 500;
    color: #C60000;
    margin-top: 5px;
}

.btn-connect {
    background-color: #264e96;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    width: fit-content;
    margin-top: 30px;
    border-radius: 10px;
}

.btn-connect a,
.btn-forget a {
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    color: white;
}

.btn-forget {
    margin-top: 15px;
}

.btn-forget a {
    color: #105978;
}

.compte-text {
        width: 100%;
    }


/* Indicateur de progression du formulaire */
.progress-container {
    background-color: #f0f0f0;
    border-radius: 25px;
    padding: 3px;
    margin: 20px 0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.progress-bar {
    background: linear-gradient(270deg, #717634 0%, #5088C4 100%);
    height: 20px;
    border-radius: 25px;
    transition: width 0.3s ease;
    text-align: center;
    line-height: 20px;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #ddd;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 5px;
}

.step-circle.active {
    background-color: #717634;
    color: white;
}

.step-circle.completed {
    color: white;
}

.step-label {
    font-size: 11px;
    text-align: center;
    color: #666;
    font-weight: 500;
}

.step-label.active {
    color: #717634;
    font-weight: 600;
}

.step-label.completed {
    color: #082641;
    font-weight: 600;
}

@media only screen and (max-width: 700px) {
    
    
    .step-label {
        font-size: 9px;
    }
}

@media only screen and (max-width: 1341px) {
    .all-simulation {
        margin-left: 100px;
        margin-right: 100px;
    }
}

@media only screen and (max-width: 1251px) {
    .all-simul {
        margin-left: 100px;
        margin-right: 100px;
    }

    .illustration {
        width: 200px;
    }

    .hero-img {
        margin-top: 25px;
    }

    .besoin {
        margin-left: 100px;
        margin-right: 100px;
    }

    .pub-text {
        width: 500px;
        margin-right: 0px;
    }

    .all-compte {
        margin-left: 200px;
        margin-right: 200px;
    }

    .dropdown-credit,
    .dropdown-payer,
    .dropdown-assurance {
        margin-left: 30px;
    }


    .all-hesiter {
        margin-left: 150px;
        margin-right: 150px;
    }

    .all-avantage {
        display: block;
    }

    .avantage {
        width: auto;
    }

    .avantage-1,
    .avantage-2 {
        width: auto;
        margin-left: 0px;
        margin-top: 40px;
    }

    .form-perso {
        margin-right: 500px;
    }
}

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

    .all-hero,
    .besoin,
    .pub,
    .confiance,
    .solutions,
    .avantages,
    .hesiter,
    .form-payer,
    .about,
    .all-simul {
        margin-left: 50px;
        margin-right: 50px;
    }

    .all_large {
        margin-left: 20px;
        margin-right: 50px;
    }

    .footer {
        padding: 20px;
    }

    .illustration {
        width: 120px;
    }

    .hero-img {
        margin-top: 80px;
    }

    .dropdown-credit,
    .dropdown-payer,
    .dropdown-assurance,
    .btnlog {
        display: none;
    }

    .dropdown-menu {
        display: block;
        margin-left: auto;
        margin-right: 30px;
    }

    .btnreg {
        margin-top: 7px;
    }

    .etoile {
        width: 130px;
    }

    .client,
    .client-1,
    .client-2 {
        font-size: 15px;
    }

    .all-compte {
        margin-left: 100px;
        margin-right: 100px;
    }

    .dropdown-langue {
        margin-left: 30px;
    }

    .p-t,
    .p-red {
        font-size: 15px;
    }

    .pub-text {
        width: 350px;
    }

    .all-hesiter {
        margin-left: 80px;
        margin-right: 80px;
    }

    .form-perso {
        margin-left: 20px;
        margin-right: 400px;
    }

}

@media only screen and (max-width: 900px) {
    .all-clients {
        display: block;
        margin-left: 200px;
        margin-right: 200px;
    }

    .all-solution {
        display: block;
    }

    .cadre-solution {
        width: auto;
    }

    .cadre-solution-text {
        margin-left: 0px;
        margin-top: 10px;
        padding-bottom: 30px;
    }

    .client-1,
    .client-2 {
        margin-left: 0px;
        margin-top: 30px;
        width: fit-content;
    }

    .client {
        width: fit-content;
    }

    .compte-titre {
        font-size: 20px;
    }

    .all-compte {
        margin-left: 50px;
        margin-right: 50px;
    }

    .all-hesiter {
        margin-left: 30px;
        margin-right: 30px;
    }

    .form-perso {
        margin-right: 200px;
    }

    .all-atout {
        margin-left: 50px;
        margin-right: 50px;
    }

    .all-simulation {
        margin-left: 0px;
        margin-right: 0px;
    }

}

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

    .all-hero,
    .all_large
    .besoin,
    .pub,
    .solutions,
    .confiance,
    .avantages,
    .hesiter,
    .about {
        margin-left: 20px;
        margin-right: 20px;
    }

    .all-simulation {
        display: block;
    }

    .hero-titre,
    .titre-confiance,
    .solution-titre {
        font-size: 20px;
    }

    .hero-img,
    .besoin-img,
    .hero-img-1 {
        margin-left: 20px;
    }

    .hero-img-1 {
        margin-top: 60px;
    }

    .hero-text,
    .besoin-text {
        width: fit-content;
    }

    .pub-text {
        width: 250px;
    }

    .compte-illu {
        width: 100%;
    }

    .compte-titre {
        font-size: 15px;
    }

    .compte-t {
        font-size: 13px;
    }

    .btn-create a {
        font-size: 13px;
    }

    .all-foot {
        display: block;
    }

    .foot-1,
    .foot-2 {
        margin-left: 0px;
        margin-top: 30px;
        text-align: left;
    }

    .facebook {
        margin-left: 0px;
    }

    .avantage-titre,
    .hesiter-titre {
        font-size: 20px;
    }

    .hesiter-text {
        font-size: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .all-hesiter {
        display: block;
    }

    .box-1 {
        margin-left: 0px;
        margin-top: 40px;
    }

    .box-hesiter {
        width: auto;
    }

    .form-perso {
        margin-left: 20px;
    }

    #assis {
        width: 120px;
        margin-top: -70px;
    }

    #simulation {
        display: flex;
    }

}

@media only screen and (max-width: 600px) {
    .all-clients {
        margin-left: 100px;
        margin-right: 100px;
    }

    .illustration {
        width: 80px;
    }

    #illu {
        display: none;
    }

    .besoin-illu {
        width: 100px;
    }

    .gift {
        width: 30px;
        margin-top: 40px;
    }

    .all-pub {
        margin-left: 10px;
        margin-right: 10px;
    }

    .p-t,
    .p-red {
        font-size: 13px;
    }

    .pig {
        width: 50px;
        margin-top: 40px;
    }

    .pub-illu {
        margin-left: 10px;
    }

    .all-clients {
        margin-left: 50px;
        margin-right: 50px;
    }

    .all-compte {
        margin-left: 10px;
        margin-right: 10px;
        display: block;
    }

    .btn-create {
        margin-left: 20px;
        margin-right: 20px;
    }

    .form-perso,
    .form-payer {
        margin-right: 20px;
        margin-left: 20px;
    }

    .btn-virement {
        margin-left: 50px;
        margin-right: 50px;
    }

    .info-v,
    .info-v-1 {
        font-size: 15px;
    }

    .info-virement {
        padding-left: 15px;
        padding-right: 15px;
    }

    .all-atout {
        margin-left: 0px;
        margin-right: 0px;
    }

    .btn-demande-simu {
        margin-left: 0px;
        margin-right: 0px;
    }

    .compte {
        margin: 20px;
    }

    .compte-text {
        width: 100%;
    }


}

@media only screen and (max-width: 431px) {
    .logo-menu {
        width: 70px;
    }

    .enter {
        margin-top: 2px;
        font-weight: 600;
    }

    .dropdown-langue {
        margin-left: 20px;
        margin-top: 3px;
    }

    .dropmenu,
    .btnreg a {
        font-size: 15px;
    }

    .btnreg {
        margin-top: 2px;
    }

    .dropdown-menu {
        margin-top: 3px;
        margin-right: 10px;
    }

    .hero-img {
        margin-top: 120px;
        margin-left: 10px;
    }

    .besoin-titre {
        font-size: 18px;
    }

    .besoin-t,
    .btn-simuler a {
        font-size: 13px;
    }

    .btn-simuler {
        padding-top: 5px;
        padding-bottom: 7px;
    }

    .all-besoin {
        margin-left: 15px;
        margin-right: 15px;
    }

    .besoin-illu {
        margin-top: 50px;
    }

    .pub-text {
        width: 200px;
    }

    .all-simul {
        margin-left: 20px;
        margin-right: 20px;
    }

    .hero-img-1 {
        margin-top: 0px;
    }

    #prenom,
    #mail,
    #tel,
    #credit,
    #message,
    #date,
    #nom,
    #nom-payer {
        font-size: 13px;
    }

    #assis {
        width: 100px;
        margin-top: 0px;
    }

    .form-payer,
    .box-resultat,
    .box-simulation {
        padding-left: 15px;
        padding-right: 15px;
    }

    .montant-simulation,
    .montant-simulation-1 {
        font-size: 14px;
    }

    .all-hero {
        padding-top: 50px;
    }

    .about-pub {
        width: auto;
    }

}

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

    .dropmenu,
    .btnreg a {
        font-size: 13px;
    }

    .france {
        width: 25px;
    }

    .dropdown-langue {
        margin-top: 5px;
    }

    .btnreg {
        height: 32px;
    }

    .btnreg a {
        top: 3px;
    }

    .pub-text {
        width: 200px;
    }

    .pub-illu {
        display: none;
    }

    .compte-illu {
        width: 130px;
        margin-top: 40px;
    }

    .hero-img {
        margin-top: 170px;
    }



}

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

    .all-hero,
    .besoin,
    .pub,
    .solutions,
    .confiance,
    .avantages,
    .hesiter,
    .form-perso,
    .form-payer,
    .about {
        margin-left: 15px;
        margin-right: 15px;
    }

    .all-foot {
        width: 100%;
    }



    .hero {
        width: 100%;
    }

    .menu {
        padding: 15px 10px 0 10px;
        display: flex;
        align-items: center;
    }

    .hero-img {
        margin-top: 170px;
    }

    .compte-img {
        display: none;
    }
}