@import url('/cinematic-v51/menu.css');
@import url('/cinematic-v51/home-navigation.css');
@import url('/cinematic-v51/standalone.css?v=cinematic7');
@import url('/cinematic-v51/menu-layout.css?v=cinematic10');
@import url('/cinematic-v51/public-social.css?v=cinematic7');
/* Keep both the fallback links and the imported, unfinished template out of
   the first paint. Brand, phone contacts and page content stay visible. */
html[data-shared-menu-pending=atelier] :is(.header-inner>.nav,.header-inner>.menu-toggle,#mobile-nav,.header-actions .socials,.header-actions>.account-link){visibility:hidden!important}
#home-navigation[data-shared-page-navigation]:not([data-shared-ready=true]){visibility:hidden!important}
/* The same public destinations are usable before JS, or if it cannot load.
   The discarded navigation stays hidden in every state, including failures. */
body[data-shared-menu-page=atelier] .shared-menu-fallback{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;isolation:isolate;justify-self:center;width:100%;max-width:742px;height:78px;margin:0;min-width:0}
body[data-shared-menu-page=atelier] .shared-menu-fallback::before{content:"";position:absolute;inset:26px 0 0;border:1px solid #c1d2e442;border-radius:12px;background:linear-gradient(180deg,#243449eb,#142236f5);box-shadow:inset 0 1px 1px #f1f7ff24;z-index:-1}
body[data-shared-menu-page=atelier] .shared-menu-fallback-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;min-width:0;padding:0 0 7px;color:#d3dce8;text-decoration:none;font-family:inherit;font-size:11px;line-height:1.3;white-space:nowrap}
body[data-shared-menu-page=atelier] .shared-menu-fallback-item>svg{display:block;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
body[data-shared-menu-page=atelier] .shared-menu-fallback-item[aria-disabled=true]{color:#aeb9c8;cursor:default}
body[data-shared-menu-page=atelier] .shared-menu-fallback-item:focus-visible{outline:2px solid #d4e7fa;outline-offset:-2px;border-radius:8px}
body[data-shared-menu-page=atelier]:has(#home-navigation[data-shared-ready=true]) .shared-menu-fallback{display:none}
body[data-shared-menu-page=atelier] .shared-menu-retry{display:none;position:absolute;top:100%;right:0;margin-top:4px;font-size:11px;color:#d4e7fa;text-underline-offset:3px}
html[data-shared-menu-fallback=true] .shared-menu-retry{display:block}
@media(max-width:1100px){body[data-shared-menu-page=atelier] .shared-menu-fallback{grid-column:1/-1;grid-row:2}}
@media(max-width:900px){body[data-shared-menu-page=atelier] .shared-menu-fallback{height:76px}}
@media(max-width:640px){body[data-shared-menu-page=atelier] .shared-menu-fallback{height:64px}body[data-shared-menu-page=atelier] .shared-menu-fallback-item{gap:5px;padding-bottom:6px}body[data-shared-menu-page=atelier] .shared-menu-fallback-item>svg{width:17px;height:17px}body[data-shared-menu-page=atelier] .shared-menu-fallback-item>span{font-size:0;line-height:1}body[data-shared-menu-page=atelier] .shared-menu-fallback-item>span::after{content:attr(data-mobile-label);font-size:clamp(8px,2.25vw,11px);line-height:1.3}}
/* The original rail/geometry is shared. Internal pages always use the top layout. */
html:has(body[data-shared-menu-page]),body[data-shared-menu-page]{overscroll-behavior-y:auto}
body[data-shared-menu-page] :is(#services,.end-strip){touch-action:auto}
body[data-shared-menu-page] [data-shared-menu-duplicate=true]{display:none!important}
body[data-shared-menu-page] [data-shared-menu-header]{display:grid!important;grid-template-columns:minmax(150px,1fr) minmax(0,714px) minmax(140px,1fr)!important;align-items:center;gap:12px 24px!important;height:auto;position:relative;z-index:35;overflow:visible}
body[data-shared-menu-page] [data-shared-menu-header]>:is(.brand,.account-brand,.video-brand){grid-column:1;grid-row:1;max-width:100%;width:min(100%,250px);margin:0}
body[data-shared-menu-page] #home-navigation{grid-column:2;grid-row:1;width:100%;max-width:calc(var(--shared-tab-count)*102px);justify-self:center;line-height:normal}
body[data-shared-menu-page] #home-navigation .menu-dock-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}
body[data-shared-menu-page] #home-navigation .menu-dock-viewport::-webkit-scrollbar{display:none}
body[data-shared-menu-page] #home-navigation .menu-dock{grid-template-columns:repeat(var(--shared-tab-count),minmax(0,1fr));min-width:calc(var(--shared-tab-count)*102px)}
body[data-shared-menu-page] #home-navigation .menu-dock [role=tab]>span{max-width:98px;text-align:center}
body[data-shared-menu-page=atelier] [data-shared-menu-header]{grid-template-columns:minmax(150px,1fr) minmax(0,848px) minmax(140px,1fr)!important}
body[data-shared-menu-page=atelier] #home-navigation{max-width:calc(var(--shared-tab-count)*106px)}
body[data-shared-menu-page=atelier] #home-navigation .menu-dock{min-width:calc(var(--shared-tab-count)*106px);height:78px;border-radius:12px;overflow:visible}
body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding:0 0 7px;background:transparent!important;box-shadow:none!important;border:0!important;outline:0!important;border-radius:0!important;font-weight:400}
body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]::before,body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]::after{display:none!important}
body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]>span{min-height:0;max-width:none!important;display:block;white-space:nowrap;font-size:11px;font-weight:450;line-height:1.3;letter-spacing:.01em}
body[data-shared-menu-page=atelier] #home-navigation .menu-dock-bead{top:4px;width:40px;height:40px;margin-left:4px}
body[data-shared-menu-page=atelier] #home-navigation .menu-dock:has([role=tab]:focus-visible) .menu-dock-bead{outline:2px solid #d4e7fa;outline-offset:1px}
body[data-shared-menu-page=atelier] .header-contacts{grid-column:3;grid-row:1;max-width:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0;align-items:flex-start}
body[data-shared-menu-page=atelier] .header-actions{grid-column:3;grid-row:2;margin:0}
body[data-shared-menu-page=videos] .video-search{grid-column:2;grid-row:2;width:100%;max-width:714px;justify-self:center}
body[data-shared-menu-page=videos] .video-header>.account-link{grid-column:3;grid-row:1;justify-self:end;max-width:100%;margin:0}
body[data-shared-menu-page=videos] .video-layout:has(>.video-sidebar[data-shared-menu-duplicate=true]){grid-template-columns:minmax(0,1fr)}
body[data-shared-menu-page=videos] [data-shared-menu-header]{position:sticky}
body[data-shared-menu-page] #home-navigation #menu-sound-toggle{width:100%;justify-content:flex-start;border-bottom:1px solid var(--menu-line);min-height:56px;font-size:13px}
/* Account actions need equal label rows and the full space beside its logo. */
body[data-shared-menu-page=account] [data-shared-menu-header]{grid-template-columns:minmax(150px,250px) minmax(0,1fr)!important}
body[data-shared-menu-page=account] #home-navigation{max-width:100%}
body[data-shared-menu-page=account] #home-navigation .menu-dock{height:106px;min-width:calc(var(--shared-tab-count)*102px)}
body[data-shared-menu-page=account] #home-navigation .menu-dock [role=tab]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:20px 29px;align-content:end;justify-content:stretch;justify-items:center;align-items:center;gap:7px;padding:0 2px 8px}
body[data-shared-menu-page=account] #home-navigation .menu-dock [role=tab]>svg{width:20px;height:20px}
body[data-shared-menu-page=account] #home-navigation .menu-dock [role=tab]>span{display:grid;place-content:center;width:100%;height:29px;max-width:98px;white-space:normal;font-size:11px;line-height:1.3;text-align:center}
body[data-shared-menu-page=account] .shared-menu-strip{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:6px;min-width:0}
body[data-shared-menu-page=account] .shared-menu-strip[data-overflow=true]{grid-template-columns:36px minmax(0,1fr) 36px}
body[data-shared-menu-page=account] #home-navigation .shared-menu-scroll{display:none;width:36px;min-width:36px;height:44px;min-height:44px;margin:24px 0 0;padding:7px;border:1px solid #b5cbe04d;border-radius:8px;background:#14223780;color:#d8e8fa;cursor:pointer;box-shadow:inset 0 1px 0 #eef6ff15}
body[data-shared-menu-page=account] #home-navigation [data-overflow=true]>.shared-menu-scroll{display:grid;place-items:center}
body[data-shared-menu-page=account] #home-navigation .shared-menu-scroll:disabled{opacity:.3;cursor:default}
body[data-shared-menu-page=account] #home-navigation .shared-menu-scroll svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-shared-menu-page=account] #home-navigation .menu-dock-viewport{scrollbar-width:thin;scrollbar-color:#839bb773 transparent;scroll-padding-inline:4px}
body[data-shared-menu-page=account] #home-navigation .menu-dock-viewport::-webkit-scrollbar{display:block;height:4px}
body[data-shared-menu-page=account] #home-navigation .menu-dock-viewport::-webkit-scrollbar-thumb{background:#839bb773;border-radius:2px}
@media(max-width:1100px){
 body[data-shared-menu-page] [data-shared-menu-header],body[data-shared-menu-page=atelier] [data-shared-menu-header]{grid-template-columns:minmax(0,1fr) auto!important;gap:6px 12px!important}
 body[data-shared-menu-page] #home-navigation{grid-column:1/-1;grid-row:2;max-width:min(714px,calc(var(--shared-tab-count)*102px))}
 body[data-shared-menu-page=atelier] .header-contacts{grid-column:2;grid-row:1}
 body[data-shared-menu-page=videos] .video-search{grid-column:1/-1;grid-row:3;max-width:none}
 body[data-shared-menu-page=videos] .video-header>.account-link{grid-column:2;grid-row:1}
}
@media(max-width:900px){
 body[data-shared-menu-page] [data-shared-menu-header]>:is(.brand,.account-brand,.video-brand){width:min(100%,180px)}
 body[data-shared-menu-page] #home-navigation{min-width:0;max-width:100%}
 body[data-shared-menu-page] #home-navigation .menu-dock{min-width:calc(var(--shared-tab-count)*90px)}
 body[data-shared-menu-page] #home-navigation .menu-dock [role=tab]>span{max-width:86px}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock{height:76px;min-width:calc(var(--shared-tab-count)*106px)}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]{padding:0 0 6px}
}
@media(max-width:600px){body[data-shared-menu-page=atelier] #home-navigation .menu-dock{height:68px}body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]{gap:6px;padding:0 0 6px}body[data-shared-menu-page=atelier] #home-navigation .menu-dock-bead{width:36px;height:36px;margin-left:6px;top:3px}}
/* Fit every atelier destination on the phone; the full names remain accessible. */
@media(max-width:900px){
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock-viewport{overflow:visible;touch-action:pan-y}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock{min-width:0;width:100%;height:64px;touch-action:pan-y}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]{gap:5px;padding:0 0 6px;touch-action:pan-y}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]>svg{width:17px;height:17px}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]>span[data-mobile-label]{font-size:0;line-height:1;white-space:nowrap}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock [role=tab]>span[data-mobile-label]::after{content:attr(data-mobile-label);font-size:clamp(8px,2.25vw,11px);line-height:1.3;letter-spacing:0}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock-bead{width:28px;height:28px;margin-left:10px;top:3px}
 body[data-shared-menu-page=atelier] #home-navigation .menu-dock-bead svg{width:17px;height:17px}
}
@media print{body[data-shared-menu-page] #home-navigation{display:none!important}}
@media(max-width:900px){
 body[data-shared-menu-page=videos] #home-navigation .menu-dock-viewport{overflow:visible;touch-action:pan-y}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock{min-width:0;width:100%;height:72px;touch-action:pan-y}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock [role=tab]{gap:6px;padding:0 0 7px;touch-action:pan-y}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock [role=tab]>svg{width:18px;height:18px}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock [role=tab]>span[data-mobile-label]{font-size:0;line-height:1;white-space:nowrap}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock [role=tab]>span[data-mobile-label]::after{content:attr(data-mobile-label);font-size:clamp(8px,2.25vw,11px);line-height:1.3;letter-spacing:0}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock-bead{width:32px;height:32px;margin-left:8px;top:3px}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock-bead svg{width:18px;height:18px}
 body[data-shared-menu-page=account] #home-navigation .menu-dock-viewport,
 body[data-shared-menu-page=account] #home-navigation .menu-dock,
 body[data-shared-menu-page=account] #home-navigation .menu-dock [role=tab]{touch-action:pan-x pan-y}
 body[data-shared-menu-page=account] #home-navigation .menu-dock{min-width:calc(var(--shared-tab-count)*76px);height:86px}
 body[data-shared-menu-page=account] #home-navigation .menu-dock [role=tab]{grid-template-rows:18px 26px;gap:5px;padding-bottom:6px}
 body[data-shared-menu-page=account] #home-navigation .menu-dock [role=tab]>span{height:26px;max-width:74px;font-size:10px}
 body[data-shared-menu-page=account] #home-navigation .menu-dock-bead{width:36px;height:36px;margin-left:6px;top:4px}
 body[data-shared-menu-page=account] #home-navigation .menu-dock-bead svg{width:20px;height:20px}
}

/* Clip the moving glow horizontally without clipping the raised menu bead. */
@media(max-width:900px){
 body:is([data-shared-menu-page=atelier],[data-shared-menu-page=videos]) #home-navigation .menu-dock-viewport{overflow-x:clip;overflow-y:visible}
}

/* Mobile videotheque: content first, one quiet account control. */
body[data-shared-menu-page=videos] .compact-account-icon{display:none}
body[data-shared-menu-page] #home-navigation .menu-dock [role=tab]{outline:none!important}
body[data-shared-menu-page] #home-navigation .menu-dock [role=tab]:focus-visible>span{outline:2px solid #d4e7fa;outline-offset:3px;border-radius:4px}
@media(max-width:600px){
 body[data-shared-menu-page=videos] .video-header[data-shared-menu-header]{padding:6px 12px 8px;gap:2px 10px!important;min-height:0}
 body[data-shared-menu-page=videos] .video-header>.video-brand{width:140px}
 body[data-shared-menu-page=videos] .video-brand img{width:140px;height:46px}
 body[data-shared-menu-page=videos] .video-header>.account-link{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;background:none;box-shadow:none;border-radius:50%;font-size:0;gap:0}
 body[data-shared-menu-page=videos] .video-header>.account-link>span:not(.header-avatar){display:none}
 body[data-shared-menu-page=videos] .video-header>.account-link .header-avatar{display:grid;width:30px;height:30px;margin:0;overflow:hidden;border-radius:50%;font-size:13px}
 body[data-shared-menu-page=videos] .video-header>.account-link .header-avatar img{width:100%;height:100%;object-fit:cover}
 body[data-shared-menu-page=videos] .compact-account-icon{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock{height:62px}
 body[data-shared-menu-page=videos] #home-navigation .menu-dock [role=tab]{padding-bottom:5px}
 body[data-shared-menu-page=videos] .video-search{height:44px;min-height:44px;border-radius:12px;border:1px solid #6f95bc55;background:#101b29;box-shadow:none;margin:4px 0 0}
 body[data-shared-menu-page=videos] .video-search input{height:42px;padding:0 12px;font-size:16px;box-shadow:none;border:0;background:none}
 body[data-shared-menu-page=videos] .video-search button{width:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
 body[data-shared-menu-page=videos] .video-search:focus-within{border-color:#b9d4ef}
}

/* Search is an action beside the avatar; only the navigation stays while scrolling. */
.video-search-toggle{display:none}
@media(max-width:600px){
 body[data-shared-menu-page=videos] .video-header[data-shared-menu-header]{grid-template-columns:minmax(0,1fr) 44px 44px!important;column-gap:6px!important;top:calc(-1 * var(--video-header-hide,54px))}
 body[data-shared-menu-page=videos] .video-header>.account-link{grid-column:3}
 body[data-shared-menu-page=videos] .video-search-toggle{display:grid;place-items:center;grid-column:2;grid-row:1;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;color:#dce8f6;border:0!important;border-radius:50%!important;box-shadow:none!important;background:transparent!important;cursor:pointer}
 body[data-shared-menu-page=videos] .video-search-toggle svg{width:22px;height:22px}
 body[data-shared-menu-page=videos] .video-header>.account-link{border:0!important;border-radius:50%!important;box-shadow:none!important;background:transparent!important}
 body[data-shared-menu-page=videos] .video-search{display:none;grid-column:1/-1;grid-row:2}
 body[data-shared-menu-page=videos] .video-header[data-search-open=true]>.video-search{display:flex}
 body[data-shared-menu-page=videos] .video-header #home-navigation{grid-column:1/-1;grid-row:3}
 body[data-shared-menu-page=videos] .video-header:has(.video-search:focus-within){top:0}
 body[data-shared-menu-page=videos] .video-search button{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
 body[data-shared-menu-page=videos] .video-search-toggle:focus-visible{outline:2px solid #d4e7fa;outline-offset:-3px}
}
