/* ===== Couche mouvement : intro, révélations au scroll, parallaxe, curseur, inclinaison ===== */
:root{--e:cubic-bezier(.2,.7,.2,1);--e2:cubic-bezier(.65,0,.35,1);--ice:#9CCBFF}

/* Barre de progression de lecture */
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--laiton),#F3EBDD);z-index:200;pointer-events:none}

/* Header : se cache en descendant, revient en montant */
header{transition:transform .45s var(--e)}
html.motion header.hide{transform:translateY(-100%)}
header .topbar{transition:max-height .4s var(--e),padding .4s var(--e),opacity .3s}
html.motion header.scrolled .topbar{max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden}

/* Révélations */
html.motion .rv{opacity:0;transform:translateY(30px);filter:blur(8px);transition:opacity 1s var(--e),transform 1s var(--e),filter 1s var(--e);will-change:opacity,transform}
html.motion .rv.in{opacity:1;transform:none;filter:none}
html.motion .rv.d1{transition-delay:.1s}html.motion .rv.d2{transition-delay:.2s}html.motion .rv.d3{transition-delay:.3s}html.motion .rv.d4{transition-delay:.42s}html.motion .rv.d5{transition-delay:.55s}
/* Titres mot à mot */
html.motion .split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .14em 0;margin:0 0 -.14em 0}
html.motion .split .w i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform .9s var(--e);transition-delay:calc(var(--i) * 45ms)}
html.motion .split.in .w i{transform:none}
html.motion .split{opacity:1;transform:none;filter:none;display:block}
/* Images : zoom de sortie */
html.motion .ph img,html.motion .case-full .im img,html.motion .press-card .im img,html.motion .hero-card img{transition:transform 1.4s var(--e)}
html.motion .rv:not(.in) .ph img,html.motion .rv:not(.in) .im img{transform:scale(1.12)}

/* Hero : lueur mouvante « aurora » + parallaxe */
.hero{position:relative;isolation:isolate}
html.motion .hero::before{content:"";position:absolute;inset:-20% 0;pointer-events:none;z-index:-1;background:radial-gradient(700px 500px at 20% 30%,rgba(196,157,95,.16),transparent 62%),radial-gradient(600px 600px at 80% 70%,rgba(156,203,255,.09),transparent 62%);animation:aurora 14s ease-in-out infinite alternate;will-change:transform}
@keyframes aurora{0%{transform:translate3d(-4%,-2%,0) rotate(-2deg)}100%{transform:translate3d(4%,3%,0) rotate(2deg)}}
html.motion .hero-card img{will-change:transform}
.hero .badge{transition:transform .6s var(--e)}
/* Grain léger sur les fonds encre */
html.motion body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Inclinaison 3D + reflet suivant le curseur */
html.motion .tilt{transform-style:preserve-3d;transition:transform .25s ease,box-shadow .4s var(--e);position:relative}
html.motion .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(243,235,221,.16),transparent 45%)}
html.motion .tilt:hover::after{opacity:1}
html.motion .tilt.creme-tilt::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(196,157,95,.22),transparent 45%)}

/* Boutons magnétiques */
html.motion .pill{transition:transform .35s var(--e),background .25s,color .25s,border-color .25s}

/* Curseur */
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--laiton);pointer-events:none;z-index:300;transform:translate(-50%,-50%);transition:width .25s var(--e),height .25s var(--e),opacity .3s,background .25s;opacity:0;mix-blend-mode:difference}
.cursor.on{opacity:1}
.cursor.link{width:44px;height:44px;background:rgba(243,235,221,.85)}
.cursor.video{width:82px;height:82px;background:var(--creme);mix-blend-mode:normal}
.cursor.video::after{content:"Lire";position:absolute;inset:0;display:grid;place-items:center;font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;color:var(--encre);text-transform:uppercase}
.cursor.hidden{opacity:0}
@media (pointer:coarse){.cursor{display:none}}

/* Intro d'ouverture */
#intro{position:fixed;inset:0;z-index:400;background:var(--encre);display:grid;place-items:center;color:var(--creme);overflow:hidden}
#intro .in{display:flex;flex-direction:column;align-items:center;gap:26px;transform:translateY(0)}
#intro svg{width:min(34vw,240px);height:auto;overflow:visible}
#intro .crest{fill:none;stroke:var(--laiton);stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 14px rgba(196,157,95,.55))}
#intro .peak{fill:var(--creme);transform-origin:center;transform-box:fill-box;transform:scale(0);opacity:0}
#intro .base{stroke:rgba(196,157,95,.35);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#intro .name{font-family:var(--display);font-weight:300;font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;line-height:1;overflow:hidden;padding:.12em .1em;margin:-.12em -.1em}
#intro .name span{display:inline-block;transform:translateY(115%)}
#intro .name i{font-style:normal;color:var(--laiton)}
#intro .tag{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--laiton);font-weight:600;opacity:0;transform:translateY(8px);white-space:nowrap}
#intro .tag b{display:inline-block;opacity:0;font-weight:600}
#intro .line{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--laiton),var(--creme));transform:scaleX(0);transform-origin:0 50%}
#intro .glow{position:absolute;inset:-30%;background:radial-gradient(600px 400px at 45% 55%,rgba(196,157,95,.2),transparent 60%),radial-gradient(500px 500px at 65% 40%,rgba(156,203,255,.09),transparent 60%);animation:aurora 6s ease-in-out infinite alternate;will-change:transform}
html.intro-on{overflow:hidden}
html.intro-on .hero{opacity:0}
html.intro-out #intro{transition:clip-path 1s var(--e2);clip-path:inset(0 0 100% 0)}
html.intro-out #intro .in{transition:transform 1s var(--e2),opacity .6s;transform:translateY(-60px);opacity:0}
html.intro-out .hero{opacity:1;animation:heroin 1.3s var(--e) both}
@keyframes heroin{0%{opacity:0;transform:scale(1.045) translateY(14px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){html.motion .rv,html.motion .split .w i{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.cursor,#intro,html.motion body::after{display:none!important}html.motion .hero::before{animation:none}}