@font-face {
    font-family: Greenwashing-Machine; 
    src: url(./fonts/Greenwashing-Machine.otf); 
  }
  @font-face {
    font-family: ModernAntiqua; 
    src: url(./fonts/ModernAntiqua-Book.ttf); 
  }
  @font-face {
    font-family: ModernAntiqua; 
    src: url(./fonts/ModernAntiqua-Bold.ttf); 
    font-weight: bold;
  }
  @font-face {
    font-family: ModernAntiqua; 
    src: url(./fonts/ModernAntiqua-BoldOblique.ttf); 
    font-weight: bold;
    font-style: italic;
  }

  :root {
      --noir: rgb(0, 0, 0);
      --blanc: rgb(255, 255, 255);
      --blanc-transparent: rgba(255, 255, 255, 0.3);
      --transparent: rgba(255, 255, 255, 0);
      --marron: rgb(137, 127, 68);
      --jaune: rgb(230, 160, 60);
      --vert: rgb(0, 60, 56);
      --bleu: rgb(172, 198, 235);
      --violet: rgb(137, 143, 188);
      --gris: rgb(68, 68, 68);
  }



  html{
    color:var(--blanc);
    font-family: ModernAntiqua;
    font-size:1.2rem;
  }

  html,body{
    margin:0;
    padding:0;
  }

 
  h1,h2,h3,h4,h5,h6{
    color:var(--blanc);
  }
  h1{
    font-family: Greenwashing-Machine;
    font-size: 2.5rem;
    color : var(--marron);
  }
  h2{
    font-weight: bold;
    font-size: 2rem;
    color : var(--jaune);
  }
  h1:before,h2:before{
    content: '';
    display: block;
    height: 80px;
    visibility: hidden;
  }
  @media (max-width: 999px) {
    h1:before,h2:before{
      height: 70px;
    }
  }
  h3{
    font-size:1.5rem;
  }

  a{
    color: var(--blanc);
    font-weight: bold;
  }


  .flex {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
  }



  header{
    border-bottom : 1px solid var(--blanc);
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    background-color:var(--vert);
    color: var(--noir);
    position: sticky;
    top: 0;
    width:100%;
    padding:10px 0;
    z-index:100;
  }
  header a{
    text-decoration: none;
    color : var(--jaune);
  }


  /* MENU */

  nav > ul {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding-left:30px;
    margin-top: 23px;
  }

  nav > ul > li {
    display : inline-block;
    overflow: hidden;
    margin-right:30px;
    /*cursor:pointer;
    -webkit-tap-highlight-color: var(--marron); */
  }

  nav > ul > li ul{
    display:none;
    padding:5px 20px;
    font-weight:normal;
  }

  nav > ul > li:hover > ul{
      position:absolute;
      display:block;
      margin : 0;
      background : var(--vert);
      border-left : 2px solid var(--jaune);
  }

  nav > ul > li ul li{
    padding:10px 0;
  }
  
  .menu-button-container {
    display: none;
    height: 100%;
    width: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*cursor:pointer;
    -webkit-tap-highlight-color: transparent; */
  }

  #menu-toggle {
    display: none;
  }

  .menu-button,
  .menu-button::before,
  .menu-button::after {
    display: block;
    background-color: var(--jaune);
    position: absolute;
    height: 4px;
    width: 30px;
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: 2px;
  }

  .menu-button::before {
    content: '';
    margin-top: -8px;
  }

  .menu-button::after {
    content: '';
    margin-top: 8px;
  }

  #menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(405deg);
  }

  #menu-toggle:checked + .menu-button-container .menu-button {
    background: var(--transparent);
  }

  #menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-405deg);
  }

  /** MEDIA QUERIE MENU **/

  /* burger menu */
  @media (max-width: 999px) {
    .menu-button-container {
      display: flex;
      position: absolute;
      right: 30px;
    }
    nav > ul {
      display: block;
      position: absolute;
      top: 0;
      margin-top: 69px;
      padding-left:0px;
      left: 0;
      width: 100%;

    background-color: var(--violet);
    }
    #menu-toggle ~ ul li {
      height: 0;
      margin-bottom: -10px;
      padding: 0;
      border:0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ ul li {
      /*border: 1px solid var(--gris);*/
      height: auto;
      /*padding: 0.5em;*/
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
      padding:15px 0;
    }

    nav ul > li {
      display: block;
      /*justify-content: center;*/
      text-align: center;
      margin: 0;
      /*padding: 0.5em 0*/;
      width: 100%;
      background-color: var(--violet);
    }

    nav > ul > li:not(:last-child) {
      border-bottom: 1px solid var(--gris);
      background : var(--violet);
    }

      nav ul li a {
    color:var(--vert);
  }

    nav ul > li {
      margin: 0;
      /*padding: 0.5em 0;*/
      width: 100%;
      background-color: var(--violet);
    }

        nav a{
      color: var(--vert);
    }

    nav > ul > li ul{
      display:block;
      position:relative;
      font-size:80%;
      background: var(--violet);
      margin:0;
      padding:0;
      border:0px;

    }

    nav > ul > li:hover > ul{
      position:relative;
      display:block;
      margin : 0;
      border-left : 0px;
      background: var(--violet)
    }
  }


/* SUBMENU */

.submenu{
  display:block;
  font-size: 0.8em;
}

.submenu ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  background-color: var(--transparent);
  position:relative;
  gap:15px;
  margin-top : 0px;
}

.submenu ul li{
  background-color: var(--transparent);
  margin-right:0px;
}

.submenu ul li a{
  background-color: var(--violet);
  color:var(--vert);
  padding:15px;
  border-radius:10px;
  text-decoration: none;
}

 @media (max-width: 999px) {

nav.submenu{
  display:block;
}

nav.submenu > ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  background-color: var(--transparent);
  position:relative;
  gap:15px;
}

nav.submenu > ul > li{
  background: var(--transparent);
  border : 0px;
  width:auto;
}

nav.submenu > ul > li a{
  background-color: var(--violet);
  padding:15px;
  border-radius:10px;
  text-decoration: none;
}


 }



 #logo{
    grid-row: 1 / 2;
    grid-column: 1 / 1;
    align-self: center;
    padding-left: 50px;
  }

  #logo img{
    height:70px;
  }

  #logo a{
    font-family: ModernAntiqua; 
    color:var(--blanc);
  }

  #logo a .gw{
    color:var(--blanc);
  }

 #title{
     /*grid-row: 2 / 1;
     grid-column: 2 / 40;*/
     display:none;
  }

  nav a svg{
    fill:var(--blanc);
  }

  main{
    background: linear-gradient(
      180deg, var(--vert), 80%, var(--violet)
    );
    min-height: 100vh;
  }

  section{
     padding:0 5% 50px 5%; 
     margin:auto; 
     width:90%;
     max-width:800px;
     text-align:center;
  }
  main ul{
    padding:0;
  }
  ul li{
    list-style: none;
  }

  main img{
    width:100%;
  }
  section{
    text-align: center;
  }

  footer{
    text-align: center;
    border-top : 1px solid var(--blanc);
    padding:10px 10px 0 10px;
    bottom:0;
    color: var(--vert);
    background-color: var(--violet);
    font-weight: bold;
  }
  footer a{
    color: var(--vert);
  }
  
main{ 
    h1,h2,h3,p,ul,li,a{
    padding:10px 0; 
  }
}


a.button{
  background-color:var(--bleu);
  color : var(--vert);
  border-radius: 9999px;
  font-weight: bold;
  padding:1rem 2rem;  
  text-decoration:none;
  margin-bottom:5px;
  display:inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: var(--transparent); 
}

a.button:active{
  background-color:var(--marron);
}

.col50{
  width:40%;
}


footer img{
  height : 50px;
  padding:10px;
}

iframe{
  width:100%;
  height:350px;
}

table{
  border-collapse: collapse;
  width:100%;
}
@media (max-width: 999px) {
    table{
      font-size: 0.8em;
    }
}
table tr{
  border-bottom:1pt solid var(--jaune);
}
table td{
padding:10px 5px;
}



.gw{
  font-family: Greenwashing-Machine;
  color:var(--jaune);
}

hr{
  color : var(--jaune);
}