.header-Container {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

.header-Burger {
  position: absolute;
  z-index: 10;
  right: 1rem;
  top: 0;
  padding: 0.4rem;
  border: none;
  background: var(--april-couleur-principale);
  color: white;
  font-size: 0.9em;
  outline: none !important;
  display: none;
}

.header-Burger.header-Actif {
  color: var(--april-couleur-actif);
}

.header-Slogan {
  display: none;
}

.header-Title h1 {
  margin: 0;
}

@media (max-width: 48em) {
  .header-Burger {
    display: block;
  }
}

@media print {
  
  .header-Title {
    display: block !important;
    width: 100%;
    font-size: 2.25em;
    font-weight: bold;
    border-bottom: 1px solid #DDD;
    padding-bottom: 0.5em;
    margin-bottom: 0.75em;
  }
  
  .header-Title a {
    text-decoration: none !important;
  }
  
}

@media (max-width: 768px) {
  
  .header-Container {
    display:         block;
    padding: 0;
  }
  
  .header-Title {
    display: none;
  }
}

/*******************************************************************************
* .header-nav
*******************************************************************************/

.header-nav-Bloc {
  padding-top: 0.5rem;
  font-size: 0.95rem;
   position: relative;
   flex-grow: 1;
}

.header-nav-Item {
  display: inline;
  line-height: 1.2;
}

.header-nav-Lien {
  display: inline-block;
  padding: 0.3em 0 0.2em;
  margin: 0 0.5em 0.4em;
  text-decoration: none;
  line-height: 1.4;
  border-bottom: 3px solid white;
  font-weight: 700;
}

.header-nav-Lien.on, .header-nav-Lien:hover, .header-nav-Lien:focus, .header-nav-Lien:active {
  border-color: var(--april-couleur-selection);
}

.header-nav-Liste {
  margin: 0;
  padding: 0;
  text-align: right;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 768px) {
  
  .header-nav-Item {
    display: block;
  }
  
  .header-nav-Lien {
    color: white;
    border: 0;
    display: block;
    margin: 0;
    padding: 0.5rem;
  }
  
  .header-nav-Liste {
    
    position: absolute;
    background: var(--april-couleur-principale);
    width: 100%;
    top: 36px;
    left: -100%;
    padding: 0.5rem 1rem;
    text-align: center;
    z-index: 10;
  }
  
  .header-nav-Liste.header-Ouvert {
    left: 0;
  }
  
  .header-nav-Lien:hover, .header-nav-Lien:focus, .header-nav-Lien.on {
    background: var(--april-couleur-selection);
  }
  
}


/*******************************************************************************
* .header-Loupe
*******************************************************************************/

.header-Loupe .formulaire_recherche {
  position: absolute;
  height: auto;
  width: 21.875em;
  max-width: 21.875em;
  top: -1000px;
  left: auto;
  right: 0;
  border-radius: 0.5rem;
  z-index: 2;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.header-Loupe .formulaire_recherche form:before {
  left: 0.5rem;
}
.header-Loupe .formulaire_recherche #recherche {
  width: 100%;
}
.header-Loupe .formulaire_recherche.vu {
  top: 1rem;
}



.header-Loupe {
  position: relative;
  display: inline-block !important;
}

.header-Loupe span {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */
  /*
     * Extends the .visuallyhidden class to allow the element
     * to be focusable when navigated to via the keyboard:
     * https://www.drupal.org/node/897638
     */
}

.header-Loupe span .focusable:active, .header-Loupe span .focusable:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}
.header-Loupe a {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
}

@media (max-width: 768px) {
  .header-Loupe .fas, .header-Loupe .formulaire_spip.formulaire_recherche form:before, .formulaire_spip.formulaire_recherche .header-Loupe form:before {
    color: white;
  }
  .header-Loupe .formulaire_recherche.vu {
    right: 50%;
    margin-right: -160px;
    max-width: 320px;
  }
  .header-Loupe .formulaire_recherche.vu form {
    padding: 0.5rem;
  }
  .header-Loupe .formulaire_recherche.vu form:before {
    display: none;
  }
}

/*******************************************************************************
* .header-loupe-
*******************************************************************************/

.header-loupe-Picto {
  font-size: 1rem;
  border-radius: 20px;
  background-color: var(--april-couleur-principale);
  padding: 7px;
  color: white;
}

a:hover .header-loupe-Picto, a:focus .header-loupe-Picto {
  background-color: var(--april-couleur-selection);
  color: white;
}