/* HEADER */

header{
  padding: calc(2 * var(--spacing));

  background-color: var(--white);
  position: sticky; top: 0px; z-index: 9;
}
header h1 { font-size:inherit; font-weight:normal; }
header nav#menu ul{
  display : flex; justify-content: space-between;
  gap:calc(var(--spacing) * 2);
}
header nav#menu ul li{
  list-style:none;
  text-align:right;
  text-transform: uppercase;
  font-size:var(--fs-4);
  line-height:var(--fs-4);
}
header nav#menu ul li:first-of-type{
  text-align:left;
  
}
header nav#menu ul li a {
  display: inline-block;
}


@media(min-width:1200px) {

  header nav#menu ul li.focus a{
    padding-top:var(--fs-4);
  }
  header nav#menu ul li:not(li.focus) a { padding-bottom:var(--fs-4); }
  header nav#menu ul li:not(li.focus) a:hover{ padding-bottom:0; }
  header nav#menu ul li:not(li.focus) a:hover {
    padding-top:var(--fs-4);
  }
  
}

@media(max-width:500px) {
  header {
    padding-bottom: calc(1 * var(--spacing));
  }

}


/* MENU MOBILE */

#menu_mobile {
    display: none;

    position: absolute;
    left: 0px;
    width: 100%;
    padding: 0px calc(2 * var(--spacing));
    background-color: var(--white);

    font-size: var(--fs-4);
    line-height: var(--fs-4);
    text-transform: uppercase;
}
#menu_mobile.active { display: block; }

#menu_mobile ul {
    list-style: none;
}
#menu_mobile ul li.focus { font-weight: bold; }
#menu_mobile ul li a {
    display: block;
    padding: var(--spacing) 0px;
    text-align: center;

}
#menu_mobile_toggle {
    display: none;

    border: 0px;
    background: none;
    cursor: pointer;
    padding: 13px;
}

@media(max-width:500px) {
    #menu_mobile ul li a {
        display: block;
        padding: calc(1.5 * var(--spacing)) 0px;
    }
}
@media(max-width:1200px) {
    /* icon burger apparaît */
    #menu_mobile_toggle { display: block; }
    /* li desktop disparaissent */
    header nav#menu ul li:not(:first-of-type) { display: none; }
    #menu { display: flex; justify-content: space-between; align-items: center; }
}