/* One short, scroll-controlled opening. The approved film supplies its own light. */
:root{--site-header:86px}
html{scroll-padding-top:var(--site-header)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;height:var(--site-header);padding:9px 6%;background:#f4eddcf5;backdrop-filter:blur(10px)}
.site-header .brand img{width:92px}
.site-header nav{gap:24px}
.short-intro{position:relative;height:100svh;min-height:460px;background:#f2ede2;border-bottom:1px solid var(--line);isolation:isolate}
.intro-animated .short-intro{height:210svh}
.intro-sticky{position:sticky;top:0;height:100svh;min-height:460px;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;padding-top:var(--site-header)}
.intro-animated .site-header,.intro-animated .intro-bottom{opacity:var(--intro-actions,0)}
.intro-opening .site-header,.intro-opening .intro-bottom{visibility:hidden;pointer-events:none}
.keyboard-skip{position:fixed;left:20px;top:-100px;z-index:50;padding:10px 20px;background:var(--ink);color:white}
.keyboard-skip:focus{top:15px}
.intro-cue{position:absolute;bottom:33px;width:100%;text-align:center;font-size:11px;letter-spacing:.8px;color:#74705e;pointer-events:none;margin:0;opacity:0}
.intro-opening .intro-cue{opacity:1}
.intro-stage{position:relative;display:grid;place-items:center;min-height:0;pointer-events:none}
/* Contain, never cover: retain the complete composition and the source marks.
   The video has no filter, tint or overlay; fine flour and crust stay intact. */
.intro-film{display:none;position:relative;width:var(--film-width,100%);aspect-ratio:16/9;
 mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.intro-video,.intro-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.intro-video{opacity:0}
.intro-video-ready .intro-video{opacity:1}
.intro-video-ready .intro-poster{visibility:hidden}
.intro-static-logo{display:block;width:clamp(190px,27vw,360px);height:auto;max-width:70%;max-height:80%;object-fit:contain}
.intro-animated .intro-film{display:block}
.intro-animated .intro-static-logo{display:none}
.intro-bottom{position:relative;z-index:5;padding:22px 6% 26px;text-align:center}
.intro-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.intro-scroll{display:inline-block;margin-top:22px;font-size:11px;letter-spacing:.4px;color:#6f705f}
.hero#accueil,.section{scroll-margin-top:18px}
.story-invitation{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10%;background:#e8dfca}
.story-invitation p{max-width:420px;font-size:15px;margin-bottom:27px}
.story-preview{display:flex;align-items:center;justify-content:center;gap:12px;color:#98805b}
.story-preview svg{width:38%;height:200px}
.story-preview span{font-size:11px;align-self:flex-end;margin-bottom:40px}
.story-preview i{font:30px Georgia,serif}
@media(max-width:900px){.site-header nav{gap:17px}.site-header nav>a:not(.button){font-size:12px}}
@media(max-width:760px){
 :root{--site-header:76px}
 .site-header{flex-wrap:nowrap;padding:9px 6%;gap:12px}
 .site-header .brand img{width:78px}
 .site-header nav{margin-left:auto;flex-wrap:nowrap}
 .site-header nav>a:not(.button){display:none}
 .site-header a.button{min-height:46px}
 .intro-bottom{padding:15px 5% 24px}
 .intro-actions{gap:9px}
 .intro-actions a.button{font-size:12px;gap:12px;padding-left:17px}
 .intro-scroll{margin-top:18px;font-size:10px}
 .story-invitation{grid-template-columns:1fr;gap:20px}
 .story-preview svg{height:150px}
 .story-preview span{margin-bottom:25px}
}
@media(max-height:600px){
 .short-intro,.intro-sticky{min-height:320px}
 .intro-bottom{padding-block:10px}
 .intro-scroll{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.intro-animated .short-intro{height:100svh}}