/* Styles généraux */
body {
    background-color: #E0EDEE;
}

main {
    margin-top: 190px;
}

.container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
}

.devise {
    top: 5px;
    font-size: 0.7em;
    z-index: 2;
}

h1 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Sections et articles */

#simulateurEmprunt .cadre {
    background: #86B4BD;
    margin: auto;
    width: 200px !important;
    padding: 10px 30px 15px 20px;
    text-align: center;
}

#simulateurEmprunt .resultat {
    margin: auto;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #3B8695;
    padding: 1px 30px 1px 20px;
    width: 200px;
    text-align: center;
}

#simulateurEmprunt .resultat .fakeInput {
    height: 25px;
    min-height: unset;
    margin-left: unset;
    z-index: 2;
}

#simulateurEmprunt input[type="text"]{
    z-index: 2;
}

#simulateurEmprunt  .tooltipss {
    top: 1px;
    right: -17px;
    z-index: 1;
}



.tootltipButton {
    border: unset;
    border-radius: unset;
    width: 20px;
    height: 25px;
    height: 24px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


#maCapaciteEmpruntMontantDesire {
    margin-top: 20px;
}

/* #simulateurEmprunt .relative:nth-child(odd) input{
    margin-top:29px;
} */

#p1c4 {
    margin-top: 0px;
}

/* Labels et Inputs */
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

input[type="text"] {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    text-indent: 25px;
    font-size: 1em;
    z-index: 1;
}

/* Curseurs (Sliders) */
input[type="range"] {
    width: 98%;
    position: absolute;
    left: 2px;
    top: 19px;
    visibility: hidden;
    z-index: 3;

}

/* Fake Inputs pour affichage */
.fakeInput {
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    min-height: 40px;
}

/* Boutons */
.buttonHome img {
    width: 200px;
}

.divFleche {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
}

.fleche {
    margin: 30px;
    width: 75px;
    transform: rotate(90deg);
}

section {
    min-width: 200px;
}

table {
    border-collapse: collapse;
    width: 100%;
    background-color: #86B4BD;
  }
  
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #f2f2f2;
  }


  #simulateurEmprunt > div{
    margin-top: -55px;
  }

/* Media Queries */
@media (min-width: 760px) {
    aside {
        position: absolute;
        top: 200px;
        right: 0px;
        border: solid 1px var(--colorEtape4);
        border-right: none;
        padding: 15px 5px;
    }

    #simulateurEmprunt .cadre:nth-child(1) {
        border-top: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
        border-left: 2px solid #FFF;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    #simulateurEmprunt .cadre:nth-child(2) {
        border-top: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
    }

    #simulateurEmprunt .cadre:nth-child(3) {
        border-top: 2px solid #FFF;
        border-bottom: 2px solid #FFF;
        border-right: 2px solid #FFF;
        /* border-top-right-radius: 10px;
        border-bottom-right-radius: 10px; */
    }

    .divFleche {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px 10px;
    }

    .fleche {
        margin: auto;
        transform: unset;

    }
}