html {
  height: 100%;
}
body {
  min-height: 100%;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
   border: 4px solid #fff;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}


.item1 { 
grid-area: header;
width:100%;
 }
.item2 { 
grid-area: logo;
width:100%; 
}
.item3 { 
grid-area: main;
min-height: 100%;
margin-right: 10%;
margin-top: 3%;
margin-bottom : 5%;
padding: 20px;
}
.item4 { 
grid-area: footer; 
margin-bottom:0;
border:0;
padding:0;
}


.grid-container {
  display: grid;
  grid-template-areas:
    'logo header'
    'logo main'
    'logo footer';
  gap: 5px;
  /*grid-template-columns: 200px 1fr;*/
  grid-template-columns: 10% 1fr;
  grid-template-rows: 15px 1fr auto;
  min-height: 100%;
  /*background-color: #2196F3;*/
  padding: 0px;
  }

.grid-container > div {
   padding: 0px 0;
  font-size: 1rem;
  font-family: Helvetica, Calibri light, sans-serif;
}



      h1 {font-size: 2.5rem;
font-family : Brush Script MT,sans serif;
        text-align: center;
			        
      }
h2 {
        font-size: 1.5rem;
        color: blue;
        font-family: Helvetica, Calibri Light, sans-serif;
        line-height: 1.6;
        letter-spacing: 1px;
text-align: center;
      }
h3 {
        text-align: left;
		scroll-margin-top:3em;
        font-family: Helvetica, Calibri Light, sans-serif;
      }
	  
 h1 + p {
        font-weight: bold;
      }

      p {
        font-size: 1rem;
        font-family: Helvetica, Calibri light, sans-serif;
        line-height: 1.6;
        letter-spacing: 1px;
		}

.main-nav {
  /*display: flex;*/
  list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #9C645E;
	position :fixed;
	top :0;
	width:100%;
	z-index:1;
	display: flex;
	/*justify-content: space-between;*/
}


nav li a {
	FLOAT:LEFT;
    display: flex;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #888888;
}

.active1 {
	FLOAT:LEFT;
display: flex;
    color: white;
	font-weight: bold;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #4472C4;
}

.active2 {
display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #FFC000;
}

.active3 {
display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #888888;;
}

.active4 {
display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #AED6F1;
}

.active5 {
display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background-color: #B97FDD;
}

.mobile{
	  display : none;
  }
.ordi{
  display : block;
  }

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
	min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align: left;
}
	
/*li a, .dropbtn {
    display: inline-block;
    color: red;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}*/


.dropdown-content a {
    color: black;
   padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #888888}

.dropdown:hover .dropdown-content {
    display: block;
}



.push {
  margin-left: auto;
}

  .accordion ul {
  padding-left: 0;
  list-style-type: none;
 text-align :left;
 }
 

.tableauML{
  border: 1px solid #333;
   padding-left: 2rem;
   padding-right: 2rem;
   padding-top: 2rem;
   background-color:#ACCCEA;
   display :flex;
   
}

	  
	  .bleu
{
color : blue;
}



ul {
  padding-left: 2rem;
  list-style-type: none;
 text-align :left;
 }

ul li.bleue{
  padding-left: 2rem;
  background-image: url(puce_bleue.png);
  background-position: 0 0;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  font-size: 1rem;
        font-family: Helvetica, Calibri light, sans-serif;
        line-height: 1.3;
        letter-spacing: 1px;
}

ul li.orange {
  padding-left: 2rem;
  background-image: url(puce_orange.png);
  background-position: 0 0;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  font-size: 1rem;
        font-family: Helvetica, Calibri light, sans-serif;
        line-height: 1.2;
        letter-spacing: 1px;
}

ul li.gris {
  padding-left: 2rem;
  background-image: url(puce_gris.png);
  background-position: 0 0;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  font-size: 1rem;
        font-family: Helvetica, Calibri light, sans-serif;
        line-height: 1.2;
        letter-spacing: 1px;
}

ul li.saumon {
  padding-left: 2rem;
  background-image: url(puce_saumon.png);
  background-position: 0 0;
  background-size: 1rem 1rem;
  background-repeat: no-repeat;
  font-size: 1rem;
        font-family: Helvetica, Calibri light, sans-serif;
        line-height: 1.3;
        letter-spacing: 1px;
}

.flip-box {
  background-color: transparent;
  width: 400px;
  height: 400px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  
}

/* Style the front side */
.flip-box-front {
  background-color: white;
  color: #9C645E;
}

/* Style the back side */
.flip-box-back {
  background-color: white;
  color: #9C645E;
  transform: rotateY(180deg);
}
.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-back {
  transform: rotateX(180deg);
}

.violet{
color:purple;
}

.centre{
text-align:center;
}

.orangetxt {
color : #FFC000;
}

.gristxt {
color:#888888 
}
.saumontxt {
color:#ED7D31 
}

.bleuclairtxt
{
color : #AED6F1;
}

.exergue{
	color:#9C645E;
}

footer {
  text-align: center;
  padding: 5px;
  background-color: #9C645E;
  color: white;
  position: relative;
  bottom:0px;
  width:100%;
  }
  
  footer a {
    color: white;
    padding: 5px 5px;
	text-decoration: none;
 }
 
 footer a:hover {
    background-color: #888888;
}
 
.coord{
font-size:1.5rem;
}

@media all and (max-width: 600px) {
   .mobile{
	  display:block;
  }
  .ordi{
  display:none;
  }
 }

@media all and (max-width: 990px) {
  .toggle {
    display:block;
	font-size: 1.5rem;
	position:relative;
	z-index:20;
	height: 30px;
	width: 35px;
	padding-top:1px;
	background-color: #9C645E;
	cursor:pointer;
  }
  
  .main-nav{
	position:absolute;
	top:45px;
	  display:flex;
	  flex-direction: column;
	  width:50%;
	  transform: translateX(-150%);
	  vertical-align: left;
  }

  .open .main-nav {
	  transform: translateX(0);
  }

  .ouvrir {
    display:block;
  }

  .fermer {
    display:none;
  }

  .open .ouvrir {
    display:none;
  }

  .open .fermer {
    display:block;
  }
  
  h1 {
font-size: 1.8rem;
  }
  
  ul {
	  padding-left: 0.5rem;
  }
  ul li{
	   padding-left: 0.5rem;
  }
 
	  
  
  .tableauML {
	

	table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    tr {
      margin: 0 0 1rem 0;
    }
      
    /*tr:nth-child(odd) {
      background: #ccc;
    }*/
    
		td {
			/* Behave  like a "row" */
			border: none;
			position: relative;
			/*padding-left: 50%;*/
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}
  }
  
  .tableau {
	

	table, thead, tbody, th, td, tr {
			display: block;
		}

		
    tr {
      margin: 0 0 0 0;
    }
      
    /*tr:nth-child(odd) {
      background: #ccc;
    }*/
    
		td {
			/* Behave  like a "row" */
			border: none;
			position: relative;
			/*padding-left: 50%;*/
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 1px;
			width: 45%;
			padding-right: 1px;
			white-space: nowrap;
		}
  }
 }
 
 
 
 
 .burger-icon{
  display: block;
  width: 25px;
  height: 4px;
  margin: 5px;
  background-color: #FFFFFF;
  z-index:30;
  border-radius: 0.1875rem;
 }
 
 .close-icon{
  display: block;
   height: 4px;
  color: #FFFFFF;
  font-weight:bold;
  text-align:center;
  z-index:30;
 }
 
 a {
  text-decoration: none;
 }

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

/*.derriere img{
	z-index:2;
	position:relative;
}

.derriere p{
	z-index:1;
	position: relative;
}*/
.derriere{
	display:none;
}


.plus{
display : block;
}

.moins{
display : none;
}