/* =========================================================
   SNTS — menu.css
   Zine / editorial, clair, très typé "magazine"
   Compatible avec :
   - template-parts/menu-bar.php   (#siteHeader + #custom-menu)
   - template-parts/menu-inline.php (#siteHeaderInline + #menu-inline)
   - template-parts/menu-overlay.php (#menu-backdrop + #full-screen-menu)
   Dépend de tes variables base.css (bg/text/accent/bd/shadow/etc.)
   ========================================================= */

/* -----------------------------
   Header (bar + inline)
----------------------------- */
#siteHeader,
#siteHeaderInline{
  position: sticky;
  top: 0;
  z-index: 999;
  background: color-mix(in srgb, var(--bg) 88%, #fff 12%);
  border-bottom: var(--bd);
}

/* Petit effet “print” (hachures très légères) */
#siteHeader::before,
#siteHeaderInline::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(11,11,15,.20) 0 2px,
      transparent 2px 11px
    );
  mix-blend-mode: multiply;
}

/* Layout intérieur */
#siteHeader .nav-inner,
#siteHeaderInline .nav-inline{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

@media (max-width: 860px){
  #siteHeaderInline .nav-inline{
    grid-template-columns: auto 1fr auto;
  }
}

/* Colonne gauche/droite */
#siteHeader .menu-left,
#siteHeader .menu-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Logo */
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.brand-logo{
  height: 44px;
  width: auto;
  display:block;
  filter: contrast(1.05);
}

/* -----------------------------
   Boutons “Contact”
----------------------------- */
.bouton-contact,
.bouton-contact-inline{
  display:inline-flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: var(--bd);
  background: var(--page-accent);
  color: #fff;
  /* color: var(--text); */
  text-decoration:none;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 rgba(11,11,15,.14);
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}

/* responsive 980px */
@media (max-width: 980px){
  .bouton-contact,
  .bouton-contact-inline{
    width: 41px;
    height: 41px;
  }
  .bouton-contact-inline--phone{
    width: unset;
  }
}

.bouton-contact i,
.bouton-contact-inline i{
  color: #fff;
}
.bouton-contact:hover,
.bouton-contact-inline:hover{
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-strong);
  filter: saturate(1.05);
}
.bouton-contact:active,
.bouton-contact-inline:active{
  transform: translate(0,0);
  box-shadow: 5px 5px 0 rgba(11,11,15,.14);
}

/* Variante “inline” un peu plus compacte */
.bouton-contact-inline{
  padding: 10px 14px;
}

/* -----------------------------
   Burger (menu-bar)
----------------------------- */
.burger-menu{
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: var(--bd);
  background: var(--card-2);
  box-shadow: 6px 6px 0 rgba(11,11,15,.16);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 0;
  cursor:pointer;
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}

.burger-menu:hover{
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-strong);
  filter: saturate(1.05);
}

.burger-menu span{
  display:block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}

/* Texte “MENU” */
.menu-text{
  color: var(--text);
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .85;
}

/* -----------------------------
   Menu inline (menu-inline.php)
----------------------------- */
#menu-inline.menu-inline-root{
  display:flex;
  gap: 10px;
  list-style:none;
  margin:0;
  padding:0;
  align-items:center;
}

/* liens top-level */
#menu-inline.menu-inline-root > li > a{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: var(--bd);
  background:#fff;
  box-shadow: 5px 5px 0 rgba(11,11,15,.12);
  color: var(--text);
  text-decoration:none;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}
#menu-inline.menu-inline-root > li > a:hover{
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-strong);
  filter: saturate(1.05);
}
#menu-inline.menu-inline-root > li.current-menu-item > a,
#menu-inline.menu-inline-root > li.current-menu-ancestor > a{
  background: #fff;
}

/* Dropdown inline (ouvert via ta classe .open) */
#menu-inline.menu-inline-root li.menu-item-has-children{ position:relative; }

#menu-inline.menu-inline-root .sub-menu{
  display:none;
  position:absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  padding: 10px;
  margin: 0;
  list-style:none;

  border-radius: 18px;
  border: var(--bd);
  background: var(--card);
  box-shadow: var(--shadow-strong);
}

#menu-inline.menu-inline-root li.open > .sub-menu{ display:block; }

#menu-inline.menu-inline-root .sub-menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  border: var(--bd);
  background:#fff;
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 rgba(11,11,15,.10);
  transition: transform var(--speed), box-shadow var(--speed);
}
#menu-inline.menu-inline-root .sub-menu a:hover{
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 rgba(11,11,15,.16);
}

/* -----------------------------
   Overlay (menu-overlay.php)
   Ouverture pilotée par : body.menu-open
----------------------------- */
#menu-backdrop{
  position: fixed;
  inset: 0;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  background: rgba(11,11,15,.35);
  transition: opacity var(--speed);
}

#full-screen-menu{
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
  width: min(520px, 92vw);
  padding: 96px 18px 18px;
  overflow:auto;

  background: var(--bg);
  border: var(--bd);
  box-shadow: var(--shadow-strong);

  transform: translateX(-105%);
  transition: transform .22s ease;
}

/* Hachures + stickers dans l’overlay */
#full-screen-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(11,11,15,.25) 0 2px,
      transparent 2px 12px
    );
  mix-blend-mode: multiply;
}

/* Side handling */
#full-screen-menu.side-left{
  left: 0;
  right: auto;
}
#full-screen-menu.side-right{
  right: 0;
  left: auto;
  transform: translateX(105%);
}

/* Full size option */
#full-screen-menu.size-full{
  width: 100vw;
  left: 0;
  right: 0;
  transform: translateY(-105%);
  border-left: none;
  border-right: none;
}
body.menu-open #full-screen-menu.size-full{
  transform: translateY(0);
}

/* Open state */
body.menu-open #menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}
body.menu-open #full-screen-menu.side-left{ transform: translateX(0); }
body.menu-open #full-screen-menu.side-right{ transform: translateX(0); }

/* Liste WP */
#full-screen-menu .menu-items{
  position: relative;
  list-style:none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 12px;
}

/* Liens overlay */
#full-screen-menu .menu-items a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  padding: 14px 14px;
  border-radius: 18px;
  border: var(--bd);
  background: #fff;
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration:none;

  font-weight: 1000;
  letter-spacing: .03em;
  text-transform: uppercase;

  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
}

/* hover “sticker” */
#full-screen-menu .menu-items a:hover{
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-strong);
  filter: saturate(1.05);
}

/* état actif */
#full-screen-menu .menu-items li.current-menu-item > a,
#full-screen-menu .menu-items li.current-menu-ancestor > a{
  background: var(--page-accent);
}

/* Sous-menu overlay */
#full-screen-menu .sub-menu{
  list-style:none;
  margin: 10px 0 0;
  padding: 0 0 0 8px;
  display:grid;
  gap: 10px;
}
#full-screen-menu .sub-menu a{
  background: var(--card-2);
}

/* Petit “footer” d’overlay (si tu t’en sers) */
#full-screen-menu .menu-bottom{
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--bd-soft);
}

/* -----------------------------
   Accessibilité / focus
----------------------------- */
#full-screen-menu a:focus-visible,
.burger-menu:focus-visible,
.bouton-contact:focus-visible,
.bouton-contact-inline:focus-visible{
  outline: 3px solid var(--page-accent);
  outline-offset: 3px;
}

/* -----------------------------
   Responsive : réduire les ombres
----------------------------- */
@media (max-width: 520px){
  .burger-menu{ width: 44px; height: 44px; }
  .menu-text{ display:none; }
  .bouton-contact,
  .bouton-contact-inline{
    padding: 10px 12px;
  }
}



/* =========================================================
   SNTS — disable underline pseudo-element
   Empêche le soulignement ::before sur le menu inline
   ========================================================= */

   #siteHeaderInline .menu-inline-root > li > a{
    position: static; /* au cas où un ancien style mettait relative */
  }
  
  #siteHeaderInline .menu-inline-root > li > a::before{
    content: none !important;
    display: none !important;
  }
  #siteHeaderInline .menu-inline-root > li > a::before{
    width: 0 !important;
    height: 0 !important;
    transform: none !important;
    background: transparent !important;
  }



/* =========================================================
   SNTS — MENU INLINE : version mobile fullscreen
   Cible :
   - .nav-inline--desktop (desktop)
   - .nav-inline--mobile (mobile)
   - #inline-fullscreen-menu + #inline-menu-backdrop
   - #inline-burger (burger)
   ========================================================= */

/* Par défaut : on n’affiche PAS la barre mobile */
.nav-inline--mobile{ display:none; }

/* Mobile breakpoint : on bascule */
@media (max-width: 980px){

  /* Cache le layout desktop inline */
  .nav-inline--desktop{ display:none; }

  /* Affiche la barre mobile */
  .nav-inline--mobile{
    display: grid;
    grid-template-columns: auto 1fr auto; /* logo | contact | burger */
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    position: relative;
    z-index: 1001; /* au-dessus de l’overlay */
  }

  .navm-left{ display:flex; align-items:center; }
  .navm-center{ display:flex; justify-content:center; }
  .navm-right{ display:flex; justify-content:flex-end; }

  /* CTA mobile un poil plus compact */
  .bouton-contact-inline--mobile{
    padding: 10px 14px;
    box-shadow: 5px 5px 0 rgba(11,11,15,.14);
  }

  /* ===== Burger inline (mobile) ===== */
  .burger-inline{
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    border: var(--bd);
    background: var(--card-2);
    box-shadow: 6px 6px 0 rgba(11,11,15,.16);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    cursor:pointer;
    transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
  }
  .burger-inline:hover{
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-strong);
    filter: saturate(1.05);
  }
  .burger-inline span{
    display:block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
  }

  /* État OPEN -> croix */
  body.inline-menu-open .burger-inline span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
  }
  body.inline-menu-open .burger-inline span:nth-child(2){
    opacity: 0;
  }
  body.inline-menu-open .burger-inline span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ===== Backdrop ===== */
  .inline-menu-backdrop{
    position: fixed;
    inset: 0;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    background: rgba(11,11,15,.38);
    transition: opacity var(--speed);
  }
  body.inline-menu-open .inline-menu-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* ===== Overlay fullscreen ===== */
  .inline-fullscreen-menu{
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 96px 18px 18px; /* laisse respirer sous le header */
    overflow: auto;

    background: var(--bg);
    border-top: var(--bd);
    transform: translateY(-105%);
    transition: transform .22s ease;
  }

  /* Hachures style SNTS */
  .inline-fullscreen-menu::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.10;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(11,11,15,.25) 0 2px,
        transparent 2px 12px
      );
    mix-blend-mode: multiply;
  }

  body.inline-menu-open .inline-fullscreen-menu{
    transform: translateY(0);
  }

  /* Liste WP mobile */
  .inline-fullscreen-menu .inline-menu-items{
    position: relative;
    list-style:none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
  }

  /* Liens overlay */
  .inline-fullscreen-menu .inline-menu-items a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;

    padding: 14px 14px;
    border-radius: 18px;
    border: var(--bd);
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration:none;

    font-weight: 1000;
    letter-spacing: .03em;
    text-transform: uppercase;

    transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
  }
  .inline-fullscreen-menu .inline-menu-items a:hover{
    transform: translate(-2px,-2px);
    box-shadow: var(--shadow-strong);
    filter: saturate(1.05);
  }

  /* état actif */
  .inline-fullscreen-menu .inline-menu-items li.current-menu-item > a,
  .inline-fullscreen-menu .inline-menu-items li.current-menu-ancestor > a{
    background: #fff;
  }

  /* Sous-menus en accordéon (hauteur pilotée en JS) */
  .inline-fullscreen-menu .sub-menu{
    list-style:none;
    margin: 10px 0 0;
    padding: 0 0 0 8px;
    display: grid;
    gap: 10px;
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
  }
  .inline-fullscreen-menu .sub-menu a{
    background: var(--card-2);
  }

  /* Accessibilité focus (tu peux garder ton outline ici) */
  .burger-inline:focus-visible,
  .inline-fullscreen-menu a:focus-visible{
    outline: 3px solid var(--page-accent);
    outline-offset: 3px;
  }
}

/* Très petit écran */
@media (max-width: 520px){
  .burger-inline{ width: 44px; height: 44px; }
  .bouton-contact-inline--mobile{ padding: 10px 12px; }
}


/* ===== SWITCH DESKTOP / MOBILE (menu-inline.php) ===== */

/* Desktop par défaut : desktop visible / mobile caché */
.nav-inline--desktop{ display: grid; }
.nav-inline--mobile, .inline-fullscreen-menu, .inline-menu-backdrop{ display: none !important; }



/* Mobile : desktop caché / mobile visible */
@media (max-width: 980px){
  .nav-inline--desktop{ display: none !important; }
  .nav-inline--mobile{ display: grid !important; }
  .inline-fullscreen-menu, .inline-menu-backdrop{ display: block !important; }

}


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

/* Conteneur droite (desktop) : aligner Contact + Phone */
#siteHeaderInline .nav-inline-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Conteneur centre (mobile) : aligner Contact + Phone */
#siteHeaderInline .navm-center {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Bouton téléphone (rond) */
#siteHeaderInline .bouton-phone-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  height: 41px;
  border-radius: 999px;
  border: var(--bd);
  background: var(--page-accent);
  color: var(--text-light);
  box-shadow: var(--shadow);
  text-decoration: none;
  transform: translateX(4px);
  transition: transform var(--speed), box-shadow var(--speed), filter var(--speed);
  will-change: transform;
}

#siteHeaderInline .bouton-phone-inline:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-strong);
  filter: saturate(1.05);
}

#siteHeaderInline .bouton-phone-inline i {
  font-size: 1.05em;
  line-height: 1;
}

/* Optionnel : un poil plus petit sur mobile */
@media (max-width: 768px) {
  #siteHeaderInline .bouton-phone-inline--mobile,
  #siteHeaderInline .bouton-contact-inline--mobile {
    width: 40px;
    height: 40px;
  }
}


/* Fallback logo texte */
.brand {
  color: var(--page-accent);
  text-decoration: none;
}

.brand-text{
  font-family: inherit;
  font-weight: 1000;
  font-size: clamp(24px, 4vw, 50px);
  letter-spacing: .06em;
  line-height: 1;
  display: inline-block;
  transform: translateY(1px); /* micro-alignement optique */
  white-space: nowrap;
}


/* Logo flicker (ne pas toucher à la typo : c'est .brand-text qui gère) */
.brand-flicker{
  cursor: pointer;
  user-select: none;
}

.brand-flicker .bf-ch{
  display: inline-block;
  /* color: hsla(var(--h, 42), 100%, 80%, 1); */
  color: var(--page-accent);
  animation: text-flicker-in-glow var(--dur, 2.4s) linear both;
  filter:
  /* drop-shadow(0 0 10px color-mix(in srgb, var(--page-accent) 65%, transparent))
  drop-shadow(0 0 18px color-mix(in srgb, var(--page-accent) 35%, transparent)); */
}

/* Optionnel : ne pas animer les espaces */
.brand-flicker .bf-space{
  width: .4ch;
}

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  .brand-flicker .bf-ch{
    animation: none !important;
    text-shadow: none !important;
  }
}

/* Garde TON keyframes exact (tu peux coller le tien ici) */
@keyframes text-flicker-in-glow {
  0% { opacity: 0; }
  10% { opacity: 0; text-shadow: none; }
  10.1% { opacity: 1; text-shadow: none; }
  10.2% { opacity: 0; text-shadow: none; }
  20% { opacity: 0; text-shadow: none; }
  20.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.25); }
  20.6% { opacity: 0; text-shadow: none; }
  30% { opacity: 0; text-shadow: none; }
  30.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.45), 0 0 60px rgba(255,255,255,.25); }
  30.6% { opacity: 0; text-shadow: none; }
  45% { opacity: 0; text-shadow: none; }
  45.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.45), 0 0 60px rgba(255,255,255,.25); }
  55.1% { opacity: 0; text-shadow: none; }
  57.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.55), 0 0 60px rgba(255,255,255,.35); }
  60.1% { opacity: 0; text-shadow: none; }
  65.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.55), 0 0 60px rgba(255,255,255,.35), 0 0 100px rgba(255,255,255,.1); }
  75.1% { opacity: 0; text-shadow: none; }
  77.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.55), 0 0 60px rgba(255,255,255,.4), 0 0 110px rgba(255,255,255,.2), 0 0 100px rgba(255,255,255,.1); }
  85.1% { opacity: 0; text-shadow: none; }
  86.1% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.6), 0 0 60px rgba(255,255,255,.45), 0 0 110px rgba(255,255,255,.25), 0 0 100px rgba(255,255,255,.1); }
  100% { opacity: 1; text-shadow: 0 0 30px rgba(255,255,255,.6), 0 0 60px rgba(255,255,255,.45), 0 0 110px rgba(255,255,255,.25), 0 0 100px rgba(255,255,255,.1); }
}


.brand-text.brand-flicker { color: inherit; }
.brand-flicker .bf-ch { will-change: opacity, filter, text-shadow; }