/* The early black stage uses the site's real hero-story geometry, including
   mobile breakpoints. No second loader, fixed cover or approximate height. */
.ps-client-selection{width:100%;min-width:0}
.ps-client-selection>.client-resource-page{padding:0!important;min-height:0}

/* Preserve React's native 480ms leaving lifecycle; the old global reference
   disabled its opacity transition. Only the indicator's visual exit changes. */
html body .client-resource-loading{transition:opacity .48s cubic-bezier(.2,0,0,1),visibility 0s linear!important}
html body .client-resource-loading.is-leaving{transition:opacity .48s cubic-bezier(.2,0,0,1),visibility 0s linear .48s!important}
@media(prefers-reduced-motion:reduce){html body .client-resource-loading,html body .client-resource-loading.is-leaving{transition:none!important}}

/* Retired photo presentations never paint while the managed render mounts or
   React refreshes its legacy nodes. Keep their native geometry until replaced. */
html body #accueil:not([data-home-native-fallback])>.hero-story:not(.ps-home-hero),
html body #accueil:not([data-home-native-fallback])>.filmstrip-section{visibility:hidden!important}
html body main.client-resource-page:not([data-ps-native-fallback])>.client-photo-library:not(.ps-managed-selection){visibility:hidden!important}

/* Live site composition reuses the Studio slideshow/card radius. Load before
   mounting so the native fallback, entry stage and decoded photo agree. */
/* Keep Safari’s outer canvas/status area black behind the white content. */
html:has(#accueil),html:has(#accueil) body{background:#000;color:#181818}
html body #accueil{background:#fff;color:#181818}
html body #accueil>:is(.intro-dark,.journey-section,.after-carousel-story,.site-footer){background:transparent;color:#181818}
html body #accueil>.intro-dark{--ink:#181818;--muted:#6b6b6b;--body:#6b6b6b;padding-block:48px 32px}
html body #accueil>.journey-section{padding-block:36px 48px}
html body #accueil>.intro-dark :is(h2,p){color:inherit}
html body #accueil>.intro-dark .body-copy{color:#6b6b6b}
@media(min-width:1101px){
 html{--site-card-gutter:48px;--site-card-max:var(--studio-ui-page-max,1424px);--site-card-top:136px}
 html:not([data-studio-surface-device=phone]) body #accueil{padding-top:var(--site-card-top)}
 html:not([data-studio-surface-device=phone]) body .ps-client-selection{padding-top:var(--site-card-top);background:var(--studio-ui-canvas,#181818)}
 html:not([data-studio-surface-device=phone]) body #accueil>.hero-story,
 html:not([data-studio-surface-device=phone]) body .ps-client-selection :is(.ps-hero,[data-ps-entry-stage]){box-sizing:border-box;width:calc(100% - 2 * var(--site-card-gutter));max-width:var(--site-card-max);height:auto;min-height:520px;aspect-ratio:16/9;margin:0 auto;border:0;border-radius:var(--client-photo-card-radius,10px);overflow:hidden;isolation:isolate}
 html:not([data-studio-surface-device=phone]) body :is(#accueil>.ps-home-hero,.ps-client-selection .ps-hero){padding:16px 0}
 html:not([data-studio-surface-device=phone]) body :is(#accueil>.ps-home-hero,.ps-client-selection .ps-hero)>.landscape-copy.editorial-grid{box-sizing:border-box;width:100%;max-width:none;padding-inline:clamp(28px,4vw,64px);margin:0;grid-template-columns:minmax(0,1fr)}
 html:not([data-studio-surface-device=phone]) body :is(#accueil>.ps-home-hero,.ps-client-selection .ps-hero) .body-copy{grid-column:1/-1}
 html:not([data-studio-surface-device=phone]) body :is(#accueil>.ps-home-hero,.ps-client-selection .ps-hero) .ps-hero-actions{width:100%}
 /* Public copy is one continuous white reading area after the photograph. */
 html:not([data-studio-surface-device=phone]) body #accueil>:is(.intro-dark,.after-carousel-story,.site-footer){box-sizing:border-box;width:calc(100% - 2 * var(--site-card-gutter));max-width:var(--site-card-max);margin-inline:auto;padding-inline:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr);text-align:left}
}
/* Below the full desktop navigation, keep the native + above a modest card
   gutter on tablets; phones retain their original edge-to-edge photograph. */

/* Retire the former full-width black section's minimum-height reserve. */
html body #accueil>.intro-dark{min-height:0;align-content:start}

@media(max-width:1100px){html body #accueil>:is(.intro-dark,.after-carousel-story,.site-footer){box-sizing:border-box;width:calc(100% - 40px);max-width:none;margin-inline:auto;padding-inline:0;grid-template-columns:minmax(0,1fr);text-align:left}}
/* Use the same full text column as the slideshow, before and after the gallery. */
html body #accueil>:is(.intro-dark,.after-carousel-story,.site-footer)>.body-copy{width:100%;max-width:none}
html body #accueil>:is(.intro-dark,.after-carousel-story,.site-footer)>.body-copy>p,
html body #accueil>.ps-home-hero .body-copy>p{max-width:none}
/* The photo lead and native resources form one page, without a second viewport floor. */
html body .ps-client-selection+main.client-resource-page{min-height:0}

/* The same 1100px breakpoint owns the card and the native + / pill menu. */
@media(max-width:1100px){
 html body #accueil{padding-top:0}
 html body .ps-client-selection{padding-top:0}
 html body :is(#accueil>.ps-home-hero,.ps-client-selection .ps-hero){width:100%;max-width:none;margin-inline:0;border:0!important;border-radius:0;aspect-ratio:auto}
 html body #accueil>.ps-home-hero>.landscape-copy.editorial-grid{box-sizing:border-box;width:100%;margin-inline:0;padding-inline:20px;grid-template-columns:minmax(0,1fr)}
}
/* Use the same editorial column for footer links and legal text. */
html body #accueil>.site-footer>p{width:100%;max-width:none;margin-inline:0;text-align:left}
/* Private card surroundings are a continuous Studio grey, also on tablets. */
@media(min-width:1101px){
 html:has(.ps-client-selection),html:has(.ps-client-selection) body,
 html body:has(.ps-client-selection)>main,
 html body .ps-client-selection{background:var(--studio-ui-canvas,#181818)}
}

/* Filmsupply reference: keep Suisse, align all white-page editorial headings. */
html body main#accueil>:is(.intro-dark,.journey-section,.after-carousel-story).editorial-grid h2{font-size:24px!important;line-height:32px!important;font-weight:500!important;color:#000!important}
/* Footer and prose share the very same column at every width, even after
   native language/navigation updates. Never give the footer a second gutter. */
@media(min-width:1101px){html body #accueil>:is(.intro-dark,.after-carousel-story,.site-footer){box-sizing:border-box!important;width:calc(100% - 2 * var(--site-card-gutter))!important;max-width:var(--site-card-max)!important;margin-inline:auto!important;padding-inline:clamp(28px,4vw,64px)!important}}
@media(max-width:1100px){html body #accueil>:is(.intro-dark,.after-carousel-story,.site-footer){box-sizing:border-box!important;width:calc(100% - 40px)!important;max-width:none!important;margin-inline:auto!important;padding-inline:0!important}}
html body #accueil>.site-footer>p{box-sizing:border-box;width:100%!important;max-width:none!important;margin-inline:0!important;padding-inline:0!important;color:#000}
html body #accueil>.site-footer a{color:inherit}

/* The public links/legal footer also belongs to the authenticated private page. */
html body .client-private-footer{box-sizing:border-box;width:calc(100% - 40px);max-width:var(--studio-ui-page-max,1424px);margin:32px auto 0;padding:24px 0 48px;background:transparent;color:#fff;text-align:left;box-shadow:none!important;border:0!important}
html body .client-private-footer>p{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:0;color:#fff}
html body .client-private-footer a{color:inherit}
@media(min-width:1101px){html body .client-private-footer{width:calc(100% - 2 * var(--site-card-gutter,48px));padding-inline:clamp(28px,4vw,64px)}}
/* One page canvas: grey on desktop/landscape tablet, black on phone/portrait tablet. */
html:has(main.client-resource-page){--private-page-canvas:#181818}
html[data-studio-surface-device=phone]:has(main.client-resource-page){--private-page-canvas:#000}
@media(orientation:portrait){html[data-studio-surface-device=tablet]:has(main.client-resource-page){--private-page-canvas:#000}}
html:has(main.client-resource-page),html:has(main.client-resource-page) body,
html body:has(main.client-resource-page) :is(main.client-resource-page,.ps-client-selection,.ps-client-selection>.client-resource-page){background:var(--private-page-canvas)!important}

html[data-studio-surface-device]:has(body>main.client-resource-page) body:has(>main.client-resource-page){background:var(--private-page-canvas)!important}

/* Compact closing rhythm shared by the public and private footers. */
html body #accueil>.after-carousel-story{padding-bottom:20px}
html body #accueil>.site-footer,
html body .client-private-footer{min-height:0;padding-top:20px;padding-bottom:24px}
html body .client-private-footer{margin-top:0}