* {
  box-sizing : border-box;
  list-style-type : none;
} 
body {
  font-family : "Quicksand";
  font-size : 1em;
  margin : 0;
  background-image: url(../public/leaf.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  width : 100%;
}
/***********************HEADER**********************/
/***************************************************/
header {
  display : flex;
  flex-direction : column;
  text-align : center;
  color : rgba(0, 79, 67, 1); /* vert tres foncé */
  width : 100%;
  font-family : 'Zeyada', cursive;
}
h1{
  font-size : 2em;
}
h2 {
  font-size : 1.3em;
}
h3{
  font-size : 1em;
}
a {
  text-decoration : none;
  color : rgba(0, 143, 122, 1); /*vert foncé*/
}
#logo {
  width : 8em;
  height : 8em;
  object-fit : contain;
  margin-top : 1em;
}
.logo {
  display : flex;
  flex-direction : row;
  align-items : center;
  margin : auto;
}

/***********************NAV*************************/
/***************************************************/

@media screen and (max-width: 780px) { /*mobilefirst*/
  /*la nav se transforme en menu burger */
#menu__bascule {
  opacity : 0; /*cache la nav (checkbox)*/
}
#menu__bascule:checked + .menu__btn > span { /*rotate pour que le burger devienne une croix*/
  transform : rotate(45deg);
}
#menu__bascule:checked + .menu__btn > span::before {
  top : 0;
  transform : rotate(0deg);
}
#menu__bascule:checked + .menu__btn > span::after {
  top : 0;
  transform : rotate(90deg);
}
#menu__bascule:checked ~ .menu__box { /*si on clique sur le burger, la liste menu_box s'affiche*/
  left : 0;
}
/* le menu burger*/
.menu__btn {
  position : fixed;
  top : 3em;
  left : 2em;
  width : 2em;
  height : 2em;
  cursor : pointer;
  z-index : 1;
}
/*pour les traits du burger*/
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display : block;
  position : absolute;
  width : 100%;
  height : 0.1em;
  background-color : rgba(0, 79, 67, 1);/* vert tres foncé */
  transition-duration : .25s;
}
/*trait du milieu*/
.menu__btn > span::before {
  content : '';
  top : 0.8em;
}
/*trait du bas*/
.menu__btn > span::after {
  content : '';
  top : 1.6em;
}
/*liste du menu*/
.menu__box {
  position : absolute;
  top : 0;
  left : -100%;/*ce qui fait que la liste se cache*/
  width : 80%;
  min-height : 100%;
  margin : 0;
  padding : 5em 0;
  box-shadow : 0.2em 0.2em 0.6em rgba(0, 0, 0, .4);
  transition-duration : .25s;
  background-color : rgba(215, 238, 218, 1); /*vert background*/ 
}
/*Les catégories du menu*/
.menu__item {
  display : block;
  padding : 0.7em 2em;
  color : rgba(0,143,122,1); /*vert foncé*/
  font-weight : 600;
  transition-duration : .25s;
}
.menu__item:hover {
  text-decoration : none;
  color : rgba(162,210,166,1); /*vert clair hover*/
  transition : color 0.2s;
}
/*les souscatégories*/
.menu__under:hover {
  text-decoration : none;
  color : rgba(162,210,166,1); /*vert clair hover*/
  transition : color 0.2s;
}
}

/******************MAIN****************************/
/**************************************************/
main {
  width : 100%;
  padding : 1em;
}
p{
  margin : 0;
}
.categorie1>h3, 
.categorie2>h3, 
.categorie3>h3{
  text-align : center;
}

img {
  width : 100%;
  height : 20em;
  object-fit : cover;
}
.section {
  display : flex;
  flex-direction : column;
  width : 100%;
} 
article{
  text-align : center;
  width : 100%;
  padding-bottom : 1em;
}
button {
  display : flex;
  font-family : "Quicksand";
  padding : 0.5em;
  margin : auto;
  margin-top : 1em;
  margin-bottom : 1em;
  align-items : center;
  justify-content : center;
  background-color : rgba(215, 238, 218, 0.5); /*vert background*/
  border : 0.1em solid rgba(0,143,122,1); /*vert foncé*/
  border-radius : 0.5em;
}

.ajoutPost {
  padding : 0.5em;
  margin : auto;
  margin-top : 3em;
  margin-bottom : 1em;
  text-align : center;
  }

/****gestion admin****/
.pseudo{
  color : rgba(0,143,122,1); /*vert foncé*/;
  font-weight : bold;
  margin-bottom :1em;
}
.adminEdit>p {
  font-weight : bold;
}
.adminEdit {
  padding : 1em;
  margin : 1em;
  border : 0.01em solid rgba(0,143,122,1); /*vert foncé*/;
}
.edit_art {
  color : rgba(0,143,122,1); /*vert foncé*/;
}
pre {
  font-family : "Arial";
}
/*************Slider*************/
h4 {
  text-align : center;
  color : rgba(0,143,122,1); /*vert foncé*/;
}
#slider {
    position : relative;
    width : 100%;
    margin : auto;
    display : flex;
    align-items : center;
}
.slide {
  width : 100%;
  height : 15em;
}
#precedent,
#suivant {
    cursor : pointer;
    transition : opacity 0.3s;
    opacity : 0;
    position : absolute;
    font-size : 5em;
    padding: 10px;
}

#precedent {
    left : 0;
}

#suivant {
    right : 0;
}

#slider:hover #precedent,
#slider:hover #suivant {
    opacity : 1;
}


/******************FORMULAIRES*********************/
/**************************************************/
fieldset{
  font-size : 1rem;
  color : rgba(0,143,122,1); /*vert foncé*/
  border : 0.1em solid rgba(0,143,122,1); /*vert foncé*/
  width : 90%;
  margin : auto;
  margin-top : 4em;
  margin-bottom : 2em;
}
form {
  display : flex;
  flex-direction : column;
  align-items: center;
  padding :0 0.3em;
  font-size : 1.2rem;
  color: rgba(0,143,122,1); /*vert foncé*/
}
label {
  margin-bottom : 1em;
}
input {
  font-family : "Quicksand";
  display : flex;
  padding : 0.3em 0.3em;
  margin : auto;
  margin-bottom : 1em;
  font-size : 1rem;
  color : rgba(0,143,122,1); /*vert foncé*/
  background-color : rgba(255, 255, 255, 0.5); /* blanc transparent*/
  border-color : rgba(0,143,122,1); /*vert foncé*/
  border-radius : 0.5em;
  width : 80%;
} 

button:hover {
  text-decoration : none;
  background-color : rgba(162, 210, 166, 0.5); /*vert clair hover*/
  
}
.form {
  text-align : center;
  margin-bottom : 2em;
}

textarea {
  font-family : "Quicksand";
  font-size : 1rem;
  background-color : rgba(255, 255, 255, 0.5); /* blanc transparent*/
  margin : auto;
  margin-bottom : 1em;
  width : 80%;
  border-radius : 0.5em;
  border : 0.1em solid rgba(0,143,122,1); /*vert foncé*/
  border-width : 2px;
  border-style : inset;
  border-color : -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  display : block;
}
.choix {
  font-family : "Quicksand";
  font-size : 1rem;
  color : rgb(118, 118, 118);
  background-color : rgba(255, 255, 255, 0.5); /* blanc transparent*/
  padding : 0.3em;
  margin : auto;
  margin-bottom : 1em;
  width : 80%;
  border-radius : 0.5em;
  border : 0.1em solid rgba(0,143,122,1); /*vert foncé*/
  border-width: 2px;
  border-style: inset;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  display : block
}
/*suppression de compte*/
.warning {
  color : rgba(143, 0, 92, 1); /*rouge foncé*/
  border-color : rgba(143, 0, 92, 1); /*rouge foncé*/
  margin-bottom : 0;
}
/*message d'erreur post*/
.error {
  color : rgba(143, 0, 92, 1); /*rouge foncé*/
  text-align : center;
  margin-top : 1em;
}

/*************************FOOTER*******************/
/**************************************************/
footer{
  padding :0;
  width : 100%;
  height : 15em;
  background-image: url(../public/Lines-waving.png);
  background-size: 100% 13em;
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
.footer {
  display : flex;
  flex-direction : column;
  color : rgb(0, 0, 0); /*noir*/
  text-align : center;
}


/*******************************************************************************
RESPONSIVE
*******************************************************************************/

/**************************************************************************************************************
 VERSION TABLETTE
************************************************************************************************************* */
@media screen and (min-width: 780px) and (max-width: 1200px) {
  /**************header**************/
  header {
    font-size : 1.5em;
  }
  #logo {
    width: 10em;
    height: 10em;
  }
  
  /***************nav****************/
  #menu__bascule {
      visibility : hidden;
      height : 0;
  }
  #menu__btn {
      visibility : hidden;
  }
  .menu__item {
    width: 100%;
  }
  .burger-menu ul {
  	margin: 0;
  	padding: 0;
  	list-style-type: none;
  	color : rgba(255, 255, 255, 1); /* blanc */
    text-align: center;
  }
  .burger-menu a {
  	display: inline-block;
  	min-width: 10em;
  	padding: 1em 2em;
  	color: rgba(0,143,122,1); /*vert foncé*/
  	text-decoration : none;
  }
  .burger-menu a:hover {
  	text-decoration: none;
  	color: rgba(162,210,166,1); /*vert clair hover*/
  }
  .burger-menu > ul {
  	display: flex;
  	justify-content: center;
  }
  .burger-menu > ul > li {
  	position: relative;
  	
  }
  .burger-menu > ul > li ul {
  	position: absolute;
  	display: none;
  	background-color : rgba(215, 238, 218, 1); /*vert background*/
  	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  .burger-menu > ul > li:hover ul {
  	display: block;
  }
  .menu__box {
    width: 100%;
    border-top : 0.08em solid rgba(0,143,122,1); /*vert foncé*/;
  	border-bottom : 0.08em solid rgba(0,143,122,1); /*vert foncé*/;
  }

  /****************main*****************/
  main {
    width : 100%;
    padding : 2em;
  }
  
  img {
  width : 18em;
  height : 18em;
  object-fit: cover;
}
  .section {
    width : 18em;
  } 
  section {
    display : flex;
    flex-direction : row;
    width : 100%;
  } 
  .photo {
    max-width : 100%;
    object-fit: contain;
    gap : 2em;
  }
  article{
    margin : 0 1em;
  }
  
  /***************slider**************/
  .slide {
    width : 30em;
    height : 20em;
    object-fit : cover;
    margin : auto;
  }

  /*********affiche post categorie*****/
  .categImage {
    display : flex;
    flex-wrap : wrap;
    justify-content: center;
    align-items: center;
    gap : 2em;
  }
  .ajoutPost {
    padding :1em;
  }
  /*******affiche post******/
  .article {
    display : flex;
    flex-direction : row;
    width : 90%;
    margin : auto;
  }
  .image {
    width : 18em;
    height : 18em;
    object-fit: cover;
  }
  
    /******************formulaires*********************/
  fieldset{
    width : 50%;
  }

}

/************************************************************************************************************
                                 VERSION DESKTOP
*************************************************************************************************************/

@media screen and (min-width: 1200px) {
  
  #logo {
    width: 13em;
    height: 13em;
    }
    
  h1{
    font-size : 5em;
  }
  
  button {
    font-size : 1rem;
  }
  /******************nav************************/
  #menu__bascule {
      visibility : hidden;
    }
  #menu__btn {
      visibility : hidden;
    }
  .burger-menu ul {
  	margin: 0;
  	padding: 0;
  	list-style-type: none;
  	color : rgba(255, 255, 255, 1); /* blanc */
    text-align: center;
    width : 100%;
  }
  .burger-menu a {
  	display: inline-block;
  	min-width: 10em;
  	padding: 1em 2em;
  	color: rgba(0,143,122,1); /*vert foncé*/
  	text-decoration : none;
  }
  .burger-menu a:hover {
  	text-decoration: none;
  	color: rgba(162,210,166,1); /*vert clair hover*/
  }
  .burger-menu > ul {
  	display: flex;
  	justify-content: center;
  }
  .burger-menu > ul > li {
  	position: relative;
  }
  .burger-menu > ul > li ul {
  	position: absolute;
  	display: none;
  	background-color : rgba(215, 238, 218, 1); /*vert background*/
  	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  }
  .burger-menu > ul > li:hover ul {
  	display: block;
  }
  .menu__box {
    width: 100%;
    border-top : 0.08em solid rgba(0,143,122,1); /*vert foncé*/;
  	border-bottom : 0.08em solid rgba(0,143,122,1); /*vert foncé*/;
  }
  
    /********************main*********************/
  main {
    box-sizing : border-box;
    width : 100%;
    padding: 3em;
  }
  img {
    width : 20em;
    height : 15em;
    object-fit: cover;
}
  .section {
    width : 20em;
    margin : 1em;
  } 
  section {
    display : flex;
    flex-direction : row;
    width : 100%;
  } 
  article{
    margin : 0 1em;
    text-align : left;
  }
  /*********affiche post categorie*****/
  .categImage {
    display : flex;
    flex-wrap : wrap;
    justify-content: center;
    align-items: center;
    gap : 3em;
  }
  .ajoutPost {
    padding :1em;
  }
  
  /*********affiche post***********/
  .article {
    display : flex;
    flex-direction : row;
    width : 90%;
    margin : auto;
  }
  .image {
    width : 18em;
    height : 18em;
    object-fit: cover;
  }
   /*******************slider******************/
  .slide {
    width : 40em;
    height : 30em;
    object-fit : cover;
    margin : auto;
  }
    /******************formulaires*********************/
  fieldset{
    width : 40%;
  }
   
}