/*=========================================HEADER==========================================*/
#header.header-scrolled { 
  height: 70px;
}
#header .logo {
  margin: 0;
  padding: 0;
  line-height: 1;
}
#header .logo a {
  height: 50px;
}
#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 50px;
  height: 40px;
}
#header > div {
  display: flex;
  justify-content: space-between ;
  align-items: center;
  width: 100%; 
  padding-right: 15px;
  padding-left: 15px;
}  
.header {
  position: fixed; 
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;  
  z-index: 1000;
  height: 70px;
  background: var(--color-blanc);  
  transition: all 0.5s;
  background-color: #f5f5f5;
}
.backend {
  background: var(--color-noir);
}
.header-backend {
  background-color: var(--color-jaune);
}

@media (min-width: 576px) {
  #header > div {
    max-width: 576px; 
    width: 100%;
  }
}
@media (min-width: 768px) {
  #header > div {
    max-width: 768px;    
    width: 100%;
  }
}
@media (min-width: 810px) {
  #header > div {
    max-width: 810px;    
    width: 100%;
  }
}
@media (min-width: 992px) {
  #header > div {
    max-width: 992px;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  #header > div{
    max-width: 1200px;
    width: 100%;
  }
}
 @media (min-width: 1400px) {
  #header > div {
    max-width: 1400px;
    width: 100%;
  }
} 
@media (min-width: 1800px) {
  #header > div {
    max-width: 1920px;
    width: 1895px;
  }
}
/*--------------Menu de Navigation--------------------------*/
/*Desktop Navigation*/
.navbar {
  display: flex;
  align-items: center;
  padding: 0;
}
.navbar ul {
  display: flex;
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.navbar ul.connexion-mobile {
  
  background-color: transparent;
  top: 206px;
  color: white;
}
.navbar li {
  position: relative; 
}
.navbar li a.sep {
  color: var(--color-jaune);
  font-size: 24px;
}
.navbar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  padding: 2px 12px 0;
  font-size: 1.2rem;
  color: var(--color-noir);
  font-family: 'Glacial Bold';
}
.navbar ul.connecte {
  margin-left: 10px;
  display: none;
  text-align: center;
}
.navbar ul.connecte li a {
  text-align: center;
}
.navbar ul.connecte li a:nth-child(2) {
  padding: 0;
}
.navbar ul li.active a , .navbar a:focus{
  font-size: 1.2rem;
  color: var(--color-noir);  
}
.bi-list,
.bi-x {
  position: relative;  
  height: 24px;
  width: 24px; 
  background-repeat: no-repeat;  
  background-position: center;
  background-size: cover;
  align-items: center;
}
.bi-list {
  background: url(../imgs/burger.svg);
  background-repeat: no-repeat;
  width: 30px;
  height: 25px;
  background-size: cover;
}
.bi-x {
  background: url(../imgs/croix.svg);
  background-repeat: no-repeat;
  width: 30px;
  height: 25px;
  background-size: cover;
}
.navbar a:hover, .navbar .active, .navbar .active:focus  {
 color: var(--color-noir);
}
.navbar a:hover, .navbar .active, .navbar .active:focus  {
   color: var(--color-noir);  
}
.cadre-gerer {
  display: flex;
  flex-direction: column;
  align-items: center;  
  padding:  5px 3px;
  background-color: var(--color-jaune);
  color: var(--color-noir);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
}
.mobile-cadre-gerer {
  display: flex;
  flex-direction: column;
  align-items: center;  
  padding:  5px 3px;
  background-color: var(--color-jaune);
  color: var(--color-noir);
  border-radius: 8px;
  cursor: pointer;    
  font-size: 1.2rem;
}
nav ul li small {
  padding:  0px 0px 5px;
  margin: 0 ;
  font-size: .9rem;
  color: var(--color-gris-fonce);
}
.cadre-gerer:hover,
.cadre-gerer:hover a {
  background-color: var(--color-jaune-hover);   
  color: var(--color-blanc);
  text-decoration: none; 
} 
.navbar ul>span {
  height: 25px;
  width: 3px;
  margin: 0 20px 0 15px;
  background-color: var(--color-jaune);
}
/*Mobile Navigation*/
.mobile-nav-toggle {
  color: var(--color-noir);
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}
a.mobile-nav-toggle.mobile-cadre-gerer {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  background-color: var(--color-jaune);
  color: var(--color-noir);
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  margin: 0 12px;
  padding: 12px;
}
.mobile-nav-toggle {
  display: block;
}
.navbar ul {
  display: none;
}
a.mobile-nav-toggle.mobile-cadre-gerer {
  display: flex;
}
a.mobile-nav-toggle.mobile-cadre-gerer {
  padding: 18px 12px;
  border-radius: 8px;
  font-size: .8rem;
  margin: 0 8px;
}
nav.navbar.navbar-mobile .mobile-nav-toggle.mobile-cadre-gerer {
  display: none;
}
nav.navbar.navbar-mobile ul li.cadre-gerer {
  display: none;
}
.navbar ul.connexion-mobile {
  background-color: transparent;
  top: 140px;   
}
@media (min-width: 350px) {
  a.mobile-nav-toggle.mobile-cadre-gerer {
    padding: 18px 12px;
    border-radius: 8px;
    font-size: 1rem;
    margin: 0 8px;
  }
}
@media (min-width: 768px) {   
  nav.navbar.navbar-mobile ul li.cadre-gerer {
    display: none;
  }
  .navbar ul.connexion-mobile {
    background-color: transparent;
    top: 143px;   
  }
}
/*de 0 a 991px*/
 @media (min-width: 1024px) {   
  .navbar ul.connexion-mobile {
    display: none;
  }
  .mobile-nav-toggle {
    display: none;
  }
  .navbar ul {
    display: flex;
  }
  a.mobile-nav-toggle.mobile-cadre-gerer {
    display: none;
  }
  a.mobile-nav-toggle.mobile-cadre-gerer {
    padding: 18px 12px;
    border-radius: 8px;
    font-size: 1rem;
    margin: 0 8px;
  }
  nav.navbar.navbar-mobile .mobile-nav-toggle.mobile-cadre-gerer {
    display: none;
  }
 } 
@media (min-width: 1024px) {
  .navbar ul.connecte {
    margin-left: 10px;
    display: block;
  }
  .navbar a {
    font-size: 1.1rem;
  }
  nav ul li small  {
    font-size: .8rem;
    
  }
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: var(--color-noir);
transition: 0.3s;
width: 100%;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 22px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
background-color:var(--color-noir);
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a, .navbar-mobile a:focus {

padding: 3px 20px;
font-family: 'Glacial Regular';
font-size: 1.2rem;
font-weight: 500;
color: var(--color-blanc);
}
.navbar-mobile .gerer-rdv {
background-color: transparent;
padding: 4px 0;
margin: 0 0 0 20px;
font-family: 'Glacial Regular';
font-size: 1.2rem;
font-weight: 500;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #f0f0f0;
background-color: var(--color-jaune);
border-radius: 0;
padding: 3px 20px;
font-family: 'Glacial Regular';
font-size: 1.2rem;
font-weight: 500;
margin: 0;
}
.menu-item-has-children {
  position: relative;
  display: flex;
}
.menu-item-has-children:hover {
  background-color: rgb(224, 224, 224);
}
.menu-item-has-children:hover ul {
  display: flex;
}
.menu-item-has-children ul {
  position: absolute;
  display: none;
  top: 37px;
  left: -19px;  
  flex-direction: column;  
  align-items: flex-start;
  padding: 8px;
  box-shadow: 0 0 8px 0 #cccccc;
  border-radius: 5px;
  z-index: 5;
  background-color: white;
}
.menu-item-has-children ul.sub-menu li {
  display: flex;  
  justify-content: flex-start;
  align-items: center;
}
.menu-item-has-children ul.sub-menu li:hover {
  background-color: rgb(224, 224, 224);
  
}
@media screen and (  min-width: 1280px)   {
  .navbar a {
    font-size: 1.2rem;
  }
  nav ul li small  {
    font-size: .9rem;    
  }
}