/* ============================================================
   STEVEN ANGOFF — MENU DESKTOP LIQUID GLASS
   SP Clash Display est déjà fournie globalement par le site.
   Aucun style des boutons Mode scène / Mode liste n'est modifié.
   ============================================================ */

:root {
  --sl-ui-top: 20px;
  --sl-ui-side: 36px;
  --sl-control-height: 46px;
  --sl-wing-width: 210px;
  --sl-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slRotateInfinitely {
  to { transform: rotate(360deg); }
}

/* Pilule principale, strictement centrée */
#steven-liquid-header.sl-header {
  position: fixed !important;
  top: var(--sl-ui-top) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  width: max-content !important;
  max-width: 92vw !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 100px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.008)) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.12) !important;
  opacity: 1 !important;
  transition: transform .45s var(--sl-ease), opacity .4s ease,
              background .35s ease, border-color .35s ease,
              box-shadow .4s ease !important;
}

#steven-liquid-header.sl-header.sl-expanded {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%) !important;
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,.5),
              0 0 25px rgba(56,85,232,.3),
              inset 0 1px 1px rgba(255,255,255,.55) !important;
}

#steven-liquid-header.sl-header.sl-scrolled.sl-expanded {
  background: linear-gradient(135deg, rgba(56,85,232,.42), rgba(18,19,22,.75)) !important;
  border-color: rgba(255,255,255,.28) !important;
}

#steven-liquid-header.sl-header.sl-nav-hidden {
  transform: translate(-50%, -145%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Navigation et ailes symétriques : centre conservé au déploiement */
#steven-liquid-header .sl-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(var(--sl-control-height) - 2px) !important;
  padding: 5px 6px !important;
  box-sizing: border-box !important;
}

#steven-liquid-header .sl-menu-list,
#steven-liquid-header .sl-wing-links {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#steven-liquid-header .sl-menu-list {
  justify-content: center !important;
  gap: 0 !important;
}

#steven-liquid-header .sl-menu-list > li,
#steven-liquid-header .sl-wing-links > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#steven-liquid-header .sl-menu-list li::before,
#steven-liquid-header .sl-menu-list li::after { content: none !important; }

#steven-liquid-header .sl-wing {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  width: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transition: width .48s var(--sl-ease), max-width .48s var(--sl-ease),
              opacity .25s ease, visibility 0s linear .48s !important;
}

#steven-liquid-header.sl-expanded .sl-wing {
  width: var(--sl-wing-width) !important;
  max-width: var(--sl-wing-width) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: width .48s var(--sl-ease), max-width .48s var(--sl-ease),
              opacity .3s ease .06s, visibility 0s !important;
}

#steven-liquid-header .sl-wing-left  { justify-content: flex-end !important; }
#steven-liquid-header .sl-wing-right { justify-content: flex-start !important; }
#steven-liquid-header .sl-wing-links {
  flex: 0 0 auto !important;
  width: max-content !important;
  gap: 20px !important;
  white-space: nowrap !important;
}

/* Liens : même apparence, même espacement que la version validée */
#steven-liquid-header .sl-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 9px 11px !important;
  font-family: 'SP Clash Display', 'Clash Display', sans-serif !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,.88) !important;
  border-radius: 50px !important;
  transition: background .3s var(--sl-ease), color .3s ease,
              transform .3s var(--sl-ease) !important;
}

#steven-liquid-header .sl-item:not(.active) .sl-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.15) !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.2),
              inset 0 1px 1px rgba(255,255,255,.3) !important;
  transform: translateY(-1px) !important;
}

#steven-liquid-header .sl-item.active .sl-link {
  background: #fff !important;
  color: #060707 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(255,255,255,.3),
              inset 0 1px 0 rgba(255,255,255,.9) !important;
}

#steven-liquid-header .sl-item.active .sl-link::after {
  content: ' 𖣠' !important;
  color: #060707 !important;
  font-size: .95rem !important;
  margin-left: 6px !important;
  display: inline-block !important;
  line-height: 1 !important;
  transform: translateY(-.5px) !important;
}

/* Médaillon central : lien vers l’accueil, menu ouvert au survol */
#steven-liquid-header .sl-logo-item {
  flex: 0 0 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  transition: margin .48s var(--sl-ease) !important;
}
#steven-liquid-header.sl-expanded .sl-logo-item { margin: 0 6px !important; }

#steven-liquid-header .sl-menu-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: transform .35s var(--sl-ease) !important;
}
#steven-liquid-header .sl-menu-trigger:hover { transform: scale(1.12) !important; }

#steven-liquid-header .sl-menu-trigger:focus-visible,
#steven-liquid-header .sl-link:focus-visible,
#steven-liquid-header .sl-lang-btn:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

#steven-liquid-header .sl-logo-spinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: slRotateInfinitely 20s linear infinite !important;
  transform-origin: center center !important;
}
#steven-liquid-header .sl-logo-img {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1)
          drop-shadow(0 0 10px rgba(56,85,232,.45)) !important;
  transition: filter .35s ease !important;
}
#steven-liquid-header .sl-menu-trigger:hover .sl-logo-img {
  filter: brightness(0) invert(1)
          drop-shadow(0 0 8px rgba(255,255,255,.9))
          drop-shadow(0 0 16px rgba(56,85,232,.75)) !important;
}

/* Sélecteur de langue satellite */
#steven-liquid-header .sl-lang-wrapper {
  position: absolute !important;
  left: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) scale(.9) !important;
  display: flex !important;
  align-items: center !important;
  max-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: max-width .3s var(--sl-ease), opacity .25s ease,
              transform .3s var(--sl-ease), visibility 0s linear .3s !important;
}
#steven-liquid-header.sl-expanded .sl-lang-wrapper {
  max-width: 160px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) scale(1) !important;
  transition: max-width .3s var(--sl-ease), opacity .25s ease,
              transform .3s var(--sl-ease), visibility 0s !important;
}
#steven-liquid-header .sl-lang-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05)) !important;
  color: rgba(255,255,255,.95) !important;
  font-family: 'SP Clash Display', 'Clash Display', sans-serif !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  backdrop-filter: blur(15px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(15px) saturate(150%) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.4),
              inset 0 1px 1px rgba(255,255,255,.5) !important;
  transition: color .2s ease, background .2s ease,
              transform .2s ease !important;
}
#steven-liquid-header .sl-lang-btn:hover {
  color: #000 !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 4px 18px rgba(255,255,255,.4) !important;
  transform: translateY(-1px) !important;
}
#steven-liquid-header.sl-expanded::after {
  content: '' !important;
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  width: 13px !important;
  height: 100% !important;
  background: transparent !important;
}

/* Mot "Menu" sous le médaillon */
#steven-liquid-header .sl-menu-hint {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 4px 0 6px .22em !important;
  font-family: 'SP Clash Display', 'Clash Display', sans-serif !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  letter-spacing: .22em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: rgba(255,255,255,.82) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.65) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transition: opacity .3s ease !important;
}
#steven-liquid-header.sl-expanded .sl-menu-hint { opacity: 0 !important; }

/* Signature en haut à gauche */
#steven-signature.sl-signature {
  position: fixed !important;
  top: calc(var(--sl-ui-top) + var(--sl-control-height) / 2) !important;
  left: var(--sl-ui-side) !important;
  transform: translateY(-50%) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform .45s var(--sl-ease), opacity .4s ease !important;
}
#steven-signature .sl-signature-name {
  font-family: 'SP Clash Display', 'Clash Display', sans-serif !important;
  font-size: 1.38rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  color: rgba(255,255,255,.97) !important;
  text-shadow: 0 1px 14px rgba(0,0,0,.55) !important;
  transition: color .35s ease, text-shadow .45s ease !important;
}
#steven-signature .sl-signature-role {
  font-family: 'SP Clash Display', 'Clash Display', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  color: rgba(255,255,255,.74) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.55) !important;
  transition: color .35s ease !important;
}

/* Halo magique bleu charte #3855E8 */
#steven-signature.sl-signature:hover .sl-signature-name,
#steven-signature.sl-signature:focus-visible .sl-signature-name {
  color: #fff !important;
  text-shadow: 0 0 5px rgba(176,190,255,.98),
               0 0 13px rgba(91,119,255,.92),
               0 0 26px rgba(56,85,232,.78),
               0 0 42px rgba(56,85,232,.45),
               0 1px 14px rgba(0,0,0,.55) !important;
}
#steven-signature.sl-signature:hover .sl-signature-role,
#steven-signature.sl-signature:focus-visible .sl-signature-role {
  color: rgba(186,200,255,.96) !important;
}
#steven-signature.sl-signature:focus-visible {
  outline: 2px solid rgba(255,255,255,.7) !important;
  outline-offset: 6px !important;
  border-radius: 6px !important;
}
#steven-signature.sl-signature.sl-nav-hidden {
  transform: translate(-14px, -50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.home #steven-signature.sl-signature,
#steven-signature.sl-signature.sl-signature-off {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1100px) and (min-width: 769px) {
  :root { --sl-ui-side: 18px; }
  #steven-liquid-header .sl-link {
    font-size: .78rem !important;
    padding: 9px 8px !important;
  }
  #steven-signature .sl-signature-role { display: none !important; }
  #steven-signature .sl-signature-name { font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  #steven-liquid-header .sl-logo-spinner { animation: none !important; }
  #steven-liquid-header .sl-wing,
  #steven-liquid-header.sl-expanded .sl-wing,
  #steven-liquid-header.sl-header,
  #steven-signature.sl-signature {
    transition-duration: .01ms !important;
  }
}

/* Sécurité pour toute application accidentelle du CSS sur mobile */
@media (max-width: 768px) {
  #steven-liquid-header.sl-header,
  #steven-signature.sl-signature {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}