/* STUDIO 2.0 — V66 | mobile multi-device resilience
   Fix shared causes (content clipping, navigation overlays, short screens and track motion).
   Scope: phones portrait/landscape; keeps tablet/desktop layout intact. */
@media (max-width:760px), (max-height:500px) and (max-width:1000px) {
  html{scroll-padding-top:84px;}
  body{overflow-x:clip;}
  /* A fully opaque navigation surface prevents hero copy shining through the header. */
  .topbar,.topbar.scrolled{
    background:#07070a!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border-bottom:1px solid rgba(255,255,255,.13)!important;
    isolation:isolate;
  }
  .topbar .wrap.nav{position:relative;isolation:isolate;}
  body.nav-v54-open::before{
    background:rgba(1,1,3,.89)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  .topbar nav.navlinks[data-mobile-menu="v55"]{
    position:fixed!important;
    top:calc(72px + env(safe-area-inset-top, 0px))!important;
    left:12px!important;right:12px!important;
    width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 86px - env(safe-area-inset-bottom, 0px))!important;
    background:#09090e!important;
    border:1px solid rgba(229,209,255,.28)!important;
    box-shadow:0 24px 80px rgba(0,0,0,.9)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    opacity:1!important;
    z-index:60!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
  .topbar nav.navlinks[data-mobile-menu="v55"]:not(.open){display:none!important;}
  .topbar nav.navlinks[data-mobile-menu="v55"].open{display:grid!important;}
  .topbar nav.navlinks[data-mobile-menu="v55"] > a,
  .topbar nav.navlinks[data-mobile-menu="v55"] > .nav-v54-submenu a{
    text-shadow:none!important;
    -webkit-text-fill-color:currentColor;
  }
  /* Structural fix: the height of an editorial tile grows with its text.
     Absolute text pinned to a vh-based tile was clipped on short phones / landscape. */
  .formation-tab-v92{
    display:flex!important;flex-direction:column;justify-content:flex-end;
    height:auto!important;min-height:60svh!important;
  }
  .formation-tab-v92 .formation-tab-copy-v92{
    position:relative!important;inset:auto!important;
    margin-top:auto!important;
    padding:clamp(130px,24svh,255px) clamp(19px,5vw,30px) 25px!important;
    width:100%!important;
    box-sizing:border-box!important;
  }
  .formation-tab-v92 .formation-tab-copy-v92 h3{
    font-size:clamp(28px,7.5vw,42px)!important;
    line-height:1.06!important;
    overflow-wrap:break-word;
    margin:11px 0 14px!important;
  }
  .formation-tab-v92 .formation-tab-copy-v92 p{
    font-size:clamp(13px,3.65vw,15px)!important;
    line-height:1.5!important;
    margin-bottom:17px!important;
    max-width:100%!important;
  }
  .formation-tab-v92 .formation-tab-copy-v92 strong{
    font-size:11px!important;line-height:1.55!important;
  }
  /* Mobile content should never disappear when an IntersectionObserver fails. */
  .reveal{opacity:1!important;transform:none!important;visibility:visible!important;}
  /* Visible CSS fallback when JavaScript is blocked; separate JS uses translate3d. */
  .references-section .references-rails{
    -webkit-mask-image:none!important;mask-image:none!important;
    overflow:hidden;
  }
  .references-section .references-track:not([data-ref-motion="js"]){
    -webkit-animation:studio66MarqueeForward 38s linear infinite!important;
    animation:studio66MarqueeForward 38s linear infinite!important;
    -webkit-animation-play-state:running!important;animation-play-state:running!important;
  }
  .references-section .references-track.reverse:not([data-ref-motion="js"]){
    -webkit-animation:studio66MarqueeReverse 46s linear infinite!important;
    animation:studio66MarqueeReverse 46s linear infinite!important;
  }
  .references-section .references-track[data-ref-motion="js"]{
    -webkit-animation:none!important;animation:none!important;
    -webkit-transition:none!important;transition:none!important;
    will-change:transform;
  }
}
@-webkit-keyframes studio66MarqueeForward {from{-webkit-transform:translate3d(0,0,0);}to{-webkit-transform:translate3d(-50%,0,0);}}
@keyframes studio66MarqueeForward {from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@-webkit-keyframes studio66MarqueeReverse {from{-webkit-transform:translate3d(-50%,0,0);}to{-webkit-transform:translate3d(0,0,0);}}
@keyframes studio66MarqueeReverse {from{transform:translate3d(-50%,0,0);}to{transform:translate3d(0,0,0);}}
/* Short landscape phones: prioritize text over decoration and avoid cover clipping. */
@media (max-height:500px) and (max-width:1000px) {
  .hero{height:auto!important;min-height:100svh!important;}
  .hero .hero-content{padding-top:96px!important;padding-bottom:60px!important;}
  .formations-hub-hero-v92,.subpage-hero,.training-hero-v91{height:auto!important;min-height:100svh!important;}
  .formation-tab-v92{min-height:350px!important;}
  .formation-tab-v92 .formation-tab-copy-v92{padding-top:135px!important;}
  .topbar nav.navlinks[data-mobile-menu="v55"]{max-height:calc(100dvh - 79px)!important;}
  .hero .waveform-hero,.training-hero-wave-v170{opacity:.5!important;}
}
/* Very narrow portrait phones: reserve physical space below the fixed header. */
@media (max-width:380px) and (min-height:501px){
  .hero{height:auto!important;min-height:100svh!important;}
  .hero .hero-content{padding-top:104px!important;padding-bottom:77px!important;}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce),
       (max-height:500px) and (max-width:1000px) and (prefers-reduced-motion:reduce) {
  .references-section .references-track:not([data-ref-motion="js"]){
    -webkit-animation-duration:110s!important;animation-duration:110s!important;
  }
  .references-section .references-track.reverse:not([data-ref-motion="js"]){
    -webkit-animation-duration:130s!important;animation-duration:130s!important;
  }
}

/* V66 audit: legacy fractional grids had intrinsic min-content columns wider than phone screens. */
@media (max-width:760px), (max-height:500px) and (max-width:1000px){
  .training-portfolio-v91,.training-experience-grid-v91{
    grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;max-width:100%!important;
  }
  .training-portfolio-v91 > *, .training-experience-grid-v91 > *{
    min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
    overflow-wrap:anywhere;
  }
}

/* Smallest phones: all legacy training grids must give up intrinsic min-content width. */
@media (max-width:760px), (max-height:500px) and (max-width:1000px){
  .training-business-grid-v91,.training-intro-grid-v91,
  .training-projects-grid-v91,.training-experience-grid-v91,
  .training-portfolio-v91,.training-split-v91,.training-visual-v91{
    grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;
  }
  .training-business-grid-v91 > *,.training-intro-grid-v91 > *,
  .training-projects-grid-v91 > *,.training-experience-grid-v91 > *,
  .training-portfolio-v91 > *,.training-split-v91 > *,
  .training-visual-v91 > *{
    min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
    overflow-wrap:anywhere;
  }
}

/* Very long translated headings on Experiences / Formations: do not create intrinsic overflow. */
@media (max-width:760px), (max-height:500px) and (max-width:1000px){
  .formations-choices-head-v92,.formations-hub-cta-v92 .wrap,
  .formations-philosophy-grid-v92{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;}
  .formations-choices-head-v92 > *,.formations-hub-cta-v92 .wrap > *,
  .formations-philosophy-grid-v92 > *{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere;}
}

/* 320px audit: prevent long immersive-experience and artist-story copy from widening document. */
@media (max-width:760px), (max-height:500px) and (max-width:1000px){
  .artist-story-grid-v149{grid-template-columns:minmax(0,1fr)!important;min-width:0!important;}
  .artist-story-grid-v149 > *{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;overflow-wrap:anywhere;}
  .experience-skills-v189{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .experience-skills-v189 > *{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere;box-sizing:border-box!important;}
}
@media (max-width:370px){
  .experience-skills-v189{grid-template-columns:minmax(0,1fr)!important;}
  .experience-skills-v189 > *{grid-column:1/-1!important;border-right:0!important;}
}

/* Gallery photos in the artist training: min-height + 4:3 intrinsic width created 333px figures on 320px screens. */
@media (max-width:760px), (max-height:500px) and (max-width:1000px){
  .artist-producteur-v149 .artist-creative-main-v151,
  .artist-producteur-v149 .artist-pillars-photo-v157{
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
  }
  .artist-producteur-v149 .artist-creative-main-v151 img,
  .artist-producteur-v149 .artist-pillars-photo-v157 img{
    display:block;width:100%!important;max-width:100%!important;min-width:0!important;
    height:clamp(270px,76vw,400px)!important;min-height:0!important;
    aspect-ratio:auto!important;object-fit:cover!important;
  }
}