/* LM Solution — la pomme d'or
   Sans JavaScript (ou mouvement réduit), la page se lit comme une suite de tableaux.
   Avec .is-motion, les premières scènes deviennent un seul plan continu piloté par le défilement. */

:root {
  --lapis: #1639c4;
  --lapis-deep: #0b1f86;
  --night: #07103f;
  --night-deep: #040922;
  --gold: #d8b25a;
  --gold-light: #f0d897;
  --gold-deep: #8f6d22;
  --ivory: #f2ecdf;
  --ink: #1d1a14;
  --ink-soft: #595144;
  --white: #f7f4ec;
  --white-soft: rgba(247, 244, 236, .8);
  --white-faint: rgba(247, 244, 236, .55);
  --shade: 4, 9, 34;

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Iowan Old Style", "Times New Roman", serif;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --curtain-ease: cubic-bezier(.76, 0, .24, 1);
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --p: 0;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--night-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--night-deep);
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .35vw, 1.35rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}

h1, h2, h3, p, figure, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
em, i { font-style: italic; }
::selection { background: var(--gold); color: var(--night-deep); }
:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 4px; }

.gold { color: var(--gold-light); }
.label {
  margin-bottom: .9rem;
  font-size: clamp(1.05rem, .95rem + .3vw, 1.3rem);
  font-style: italic;
  color: var(--gold-light);
}
.label--ink { color: var(--gold-deep); }
.caption {
  font-size: .95rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--white-faint);
}
.mask { display: block; }

/* ---------- Calques fixes ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .06;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Le rideau d'ouverture : une pomme d'or se dessine pendant que le film se charge. */
.curtain { display: none; }
.is-loading .curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.3rem;
  background: var(--night-deep);
}
.curtain--open { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--curtain-ease) .15s; }
.curtain__apple { width: 78px; height: 86px; overflow: visible; }
.curtain__apple path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--load, 0));
  transition: stroke-dashoffset .7s var(--ease);
}
.curtain__name {
  font-size: 1.35rem;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--gold-light);
  opacity: calc(var(--load, 0) * .9);
}

/* Le curseur doré, seulement avec une souris. */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 90; pointer-events: none; mix-blend-mode: difference; }
.cursor__ring, .cursor__dot { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(255, 244, 214, .85);
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .45s var(--ease);
}
.cursor__dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #fff4d6; }
.cursor--hover .cursor__ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(255, 244, 214, .12); }
.cursor--hidden .cursor__ring, .cursor--hidden .cursor__dot { opacity: 0; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  gap: 2.2rem;
  padding: 1.5rem var(--gutter) 1.2rem;
  color: var(--white);
  transition: color .5s var(--ease);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -1.5rem;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade), .72), rgba(var(--shade), 0));
  opacity: 0;
  transition: opacity .5s var(--ease), background .5s var(--ease);
  pointer-events: none;
}
.nav--scrolled::before { opacity: 1; }
.nav--dark { color: var(--ink); }
.nav--dark::before { background: linear-gradient(180deg, rgba(242, 236, 223, .95) 60%, rgba(242, 236, 223, 0)); }
.nav__brand {
  margin-right: auto;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
}
.nav__links { display: flex; gap: 1.8rem; }
.nav__links a, .nav__write {
  position: relative;
  font-size: 1.08rem;
  font-style: italic;
  text-decoration: none;
  opacity: .82;
  transition: opacity .3s;
}
.nav__links a::after, .nav__write::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease);
}
.nav__links a:hover, .nav__links a.is-current, .nav__write:hover { opacity: 1; }
.nav__links a:hover::after, .nav__links a.is-current::after, .nav__write:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__write { display: inline-block; opacity: 1; color: var(--gold-light); }
.nav--dark .nav__write { color: var(--gold-deep); }
.magnetic { transition: transform .5s var(--ease); }

/* ---------- Le voyage (lecture sans mouvement : une suite de tableaux) ---------- */

.voyage { position: relative; }
.voyage__stage { position: relative; }
.voyage__film, .dust { display: none; }
.chapter {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 18vh var(--gutter) 10vh;
  overflow: hidden;
}
.chapter__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chapter > :not(.chapter__still) { position: relative; }
.veil { position: absolute !important; inset: 0; pointer-events: none; }
html:not(.is-motion) .veil {
  background: linear-gradient(to top, rgba(var(--shade), .94) 0%, rgba(var(--shade), .72) 48%, rgba(var(--shade), .2) 100%);
}
.beat + .beat { margin-top: 3rem; }

/* ---------- Le voyage, en film ---------- */

.is-motion .voyage__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--night-deep);
}
.voyage__burst { display: none; }
.is-motion .voyage__burst { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.is-motion .voyage__film, .is-motion .dust {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.is-motion .chapter {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.is-motion .chapter__still { display: none; }
.is-motion .chapter > :not(.chapter__still):not(.veil) { position: absolute; }
.is-motion .chapter .on a { pointer-events: auto; }
.is-motion .beat { transition: opacity .9s var(--ease); opacity: 0; }
.is-motion .beat.on { opacity: 1; }
.is-motion .beat + .beat { position: absolute; left: 0; right: 0; top: 0; margin: 0; }
.is-motion .veil { opacity: 0; transition: opacity 1.1s var(--ease); }
.is-motion .veil.on { opacity: 1; }
.voyage__mark { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* Apparitions : .rise glisse et s'éclaire, .mask monte ligne par ligne, [data-letters] lettre par lettre. */
.is-motion .rise {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.is-motion .rise.on { opacity: 1; transform: none; }
.is-motion .mask { overflow: hidden; padding-bottom: .1em; }
.is-motion .mask > span {
  display: inline-block;
  transform: translate3d(0, 112%, 0);
  transition: transform 1.25s var(--ease);
}
.is-motion .mask.on > span { transform: none; }
.is-motion [data-letters] .ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .42em, 0) rotate(5deg);
  transform-origin: 0 100%;
  transition: opacity .9s var(--ease), transform 1.3s var(--ease);
  transition-delay: calc(var(--i) * 42ms);
}
.is-motion [data-letters].on .ch { opacity: 1; transform: none; }

/* Voiles : ils assombrissent juste ce qu'il faut derrière les mots. */
.veil--hero {
  background:
    linear-gradient(to bottom, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 18%),
    linear-gradient(to top, rgba(var(--shade), .82) 0%, rgba(var(--shade), .36) 30%, rgba(var(--shade), 0) 56%),
    linear-gradient(to right, rgba(var(--shade), .42) 0%, rgba(var(--shade), 0) 48%);
}
.veil--right {
  background:
    linear-gradient(to bottom, rgba(var(--shade), .5) 0%, rgba(var(--shade), 0) 16%),
    linear-gradient(to left, rgba(var(--shade), .86) 0%, rgba(var(--shade), .6) 30%, rgba(var(--shade), 0) 58%);
}
.veil--left {
  background:
    linear-gradient(to bottom, rgba(var(--shade), .45) 0%, rgba(var(--shade), 0) 16%),
    linear-gradient(to right, rgba(var(--shade), .7) 0%, rgba(var(--shade), .35) 38%, rgba(var(--shade), 0) 60%);
}
.veil--bottom {
  background:
    linear-gradient(to bottom, rgba(var(--shade), .5) 0%, rgba(var(--shade), 0) 18%),
    linear-gradient(to top, rgba(var(--shade), .95) 0%, rgba(var(--shade), .76) 34%, rgba(var(--shade), .28) 64%, rgba(var(--shade), .06) 100%);
}
.veil--contact {
  background:
    radial-gradient(ellipse 58% 30% at 50% 62%, rgba(var(--shade), .5), rgba(var(--shade), 0) 75%),
    linear-gradient(to bottom, rgba(var(--shade), .35), rgba(var(--shade), 0) 22%),
    linear-gradient(to top, rgba(var(--shade), .92) 0%, rgba(var(--shade), .6) calc(var(--footer-h, 9rem) * 1.1), rgba(var(--shade), 0) calc(var(--footer-h, 9rem) * 2.4));
}

/* ---------- Ouverture ---------- */

.hero__text { max-width: min(66vw, 1040px); }
.is-motion .hero__text { left: var(--gutter); bottom: 10vh; }
.hero__kicker {
  font-size: clamp(1.2rem, 1rem + .45vw, 1.5rem);
  font-style: italic;
  color: var(--gold-light);
}
.hero__title {
  margin: .04em 0 .14em -.045em;
  font-size: clamp(4.6rem, 12vw, 14.5rem);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.025em;
}
.hero__sub {
  max-width: 30ch;
  font-size: clamp(1.3rem, 1rem + .9vw, 1.9rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
  color: var(--white-soft);
}

/* ---------- La maison ---------- */

.maison__words { max-width: 640px; }
.is-motion .maison__words { left: var(--gutter); top: 14vh; width: min(34vw, 560px); }
.maison__xl {
  font-size: clamp(2.3rem, 1rem + 3.1vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
}
.maison__xl em { color: var(--gold-light); }
.maison__body {
  max-width: 34ch;
  margin-top: 1.6rem;
  font-size: clamp(1.2rem, 1rem + .5vw, 1.55rem);
  line-height: 1.42;
  color: var(--white-soft);
}
.maison__history {
  margin-top: 1.6rem;
  padding-left: 1.3rem;
  border-left: 1px solid var(--gold);
}
.maison__history li {
  font-size: clamp(1.3rem, 1.05rem + .85vw, 2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
}
.maison__answer {
  margin-top: 1.5rem;
  font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.5rem);
  font-weight: 300;
  line-height: 1.15;
}
.maison__answer em { color: var(--gold-light); }

/* ---------- Nos racines ---------- */

.racines__words { max-width: 640px; }
.is-motion .racines__words { right: var(--gutter); bottom: 13vh; width: min(40vw, 640px); }
.racines__title {
  font-size: clamp(2.6rem, 1.3rem + 3.4vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
}
.racines__title em { color: var(--gold-light); }
.racines__text {
  max-width: 36ch;
  margin-top: 1.5rem;
  font-size: clamp(1.2rem, 1rem + .55vw, 1.6rem);
  line-height: 1.45;
  color: var(--white-soft);
}
.racines__text--strong { margin-top: 1.1rem; font-style: italic; color: var(--white); }
.racines__caption { margin-top: 2rem; }
.is-motion .racines__caption { left: var(--gutter); bottom: 4.5vh; margin: 0; }

/* ---------- Notre vision ---------- */

.vision__words { max-width: 1100px; }
.is-motion .vision__words { left: var(--gutter); right: var(--gutter); bottom: 11vh; }
.is-motion .vision__words .beat + .beat { top: auto; bottom: 0; }
.vision__line, .vision__after {
  max-width: 36ch;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.4rem);
  font-weight: 300;
  line-height: 1.25;
  text-shadow: 0 2px 28px rgba(var(--shade), .65);
}
.vision__big {
  max-width: 22ch;
  margin-top: 1rem;
  font-size: clamp(2.6rem, 1.3rem + 4.2vw, 6.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold-light);
  text-shadow: 0 2px 28px rgba(var(--shade), .65);
}
.vision__big em { display: block; color: var(--white); }
.vision__big > em:only-child { color: inherit; }
.beat .label + .vision__big { margin-top: 0; }
.vision__after { margin-top: 1rem; font-style: italic; color: var(--white-soft); }

/* ---------- Demain, l'atelier, l'ambition ---------- */

.demain__words, .ambition__words, .atelier__words { max-width: 640px; }
.is-motion .demain__words, .is-motion .ambition__words { left: var(--gutter); top: 50%; width: min(42vw, 660px); transform: translateY(-50%); }
.is-motion .atelier__words { left: var(--gutter); top: 16vh; width: min(46vw, 720px); }
.demain__title, .ambition__title, .atelier__title {
  font-size: clamp(2.8rem, 1.4rem + 4.2vw, 6.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
}
.demain__title em, .ambition__title em, .atelier__title em { color: var(--gold-light); }
.demain__text {
  max-width: 32ch;
  margin-top: 1.6rem;
  font-size: clamp(1.25rem, 1rem + .6vw, 1.7rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--white-soft);
}

/* ---------- Le fondateur ---------- */

.fondateur__words { max-width: 720px; }
.is-motion .fondateur__words { left: var(--gutter); top: 50%; width: min(46vw, 720px); transform: translateY(-50%); }
.fondateur__quote {
  font-size: clamp(2.4rem, 1.2rem + 3.4vw, 5.2rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.fondateur__quote em { color: var(--gold-light); }
.fondateur__text {
  max-width: 34ch;
  margin-top: 1.6rem;
  font-size: clamp(1.25rem, 1rem + .6vw, 1.7rem);
  line-height: 1.4;
  color: var(--white-soft);
}
.fondateur__sign { margin-top: 1.6rem; font-size: 1.2rem; color: var(--white); }
.fondateur__sign em { color: var(--gold-light); }

/* ---------- Le verger ---------- */

.products { position: relative; }
.products__stage { overflow-x: auto; background: radial-gradient(ellipse 70% 60% at 20% 30%, rgba(22, 57, 196, .24), transparent 70%), var(--night-deep); }
.products__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4.5rem);
  width: max-content;
  padding: 16vh var(--gutter);
}
.is-motion .products { height: 460vh; }
.is-motion .products__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-motion .products__track { height: 100%; padding: 14vh var(--gutter) 8vh; will-change: transform; }
.products__intro { flex: 0 0 min(34vw, 540px); align-self: center; }
.products__title span { display: block; }
.products__title {
  font-size: clamp(3rem, 1.4rem + 4.4vw, 6.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--gold-light);
}
.products__lead {
  max-width: 26ch;
  margin-top: 1.4rem;
  font-size: clamp(1.25rem, 1rem + .6vw, 1.65rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--white-soft);
}

.card {
  flex: 0 0 min(25vw, 400px, 44vh);
  display: grid;
  gap: .5rem;
}
.card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(216, 178, 90, .35);
  background: var(--night);
  margin-bottom: .6rem;
}
.card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1) translate3d(var(--shift, 0%), 0, 0);
  transition: transform 1.2s var(--ease);
}
/* Au survol, un reflet d'or traverse la toile. */
.card__art::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 226, 160, .28) 50%, transparent 62%);
  transform: translate3d(-70%, 0, 0);
  transition: transform 1.3s var(--ease);
  pointer-events: none;
}
.card:hover .card__art img { transform: scale(1.16) translate3d(var(--shift, 0%), 0, 0); }
.card:hover .card__art::after { transform: translate3d(70%, 0, 0); }
.card__where { font-size: .98rem; font-style: italic; color: var(--gold-light); }
.card__name {
  font-size: clamp(2.1rem, 1.4rem + 1.7vw, 3.3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
}
.card__title { font-size: 1.25rem; font-style: italic; line-height: 1.3; }
.card__text { font-size: 1.04rem; line-height: 1.45; color: var(--white-soft); }
.card__soon {
  margin-top: .3rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(216, 178, 90, .3);
  font-size: .98rem;
  font-style: italic;
  color: var(--white-faint);
}
.card--teaser { padding-left: 2rem; border-left: 1px solid rgba(216, 178, 90, .45); }
.teaser__title {
  margin-bottom: .6rem;
  font-size: clamp(2rem, 1.3rem + 1.8vw, 3.2rem);
  font-weight: 300;
  line-height: 1.05;
}
.teaser__title em { color: var(--gold-light); }

/* ---------- Sur mesure ---------- */

.bespoke { position: relative; background: var(--night-deep); }
.bespoke__body { max-width: 1400px; margin: 0 auto; padding: 16vh var(--gutter) 18vh; }
.bespoke__intro {
  max-width: 40ch;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 2.2rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--white-soft);
}
.offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  margin-top: 9vh;
}
.offer { padding-top: 1.3rem; border-top: 1px solid rgba(216, 178, 90, .45); }
.offer__name { font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.8rem); font-weight: 400; line-height: 1.05; }
.offer p { margin-top: .8rem; color: var(--white-soft); line-height: 1.5; }
.craft { margin-top: 12vh; }
/* Les étapes, reliées par un fil d'or plutôt que numérotées. */
.craft__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 1.4rem 0 0;
  padding: 2.4rem 0 0;
  list-style: none;
}
.craft__steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(216, 178, 90, .12));
}
.craft__steps li { position: relative; }
.craft__steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-2.4rem - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 18px rgba(240, 216, 151, .6);
}
.craft__steps h4 { margin: 0; font-size: 1.6rem; font-weight: 400; font-style: italic; color: var(--gold-light); }
.craft__steps p { margin-top: .5rem; color: var(--white-soft); line-height: 1.5; }
.bespoke__cta { margin-top: 10vh; text-align: center; }

/* ---------- Nos valeurs ---------- */

.method {
  position: relative;
  z-index: 1;
  padding: 20vh var(--gutter) 18vh;
  background: var(--ivory);
  color: var(--ink);
}
.method__head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 6vw;
  align-items: end;
  max-width: 1400px;
  margin: 0 auto;
}
.method__title {
  font-size: clamp(2.8rem, 1.5rem + 4vw, 6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.method__title mark {
  padding: 0 .06em;
  color: inherit;
  background: linear-gradient(transparent 56%, rgba(216, 178, 90, .6) 56%, rgba(216, 178, 90, .6) 90%, transparent 90%) no-repeat;
  background-size: 100% 100%;
}
.is-motion .method__title mark { background-size: 0% 100%; transition: background-size 1.4s var(--ease) .5s; }
.is-motion .method__title.in mark { background-size: 100% 100%; }
.method__body {
  max-width: 40ch;
  font-size: clamp(1.2rem, 1rem + .5vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem 3.4rem;
  max-width: 1400px;
  margin: 12vh auto 0;
}
.principles > div { padding-top: 1.4rem; border-top: 1px solid rgba(143, 109, 34, .5); }
.principles h3 { font-size: clamp(1.6rem, 1.2rem + .9vw, 2.3rem); font-weight: 400; font-style: italic; line-height: 1.1; }
.principles p { margin-top: .7rem; color: var(--ink-soft); line-height: 1.5; }

.is-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
}
.is-motion [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Contact ---------- */

.contact__text { text-align: center; }
.is-motion .contact__text { left: var(--gutter); right: var(--gutter); bottom: calc(var(--footer-h, 9rem) + 6vh); }
.contact__title {
  font-size: clamp(3rem, 1.6rem + 5vw, 7.4rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.contact__title em { color: var(--gold-light); }
.contact__lead {
  margin-top: 1.1rem;
  font-size: clamp(1.25rem, 1rem + .5vw, 1.6rem);
  font-style: italic;
  color: var(--white-soft);
}
.button {
  display: inline-block;
  margin-top: 2.2rem;
  padding: .95rem 2.8rem 1.05rem;
  border: 1px solid var(--gold);
  font-size: 1.3rem;
  font-style: italic;
  text-decoration: none;
  color: var(--gold-light);
  background: rgba(var(--shade), .35);
  transition: background-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.button:hover { background: var(--gold); color: var(--night-deep); }

/* ---------- Pied de page, posé sur le dernier tableau ---------- */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding: 4.5vh var(--gutter) calc(4.5vh + env(safe-area-inset-bottom));
  color: var(--white-soft);
  font-size: 1.02rem;
  background: var(--night-deep);
}
.is-motion .footer { margin-top: calc(-1 * var(--footer-h, 9rem)); background: none; }
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: rgba(216, 178, 90, .3);
}
.footer__name { font-size: 2.2rem; font-weight: 400; color: var(--white); line-height: 1; margin-bottom: .6rem; }
.footer__meta { display: grid; gap: .3rem; align-content: end; font-size: .95rem; font-style: italic; color: var(--white-faint); text-align: right; }

/* ---------- Tablette et mobile ---------- */

@media (max-width: 1100px) {
  .nav__links { display: none; }
}

@media (max-width: 900px) {
  .nav { gap: 1rem; padding-block: 1.1rem 1rem; }

  .hero__title { font-size: clamp(3.8rem, 19vw, 7rem); }
  .is-motion .hero__text { right: var(--gutter); bottom: 8vh; max-width: none; }

  .is-motion .maison__words,
  .is-motion .racines__words,
  .is-motion .fondateur__words,
  .is-motion .demain__words,
  .is-motion .ambition__words,
  .is-motion .atelier__words { left: var(--gutter); right: var(--gutter); top: auto; bottom: 8vh; width: auto; transform: none; }
  .demain__title, .ambition__title, .atelier__title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .is-motion .maison__words .beat + .beat { top: auto; bottom: 0; }
  .maison__xl { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .maison__body { margin-top: 1rem; }
  .maison__history { margin-top: 1rem; }
  .maison__answer { margin-top: 1rem; }
  .racines__title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .racines__text { margin-top: 1rem; }
  .is-motion .racines__caption { left: auto; right: var(--gutter); top: 12vh; bottom: auto; }
  .fondateur__quote { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .is-motion .vision__words { bottom: 8vh; }

  .veil--right, .veil--left {
    background:
      linear-gradient(to bottom, rgba(var(--shade), .5) 0%, rgba(var(--shade), 0) 16%),
      linear-gradient(to top, rgba(var(--shade), .94) 0%, rgba(var(--shade), .72) 42%, rgba(var(--shade), 0) 72%);
  }

  .offers { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; margin-top: 6vh; }
  .craft__steps { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 0 0 0 1.8rem; }
  .craft__steps::before { right: auto; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--gold), rgba(216, 178, 90, .12)); }
  .craft__steps li::before { left: calc(-1.8rem - 4px); top: .75rem; }

  .is-motion .products { height: 560vh; }
  .products__intro { flex-basis: 84vw; }
  .card { flex-basis: min(74vw, 46vh); }

  .method { padding-top: 14vh; }
  .method__head { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .principles { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; margin-top: 8vh; }

  .footer { flex-direction: column; gap: .8rem; padding-block: 3.5vh calc(3.5vh + env(safe-area-inset-bottom)); }
  .footer__name { font-size: 1.9rem; margin-bottom: .3rem; }
  .footer__meta { display: block; text-align: left; }
  .footer__meta p { display: inline; }
  .footer__meta p + p::before { content: " · "; }
}

/* ---------- Page introuvable ---------- */

.lost {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .6rem;
  min-height: 100vh;
  min-height: 100svh;
  padding: 10vh var(--gutter);
  text-align: center;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(22, 57, 196, .35), transparent 70%), var(--night-deep);
}
.lost__apple { width: 72px; height: 80px; margin-bottom: 1.4rem; }
.lost__apple path { fill: none; stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.lost__title {
  max-width: 16ch;
  font-size: clamp(2.6rem, 1.4rem + 4vw, 5.6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.lost__title em { color: var(--gold-light); }

/* ---------- Mentions légales ---------- */

.legal { max-width: 760px; margin: 0 auto; padding: 22vh var(--gutter) 14vh; }
.legal__title {
  margin-bottom: 3rem;
  font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
}
.legal section { padding-top: 1.6rem; margin-top: 2.4rem; border-top: 1px solid rgba(216, 178, 90, .3); }
.legal h2 { margin: 0 0 .8rem; font-size: 1.7rem; font-weight: 400; font-style: italic; color: var(--gold-light); }
.legal p { color: var(--white-soft); line-height: 1.6; }
.legal p + p { margin-top: .7rem; }
.legal a { color: var(--gold-light); }
.todo { padding: 0 .3em; border: 1px dashed rgba(240, 216, 151, .6); color: var(--gold-light); font-style: italic; }
.footer--plain { background: var(--night-deep); margin-top: 0; }
.footer__meta a { color: inherit; }
.legal__notice {
  padding: 1.6rem 1.8rem !important;
  border: 1px solid rgba(216, 178, 90, .45) !important;
  background: rgba(216, 178, 90, .06);
}
.legal__notice h2 { margin-top: 0; }