/* STUDIO 2.0 V44 — navigation coherente et lisible, inspiree du Magazine.
   Charge apres les CSS historiques pour neutraliser les anciens correctifs mobiles. */

/* Navigation principale : survol et selection persistante. */
.topbar nav.navlinks > a:not(.nav-cta){
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  opacity:.74!important;
  color:#e1dce6!important;
  transition:color .22s ease,opacity .22s ease!important;
}
.topbar nav.navlinks > a:not(.nav-cta)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:-9px!important;
  width:auto!important;height:2px!important;margin:0!important;
  border:0!important;border-radius:2px!important;
  background:linear-gradient(90deg,var(--violet,#8b4ff0),var(--magenta,#ee5ed3))!important;
  transform:scaleX(0)!important;transform-origin:left center!important;
  opacity:1!important;transition:transform .23s ease!important;
  pointer-events:none!important;
}
.topbar nav.navlinks > a:not(.nav-cta):hover,
.topbar nav.navlinks > a:not(.nav-cta):focus-visible,
.topbar nav.navlinks > a:not(.nav-cta).active,
.topbar nav.navlinks > a:not(.nav-cta)[aria-current="page"]{
  color:#fff!important;opacity:1!important;
}
.topbar nav.navlinks > a:not(.nav-cta):hover::after,
.topbar nav.navlinks > a:not(.nav-cta):focus-visible::after,
.topbar nav.navlinks > a:not(.nav-cta).active::after,
.topbar nav.navlinks > a:not(.nav-cta)[aria-current="page"]::after{
  transform:scaleX(1)!important;
}
.topbar nav.navlinks > a:focus-visible{outline:2px solid #cb79f0!important;outline-offset:5px!important;}

/* Sous-navigation : un seul modele pour Studio, Production, Formations, Experiences. */
nav.studio-subnav[data-studio-nav="v44"]{
  display:block!important;
  position:sticky!important;
  top:88px!important;
  z-index:36!important;
  padding:0!important;
  margin:0!important;
  background:rgba(6,6,9,.96)!important;
  border-top:0!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
  box-shadow:0 8px 25px rgba(0,0,0,.12)!important;
}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:min(1480px,calc(100% - 2*var(--pad,24px)))!important;
  max-width:1480px!important;
  margin:0 auto!important;
  padding:0 1px!important;
  height:57px!important;
  min-height:57px!important;
  gap:clamp(12px,1.55vw,25px)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner::-webkit-scrollbar{display:none!important;}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a{
  box-sizing:border-box!important;
  display:inline-flex!important;
  position:relative!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:100%!important;
  min-height:0!important;
  padding:0 1px!important;
  margin:0!important;
  white-space:nowrap!important;
  font-family:inherit!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.2!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  color:#aea9b6!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
  transition:color .2s ease!important;
}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:8px!important;
  height:2px!important;width:auto!important;margin:0!important;
  border:0!important;border-radius:2px!important;
  background:linear-gradient(90deg,var(--violet,#8b4ff0),var(--magenta,#ee5ed3))!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
  opacity:1!important;
  transition:transform .22s ease!important;
  pointer-events:none!important;
}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:hover,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:focus-visible,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a.active,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a[aria-current]{
  color:#fff!important;
}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:hover::after,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:focus-visible::after,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a.active::after,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a[aria-current]::after{
  transform:scaleX(1)!important;
}
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:focus-visible{outline:1px solid #c67ced!important;outline-offset:-3px!important;}

/* Tablettes et mobiles : afficher TOUS les liens, avec un trait non coupe. */
@media(max-width:1060px){
  nav.studio-subnav[data-studio-nav="v44"]{top:72px!important;}
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:minmax(40px,auto)!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    width:calc(100% - 20px)!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    gap:2px 6px!important;
    padding:5px 0 6px!important;
    overflow:visible!important;
  }
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a,
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:nth-child(n){
    display:flex!important;
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    min-height:40px!important;
    padding:7px 4px 9px!important;
    align-self:stretch!important;
    flex:initial!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    text-align:center!important;
    font-size:9.2px!important;
    line-height:1.25!important;
    letter-spacing:.035em!important;
    border:0!important;
  }
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a::after{
    bottom:3px!important;left:9%!important;right:9%!important;height:2px!important;
  }
  nav.studio-subnav[data-studio-nav="v44"].production-subnav-v98 .studio-subnav-inner{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  nav.studio-subnav[data-studio-nav="v44"].formations-subnav-v98 .studio-subnav-inner:has(>a:nth-child(5):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .topbar nav.navlinks > a:not(.nav-cta){
    display:flex!important;
    width:100%!important;
    padding:10px 0!important;
  }
  .topbar nav.navlinks > a:not(.nav-cta)::after{
    bottom:4px!important;
    width:clamp(65px,42%,150px)!important;
    right:auto!important;
  }
}
@media(max-width:480px){
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner{gap:2px 3px!important;width:calc(100% - 12px)!important;}
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a,
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a:nth-child(n){font-size:8.55px!important;letter-spacing:.02em!important;padding:7px 2px 9px!important;}
}
@media(prefers-reduced-motion:reduce){
  .topbar nav.navlinks > a::after,
  nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a::after{transition:none!important;}
}

/* Sous-menu secondaire redevenu dans le flux : aucun espace vide reserve. */
body.secondary-studio-page-v83 main{padding-top:0!important;}

/* V45 — soulignement discret identique au sous-menu MAGAZINE (1 px).
   Les anciennes regles V44 (y compris les breakpoints mobiles) sont surchargees ici. */
.topbar nav.navlinks > a:not(.nav-cta)::after,
nav.studio-subnav[data-studio-nav="v44"] .studio-subnav-inner > a::after {
  height:1px!important;
  border-radius:1px!important;
}

/* Studio (accueil) et Production : ancres locales sans selection persistante.
   Le survol/focus visible reste present ; le menu principal conserve sa rubrique active. */
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a.active,
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a[aria-current] {
  color:#aea9b6!important;
}
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a.active::after,
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a[aria-current]::after {
  transform:scaleX(0)!important;
}
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a:hover,
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a:focus-visible {
  color:#fff!important;
}
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a:hover::after,
nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a:focus-visible::after {
  transform:scaleX(1)!important;
}
/* Pas de hover tactile accroche apres un appui. Le focus clavier demeure visible. */
@media (hover:none) {
  nav.studio-subnav[data-studio-nav="v44"][data-underline-mode="hover-only"] .studio-subnav-inner > a:hover:not(:focus-visible)::after {
    transform:scaleX(0)!important;
  }
}
