/* Maison Sorell — V1 ; Atelier, Carnet et Signature : acte final (V3.4) */
/* polices de repli aux mêmes chasses : le titre ne bouge pas quand les polices web arrivent */
@font-face { font-family: "Cormorant repli"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 95.4%; }
@font-face { font-family: "Cormorant repli"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); size-adjust: 86.8%; }
@font-face { font-family: "Manrope repli"; src: local("Arial"), local("ArialMT"); size-adjust: 99.2%; }
:root {
  --charbon-profond: #121110;
  --charbon: #1D1B19;
  --creme: #F2ECE2;
  --lin: #E5DCCD;
  --sauge: #8E9C88;
  --sauge-fonce: #5E6B59;
  --pierre: #6E675E;
  --serif: "Cormorant Garamond", "Cormorant repli", serif;
  --sans: "Manrope", "Manrope repli", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --margin: clamp(20px, 6vw, 96px);
  --section: clamp(110px, 14vw, 220px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--charbon-profond); color: var(--creme);
  font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, dl, dd, blockquote { margin: 0; padding: 0; }
ol { list-style: none; }
em { font-style: italic; }
::selection { background: var(--sauge); color: var(--charbon-profond); }
:focus-visible { outline: 1px solid var(--sauge); outline-offset: 4px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); }

/* ---------- Thèmes ---------- */
[data-theme="dark"] { background: var(--charbon-profond); color: var(--creme); --muted: rgba(242, 236, 226, .62); --rule: rgba(242, 236, 226, .14); }
[data-theme="light"] { background: var(--creme); color: var(--charbon); --muted: var(--pierre); --rule: rgba(29, 27, 25, .14); }
[data-theme="linen"] { background: var(--lin); color: var(--charbon); --muted: #625B52; --rule: rgba(29, 27, 25, .16); }

/* ---------- Typographie ---------- */
.eyebrow { font: 500 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.eyebrow--num b { font-weight: 500; color: var(--sauge); margin-right: 18px; }
[data-theme="light"] .eyebrow--num b { color: var(--sauge-fonce); }
[data-theme="linen"] .eyebrow--num b { color: #56634F; }   /* sauge foncée assombrie sur le lin : contraste 4,7:1 */
/* références produit : distinctes de la numérotation des sections (N° 01…), même famille typographique */
.eyebrow--ref b { font-weight: 400; font-style: italic; font-family: var(--serif); font-size: 1.15em; letter-spacing: .04em; text-transform: none; margin-right: 14px; color: var(--sauge); }
.h2 { font: 300 clamp(2.6rem, 5.6vw, 5.4rem)/1 var(--serif); letter-spacing: -.01em; }
.h2 em, .hero__title em, .signature em { font-weight: 300; }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 30px;
  border: 1px solid currentColor; font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate; transition: color .6s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--creme); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.btn:hover { color: var(--charbon-profond); }
.btn:hover::before { transform: scaleY(1); }
.btn--light { background: var(--creme); color: var(--charbon-profond); border-color: var(--creme); }
.btn--light::before { background: var(--sauge); }
.link { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--charbon-profond); pointer-events: none; transition: opacity 1s var(--ease) .2s, visibility 0s linear 1.2s; }
.intro__mark { font: 300 italic clamp(1.6rem, 3vw, 2.4rem)/1 var(--serif); letter-spacing: .04em; color: var(--creme); opacity: 0; transform: translateY(12px); animation: intro-in 1s var(--ease) .1s forwards; }
@keyframes intro-in { to { opacity: 1; transform: none; } }
.is-loaded .intro { opacity: 0; visibility: hidden; }
html:not(.js) .intro { display: none; }

/* ---------- En-tête ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 40px;
  padding: 22px var(--margin); color: var(--creme); transition: color .5s var(--ease), background .5s var(--ease), padding .5s var(--ease), transform .6s var(--ease);
}
.header.is-scrolled { padding-block: 14px; background: color-mix(in srgb, var(--header-bg, var(--charbon-profond)) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header.is-on-light { color: var(--charbon); --header-bg: var(--creme); }
.header.is-hidden { transform: translateY(-100%); }
.wordmark { font: 400 1.35rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.wordmark em { font-weight: 300; text-transform: none; letter-spacing: .04em; font-size: 1.15em; }
.nav { display: flex; gap: 34px; margin-left: auto; }
.nav a, .header__cta { font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .8; transition: opacity .3s; }
.nav a:hover, .header__cta:hover { opacity: 1; }
.header__cta { padding: 12px 18px; border: 1px solid currentColor; opacity: 1; }

/* ---------- 01 Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,17,16,.85) 0%, rgba(18,17,16,.35) 45%, rgba(18,17,16,0) 70%), linear-gradient(0deg, rgba(18,17,16,.7), transparent 40%); }
.hero__content { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--margin) clamp(80px, 12vh, 140px); }
.hero__title { font: 300 clamp(3.6rem, 10vw, 9.6rem)/.92 var(--serif); letter-spacing: -.02em; margin: 26px 0 28px; }
.hero__lead { max-width: 20.7em; font-size: 1.05rem; color: rgba(242, 236, 226, .78); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; margin-top: 40px; }
.hero__scroll { position: absolute; right: var(--margin); bottom: clamp(80px, 12vh, 140px); z-index: 1; display: grid; justify-items: center; gap: 14px; font: 500 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(242, 236, 226, .6); writing-mode: vertical-rl; }
.hero__scroll i { width: 1px; height: 70px; background: rgba(242, 236, 226, .2); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--creme); animation: scroll-line 2.4s var(--ease) infinite; }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- 02 Philosophie ---------- */
.philo { padding-block: var(--section); }
.philo__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(56px, 7vw, 110px); }
.philo .eyebrow { grid-column: 1 / -1; }
.statement { grid-column: 1 / span 10; font: 300 clamp(2rem, 4.2vw, 4.1rem)/1.12 var(--serif); letter-spacing: -.005em; }
.statement .w { opacity: .5; transition: opacity .5s linear; }   /* mot non éclairé : 3,2:1, lisible en grand corps */
.statement .w.is-lit { opacity: 1; }
.philo__media { grid-column: 1 / span 5; }
.philo__media img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
figcaption { margin-top: 14px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.principles { grid-column: 7 / span 6; align-self: end; display: grid; gap: 40px; }
.principles li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; padding-top: 26px; border-top: 1px solid var(--rule); }
.principles span { grid-row: span 2; font: 400 italic 1.3rem/1 var(--serif); color: var(--sauge-fonce); }
.principles h3 { font: 400 1.7rem/1.1 var(--serif); margin-bottom: 10px; }
.principles p { color: var(--muted); max-width: 40ch; }

/* ---------- 03 Collection ---------- */
.collection { padding-block: var(--section); }
.section-head { display: grid; gap: 26px; margin-bottom: clamp(56px, 8vw, 120px); }
.section-head--split { grid-template-columns: 1fr auto; align-items: end; }
.collection__layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 110px); }
.collection__stage { position: sticky; top: 12vh; height: 76vh; display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.collection__frame { position: relative; overflow: hidden; background: #DDD3C3; }
.collection__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.collection__frame img.is-active { opacity: 1; transform: none; }
.collection__counter { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--muted); }
.collection__counter span { color: var(--charbon); }
.collection__list { display: grid; }
.product { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding-block: 8vh; border-top: 1px solid var(--rule); scroll-margin-top: 12vh; }
.product > * { transition: color .8s var(--ease), opacity .8s var(--ease); }
.product:not(.is-active) :is(.product__name, .product__price) { color: #7A7268; }   /* grands corps atténués : 3,5:1 sur le lin */
.product:not(.is-active) :is(.product__num, .product__text, dt, dd) { color: var(--muted); }   /* petits corps : 4,9:1 */
.product:first-child { border-top: 0; }
.product__img { display: none; }
.product__num { font: 400 italic 1.2rem/1 var(--serif); color: #56634F; }
.product__name { font: 300 clamp(2.6rem, 4.6vw, 4.4rem)/1 var(--serif); margin: 18px 0 24px; }
.product__text { max-width: 40ch; color: var(--muted); }
.product__specs { display: grid; gap: 0; margin: 34px 0 30px; max-width: 420px; }
.product__specs div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: .9rem; }
.product__specs dt { font: 500 10.5px/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.product__price { font: 400 1.5rem/1 var(--serif); }

/* ---------- 04 Atelier — « La beauté du geste » ---------- */
/* la lumière baisse : le lin de la Collection glisse vers le charbon de l'atelier */
.atelier { position: relative; padding-top: var(--section); }
.atelier::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(120px, 22vh, 260px); pointer-events: none;
  background: linear-gradient(180deg, var(--lin) 0, rgba(229, 220, 205, .35) 35%, rgba(18, 17, 16, 0) 100%); }
.atelier__head { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 26px; margin-bottom: clamp(56px, 8vw, 120px); }
.atelier__head .eyebrow { grid-column: 1 / -1; }
.atelier__head .h2 { grid-column: 1 / span 8; }
.atelier__lead { grid-column: 9 / span 4; align-self: end; color: var(--muted); max-width: 34ch; }

/* lecture en colonne (mobile, mouvements réduits, sans JavaScript) */
.gestes__list { display: grid; gap: clamp(72px, 12vw, 160px); padding-inline: var(--margin); max-width: var(--max); margin-inline: auto; }
.geste { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.geste__media { grid-column: 1 / span 7; overflow: hidden; }
.geste__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.geste:nth-child(2) .geste__media { grid-column: 6 / span 7; grid-row: 1; }
.geste:nth-child(2) .geste__body { grid-column: 1 / span 4; grid-row: 1; }
.geste__body { grid-column: 9 / span 4; padding-bottom: 8px; }
.geste__num { display: block; font: 400 italic 1.2rem/1 var(--serif); color: var(--sauge); margin-bottom: 14px; }
.geste__mot { font: 300 clamp(2.8rem, 6vw, 6rem)/.95 var(--serif); letter-spacing: -.015em; margin-bottom: 26px; }
.geste__texte { color: var(--muted); max-width: 34ch; }
.geste__outils { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--rule); font: 500 10.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 236, 226, .5); max-width: 34ch; }
.gestes__fil { display: none; }
.atelier__coda { padding-block: clamp(90px, 13vw, 200px) clamp(110px, 14vw, 220px); font: 300 clamp(1.8rem, 3.4vw, 3.2rem)/1.15 var(--serif); text-align: center; }
.atelier__coda em { color: var(--sauge); }

/* scène épinglée (ordinateur, JavaScript, mouvement autorisé) : la classe est posée par acte-final.js */
.gestes.is-scene { height: 330vh; }
.gestes.is-scene .gestes__stage { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; }
.gestes.is-scene .gestes__list { display: block; height: 100%; position: relative; padding: 0; max-width: none; }
.gestes.is-scene .geste { display: block; }
.gestes.is-scene .geste__media { position: absolute; z-index: 1; top: 50%; right: var(--margin); height: min(82vh, 860px); aspect-ratio: 4 / 5; translate: 0 -50%;
  clip-path: polygon(0 var(--a, 100%), 100% var(--b, 120%), 100% 100%, 0 100%); }
.gestes.is-scene .geste:first-child .geste__media { --a: 0%; --b: 0%; }
.gestes.is-scene .geste__media img { height: 100%; aspect-ratio: auto; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(var(--s, 1.05)); will-change: transform; }
/* les trois verbes, empilés dans la colonne de gauche ; le geste en cours s'allume */
.gestes.is-scene .geste__body { position: absolute; z-index: 2; left: calc(var(--margin) + 44px); padding: 0; width: min(46vw, 640px); }
.gestes.is-scene .geste:nth-child(1) .geste__body { top: 19vh; }
.gestes.is-scene .geste:nth-child(2) .geste__body { top: calc(19vh + 1 * clamp(4.2rem, 7.6vw, 8.2rem)); }
.gestes.is-scene .geste:nth-child(3) .geste__body { top: calc(19vh + 2 * clamp(4.2rem, 7.6vw, 8.2rem)); }
.gestes.is-scene .geste__num { position: absolute; left: -44px; top: .55em; margin: 0; transition: opacity .6s var(--ease); }
.gestes.is-scene .geste__mot { font-size: clamp(3.6rem, 6.6vw, 7.2rem); margin: 0; opacity: .14; transition: opacity .7s var(--ease), transform .9s var(--ease); transform: translateX(-8px); }
.gestes.is-scene .geste__texte, .gestes.is-scene .geste__outils { position: absolute; top: calc((3 - var(--n, 0)) * clamp(4.2rem, 7.6vw, 8.2rem) + 6vh); left: 0;
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; }
.gestes.is-scene .geste__outils { margin-top: 0; top: calc((3 - var(--n, 0)) * clamp(4.2rem, 7.6vw, 8.2rem) + 6vh + 6.2rem); }
.gestes.is-scene .geste:nth-child(2) { --n: 1; } .gestes.is-scene .geste:nth-child(3) { --n: 2; }
.gestes.is-scene .geste:not(.is-on) .geste__num { opacity: .25; }
.gestes.is-scene .geste.is-on .geste__mot { opacity: 1; transform: none; }
.gestes.is-scene .geste.is-on :is(.geste__texte, .geste__outils) { opacity: 1; transform: none; transition-delay: .15s; pointer-events: auto; }
/* tablette paysage et petits ordinateurs (1025 à 1280 px) : la photo se resserre, les verbes gagnent de la place et du souffle */
@media (max-width: 1280px) {
  .gestes.is-scene .geste__media { height: min(74vh, 54vw); }
  .gestes.is-scene .geste__body { width: calc(100vw - min(74vh, 54vw) * .8 - var(--margin) * 2 - 44px - 48px); }
  .gestes.is-scene .geste__mot { font-size: clamp(3.2rem, 5.6vw, 4.6rem); }
  .gestes.is-scene .geste:nth-child(1) .geste__body { top: 17vh; }
  .gestes.is-scene .geste:nth-child(2) .geste__body { top: calc(17vh + 1 * clamp(3.6rem, 6.4vw, 5.2rem)); }
  .gestes.is-scene .geste:nth-child(3) .geste__body { top: calc(17vh + 2 * clamp(3.6rem, 6.4vw, 5.2rem)); }
  .gestes.is-scene .geste__texte, .gestes.is-scene .geste__outils { top: calc((3 - var(--n, 0)) * clamp(3.6rem, 6.4vw, 5.2rem) + 5vh); max-width: 30ch; }
  .gestes.is-scene .geste__outils { top: calc((3 - var(--n, 0)) * clamp(3.6rem, 6.4vw, 5.2rem) + 5vh + 7.4rem); }
}
/* le fil : une couture qui descend avec la progression */
.gestes.is-scene .gestes__fil { display: block; position: absolute; left: calc(var(--margin) + 12px); top: 14vh; bottom: 14vh; width: 1px; background: rgba(242, 236, 226, .1); }
.gestes__fil i { position: absolute; inset: 0 auto auto -1px; width: 3px; height: calc(var(--fil, 0) * 100%);
  background: repeating-linear-gradient(180deg, var(--sauge) 0 7px, transparent 7px 12px); }

/* ---------- 05 Carnet — « Le regard de la Maison » ---------- */
/* le jour revient : le charbon de l'atelier s'ouvre sur la crème du carnet */
.carnet { position: relative; padding-block: clamp(150px, 18vw, 260px) var(--section); overflow: hidden; }
.carnet::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(100px, 16vh, 200px); pointer-events: none;
  background: linear-gradient(180deg, var(--charbon-profond) 0, rgba(18, 17, 16, 0) 100%); }
.carnet__mast { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 26px; align-items: end; margin-bottom: clamp(70px, 10vw, 150px); }
.carnet__mast .eyebrow { grid-column: 1 / -1; }
.carnet__titre { grid-column: 1 / span 8; font: 300 clamp(3.2rem, 8.4vw, 8.8rem)/.9 var(--serif); letter-spacing: -.02em; }
.carnet__sommaire { grid-column: 9 / span 4; border-top: 1px solid var(--rule); padding-top: 16px; }
.carnet__numero { font: 400 italic 1.15rem/1 var(--serif); margin-bottom: 18px; }
.carnet__sommaire ol { display: grid; gap: 8px; font: 500 10.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.carnet__sommaire b { display: inline-block; width: 3.2em; font: 400 italic 1.05rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--sauge-fonce); }

.planches { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(64px, 9vw, 150px); align-items: start; }
.pl__cadre { overflow: hidden; background: #E6DED1; }
.pl__cadre img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0), 0) scale(1.04); will-change: transform; }
.pl figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 16px; font: 500 10.5px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pl figcaption b { font: 400 italic 1.05rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--sauge-fonce); }
.pl--1 { grid-column: 1 / span 7; } .pl--1 .pl__cadre { aspect-ratio: 4 / 5; }
.pl--2 { grid-column: 9 / span 4; margin-top: clamp(120px, 20vw, 300px); } .pl--2 .pl__cadre { aspect-ratio: 4 / 5; }
.pl--3 { grid-column: 1 / -1; } .pl--3 .pl__cadre { aspect-ratio: 21 / 10; } .pl--3 figcaption { justify-content: flex-end; }
.pl-citation { grid-column: 3 / span 8; text-align: center; padding-block: clamp(10px, 3vw, 40px); }
.pl-citation p { font: 300 italic clamp(2rem, 3.8vw, 3.6rem)/1.12 var(--serif); text-wrap: balance; }
.pl-citation cite { display: block; margin-top: 26px; font: 500 10.5px/1 var(--sans); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.pl--4 { grid-column: 1 / span 5; } .pl--4 .pl__cadre { aspect-ratio: 4 / 5; }
.pl--5 { grid-column: 7 / span 6; margin-top: clamp(120px, 22vw, 340px); } .pl--5 .pl__cadre { aspect-ratio: 5 / 4; }
/* révélation unique de chaque planche, dans un sens propre ; la légende arrive après l'image */
.js .pl .pl__cadre { transition: clip-path 1.6s var(--ease); }
.js .pl[data-pl="haut"] .pl__cadre { clip-path: inset(100% 0 0 0); }
.js .pl[data-pl="gauche"] .pl__cadre { clip-path: inset(0 0 0 100%); }
.js .pl[data-pl="droite"] .pl__cadre { clip-path: inset(0 100% 0 0); }
.js .pl[data-pl="centre"] .pl__cadre { clip-path: inset(0 50% 0 50%); transition-duration: 2s; }
.js .pl figcaption { opacity: 0; transition: opacity 1s var(--ease) .7s; }
.js .pl.is-in .pl__cadre { clip-path: inset(0 0 0 0); }
.js .pl.is-in figcaption { opacity: 1; }

/* ---------- 06 Signature — « Le geste juste » ---------- */
.final { position: relative; text-align: center; }
/* la nuit tombe : la crème du carnet s'efface dans le noir de la dernière scène */
.final::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: clamp(120px, 24vh, 280px); pointer-events: none;
  background: linear-gradient(180deg, var(--creme) 0, rgba(242, 236, 226, .3) 35%, rgba(18, 17, 16, 0) 100%); }
.final__scene { position: relative; }
.final__stage { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: grid; align-items: end; }
.final__sac img { position: absolute; inset: auto 0 0 auto; width: min(72vw, 128vh); height: auto; aspect-ratio: 16 / 9;
  /* trois masques combinés : un fondu central et un fondu franc sur chaque bord, pour qu'aucun bord du cadre ne se devine */
  -webkit-mask-image: radial-gradient(ellipse 54% 64% at 62% 58%, #000 40%, transparent 96%),
    linear-gradient(90deg, transparent 0, #000 22%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-image: radial-gradient(ellipse 54% 64% at 62% 58%, #000 40%, transparent 96%),
    linear-gradient(90deg, transparent 0, #000 22%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 88%, transparent 100%);
  mask-composite: intersect;
  opacity: var(--lum, .55); transform: scale(var(--zoom, 1)); transform-origin: 70% 60%; will-change: opacity, transform; }
.final__sac::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--charbon-profond) 26%, rgba(18, 17, 16, .55) 44%, rgba(18, 17, 16, 0) 66%),
  linear-gradient(0deg, rgba(18, 17, 16, .9) 0, rgba(18, 17, 16, 0) 40%); }
.final__titre { position: relative; z-index: 2; padding: 0 var(--margin) clamp(70px, 16vh, 170px); text-align: left; }
.signature { font: 300 clamp(3.6rem, 11.5vw, 12.5rem)/.9 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.signature .sig__mot--em { font-style: italic; }
.sig__l { display: inline-block; opacity: var(--o, 1); transform: translate3d(var(--dx, 0), var(--dy, 0), 0); will-change: transform, opacity; }
.final__filet { display: block; width: min(38vw, 520px); height: 1px; margin: clamp(22px, 3vw, 38px) 0 clamp(18px, 2.4vw, 30px); background: var(--sauge);
  transform-origin: left; transform: scaleX(var(--filet, 1)); }
.final__phrase { font: 300 italic clamp(1.6rem, 2.8vw, 2.6rem)/1 var(--serif); opacity: var(--phrase, 1); transform: translateY(calc((1 - var(--phrase, 1)) * 12px)); }
.final__phrase em { color: var(--sauge); }
/* la scène épinglée : posée par acte-final.js (ordinateur et mobile, mouvement autorisé) */
.final__scene.is-scene { height: 230vh; }
/* scène animée : on part du noir (les valeurs par défaut décrivent l'état final, pour le repli sans JavaScript) */
.final__scene.is-scene { --lum: 0; --filet: 0; --phrase: 0; }
.final__scene.is-scene .sig__l { --o: 0; }
.final__scene.is-scene .final__stage { position: sticky; top: 0; }
.final__inner { display: grid; justify-items: center; gap: 34px; padding-top: clamp(90px, 12vw, 170px); }
#rendez-vous { scroll-margin-top: clamp(-90px, -6vw, -40px); }   /* l'ancre arrive juste au-dessus de l'intitulé, sans le grand blanc */
.final__lead { max-width: 40ch; color: var(--muted); font-size: 1.05rem; }
.final__ctas { display: grid; justify-items: center; gap: 56px; margin-top: 10px; width: 100%; }
.newsletter { width: min(100%, 460px); display: grid; gap: 14px; text-align: left; }
.newsletter label { font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.newsletter div { display: flex; border-bottom: 1px solid var(--rule); }
/* width : sans elle, WebKit garde au champ sa largeur intrinsèque (20 caractères) et le formulaire déborde à 320 px */
.newsletter input { flex: 1; min-width: 0; width: 100%; padding: 14px 0; border: 0; background: none; color: var(--creme); font: 300 1.25rem var(--serif); }
.newsletter input::placeholder { color: rgba(242, 236, 226, .4); }
.newsletter input:focus { outline: none; }
.newsletter div:focus-within { border-color: var(--sauge); }
.newsletter button { border: 0; background: none; color: var(--creme); cursor: pointer; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 0 0 0 18px; }
.newsletter__note { font-size: .75rem; color: var(--muted); }
.newsletter__msg { min-height: 1.4em; font-size: .85rem; color: var(--sauge); }
.footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: var(--section); padding-block: 28px; border-top: 1px solid var(--rule); font-size: .8rem; color: var(--muted); }
.footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Révélations ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* le masque est porté par l'image : la figure garde sa surface et reste détectable au défilement */
.js .reveal-mask[data-reveal] { opacity: 1; transform: none; }
.reveal-mask { overflow: hidden; }
.js .reveal-mask[data-reveal] img { clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path 1.4s var(--ease) var(--d, 0s), transform 1.8s var(--ease) var(--d, 0s); }
.js .reveal-mask[data-reveal].is-in img { clip-path: inset(0 0 0 0); transform: none; }
.js .reveal-mask[data-reveal] figcaption { opacity: 0; transition: opacity 1s var(--ease) calc(var(--d, 0s) + .6s); }
.js .reveal-mask[data-reveal].is-in figcaption { opacity: 1; }
.js .line > span { transform: translateY(105%); transition: transform 1.3s var(--ease) var(--d, 0s); }
.js .is-in .line > span, .js .line.is-in > span { transform: none; }
.js .line + .line > span { transition-delay: calc(var(--d, 0s) + .12s); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .statement { grid-column: 1 / -1; }
  .philo__media { grid-column: 1 / span 6; }
  .principles { grid-column: 7 / -1; }
  .atelier__head .h2, .atelier__lead { grid-column: 1 / -1; }
  .carnet__titre, .carnet__sommaire { grid-column: 1 / -1; }
  .carnet__sommaire { max-width: 460px; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .header { gap: 16px; padding-block: 18px; }
  .header__cta { margin-left: auto; padding: 10px 14px; }
  .wordmark { font-size: 1.1rem; }
  .hero__media { inset: 0 0 auto; height: 64svh; }
  .hero__media img { object-position: 84% 60%; }
  .hero__media::after { background: linear-gradient(0deg, #121110 0%, rgba(18,17,16,.4) 30%, rgba(18,17,16,0) 55%); }
  .hero__content { padding-bottom: 56px; }
  .hero__title { margin: 18px 0 20px; }
  .final .eyebrow { max-width: 30ch; line-height: 1.7; text-wrap: balance; }
  .hero__scroll { display: none; }
  .philo__media, .principles { grid-column: 1 / -1; }
  .collection__layout { grid-template-columns: 1fr; }
  .collection__stage { display: none; }
  .product { min-height: 0; opacity: 1; padding-block: 0 64px; border-top: 0; }
  .product:not(.is-active) :is(.product__name, .product__price, dd) { color: inherit; }   /* mobile : toutes les fiches sont lues pleinement */
  .product:not(.is-active) .product__num { color: #56634F; }
  .product__img { display: block; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; margin-bottom: 28px; }
  .section-head--split { grid-template-columns: 1fr; }
  .footer { flex-direction: column; }
  .geste { grid-template-columns: 1fr; row-gap: 26px; }
  .geste .geste__media, .geste:nth-child(2) .geste__media { grid-column: 1; grid-row: 1; margin-inline: calc(var(--margin) * -1); }
  .geste .geste__body, .geste:nth-child(2) .geste__body { grid-column: 1; grid-row: 2; }
  .geste__mot { font-size: clamp(3rem, 15vw, 4.4rem); margin-bottom: 18px; }
  .planches > * { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .pl--2, .pl--4 { width: 80%; }
  .pl--2 { justify-self: end; }
  .pl--3 .pl__cadre { aspect-ratio: 4 / 3; }
  .pl-citation { text-align: left; }
  .final__sac img { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%; -webkit-mask-image: none; mask-image: none; }
  .final__sac::after { background: linear-gradient(0deg, rgba(18, 17, 16, .95) 0, rgba(18, 17, 16, .6) 38%, rgba(18, 17, 16, 0) 62%); }
  .final__titre { padding-bottom: 12vh; }
  .signature { font-size: clamp(3rem, 15.5vw, 5rem); }
  .final__filet { width: 46vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .reveal-mask[data-reveal], .js .reveal-mask img, .js .line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .pl .pl__cadre, .js .pl figcaption { clip-path: none !important; opacity: 1 !important; }
  .pl__cadre img { transform: none !important; }
  .statement .w { opacity: 1; }
}