body{
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  --bg-color1: #48ADCF;
  --bg-color2: #C8D642;
  --bg-color3: #288DAF; /* Pour le menu select et les bordures */
  --bg-color4: #1D009A;
  --bg-color5: #008EE0;
  --bg-color6: #FEDC22;
  --bg-color7: #FE0200;
}

h1, h2, h3, h4, h5{
  font-family: 'Marcellus SC', serif;
}

a{
  text-decoration: none;
}

input{
  border-radius: 5px;
}

/* ====== General #5B77AE old #E0B278 old | new #52C2E7 #C8D642  ====== */
/*

bleu : #5897D6
marron : #9C5A17

*/

.blue-logo{
  background-color: var(--bg-color5);
  color: #FFF;
}

.blue-color-logo{
  background-color: #FFF;
  color: #52C2E7;
}

.green-logo{
  background-color: var(--bg-color4);
  color: #FFF;
}

.green-color-logo{
  background-color: #FFF;
  color: #C8D642;
}

.slider-arrow{
  cursor: pointer;
}

.button{
  padding: 10px;
  text-decoration: none;
  border-radius: 5px;
}
.blue{
  background-color: var(--bg-color1);
  color: #FFF;
}
.yellow{
  background-color: #E0B278;
  color: #FFF;
}
.red{
  background-color: red;
  color: #FFF;
}
.green{
  background-color: green;
  color: #FFF;
}


/* ====== Menu ====== */

nav{
  background-color: #FFF;/*var(--bg-color2);*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#menu-logo-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 50%;
  margin-left: auto;
  margin-right: 75px;
  margin-bottom: 10px;
  margin-top: 35px;
}

#menu-user-container{
  position: absolute;
  top: 10px;
  right: 20px;
  border-bottom: 1px dashed var(--bg-color1);
  color: var(--bg-color1);
}

#menu-buttons-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;

  margin-left: auto;
  margin-right: auto;

  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 5px;
  /*box-shadow: 0px 0px 5px #000;*/
}

.menu-button{
  background-color: var(--bg-color4);
  color: #FFF;
  padding: 15px;
  border: solid 1px var(--bg-color3);
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 5px;
}

.menu-button:hover{
  background-color: var(--bg-color5);
}

.menu-button-active{
  background-color: var(--bg-color6);
}

.menu-dropdown-content{
  display: none;
  position: absolute;
  /*background-color: var(--bg-color1);*/
  color: #FFF;
  /*border: solid 1px var(--bg-color3);*/
  transition: all 0.3s ease;
  height: 0px;
  margin-bottom: 5px;
  z-index: 100;
  border-radius: 5px;
}

/*.menu-dropdown:hover .menu-dropdown-content, */.menu-dropdown-open .menu-dropdown-content{
  display: flex;
  flex-direction: column;
  height: auto;
}

@media(max-width: 630px){

  #menu-buttons-container{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 90%;
  }

  .menu-dropdown{
    display: inline-block;
    width: 100%;
  }

  .menu-button{
    width: 100%;
  }

  .menu-dropdown-content{
    position: static;
  }

}


/* ====== Accueil ====== */

#accueil-bandeau-infos-container{
  width: 100%;
  min-height: 150px;
  background-color: var(--bg-color7);
  color: #FFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 15px;
}

#accueil-bandeau-infos{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 80%;
  align-items: center;
  box-sizing: border-box;
}

#accueil-bandeau-infos-container{
  min-height:150px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.accueil-bandeau-infos-content{
  display: none;
  flex-direction: column;
  width: 70%;
  box-sizing: border-box;
}

#accueil-bandeau-infos-link{
  color: #FFF;
  text-align: center;
  margin: 5px;
}

/*#accueil-bandeau-infos-button{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  background-color: #FFF;
  color: var(--bg-color1);
  padding: 10px;
}*/


#accueil-page-content-container{
  width: 90%;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}


.accueil-list-element-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.accueil-list-element{
  margin: 10px;
  padding: 15px;
  min-width: 250px;
  background-color: var(--bg-color6);
  width: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}

@media(max-width: 600px){

}




#accueil-bandeau-new-container{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-color2);
  color: #FFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  text-align: center;
}

#accueil-bandeau-new-slider{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 80%;
  align-items: center;
}

#accueil-bandeau-new-slides-container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  width: 100%;box-sizing: border-box;
}

.accueil-bandeau-new-slide{
  display: flex;
  flex-direction: column;
  width: 30%;
  background-color: #FFF;
  color: #000;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
}

.accueil-bandeau-new-slide-img{
  height: 200px;
  width: 200px;
  object-fit: contain;
}

.accueil-bandeau-new-slide-title{
  color: var(--bg-color1);
  margin-bottom: 5px;
}

.accueil-bandeau-new-slide-link{
  color: var(--bg-color1);
  text-align: center;
  margin: 5px;
}

.accueil-bandeau-new-slide-button{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  background-color: var(--bg-color1);
  color: #FFF;
  padding: 10px;
  border-radius: 5px;
}


@media(max-width: 1200px){
  #accueil-bandeau-new-slider{
    width: 100%;
  }
}

@media(max-width: 1000px){
  .accueil-bandeau-new-slide{
    width: 45%;
  }
}

@media(max-width: 750px){
  .accueil-bandeau-new-slide{
    width: 80%;
  }
}

@media(max-width: 440px){
  #accueil-bandeau-infos{
    width: 100%;
  }
}




/* ====== login ====== */

#login-content-container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#anim-mot-container{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -10;
  width: 100%;
  height: 100%;
}

.anim-mot{
  position: absolute;
  transition: all 10s ease;
  filter: opacity(50%);
  background-color: #FFF;
  /*box-shadow: 0px 0px 20px #FFF;*/
  color: var(--bg-color1);
}

#page-title{
  text-align: center;
  background-color: #FFF;
  box-shadow: 0px 0px 20px #FFF;
}

#connexion-inscription-container{
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  overflow: hidden;
}

.login-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
  padding: 20px;
  margin: 20px;
  width: 25%;
  text-align: center;
  box-shadow: 0px 0px 20px #FFF;
}

.login-card-title{
  margin-top: 0px;
  margin-bottom: 5px;
}

.login-card-button{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  background-color: #FE0200;
  color:#fff;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}

.login-card-submit{
  border: none;
  font-size: 1em;
}


.form-element-container{
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.form-input-element{
  width: 50%;
  border: none;
}

.form-select-element{
  width: 50%;
  border: none;
}

.form-textarea-element{
  width: 50%;
  border: none;
  resize: vertical;
  min-height: 100px;
  border-radius: 5px;
}


@media(max-width: 1100px){
  .login-card{
    width: 50%;
  }
}

@media(max-width: 600px){
  #connexion-inscription-container{
    flex-direction: column;
    align-items: center;
  }

  .login-card{
    width: 70%;
  }

}

@media(max-width: 475px){
  .login-card{
    width: 85%;
  }

  .form-element-container{
    flex-direction: column;
    align-items: center;
  }

  .form-element-container label{
    width: 100%;
    text-align: center;
  }

  .form-element-container input{
    width: 100%;
    text-align: center;
  }
}



/* ====== Pages Listes ====== */

#list-page-container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.list-page-title{
  text-align: center;
}

#list-page-content{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 10px;
  flex-grow: 2;
}

.list-page-element{
  border: solid 2px var(--bg-color7);
  margin: 10px;
  padding: 15px;
  min-width: 250px;
  width: 25%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}

.list-page-element-title{
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--bg-color4);
}

.list-page-element-sub-title{
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--bg-color1);
}

.list-page-element-img{
  width: 200px;
  height: 200px;
  border-radius: 5px;
  object-fit: cover;
}

.list-page-element-description{
  margin-top: 10px;
  margin-bottom: 10px;
}

.list-page-element-file{
  margin-top: 5px;
  margin-bottom: 5px;
  color: var(--bg-color1);
}

@media(max-width: 920px){
  .list-page-element{
    width: 40%;
  }
}

@media(max-width: 700px){
  .list-page-element{
    width: 90%;
  }
}

/* ====== Pages Commissions ====== */

#com-page-container{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.com-page-title{
  text-align: center;
}

#com-page-description{
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}


#com-page-file-list{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 10px;
  flex-grow: 2;
}

/* ====== bon commande ====== */

#addButton{
  cursor: pointer;
}