/* Page de Style pour la version ordinateur */
.mainPage{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    width: 1440px;
    background: #FFFFFF;
    margin: auto;
    gap: 35px;
}

input {
    appearance: none;
    -moz-appearance: none;
}
/* Style affectant la police */
.police {
    font-size-adjust:0.5;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 25px;
    color: #FF6C54;
}

label {
    display: flex;
}

input[type='radio']:after {
    width: 16px;
    height: 16px;
    border-radius: 15px;
    top: -1px;
    left: -2px;
    position: relative;
    background-color: white;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid #ff6C54;
    outline: 1px solid #FFFFFF;
}

input[type='radio']:checked:after {
    width: 16px;
    height: 16px;
    border-radius: 15px;
    top: -1px;
    left: -2px;
    position: relative;
    background-color: #ff6C54;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
    outline: 1px solid #ff6C54;
}

.sPolice {
    font-size: 24px;
}

.titre {
    line-height: 33px;
}

.texte {
    color: #5f5f5f;
}

.chiffre {
    color: #FF6C54;
    font-weight: bold;
}

.texteBasique {
    line-height: 22px;
    font-size: 14px;
}

.texteInput {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    color: #5F5F5F;
}

.texteEval {
    font-size: 1rem;
    line-height: 26px;
}

.texteEvalR {
    line-height: 22px;
}

.petitTexte {
    font-size: 12px;
    line-height: 16px;
}

.fontWeight {
    font-weight: 400;
}


.divButton {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.divTitre {
    display: flex;
}

.accueil {
    font-size: 45px;
    line-height: 55px;
}

/* ------------------------------- */
/* Style affectant les différents éléments */
.divContenuSP, .divContenuDC, .divContenuEval, .divContenuPMax, .divContenuDQ, .divContenuResultat{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 70px 40px 74px;
    gap: 35px;
}

.divItems {
    width: 1028px;
    background: #FFFFFF;
    box-shadow: -1px 0px 25px rgba(95, 95, 95, 0.1);
    border-radius: 3px;
}

.divAccueil {
    width: 1028px;
}

.divRadioCenter {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
/*
.divRadio {
    display: flex;
    flex-direction: row;
    gap: 5px;
}*/

.btnContinuer {
    border-width: 0px;
    border-radius: 3px;
    padding: 16px 24px 16px 24px;
    color: #FFFFFF;
    border: 1.35px solid #FFFFFF;
    background-color: #FF6C54;
    display: flex;
    gap: 15px;
    align-items: center;
}

.btnContinuer:hover{
    border-width: 0px;
    border-radius: 3px;
    padding: 16px 24px 16px 24px;
    background-color: #FFFFFF;
    color: #FF6C54;
    border: 1.35px solid #FF6C54;
    transition: 0.7s;
    display: flex;
    gap: 15px;
    align-items: center;
}

.goUp {
    border: none;
    background-color: white;
    display: grid;
}

.material-symbols-outlined {
    transform: rotateX(180deg);
    font-size: 32px !important;
}

.goUp:hover{
    color:#FF6C54;
    transition: 0.7s;
}


.btnExit {
    border: 1px solid #FF6C54;
}

.btnWhite {
    border-width: 0px;
    border-radius: 3px;
    padding: 16px 24px 16px 24px;
    background-color: #FFFFFF;
    color: #FF6C54;
    border: 1.35px solid #FF6C54;
    display: flex;
    gap: 15px;
    align-items: center;
}

.btnWhite:hover {
    border-width: 0px;
    border-radius: 3px;
    padding: 16px 24px 16px 24px;
    color: #FFFFFF;
    background-color: #FF6C54;
    border: 1.35px solid #FF6C54;
    transition: 0.7s;
    display: flex;
    gap: 15px;
    align-items: center;
}

.btnTexte {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.btnTexteOrange {
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
}

.divBtnEnd {
    display: flex;
    gap: 150px;
}

.goTop {
    display: flex;
    margin-top: 35px;
    padding-right: 127px;
    flex-direction: column;
    align-items: flex-end;
}

.scrollUp {
    margin-right: 18px;
    transform: rotateX(180deg);
}



.divDC, .divAF, .divEval, .divEnfants, .divPMax, .textePE, .messageInfoDC, .divC, .divDQ, .texteDQI, .divDQIC, .divResultats {
    display: none;
}

.inputForm {
    width: 45%;
    padding: 12px 8px;
    box-sizing: border-box;
    border: 0.4px solid #5F5F5F;
    border-radius: 2px;
}

.divMessageInfo {
    display: flex;
    flex-direction: row;
    padding: 15px 18px;
    gap: 15px;
    background: rgba(255, 108, 84, 0.05);
    border-radius: 3px;
}

.divMessageInfo2 {
    padding-bottom: 12px;
}

.divPE {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.divPEAC {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}
.divPEC {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: baseline;
}

.divGlobalPEC{
    display: flex;
    justify-content: space-between;
}

.divDQI {
    display: flex;
    flex-direction: row;
    gap: 35px;
}

.inputFormPE {
    width: 410px;
}

/* ------------------------------- */
/* Gestion des infobulles */
.infobulle {
    display: flex;
    align-items: center;  
    position: relative;
    cursor: help;
}

.infobulle::before {
    content: attr(aria-label);  
    position: absolute;
    top: 35px;
    transform: translateX(-40%);  
    z-index: 1; 
    background-color:#FF6C54;
    border-radius: 3px;
    padding:15px;
    width:410px;
    gap: 10px;
}

.infobullePI::before {

}

.infobulleG::before {
    content: attr(aria-label);  
    position: absolute;
    top: 50px;
    left: -200px;
    transform: translateX(-40%);  
    z-index: 1; 
    background-color:#FF6C54;
    border-radius: 3px;
    padding:15px;
    width:410px;
    gap: 10px;
}

.infobulleB::after {
    position: absolute;
    content: "";
    top: 100%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid #FF6C54;
}


.infobulle::before,
.infobulle::after,
.infobulleG::before,
.infobulleG::after {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out;
}

.infobulle:hover::before,
.infobulle:hover::after,
.infobulleG:hover::before,
.infobulleG:hover::after {
    opacity: 1;
    visibility: visible;
}


.texteIB {
    display: flex;
    align-items: center;
    gap: 5px;
}

#img2 {
    display: inline;
}

.texteInfoBulle {
    font-size: 14px;
    line-height: 26px;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.texteGraphique {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

.tableH {
    text-align: center;
    width: 200px;
}

.tableH2 {
    width: 400px;
    padding-left: 10px;
}

.divTable {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 15px;
}

.table {
    display: flex;
    flex-direction: row;
    gap: 35px;
}

table {
    border-collapse: collapse;
}

.tableCell {
    padding-top: 15px;
    padding-bottom: 15px;
}

.tableCellHeader {
    border-top: 2px solid #FF6C54;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.tableCellMontant, .tableCellLastMontant {
    display: inline-grid;
    align-content: space-around;
}

.texteHeaderItalic {
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}

.tableCellLast {
    border-left: 2px solid #FF6C54;
    border-right: 2px solid #FF6C54;
    padding-top: 15px;
}

.tableCellLastRow {
    border-bottom: 2px solid #FF6C54;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.thead {
    display: flex;
    gap: 35px;
    padding-bottom: 0px;
}

.texteHeader {
    font-weight: 800;
}

.dataGraph {
    font-size: 35px;
}

.texteCaseTable {
    font-weight: 300;
}

.tableHead {
    border-bottom: 0.5px solid #737373;
}

.PER {
    line-height: 45px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}


.textePERS {
    line-height: 55px;
    display: contents;
}

.ligneEco {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 25%;
}

.texteEco {
    display: flex;
    align-items: center;
    text-align: center;
    color: #00d5a7;
    font-size: 45px;
    line-height: 55px;
}

.inputPER {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    padding: 12px 8px;
    border: 0.4px solid #5F5F5F;
    border-radius: 2px;
    width: 130px;
}

/* input type range */

input[id="inputRange"]::-webkit-slider-thumb {
    appearance: none;
    background: #FF6C54;
    cursor: pointer;
    border: 1px solid #FF6C54;
    width: 0px;
    height: 125.31px;
    margin-bottom: 170px;

}

  .rangeEconomie {
    background: #00D5A7;
    border: 0px solid #00D5A7;
    padding: 0px;
    margin: 2px;
    border-radius: 3px 0px 0px 3px;
    height: 14.26px;
    width: 880px;
    -webkit-appearance: none;
  }

  .progress {
    background: #FF6C54;
    border-radius: 3px 0px 0px 3px;
    height: 28.53px;
    width: 880px;
    -webkit-appearance: none;
    z-index: 100;
  }

#inputRangeEconomie::-webkit-slider-thumb {
    appearance: none;
    background: #00D5A7;
    width: 0px;
}

.rangeEconomie::-moz-range-thumb {
    border: none;
    height: 125px;
    width: 0px;
    background:transparent;
    transform: translateY(-70%);
}


/* TEST FIREFOX */
.progress::-moz-range-thumb {
    border: none;
    height: 125px;
    width: 0px;
    border: 2px solid #FF6C54;
    background: #FF6C54;
    transform: translateY(-70%);
}

.progress::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-appearance: none;
    cursor: ew-resize;
    background: #F7F3F2;
  }

.textInputRangeBox{
    display: flex;
}

/*
.textInputRange {
    width: fit-content;
}
*/
.textInputRangeLeft{
    padding-left: 10px;
    text-align: start;
}
.textInputRangeRight{
    padding-right: 10px;
    text-align: end;
}

.textInputRangeEcoLeft{
    border-left: 1px solid #00D5A7;
    padding-left: 6px;
    text-align: start;
}
.textInputRangeEcoRight{
    border-right: 1px solid #00D5A7;
    padding-right: 6px;
    text-align: end;
}

.spacerLeftHigh {
    flex: 1 1 auto;
}
.spacerRightHigh {
    width: 0%;
}

.spacerLeftLow {
    width: 0%;
}
.spacerRightLow {
    flex: 1 1 auto;
}

  .textGreen {
    color: #00D5A7;
  }

  .textNoMargin {
    margin: 0px;
  }

  .textNoMarginTop {
    margin-top: 0px;
  }

  .texteMarginTop {
    margin-top: 40px;
  }

  .imgMarginBot {
    margin-bottom: 23px;
    width: 18px;
  }

  .imgIFB18 {
    margin-bottom: 18px;
  }

  .imgIFB20 {
    margin-bottom: 20px;
  }

  .imgIFB36 {
    margin-bottom: 36px;
  }

  .infMarginBot {
    margin-bottom: 20px;
    width: 18px;
  }
  .infoMarginBot {
    margin-bottom: 35px;
    width: 18px;
  }
  .textNoMarginBot {
    margin-bottom: 0px;
  }

  .divGraph {
    display: flex;
    flex-direction: column;
    gap: 11px;
    justify-content: center;
  }

  .underLigne {
    text-decoration-line: underline;
    text-decoration-thickness: 20px;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(255, 108, 84, 0.25);
    text-underline-offset: -3px;
  }

  .underLigneEco {
    text-decoration-line: underline;
    text-decoration-thickness: 16px;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(0, 213, 167, 0.25);
    text-underline-offset: -8px;
  }

  .underLigneTable {
    text-decoration-line: underline;
    text-decoration-thickness: 10px;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(255, 108, 84, 0.25);
    text-underline-offset: -3px;
  }

  .underLigneTableBlack {
    text-decoration-line: underline;
    text-decoration-thickness: 10px;
    text-decoration-skip-ink: none;
    text-decoration-color: rgba(95, 95, 95, 0.25);
    text-underline-offset: -3px;
  }

  .texteUnderTable{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 46px;
    padding-left: 5px;
  }

  a {
    text-decoration: none;
  }

  .input-icon {
    position: relative;
  }

  .input-icon > i {
    position: absolute;
    display: block;
    transform: translate(360px, -50%);
    top: 50%;
    pointer-events: none;
    width: 25px;
    text-align: center;
    font-style: normal;
  }

  .input-icon > input {
    padding-left: 10px;
    padding-right: 25px;
  }

  .radioGap {
    gap: 9px;
  }

  .titreNoMargin {
    margin: 0;
  }

  .inputRadio {
    margin-top: 4px;
  }

  .texteInputLast {
    transform: translate(242px, -180%) !important;
}

.flecheDroiteGraph {
    transform: translate3d(50px, 30px, 10px);
}

.flecheGaucheGraph{
    transform: translate3d(-30px, 30px, 10px);
}

.texteGraph {
    background-image: url("../img/texte_graph.svg");
    transform: translate3d(10px, 40px, 10px);
    height: 65px;
    background-position: center right;
    background-repeat: no-repeat;
}

.texteGraphGauche {
    transform: translate3d(-10px, 40px, 10px);
    background-position: center left;
}

.divFlecheGaucheGraph {
    display: none;
    transform: translate3d(0px, 0px, 10px);
}

.divFlecheDroiteGraph {
    display: block;
    height: 44px;
}

.divMarginBot {
    margin-bottom: -25px;
}

.texteMarginNeg {
    margin-top: -35px;
}