/*  TOP BAR */

#menu-principal-complet {
  display: table;
  position: relative;
  width: 90vw;
  margin: 0 auto;
  height: 200px;
}

#menu-principal-complet div {
  display: table-cell;
  vertical-align: middle;
}

#menu-principal-complet #menu-logo-principal {
  position: relative;
  width: 300px;
  background-image: url('../svg/logotype-principal.svg');
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: 50% 35%;
}

#menu-principal-complet #menu-bouton-ouverture {
  width: 80px;
  background-image: url('../svg/icon-menu-open.svg');
  background-size: 26%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer;
}

#menu-principal-complet #menu-bouton-ouverture.open {
  background-image: url('../svg/icon-menu-close.svg');
}

#menu-principal-complet div ul {
  display: table;
  width: 100%;
  vertical-align: middle;
}

#menu-principal-complet div ul li {
  display: table-cell;
  vertical-align: middle;
}

#menu-partie-principale ul.show { display: table !important; }
#menu-partie-principale ul { display: none !important; }

#menu-principal-complet #menu-partie-principale #menu-phrase-accroche li:nth-child(1) { width: 20%; }
#menu-principal-complet #menu-partie-principale #menu-phrase-accroche li:nth-child(2) { width: 80%; }

#menu-partie-principale #menu-phrase-accroche li:nth-child(1) p {
  text-align: left;
  font-family: 'bold', sans-serif;
  padding: 20px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
}

#menu-partie-principale #menu-phrase-accroche li:nth-child(2) p {
  font-family: 'light', sans-serif;
  padding: 20px 0;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#menu-partie-principale #menu-liste-lien { width: 100%; }

#menu-partie-principale #menu-liste-lien li {
  display: inline-flex;
  border-right: 1px solid #544f50;
}

#menu-partie-principale #menu-liste-lien li:last-child {
  border-right: none;
}

#menu-partie-principale #menu-liste-lien li p {
  font-family: 'light', sans-serif;
  letter-spacing: 2px;
  padding: 8px 16px;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
}

#menu-partie-principale #menu-liste-lien li:hover p { font-family: 'bold', sans-serif; }

#decoration-menu {
  right: 0%;
  top: -32px;
  transition-duration: 0.4s;
}

#decoration-menu.open {
  right: -50%;
}

@media screen and (max-width: 1000px) {
  #menu-principal-complet { height: 160px; }
  #decoration-menu { top: -500px; }
  #menu-principal-complet div { display: inline-table; }
  #menu-partie-principale { width: 100%; }
  #menu-partie-principale #menu-phrase-accroche { display: table-caption !important; text-align: center; }
  #menu-partie-principale #menu-phrase-accroche.show { display: table-caption !important; text-align: center; }
  #menu-principal-complet #menu-partie-principale #menu-phrase-accroche li:nth-child(1) { display: none !important; }
  #menu-principal-complet #menu-partie-principale #menu-phrase-accroche li:nth-child(2) { display: none !important; }
  #menu-principal-complet #menu-logo-principal { width: 80%; height: 120px; background-position: 50%; background-size: contain; }
  #menu-principal-complet #menu-bouton-ouverture { width: 20% ; height: 120px; background-position: 50% 66%; background-size: 28px; }
  #menu-partie-principale #menu-liste-lien { text-align: center; }
  #menu-partie-principale #menu-liste-lien li { display: table-row; }
  #menu-partie-principale #menu-liste-lien li p { padding: 20px 16px 20px 16px; font-size: 20px; line-height: 16px; }
}

/* SELECTEUR */

#menu-principal-complet.selecteur { width: 90%; margin: 0 auto; height: 150px; }
#menu-principal-complet.selecteur #menu-logo-principal { width: 80%; height: 120px; background-size: contain; background-position: 50%; }
#menu-principal-complet.selecteur #menu-bouton-ouverture { width: 20% ; height: 120px; background-position: 50% 66%; background-size: 28px; }
#menu-principal-complet.selecteur div { display: inline-table; }
#menu-principal-complet.selecteur div ul li { display: table-cell; vertical-align: middle; text-align: center;}

#menu-principal-complet.selecteur #menu-partie-principale { width: 100%; }
#menu-principal-complet.selecteur #menu-partie-principale ul.show { display: table !important; }
#menu-principal-complet.selecteur #menu-partie-principale ul { display: none !important; }
#menu-principal-complet.selecteur #menu-partie-principale #menu-liste-lien { width: 100%; margin-top: 20px; }
#menu-principal-complet.selecteur #menu-partie-principale #menu-liste-lien li { display: table-row; border-right: 1px solid #544f50; }
#menu-principal-complet.selecteur #menu-partie-principale #menu-liste-lien li:last-child { border-right: none; }
#menu-principal-complet.selecteur #menu-partie-principale #menu-liste-lien li p { letter-spacing: 2px; padding: 14px 16px 30px 16px; font-size: 20px; line-height: 16px; }