/*il faudra aussi Comfortaa à certains endroits. Je l'invoque ici...*/
@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700);

.image_active {
}
#mainNav li.active a {
  color: #222;
  font-weight: bold;
} 
#mainNav .item a:hover {
  color: #666;
  font-weight: normal;
} 
#submenu p.active a {
  color: #222;
  font-weight: bold;
} 
#submenu p a:hover {
  color: #666;
  font-weight: normal;
} 
body {
  font-family: 'Raleway', sans-serif;
}
#hamburger-button {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 60px;
  padding: 0;
}
#hamburger-overlay {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-color: rgba(0, 0, 0, .4);*/
}
#hamburger-sidebar {
  display: none;
  position: fixed;
  width: 64%;
  z-index: 20;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  transform: translateX(-100%);
  transition: transform .2s ease-out;
}
#hamburger-sidebar-down li  {
  float: left;
  margin-top: 0;
  margin-left: 1.2em;
}
#hamburger-sidebar-down li:first-child  {
  margin-left: 2.8em;
}
#hamburger-sidebar-body li {
  display: block;
  margin: 0.72em 0 0.72em 2.8em;
}
#hamburger-sidebar-body li:first-child {
  display: block;
  margin-top: 2em;
}
#hamburger-sidebar-down li a {
  font-size: 14px;
  text-decoration: none;
  color: white;
}
#hamburger-sidebar-body li a {
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
}
#hamburger-sidebar-down {
  height: 118px;
}
#hamburger-sidebar-body {
  background-color: black;
  /*height: calc(100% - 118px);*/
}
@media (min-width: 200px ) and (max-width: 998px) {
  .logo { 
    grid-area: logo; 
  }
  .logo_blanc { 
    grid-area: logo_blanc; 
  }
  #hamburger-button { 
    grid-area: hamburger; 
  } 
  #hamburger-content {
    background-color: #000;
    width: 100%;
    margin-top: 0;
    padding: 12px;
  }
  .menu {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    width: 90%;
    margin: 12px auto 0 auto;
    padding: 0;
    font-size: 0.9em;
    position: sticky;
    top 0;
  }
  .logo {
    display: none;
  }
  .logo_blanc {
    grid-column: 1;
    padding: 16px 0 0 0;
    justify-self: start;
  }
  .menu img:first-child {
  }
  #hamburger-button {
    justify-self: end;
    align-self: end;
    font-size: 36px;
    margin-bottom: 4px;
    margin-right: 18px;
    color: #fff;
  }
  #hamburger-sidebar .logo, #hamburger-sidebar .logo_blanc, #hamburger-sidebar .top_illu, #hamburger-sidebar .texte, #hamburger-sidebar .down_illus  {
    display: none;
  }
  .logo_blanc img {
    margin-bottom: 12px;
  }
  h1 {
    padding: 0;
    margin-top: 20px;
    line-height: 120%;
  }
  .nav, .social {
    display: none;
  }
  .nav li, .social li {
    list-style: none; 
  }
  .nav li a, .social li a {
    text-decoration: none;
    color: #222;
  }
  .nav li a {
    font-size: 0.72em;
    text-transform: uppercase;
  }
  #hamburger-sidebar li {
    display: block;
  }
  #hamburger-button, #hamburger-sidebar,
  .hamburger-activated #hamburger-overlay {
    display: block;
  }
  .hamburger-activated  #hamburger-sidebar {
    transform: translateX(0);
  }    
  .texte {
    font-size: 120%;
  }
  .sous-menu {
    display: none;
  }
  .sous-menu-smartphone {
    display: grid;
    grid-template-columns: 33.333333337% 33.333333337% 33.333333337%;
    grid-template-rows: auto;
    max-width: 90%;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
  }
  .picto {
    margin: 0;
    padding: 0;
  }
  .picto img {
    display: block;
    margin: 0 auto 0 auto;
    width: 100%;
    height: auto;
    max-height: 100px;
  }
  .picto-texte {
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 1.2em;
  }
  .picto-texte a {
    text-decoration: none;
    color: #222;
  }
}

@media (orientation: landscape) and (min-width: 250px ) and (max-width: 998px) {
  .logo {
    display: none;
  }
  #hamburger-sidebar {
    width: 60%;
    height: 84%;
  }
}

@media (min-width: 998px) {
  .menu {
    display: grid;
    grid-template: repeat(1, 37px) / repeat(12, 1fr);
    grid-gap: 30px;
    max-width: 954px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 52px;
    position: sticky;
    top: 0;
    background: #fff; /* pour supprimer la transparence du menu sticky... */
  }
  .nav li, .social li {
    list-style: none; 
  }
  .nav li a, .social li a {
    text-decoration: none;
    color: #222;
  }
  .nav li a:hover {
    font-weight: bold;
  }

  .nav li a {
    font-size: 0.72em;
    text-transform: uppercase;
  }

  .social li a {
    font-size: 1em;
  }
  .logo_blanc {
    display: none;
  }
  .logo {
    grid-column: 1 / 4;
    padding-top: 25px;
  }
  .nav {
    grid-column: 4 / 11;
    height: 37px;
    padding-top: 25px;
  }
  .nav {
    display: flex;
    justify-content: space-between;
    /*pour éviter un espace avant le premier élément de menu*/
    padding-left: 0;
  }
  .social {
    grid-column: 11 / -1;
    height: 37px;
    padding-top: 25px;
    /*background: yellow;*/
  }
  .social {
    display: flex;
    justify-content: flex-end;
  }
  .social li {
    margin-left: 9px;
  }
  #hamburger-button {
    display: none;
  }
  .sous-menu-smartphone {
    display: none;
  }
  .sous-menu {
    display: grid;
    grid-template-columns: 16.6666666667% 16.6666666667% 16.6666666667% 16.6666666667% 16.6666666667% 16.6666666667%;
    grid-template-rows: 96px;
    margin: 0px auto 12px auto;
    max-width: 954px;
    align-items: center;
    justify-items: center;
    position: sticky;
    top: 89px;
  }
  .picto {
    margin: 0;
    padding: 0;
  }
  .picto img {
    display: block;
    margin: 0 auto 0 auto;
    /*width: 100%;*/
    height: auto;
    max-height: 100px;
  }
  .picto-texte p {
    text-align: center;
    padding: 12px;
    margin: 0;
    font-size: 0.86em;
  }
  .picto-texte p a {
    text-decoration: none;
    color: #222;
  }
}