/*
menu
*/
:where(html) {
  --menu-font: var(--font-base);
  --menu-weight: 400;
  --menu-bg-color:var(--grey-1);
  --menu-bg-color-hover:var(--primary);
  --menu-color:var(--white);
  --menu-color-hover:var(--white);
  --menu-icon-open-color:var(--primary);
}

@media (prefers-color-scheme: dark) and  (max-width: 1024px) {
  :where(html) {

  }
}
.site-header {padding-block: 12px 10px; padding-inline: var(--container-gap-v);box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 15%);}
.header-container {width: 100%;display: flex;justify-content: space-between;align-items: center;position: relative;}

.site-header .brand-image {height: 62px;width: auto;mix-blend-mode: darken;}

/*@media (min-width: 1025px) {
  .site-header .home-link {position: absolute;left:50%;top:40%;transform: translate(-50%,-50%);}
  .site-header {padding-block: 88px; }
  .site-header .brand-image {height: 80px;}
}*/

body.header-fixed{padding-top: var(--s-pad-block) }
/* agrandi le contenu pour detecter un click hors du menu*/
.site-main {min-height: calc(100vh - var(--topbar-h));}

/*
main navigation
*/

.main-navigation {
  background-color: var(--menu-bg-color);
  position: fixed;
  top: var(--topbar-h);
  left:auto;
  right: 0;
  padding: 0;
  margin: 0;
  width: 260px;
  height: 100%;
  transition: transform .5s 0s, visibility 0s 0s;
  transform: translateX(260px);
  z-index: 2000;
  visibility: hidden;
}
.main-navigation .menu {display: flex;gap:0;font-family: var(--menu-font);font-weight: var(--menu-weight);}
.main-navigation .menu-item {display: block;}
.main-navigation .menu-item svg {width: 24px;height: 24px; margin:auto ;fill :currentColor }
.main-navigation .menu-item >a {display: block;
  color:var(--menu-color);
  padding:var(--size-1);
  line-height: 1;
  text-decoration: none;
  /*text-underline-offset: 1em;
  text-decoration-thickness: 2px;
  opacity: .75;*/
}


/*@media (min-width: 1025px) {
  .main-navigation {width: 100%; }
  .main-navigation .current-menu-item>a,
  .main-navigation .menu-item>a:is(:hover,:active,:focus-visible) {opacity: 1;  }
  .main-navigation .current-menu-item>a {opacity: 1;text-decoration: underline;  }
  .main-navigation .menu-item:nth-child(3) {margin-left: auto}
  .main-navigation .menu-item svg {display: none;}
}*/

/*
sub menu
*/

@media (min-width: 1025px) {
  .sub-menu {
    position: absolute;
    display: block;
    z-index: 2;
    visibility: hidden;
    top: 100%;
    left: 0;
    opacity: 0;
    margin-top: -1px;
    /*transition: transform .1s linear .5s,opacity .1s linear .5s,visibility .1s linear .5s;*/
    transition: .1s linear ;
    transform: translateY(20px);

    border: 1px solid #dfe5e8;
    border-top: 0;
    width: 280px;
    background-color: #f4f6f7;
  }
}
.menu-item-has-children {position: relative;margin-bottom: -20px; padding-bottom: 20px;mix-blend-mode: darken;}
.menu-item-has-children>a:where(:hover,:focus,:active)+.sub-menu ,
.menu-item-has-children:where(:hover,:focus,:active,:focus-within)>.sub-menu {visibility: visible;opacity: 1;
  transition:  .3s linear;
  transform: translateY(0);
}

.submenu-arrow {vertical-align: middle;}

.menu-back {border-radius: 24px; border: 0;padding: 0;background-color: var(--white);color:var(--primary);width: 48px;height: 48px;display: grid;place-content: center;cursor: pointer;}
.menu-back >* {fill:currentColor;}
.home .menu-back {visibility: hidden;}
.menu-toggle {width: 48px;height: 30px;border:0;background: none;cursor: pointer;padding: 0;}
.menu-icon > * {fill: var(--menu-icon-open-color); }

/*@media (min-width: 1025px) {
  .menu-toggle {display: none;}
  .main-navigation .sub-menu .menu-item>a {padding:15px 30px 15px 27px;font-family: var(--font-base);font-weight: 400;font-size: 16px; border-left: 3px solid transparent;transition: .3s;letter-spacing: normal;}
  .main-navigation .sub-menu .menu-item>a:where(:hover,:focus,:active) {background-color:var(--white);color: var(--grey-4);border-color: #e4a374;}
}*/

/*
 mobile
*/
.menu-shortcuts {
  background-color: var(--white);
  color:var(--black);
  position: fixed;z-index: 1000;
  left: 0;bottom: 0px;right: 0;max-width: 100vw;
  display: grid;grid-template-columns: repeat(4,1fr);box-shadow: 0px -5px 15px 0px rgb(0 0 0 / 15%);
}
.mode-standalone-ios .menu-shortcuts {display: none;}
.menu-shortcuts .menu-item>a {
  display: grid;gap:4px;justify-content: center;
  padding:var(--size-1) 0;
  font-family: var(--menu-font);font-size: 12px;font-weight: var(--menu-weight);
  line-height: 1;
  opacity: .75;
  text-decoration: none;
  text-transform: none;
  color:inherit;
  transition: background-color .3s,color .3s;
  padding-bottom: 16px;
}
.menu-shortcuts .menu-item svg {width: 33px; height: 32px; margin: auto; fill: currentColor; }
.ios-fs.menu-shortcuts{padding-bottom: var(--size-4); }
.menu-shortcuts .menu-item+.menu-item>a{border-top:0}

.menu-shortcuts .current-page-ancestor>a,
.menu-shortcuts .current-menu-item>a,
.menu-shortcuts .menu-item>a:where(:hover,:focus,:active) {
  background-color:var(--primary);color: var(--grey-8);
}
.menu-shortcuts .current-menu-item>a,
.menu-shortcuts .menu-item>a:where(:hover,:focus,:active) {
  opacity: 1;
  color:var(--white);
}

.menu-shortcuts .menu-item-has-children >a{pointer-events: none}
@media (min-width: 1025px) {
  .menu-shortcuts {display: none}
}
/*
 main mobile
*/
/*@media (max-width: 1024px) {*/
  .site-header {box-shadow: 0px 5px 5px -5px rgb(0 0 0 / 15%);display: flex;
    justify-content: space-between; align-items: center;position: fixed;top: 0;left: 0;right: 0;  }

  .menu-toggle[aria-expanded="true"]+.main-navigation {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition:.3s;
    visibility: visible;
  }
  .main-navigation {
    padding:var(--size-4) var(--size-2) ;
  }
  .main-navigation .menu{
    flex-direction: column;
    gap:var(--size-2);
  }
  .main-navigation .menu-item>a {
    display: grid;
    gap: var(--size-1);
    padding: var(--size-1);
    grid-template-columns: min-content 1fr;
    align-items: center;
    border-radius:30px;
  }
  .main-navigation .menu-item>a>svg {width: 24px;height: 24px;}

  .main-navigation .current-menu-item>a,
  .main-navigation .menu-item>a:where(:hover,:focus,:active) {
    background-color:var(--menu-bg-color-hover);
    color: var(--menu-color-hover);
  }
  /*
  .ios-fs.main-navigation .menu{
    padding-bottom: var(--size-4);
  }
  */
/*}*/
/*
 submenu mobile
*/
@media (max-width: 1024px) {
  .sub-menu {
    display: block;
  }
  .submenu-arrow {/*transform: rotate(-90deg);*/}
  .main-navigation .menu-item-has-children>a{display: flex; justify-content: space-between; align-items: center;
    border-bottom:0;font-weight: 500; }
    .main-navigation .sub-menu .menu-item>a{padding-left: 47px;  }
}