/*** GENERIQUE SUR TOUTE LA FEUILLE ***/
* input {
    text-align: center;
    border-radius: 5px;
    background-color: white;
    color: black;
    border: none;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8);
    font-size: 15px;
}

* select {
    text-align: center;
    border-radius: 5px;
    background-color: white;

    color: black;
    border: none;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8);
    font-size: 15px;

}

* label {
    line-height: 1.5;
}

input:disabled {
    opacity: 1;
    /* Supprime l'opacité réduite */
    cursor: not-allowed;
    /* Changement du curseur pour indiquer que le champ est désactivé */

}

/***** Styles pour les sliders -> CESU_QM*****/


/*** FIN - GENERIQUE SUR TOUTE LA FEUILLE ***/

/**NAV: button sauver mes donneés** -- spécifique à cette page**/

#SaveMenu:hover {
    background-color: var(--fondgris);
}

#saveAllNav {
    height: 60px;
    color: var(--fondgris);
    background-color: var(--bruntexte);
    border-radius: 5px;
    border: 2px solid var(--fondgris);
    cursor: pointer;
    width: 100%;
}

#saveAllNav:hover {

    background-color: var(--bruntexteDark);
}

#saveHoverNav {
    display: none;
    position: fixed;
    height: 300px;
    width: 500px;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--fondgris);
    background-color: var(--bruntexteDark);
    border: 1px solid var(--bruntexte);
    padding: 20px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    text-align: center;
    align-content: center;
    font-size: 2em;

}

#saveAllNav:hover+#saveHoverNav {
    display: block;

}


/*** INTRO ***/
h1 {
    text-align: center;
    font-size: 26px;
    color: var(--bruntexte);
    padding-top: 30px;
}

#textIntroSimDet {


    border-radius: 0px 0px 0px 0px;
    margin: auto;
    font-size: larger;
    text-align: justify;
    padding: 10px;
    margin-bottom: 50px;
    color: black;

    letter-spacing: 0.1em;


}

#textIntroSimDet {
    background-image: url(/images/architecture_incurvee.jpg);
    background-size: cover;
    width: 90%;
    max-width: 1200px;

}

#blocTexteIntro {
    width: 80%;
    margin: auto;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: black;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px;

}



/*** FIN INTRO ***/

#fleche1 {
    width: 100%;
    color: var(--bruntexte);
    font-size: 10em;
    text-align: center;
}

#fleche1 p {
    margin: 20px;
}

/* BUTTON NEXT  -  seulement pour écrans étroits*/
.buttonNext {
    display: block;
    width: auto;
    margin: 0 auto;
    color: var(--fondgris);
    border: 1px solid var(--fondgris);
    border-radius: 5px;
    background-color: var(--bruntexte);
    cursor: pointer;
    font-weight: bold;
    height: 50px;
    text-align: center;

}

.buttonNext:hover {
    font-weight: bolder;
    background-color: var(--bruntexteDark);

}

/* FIN - BUTTON NEXT  -  seulement pour écrans étroits*/

.separateur {
    height: 2px;
    border: 1px solid var(--bruntexte);
    background-color: var(--bruntexte);
    width: 200px;
    margin: auto;
    margin-bottom: 20px;
}


/*** BLOC 1_2 ***/
#bloc1_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/** BLOC 1 ***/

#structureEnfants {
    box-sizing: border-box;
    background-color: var(--fondblocsgris);
    width: 564px;
    border-radius: 0px 0px 0px 0px;
    margin-right: 10px;
    padding: 15px;
    border: 2px solid white;
    height: 500px;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    font-weight: bold;

}

#nrEnfantsSimul {
    width: 80px;
    align-self: center;
}

#buttonsNrEnfSimul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    height: 25px;
}

#buttonsNrEnfSimul button {
    width: 25%;
    border-radius: 5px;
    background-color: white;
    border: 1px solid, black;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);
    color: var(--champGrise);
    cursor: pointer;
    height: 30px;
}

#buttonsNrEnfSimul button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}


#buttonsNrEnfSimul button.active {
    background-color: var(--texte);
    border: 2px solid, var(--texte);
    color: var(--fondgris);
    font-weight: bolder;
    font-size: larger;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);

}


/* premoms enfants et détachement */
#prenomEnfants,
#enfDetaches {
    display: grid;
    grid-template-columns: 33% 34% 33%;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 5px;

}

#nomEnfantLabel,
#enfDetQuestion {
    grid-column: 1/4;
    padding-top: 30px;
    padding-bottom: 10px;

}

#prenomEnfants p {
    margin-bottom: 0px;

}

#nomEnfant1,
#nomEnfant2,
#nomEnfant3 {
    height: 25px;

    max-width: -moz-fit-content;
    max-width: fit-content;
    margin: auto;

}

#prenomEnfants input {
    color: black;

    height: 30px;

}

/* buttons renfants rattachée oui- non */

#buttonsEnf1rattache button,
#buttonsEnf2rattache button,
#buttonsEnf3rattache button {
    margin: 10px;
    border-radius: 5px;
    color: gray;
    box-shadow: 2px 2px 5px 0px a(0, 0, 0, 0.8);
    background-color: white;
    width: 70px;
    height: 30px;
    cursor: pointer;




}

#buttonsEnf1rattache button:hover,
#buttonsEnf2rattache button:hover,
#buttonsEnf3rattache button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}

#buttonsEnf1rattache button.active,
#buttonsEnf2rattache button.active,
#buttonsEnf3rattache button.active {

    border: 2px solid, var(--texte);

    font-size: larger;
    box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.8);

}



.enf1,
.enf2,
.enf3 {
    box-sizing: border-box;
    width: 100%;

}

#formEnfRatAfter {
    width: 534px;
    padding-top: 50px;
}

#nrEnfRattAfter {
    width: 25%;
    margin: auto;
}

#buttonsnrEnfRattAfter {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    height: 25px;
}

#buttonsnrEnfRattAfter button {
    width: 25%;
    border-radius: 5px;
    background-color: white;
    border: 1px solid, black;
    box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.8);
    color: gray;
    cursor: pointer;
    height: 30px;
}

#buttonsnrEnfRattAfter button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}


#buttonsnrEnfRattAfter button.active {
    background-color: var(--bruntexte);
    border: 2px solid, var(--bruntexte);
    color: var(--fondgris);
    font-weight: bolder;
    font-size: larger;
    box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.8);

}

/** FIN BLOC 1 ***/

/**BLOC 2**/

#bloc2 {
    position: relative
}

#infoGenerales {
    box-sizing: border-box;
    width: 564px;
    border-radius: 0px 0px 0px 0px;
    padding: 15px;
    border: 1px solid white;
    height: 500px;
    background-color: var(--fondblocsgris);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.8);
    text-align: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
}


.infoGRow {
    display: grid;
    padding-bottom: 35px;
}

#anneeSim,
#premAneeCesuB {
    width: 30%;
    margin: auto;
    margin-top: 10px;
}

#buttonsPremAneeCesuB {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
    height: 25px;
}

#buttonsPremAneeCesuB button {
    width: 25%;
    border-radius: 5px;
    background-color: white;
    border: 1px solid, black;
    box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.8);
    color: gray;
    cursor: pointer;
}

#buttonsPremAneeCesuB button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}


#buttonsPremAneeCesuB button.active {
    background-color: var(--bruntexte);
    border: 2px solid, var(--bruntexte);
    color: var(--fondgris);
    font-weight: bolder;
    font-size: larger;
    box-shadow: 2px 2px 2px 0px rgb(0, 0, 0, 0.8);
}

/* autres montants CESU */

#cesuAutre,
#nichesFiscales {
    width: 30%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;
    height: 25px;

}

#CesuRange,
#nichesFiscalesRange {

    width: 80%;
    margin: auto;
    margin-bottom: 20px;


}

.ajoutTextebloc2 {
    font-size: smaller;
}



/** FIN -BLOC 2**/

/*** FIN BLOC 1_2 ***/

/*** BLOC 3 (ResultatBloc3 + graphiques)***/
#block3 {

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/** RESULTAT BLOC 3 (bloc calculs) **/
#bloc3_1,
#bloc3_2,
#commentRecapBloc {
    box-sizing: border-box;
    border: 1px solid white;
    border-radius: 0px 0px 0px 0px;
    padding: 20px;
    width: 564px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.8);
    background-color: var(--fondblocsgris);

    margin-bottom: 30px;

}

#resultatsBloc3 input {
    background-color: transparent;

}



#IntroBloc3 {
    margin-top: 10px;
    padding: 5px;
    box-shadow: 2px 2px 10px 0px rgb(0, 0, 0, 0.8);

    font-style: italic;
    text-align: justify;
    letter-spacing: 0.1em;
    font-size: smaller;

}

#optiparents,
#optiSalH {
    color: var(--bruntexte);
    font-weight: bolder;
}

/* formatting des barres de titre du bloc 3*/
#allocOriginLabel,
#salEnfantLabel,
#gainSuppLabel,
#txHoraireLabel,
#heuresSemaineLabel,
#trimValidLabel,
#trimSuppLabel {
    grid-column: 1 / 6;
    height: moz-fit-content;
    height: fit-content;

    text-align: center;
    background-color: transparent;
    margin: 10px auto 5px auto;
    text-transform: uppercase;
    font-weight: bolder;
    width: 100%;



}

#gainSuppLabel,
#trimValidLabel {
    text-decoration: none;
}

/* nom et en-têtes*/
#enteteNoms {
    display: grid;
    grid-template-columns: 100%;
    margin: auto;
}

#enteteNoms input {

    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0px;
    border-bottom: 15px solid var(--bruntexte) !important;
    text-align: center;
    margin: 5px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: none;
    color: var(--bruntexte);
    height: 20px;
    border: 2px solid var(--bruntexte);




}

#enteteNoms label {
    padding: 0px !important;

}



#enteteEnfLabel {
    grid-column: 1 / 6;

}

/* alloc originale*/
#allocOrigin {
    display: grid;

    grid-template-columns: 23% 8% 69%;
    padding-bottom: 10px;
    margin: auto;

}

#allocOrigin input {
    background-color: white;
    cursor: pointer;
    width: 90%;
    margin: auto;
    height: 30px;


}

#allocOrigin1,
#allocOrigin2,
#allocOrigin3 {
    margin: 0px 5px;


}

#allocOriginTotal {
    font-weight: bolder;
    box-shadow: none;
    color: var(--fondgris);
    border: 2px solid var(--texte);
    background-color: var(--bruntexte) !important;
    cursor: initial !important;
}

/*sliders*/
#rangeAllocOrigin {
    align-content: center;
}

#rangeAllocOrigin input {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 30px;
}

/* FIN sliders*/

#introBloc3aCacher {
    font-size: 1.5em;
    font-weight: bold;
    text-align: justify;
}

#salairesInput {
    /* utilisé pour remplacer le HTML si l'écran est petit par une liste */
    display: grid;
    grid-template-columns: 34% 33% 33%;

}

#salairesInput input:hover {
    background-color: var(--fondgrisclair);
    color: var(--texte);
}



/*salaire à reçevoir par les enfants */

#salEnfants {
    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;
    padding-bottom: 10px;
    margin: auto;

}

#salEnfant1,
#salEnfant2,
#salEnfant3 {
    margin: 0px 5px;
    border: 2px solid var(--bruntexte);
    border-radius: 5px;
    color: var(--bruntexte);
    font-weight: bold;
    box-shadow: none;
}


#salEnfantTotal {

    font-weight: bolder;
    border: 2px solid var(--texte);
    color: var(--fondgris);
    background-color: var(--bruntexte) !important;
    box-shadow: none;
}

/* bloc Revenu spuu + trimestres validés*/
#blocResultats {
    padding: 5px;

    border-radius: 5px;
    margin: auto;


    /*background-color:  var(--bruntexte, 0.2);*/

}



/*gain supplémentaire */
#gainSupp {
    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;
    padding: 2px;
    font-weight: bold;
    margin: auto;


}

#gainSupp label {
    align-items: center;

    font-weight: bolder;
    border-radius: 5px;
    min-height: 30px;
    align-content: center;
    width: 100%;
    margin-top: 0px;

}

#gainSupp.blocSim {
    align-content: center;
}

#gainSupp1 input,
#gainSupp2 input,
#gainSupp3 input {
    border: 1px solid black !important;

}

#gainSupp1,
#gainSupp2,
#gainSupp3 {
    margin: 0px 5px;
    border-color: transparent;
    font-weight: bold;
    box-shadow: none;

}


#gainSuppTotal {

    font-weight: bolder;
    border: 2px solid var(--texte);
    color: var(--fondgris);
    box-shadow: none;

}

/* + menu pour le revenu supplémentaire */
#resultats {

    box-sizing: border-box;


    margin-top: 10px;

}



#brutChargeTotal,
#creditImpot,
#coutReel {
    border: none;
    text-align: end;
}

#labelCoutReelMontant {
    font-size: 12px;
}

.plusbloc3 {
    display: grid;
    grid-template-columns: 80% 20%;

}

.plusbloc3 input {
    border: none;
    box-shadow: none;

}

/* fin + menu*/

/* trimestres validés*/
#trimValides {
    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;
    margin: auto;
    padding-bottom: 10px;


}


#trimValides label {
    padding: 5px 0px;
    font-weight: bolder;
    font-size: 15px;

    border-radius: 5px;
    width: 100%;

}



#trimValides input {


    padding: none;
    margin: auto;

    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: none;

}

#trimValidesTotal {


    font-weight: bolder;
    margin: none;
    padding: none;
    border: 2px solid var(--texte);


}

#separateurbloc3 {
    margin-top: 10px;
    height: 1px;
    background-color: var(--texte);
}


/* salaire pour trimestre supérieur*/
#salPourTrimSupp {

    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;

    margin-top: 20px;
    padding: 5px;

    border-radius: 5px;
    margin: auto;

}

#salPourTrimSupp input {
    box-shadow: none;
    color: var(--texte);
    font-style: italic;
    font-size: smaller;
}

#trimSuppLabel {
    margin-top: 10px;

    margin-bottom: 0px;
    color: var(--texte);
    font-style: italic;
    font-size: smaller;
    text-transform: lowercase;
    font-weight: 100;
    width: 100%;
    text-decoration: none;
    padding-top: 0px;

}

/* taux horaire*/
#txHoraire {

    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;

}

/*pour cacher le taux horaire total qui a pas de sens*/
#txHoraireHidden {
    border: none;
    box-shadow: none;

}

#txHoraire input {
    width: 75%;
    justify-self: center;
    cursor: pointer;
    margin: auto;
    background-color: var(--fondgris);
}

#txHoraire input:hover {
    background-color: var(--fondgrisclair);
    color: var(--texte);
}

#txHoraire option {
    border: none;
    box-shadow: none;
}

#txHoraireHidden {
    background-color: transparent !important;
}

.resItalic {
    font-size: 12px;
    font-style: italic;
}

/*sliders*/
#rangeTxHoraire {
    align-content: center;
    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;
    padding-bottom: 10px;
}

#rangeTxHoraire1 {
    grid-column: 3;
}

#rangeTxHoraire2 {
    grid-column: 4;
}

#rangeTxHoraire3 {
    grid-column: 5;
}

#rangeTxHoraire input {
    width: 90%;
    margin-left: 5%;
    margin-bottom: 30px;
}

/* FIN sliders*/

/* heures par semaine*/
#heuresParSemaine {

    display: grid;
    grid-template-columns: 23% 8% 23% 23% 23%;

    margin-top: 20px;
    padding: 5px;

    border-radius: 5px;
    margin: auto;

}

#heuresParSemaine input {
    box-shadow: none;
    color: var(--texte);
    font-style: italic;
    font-size: smaller;
}

#heuresSemaineLabel {

    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--texte);
    font-style: italic;
    font-size: smaller;
    text-transform: lowercase;
    font-weight: 100;
    width: 100%;
    text-decoration: none;
}

#heuresSemaineTotal {
    color: transparent !important;
}



/* bloc recap*/
#commentRecapBloc {
    margin-top: 20px;
    padding: 5px;
    text-align: center;
    color: var(--texte);
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
}

#commentRecapBloc u {
    color: var(--bruntexte);
}

/** FIN RESULTAT BLOC 3 (bloc calculs) **/

/**BLOCS GRAPHIQUES**/

/* button Graphs, visible que sur pertits écrans pour développer le bloc Graphs */

#graphButton {
    display: none;
}

#graphButtontext1 {
    margin-top: 10px;
    margin-bottom: 5px;
}

#graphButtontext2 {
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
    text-decoration: underline;
    font-size: smaller;
}



#blocGraphs {
    box-sizing: border-box;
    width: 564px;
    display: flex;
    flex-direction: column;

    border: 2px dashed var(--bruntexte);
    border-radius: 0px 0px 0px 0px;
    min-height: 351px;
    background-color: var(--fondblocsgris);
    align-items: center;
    height: fit-content;
}

#blocG {
    margin-left: 5px;
    width: 350px;
    padding-bottom: 70px;
    padding-top: 20px;
}

#blocF {
    margin-left: 5px;
    width: 350px;
    padding-bottom: 50px;
    padding-top: 20px;
}

/* titres*/
#titreBlocF,
#titreBlocG {
    text-align: center;
    font-size: 18px;
    margin: 0px 3px;
    color: var(--bruntexte);
}

#sousTitreBlocF,
#sousTitreBlocG {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    margin: 0px;
    padding-bottom: 30px;
    color: var(--bruntexte);

}


/* graphique F plafonds*/

#graphF {
    position: relative;
    background-color: var(--fondgrisclair);

    height: 350px;
    display: none;
    border: 2px solid var(--bruntexte);

}

#graphF * {
    color: black;
    text-align: center;
    align-items: center;
    font-size: 10px;
}

.valeurGraphF {
    font-size: 10px;
}


#NicheFiscDispoGraphF {
    position: absolute;
    left: 10px;
    height: 100px;
    width: 75px;
    bottom: 0px;
    background-color: azure;
    border: 1px solid black;

}

#NicheFiscUsedGraphF {
    position: absolute;
    left: -1px;
    height: 100px;
    width: 75px;
    bottom: 2px;
    background-color: lightgray;
    border: 1px dashed black;
    border-bottom: none;

}

#PNicheFiscUsedGraphF {
    position: absolute;
}

#CesuDispoF {
    position: absolute;
    left: 85px;
    height: 100px;
    width: 75px;
    bottom: 0px;
    background-color: azure;
    border: 1px solid black;


}

#CesuUsedF {
    position: absolute;
    left: -1px;
    height: 100px;
    width: 75px;
    bottom: 0px;
    background-color: lightgray;
    border: 1px dashed black;
    border-bottom: none;
}

#PCesuUsedF {
    position: absolute;

}

#MinDispoGrapfF {
    position: absolute;
    left: 85px;
    height: 100px;
    width: 75px;
    bottom: 0px;
    background-color: var(--lightgreen);
    z-index: 5;
}



#minCesuLink {
    position: absolute;
    left: -180px;
    height: 120px;
    width: 275px;
    border-top-style: dashed;
    border-top-width: 1px;
    border-top-color: black;
    z-index: 20;

}

#simulLink {
    position: absolute;
    left: -180px;
    height: 120px;
    width: 275px;
    border-top-style: dashed;
    border-top-width: 1px;
    border-top-color: black;
}

#simulLinkText {
    position: absolute;
    left: 275px;
    top: -41px;
    height: 50px;
    width: 50px;
    color: black;
    border: 1px;
    border-color: var(--lightgreen);
    background-color: var(--lightgreen);
    border-style: solid;
    border-radius: 50%;
    padding: 5px;
}

#extraSimGraphF {
    position: absolute;
    left: 180px;
    height: 100px;
    width: 75px;
    bottom: 0px;
    background-color: bisque;
    z-index: 0;
}


/* graphique G waterfall*/

#graphG {
    position: relative;
    background-color: var(--fondgrisclair);
    height: 350px;
    display: none;
    border: 2px solid var(--bruntexte);

}


#graphG * {
    color: black;
    text-align: center;
    align-items: center;
    font-size: 10px;
}

.valeurGraphG {
    font-size: 10px;
}


#salaireNetG {
    position: absolute;
    left: 5px;

    width: 75px;
    bottom: 0px;
    background-color: rgb(51, 245, 245);

}

#salaireNetGLink {
    position: absolute;
    height: 100px;
    width: 350px;
    left: 0px;
    border-top-style: dotted;
    border-top-width: 1px;
    border-top-color: black;



}

#chargesSPlafondG {
    position: absolute;
    left: 85px;
    height: 120px;
    width: 75px;
    background-color: #dddcdc;
    z-index: 1;

}

#chargesSPlafondGLink {
    position: absolute;
    left: 0px;
    height: 120px;
    width: 75px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: black;
    z-index: 10;
}

#chargesOverPlafG {
    position: absolute;
    left: 0px;
    height: 20px;
    width: 75px;
    bottom: 0px;
    background-color: bisque;

}

#chargesOverPlafGLink {
    position: absolute;
    left: 0px;
    height: 120px;
    width: 160px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: black;
    z-index: 10;
}

#creditImpotG {
    position: absolute;
    left: 85px;
    height: 140px;
    width: 75px;
    background-color: var(--lightgreen);
}

#creditImpotGLink {
    position: absolute;
    left: 0px;
    height: 140px;
    width: 160px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: black;
    z-index: 10;
}



#coutParentsG {
    position: absolute;
    left: 85px;
    height: 170px;
    width: 75px;
    background-color: var(--bruntexte);

}

/** FIN- BLOCS GRAPHIQUES**/


/*** FIN - BLOC 3 (ResultatBloc3 + graphiques)***/

/***   BLOC  4_5  ***/
#bloc4et5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;



}

#titreEtBloc4 {
    margin-bottom: 50px;
}


/****BLOC 4 IMPACT FISCAL DETACHEMENT ****/

#infoEnfDetach {
    box-sizing: border-box;
    font-size: larger;
    max-width: 564px;
    width: 100%;
    text-align: justify;
    margin-bottom: 20px;
    min-height: 130px;
}

#bloc4_0 {

    box-sizing: border-box;
    width: 564px;
    background-color: #ecf2ff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid white;
    padding: 20px;
    background-color: var(--fondblocsgris);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.8);
    text-align: justify;
    font-size: larger;


}


#parentsFF {
    display: grid;
    grid-template-columns: 100%;
    padding-bottom: 10px;
    align-items: center;
}

#sitFiscParentsLabel {
    margin: auto;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

#buttonsSitFiscParents {
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 5px;
    align-self: center;
    margin-bottom: 20px;

}

#buttonsSitFiscParents button {

    border-radius: 5px;
    background-color: white;
    border: 1px solid, black;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);
    color: gray;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    width: 90%;
    margin: auto;
    margin-top: 5px;
    min-height: 60px;
    height: fit-content;

}

#buttonsSitFiscParents button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}


#buttonsSitFiscParents button.active {
    background-color: var(--bruntexte);
    border: 2px solid, var(--bruntexte);
    color: var(--fondgris);
    font-weight: bolder;
    font-size: larger;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);

}

#txMarginal {

    display: grid;
    grid-template-columns: 100%;
    padding-bottom: 10px;
    align-items: center;
    width: 100%;

}

#txMarginalLabel {
    margin: auto;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

#buttonsTxMarginal {
    display: flex;
    justify-content: space-between;

}

#buttonsTxMarginal button {

    border-radius: 5px;
    background-color: white;
    border: 1px solid, black;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);
    color: gray;
    cursor: pointer;
    margin-left: 5px;
    margin-right: 5px;
    width: 15vw;
    margin-top: 5px;
    font-size: smaller;
    height: 30px;
}

#buttonsTxMarginal button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}


#buttonsTxMarginal button.active {
    background-color: var(--bruntexte);
    border: 2px solid, var(--bruntexte);
    color: var(--fondgris);
    font-weight: bolder;
    font-size: larger;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);

}

#txImpotsMarg {
    text-align: center;
}

/*début bloc 4_1*/


#bloc4_1 {
    box-sizing: border-box;
    width: 564px;
    background-color: #ecf2ff;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid white;
    padding: 20px;
    background-color: var(--fondblocsgris);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.8);
    text-align: justify;
    font-size: larger;
}

/*entête noms*/
#enteteNomsB4_1 {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    column-gap: 0px;
    padding-bottom: 0px;
    gap: 5px;
    margin-bottom: 0px;
    margin-top: 30px;

}

#enteteNomsLabel,
#enteteB4_1EnfTotal {
    grid-column: 1/4;
}

#enteteNomsB4_1 input {

    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0px;
    border-bottom: 15px solid var(--bruntexte) !important;
    text-align: center;
    margin: 5px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: none;
    color: var(--bruntexte);
    height: 20px;
    border: 2px solid var(--bruntexte);
    background-color: transparent !important;

}

/* mention détaché ou pas en dessosu des noms*/
#complementEnteteNomsB4_1 {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    column-gap: 0px;
    padding-bottom: 10px;
    gap: 5px;
    margin-bottom: 20px;
    margin-top: 0px;


}

#complementEnteteNomsLabel,
#complementEnteteB4_1EnfTotal {
    grid-column: 1/4;
}

#complementEnteteNomsB4_1 input {
    background-color: transparent;
    box-shadow: none;
    color: var(--champGrise);
}


/* type études*/
#typeEtudes {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    ;
    column-gap: 0px;
    padding-bottom: 10px;
    gap: 5px;
}

#Etudes1Label {
    grid-column: 1/4;
    margin: auto;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

#EtudesDiv1,
#EtudesDiv2,
#EtudesDiv3 {
    margin-bottom: 10px;
    grid-row: 2;

}

/*formating buttons etudes par class*/
.buttonsEtudes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.buttonsEtudes button {

    border-radius: 5px;
    background-color: white;
    border: 1px solid, black;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);
    color: gray;
    cursor: pointer;
    margin: auto;
    width: 85%;
    max-width: 160px;
    height: 40px;
    margin-top: 5px;
    font-size: smaller;
    padding-inline: 1px;
}

.buttonsEtudes button:hover {
    background-color: var(--fondgrisclair);
    color: black;
}


.buttonsEtudes button.active {
    background-color: var(--bruntexte);
    border: 2px solid, var(--bruntexte);
    color: var(--fondgris);
    font-weight: bolder;

    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);

}

/*pension justifiable*/
#InputPensJ {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    ;
    column-gap: 0px;
    padding-bottom: 10px;
    gap: 5px;
}

#InputPensJLabel {
    grid-column: 1/4;
    margin: auto;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

#ajoutTextebloc4 {
    font-size: x-small;
    font-weight: normal;
    font-style: italic;
}

#input-container1,
#input-container2,
#input-container3 {
    grid-row: 2;


}

#InputPensJ1,
#InputPensJ2,
#InputPensJ3 {
    width: 85%;
    max-width: 160px;
    margin: auto;
    cursor: pointer;
}

#InputPensJ input:hover {
    background-color: var(--fondgrisclair);
    color: var(--texte);
}

/*sliders*/
#rangePensJ {
    align-content: center;
}

#rangePensJ input {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 30px;
}

/* FIN sliders*/

#resultatImpParents {
    text-align: center;
    padding-top: 20px;
    font-weight: bolder;
    font-size: larger;
}

#titresValFisc {
    border: none;

    font-weight: bold;

    align-content: center;
    padding-bottom: 5px;
    padding-top: 10px;
    text-decoration: underline;

}



/* menu + */

.titre {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    ;
    column-gap: 0px;
    padding-bottom: 0px;
    gap: 0px;
    padding-top: 0px;
    /*corrigé en js simdet layout_QM pour doner de la hauteur (et garder compact qd + pas activé)*/
    box-shadow: none;
    grid-template-rows: 0px 20px;
}

.label {
    grid-column: 1/4;
    padding-top: 0px;
    /*corrigé en js simdet layout_QM pour doner de la hauteur (et garder compact qd + pas activé)*/

    font-style: italic;
    font-size: small;

    text-align: left;


}

.donnee1,
.donnee2,
.donnee3 {
    grid-row: 2;
    font-size: small;
    box-shadow: none;
    background-color: transparent;
    width: 85%;
    max-width: 160px;
    margin: auto;


}

.total {
    display: none;
    box-shadow: none;
}

#ValPensJLabel {
    padding-bottom: 0px;
}

/* total impôts */
#ValFiscDet {
    display: grid;
    grid-template-columns: 32% 33% 32%;
    ;
    column-gap: 0px;
    padding-bottom: 10px;
    gap: 5px;
    align-content: center;
    margin-top: 10px;



}

#ValFiscDetLabel {
    grid-column: 1/4;
    grid-row: 1;
    margin: auto;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
}

#ValFiscDet1,
#ValFiscDet2,
#ValFiscDet3 {
    grid-row: 2;
}

#ValFiscDet input {
    max-width: 160px;
    width: 85%;
    margin: auto;
    box-shadow: none;
}



#ValFiscDetTotal {
    grid-column: 2;
    grid-row: 3;
    border: none;
    font-weight: bold;
    background-color: transparent;
    color: transparent;
    height: 0px;

}






#ValFiscDet1,
#ValFiscDet2,
#ValFiscDet3 {

    border: 1px solid black;
    align-items: center;
    z-index: 1002;
    /* pour contrer le formatting des cardre rouges des champs qui ont zero comme valeur*/
}


#titresValFiscLabel,
#ValPensFLabel,
#ValPensJLabel,
#ValSubvEtudesLabel,
#ValDetachLabel,
#ValSalEnfLabel {
    text-align: center;

}

#titresValFiscLabel {
    font-style: normal;
}




#commentImpotsParents {
    margin-top: 0px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: small;
    text-align: center;
    align-content: center;
    margin-bottom: 20px;
    height: 30px;
    border: 2px solid black;
    padding: 5px;
    color: black;
}

#pEndbloc4 {
    font-size: 10px;
    font-style: italic;
}

#bloc4BackgrImg {
    height: 1010px;
    background-image: url(/images/cafe.png);
    background-position: right;
    background-size: cover;
}







/* CSS pour cacher les formatting et impressions de la colonne si l'enfant est déjà détaché - lien avec JS simdet pour les classe showBloc4 et hideBlock4 */

.showBloc4enf1 {
    color: transparent;
    box-shadow: none;
}

/**** FIN - BLOC 4 IMPACT FISCAL PARENTS ****/

/*** BLOC 5 IMPACT FISCAL ENFANTS***/

#infoEnfImpots {
    box-sizing: border-box;
    font-size: larger;
    max-width: 564px;
    width: 100%;
    text-align: justify;
    margin-bottom: 0px;
    min-height: 130px;
}

#block5 {
    box-sizing: border-box;
    background-color: var(--fondblocsgris);
    width: 564px;
    border-radius: 0px 0px 0px 0px;
    margin-right: 10px;
    margin-bottom: 20px;
    padding: 15px;

    border: 1px solid white;
    height: fit-content;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    font-weight: bold;

    min-height: fit-content;
    align-content: center;
}

.bloc5_1 {
    display: grid;
    grid-template-columns: 28% 0% 22% 22% 22%;
    gap: 5px;

    font-size: 12px;
}



.bloc5_1 label {

    font-size: 12px;
    border: none;
    background-color: transparent;
    box-shadow: none;
    font-weight: lighter;
    font-style: italic;
    font-size: 0.8em;
    margin-bottom: 20px;
    align-content: center;

}

.bloc5_1 input {

    font-size: 12px;
    border: none;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 20px;
    align-content: center;
    color: var(--texte);

}



/* entetes */
#enteteB5_1Enf1,
#enteteB5_1Enf2,
#enteteB5_1Enf3 {

    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0px;
    border-bottom: 15px solid var(--bruntexte) !important;
    text-align: center;
    margin: 5px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: none;
    color: var(--bruntexte);
    height: 20px;
    border: 2px solid var(--bruntexte);
}

#revenusText {
    display: grid;
    grid-template-columns: 28% 0% 22% 22% 22%;
}

#revenusText p {
    margin-bottom: 30px;
    margin-top: 20px;
}

/* bloc div5Top -> bloc des 3 lignes des montants de revenus*/
#bloc5Top {
    border: 1px solid var(--bruntexte);
    width: 100%;



}

/* formatting input autre salaires */

#InputASalaire1,
#InputASalaire2,
#InputASalaire3 {
    border: none;
    background-color: white;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);
    height: 20px;
    cursor: pointer;
    font-weight: bold;
    color: black;
}

#InputASalaireLabel {
    font-weight: bold;

}

#InputASalaires input:hover {
    background-color: var(--fondgrisclair);
    color: var(--texte);
}

/*sliders*/
#rangeInputASalaire {
    align-content: center;
}

#rangeInputASalaire input {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 30px;
}

/* FIN sliders*/

#InputSalairesNS1,
#InputSalairesNS2,
#InputSalairesNS3 {
    border: none;
    background-color: white;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.8);
    height: 20px;
    cursor: pointer;
    font-weight: bold;
    color: black;
}

#InputSalairesNSLabel {
    font-weight: bold;

}

#InputSalairesNS input:hover {
    background-color: var(--fondgrisclair);
    color: var(--texte);
}

#labelRevNS {

    text-transform: lowercase;
    font-size: smaller;

}

/*sliders*/
#rangeInputSalairesNS {
    align-content: center;
}

#rangeInputSalairesNS input {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 30px;
}


/* FIN sliders*/

#impLieCesu input,
#impLieCesuLabel {
    font-weight: bold;
}

#plusFiscEnfants {
    margin: auto;
    margin-bottom: 40px;
}

#titresValFiscLabel {
    height: 0px;
    padding: 0px !important;
}

#precisions1 {
    text-align: center;
    font-size: smaller;
    font-style: italic;
    margin-top: 1px;
}

#netImposableEnfLabel,
#hors1ereTrancheLabel,
#impEnfantsLabel,
#impEnfantsHCLabel {
    font-size: 8px;
    margin-bottom: 0px;


}

#netImposableEnf input,
#hors1ereTranche input,
#impEnfants input,
#impEnfantsHC input {

    margin-bottom: 0px;
    padding: 0px;
}

#commentImpotEnfants {
    height: 30px;
    align-content: center;
    border: 1px solid black;
    padding: 5px;
    margin-top: 50px;
    margin-bottom: 30px;
}

#NotesBloc5 {
    width: 30%;
    margin: auto;
}

#pEndbloc5 {
    display: none;
    cursor: pointer;

}

#pEndbloc5 p {
    margin-top: 0px;
    padding-top: 13px;

}

#NotesBloc5:hover+#pEndbloc5 {
    display: block;

}

#pEndbloc5:hover {
    display: block;
}


#commentsBloc5 {
    font-size: 1em;
    text-align: justify;
    text-transform: initial;
    font-weight: 100;
    padding: 5px;
}

/* commentaire fin de bloc 5 */
#NotesBloc5 {
    cursor: pointer;
}



#pEndbloc5 {

    font-size: 1em;
    font-style: italic;
    font-weight: normal;
    text-align: justify;
    text-transform: initial;

}

/*imgae fin bloc 5 si bloc 4 étendu*/
#bloc5BackgrImg {
    height: 0px;
    background-image: url(/images/calculatrice1.png);
    background-position: center;
    background-size: cover;
    margin-bottom: 20px;
}

/*** FIN - BLOC 5 IMPACT FISCAL ENFANTS***/

/*** FIN -  BLOC  4_5  ***/


/*** BLOC 6 RESUME ***/
#hideBlockFinal {
    max-width: 1500px;
    margin: 10px;
    margin: auto;

}

#resumeGlobal {

    max-width: 1500px;
    margin: auto;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: xx-large;

}

#blocFinal {
    background-image: url(/images/architecture_incurvee2.jpg);

    background-size: 100% 100%;
}

#bloc6 {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 10px;
    align-content: center;



}


#blocResumeFinancier,
#blocResumeEnfant,
#commentaireFinal {


    border: 1px solid white;
    border-radius: 0px 0px 0px 0px;
    background-color: rgba(255, 255, 255, 0.5);

    margin: auto;
    margin-bottom: 30px;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.7);
    width: 90vw;
    max-width: 1200px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: black;


}

#economieGlobaleText {
    padding-top: 10px;
    margin: 5px;
}

#economieGlobaleText,
#economieGlobaleValeur {
    text-align: center;
}

#economieGlobaleValeur {
    margin: auto;
    width: 30%;
    max-width: 200px;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    height: 30px;
    align-content: center;
    font-size: xx-large;
}

#valeurs,
#text,
#textsiGP {
    display: grid;
    grid-template-columns: 30% 5% 30% 5% 30%;
    text-align: center;
    align-content: center;
    font-size: 12px;
    width: 90%;
    margin: auto;
}

#cesuValeur,
#ImpParentsValeur,
#ImpEnfantsValeur {
    border: 1px solid black;
    width: 75%;
    max-width: 150px;
    padding: 5px 10px 5px 10px;
    justify-self: center;
    margin-bottom: 5px;
    border-radius: 5px;
    height: 30px;
    align-content: center;
    font-size: large;
}

.plusResumParagraph {
    border: none;
    width: 70px;
    margin-bottom: 5px;
    justify-self: center;
    align-content: center;

}

#text p {
    margin-top: 0px;

}

#blocResumeEnfant input {
    box-shadow: none;
}

#textTrimentetebloc6 {
    align-self: center;
    width: 300px;
    margin: auto;
    text-align: center;
    height: 30px;
    align-content: center;

    padding: 5px
}


.resumeBlocSal {
    display: grid;
    grid-template-columns: 22% 19% 19% 19% 19%;
    text-align: center;

    width: 100%;


}

#resumeSalaire {
    height: 35px;
}

#entete6Noms input {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0px;
    border-bottom: 15px solid var(--bruntexte) !important;
    text-align: center;
    margin: 5px;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: none;
    color: var(--bruntexte);
    height: 20px;
    border: 2px solid var(--bruntexte);
    background-color: transparent;
}



#resumeSalaireTotal,
#resumeHeuresSemaineTotal,
#resumeTrimestresTotal {
    font-weight: bold;
}



#resumeSalaire {
    color: var(--texte);

}

#resumeGain {
    color: var(--fondgris);
    font-weight: bold;
    align-content: center;
}

#resumeTitres {
    color: var(--bruntexte);

}

.formatBlocSal {
    width: 80%;
    margin: auto;
    align-content: center;
    border-radius: 5px;
    height: 30px
}


#resumeHeuresSemaine {
    font-size: 11px;
    font-style: italic;

}

#resumeHeuresSemaine p {
    margin-top: 0px;

}

#resumeTrimestres {
    align-items: center;
    height: 40px;
    padding-bottom: 10px;

}

#resumeTrimestresTotal,
#resumeTrimestres1,
#resumeTrimestres2,
#resumeTrimestres3 {

    width: 25px;
    height: 25px;
    margin: auto;
    border-radius: 50%;
    align-content: center;
    font-size: 18px;
}



/*** BLOC  conclusions***/
#commentaireFinal {

    font-size: 1.3em;

    margin: auto;
}

#commentaireFinal p {
    padding: 10px 20px;
}

#conclusions {
    font-size: x-large;
    text-align: center;
    text-decoration-line: underline;
    font-weight: bold;
    color: var(--bruntexte);
}

#combas2 {
    font-size: 0.8em;
    font-style: italic;
}

h2 {
    text-align: center;
    color: var(--bruntexte);
}

#prochEtapes {
    font-size: 26px;
}

/*** FIN BLOC 6 RESUME***/
/* texte de fin*/
#texteFinSimDEt {
    font-size: 20px;
    text-align: justify;
    padding: 20PX;

}



.buttonSimDet {
    color: var(--fondgris);
    background-color: var(--bruntexte);
    border: 1px solid var(--fondblocsgris);
    border-radius: 5px;
    padding: 5px;
    font-size: larger;
    cursor: pointer;
    height: 50px;
    width: 70%;
    max-width: 500px;
    text-align: center;
    margin: auto;
    align-content: center;
}

#inscriptionG {
    color: var(--fondgris);
}

.buttonSimDet:hover {
    background-color: var(--bruntexteDark);
    font-weight: bolder;
}



/*** FIN BLOC CONCLUSIONS*/

/* button enregistrement hors footer  (petits écrans)*/


#saveAllSmallScreens {
    display: none;
    position: fixed;
    bottom: -20px;
    right: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    text-transform: uppercase;
    font-size: 0.8em;
    width: auto;
    margin: auto;
    color: var(--fondgris);
    border: 1px solid var(--fondgris);
    border-radius: 5px;
    background-color: var(--bruntexte);
    cursor: pointer;
    font-weight: bold;
    text-align: center;


}


#saveAllSmallScreens:hover {
    font-weight: bolder;
    background-color: var(--bruntexteDark);

}

/* button enregistrement inclu dans la footer (écrans larges)*/

#saveAllDiv {
    position: sticky;
    bottom: 2px;
    text-align: center;
}

#saveAllFooter {
    height: 30px;
    text-transform: uppercase;
    font-size: 1.1em;
    width: auto;
    margin: auto;
    color: var(--fondgris);
    border: 1px solid var(--fondgris);
    border-radius: 5px;
    background-color: var(--bruntexte);
    cursor: pointer;
    opacity: 0.75;


}


#saveAllFooter:hover {
    font-weight: bolder;
    background-color: var(--bruntexteDark);

}

#saveHover {
    display: none;
    position: fixed;
    height: 300px;
    width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--fondgris);
    background-color: var(--bruntexteDark);
    border: 1px solid var(--bruntexte);
    padding: 20px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.8);
    border-radius: 5px;
    text-align: justify;
    align-content: center;
    font-size: 2em;

}

#saveAllFooter:hover+#saveHover {
    display: block;

}





/** message d'alerte confirmation enregistrement */

.invisible {
    display: none;
}

#customAlert {
    position: fixed;
    height: 100px;
    width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    background-color: var(--fondblocsgris);
    border: 5px solid var(--bruntexte);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-content: center;
    font-size: 2em;
    z-index: 10000;
}

#customAlert button {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: var(--bruntexte);
    color: var(--fondgris);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#customAlert button:hover {
    background-color: var(--bruntexteDark);
    font-weight: bold;
}



.champ-non-rempli {
    border: 1px solid red;
    z-index: 1000
}



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

    #bloc4BackgrImg,
    #bloc5BackgrImg {
        display: none !important;
    }
}


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





    /*pour la fonction afficher les textes d'exemple, voir JS (hover ne fonctionne qu'avec le frere adjacent direct*/

    /*formatting dropdown buttons types de taches et types de dépenses*/

    /*formatting général */

    body {
        font-size: 3vw;
        padding: 10px;
    }

    * input {
        font-size: 12px;
    }

    /*intro*/
    .hideIntro {
        display: none;
    }

    /*bloc1*/
    #bloc1 {
        width: 100%;
    }

    #structureEnfants {
        width: 100%;
        height: fit-content;
    }


    #formEnfRatAfter {
        width: 100%;

    }

    #nrEnfRattAfter {
        width: 25%;
        margin: auto;
    }

    /*bloc2*/
    #bloc2 {
        width: 100%;
    }

    #infoGenerales {
        width: 100%;
        height: fit-content;
    }

    /*bloc3*/

    #simDiv {
        width: 100%;
    }

    #resultatsBloc3 {
        width: 100%;
    }

    #bloc3_1,
    #bloc3_2,
    #commentRecapBloc {
        width: 100%;
    }


    #allocOrigin input {
        width: 70%;
    }




    /*Graphs*/

    #graphButton {
        display: block;
    }


    #blocGraphs {
        display: none;
        width: 100%;
        margin-top: 30px;
    }



    /*bloc4*/

    #bloc4et5 {
        width: 100%;

    }


    #bloc5etTitre {
        width: 100%;
    }

    #block4 {
        padding: 5px;
        width: 100%;
    }

    #block4 input,
    #block4 select {
        font-size: 3vw;
    }

    #titreEtBloc4 {
        width: 100%;

    }

    #bloc4_0 {
        width: 100%;
    }

    #bloc4_1 {
        width: 100%;
    }



    /*bloc5*/
    #bloc5plusTitre {
        width: 100%;
    }

    #block5 {
        width: 100%;
        height: fit-content;
        padding: 3px;
        padding-top: 15px;
        min-height: 0px;
    }





    #bloc6 {
        width: 100%;
    }

    #textTrimentetebloc6 {
        width: 90%;
        margin: auto;
        margin-top: 10px;
    }

    #saveAllSmallScreens {
        display: none;
        right: -20px;
        border-radius: 50%;
        height: 55px;

        width: 70px;
    }

}