/* Menu mobile Tabooze 1933
   Overlay pleine largeur, fade in/out et blur behind.
*/

.mobile-menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:54px;
  height:54px;
  padding:0;
  border:1px solid rgba(255,226,165,.18);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,244,224,.095), rgba(255,244,224,.035));
  color:var(--gold-soft);
  cursor:pointer;
  box-shadow:0 18px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .24s ease, border-color .24s ease, background .24s ease;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(255,226,165,.34);
  background:linear-gradient(180deg, rgba(255,244,224,.14), rgba(255,244,224,.055));
  outline:none;
}

.mobile-menu-toggle__label{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.mobile-menu-toggle__icon{
  display:block;
  flex:0 0 auto;
}

.mobile-menu-toggle__line{
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .28s ease, opacity .2s ease;
}

body.is-menu-open .mobile-menu-toggle__line--top{
  transform:translateY(5px) rotate(45deg);
}

body.is-menu-open .mobile-menu-toggle__line--middle{
  opacity:0;
  transform:scaleX(.4);
}

body.is-menu-open .mobile-menu-toggle__line--bottom{
  transform:translateY(-5px) rotate(-45deg);
}

.mobile-menu-panel{
  position:fixed;
  inset:0;
  z-index:38;
  pointer-events:none;
  opacity:0;
  transition:opacity .32s ease;
}

.mobile-menu-panel__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,3,2,.46);
  opacity:0;
  backdrop-filter:blur(0) saturate(1);
  -webkit-backdrop-filter:blur(0) saturate(1);
  transition:opacity .34s ease, backdrop-filter .34s ease, -webkit-backdrop-filter .34s ease;
}

.mobile-menu-panel__content{
  position:absolute;
  top:96px;
  left:var(--gutter);
  right:var(--gutter);
  width:auto;
  max-width:760px;
  margin-inline:auto;
  padding:18px;
  border:1px solid rgba(255,226,165,.17);
  border-radius:32px;
  background:linear-gradient(180deg, rgba(17,12,8,.94), rgba(8,6,5,.9));
  box-shadow:0 34px 120px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.055);
  opacity:0;
  transform:translateY(-12px) scale(.985);
  filter:blur(10px);
  transition:opacity .34s ease, transform .34s ease, filter .34s ease;
}

.mobile-menu-panel.is-open{
  pointer-events:auto;
  opacity:1;
}

.mobile-menu-panel.is-open .mobile-menu-panel__backdrop{
  opacity:1;
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
}

.mobile-menu-panel.is-open .mobile-menu-panel__content{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

.mobile-menu-panel__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
  color:var(--gold-soft);
  font-size:10px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.mobile-menu-panel__eyebrow::before{
  content:"";
  width:38px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,229,163,.9));
}

.mobile-menu-nav{
  display:grid;
  gap:10px;
}

.mobile-menu-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  padding:0 18px;
  border:1px solid rgba(255,226,165,.13);
  border-radius:22px;
  background:rgba(255,244,224,.055);
  color:#fff4e1;
  text-decoration:none;
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:transform .22s ease, background .22s ease, border-color .22s ease;
}

.mobile-menu-nav a::after{
  content:"";
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
  color:var(--gold-soft);
  opacity:.76;
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible{
  transform:translateX(3px);
  border-color:rgba(255,226,165,.28);
  background:rgba(255,244,224,.09);
  outline:none;
}

.mobile-menu-nav .mobile-menu-nav__cta{
  min-height:62px;
  color:#130d08;
  background:linear-gradient(135deg, #fff1be 0%, #d6b15f 55%, #93582b 100%);
  box-shadow:0 18px 50px rgba(214,177,95,.22);
}

.mobile-menu-nav .mobile-menu-nav__cta::after{
  color:#130d08;
}

body.is-menu-open{
  overflow:hidden;
}

@media (max-width:860px){
  .mobile-menu-toggle{
    display:inline-flex;
    flex:0 0 54px;
  }

  .site-header__inner{
    padding-right:12px;
  }
}

@media (max-width:640px){
  .mobile-menu-toggle{
    width:50px;
    height:50px;
    flex-basis:50px;
    border-radius:16px;
  }

  .mobile-menu-panel__content{
    top:82px;
    left:14px;
    right:14px;
    padding:14px;
    border-radius:28px;
  }

  .mobile-menu-nav a{
    min-height:56px;
    padding-inline:16px;
    font-size:11px;
    letter-spacing:.12em;
  }
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu-toggle,
  .mobile-menu-toggle__line,
  .mobile-menu-panel,
  .mobile-menu-panel__backdrop,
  .mobile-menu-panel__content,
  .mobile-menu-nav a{
    transition:none !important;
  }
}