/* VORWELL — palette 01 « Encre & craie » */
:root{
  --ink:#0F0F0F;
  --chalk:#F1ECE2;
  --stone:#8A8378;
  --chalk-2:#E8E2D6;
  --ink-2:#1A1A1A;
  --line:rgba(15,15,15,.14);
  --line-dark:rgba(241,236,226,.16);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --max:1360px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--chalk);color:var(--ink);line-height:1.55;font-size:16px;font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.dark{background:var(--ink);color:var(--chalk)}
.dark .line{border-color:var(--line-dark)}

/* Wordmark (masque CSS → prend la couleur du texte) */
.wordmark{display:inline-block;background:currentColor;-webkit-mask:url(wordmark.svg) no-repeat center/contain;mask:url(wordmark.svg) no-repeat center/contain;aspect-ratio:869.47/108;width:160px}
.wordmark.compact{-webkit-mask-image:url(wordmark-compact.svg);mask-image:url(wordmark-compact.svg);aspect-ratio:503.47/236}
.wordmark.v{-webkit-mask-image:url(v.svg);mask-image:url(v.svg);aspect-ratio:1}

/* Typo */
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.dark .eyebrow{color:rgba(241,236,226,.6)}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(40px,7vw,96px)}
h2{font-size:clamp(30px,4.2vw,56px)}
h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.45;max-width:38ch}
p.muted{color:var(--stone)}
.dark p.muted{color:rgba(241,236,226,.62)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:1px solid var(--ink);border-radius:999px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn.solid{background:var(--ink);color:var(--chalk)}
.btn.solid:hover{background:var(--ink-2)}
.btn.ghost:hover{background:var(--ink);color:var(--chalk)}
.dark .btn{border-color:var(--chalk)}
.dark .btn.solid{background:var(--chalk);color:var(--ink)}
.dark .btn.solid:hover{background:#fff}
.dark .btn.ghost:hover{background:var(--chalk);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Header */
.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--chalk) 88%,transparent);backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.header .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px}
.header nav{display:flex;gap:28px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.header nav a{opacity:.7}
.header nav a:hover,.header nav a[aria-current]{opacity:1}
.header .right{display:flex;justify-content:flex-end;gap:22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.header .brand{justify-self:center}
.menu-btn{display:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:820px){
  .header .container{grid-template-columns:auto 1fr auto}
  .header nav{display:none}
  .header .brand{justify-self:start;order:-1}
  .menu-btn{display:block}
  .header.open nav{display:flex;flex-direction:column;gap:18px;position:absolute;left:0;right:0;top:68px;padding:28px var(--gutter) 36px;background:var(--chalk);border-bottom:1px solid var(--line)}
}
.ticker{background:var(--ink);color:var(--chalk);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:10px var(--gutter);height:37px;line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Hero */
.hero{min-height:calc(100svh - 68px - 37px);display:grid;align-items:end;padding:64px 0 56px;position:relative;overflow:hidden}
.hero .container{display:grid;gap:36px}
.hero .big{width:min(100%,1100px);opacity:.96}
.hero-row{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.hero-row .actions{display:flex;gap:14px;flex-wrap:wrap;justify-self:end}
@media (max-width:820px){.hero{padding-top:40px}.hero-row{grid-template-columns:1fr}.hero-row .actions{justify-self:start}}

/* Sections */
.section{padding:clamp(72px,9vw,128px) 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
@media (max-width:820px){.section-head{grid-template-columns:1fr}}
.line{border-top:1px solid var(--line)}

/* Manifeste */
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.manifesto .text{display:grid;gap:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;max-width:52ch}
.manifesto .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--chalk);padding:28px 24px;display:grid;gap:6px;align-content:start}
.dark .stat{background:var(--ink)}
.stat b{font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1}
.stat span{font-size:13px;color:var(--stone)}
@media (max-width:820px){.manifesto{grid-template-columns:1fr}}

/* Produits */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:980px){.products{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.products{grid-template-columns:1fr}}
.card{display:grid;gap:14px}
.card .visual{position:relative;aspect-ratio:4/5;background:var(--chalk-2);overflow:hidden;border:1px solid var(--line)}
.card .visual.ink{background:var(--ink-2)}
.card .visual.olive{background:#4A4E3B}
.card .visual .wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;opacity:.9}
.card .visual.ink .wordmark,.card .visual.olive .wordmark{color:var(--chalk)}
.card .visual .tag{position:absolute;left:16px;top:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;border-radius:999px;background:color-mix(in srgb,var(--chalk) 70%,transparent)}
.card .visual.ink .tag,.card .visual.olive .tag{color:var(--chalk);background:rgba(15,15,15,.35)}
.card .visual .soon{position:absolute;right:16px;bottom:16px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.card .meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .meta h3{font-size:17px;font-weight:500;letter-spacing:0}
.card .meta .price{font-size:15px;color:var(--stone)}
.card .meta .price b{color:var(--ink);font-weight:500}
.card p{font-size:14px;color:var(--stone);max-width:36ch}
.card:hover .visual{border-color:var(--ink)}

/* Qualité / specs */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.spec{background:var(--ink);padding:32px 26px;display:grid;gap:10px;align-content:start}
.spec .n{font-size:11px;letter-spacing:.2em;color:rgba(241,236,226,.5)}
.spec h3{font-size:20px}
.spec p{font-size:14px;color:rgba(241,236,226,.66)}
@media (max-width:980px){.specs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.specs{grid-template-columns:1fr}}

/* Prix juste */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.compare > div{background:var(--chalk);padding:36px 30px;display:grid;gap:16px}
.compare .bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:14px;font-size:14px}
.bar i{display:block;height:10px;background:var(--stone);opacity:.5}
.bar.us i{background:var(--ink);opacity:1}
.bar b{font-weight:500}
@media (max-width:820px){.compare{grid-template-columns:1fr}.bar{grid-template-columns:110px 1fr auto}}

/* Liste d'attente */
.waitlist{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.waitlist form{display:grid;gap:12px}
.field{display:grid;gap:8px}
.field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,236,226,.6)}
.field input,.field select{height:54px;padding:0 18px;border:1px solid var(--line-dark);background:transparent;color:var(--chalk);font:inherit;font-size:16px;border-radius:0;outline:none;width:100%}
.field input:focus,.field select:focus{border-color:var(--chalk)}
.field select option{color:var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{font-size:12px;color:rgba(241,236,226,.55);max-width:52ch}
.form-msg{font-size:14px;min-height:1.4em}
@media (max-width:820px){.waitlist{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* Footer */
.footer{padding:56px 0 40px;font-size:13px}
.footer .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footer h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-bottom:14px;font-weight:500}
.footer ul{list-style:none;display:grid;gap:8px}
.footer ul a:hover{text-decoration:underline}
.footer .bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;color:var(--stone);font-size:12px}
@media (max-width:820px){.footer .top{grid-template-columns:1fr 1fr}}

/* Page produit */
.product{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:clamp(28px,5vw,80px);padding:40px 0 clamp(72px,9vw,120px)}
.gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.gallery .shot{width:100%;min-width:0;aspect-ratio:4/5;background:var(--chalk-2);border:1px solid var(--line);position:relative;display:grid;place-items:center}
.gallery .shot.ink{background:var(--ink-2)}
.gallery .shot .wordmark{width:36%}
.gallery .shot.ink .wordmark{color:var(--chalk)}
.gallery .shot small{position:absolute;left:14px;bottom:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.gallery .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.buy{position:sticky;top:96px;display:grid;gap:26px;align-content:start;min-width:0}
.buy .btn{white-space:normal;height:auto;min-height:52px;padding:14px 26px;text-align:center}
.buy .price{font-size:22px}
.buy .price small{font-size:13px;color:var(--stone);margin-left:8px}
.options{display:grid;gap:18px}
.opt-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-bottom:10px}
.opt-label a{text-decoration:underline;text-transform:none;letter-spacing:0}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{height:44px;min-width:56px;padding:0 16px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:14px;transition:border-color .15s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--chalk)}
.swatches{display:flex;gap:10px}
.swatch{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);position:relative}
.swatch::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--c)}
.swatch[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.buy .note{font-size:13px;color:var(--stone)}
.accordion{border-top:1px solid var(--line)}
.accordion details{border-bottom:1px solid var(--line)}
.accordion summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-size:18px;color:var(--stone)}
.accordion details[open] summary::after{content:"–"}
.accordion .body{padding:0 0 22px;font-size:14px;color:#3a3833;display:grid;gap:10px}
.accordion table{border-collapse:collapse;width:100%;font-size:13px}
.accordion td,.accordion th{padding:8px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.accordion td:last-child,.accordion th:last-child{text-align:right}
@media (max-width:900px){.product{grid-template-columns:1fr}.buy{position:static}}

/* Pages texte */
.prose{max-width:72ch;padding:48px 0 clamp(72px,9vw,120px);display:grid;gap:18px;font-size:16px}
.prose h1{font-size:clamp(32px,4.5vw,56px);margin-bottom:12px}
.prose h2{font-size:22px;margin-top:26px}
.prose .todo{background:var(--chalk-2);border-left:2px solid var(--stone);padding:12px 16px;font-size:14px;color:#3a3833}
.prose ul{padding-left:20px;display:grid;gap:6px}

/* Divers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
.visual-block{aspect-ratio:1;background:var(--ink);display:grid;place-items:center;color:var(--chalk)}
.visual-block .wordmark{width:46%}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Catégories (accueil) */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.cats{grid-template-columns:1fr}}
.cat{display:grid;gap:12px;padding:28px 26px 30px;border:1px solid var(--line);min-height:300px;align-content:end;position:relative;transition:border-color .2s}
.cat:hover{border-color:var(--ink)}
.cat .n{position:absolute;top:22px;left:26px;font-size:11px;letter-spacing:.2em;color:var(--stone)}
.cat .count{position:absolute;top:22px;right:26px;font-size:11px;letter-spacing:.2em;color:var(--stone);text-transform:uppercase}
.cat h3{font-size:clamp(24px,2.4vw,32px)}
.cat p{font-size:14px;color:var(--stone);max-width:34ch}
.cat .go{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px}

/* Filtres (collection) */
.filters{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line);padding-top:24px}
.filters a{height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.filters a:hover{border-color:var(--ink)}
.filters a[aria-current]{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.card .visual.chalk{background:var(--chalk-2)}
.card .visual.chalk .wordmark{color:var(--ink);opacity:.85}
.empty{padding:48px 0;color:var(--stone)}

/* ===== Accueil immersif (v2) ===== */
.brand{display:inline-grid;justify-items:center;gap:5px;text-decoration:none}
.brand .city{font-size:9px;letter-spacing:.38em;text-transform:uppercase;color:currentColor;opacity:.75;line-height:1}
.header{position:sticky;top:0}
.home .header{position:fixed;left:0;right:0;top:37px;z-index:50;background:transparent;border:0;backdrop-filter:none;pointer-events:none}
.home .header .container{pointer-events:auto;height:64px;margin-top:14px;background:rgba(241,236,226,.72);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px);border:1px solid rgba(15,15,15,.08);border-radius:14px;padding:0 24px;width:min(100% - 2*var(--gutter),var(--max));box-shadow:0 10px 30px rgba(15,15,15,.08)}
.home .ticker{position:fixed;top:0;left:0;right:0;z-index:51}
@media (max-width:820px){.home .header .container{padding:0 16px}}

.bleed{position:relative;overflow:hidden;background:var(--tone,#151515);color:var(--chalk);isolation:isolate}
.bleed .img{position:absolute;inset:-6% 0;background-position:center;background-size:cover;background-repeat:no-repeat;will-change:transform;transform:translateY(var(--py,0)) scale(1.02);transition:transform .1s linear}
.bleed .img::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 100%,rgba(0,0,0,.45),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.35))}
.bleed .grain{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;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")}
.bleed .caption{position:absolute;left:24px;bottom:20px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.55;z-index:2}
.bleed video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Hero */
.hero2{height:100svh;min-height:640px;display:grid;place-items:center;text-align:center;--tone:#121212}
.hero2 .img{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translateY(var(--py,0))}to{transform:scale(1.12) translateY(var(--py,0))}}
.hero2 .inner{position:relative;z-index:2;display:grid;justify-items:center;gap:22px;padding:0 var(--gutter);padding-top:80px}
.hero2 .wordmark{width:min(78vw,900px);color:var(--chalk)}
.hero2 .city{font-size:clamp(11px,1vw,13px);letter-spacing:.5em;text-transform:uppercase;opacity:.85;margin-top:-6px}
.hero2 .tag{font-size:clamp(15px,1.4vw,19px);max-width:44ch;opacity:.9;line-height:1.5}
.hero2 .links{display:flex;gap:34px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.ulink{position:relative;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;color:inherit}
.ulink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .35s ease}
.ulink:hover::after{transform:scaleX(.3)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;width:1px;height:48px;background:linear-gradient(to bottom,rgba(241,236,226,.9),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:translate(-50%,-8px);opacity:0}30%{opacity:1}100%{transform:translate(-50%,16px);opacity:0}}

/* Duo & bandeau */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 0 0}
.panel{height:min(82vh,760px);display:grid;align-content:end;padding:40px;gap:12px;color:var(--chalk)}
.panel .inner{position:relative;z-index:2;display:grid;gap:12px;justify-items:start}
.panel h2{font-size:clamp(28px,3.4vw,52px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.panel p{font-size:14px;opacity:.85;max-width:38ch}
.panel:hover .img{transform:translateY(var(--py,0)) scale(1.06)}
.panel .img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (max-width:820px){.duo{grid-template-columns:1fr}.panel{height:70vh;padding:24px}}
.band{height:min(90vh,820px);display:grid;place-items:center;text-align:center;margin-top:6px}
.band .inner{position:relative;z-index:2;display:grid;gap:18px;justify-items:center;padding:0 var(--gutter)}
.band .eyebrow{color:rgba(241,236,226,.7)}
.band h2{font-size:clamp(32px,5vw,72px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1;max-width:14ch}
.band p{max-width:52ch;font-size:clamp(15px,1.3vw,18px);opacity:.88}

/* Carrousel pièces phares */
.rail-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.rail-head h2{font-size:clamp(28px,3.6vw,54px);text-transform:uppercase;letter-spacing:.02em;font-weight:500}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:18px;transition:background .2s,color .2s}
.rail-nav button:hover{background:var(--ink);color:var(--chalk)}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail .card{flex:0 0 clamp(240px,26vw,360px);scroll-snap-align:start}
.rail-wrap{padding:clamp(56px,7vw,96px) 0}