/* Maison Verlaine — noir fumé, champagne, Playfair Display. Montre 3D et mécanisme vivant. */
@font-face{font-family:"Playfair";src:url("../fonts/playfair.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Playfair";src:url("../fonts/playfair-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root{--bg:#0c0b0a;--bg2:#15130f;--ink:#f1eadf;--mute:#a3978a;--line:rgba(241,234,223,.14);--gold:#d8b57a;--gold2:#b58d4a;--fd:"Playfair",Georgia,serif;--ft:"Manrope",system-ui,sans-serif;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 var(--ft);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--fd);font-weight:500;letter-spacing:-.01em;line-height:1.05;margin:0}
h2{font-size:clamp(2.2rem,4.8vw,4.2rem);text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--gold)}
.kicker{font:600 .74rem/1 var(--ft);letter-spacing:.26em;text-transform:uppercase;color:var(--gold2);margin:0 0 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec__head{padding:0 var(--pad);margin-bottom:clamp(28px,4vw,56px)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--bg);font:600 .92rem/1 var(--ft);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:transparent;color:var(--gold)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--line:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{min-height:44px;padding:10px 18px;font-size:.85rem}

/* En-tête */
.hdr{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);background:linear-gradient(rgba(12,11,10,.85),rgba(12,11,10,0))}
.hdr__logo{font:500 1.35rem/1 var(--fd);display:grid}
.hdr__logo span{font:600 .6rem/1 var(--ft);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);margin-bottom:4px}
.hdr__nav{display:none;gap:26px;font-size:.92rem}
.hdr__nav a{padding:8px 0;border-bottom:1px solid transparent}.hdr__nav a:hover{border-color:var(--gold)}
@media (min-width:900px){.hdr__nav{display:flex}}
.hdr__cta{font:600 .85rem/1 var(--ft);border:1px solid var(--line);border-radius:999px;padding:12px 18px;min-height:44px;display:inline-flex;align-items:center}
.hdr__cta:hover{border-color:var(--gold);color:var(--gold)}

/* Héros */
.hero{height:400vh;position:relative}
.hero__pin{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 65% 45%,#2a241c 0%,#0c0b0a 60%)}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);display:flex;gap:12px;align-items:center;transition:opacity .5s}
.hero__load span{width:12px;height:12px;border:1px solid var(--gold);border-right-color:transparent;border-radius:50%;animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__load.off{opacity:0;pointer-events:none}
.hero__copy{position:absolute;left:var(--pad);right:var(--pad);top:14vh;max-width:560px;z-index:2}
.hero__t{font-size:clamp(3rem,8vw,7.4rem);line-height:.98;margin-bottom:22px}
.hero__t .l{display:block;overflow:hidden}
.hero__lead{color:#cfc5b6;max-width:40ch;margin:0 0 24px;font-size:clamp(1rem,1.4vw,1.15rem)}
.hero__time{margin:0;display:grid;gap:4px}
.hero__time span{font:400 clamp(2rem,4vw,3.4rem)/1 var(--fd);font-variant-numeric:tabular-nums;color:var(--gold)}
.hero__time small{font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--mute)}
.hero__caps{list-style:none;margin:0;padding:0;position:absolute;right:var(--pad);bottom:12vh;width:min(360px,80vw);z-index:2}
.cap{position:absolute;right:0;bottom:0;width:100%;border-left:1px solid var(--gold);padding:4px 0 4px 18px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.cap.on{opacity:1;transform:none}
.cap b{display:block;font:500 1.2rem/1.2 var(--fd);margin-bottom:6px}
.cap span{font-size:.9rem;color:#cfc5b6}
.hero__hint{position:absolute;left:var(--pad);bottom:28px;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:12px;z-index:2}
.hero__hint span{width:1px;height:40px;background:var(--gold2);animation:drop 1.6s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:899px){.hero{height:300vh}.hero__copy{top:11vh}.hero__caps{bottom:90px;left:var(--pad);width:auto}.hero__t{font-size:clamp(2.6rem,11vw,4rem)}}

/* Mécanisme */
.mec{display:grid;gap:30px;padding:clamp(80px,10vw,140px) var(--pad);background:var(--bg2);border-top:1px solid var(--line);align-items:center}
@media (min-width:900px){.mec{grid-template-columns:1fr 1.1fr}}
.mec__txt p:not(.kicker){color:#cfc5b6;max-width:48ch}
.mec__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0}
@media (min-width:600px){.mec__facts{grid-template-columns:repeat(4,1fr)}}
.mec__facts div{border-top:1px solid var(--line);padding-top:12px}
.mec__facts dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.mec__facts dd{margin:4px 0 0;font:500 1.5rem/1 var(--fd);color:var(--gold)}
.mec__view{display:grid;place-items:center}
.mec__svg{width:min(100%,560px);filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}

/* Collection */
.coll{padding:clamp(80px,10vw,140px) 0}
.coll__grid{display:grid;gap:22px;padding:0 var(--pad);perspective:1200px}
@media (min-width:900px){.coll__grid{grid-template-columns:repeat(3,1fr)}}
.card{background:linear-gradient(170deg,#1b1813,#0f0e0c);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .4s;will-change:transform}
.card:hover{box-shadow:0 40px 80px rgba(0,0,0,.5)}
.card__view{position:relative;aspect-ratio:1;background:radial-gradient(circle at 50% 45%,#2b2419,#120f0c 70%)}
.card__view canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.card__txt{padding:22px;display:grid;gap:8px;align-content:start;transform:translateZ(30px)}
.card__txt h3{font-size:1.6rem}
.card__txt p{margin:0;color:#cfc5b6}
.price{font:500 1.3rem/1 var(--fd);color:var(--gold)}
.card__txt .btn{justify-self:start;margin-top:10px}

/* Heure du monde */
.world{padding:0 var(--pad) clamp(80px,10vw,140px)}
.world__list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:800px){.world__list{grid-template-columns:repeat(4,1fr)}}
.world__list li{display:grid;gap:4px;padding:28px 0;border-bottom:1px solid var(--line)}
.world__list span{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.world__list b{font:400 clamp(2.6rem,6vw,5.4rem)/1 var(--fd);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.world__list small{color:var(--gold2);font-size:.8rem}

/* Maison */
.maison{display:grid;gap:24px;padding:0 var(--pad) clamp(80px,10vw,140px)}
@media (min-width:900px){.maison{grid-template-columns:1.1fr 1fr;align-items:center}.maison__img:first-child{grid-column:1/-1}}
.maison__img{margin:0;border-radius:16px;overflow:hidden}
.maison__img img{aspect-ratio:16/8;object-fit:cover;width:100%}
.maison__img--sq img{aspect-ratio:1}
.maison__txt p:not(.kicker){color:#cfc5b6;max-width:50ch}
.timeline{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.timeline li{display:grid;grid-template-columns:70px 1fr;gap:16px;border-top:1px solid var(--line);padding-top:12px;opacity:.35;transition:opacity .5s}
.timeline li.on{opacity:1}
.timeline b{font:500 1.2rem/1.3 var(--fd);color:var(--gold)}
.timeline span{color:#cfc5b6;font-size:.95rem}

/* Rendez-vous */
.rdv{display:grid;gap:40px;padding:clamp(80px,10vw,140px) var(--pad);background:var(--bg2);border-top:1px solid var(--line)}
@media (min-width:900px){.rdv{grid-template-columns:1fr 1fr;align-items:start}}
.rdv__txt p:not(.kicker){color:#cfc5b6;max-width:46ch}
.rdv__form{display:grid;gap:16px}
.rdv__form label{display:grid;gap:6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.rdv__form input,.rdv__form select,.rdv__form textarea{font:400 1rem/1.4 var(--ft);color:var(--ink);background:#0c0b0a;border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-height:50px;letter-spacing:0;text-transform:none}
.rdv__form input:focus,.rdv__form select:focus,.rdv__form textarea:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.rdv__form .btn{justify-self:start}
.rdv__ok{margin:0;color:var(--gold)}
.ftr{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;padding:22px var(--pad) 30px;font-size:.85rem;color:var(--mute);border-top:1px solid var(--line)}

.reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
.reveal.in{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){.reveal{clip-path:inset(0)}.hero__hint span,.hero__load span{animation:none}.timeline li{opacity:1}}