:root{
  --ink:#0f0e0d;--ink2:#1a1816;--paper:#f4efe7;--stone:#e6dfd3;--muted:#7d766c;
  --red:#e2001a;--brass:#bd9b5e;--line:#d6cdbf;--lineD:#34302b;
  --serif:"Fraunces",Georgia,serif;--sans:"Manrope",system-ui,Arial,sans-serif;
  --pad:clamp(20px,5vw,72px);--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ol,figure,blockquote{margin:0;padding:0}
ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em{font-style:italic;color:var(--red)}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

/* typo */
.display{font-family:var(--serif);font-weight:340;line-height:.98;letter-spacing:-.035em;font-size:clamp(46px,9.2vw,150px);font-variation-settings:"opsz" 144}
.display em{font-weight:340}
.h2{font-size:clamp(38px,6.2vw,96px)}
.light{color:var(--paper)}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:12px;color:var(--muted)}
.eyebrow.light{color:#d9d1c4}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:34em;color:#3d3832}
.lead.light{color:#cfc7ba}
.big-text{font-family:var(--serif);font-weight:320;font-size:clamp(26px,3.7vw,58px);line-height:1.14;letter-spacing:-.022em;max-width:20em}
.arr{display:inline-block;transition:transform .35s var(--ease)}
a:hover .arr{transform:translateX(6px)}

/* boutons */
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff;font-weight:600;font-size:15px;padding:17px 26px;border-radius:999px;transition:background .25s,transform .25s var(--ease);white-space:nowrap}
.cta:hover{background:#b90015;transform:translateY(-2px)}
.cta.small{padding:12px 20px;font-size:14px}
.cta.dark{background:var(--ink)}
.cta.dark:hover{background:var(--red)}
.ghost{display:inline-flex;align-items:center;white-space:nowrap;padding:16px 24px;border:1px solid #ffffff66;border-radius:999px;color:#fff;font-weight:600;font-size:15px;transition:background .25s,color .25s}
.ghost:hover{background:#fff;color:var(--ink)}
.link{font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:4px}

/* intro */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;animation:introOut .7s var(--ease) 1.05s forwards}
.intro img{width:110px;animation:introLogo 1s var(--ease) both}
@keyframes introLogo{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes introOut{to{transform:translateY(-100%);visibility:hidden}}

/* en-tête */
.head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:28px;padding:18px var(--pad);transition:padding .35s}
.head:before{content:"";position:absolute;inset:0;z-index:-1;background:#0f0e0dd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .35s}
.head.solid{padding-top:10px;padding-bottom:10px}
.head.solid:before{opacity:1}
.brand img{height:58px;width:auto;transition:height .35s}
.head.solid .brand img{height:44px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:500;color:#eee6da}
.nav a{position:relative;padding:6px 0}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--red);transition:right .35s var(--ease)}
.nav a:hover:after{right:0}
.nav-cta{display:none}
.burger{display:none;width:44px;height:44px;position:relative;margin-left:auto}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:transform .3s var(--ease),top .3s}
.burger span:first-child{top:17px}.burger span:last-child{top:26px}
.burger.on span:first-child{top:21px;transform:rotate(45deg)}
.burger.on span:last-child{top:21px;transform:rotate(-45deg)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0f0e0d99 0%,#0f0e0d33 30%,#0f0e0dcc 78%,#0f0e0d 100%)}
.hero-in{position:relative;width:100%;padding:140px var(--pad) 84px;color:var(--paper)}
.hero .eyebrow{margin-bottom:34px}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.line:nth-child(1)>span{animation-delay:1.25s}.line:nth-child(2)>span{animation-delay:1.37s}.line:nth-child(3)>span{animation-delay:1.49s}
@keyframes rise{to{transform:none}}
.reflet{font-family:var(--serif);font-weight:340;line-height:.98;letter-spacing:-.035em;font-size:clamp(46px,9.2vw,150px);transform:scaleY(-1);margin-top:-.43em;margin-bottom:-.3em;opacity:0;filter:blur(2px);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,transparent 85%);animation:refletIn 1.6s ease 2.1s forwards;pointer-events:none;user-select:none}
.reflet em{color:var(--red)}
@keyframes refletIn{to{opacity:.22}}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:8px;opacity:0;animation:fade 1s ease 2s forwards}
@keyframes fade{to{opacity:1}}
.hero-sub{font-size:clamp(16px,1.45vw,20px);max-width:27em;color:#e2dacd}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.scroll-hint{position:absolute;right:var(--pad);top:50%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#cfc7ba;display:flex;align-items:center;gap:14px}
.scroll-hint span{width:1px;height:60px;background:#ffffff55;position:relative;overflow:hidden}
.scroll-hint span:after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--red);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{to{top:100%}}

/* marques */
.marquee{background:var(--ink);border-top:1px solid var(--lineD);border-bottom:1px solid var(--lineD);overflow:hidden;padding:26px 0}
.track{display:flex;align-items:center;gap:44px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:var(--serif);font-size:clamp(24px,3vw,44px);font-weight:320;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px #a79d8d;white-space:nowrap;transition:color .3s}
.track span:hover{color:var(--paper);-webkit-text-stroke-color:var(--paper)}
.track i{font-style:normal;color:var(--red);font-size:14px}
@keyframes slide{to{transform:translateX(-50%)}}

/* manifeste */
.manifeste{padding:clamp(80px,11vw,170px) var(--pad)}
.manifeste .big-text{margin-top:30px;max-width:19em;font-size:clamp(28px,4.4vw,70px)}
.big-text .w{opacity:.14;transition:opacity .4s}
.big-text .w.on{opacity:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(50px,7vw,110px);border-top:1px solid var(--ink)}
.stat{padding:26px 22px 0 0}
.stat+.stat{border-left:1px solid var(--line);padding-left:22px}
.stat b{font-family:var(--serif);font-weight:320;font-size:clamp(46px,6vw,96px);line-height:1;letter-spacing:-.04em;display:block}
.stat small{font-size:.36em;letter-spacing:0;margin-left:6px;color:var(--red)}
.stat p{margin-top:12px;font-size:14px;color:var(--muted);max-width:15em}

/* univers */
.univers{background:var(--ink);padding:clamp(70px,9vw,140px) 0 0}
.sec-head{padding:0 var(--pad) clamp(34px,4vw,60px)}
.sec-head .eyebrow{margin-bottom:22px}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.panels{display:flex;height:min(78vh,760px);min-height:520px}
.panel{position:relative;flex:1;min-width:0;overflow:hidden;cursor:pointer;transition:flex .8s var(--ease);border-left:1px solid #00000066;outline-offset:-4px}
.panel.on{flex:4.2}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.75) brightness(.5);transform:scale(1.08);transition:filter .8s,transform 1.4s var(--ease)}
.panel.on img{filter:none;transform:none}
.panel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#0f0e0de6 100%)}
.panel-in{position:absolute;inset:auto 0 0 0;z-index:2;padding:28px;color:var(--paper)}
.num{font-size:12px;letter-spacing:.2em;color:var(--brass);font-weight:600}
.panel h3{font-family:var(--serif);font-weight:340;font-size:clamp(22px,2.3vw,36px);line-height:1.05;letter-spacing:-.02em;margin-top:10px;white-space:nowrap}
.panel:not(.on) h3{writing-mode:vertical-rl;transform:rotate(180deg);position:absolute;bottom:28px;left:24px;margin:0}
.panel:not(.on) .num{position:absolute;top:auto;bottom:calc(100% + 0px);display:none}
.more{max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s .15s}
.panel.on .more{max-height:240px;opacity:1}
.more p{margin:14px 0 18px;max-width:30em;color:#ddd5c8;font-size:15.5px}
.more a{font-weight:600;font-size:15px;border-bottom:1px solid var(--red);padding-bottom:3px}

/* méthode */
.methode{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,120px);padding:clamp(80px,11vw,170px) var(--pad);background:var(--stone)}
.methode-l{position:sticky;top:120px;align-self:start}
.methode-l .h2{margin:22px 0 26px}
.methode-l .cta{margin-top:34px}
.steps li{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:34px 0;border-top:1px solid #c9bfae}
.steps li:last-child{border-bottom:1px solid #c9bfae}
.steps span{font-family:var(--serif);font-size:54px;font-weight:300;line-height:1;color:var(--red);letter-spacing:-.04em}
.steps h3{font-family:var(--serif);font-weight:380;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;margin-bottom:8px}
.steps p{color:#4a443d;max-width:30em}

/* showroom */
.showroom{background:var(--ink);padding:clamp(70px,9vw,140px) 0 60px}
.strip{display:flex;gap:16px;overflow-x:auto;padding:0 var(--pad) 24px;scroll-snap-type:x proximity;cursor:grab;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip figure{flex:none;width:clamp(240px,26vw,400px);height:clamp(340px,44vw,560px);position:relative;overflow:hidden;scroll-snap-align:start;align-self:flex-end}
.strip figure.tall{height:clamp(400px,52vw,660px)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);pointer-events:none}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 12px #000}
.strip-hint{text-align:center;color:#8f8678;font-size:11px;letter-spacing:.3em;text-transform:uppercase;margin-top:14px}

/* pour qui */
.pour{padding:clamp(80px,11vw,170px) var(--pad)}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 46px}
.tab{padding:13px 22px;border:1px solid var(--ink);border-radius:999px;font-weight:600;font-size:15px;transition:background .25s,color .25s}
.tab.on,.tab:hover{background:var(--ink);color:var(--paper)}
.pane{display:none}
.pane.on{display:block;animation:paneIn .7s var(--ease)}
@keyframes paneIn{from{opacity:0;transform:translateY(24px)}}
.pane .big-text{max-width:19em;font-size:clamp(28px,4.4vw,70px);margin-bottom:38px}

/* témoignage */
.quote{position:relative;min-height:74vh;display:grid;place-items:center;padding:100px var(--pad);overflow:hidden;background:var(--ink)}
.quote-bg{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;opacity:.34;will-change:transform}
.quote blockquote{position:relative;max-width:1000px;text-align:center;color:var(--paper)}
.quote p{font-family:var(--serif);font-style:italic;font-weight:320;font-size:clamp(26px,3.8vw,56px);line-height:1.16;letter-spacing:-.02em}
.quote footer{margin-top:30px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#d9d1c4}
.quote footer b{color:#fff}

/* événements */
.events{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,100px);align-items:end;padding:clamp(80px,10vw,150px) var(--pad);background:var(--stone)}
.events .h2{margin-top:22px}
.events .lead{margin-bottom:26px}

/* rdv */
.rdv{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.rdv-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rdv:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0f0e0d40,#0f0e0dd9 85%)}
.rdv-in{position:relative;z-index:2;width:100%;padding:120px var(--pad) clamp(40px,6vw,80px);display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.rdv-card{background:#0f0e0dcc;backdrop-filter:blur(14px);border:1px solid #ffffff22;padding:32px;min-width:min(100%,380px);color:var(--paper)}
.addr{font-family:var(--serif);font-size:28px;line-height:1.2;margin:18px 0 10px;letter-spacing:-.01em}
.tel{display:inline-block;font-size:22px;font-weight:600;border-bottom:1px solid var(--red);padding-bottom:2px}
.rdv-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* pied */
.foot{background:var(--ink);color:#cfc7ba;padding:70px var(--pad) 28px;display:grid;grid-template-columns:1fr 1.4fr;gap:50px;border-top:1px solid var(--lineD)}
.foot-top img{height:88px;margin-bottom:22px}
.foot-top p{max-width:26em;font-size:14.5px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.foot h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8f8678;margin-bottom:16px;font-weight:600}
.foot-cols a{display:block;padding:6px 0;font-size:15px;transition:color .2s}
.foot-cols a:hover{color:#fff}
.foot-bot{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--lineD);padding-top:22px;font-size:12.5px;color:#8f8678}

/* apparitions */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.steps .rv:nth-child(2){transition-delay:.08s}.steps .rv:nth-child(3){transition-delay:.16s}.steps .rv:nth-child(4){transition-delay:.24s}

/* tablette et mobile */
@media(max-width:1080px){
  .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:6px;padding:90px var(--pad) 40px;margin:0;transform:translateY(-100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s .6s;font-family:var(--serif);font-size:clamp(28px,6vw,44px);font-weight:340;letter-spacing:-.02em}
  .nav.open{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
  .nav a{padding:8px 0}
  .nav a:after{display:none}
  .nav-cta{display:inline-flex;align-self:flex-start;margin-top:24px;font-family:var(--sans);font-size:16px;font-weight:600;background:var(--red);color:#fff;padding:16px 26px!important;border-radius:999px;letter-spacing:0}
  .burger{display:block;z-index:2}
  .head-cta{display:none}
  .brand{position:relative;z-index:2}
}
@media(max-width:860px){
  .scroll-hint{display:none}
  .hero-in{padding-bottom:44px}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:22px 16px 22px 0}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .panels{flex-direction:column;height:auto;min-height:0}
  .panel{flex:none!important;height:92px;border-left:0;border-top:1px solid #00000066;transition:height .7s var(--ease)}
  .panel.on{height:440px}
  .panel:not(.on) h3{writing-mode:horizontal-tb;transform:none;position:static;margin-top:0}
  .panel:not(.on) .panel-in{padding:0 20px;inset:0;display:flex;align-items:center}
  .panel-in{padding:22px 20px}
  .panel h3{white-space:normal}
  .panel:not(.on) h3{flex:none}
  .panel:not(.on) .more{display:none}
  .methode,.events,.foot{grid-template-columns:1fr}
  .methode-l{position:static}
  .steps li{grid-template-columns:62px 1fr}
  .steps span{font-size:40px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .rdv-in{flex-direction:column;align-items:stretch}
  .brand img{height:48px}
}
@media(max-width:520px){
  .cta,.ghost{padding:15px 20px}
  .hero-actions{width:100%}
  .hero-actions a{flex:1;justify-content:center}
  .foot-bot{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important;scroll-behavior:auto!important}
  .track{animation:none}
  .rv{opacity:1;transform:none}
  .big-text .w{opacity:1}
}