/* RÉGLAGES DES TRANSITIONS — durées en millisecondes.
   La palette du menu et du rideau se trouve dans theme.css. */
:root {
  --reveal-duration: 800ms;
  --menu-duration: 620ms;
  --menu-exit-duration: 320ms;
  --page-duration: 280ms;
  --curtain-duration: 650ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --arrival-delay: 0ms;
}
body { transition: background-color 280ms, color 280ms; }
.scroll-progress { position:fixed; inset:0 0 auto; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; z-index:40; pointer-events:none; }
.motion-ready .site-header > #navigation { display:none !important; }
.motion-ready .site-header { justify-content:space-between; }
.motion-ready .header-controls { margin-left:auto; }
.motion-ready .menu-toggle { display:flex; align-items:center; gap:28px; min-height:44px; border:1px solid var(--field-border); padding:9px 17px; color:var(--ink); background:transparent; font-size:12px; }
.motion-ready .menu-toggle span { display:block; transition:transform 350ms var(--motion-ease); font-size:19px; line-height:1; }
.motion-ready .menu-toggle:hover span { transform:rotate(90deg); }
.motion-ready .menu-toggle:hover { background:var(--soft); }

/* Menu modal : la boîte de dialogue gère le focus et le fond inactif. */
.menu-open { overflow:hidden; padding-right:var(--scrollbar-gap,0px); }
.menu-sheet { position:fixed; inset:0; width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:0; border:0; background:var(--menu-bg); color:var(--menu-ink); color-scheme:dark; overflow:auto; }
.menu-sheet::backdrop { background:transparent; }
.menu-sheet[open] { display:block; animation:menu-panel-in var(--menu-duration) var(--motion-ease) both; }
.menu-sheet-inner { min-height:100%; padding:28px 56px 24px; display:flex; flex-direction:column; }
.menu-sheet[open] .menu-sheet-inner { animation:menu-enter var(--menu-duration) var(--motion-ease) both; }
.menu-top { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.menu-top .star { color:var(--menu-accent); }
.menu-kicker { font-size:8px; letter-spacing:2px; color:var(--menu-muted); }
.menu-close { display:flex; align-items:center; gap:23px; min-height:48px; border:1px solid #6e7866; padding:8px 17px; background:transparent; color:var(--menu-ink); font-size:12px; }
.menu-close > span[aria-hidden] { font-size:28px; line-height:1; transition:transform 300ms; }
.menu-close:hover > span[aria-hidden] { transform:rotate(90deg); }
.menu-close:focus-visible,.menu-sheet a:focus-visible { outline-color:var(--menu-accent); }
.menu-content { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:8vw; width:100%; max-width:1360px; margin:auto; padding:45px 0; transition:opacity 260ms,transform 400ms var(--motion-ease); }
.menu-links { min-width:0; }
.menu-links > .eyebrow { color:var(--menu-muted); margin-bottom:24px; }
.menu-links nav { display:flex; flex-direction:column; }
.menu-links nav a { display:grid; grid-template-columns:27px 1fr 35px; align-items:baseline; gap:20px; border-top:1px solid #444e40; padding:20px 0; }
.menu-links nav a:last-child { border-bottom:1px solid #444e40; }
.menu-number { font:10px var(--sans); color:var(--menu-muted); letter-spacing:1px; }
.menu-name { font:clamp(34px,4.5vw,68px)/1.1 var(--serif); letter-spacing:-.05em; transition:color 250ms,transform 400ms var(--motion-ease); }
.menu-links nav a > span:last-child { font-size:30px; transition:transform 350ms var(--motion-ease); color:var(--menu-accent); }
.menu-links nav a:hover .menu-name,.menu-links nav a:focus-visible .menu-name { color:var(--menu-accent); transform:translateX(10px); }
.menu-links nav a:hover > span:last-child { transform:translate(4px,-4px); }
.menu-links nav a[aria-current] .menu-name { color:var(--menu-accent); font-style:italic; }
.menu-sheet[open] .menu-links nav a { animation:menu-link-in 720ms var(--motion-ease) both; animation-delay:calc(100ms + var(--item-index) * 70ms); }
.menu-home { display:inline-flex; align-items:center; gap:30px; padding:14px 0 4px; margin-top:22px; font-size:12px; color:var(--menu-muted); }
.menu-home:hover { color:var(--menu-accent); }
.menu-preview { position:relative; margin:0; min-width:0; overflow:hidden; }
.menu-preview img { width:100%; max-height:58vh; aspect-ratio:9/10; object-fit:cover; }
.menu-preview figcaption { display:flex; flex-direction:column; gap:10px; padding-top:20px; }
.menu-preview-label { font-size:8px; letter-spacing:1.8px; color:var(--menu-muted); }
.menu-preview-caption { font:italic 24px/1.3 var(--serif); color:var(--menu-accent); letter-spacing:-.02em; }
.menu-sheet[open] .menu-preview { animation:menu-preview-in 950ms 150ms var(--motion-ease) both; }
.menu-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid #444e40; color:var(--menu-muted); font-size:8px; letter-spacing:1.6px; }
.menu-sheet.is-closing { animation:menu-panel-out var(--menu-exit-duration) var(--motion-ease) both; }
.menu-sheet.is-closing .menu-sheet-inner { animation:menu-exit var(--menu-exit-duration) var(--motion-ease) both; }
.menu-sheet.is-closing .menu-links nav a,.menu-sheet.is-closing .menu-preview { animation:none; }
.menu-sheet.is-navigating .menu-content,.menu-sheet.is-navigating .menu-top,.menu-sheet.is-navigating .menu-bottom { opacity:0; transform:translateY(-16px); transition:opacity 220ms,transform 300ms; }
.menu-transition-mark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:20px; pointer-events:none; opacity:0; transform:translateY(15px); transition:opacity 250ms 80ms,transform 300ms 80ms; font:36px/1 var(--serif); letter-spacing:-1.5px; }
.menu-transition-mark .star { color:var(--menu-accent); }
.menu-sheet.is-navigating .menu-transition-mark { opacity:1; transform:translateY(0); }
.menu-sheet.is-navigating { animation:none; clip-path:none; }

/* Entrée et départ entre les documents : les liens restent de vrais liens. */
.page-curtain { position:fixed; inset:0; z-index:100; background:var(--menu-bg); color:var(--menu-ink); display:flex; justify-content:center; align-items:center; gap:20px; transform:translateY(101%); pointer-events:none; font:36px/1 var(--serif); letter-spacing:-1.5px; }
.page-curtain .star { color:var(--menu-accent); }
.page-arriving { --arrival-delay:200ms; }
.page-arriving .page-curtain { animation:curtain-away var(--curtain-duration) var(--motion-ease) both; }
.is-leaving .page-curtain { animation:none; transform:translateY(0); pointer-events:auto; }

/* Apparition des sections, une seule fois, sans masquer le contenu sans JS. */
.motion-ready .reveal-item { transition:opacity var(--reveal-duration) var(--motion-ease),transform var(--reveal-duration) var(--motion-ease); transition-delay:var(--reveal-delay,0ms); }
.motion-ready .reveal-item:not(.is-revealed) { opacity:0; transform:translateY(35px); }
.motion-ready .reveal-item .art-wrap { transition:clip-path 1000ms var(--motion-ease); }
.motion-ready .reveal-item:not(.is-revealed) .art-wrap { clip-path:inset(10% 0 0 0); }
.motion-ready .reveal-item.is-revealed .art-wrap { clip-path:inset(0); }
.motion-ready .reveal-item:focus-within { opacity:1; transform:none; }
.filter-ghost .small { margin-top:6px; }

/* Entrée de l’accueil et profondeur du visuel. */
.hero-line { display:block; overflow:clip; padding:.1em .13em .14em 0; margin:-.1em -.13em -.14em 0; }
.hero-word { display:block; }
.motion-ready .hero-word { animation:hero-line-in 1100ms var(--motion-ease) both; animation-delay:calc(var(--arrival-delay) + 80ms + var(--line-index) * 110ms); }
.motion-ready .hero-copy > .eyebrow { animation:soft-in 850ms var(--motion-ease) both; animation-delay:var(--arrival-delay); }
.motion-ready .hero-intro { animation:soft-in 900ms var(--motion-ease) both; animation-delay:calc(var(--arrival-delay) + 350ms); }
.motion-ready .hero-actions { animation:soft-in 900ms var(--motion-ease) both; animation-delay:calc(var(--arrival-delay) + 450ms); }
.motion-ready .hero .edition { animation:soft-in 900ms var(--motion-ease) both; animation-delay:calc(var(--arrival-delay) + 600ms); }
.motion-ready .hero-art { animation:hero-art-in 1300ms var(--motion-ease) both; animation-delay:var(--arrival-delay); }
.motion-ready .hero-art > img { transform:translate3d(var(--art-x,0px),calc(var(--art-y,0px) + var(--art-scroll,0px)),0) scale(1.1); transition:transform 700ms var(--motion-ease); }
.motion-ready .hero-art figcaption,.motion-ready .hero-art .art-index { animation:soft-in 900ms 700ms var(--motion-ease) both; }

/* Deux univers : la scène reste dans la fenêtre sur les écrans larges. */
.journey-heading { display:flex; flex-direction:column; align-items:start; gap:24px; margin-bottom:45px; }
.journey-heading .eyebrow { margin:0; }
.journey-heading > p:last-child { max-width:440px; color:var(--muted); font-size:14px; margin:0; }
.journey-grid { display:grid; grid-template-columns:1fr .85fr; gap:9vw; align-items:start; }
.journey-stage { position:sticky; top:65px; height:70vh; max-height:720px; min-height:420px; overflow:hidden; }
.journey-card { position:absolute; inset:0; transition:opacity 750ms var(--motion-ease),transform 1000ms var(--motion-ease); }
.journey-card > span:last-child { position:absolute; inset:auto 20px 20px; font-size:8px; letter-spacing:1.5px; }
.journey-sculpture { background:#30273c; color:#f4f1e9; }
.journey-sculpture img { width:100%; height:100%; object-fit:cover; }
.journey-web { display:flex; flex-direction:column; justify-content:center; background:var(--soft); padding:30px; opacity:0; transform:translateY(50px) scale(.94); }
.journey-web .demo-preview { width:100%; min-height:330px; }
.journey-browser { display:flex; align-items:center; gap:5px; border:1px solid var(--line); padding:13px; }
.journey-browser i { width:5px; height:5px; border-radius:50%; background:var(--muted); }
.journey-browser > span { font-size:6px; letter-spacing:1px; margin-left:12px; color:var(--muted); }
.journey-web > span:last-child { color:var(--muted); }
.journey-stage[data-step="1"] .journey-sculpture { opacity:0; transform:translateY(-35px) scale(1.04); }
.journey-stage[data-step="1"] .journey-web { opacity:1; transform:none; }
.journey-step { min-height:75vh; padding:60px 0; display:flex; flex-direction:column; justify-content:center; align-items:start; }
.journey-step .eyebrow { color:var(--accent); }
.journey-step h3 { font:clamp(42px,4.6vw,68px)/1.05 var(--serif); letter-spacing:-.05em; margin:0 0 30px; }
.journey-step h3 em { color:var(--accent); }
.journey-step > p:not(.eyebrow) { font-size:16px; max-width:380px; }
.journey-step .text-link { margin-top:10px; }

@keyframes menu-enter { from { opacity:0; transform:translateY(-35px); } to { opacity:1; transform:none; } }
@keyframes menu-panel-in { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0); } }
@keyframes menu-panel-out { from { clip-path:inset(0); } to { clip-path:inset(0 0 100% 0); } }
@keyframes menu-link-in { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes menu-preview-in { from { opacity:0; clip-path:inset(0 0 100% 0); transform:scale(1.04); } to { opacity:1; clip-path:inset(0); transform:none; } }
@keyframes menu-exit { to { opacity:0; transform:translateY(-35px); } }
@keyframes curtain-away { from { transform:translateY(0); } to { transform:translateY(-101%); } }
@keyframes hero-line-in { from { transform:translateY(115%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes hero-art-in { from { clip-path:inset(12% 0 0 100%); opacity:.3; } to { clip-path:inset(0); opacity:1; } }
@keyframes soft-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }

@media(max-width:1100px) {
  .menu-sheet-inner { padding-inline:32px; }
  .menu-content { gap:5vw; }
  .menu-name { font-size:clamp(30px,4.8vw,53px); }
  .menu-kicker { display:none; }
  .journey-grid { gap:55px; }
  .journey-web { padding:20px; }
  .journey-web .demo-preview { min-height:300px; }
}
@media(max-width:800px) {
  .menu-content { grid-template-columns:1fr; padding:45px 0; }
  .menu-preview { display:none; }
  .menu-name { font-size:clamp(32px,6vw,48px); }
  .menu-links nav a { padding:22px 0; }
  .journey-grid { gap:35px; grid-template-columns:1fr 1fr; }
  .journey-stage { min-height:400px; top:25px; height:65vh; }
  .journey-step h3 { font-size:43px; }
  .journey-web { padding:14px; }
  .journey-web .demo-mini { padding:20px 12px; }
  .journey-web .demo-brand { font-size:25px; }
  .journey-card > span:last-child { font-size:6px; left:15px; right:15px; }
}
@media(max-width:600px) {
  .motion-ready .menu-toggle { gap:12px; padding-inline:12px; }
  .menu-sheet-inner { padding:23px 20px; }
  .menu-top .logo { font-size:25px; gap:8px; }
  .menu-top .logo .star { font-size:34px; }
  .menu-close { gap:12px; min-height:44px; padding:7px 12px; font-size:11px; }
  .menu-content { padding:40px 0; }
  .menu-links > .eyebrow { font-size:8px; margin-bottom:22px; }
  .menu-links nav a { grid-template-columns:18px 1fr 22px; gap:13px; padding:23px 0; }
  .menu-name { font-size:clamp(29px,7.7vw,44px); }
  .menu-number { font-size:8px; }
  .menu-links nav a > span:last-child { font-size:22px; }
  .menu-bottom { font-size:7px; letter-spacing:.8px; flex-wrap:wrap; row-gap:12px; }
  .menu-bottom > span:last-child { display:none; }
  .menu-home { margin-top:20px; font-size:12px; }
  .menu-transition-mark,.page-curtain { font-size:30px; }
  .journey-grid { grid-template-columns:1fr; gap:20px; }
  .journey-heading { margin-bottom:30px; }
  .journey-heading h2 { font-size:45px; }
  .journey-stage { position:relative; top:auto; height:auto; min-height:0; aspect-ratio:1/1.05; }
  .journey-step { min-height:0; padding:32px 0; border-bottom:1px solid var(--line); }
  .journey-step h3 { font-size:45px; margin-bottom:25px; }
  .journey-step > p:not(.eyebrow) { font-size:15px; }
  .journey-web .demo-preview { min-height:280px; }
  .journey-web .demo-brand { font-size:32px; }
  .journey-web .demo-preview > img { min-height:280px; }
}
@media(max-width:380px) {
  .motion-ready .site-header > .logo { font-size:18px; gap:6px; }
  .motion-ready .site-header > .logo .star { font-size:26px; }
  .motion-ready .header-controls { gap:6px; }
  .motion-ready .theme-toggle { width:40px; }
  .motion-ready .menu-toggle { font-size:11px; gap:6px; padding-inline:8px; }
  .motion-ready .menu-toggle span { font-size:16px; }
  .menu-top .logo { font-size:21px; }
  .menu-top .logo .star { font-size:30px; }
  .menu-top { gap:14px; }
  .menu-close { gap:7px; padding-inline:10px; }
  .menu-links nav a { gap:9px; }
  .menu-name { font-size:29px; }
}
@media(max-height:650px) and (min-width:801px) {
  .menu-sheet-inner { padding-block:20px; }
  .menu-content { padding-block:25px; }
  .menu-links nav a { padding-block:11px; }
  .menu-name { font-size:38px; }
  .menu-preview img { max-height:48vh; }
  .menu-home { margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .reveal-item,.hero-word,.hero-art,.hero-intro,.hero-actions,.hero .edition { opacity:1!important; transform:none!important; clip-path:none!important; }
  .page-curtain,.scroll-progress { display:none; }
  .motion-ready .hero-art > img { transform:none; }
  .menu-sheet .menu-sheet-inner,.menu-sheet .menu-links nav a,.menu-sheet .menu-preview { animation:none!important; }
  .journey-stage { position:relative; top:auto; }
  .journey-step { min-height:0; padding-block:35px; }
}