:root{
  --floating-header-top: 45px;
  --floating-header-top-mobile-scroll: 25px;
  --floating-header-height: 100px;
  --floating-header-width: 1680px;
  --logo-width: 180px;
  --logo-half-bottom: 75px;
}

/** MENU DESKTOP **/
.floating-header{
  position: fixed;
  top: var(--floating-header-top);
  left: 0;
  right: 0;
  z-index: 9999;
}

.floating-header__inner{
  max-width: var(--floating-header-width);
  height: var(--floating-header-height);
  background-color: var(--e-global-color-primary);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: visible;
  border-radius: 28px;
}
.home .floating-header.is-scrolled .floating-header__inner {
  background-color: var(--e-global-color-primary);
  transition: background-color 320ms ease;
}
.home .floating-header__inner {
  background-color: transparent;
}

.floating-header__left,
.floating-header__right{ flex: 1 1 0; }

.floating-header__center{
  flex: 0 0 auto;
  display:flex;
  justify-content:center;
  position: relative;
  z-index: 10000; /* logo au-dessus */
}
.floating-header__center a {
  z-index: 10000; /* logo au-dessus */
}
/*
.floating-header__right{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}*/

.nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content: space-evenly;
}
.nav li a,
.nav li a:active,
.nav li a:focus,
.nav li a:hover {
  text-decoration:none;
  font-family: var(--e-global-typography-8dd34e2-font-family);
  color:var(--e-global-color-secondary) !important;
  font-weight:var(--e-global-typography-8dd34e2-font-weight);
  font-size:var(--e-global-typography-8dd34e2-font-size);
  text-transform: var(--e-global-typography-8dd34e2-text-transform);
}
.home .floating-header.is-scrolled .nav li a {
  color: var(--e-global-color-secondary) !important;
  transition: color 320ms ease;
}
.home .nav li a{
  color: var(--e-global-color-primary) !important;
}

/* Rectangle derrière le logo (sur la home) */
body.home .floating-header__center::before{
  content: "";
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  width: var(--logo-width, 180px);
  height: var(--logo-half-bottom, 75px);

  background-color: var(--e-global-color-primary);
  z-index: 998; /* derrière le logo, devant la page */

  /* optionnel : un arrondi en bas si tu veux */
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;

  pointer-events: none;
}
.home .floating-header.is-scrolled .floating-header__center::before{
  background-color: transparent;
  transition: background-color 320ms ease;
}

/* --- VISIBILITÉ DES BLOCS --- */
.floating-mobile{ display:none; }

/** MOBILE MENU **/

@media (max-width: 1319px){
  .floating-header--desktop{ display:none; }
  .floating-mobile{ display:block; }
}

/* --- TRIGGER (logo + languette + MENU cintré) --- */
.floating-mobile{
  position: fixed;
  top: var(--floating-header-top);
  left: 0;
  right: 0;
  z-index: 9998;
}

.floating-mobile__triggerWrap{
  display:flex;
  justify-content:center;
}

.floating-mobile__trigger{
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 9999;
}

.floating-mobile__trigger:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 12px;
}

/* Languette verticale derrière logo (par défaut hors home) */
.floating-mobile__tab{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--logo-width, 180px);
  height: calc(var(--logo-half-bottom, 75px) + var(--floating-header-top));

  background-color: var(--e-global-color-primary);
  z-index: 998;
  pointer-events: none;
}

/* "MENU" cintré sur la languette */
.floating-mobile__menuArc{
  width: calc(var(--logo-width, 180px) * 1);
  height: 48px;
  display:block;
  margin: 8px auto 0;
}

.floating-mobile__menuArc text{
  fill: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-8dd34e2-font-family);
  font-weight: var(--e-global-typography-8dd34e2-font-weight);
  font-size: 24px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Le logo doit rester au-dessus */
.floating-mobile__logoWrap{
  position: relative;
  z-index: 9999;
  display:flex;
  justify-content:center;
}

/* --- PANNEAU DÉROULANT --- */
.floating-mobile__panel{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

.floating-mobile__panelInner{
  background: var(--e-global-color-primary);
  padding: 22px 20px 48px;
  transform: translateY(-100%);
  transition: transform 280ms ease;
  position: relative;
  border-radius: 0 0 60px 60px;
}

/* quand ouvert */
body.is-mobile-menu-open .floating-mobile__panel[hidden]{ display:block; }
body.is-mobile-menu-open .floating-mobile__panelInner{ transform: translateY(0); }

/* header dans le panneau */
.floating-mobile__panelHeader{
  display:flex;
  justify-content:center;
}
.floating-mobile__panelHeader img {
  max-width: 120px;
  height: auto;
}

.floating-mobile__homeLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* --- LISTE DES LIENS (1 par ligne + chevron + séparateur “traits espacés”) --- */
.mnav{
  list-style:none;
  padding:0;
  margin:0;
}

.mnav > li{
  position: relative;
}

.mnav > li > a{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 8px 16px 0;
  text-decoration:none;
  color: var(--e-global-color-secondary);
  font-family: var(--e-global-typography-8dd34e2-font-family);
  font-weight: var(--e-global-typography-8dd34e2-font-weight);
  font-size: 18px; /* adapte */
  text-transform: var(--e-global-typography-8dd34e2-text-transform);
}
.mnav > li > a:active,
.mnav > li > a:focus,
.mnav > li > a:hover {
  color: var(--e-global-color-secondary) !important;
}

/* Chevron à droite */
.mnav > li > a::after{
  content: "›";
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Séparateur style “traits espacés” */
.mnav--left > li::after,
.mnav--right > li:not(:last-child)::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0.55) 2px 12px,
    transparent 12px 20px
  );
}

/* Menu decorations */
.floating-mobile__beforeMenu{
  background-image: url('../img/lunedemiel-sprite.webp');
  background-position: 0 0;
  height: 100px;
  width: 166px;
  display: block;
  margin: -20px auto;
  transform: scale(0.7);
}
.floating-mobile__afterMenu{
  background-image: url('../img/lunedemiel-sprite.webp');
  background-position: 0 -106px;
  height: 150px;
  width: 250px;
  display: block;
  margin-left:40%;
  margin-top: -20px;
}

/* --- BOUTON CLOSE ROND CHEVAUCHANT --- */
.floating-mobile__close{
  position: absolute;
  left: 50%;
  bottom: -26px;               /* chevauche */
  transform: translateX(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 10001;
}

.floating-mobile__close span{
  font-size: 34px;
  line-height: 1;
}

/** ANIMATIONS **/
.floating-mobile__logoWrap{
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  will-change: transform, opacity;
}

.floating-mobile__menuArc{
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  will-change: transform, opacity;
}
/* La languette suit le trigger (uniquement hors home si tu l’affiches) */
.floating-mobile__tab{
  transform: translateX(-50%) translateY(0);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
}

/* La languette est en fixed + translateX déjà appliqué : on conserve translateX et on ajoute translateY */
.is-mobile-menu-open .floating-mobile__tab{
  transform: translateX(-50%) translateY(-120px);
  opacity: 0;
}

body.is-mobile-menu-open .floating-mobile__logoWrap,
body.is-mobile-menu-open .floating-mobile__menuArc{
  transform: translateY(-140px);
  opacity: 0;
}

/* Sécurité : si hidden, on force le display none */
.floating-mobile__panel[hidden]{
  display: none !important;
}

/* Option accessibilité : réduire les animations */
@media (prefers-reduced-motion: reduce){
  .floating-mobile__tab,
  .floating-mobile__panelInner{
    transition: none !important;
  }
}

/* Panel descend du haut */
.floating-mobile__panelInner{
  transform: translateY(-110%);
  transition: transform 650ms cubic-bezier(.2,.9,.2,1);
}

/* Quand ouvert */
body.is-mobile-menu-open .floating-mobile__panelInner{
  transform: translateY(0);
}

@media (max-width: 1319px){

  /* Transition douce */
  .floating-mobile__logoWrap{
    transform: translateY(0) scale(1);
    transform-origin: center top;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  .floating-mobile__tab{
    transform: translateX(-50%) translateY(0) scale(1);
    transform-origin: top center;
    transition: transform 220ms ease, opacity 220ms ease;
  }

  /* Quand on a scroll */
  body.is-mobile-scrolled .floating-mobile{
    position: fixed;
    top: var(--floating-header-top-mobile-scroll, 25px);
  }
  body.is-mobile-scrolled .floating-mobile__logoWrap{
    transform: translateY(0) scale(0.7);
  }

  body.is-mobile-scrolled .floating-mobile__tab{
    transform: translateX(-50%) translateY(0) scale(0.7);
  }

  /* Si menu ouvert, on garde ta montée hors écran (prioritaire) */
  body.is-mobile-menu-open .floating-mobile__logoWrap,
  body.is-mobile-menu-open .floating-mobile__menuArc{
    transform: translateY(-140px) scale(1);
    opacity: 0;
  }

  body.is-mobile-menu-open .floating-mobile__tab{
    transform: translateX(-50%) translateY(-120px) scale(1);
    opacity: 0;
  }
}
@media (max-width: 430px){
  body.is-mobile-scrolled .floating-mobile__logoWrap{
    transform: translateY(0) scale(0.5);
  }
  body.is-mobile-scrolled .floating-mobile__tab{
    transform: translateX(-50%) translateY(0) scale(0.5);
  }
  body.is-mobile-scrolled .floating-mobile__menuArc {
    transform: scale(1.5);
  }
}


@media (max-width: 390px){
  .floating-mobile__afterMenu{
    display:none;
}
}