* {
  margin: 0px;
  box-sizing: border-box;
}
html {
  font-family: Regular, Arial, sans-serif;
  font-size:  62.5%;
}
body { background-color: rgb(245, 245, 245); }
@font-face {
  font-family: 'Regular';
  src: url('../police/Urbanist-Regular.woff2') format('woff');
}
@font-face {
  font-family: 'Bold';
  src: url('../police/Urbanist-Bold.woff2') format('woff');
}
:root {
          --bleuCollection: rgb(0, 0, 255); /* Voiture */
          --bleuCategorie: rgb(200, 200, 255);
          --bleuCielCollection: rgb(0, 200, 255); /* Ressource */
          --bleuCielCategorie: rgb(190, 240, 255);
          --jauneCollection: rgb(255, 225, 0); /* Maison */
          --jauneCategorie: rgb(255, 250, 200);
          --mauveCollection: rgb(255, 200, 255); /* Santé */
          --mauveCategorie: rgb(255, 0, 255);
          --orangeCollection: rgb(255, 150, 0); /* VieQuotidienne */
          --orangeCollection: rgb(255, 225, 170);
          --rougeCollection: rgb(255, 0, 0); /* Loisirs */
          --rougeCategorie: rgb(255, 225, 225);
          --vertCollection: rgb(0, 225, 0); /* Ecole */
          --vertCategorie: rgba(200, 250, 200);

          --vert: rgba(109, 238, 156, 1);
          --jaune: rgba(237, 213, 109, 1);
          --rose: rgba(237, 115, 109, 1);
          --bleu: rgba(138, 183, 242, 1);
          --marron: rgba(209, 112, 75, 1);
          --gris: rgba(250, 250, 250, 1);
          --gris0: rgba(225, 225, 225, 1);
          --gris1: rgba(185, 185, 185, 1);
          --gris2: rgba(100, 100, 100, 1);

          --titre-1: 3.2rem;
          --titre-2: 2.8rem;
          --titre-3: 2.4rem;
          --titre-4: 2rem;
          --titre-5: 1.8rem;
          --titre-6: 1.6rem;
          --paragraphe : 1.5rem;

          --bordure: 4px solid white;
          --arrondi: 8px;
          --ombre: 1px 1px 7px grey;
}

        .gras { font-family: Bold; }
a {
  color: black;
  text-decoration: none;
}

/* .............................. Style de l'entete et du logo ..... */
.entete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 96pxpx;
}
.entete__titre {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 48px;
  margin: 0 auto 8px auto;
  border-radius: 0 0 24px 24px;
  background-color: white;
}
.nom__module-texte {
  font-family: Bold;
  font-size: var(--titre-4);
  letter-spacing: 0.2rem;
}
@media (min-width: 1200px) { 
  .entete {
    flex-direction: row;
    justify-content: flex-start;
    height: 64px;
  }
  .entete__titre {
    width: 256px;
    height: 64px;
    margin: 0 72px;
    border-radius: 0 0 24px 24px;
    background-color: white;
  }
  .nom__module-texte { font-size: var(--titre-3); }
}

/* .............................. Style de la navigation mensuelle ..... */
.nav__mois {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 36px;
  background-color: white;
}
        .nav__mois__cache { display: none; }
.nav__iconeMois {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background-color: white;
}
.nav__iconeMois:hover { background-color: var(--gris0); }
.icoFlecheG { background: center / 70% no-repeat url("../images/flecheG.png"); }
.icoMoisEnCours {background: center / 70% no-repeat url("../images/moisEnCours.png"); }
.icoFlecheD { background: center / 70% no-repeat url("../images/flecheD.png"); }
.nav__mois-texte {
  font-size: var(--titre-6);
  letter-spacing: .2rem;
}
@media (min-width: 1200px) {
  .nav__mois { 
    width: calc(100% - 600px);
    height: 64px;
    margin: 0 auto;
  }     
  .nav__iconeMois {
    width: 48px;
    height: 48px;
  }
  .nav__mois-texte { font-size: var(--titre-3); }
}



/* .............................. Style du menu principal ..... */
.nav__menu {
  position: fixed;
  bottom: 0px;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 72px;
  background-color: white;
}
.icone__menu {
  width: 56px;
  height: 56px;
}
.icone__menu:hover {
  border-radius: var(--arrondi);
  background-color: var(--gris0);
}

            .nav__sousMenu {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: calc( 100vh - 192px);
              margin: 8px 0;
            }
            .sousMenu__lien {
              width: 70%;
              height: 38px;
              margin: 16px 0;
              padding-top: 8px;
              border-radius: var(--arrondi);
              box-shadow: var(--ombre);
              background-color: white;
            }
            .sousMenu__lien:hover { background-color: var(--gris0); }
            .sousMenu__lien-texte {
              font-size: var(--titre-6);
              text-align: center;
            }
@media (min-width: 1200px) {
  .nav__menu {
    top: calc((100vh - 384px) / 2);
    left: 0;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 72px;
    height: 384px;
  }
              .nav__sousMenu {
                width: 800px;
                height: calc( 100vh - 96px);
                margin: 0 auto;
              }
              .sousMenu__lien {
                height: 42px;
                padding: 10px 24px;
              }
              .sousMenu__lien-texte { font-size: var(--titre-5); }
            }
.icoAccueil { background: center / 100% no-repeat url("../images/menuAccueil.png"); }
.icoDepense { background: center / 100% no-repeat url("../images/menuDepense.png"); }
.icoRessources { background: center / 100% no-repeat url("../images/menuRessource.png"); }
.icoAjouter { background: center / 100% no-repeat url("../images/menuAjouter.png"); }
.icoEtat { background: center / 100% no-repeat url("../images/menuEtat.png"); }
.icoParametre { background: center / 100% no-repeat url("../images/menuParametre.png"); }

        

        /* .............................. Style des titres de page ..... */
        .titre { margin-left: 36px; }
        .titre-titre-4 {
          font-family: Bold;
          font-size: var(--titre-4);
          letter-spacing: 0.2rem;
        }
        @media (min-width: 1200px) {
          .titre { margin-left: 128px; }
          .titre-titre-4 {
            font-size: var(--titre-3);
            letter-spacing: 0.5rem;
          }
        }

        /* .............................. Style Page Accueil ..... */
        .resultat__mensuel {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 100%;
          min-height: 48px;
          margin: 16px 0;
        }
        .cadre__resultat {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 162px;
          height: 72px;
          margin: 12px 0;
          border: var(--bordure);
          border-radius: var(--arrondi);
          box-shadow: var(--ombre);
          background-color: white;
        }
        .cadre__resultat-titre { font-size: var(--titre-6); }
        .cadre__resultat-chiffre {
          font-family: Bold;
          font-size: var(--titre-5);
        }
        @media (min-width: 1200px) {
          .resultat__mensuel {
            width: 1100px;
            height: auto;
            margin: 16px auto;
          }
          .cadre__resultat {
            justify-content: space-around;
            width: 256px;
            height: 152px;
            margin: 64px 0 ;
          }
          .cadre__resultat-titre { font-size: var(--titre-4); }
          .cadre__resultat-chiffre { font-size: var(--titre-3); }
        }

        /* .............................. Style Page Banque ..... */
        .resultat__mensuelBanque {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 95%;
          min-height: 128px;
          margin: 8px auto;
        }
        .banque__mensuel {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          width: 45%;
          height: 64px;
          margin: 0 auto;
          border: var(--bordure);
          border-radius: var(--arrondi);
          box-shadow: var(--ombre);
          background-color: var(--gris0);
        }
        .banque__detail {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          width: 90%;
          height: 96px;
          margin: 8px auto;
          border-radius: var(--arrondi);
          box-shadow: var(--ombre);
          background-color: white;
        }
        .banque__icone {
          width: 38px;
          height: 38px;
          margin: 0 8px;
          border-bottom: 6px solid var(--gris1);
          border-radius: var(--arrondi);
        }
        .detail__mode { width: 150px; }
        .detail__mode-titre {
          font-size: var(--paragraphe);
          text-align: center;
        }

        /* .............................. Style des pages Ressources / Dépenses ..... */
        .resultat__total {
          width: 100%;
          margin: 0 0;
        }
        .resultat__total-titre {
          font-size: var(--titre-5);
          letter-spacing: .1rem;
          text-align: center;
        }
        .resultat__total-chiffre {
          font-family: Bold;
          font-size: var(--titre-4);
          letter-spacing: .3rem;
          text-align: center;
        }
        .total__mensuel {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          width: 104px;
          height: 64px;
          margin: 0 auto;
          border: var(--bordure);
          border-radius: var(--arrondi);
          box-shadow: var(--ombre);
          background-color: white;
        }
        .total__mensuel-titre { font-size: var(--paragraphe); }
        .total__mensuel-somme {
          font-family: Bold;
          font-size: var(--titre-6);
        }
        .total__detail {
          display: flex;
          align-items: center;
          width: 96%;
          height: 48px;
          margin: 6px auto;
          border-radius: var(--arrondi);
          box-shadow: 1px 1px 7px grey;
          background-color: white;
        }
        .total__detail:first-child { margin-top: 22px; }
        .detail__date { width: 40px; }
        .detail__date-titre {
          color: var(--gris2);
          font-size: var(--paragraphe);
          text-align: center;
        }
        .detail__icone {
          width: 38px;
          height: 38px;
          margin: 0 4px;
          border-radius: var(--arrondi);
        }
        .detail__intitule { width: 197px; }
        .detail__intitule-titre {
          font-size: var(--paragraphe);
          text-align: center;
        }
        .detail__somme { width: 80px; }
        .detail__somme-montant {
          font-family: Bold;
          font-size: var(--titre-6);
        }
        .detail__checkbox { width: 40px; }
        @media (min-width: 1200px) {
          .resultat__total {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 48px;
            margin: 4px 0 12px 0;
          }
          .resultat__total-titre { font-size: var(--titre-3); }
          .resultat__total-chiffre {
            margin-left: 8px;
            font-size: var(--titre-3);
          }
          .depenseRessource__mensuel {
            width: 208px;
            height: 96px;
          }
          .depenseRessource__mensuel-titre { font-size: var(--titre-4); }
          .depenseRessource__mensuel-somme { font-size: var(--titre-3); }
          .depenseRessource__detail {
            width: 750px;
            height: 56px;
            margin: 4px auto;
          }
          .detail__date { width: 72px; }
          .detail__date-titre { font-size: var(--titre-6); }
          .detail__icone {
            margin: 0 16px;
          }
          .detail__icone__cache { display: initial; }
          .detail__intitule { width: 430px; }
          .detail__intitule-titre { font-size: var(--titre-6); }
          .detail__somme { width: 100px; }
        }

        /* .............................. Style Page Etat ..... */
        .etat__mensuel {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          width: 100%;
          min-height: 72px;
          margin: 8px 0;
        }
        .cadre__etat {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 162px;
          height: 104px;
          margin: 12px auto;
          padding: 8px;
          border-radius: var(--arrondi);
          box-shadow: var(--ombre);
          background-color: white;
        }
        .etat__icone {
          width: 48px;
          height: 48px;
          outline: 2px solid white;
          border-radius: 12px;
        }
        .cadre__etat-titre6 {
          font-size: var(--titre-6);
          text-align: center;
        }
        .cadre__etat-chiffre {
          font-family: Bold;
          font-size: var(--titre-5);
          text-align: center;
        }
        @media (min-width: 1200px) {
          .etat__mensuel {
            width: 600px;
            margin: 8px auto;
          }
          .cadre__etat:last-child { margin-bottom: 8px; }
        }

/* .............................. Style des formulaires ..... */
.form {
  width: 90%;
  height: auto;
  margin: 8px auto;
}
        .cadre__ligne {
          display: flex;
          flex-direction: column;
          width: 92%;
          min-height: 64px;
          margin: 8px auto;
          border: var(--bordure);
          border-radius: var(--arrondi);
          box-shadow: var(--ombre);
          background-color: white;
        }
.form__ligne {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 32px;
  padding: 4px 0 8px 0;
  letter-spacing: .3rem;
}
.form__ligneEnrg {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 32px;
}
        .label { margin: 4px 0 4px 32px; }
        .label-texte {
          font-family: Bold;
          font-size: var(--paragraphe);
        }
        .form__date, .form__montant, .form__select, .form__input {
          width: 80%;
          height: 36px;
          margin: 4px auto;
          border: none;
          border: 1px solid var(--jaune);
        }
        .submit {
          width: 48px;
          height: 48px;
          margin: 8px 0;
          padding: 0 16px;
          border: none;
          border-radius: 8px;
          background: center / 100% no-repeat url("../images/valider.png") white;
          cursor: pointer;
        }
        .submit:hover { background-color: var(--gris0); }
        .submit-texte { font-size: var(--titre-6); }
        @media (min-width: 1200px) {
          .formDepRecette {
            width: 600px;
            height: 48px;
            margin: 32px auto;
          }
          .form__ligneDepRecette {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 48px;
          }
          .labelDepRecette { margin: 0 12px; }
          .labelDepRecette-texte { font-size: var(--titre-6); }
          .form {
            width: 600px;
            height: auto;
            margin: 32px auto;
            padding: 32px 0;
          }
          .form__ligne, .form__ligneEnrg {
            flex-direction: row;
            width: 600px;
          }
          .label {
            width: 100px;
            margin: 12px 0 0 32px;
          }
          .form__date, .form__montant {
            width: 200px;
            height: 36px;
            margin: 4px 0;
            border: none;
            border-radius: 8px;
            background-color: white;
          }
          .form__select, .form__input {
            width: 350px;
            height: 36px;
            margin: 4px 0;
            border: none;
            border-radius: 8px;
            background-color: white;
          }
          .submit { }
        }

        /* .............................. Style des pages Paramètre ..... */
.cadre__parametre {
  width: 80%;
  height: auto;
  margin: 12px auto;
  padding: 12px;
  border: var(--bordure);
  border-radius: var(--arrondi);
  box-shadow: var(--ombre);
  background-color: var(--gris0);
}
.parametre-titre {
  font-family: Bold;
  font-size: var(--titre-5);
  letter-spacing: 0.5rem;
}
.parametre__ligne {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 256px;
  height: 48px;
  margin: 2px;
}
.parametre__ligneLien {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 256px;
  height: 48px;
  margin: 2px;
}
.parametre__img {
  width: 40px;
  height: 40px;
  margin: 0 24px;
}
.parametre__label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 128px;
  height: 48px;
  margin: 0 4px;
}
.parametre-texte {
  font-size: var(--titre-6);
  letter-spacing: 0.2rem;
}
.parametre__label-texte {
  font-size: var(--paragraphe);
  font-style: italic;
}
.parametre__lien {
  width: auto;
  height: auto;
  margin: 0 4px;
  padding: 2px 4px;
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
}
.parametre__lien:hover { background-color: var(--gris0); }
.lien-texte { font-size: var(--paragraphe); }
        @media (min-width: 1200px) {

        }




        .ecole { border-color: var( --colVert); }
        .gite { border-color: var( --colRouge); }
        .loisirs { border-color: var( --colJaune); }
        .maison { border-color: var( --colBleuFonce); }
        .sante { border-color: var( --colRose); }
        .quotidien { border-color: var( --colOrange); }
        .voiture { border-color: var( --colBleu); }




        .ligne__fin { height: 96px; }




        .fondGris { background-color: var(--gris); }
        .fondGris0 { background-color: var(--gris0); }
        .fondGris1 { background-color: var(--gris1); }


















        .bordBleu { border-color: var(--bleu); }
        .bordBlanc { border: 4px solid white; }
        .bordJaune { border-color: var(--jaune); }
        .bordGris { border-color: var(--grisFond); }
        .bordGris0 { border-color: var(--gris0); }

        .bordCatVert {
          border-color: var(--colVert);
          outline-color: var(--colVert);
        } /* Ecole */
        .fondCatVert { background-color: rgba(46, 219, 44, .2); } /* Ecole */
        .bordCatRouge {
          border-color: var(--colRouge);
          outline-color: var(--colRouge);
        } /* Loisirs */
        .fondCatRouge { background-color: rgba(217, 20, 36, .2); } /* Loisirs */
        .bordCatJaune {
          border-color: var(--colJaune);
          outline-color: var(--colJaune);
        } /* Maison */
        .fondCatJaune { background-color: rgba(242, 185, 15, .2); } /* Maison */
        .bordCatRose {
          border-color: var(--colRose);
          outline-color: var(--colRose);
        } /* Santé */
        .fondCatRose { background-color: rgba(248, 170, 187, .2); } /* Santé */
        .bordCatViolet {
          border-color: var(--colViolet);
          outline-color: var(--colViolet);
        } /* Vie Quotidienne */
        .fondCatViolet { background-color: rgba(170, 41, 240, .2); } /* Vie Quotidienne */
        .bordCatBleu {
          border-color: var(--colBleu);
          outline-color: var(--colViolet);
        } /* voiture */
        .fondCatBleu { background-color: rgba(138, 183, 242, .2); } /* Voiture */


        .fondBlanc { background-color: white; }
        .fondBleu { background-color: var(--bleuCielCategorie); }
        .fondBleu1 { background-color: rgba(138, 183, 242, 1); }

        .fondJaune { background-color: rgba(237, 213, 109, .3); }
        .fondJaune1 { background-color: var(--jaune); }
        .fondRose { background-color: rgba(255, 210, 230, 1); }
        .fondRose1 { background-color: rgba(237, 115, 109, 1); }
        .fondVert { background-color: rgba(109, 238, 156, .2); }
        .fondVert1 { background-color: var(--vert); }


        




        /* Style des Icones */


        .icoCopier { 
          width: 32px;
          height: 32px;
          margin: 0 4px;
          background: center / 100% no-repeat url("../images/copier.png");
        }
        .icoModifier {
          width: 32px;
          height: 32px;
          margin: 0 4px;
          background: center / 100% no-repeat url("../images/modifier.png");
        }
        .icoSupprimer {
          width: 32px;
          height: 32px;
          margin: 0 4px;
          background: center / 100% no-repeat url("../images/supprimer.png");
        }
        .icoVoir {
          width: 32px;
          height: 32px;
          margin: 0 4px;
          background: center / 100% no-repeat url("../images/voir.png");
        }


        .icone__categorie, .icone__collection {
          width: 40px;
          height: 40px;
          margin: 0 8px;
          border-radius: var(--arrondi);
        }
        .icoEcole { background: center / 100% no-repeat url("../images/ecole.png"); } /* icone Ecole */
        .icoManuel { background: center / 100% no-repeat url("../images/ecole_manuel.png") var(--vertCategorie); } /* école */
        .icoMateriel { background: center / 100% no-repeat url("../images/ecole_materiel.png") var(--vertCategorie); } /* école */

        .icoLoisirs { background: center / 100% no-repeat url("../images/loisirs.png"); } /* icone Loisirs */
        .icoAbonnement { background: center / 100% no-repeat url("../images/loisirs_abonnement.png"); } /* loisirs */
        .icoAchat { background: center / 100% no-repeat url("../images/loisirs_achat.png"); } /* loisirs */
        .icoCadeau { background: center / 100% no-repeat url("../images/loisirs_cadeau.png"); } /* loisirs */
        .icoPhoto { background: center / 100% no-repeat url("../images/loisirs_photo.png"); } /* loisirs */
        .icoRestaurant { background: center / 100% no-repeat url("../images/loisirs_restaurant.png"); } /* loisirs */
        .icoSortie { background: center / 100% no-repeat url("../images/loisirs_sortie.png"); } /* loisirs */

        .icoMaison { background: center / 100% no-repeat url("../images/maison.png"); } /* icone Maison */
        .icoChauffage { background: center / 100% no-repeat url("../images/maison_chauffage.png"); } /* maison */
        .icoEau { background: center / 100% no-repeat url("../images/maison_eau.png"); } /* maison */
        .icoElectricite { background: center / 100% no-repeat url("../images/maison_electricite.png"); } /* maison */
        .icoElectromenager { background: center / 100% no-repeat url("../images/maison_electromenager.png"); } /* maison */
        .icoJardin { background: center / 100% no-repeat url("../images/maison_jardin.png"); } /* maison */
        .icoMobilier { background: center / 100% no-repeat url("../images/maison_mobilier.png"); } /* maison */
        .icoTravaux { background: center / 100% no-repeat url("../images/maison_travaux.png"); } /* maison */
        .icoWifi { background: center / 100% no-repeat url("../images/maison_wifi.png"); } /* maison */

        .icoSante { background: center / 100% no-repeat url("../images/sante.png"); } /* icone Santé */
        .icoMedecin { background: center / 100% no-repeat url("../images/sante_medecin.png"); } /* santé */
        .icoPharmacie { background: center / 100% no-repeat url("../images/sante_pharmacie.png"); } /* santé */
        .icoSpecialiste { background: center / 100% no-repeat url("../images/sante_specialiste.png"); } /* santé */

        .icoVieQuotidienne { background: center / 100% no-repeat url("../images/vieQuotidienne.png"); } /* icone Vie Quotienne */
        .icoCourse { background: center / 100% no-repeat url("../images/vieQuotidienne_course.png"); } /* vie quotidienne */
        .icoHygiene { background: center / 100% no-repeat url("../images/vieQuotidienne_hygiene.png"); } /* vie quotidienne */
        .icoTelephone { background: center / 100% no-repeat url("../images/vieQuotidienne_telephone.png") ; } /* vie quotidienne */
        .icoVetement { background: center / 100% no-repeat url("../images/vieQuotidienne_vetement.png"); } /* vie quotidienne */


        .icoVoiture { background: center / 100% no-repeat url("../images/voiture.png"); } /* icone Voiture */
        .icoEssence { background: center / 100% no-repeat url("../images/voiture_essence.png"); } /* voiture */
        .icoMecanique { background: center / 100% no-repeat url("../images/voiture_mecanique.png"); } /* voiture */

        .icoAutre { background: center / 100% no-repeat url("../images/multi_autre.png"); } /* ressource */
        .icoPret { background: center / 100% no-repeat url("../images/multi_pret.png"); } /* maison - voiture */
        .icoAssurance { background: center / 100% no-repeat url("../images/multi_assurance.png"); } /* maison - santé - voiture */
        .icoTaxe { background: center / 100% no-repeat url("../images/multi_taxe.png"); } /* maison - voiture - vie quotidienne */

        .icoRessource { background: center / 100% no-repeat url("../images/ressource.png"); } /* ressource */
        .icoSalaire { background: center / 100% no-repeat url("../images/ressource_salaire.png"); } /* ressource */
        .icoGite { background: center / 100% no-repeat url("../images/ressource_gite.png"); } /* ressource */


        .cache { display: none; }
        @media (min-width: 1200px) {
          .cache { display: inline; }
        }