/* -----------------------------------------------------------------------------
  STYLES pour appareils < 575px
------------------------------------------------------------------------------*/
/* FORMATAGE DE BASE
------------------------------------------------*/
html {
  font-size: 18px; /* utile si on a besoin d'utiliser cette taille comme référence avec 1rem - root em */
}
body {
  font: 300 1em/1.5 "Roboto", sans-serif; /* 1em = 18px */
}



/* HEADER
------------------------------------------------*/
header {


}

.main-header {
	background: #fff;
	padding: 1em;
	align-items: center;
}



/* LOGO (balise figure)
------------------------------------------------*/
figure img {
	width: 20%;
  margin: 12px;
}


/* Positionement Logo/Nav en fonction du theme
------------------------------------------------*/
#theme-nav-right {
  /* par défaut, rien à faire */
}
#theme-nav-left {
  flex-direction: row-reverse; /* renverse les éléments ! */
}


/* MOBILE NAV
------------------------------------------------*/
/* Open/Close - Common
----------------------------*/
#hamburger, nav #close {
  display: block;
}


/* Hamburger Menu
----------------------------*/
#hamburger {
  width: 50px;
  height: 50px;
  background: rgb(144, 105, 179,.01);

  /* parce qu'on utilise du text... */
  text-align: center;
  font-size: 2em;
  line-height: 2;
}


/* CLOSE NAV
----------------------------*/
nav #close {
  width: 100%;
  padding: .5em .5em .5em 0;
  text-align: right;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: #9069B2;
}
nav #close:hover {
  background: #9069B2;
  color: #fff;
}


/* NAV - styles de base
----------------------------*/
nav {
  background-color: #;
  width: 100%;
  max-width: 420px;
  height: 100vh; /* vh = viewport height, 100% du viewport */
  position: fixed; /* important; libère la nav du flow de la page */
  top: 0;
  margin: 0;
  padding-bottom: ;
  box-shadow: ;
  z-index: 2;
}

/* La liste des menus */
nav ul {
  border-top: ;
  border-bottom: ;
  padding-bottom: 1em;
  width: 95%;
}
nav ul li {
  display: inline-block;
  width: 100%;
}
nav ul li a {
  /*display: block;
  width: 100%;
  padding: .35em .2em .2em 1em;
  border-bottom: solid 1px #9069B2;
  font-size: 1.8em;
  text-align: left;
  color: #9069B2;
  font-size: 2.3em;
  font-family: "Great Vibes", cursive;
  color: #9069B2;*/

display: block;
width: 100%;
padding: .35em .2em .2em 1em;
border-bottom: dashed 1px #cbb0e2;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
font-size: 1.8em;
text-align: center;
color: #9069B2;
font-size: 2.3em;
font-family: "Great Vibes", cursive;
color: #161417;
}
nav ul li a:hover,
nav ul li a.active {
  /*background: #9069B2;*/
  color: #9069B2;
}


/* ANIM NAV - COMMON
----------------------------*/
nav.open {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.01,.68,.32,.99);
  background-color: #fff;
}
nav.close {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.85,.01,1,.44);
}


/* ANIM NAV - FROM RIGHT
----------------------------*/
#theme-nav-right nav {
  right: -450px;
}
#theme-nav-right nav.open {
  right: 0;
  animation-name: slideInRight;
}
#theme-nav-right nav.close {
  animation-name: slideOutRight;
}
@keyframes slideInRight {
  from {
    right: -450px;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
@keyframes slideOutRight {
  from {
    right: 0;
    opacity: 1;
  }
  to {
    right: -450px;
    opacity: 0;
  }
}



/* -----------------------------------------------------------------------------
  STYLES pour appareils >= 576px
------------------------------------------------------------------------------*/
@media (min-width: 576px) {
  /* rien à faire pour le menu */
}


/* -----------------------------------------------------------------------------
  STYLES pour appareils >= 768px
------------------------------------------------------------------------------*/
@media (min-width: 800px) {


  #theme-nav-right nav {
    position: static;
    border-radius: 50%;/* remettre la nav dans le flow de la page */
  }



  .logo {
  	width: 100px;
  	padding: 10px;
  }


    nav {
      display: block;
      min-width: 100%;
      height: 40px;
      position: relative;

    }
    nav ul {

    }
    #theme-nav-right nav ul {
      text-align: center;
      margin: auto;
      background-color: ;
      border-radius: 50%;
    }
    nav ul li {
      display: inline-block;
      padding: 0;
      width: auto;
    }
    nav ul li a {
      display: inline-block;
      padding: 0 1.0em;
      font-size: 1em;
      line-height: inherit;
      margin: 0;
      border: none;
      color: #8e8c8c;
    }
    nav ul li a:hover {
      background: none;

    }
    nav ul li:last-child a {
      padding-right: 0;
    }

    /* Hamburger & Close */
    #hamburger, nav #close {
      display: none;
    }
  }



/* -----------------------------------------------------------------------------
  STYLES pour appareils >= 952px
------------------------------------------------------------------------------*/
@media (min-width: 928px) {
  nav ul li a {
    padding: 0 1.5em;
    }
  }
  /* rien à faire pour le menu */

 /* ----------------------------------------------------------------------------
  STYLES pour appareils entre 768px et 1024px !
  On trouve dans cette plage les tablettes
  Puisqu'il y a du "touch" on agrandi un peu le texte
 -----------------------------------------------------------------------------*/
@media (min-width: 800px) and (max-width: 1024px) {
  nav ul li a {
    font-size: 1.7em;
    font-family: "Great Vibes", cursive;
    color: ;
    margin: auto;
  }
}


/* -----------------------------------------------------------------------------
  STYLES pour appareils >= 1024px
------------------------------------------------------------------------------*/
@media (min-width: 1024px) {
  nav ul li a {
    font-size: 1.7em;
    font-family: "Great Vibes", cursive;
    color: ;
    margin: auto;
}



/* -----------------------------------------------------------------------------
  STYLES pour appareils >= 1200px
------------------------------------------------------------------------------*/
@media (min-width: 1032px) {
  nav ul li a {
    font-size: 1.9em;
}