@font-face{font-family:Cronde;src:url('assets/CRONDEItalic.ttf') format('truetype');font-display:swap}
:root{--black:#050505;--ink:#0a0a0a;--white:#f5f2ee;--muted:#aaa4a0;--red:#a60b12;--bright:#d4141d;--amber:#9d4014}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black)}body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.intro{position:fixed;inset:0;z-index:200;background:#030303;display:grid;place-items:center;animation:intro-away .8s ease 3.7s forwards;pointer-events:none}.envelope{position:absolute;left:0;width:100%;height:50%;background:linear-gradient(135deg,#090909,#151313 55%,#080808);transition:transform 1.1s cubic-bezier(.77,0,.18,1)}.envelope-top{top:0;clip-path:polygon(0 0,100% 0,50% 100%);animation:open-top 1.15s ease 2.45s forwards}.envelope-bottom{bottom:0;clip-path:polygon(0 100%,100% 100%,50% 0);animation:open-bottom 1.15s ease 2.45s forwards}.intro-seal{position:absolute;width:min(38vw,280px);height:min(38vw,280px);object-fit:cover;object-position:50% 3%;clip-path:circle(31% at 50% 23%);filter:drop-shadow(0 16px 28px #000);animation:seal-in .8s cubic-bezier(.2,.85,.3,1.2) .45s both,seal-break .7s ease 2.25s forwards}.wax-drop{position:absolute;width:14px;height:18px;background:var(--bright);border-radius:70% 30% 60% 40%;transform:translateY(-46vh);animation:drop .6s ease-in .12s forwards}.intro-note{position:absolute;bottom:10vh;text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;color:#827b78;animation:fade-in .8s ease 1.2s both}
@keyframes drop{to{transform:translateY(-2vh);opacity:0}}@keyframes seal-in{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}@keyframes seal-break{to{opacity:0;transform:scale(1.18);filter:blur(5px)}}@keyframes open-top{to{transform:translateY(-105%)}}@keyframes open-bottom{to{transform:translateY(105%)}}@keyframes intro-away{to{opacity:0;visibility:hidden}}@keyframes fade-in{from{opacity:0}to{opacity:1}}
.site-header{position:fixed;z-index:80;top:0;left:0;width:100%;padding:24px clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#050505cc,transparent)}.brand{font-family:Cronde,Georgia,serif;font-size:1.55rem;letter-spacing:.07em}.brand span{font-family:Georgia,serif;font-size:.58rem;letter-spacing:.1em;display:block;text-align:center}.site-header nav{display:flex;gap:28px;font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:#c7c1bd}.site-header nav a{position:relative}.site-header nav a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--bright);transition:.3s}.site-header nav a:hover::after{width:100%}.menu-toggle{display:none;color:#fff;border:0;background:none;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}
.hero{min-height:100svh;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden}.hero-halo{position:absolute;width:min(72vw,850px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#b3131a16 0,transparent 67%);filter:blur(8px)}.hero-copy{position:relative}.eyebrow{text-transform:uppercase;letter-spacing:.34em;font-size:.7rem;color:#a29b96}.hero h1,.manifesto h2,.stage-title h2,.fragrance-intro h2,.ritual h2,.contact h2{font-family:Cronde,Georgia,serif;font-weight:400}.hero h1{font-size:clamp(4.5rem,16vw,13rem);line-height:.72;margin:34px 0 0;letter-spacing:.01em}.paris{font-family:Georgia,serif;font-size:clamp(1.35rem,3vw,2.5rem);margin:25px auto 0;display:flex;align-items:center;justify-content:center;gap:18px}.paris::before,.paris::after{content:"";width:70px;height:1px;background:#fff}.hero-line{font-family:Georgia,serif;font-style:italic;margin-top:55px;color:#b9b1ac;font-size:1.05rem}.scroll-cue{position:absolute;bottom:32px;text-transform:uppercase;letter-spacing:.25em;font-size:.62rem;color:#766f6b}.scroll-cue span{display:block;width:1px;height:42px;background:linear-gradient(var(--red),transparent);margin:0 auto 12px;animation:pulse 1.8s infinite}@keyframes pulse{50%{transform:scaleY(.5);transform-origin:bottom}}
.manifesto{min-height:100svh;padding:18vh clamp(24px,8vw,130px);display:grid;grid-template-columns:.3fr 2fr 1fr;gap:5vw;align-items:center;border-top:1px solid #191919}.section-number{font-family:Georgia,serif;color:var(--red);align-self:start}.manifesto h2{font-size:clamp(2.8rem,7vw,7rem);line-height:.95;margin:28px 0}.manifesto h2 em{color:#5c5652;font-weight:400}.manifesto>p{font-family:Georgia,serif;font-size:1.15rem;line-height:1.8;color:#afa8a3;max-width:420px}
.story{height:420vh;position:relative;background:#000}.sticky-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}.stage-title{position:absolute;left:7vw;top:14vh;z-index:4}.stage-title h2{font-size:clamp(2rem,4.2vw,4.6rem);margin:16px 0}.bottle-wrap{position:absolute;z-index:8;left:50%;top:50%;width:min(36vw,320px);aspect-ratio:2/3;transform:translate(-50%,-50%);will-change:transform}.bottle{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 45px #000);border-radius:45% 45% 10% 10%}.oil-stream{position:absolute;z-index:7;left:51%;top:27%;width:8px;height:44vh;opacity:0;transform:rotate(-8deg);transform-origin:top;filter:drop-shadow(0 0 9px #cf3a10aa);background:linear-gradient(90deg,#471106,#e0671e 35%,#8e200b 75%,#2b0803);border-radius:999px;will-change:opacity,height,transform}.oil-stream::after{content:"";position:absolute;bottom:-11px;left:-4px;width:16px;height:20px;border-radius:55% 45% 60% 40%;background:#a83a10}.reveal{position:absolute;top:50%;opacity:0;transform:translateY(25px);transition:opacity .28s ease,transform .38s ease;z-index:5;display:flex;flex-direction:column;gap:8px;min-width:220px;pointer-events:none}.reveal.show{opacity:1;transform:translateY(0)}.reveal small{color:var(--red);letter-spacing:.18em}.reveal strong{font-family:Cronde,Georgia,serif;font-size:clamp(2rem,4vw,4rem);font-weight:400}.reveal span{color:#89827e;font-family:Georgia,serif;font-style:italic}.reveal-one,.reveal-three,.reveal-five{left:7vw;text-align:left}.reveal-two,.reveal-four{right:7vw;text-align:right}.formula-note{position:absolute;left:50%;bottom:7vh;transform:translate(-50%,16px);opacity:0;text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;color:#b8aca5;transition:opacity .35s,transform .35s}.formula-note.show{opacity:1;transform:translate(-50%,0)}
.fragrances{padding:16vh clamp(24px,8vw,130px)}.fragrance-intro{margin-bottom:12vh}.fragrance-intro h2{font-size:clamp(3rem,7vw,7rem);line-height:.94;margin:25px 0}.fragrance{min-height:72vh;border-top:1px solid #292424;display:grid;grid-template-columns:1fr 3fr;align-items:center;position:relative;overflow:hidden}.fragrance::before{content:"";position:absolute;right:-10%;width:45vw;aspect-ratio:1;border-radius:50%;filter:blur(100px);opacity:.16}.sable::before{background:#8e160d}.heritier::before{background:#761421}.mirage::before{background:#a14a1c}.fragrance-index{font-family:Georgia,serif;font-style:italic;color:var(--red);font-size:1.2rem}.fragrance-tag{color:#908884;text-transform:uppercase;letter-spacing:.25em;font-size:.68rem}.fragrance h3{font-family:Cronde,Georgia,serif;font-size:clamp(4rem,10vw,10rem);font-weight:400;margin:18px 0;line-height:.85}.fragrance p{max-width:570px;color:#aaa29d;font-family:Georgia,serif;line-height:1.8;font-size:1.06rem}
.ritual{padding:18vh clamp(24px,8vw,130px);background:#0b0a0a}.ritual h2,.contact h2{font-size:clamp(3rem,8vw,8rem);line-height:.92;margin:30px 0 10vh}.ritual-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#292424}.ritual-steps>div{background:#0b0a0a;padding:45px 35px;min-height:220px}.ritual-steps b{color:var(--red);font-family:Georgia,serif}.ritual-steps p{font-family:Georgia,serif;font-size:1.18rem;line-height:1.6;margin-top:55px;color:#c1bab5}
.contact{padding:18vh clamp(24px,8vw,130px)}.mail{font-family:Georgia,serif;font-size:clamp(1.2rem,3vw,2.8rem);border-bottom:1px solid var(--red);padding-bottom:9px}.socials{margin-top:14vh;border-top:1px solid #292424}.socials a{display:flex;justify-content:space-between;padding:28px 0;border-bottom:1px solid #292424;font-size:clamp(1.1rem,2vw,1.8rem)}.socials span{font-size:.78rem;color:#8f8884;align-self:center;letter-spacing:.1em}.closing{height:100svh;display:grid;place-items:center;align-content:center;position:relative;overflow:hidden;background:#070707}.closing-envelope{position:absolute;inset:12% 7%;border:1px solid #1d1918;background:linear-gradient(145deg,#090909,#131010);clip-path:polygon(0 0,100% 0,100% 100%,50% 63%,0 100%)}.closing p{position:relative;z-index:2;font-family:Georgia,serif;font-style:italic;color:#9e9691}.closing-seal{position:relative;z-index:3;width:min(42vw,300px);height:min(42vw,300px);object-fit:cover;object-position:50% 3%;clip-path:circle(31% at 50% 23%);margin-top:5vh;filter:drop-shadow(0 18px 28px #000)}.closing-brand{position:relative;z-index:2;font-family:Cronde,Georgia,serif;font-size:2rem;letter-spacing:.05em}.closing-brand span{display:block;font-family:Georgia,serif;font-size:.8rem;text-align:center}footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(22px,5vw,72px);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#746e6a;border-top:1px solid #1d1b1a}
@media(max-width:760px){.site-header{padding:20px}.menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:64px;right:18px;flex-direction:column;background:#0b0a0af2;border:1px solid #2b2523;padding:24px}.site-header nav.open{display:flex}.manifesto{grid-template-columns:1fr;align-content:center}.section-number{display:none}.manifesto>p{font-size:1rem}.stage-title{left:20px;top:12vh}.stage-title h2{font-size:2rem}.bottle-wrap{width:min(62vw,280px)}.oil-stream{left:52%;top:30%;height:34vh}.reveal{min-width:150px}.reveal strong{font-size:1.7rem}.reveal span{font-size:.8rem}.reveal-one,.reveal-three{left:20px}.reveal-two,.reveal-four,.reveal-five{right:20px;text-align:right}.reveal-one{top:31%}.reveal-two{top:39%}.reveal-three{bottom:24%}.reveal-four{bottom:14%}.reveal-five{top:51%}.formula-note{white-space:nowrap;font-size:.6rem}.fragrance{grid-template-columns:1fr;align-content:center}.fragrance-index{margin-bottom:35px}.fragrance h3{font-size:clamp(3.5rem,17vw,6rem)}.ritual-steps{grid-template-columns:1fr}.ritual-steps>div{min-height:170px}.ritual-steps p{margin-top:28px}.socials a{flex-direction:column;gap:9px}.closing-envelope{inset:16% 4%}footer{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro{display:none}.scroll-cue span{animation:none}.bottle-wrap,.oil-stream{transition:none}}

/* Les accords restent des images indépendantes de la séquence du flacon. */
.fragrance{grid-template-columns:minmax(48px,.32fr) minmax(0,1.7fr) minmax(0,1.3fr);gap:clamp(12px,2vw,32px)}
.fragrance-copy{position:relative;z-index:2;min-width:0}
.fragrance h3{font-size:clamp(3.8rem,7.5vw,8rem)}
.fragrance-notes{display:block;position:relative;z-index:1;width:100%;height:auto;max-width:680px;justify-self:center;filter:drop-shadow(0 25px 35px #0009)}
@media(min-width:761px) and (max-width:1100px){.fragrance{grid-template-columns:minmax(48px,.3fr) minmax(0,2fr);padding:65px 0}.fragrance-notes{grid-column:2;width:min(100%,460px);justify-self:start;margin-top:20px}}
@media(max-width:760px){.fragrance{grid-template-columns:1fr;gap:0;min-height:auto;padding:65px 0 48px}.fragrance-index{margin-bottom:30px}.fragrance h3{font-size:clamp(3.5rem,17vw,6rem)}.fragrance-notes{width:min(100%,520px);margin-top:20px}}

/* Séquence liquide : l'image originale est séparée visuellement pour animer la pipette. */
.bottle-wrap,.oil-stream{display:none!important}
.liquid-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none;filter:drop-shadow(0 0 8px rgba(181,56,15,.32))}
.bottle-rig{position:absolute;z-index:8;left:50%;top:50%;width:min(36vw,320px);aspect-ratio:2/3;transform:translate(-50%,-50%);transform-origin:50% 55%;will-change:transform}
.bottle-part{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 45px #000);will-change:transform,opacity}
.bottle-body{clip-path:inset(37% 0 0 0)}
.bottle-cap{clip-path:inset(0 0 60% 0);transform-origin:50% 39%}
.motion-caption{position:absolute;z-index:9;left:50%;bottom:11vh;transform:translate(-50%,18px);opacity:0;color:#827a76;text-transform:uppercase;letter-spacing:.28em;font-size:.62rem;transition:opacity .3s,transform .3s;white-space:nowrap}
.motion-caption.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.bottle-rig{width:min(62vw,280px)}.liquid-canvas{filter:drop-shadow(0 0 5px rgba(181,56,15,.25))}.motion-caption{bottom:8vh}}
@media(prefers-reduced-motion:reduce){.bottle-rig{transition:none}.liquid-canvas{display:none}}

/* Film du flacon : chaque position de scroll correspond à une image de la vidéo. */
.liquid-canvas,.bottle-rig{display:none!important}
.bottle-film{position:absolute;z-index:3;left:50%;top:53%;width:min(58vw,720px);height:auto;aspect-ratio:910/512;transform:translate(-50%,-50%);object-fit:contain;object-position:center;background:#000;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 78% 82% at center,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 78% 82% at center,#000 62%,transparent 100%)}
.stage-title,.reveal,.formula-note,.motion-caption{z-index:9}
.scroll-invite{position:absolute;z-index:10;left:50%;bottom:5vh;display:flex;flex-direction:column;align-items:center;gap:13px;opacity:0;transform:translate(-50%,12px);transition:opacity .35s,transform .35s;color:#b7aeaa;text-align:center;text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;white-space:nowrap;pointer-events:none}.scroll-invite.show{opacity:1;transform:translate(-50%,0)}.scroll-invite i{display:block;width:10px;height:10px;border-right:1px solid var(--red);border-bottom:1px solid var(--red);transform:rotate(45deg);animation:scrollInvite 1.25s ease-in-out infinite}@keyframes scrollInvite{0%,100%{transform:translateY(0) rotate(45deg);opacity:.35}50%{transform:translateY(7px) rotate(45deg);opacity:1}}
@media(max-width:760px){.bottle-film{top:49%;width:min(112vw,520px);max-width:none;object-fit:contain}.reveal{top:auto;left:50%!important;right:auto!important;bottom:12vh;min-width:0;width:calc(100% - 40px);text-align:center!important;align-items:center;transform:translate(-50%,18px)}.reveal.show{transform:translate(-50%,0)}.formula-note{bottom:11vh}.scroll-invite{bottom:4.5vh;font-size:.56rem;letter-spacing:.16em}}
@media(prefers-reduced-motion:reduce){.bottle-film{object-fit:contain}}

/* La fin du film laisse une phase de lecture aux ingrédients. */
.story{height:380vh}
.reveal{bottom:auto;min-width:0;width:min(25vw,340px)}
.reveal strong{font-size:clamp(1.8rem,3.2vw,3.4rem)}
.reveal-one{top:29%;left:7vw}.reveal-two{top:30%;right:7vw}
.reveal-three{top:53%;left:7vw}.reveal-four{top:55%;right:7vw}
.reveal-five{top:75%;left:7vw}
@media(max-width:760px){
  .sticky-stage .reveal{bottom:auto;min-width:0;width:37vw;max-width:155px;align-items:stretch;gap:3px;transform:translateY(18px)}
  .sticky-stage .reveal.show{transform:translateY(0)}
  .reveal small{font-size:.68rem}
  .reveal strong{font-size:clamp(1.25rem,5.2vw,1.65rem);line-height:1.05}
  .reveal span{font-size:.72rem;line-height:1.25}
  .sticky-stage .reveal-one,.sticky-stage .reveal-three,.sticky-stage .reveal-five{left:4vw!important;right:auto!important;text-align:left!important;align-items:flex-start}
  .sticky-stage .reveal-two,.sticky-stage .reveal-four{left:auto!important;right:4vw!important;text-align:right!important;align-items:flex-end}
  .sticky-stage .reveal-one{top:29%}.sticky-stage .reveal-two{top:30%}
  .sticky-stage .reveal-three{top:52%}.sticky-stage .reveal-four{top:56%}
  .sticky-stage .reveal-five{top:74%}
  .formula-note{bottom:9vh}
}
.scroll-invite{bottom:3vh;max-width:calc(100% - 32px);white-space:normal;font-size:.76rem;line-height:1.3;color:#ddd4d0;letter-spacing:.15em}
.scroll-invite i{width:14px;height:14px;border-width:2px}
@media(max-width:760px){.scroll-invite{bottom:3.5vh;font-size:.74rem;letter-spacing:.11em}}
.socials .social-name{display:inline-flex;align-items:center;gap:18px;align-self:auto;color:var(--white);font-size:inherit;letter-spacing:normal}
.socials .social-icon{display:block;flex:none;width:64px;height:64px;object-fit:contain}
.socials .social-handle{align-self:center}
@media(max-width:760px){.socials .social-icon{width:56px;height:56px}.socials .social-name{gap:14px}.socials .social-handle{align-self:flex-start;margin-left:70px}}