/* 10 Maison — ROI LUMIÈRE
   Bone, oxblood, aubergine. One muted champagne, spent only on the collar of the flacon.
   Nothing bounces. Nothing is in a hurry. */
:root{
  --bone:#f1ebdf; --ivory:#f8f4ea; --ink:#241318; --ink-2:#5d4a48;
  --oxblood:#4f0f18; --ox-2:#6d1621; --aub:#2b1424; --aub-2:#3a1c30;
  --hair:#b4a899; --hair-d:rgba(241,235,223,.3); --champ:#a8926c;
  --latin:"Bodoni Moda","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --jp:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --mix:"Bodoni Moda","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --slow:cubic-bezier(.16,.72,.14,1);
  --drift:cubic-bezier(.62,.02,.2,1);
  --t-1:.9s; --t-2:1.6s; --t-3:2.4s;
  --gut:clamp(20px,4.2vw,64px);
  --cap:clamp(12px,.86vw,13px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bone)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;color:var(--ink);background:var(--bone);font-family:var(--mix);font-size:16px;line-height:1.9;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,ol,dl,dd,figure,fieldset{margin:0;padding:0;border:0}
ol{list-style:none}
a{color:inherit}
canvas{display:block}
.lk-switch img{max-width:none;width:18px}

:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}

.caps{font-family:var(--latin);font-size:var(--cap);letter-spacing:.24em;text-transform:uppercase;font-weight:500;font-variation-settings:"opsz" 8;line-height:1.5}
.sep{display:inline-block;width:2.6em;height:1px;margin:0 1em;background:currentColor;opacity:.55;vertical-align:.32em}
.sec-tag{letter-spacing:.24em}
.jp{font-family:var(--mix);line-break:strict;word-break:auto-phrase;text-wrap:pretty;letter-spacing:.04em;line-height:2.05;font-size:clamp(14.5px,1.08vw,16px)}
.i{font-style:italic}
.kp{display:inline-block}
.skip{position:fixed;left:16px;top:-80px;z-index:99;background:var(--bone);color:var(--ink);padding:10px 16px}
.skip:focus{top:16px}

/* ———— stage ———— */
#stage{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;background:var(--bone)}
main,.foot{position:relative;z-index:1}
.pin{position:relative}
.stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.anchor{position:absolute;pointer-events:none}

/* ———— loader: one hairline ———— */
#loader{position:fixed;inset:0;z-index:60;background:var(--bone);display:grid;place-items:center;transition:background-color 1s linear}
.loader__mark{width:min(30vw,300px);height:auto;overflow:visible}
.loader__mark path{stroke:var(--oxblood);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1}
.loader__name{position:absolute;left:0;right:0;top:calc(50% + min(15vw,150px));text-align:center;font-size:var(--cap);letter-spacing:.42em;text-transform:uppercase;font-variation-settings:"opsz" 8;color:var(--oxblood);opacity:0;animation:lname 1.6s .4s var(--slow) forwards}
@keyframes lname{to{opacity:.8}}
.is-open #loader{background:transparent;pointer-events:none}
#loader{transition:background-color .5s linear}
.is-gone #loader{display:none}
.is-gone .hero__tag,.is-gone .hero__cue{transition:none}
.failsafe #loader{display:none}

/* ———— header ———— */
.head[data-gone="1"]{opacity:0!important;transition:opacity 1s linear}
.head[data-gone="1"] a{pointer-events:none}
.head:focus-within{opacity:1!important}
.head:focus-within a{pointer-events:auto!important}
.head{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;gap:clamp(20px,5vw,84px);padding:clamp(14px,1.8vw,26px) var(--gut);pointer-events:none;opacity:0;transition:opacity var(--t-2) .9s linear}
.is-open .head,.failsafe .head{opacity:1}
.head a{pointer-events:auto}
.head__home{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;transition:color .7s linear}
.mk{width:32px;height:27px;fill:none;stroke:currentColor;stroke-width:30;stroke-linejoin:miter;flex:none}
.head__name{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-variation-settings:"opsz" 8;font-weight:500;white-space:nowrap}
.head__nav{display:flex;gap:clamp(18px,2.7vw,44px);transition:opacity 1.2s linear}
.head[data-hide="1"] .head__nav{opacity:0}
.head[data-hide="1"] .head__nav a{pointer-events:none}
.head:focus-within .head__nav{opacity:1}
.head:focus-within .head__nav a{pointer-events:auto}
.head__nav a{position:relative;font-size:var(--cap);letter-spacing:.2em;text-transform:uppercase;font-variation-settings:"opsz" 8;font-weight:500;text-decoration:none;min-height:44px;display:flex;align-items:center;white-space:nowrap;transition:color .7s linear}
.head__nav a::after{content:"";position:absolute;left:0;right:.2em;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--slow)}
.head__nav a:hover::after,.head__nav a:focus-visible::after{transform:scaleX(1)}
[data-c="light"]{color:var(--bone)}
[data-c="dark"]{color:var(--ink)}

/* ———— 01 ouverture ———— */
#ouverture{height:300vh;height:300svh;--lum:min(23.4vw,46vh)}
#ouverture .anchor{left:52%;width:20%;top:17%;height:72%}
.hero__name{position:absolute;left:var(--gut);bottom:clamp(74px,8.2vh,96px);margin:0;font-family:var(--latin);font-weight:400;line-height:.82;letter-spacing:-.022em;white-space:nowrap;pointer-events:none;font-variation-settings:"opsz" 96}
.hero__name .roi{display:block;font-style:italic;font-size:min(9.6vw,19.5vh);margin:0 0 .06em .05em;letter-spacing:-.01em;line-height:1}
.hero__name .lum{display:block;font-size:var(--lum);line-height:.86;padding-bottom:.05em}
.hero__name--silk{color:var(--bone)}
.hero__name--wall{color:var(--oxblood);clip-path:inset(0 100% 0 0)}
.chs .ch{display:inline-block;opacity:0;transform:translateY(.07em);transition:opacity var(--t-3) linear,transform 3s var(--slow);transition-delay:calc(1.1s + var(--i)*.09s)}
.is-open .chs .ch,.failsafe .chs .ch{opacity:1;transform:none}
.hero__name .roi{opacity:0;transition:opacity var(--t-3) 1s linear}
.is-open .hero__name .roi,.failsafe .hero__name .roi{opacity:1}
.hero__tag{position:absolute;right:var(--gut);top:clamp(92px,13vh,130px);writing-mode:vertical-rl;font-family:var(--jp);font-size:clamp(20px,2vw,32px);letter-spacing:.34em;color:var(--bone);opacity:0;transition:opacity var(--t-3) 1.9s linear;white-space:nowrap}
.is-open .hero__tag,.failsafe .hero__tag{opacity:1}
.hero__foot{position:absolute;left:calc(var(--gut) + min(18vw,36vh));bottom:calc(clamp(74px,8.2vh,96px) + var(--lum)*.92);color:var(--bone);opacity:0;transition:opacity var(--t-3) 2.2s linear;display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.is-open .hero__foot,.failsafe .hero__foot{opacity:1}
.is-gone .hero__foot{transition:none}
.hero__cue{position:absolute;right:var(--gut);top:clamp(22px,2.6vw,38px);min-height:30px;color:var(--bone);display:flex;align-items:center;gap:14px;opacity:0;transition:opacity var(--t-3) 2.4s linear}
.is-open .hero__cue{opacity:1}
.hero__cue i{display:block;width:clamp(40px,7vw,110px);height:1px;background:currentColor;transform-origin:left;animation:cue 5.5s var(--drift) infinite}
@keyframes cue{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.hero__stir{appearance:none;border:0;background:none;color:inherit;font-family:var(--jp);letter-spacing:.1em;font-size:13.5px;padding:0;min-height:44px;cursor:pointer;text-align:left}
.only-touch{display:none}
.hero__cap{position:absolute;left:calc(52% - 18vw);bottom:clamp(90px,14vh,150px);opacity:0;display:flex;flex-direction:column;gap:6px;pointer-events:none;color:var(--ink)}
.hero__cap-j{font-size:15px;letter-spacing:.14em;font-family:var(--jp)}

/* ———— 02 manifeste ———— */
#manifeste{position:relative;padding:12vh var(--gut) 20vh;min-height:150vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-content:start}
#manifeste .sec-tag{grid-column:1/8;margin-bottom:9vh}
.mani__fr{grid-column:1/8;font-family:var(--latin);font-size:clamp(58px,7.4vw,136px);line-height:1;letter-spacing:-.015em;font-variation-settings:"opsz" 96;color:var(--oxblood)}
.mani__fr .i1{margin-left:1.5em}
.mani__fr .i2{font-style:italic;margin-left:.3em}
.mani__body{grid-column:2/6;margin-top:13vh;display:grid;gap:2em}
.mani__h{font-family:var(--jp);font-weight:500;font-size:clamp(21px,1.9vw,29px);line-height:1.7;letter-spacing:.08em;text-wrap:balance;word-break:auto-phrase;line-break:strict;margin-bottom:.4em}
.mani__sign{margin-top:.8em;font-family:var(--jp);letter-spacing:.14em;font-size:14px;display:flex;align-items:center;gap:1.2em;flex-wrap:wrap}

/* ———— 03 notes ———— */
#notes{height:420vh;height:420svh;--fg:var(--ink);color:var(--fg)}
#notes .anchor{left:54%;width:20%;top:16%;height:72%}
.notes__tag{position:absolute;left:var(--gut);top:clamp(86px,12vh,120px)}
.notes__clock{position:absolute;left:var(--gut);top:clamp(118px,calc(12vh + 40px),176px);display:flex;flex-direction:column;gap:2px}
.notes__clock b{font-weight:400;font-size:clamp(26px,2.5vw,40px);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.03em;line-height:1.3;font-variation-settings:"opsz" 28}
.notes__clock .caps{font-size:12px;opacity:.8}
.note{position:absolute;inset:0;opacity:0;pointer-events:none}
.note__word{position:absolute;left:calc(var(--gut) - .03em);bottom:clamp(70px,8vh,90px);font-family:var(--latin);font-size:clamp(120px,21.6vw,430px);line-height:.86;letter-spacing:-.024em;font-variation-settings:"opsz" 96;padding-bottom:.08em;white-space:nowrap}
.note__txt{position:absolute;right:var(--gut);top:30vh;width:clamp(230px,21.4vw,340px)}
.note__txt h3{font-family:var(--jp);font-weight:500;font-size:clamp(19px,1.6vw,24px);letter-spacing:.1em;margin:0 0 1.2em;line-height:1.5}
.note__txt h3 .caps{display:block;margin-bottom:.7em;font-family:var(--latin)}
.note__txt h3 small{display:block;font-size:13px;letter-spacing:.08em;margin-top:.4em;opacity:.76;font-weight:400}
.notes__rail{position:absolute;right:var(--gut);top:24vh;width:clamp(230px,21.4vw,340px);height:1px;background:currentColor;opacity:.4}
.notes__rail i{display:block;height:3px;margin-top:-1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left}

/* ———— 04 collection ———— */
#collection{height:500vh;height:500svh}
#collection .anchor{left:64%;width:20%;top:15%;height:73%}
.coll__tag{position:absolute;left:var(--gut);top:clamp(86px,12vh,120px);color:var(--bone);transition:color 1.2s linear;z-index:2}
.coll__tag[data-c="dark"]{color:var(--ink)}
.coll__view{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 0,#000 58%,transparent 66%);mask-image:linear-gradient(to right,#000 0,#000 58%,transparent 66%)}
.coll__track{display:flex;width:400%;height:100%;will-change:transform}
.perfume{flex:0 0 25%;min-width:0;position:relative;padding:clamp(120px,19vh,180px) 44vw 0 var(--gut);height:100%}
.perfume[data-tone="light"]{color:var(--bone)}
.perfume[data-tone="dark"]{color:var(--ink)}
.perfume__num{display:none}
.perfume__name{font-family:var(--latin);font-weight:400;font-size:clamp(68px,10.6vw,190px);line-height:.9;letter-spacing:-.018em;font-variation-settings:"opsz" 96;padding-bottom:.08em}
.perfume__name em{display:block;margin-left:.72em;font-style:italic;white-space:nowrap}
.perfume__ja{display:flex;align-items:baseline;gap:1.6em;margin:clamp(14px,2.4vh,26px) 0 clamp(8px,1.4vh,14px);flex-wrap:wrap}
.perfume__ja b{font-family:var(--jp);font-weight:500;font-size:clamp(18px,1.6vw,24px);letter-spacing:.16em}
.perfume__desc{max-width:30em;margin-bottom:clamp(10px,2vh,22px)}
.pyr{display:grid;max-width:34em}
.pyr div{display:grid;grid-template-columns:5.2em 1fr;align-items:baseline;padding:.42em 0;border-top:1px solid currentColor;border-color:color-mix(in srgb,currentColor 30%,transparent)}
.pyr dd{font-size:14px;letter-spacing:.05em;font-family:var(--mix);line-height:1.7;word-break:auto-phrase;line-break:strict}
.perfume__price{position:absolute;left:var(--gut);bottom:clamp(76px,9vh,92px);font-size:clamp(17px,1.4vw,21px);letter-spacing:.04em;font-variation-settings:"opsz" 18;display:flex;align-items:baseline;gap:1.1em}
.perfume__price small{font-size:12px;letter-spacing:.1em;margin-left:-.5em}

/* ———— 05 savoir-faire ———— */
#savoir{position:relative;background:var(--bone);padding:16vh var(--gut) 18vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:0}
.sv__head{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-bottom:13vh}
.sv__head .sec-tag{grid-column:1/-1;margin-bottom:9vh}
.sv__title{grid-column:1/11;font-family:var(--latin);font-weight:400;font-size:clamp(66px,12.4vw,230px);line-height:.92;letter-spacing:-.02em;color:var(--oxblood);font-variation-settings:"opsz" 96}
.ind{margin-left:1.1em}
.sv__lead{grid-column:9/13;margin-top:5vh}
.plate{position:relative}
.plate canvas{width:100%;height:100%;display:block}
.plate figcaption{position:absolute;left:0;top:100%;padding-top:12px;font-size:13px;letter-spacing:.05em;line-height:1.8;display:flex;gap:1.2em;align-items:baseline;line-break:strict;word-break:auto-phrase;width:100%}
.plate figcaption .caps{flex:none;font-size:12px}
.plate--a{grid-column:1/6;grid-row:2/4;aspect-ratio:3/4;align-self:start}
.steps{grid-column:7/13;grid-row:2;display:grid;gap:9vh;margin-bottom:12vh}
.step{display:grid;grid-template-columns:3.4em minmax(0,1fr) minmax(0,1.3fr);column-gap:20px;align-items:baseline;border-top:1px solid var(--hair);padding-top:16px}
.step__n{grid-row:1/3}
.step h3{font-family:var(--latin);font-weight:400;font-size:clamp(34px,3.6vw,64px);line-height:1.04;letter-spacing:-.01em;font-style:italic;font-variation-settings:"opsz" 72;grid-column:2}
.step__j{grid-column:2;font-family:var(--jp);letter-spacing:.2em;font-size:15px}
.step .jp{grid-column:3;grid-row:1/3}
.plate--b{grid-column:8/13;grid-row:3;aspect-ratio:4/3;align-self:start;margin-bottom:9vh}
.steps--b{grid-column:1/8;grid-row:4;margin:12vh 0 0;padding-right:5vw}
.sv__facts{grid-column:1/-1;grid-row:5;margin-top:14vh;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
.sv__facts div{padding:18px 0 0;display:flex;flex-direction:column;gap:12px}
.sv__facts dd{font-family:var(--latin);font-size:clamp(52px,7vw,124px);line-height:1;letter-spacing:-.01em;font-variation-settings:"opsz" 96;display:flex;align-items:baseline;gap:.14em;color:var(--oxblood)}
.sv__facts small{font-family:var(--jp);font-size:13px;letter-spacing:.08em;color:var(--ink)}

/* ———— 06 sillage ———— */
#sillage{height:150vh;height:150svh}
#sillage .anchor{left:68%;width:20%;top:12%;height:75%}
.sl{position:absolute;left:0;top:0;bottom:0;width:57%;background:var(--bone);padding:clamp(84px,11.5vh,120px) clamp(28px,4vw,64px) 84px var(--gut);display:flex;flex-direction:column;gap:clamp(8px,1.5vh,16px);overflow:hidden}
.sl__head{margin-bottom:clamp(2px,1vh,12px)}
.sl__title{font-family:var(--latin);font-weight:400;font-size:clamp(50px,6.2vw,108px);line-height:1;letter-spacing:-.015em;color:var(--oxblood);font-variation-settings:"opsz" 96;margin:clamp(6px,1.4vh,16px) 0 clamp(4px,1vh,12px)}
.sl__title em{font-style:italic}
.sl__lead{font-size:14px;line-height:1.95;max-width:35em}
.sl__row{border-top:1px solid var(--hair);padding-top:8px}
.sl__row legend{float:left;width:6.4em;padding:0;display:flex;flex-direction:column;gap:0}
.sl__why{font-size:12px;letter-spacing:.06em;color:var(--ink-2);line-height:1.5}
.sl__opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-left:6.4em}
.sl__opts label{position:relative;cursor:pointer;display:block}
.sl__opts input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sl__opts span{display:flex;align-items:center;min-height:44px;font-size:13px;letter-spacing:.02em;line-height:1.35;padding:2px 6px 2px 0;border-bottom:1px solid transparent;color:var(--ink-2);transition:color .7s linear,border-color .7s linear;line-break:strict}
.sl__opts label:hover span{color:var(--ink)}
.sl__opts input:checked+span{color:var(--oxblood);border-bottom-color:var(--oxblood)}
.sl__opts input:focus-visible+span{outline:1.5px solid currentColor;outline-offset:2px}
.sl__name{border-top:1px solid var(--hair);padding-top:8px;display:grid;grid-template-columns:6.4em 1fr;align-items:center}
.sl__name label{font-size:12px;letter-spacing:.06em;color:var(--ink-2);line-height:1.5;display:flex;flex-direction:column}
.sl__name label .caps{color:var(--ink)}
.sl__name input{width:100%;min-height:48px;border:0;border-bottom:1px solid var(--ink);background:transparent;font-family:var(--mix);font-size:clamp(20px,1.9vw,26px);letter-spacing:.03em;color:var(--oxblood);padding:0;border-radius:0;outline-offset:2px}
.sl__name input::placeholder{color:#7d6c66;font-size:15px;letter-spacing:.1em}
.sl__end{display:flex;align-items:center;gap:20px;margin-top:clamp(2px,1vh,10px)}
.sl__note{font-size:12.5px;line-height:1.7;letter-spacing:.03em;color:var(--ink-2);line-break:strict;word-break:auto-phrase;text-wrap:pretty}
.sl__note.is-done{color:var(--oxblood)}
.sl__formula{position:absolute;right:var(--gut);top:clamp(30px,3.4vw,48px);left:calc(57% + 32px);display:flex;flex-direction:column;gap:2px;color:var(--bone);transition:color 1s linear}
.sl__formula b{font-weight:400;font-family:var(--jp);letter-spacing:.08em;font-size:14px}
.btn{appearance:none;background:transparent;color:var(--oxblood);border:1px solid var(--oxblood);border-radius:0;min-height:48px;padding:0 26px;font-family:var(--jp);font-size:14px;letter-spacing:.2em;cursor:pointer;position:relative;overflow:hidden;flex:none;transition:color 1s var(--slow)}
.btn::before{content:"";position:absolute;inset:0;background:var(--oxblood);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--slow)}
.btn span{position:relative}
.btn:hover,.btn:focus-visible{color:var(--bone)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn--solid{background:var(--oxblood);color:var(--bone)}
.btn--solid::before{background:var(--aub)}

/* ———— 07 maison ———— */
#maison{position:relative;background:var(--oxblood);color:var(--bone);padding:14vh var(--gut) 20vh}
.mt{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;margin-top:8vh}
.mt__year span{display:block;transition:opacity .9s linear}
.mt__year{grid-column:1/8;position:sticky;top:18vh;align-self:start;height:60vh;font-family:var(--latin);font-size:clamp(100px,20.5vw,400px);line-height:1;letter-spacing:-.025em;font-variation-settings:"opsz" 96;font-variant-numeric:lining-nums}
.mt__list{grid-column:8/13}
.mt__list li{padding:22px 0 12vh;border-top:1px solid var(--hair-d)}
.mt__list li:last-child{padding-bottom:6vh}
.mt__list time{font-size:var(--cap);letter-spacing:.24em;font-variation-settings:"opsz" 8;display:block;margin-bottom:12px}
.mt__list h3{font-family:var(--mix);font-weight:400;font-size:clamp(22px,2.1vw,32px);line-height:1.4;letter-spacing:.05em;margin:0 0 14px}

/* ———— 08 rendez-vous ———— */
#rendezvous{position:relative;background:var(--ivory);padding:16vh var(--gut) 20vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;min-height:100vh}
.rv-left{grid-column:1/8}
.rdv__title{white-space:nowrap;font-family:var(--latin);font-weight:400;font-size:clamp(62px,8.3vw,150px);line-height:.96;letter-spacing:-.018em;font-variation-settings:"opsz" 96;color:var(--oxblood);margin:9vh 0 7vh}
.ind2{margin-left:.5em}
.rdv__lead{max-width:27em}
.rdv__places{margin-top:7vh;display:grid;gap:18px;max-width:30em}
.rdv__places div{display:grid;grid-template-columns:6em 1fr;align-items:baseline;border-top:1px solid var(--hair);padding-top:12px}
.rdv__places dd{font-size:15px;letter-spacing:.04em;line-height:1.8}
.rdv__places small{display:block;font-size:13px;color:var(--ink-2)}
.rdv,.rdv__done{grid-column:8/13;align-self:end;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:26px}
.f{grid-column:1/-1;display:flex;flex-direction:column;gap:2px}
.f--half{grid-column:auto}
.f label,.f legend{font-size:13px;letter-spacing:.06em;display:flex;gap:1em;align-items:baseline;padding:0;color:var(--ink-2)}
.f label .caps,.f legend .caps{color:var(--ink);font-size:12px}
.f input:not([type=radio]),.f select{appearance:none;width:100%;min-height:48px;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;font-family:var(--mix);font-size:16px;letter-spacing:.03em;color:var(--ink);padding:0}
.f select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241318'/%3E%3C/svg%3E") no-repeat right 2px center;padding-right:20px}
.f--r{display:block}
.f--r legend{margin-bottom:4px}
.f--r>label{position:relative;display:inline-flex;margin-right:1.4em;cursor:pointer}
.f--r input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.f--r span{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink-2);border-bottom:1px solid transparent;transition:color .7s linear,border-color .7s linear}
.f--r input:checked+span{color:var(--oxblood);border-bottom-color:var(--oxblood)}
.f--r input:focus-visible+span{outline:1.5px solid currentColor;outline-offset:2px}
.rdv .btn{grid-column:1/-1;width:100%}
.rdv__err{grid-column:1/-1;color:var(--ox-2);font-size:14px;letter-spacing:.04em}
.rdv__mini{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);letter-spacing:.04em;margin-top:-10px}
.rdv__done{display:block;outline:0}
.rdv__done[hidden],.rdv[hidden]{display:none}
.mk-line{width:120px;height:auto;margin-bottom:28px;display:block}
.mk-line path{stroke:var(--oxblood);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.2s var(--drift) forwards}
.mk-line path:nth-child(2){animation-delay:.5s}.mk-line path:nth-child(3){animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}
.rdv__done-fr{font-family:var(--latin);font-style:italic;font-size:clamp(56px,6vw,96px);line-height:1;color:var(--oxblood);margin-bottom:22px;font-variation-settings:"opsz" 96}

/* ———— footer ———— */
.foot{background:var(--aub);color:var(--bone);padding:18vh var(--gut) 112px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;overflow:hidden;position:relative}
.foot__mark{grid-column:9/13;grid-row:1/3;width:100%;height:auto;justify-self:end;align-self:end;overflow:visible}
.foot__mark path{stroke:var(--bone);stroke-width:22;stroke-linejoin:miter;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 4.5s var(--drift)}
.foot__mark path:nth-child(2){transition-delay:.5s}.foot__mark path:nth-child(3){transition-delay:1.1s}
.foot__mark.in path{stroke-dashoffset:0}
.failsafe .foot__mark path{stroke-dashoffset:0}
.foot__word{grid-column:1/9;grid-row:2;align-self:end;font-family:var(--latin);font-size:clamp(50px,10.8vw,200px);font-style:italic;line-height:1;letter-spacing:-.01em;font-variation-settings:"opsz" 96;position:relative}
.foot__ja{grid-column:1/8;grid-row:3;font-family:var(--jp);letter-spacing:.3em;font-size:14px;margin-top:14px}
.foot__cols{grid-column:1/-1;grid-row:4;margin-top:10vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;border-top:1px solid var(--hair-d);padding-top:20px}
.foot__cols p{font-size:13.5px;letter-spacing:.04em;line-height:1.9;line-break:strict;word-break:auto-phrase}
.foot__cols p:nth-child(1){grid-column:1/5}
.foot__cols p:nth-child(2){grid-column:5/9}
.foot__cols p:nth-child(3){grid-column:9/13}
.foot__cols .caps{display:block;margin-bottom:8px;font-size:12px;opacity:.8}
.foot__cols a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px;text-decoration-thickness:1px}
.foot__cols b{font-weight:500;letter-spacing:.12em}

/* ———— entrances: below the fold, once ———— */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-2) linear,transform var(--t-3) var(--slow)}
.js .rv.in,.failsafe .rv{opacity:1;transform:none}
.js .chars .ch{display:inline-block;opacity:0;transform:translateY(.1em);transition:opacity 1.8s linear,transform 2.6s var(--slow);transition-delay:calc(var(--i)*.05s)}
.js .in .ch,.js .chars.in .ch,.failsafe .chars .ch{opacity:1;transform:none}
.js .rv-row{opacity:.0;transition:opacity 1.8s linear}
.js .rv-row.in,.failsafe .rv-row{opacity:1}
.js .rv-plate canvas{clip-path:inset(0 0 100% 0);transition:clip-path 2.8s var(--drift)}
.js .rv-plate.in canvas,.failsafe .rv-plate canvas{clip-path:inset(0)}
.js .rv-plate figcaption{opacity:0;transition:opacity 1.6s 1.4s linear}
.js .rv-plate.in figcaption,.failsafe .rv-plate figcaption{opacity:1}

/* the hairline ring: a pointer that has also read the brief */
.ring{position:fixed;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid currentColor;border-radius:50%;z-index:41;pointer-events:none;opacity:0;transition:opacity 1s linear,color .6s linear;color:var(--bone);display:none}
@media (hover:hover) and (pointer:fine){.ring{display:block}}

/* no WebGL at all: the cloth becomes a colour and everything still reads */
.no-gl #stage{display:none}

/* ———— failsafe: script never came ———— */
.failsafe .pin,.failsafe #ouverture,.failsafe #notes,.failsafe #collection,.failsafe #sillage{height:auto}
.failsafe .stick{position:relative;height:auto;overflow:visible;padding:18vh var(--gut)}
.failsafe .note{position:relative;opacity:1;inset:auto;margin-bottom:8vh}
.failsafe .note__word,.failsafe .note__txt,.failsafe .hero__name{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.failsafe .hero__name--wall,.failsafe .hero__cue,.failsafe .hero__cap{display:none}
.failsafe .hero__name--silk,.failsafe .hero__tag{color:var(--oxblood)}
.failsafe .coll__view{position:relative;-webkit-mask-image:none;mask-image:none;overflow:visible}
.failsafe .coll__track{display:block;width:auto}
.failsafe .perfume{padding:6vh 0;height:auto;color:var(--ink);flex:none;width:auto}
.failsafe .perfume__name{color:var(--oxblood)}
.failsafe .hero__foot,.failsafe .coll__tag{color:var(--ink);position:static}
.failsafe .note__word{color:var(--oxblood);font-size:clamp(80px,14vw,200px)}
.failsafe .sl__formula{display:block}
.failsafe #sillage .anchor,.failsafe .ring{display:none}
.failsafe .hero__tag{position:static;writing-mode:horizontal-tb;margin-top:24px}
.failsafe .hero__name .lum{font-size:clamp(70px,16vw,240px)}
.failsafe .hero__name{white-space:normal}
.failsafe .note__txt{width:auto;max-width:34em}
.failsafe .head{color:var(--ink)}
.failsafe .perfume__price{position:static}
.failsafe .coll__tag,.failsafe .notes__tag,.failsafe .notes__clock,.failsafe .notes__rail{position:relative;left:auto;top:auto;right:auto}
.failsafe #stage,.failsafe .plate{display:none}
.failsafe .sl{position:relative;width:auto;padding:0}
.failsafe .sl__formula{position:static;color:var(--ink)}

/* ———— phone ———— */
@media (max-width:760px){
  :root{--gut:16px;--cap:12px}
  body{font-size:15px}
  .caps{letter-spacing:.2em}
  .sep{width:1.6em;margin:0 .8em}
  .head{gap:18px;padding:6px var(--gut)}
  .head__nav a:not(:last-child){display:none}
  .head__name{font-size:12px;letter-spacing:.22em}
  .mk{width:27px;height:23px}
  .only-fine{display:none}.only-touch{display:inline}
  .pc-only{display:none}
  #ouverture .anchor{left:22%;width:50%;top:15%;height:62%}
  .hero__name{bottom:92px}
  .hero__name .roi{font-size:17vw}
  #ouverture{--lum:25.4vw}
  .hero__name .lum{font-size:25.4vw}
  .hero__tag{right:14px;top:84px;font-size:19px}
  .hero__cue{display:none}
  .hero__cap{left:var(--gut);bottom:96px}
  .hero__foot{left:var(--gut);right:var(--gut);bottom:auto;top:calc(100svh - 92px - 25.4vw*.92 - 17vw*1.06 - 88px)}
  .hero__foot .caps{letter-spacing:.14em;font-size:12px}
  .hero__foot .sep{width:1em;margin:0 .5em}
  /* the manifesto is opaque on phones: there is no column for the flacon to stand in */
  #manifeste{background:var(--bone);display:block;padding:14vh var(--gut) 14vh;min-height:0}
  .mani__fr{font-size:17.6vw}
  .mani__fr .i2{margin-left:0;display:inline-block}
  .mani__body{margin-top:9vh}

  #notes .anchor{left:30%;width:66%;top:45%;height:45%}
  .notes__tag{top:70px}
  .notes__clock{top:auto;bottom:92px;left:var(--gut)}
  .notes__clock b{font-size:30px}
  .note__word{bottom:auto;top:92px;font-size:27.6vw;left:var(--gut)}
  .note__txt{left:var(--gut);right:var(--gut);top:calc(92px + 28vw);width:auto}
  .note__txt h3{font-size:15px;margin-bottom:.4em;display:flex;gap:1em;align-items:baseline}
  .note__txt h3 .caps{display:none}
  .note__txt h3 small{font-size:12px;margin:0}
  .note__txt .jp{font-size:13.5px;line-height:1.85}
  .notes__rail{display:none}

  #collection .anchor{left:42%;width:44%;top:12.4%;height:34.6%}
  .coll__tag{top:70px}
  .coll__view{-webkit-mask-image:none;mask-image:none}
  .perfume{padding:48vh var(--gut) 0}
  .perfume__name{font-size:14.2vw;line-height:.94;white-space:nowrap}
  .perfume__name br{display:none}
  .perfume__name em{display:inline;margin-left:.1em}
  .perfume__ja{margin:6px 0 2px;gap:1em}
  .perfume__ja b{font-size:16px}
  .perfume__desc{font-size:13px;line-height:1.85;margin-bottom:6px}
  .pyr dd{font-size:12.5px}
  .pyr div{padding:.22em 0;grid-template-columns:4.2em 1fr}
  .perfume__price{bottom:78px;font-size:15px;gap:.7em;left:var(--gut)}

  #savoir{display:block;padding:12vh var(--gut) 12vh}
  .sv__head{display:block;margin-bottom:8vh}
  .sv__head .sec-tag{margin-bottom:6vh}
  .sv__title{font-size:18.4vw}
  .ind{margin-left:.32em}
  .sv__lead{margin-top:4vh}
  .plate,.plate--a,.plate--b{aspect-ratio:auto}
  .plate--a canvas{aspect-ratio:3/4;height:auto}
  .plate--b canvas{aspect-ratio:4/3;height:auto}
  .plate--a{width:78%;margin-bottom:10vh}
  .plate figcaption{position:static;display:block;padding-top:10px;background:var(--bone)}
  .plate figcaption .caps{display:block}
  .steps{gap:6vh;margin-bottom:9vh}
  .step{grid-template-columns:2.4em 1fr}
  .step .jp{grid-column:2;grid-row:auto;margin-top:8px}
  .plate--b{margin:0 0 10vh auto;width:100%}
  .steps--b{margin:0;padding:0}
  .sv__facts{grid-template-columns:1fr 1fr;margin-top:8vh;row-gap:24px}
  .sv__facts dd{font-size:18vw;flex-wrap:wrap}

  #sillage{height:125svh}
  #sillage .stick{height:100svh}
  #sillage .anchor{left:30%;width:40%;top:6.4%;height:36%}
  .sl{position:absolute;left:0;right:0;width:auto;top:44%;bottom:0;padding:10px var(--gut) 76px;gap:4px;overflow:visible}
  .sl__head .sec-tag,.sl__title{display:none}
  .sl__lead{display:none}
  .sl__head{display:none}
  .sl__row{padding-top:2px;display:grid;grid-template-columns:3.6em minmax(0,1fr);align-items:center}
  .sl__row legend{float:none;width:auto;grid-column:1;display:contents}
  .sl__row legend .caps{grid-column:1;grid-row:1;font-size:12px;letter-spacing:.14em}
  .sl__why{display:none}
  .sl__opts{grid-column:2;grid-row:1;margin-left:0;display:flex;overflow-x:auto;gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .sl__opts::-webkit-scrollbar{display:none}
  .sl__opts label{flex:none}
  .sl__opts span{white-space:nowrap;font-size:13px;padding:2px 0}
  .sl__name{grid-template-columns:5em 1fr;padding-top:2px}
  .sl__name label{font-size:0;letter-spacing:0}
  .sl__name label .caps{font-size:12px;letter-spacing:.1em}
  .sl__name input{font-size:18px}
  .sl__end{gap:12px;flex-wrap:wrap}
  .btn{padding:0 18px;font-size:13px;letter-spacing:.14em}
  .sl__note{font-size:12px;flex:1 1 40%;line-height:1.6}
  .sl__formula{left:var(--gut);right:auto;bottom:auto;top:calc(36% - 44px);display:none}

  #maison{padding:12vh var(--gut) 14vh}
  .mt{display:block;margin-top:5vh}
  .mt__year{display:none}
  .mt__list li{padding:16px 0 7vh}
  .mt__list time{font-size:15vw;letter-spacing:-.01em;font-family:var(--latin);font-variation-settings:"opsz" 96;line-height:1.1;margin-bottom:10px}

  #rendezvous{display:block;padding:12vh var(--gut) 12vh}
  .rdv__title{font-size:17vw;margin:6vh 0 5vh}
  .ind2{margin-left:0}
  .rdv__places{margin-top:5vh}
  .rdv,.rdv__done{margin-top:9vh}

  .foot{display:block;padding:10vh var(--gut) 104px}
  .foot__mark{display:block;width:56%;margin:0 0 5vh auto}
  .foot__word{font-size:17vw}
  .foot__cols{display:block;margin-top:7vh}
  .foot__cols p{margin-bottom:22px}
  .ring{display:none}
}

@media (max-width:760px) and (max-height:679px){
  #sillage{height:auto;min-height:100svh}
  #sillage .stick{position:relative;min-height:680px}
}
@media (max-height:560px){.hero__foot{display:none}}
@media (min-width:761px) and (max-height:740px){
  .sl__lead{display:none}
  .sl__title{font-size:clamp(44px,5vw,70px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.2s!important;transition-delay:0s!important}
  .hero__cue i{animation:none;transform:scaleX(1)}
  .ring{display:none}
}