/* =============================================
   Influence Paysage — site vitrine
   Paysagiste, Mougins · Côte d'Azur
   Esthétique : minimalisme éditorial, vert profond
   ============================================= */

:root {
  /* Neutres */
  --color-bg:           #F7F5EE;          /* lin chaud, off-white */
  --color-bg-alt:       #EFEBE0;          /* sable doux pour blocs alternés */
  --color-ink:          #1B1815;          /* anthracite chaud, presque noir */
  --color-ink-soft:     #3F3A33;          /* taupe foncé pour body */
  --color-muted:        #807A6F;          /* meta, captions */
  --color-line:         #DFDACB;          /* lignes fines */

  /* Accents — palette terre & soleil, pas de vert */
  --color-ink-deep:     #1B1815;          /* anthracite chaud, mêmes tons que ink */
  --color-accent:       #8A6F55;          /* terre cuite profonde, accent principal */
  --color-sand:         #D9D3C2;
  --color-clay:         #B89B7E;
  --color-gold:         #C9A86A;          /* étoiles, accents ponctuels */

  /* Overlays */
  --overlay-dark:       rgba(27, 24, 21, 0.42);

  /* Typo */
  --font-display:       'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:          'Manrope', 'Söhne', system-ui, sans-serif;
  --font-mono:          'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Spacing */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;
  --space-32: 16rem;

  /* Layout */
  --container:          1440px;
  --gutter:             clamp(1.5rem, 5vw, 4rem);

  /* Easing */
  --ease-quart:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quint:         cubic-bezier(0.22, 1, 0.36, 1);
}

::selection {
  background: var(--color-ink-deep);
  color: var(--color-bg);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

strong { font-weight: 500; color: var(--color-ink); }

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* =============================================
   REVEAL on scroll
   ============================================= */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-quart),
    transform 0.9s var(--ease-quart);
}

.reveal--in {
  opacity: 1;
  transform: translateY(0);
}

.step.reveal { transition-delay: var(--reveal-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================
   NAVIGATION
   ============================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-3) 0;
  transition: background 0.4s var(--ease-quart),
              color 0.4s var(--ease-quart),
              backdrop-filter 0.4s var(--ease-quart);
  color: var(--color-bg);
}

.nav--solid {
  background: rgba(247, 245, 238, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-line);
}

.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.nav__logo-mark {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  padding: 0.3rem 0.5rem;
  border: 1px solid currentColor;
}

.nav__logo-word {
  font-style: italic;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav__links a {
  position: relative;
  padding: 0.5rem 0;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease-quart);
}

.nav__links a:hover::after { width: 100%; }

.nav__cta {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: background 0.4s var(--ease-quart),
              color 0.4s var(--ease-quart),
              border-color 0.4s var(--ease-quart);
}
.nav__cta::after { display: none !important; }

/* Desktop : CTA externe visible, version mobile (dans le <ul>) cachée */
.nav__cta-mobile-wrap { display: none; }
.nav__cta--desktop    { display: inline-block; }

/* Transparent nav (over hero) — light text/border → fill with cream, ink on top */
.nav__cta:hover {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-bg);
}

/* Scrolled nav (solid) — ink text/border → fill with ink, cream on top */
.nav--solid .nav__cta:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
}

.nav__burger {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.nav__burger span {
  display: block;
  height: 1px;
  background: currentColor;
}

/* =============================================
   HERO
   ============================================= */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  width: 100%;
  overflow: hidden;
  color: var(--color-bg);
  display: flex;
  align-items: flex-end;
  --hero-parallax-y: 0px;
}

.hero__media { position: absolute; inset: 0; }

.hero__img,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transform: translate3d(0, var(--hero-parallax-y), 0) scale(1.12);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero { --hero-parallax-y: 0px !important; }
  .hero__img,
  .hero__video { transform: scale(1.03); }
}

.hero__video {
  display: block;
  background: #0F120E;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(27,24,21,0.15) 0%,
      rgba(27,24,21,0.42) 55%,
      rgba(27,24,21,0.72) 100%);
}

.hero__content {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-12);
  width: 100%;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
  opacity: 0.9;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.hero__title span { display: block; }
.hero__title-em { margin-left: clamp(2rem, 9vw, 7rem); }
.hero__title-em em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-clay);
}

.hero__lead {
  margin: var(--space-4) 0 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(247, 245, 238, 0.84);
}

/* Bottom row of the hero — meta on left, phone CTA on right */
.hero__bottom {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero__rating-stars {
  color: var(--color-gold);
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.hero__meta-sep {
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: 0.4;
}

/* Bouton téléphone hero — click-to-call */
.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.5rem;
  margin-left: auto;
  border: 1px solid currentColor;
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.45s var(--ease-quart),
              color 0.45s var(--ease-quart),
              border-color 0.45s var(--ease-quart);
}

.hero__phone:hover {
  background: var(--color-bg);
  color: var(--color-ink);
  border-color: var(--color-bg);
}

.hero__phone-icon {
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-quart);
}

.hero__phone:hover .hero__phone-icon { transform: rotate(-12deg); }

.hero__phone-num { font-weight: 500; }

.hero__phone-label {
  position: relative;
  padding-left: 0.85rem;
  opacity: 0.65;
}

.hero__phone-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 0.95em;
  background: currentColor;
  opacity: 0.5;
  transform: translateY(-50%);
}

.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-bg);
}

.hero__cue-line {
  display: block;
  width: 1px;
  height: 56px;
  background: currentColor;
  animation: cue 2.4s var(--ease-quart) infinite;
  transform-origin: top;
}

@keyframes cue {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =============================================
   SECTION SHARED
   ============================================= */

.section {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--gutter);
}

.section__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  margin-bottom: var(--space-8);
  text-transform: uppercase;
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.section__head {
  margin-bottom: var(--space-8);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: end;
}

.section__intro {
  margin: 0;
  max-width: 42ch;
  color: var(--color-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* =============================================
   MANIFESTE
   ============================================= */

.manifeste__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.manifeste__col-text { grid-column: 1 / span 6; }

.manifeste__col-image {
  grid-column: 8 / span 5;
  margin: var(--space-8) 0 0;
}

.manifeste__col-image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.manifeste__col-image figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.manifeste__lead {
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 28ch;
}

.manifeste__body {
  margin: 0 0 var(--space-3);
  max-width: 56ch;
  color: var(--color-ink-soft);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  color: var(--color-ink);
  transition: gap 0.4s var(--ease-quart);
}

.link:hover { gap: 1.25rem; }
.link__arrow { transition: transform 0.4s var(--ease-quart); }

/* =============================================
   MANIFESTE — chorégraphie typographique
   ============================================= */

/* La section gère ses propres révélations : on neutralise le fade global */
.manifeste.reveal { opacity: 1; transform: none; }

/* Titre : chaque ligne monte sous un masque */
.manifeste .section__title {
  overflow: hidden;
  padding-bottom: 0.2em;
}
.manifeste__title-line {
  display: block;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 1s var(--ease-quart),
    opacity 1s var(--ease-quart);
  will-change: transform;
}
.manifeste.reveal--in .manifeste__title-line {
  transform: translateY(0);
  opacity: 1;
}
.manifeste.reveal--in .manifeste__title-line:nth-child(1) { transition-delay: 0.05s; }
.manifeste.reveal--in .manifeste__title-line:nth-child(2) { transition-delay: 0.18s; }
.manifeste.reveal--in .manifeste__title-line:nth-child(3) { transition-delay: 0.31s; }

/* "lieu" : em italique + soulignement SVG dessiné (cohérent avec .conception) */
.manifeste .section__title em {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--color-ink-soft);
  letter-spacing: -0.015em;
}
.manifeste .title-underline {
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.08em;
  width: calc(100% + 0.08em);
  height: 0.32em;
  overflow: visible;
  stroke: var(--color-accent);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.4s var(--ease-quart) 1.05s;
  pointer-events: none;
}
.manifeste.reveal--in .title-underline { stroke-dashoffset: 0; }

/* Lead : mot par mot, blur qui se dissipe */
.manifeste__lead .word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(6px);
  transition:
    opacity 0.85s var(--ease-quart),
    filter 0.85s var(--ease-quart),
    transform 0.85s var(--ease-quart);
  transition-delay: calc(0.55s + var(--word-i, 0) * 0.035s);
  will-change: filter, opacity, transform;
}
.manifeste.reveal--in .manifeste__lead .word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Corps : fade staggered après le lead */
.manifeste__body {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease-quart),
    transform 0.9s var(--ease-quart);
}
.manifeste.reveal--in .manifeste__body { opacity: 1; transform: translateY(0); }
.manifeste.reveal--in .manifeste__body:nth-of-type(2) { transition-delay: 1.55s; }
.manifeste.reveal--in .manifeste__body:nth-of-type(3) { transition-delay: 1.70s; }

/* Lien "Notre méthode" : entre en dernier dans la colonne texte */
.manifeste__col-text .link {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.7s var(--ease-quart) 1.95s,
    transform 0.7s var(--ease-quart) 1.95s,
    gap 0.4s var(--ease-quart);
}
.manifeste.reveal--in .manifeste__col-text .link {
  opacity: 1;
  transform: translateY(0);
}

/* Image : rideau bottom→top via clip-path + scale qui se résorbe */
.manifeste__col-image { overflow: hidden; }
.manifeste__col-image img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.06);
  transform-origin: 50% 60%;
  transition:
    clip-path 1.6s var(--ease-quart) 0.4s,
    transform 1.8s var(--ease-quart) 0.4s;
  will-change: clip-path, transform;
}
.manifeste.reveal--in .manifeste__col-image img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* Caption : ferme la séquence */
.manifeste__col-image figcaption {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.7s var(--ease-quart) 1.85s,
    transform 0.7s var(--ease-quart) 1.85s;
}
.manifeste.reveal--in .manifeste__col-image figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : tout désactivé si l'utilisateur préfère moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .manifeste__title-line,
  .manifeste__lead .word,
  .manifeste__body,
  .manifeste__col-text .link,
  .manifeste__col-image img,
  .manifeste__col-image figcaption {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .manifeste .title-underline {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* =============================================
   MÉTHODE — volets éditoriaux pleine largeur
   3 panneaux ; hover ouvre le sélectionné, les
   autres se rétractent et fade. Titre + texte
   révélés en bas-droite, le titre déborde à
   gauche au hover (effet éditorial).
   ============================================= */

.methode {
  position: relative;
  background: var(--color-bg-alt);
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Pas d'animation d'entrée : la section est déjà en place quand elle apparaît.
   On neutralise uniquement opacity/transform (pas la transition globale, sinon
   le hover entre volets — basé sur flex-grow — devient hard-cut). */
.methode.reveal,
.methode .step.reveal {
  opacity: 1;
  transform: none;
}
.methode.reveal {
  transition: none;
}

/* Fondu haut : adoucit la rupture avec la section précédente */
.methode::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(80px, 14vh, 180px);
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-bg-alt),
    rgba(239, 235, 224, 0.85) 25%,
    rgba(239, 235, 224, 0.5) 55%,
    transparent
  );
}

/* En-tête sr-only : conservé pour SEO / lecteurs d'écran */
.methode__head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.methode__steps {
  display: flex;
  width: 100%;
  height: 88vh;
  min-height: 620px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  cursor: pointer;
  transition: flex-grow 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.methode__steps:hover .step,
.methode__steps:focus-within .step {
  flex-grow: 0.7;
}

.methode__steps:hover .step:hover,
.methode__steps:focus-within .step:focus-within {
  flex-grow: 2.2;
  z-index: 5;
  transition: flex-grow 0.95s cubic-bezier(0.55, 0, 0.78, 0.36);
}

.step__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--color-ink-deep);
}

.step__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform, opacity, filter;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.2s var(--ease-quart),
              filter 1.2s var(--ease-quart);
}

.step:hover .step__visual img,
.step:focus-within .step__visual img {
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(0.55, 0, 0.78, 0.36);
}

/* Volets non sélectionnés : image en retrait derrière */
.methode__steps:hover .step:not(:hover) .step__visual img,
.methode__steps:focus-within .step:not(:focus-within) .step__visual img {
  opacity: 0.42;
  filter: brightness(0.72) saturate(0.85);
}

.step__tag { display: none; }

/* Body en flex-end : chaque enfant prend sa largeur intrinsèque et s'ancre
   à droite. Indispensable pour que le titre nowrap > body déborde à GAUCHE
   (text-align: right est ignoré par Chromium sur du nowrap overflow). */
.step__body {
  position: absolute;
  right: clamp(1.5rem, 2vw, 2.5rem);
  bottom: clamp(1.5rem, 2.5vw, 3rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: clamp(18ch, 22vw, 30ch);
  text-align: right;
  color: var(--color-bg);
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--ease-quart),
              visibility 0s linear 0s;
}

/* Volets non sélectionnés : body totalement retiré (évite le débordement
   du titre nowrap hors d'un volet compressé) */
.methode__steps:hover .step:not(:hover) .step__body,
.methode__steps:focus-within .step:not(:focus-within) .step__body {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-quart),
              visibility 0s linear 0.45s;
}

.step__num {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(247, 245, 238, 0.7);
  mix-blend-mode: difference;
}

.step__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--color-bg);
  mix-blend-mode: difference;
  transition: font-size 1s cubic-bezier(0.16, 1, 0.3, 1),
              letter-spacing 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover : titre éditorial XXL, débordement à gauche grâce au flex-end body */
.step:hover .step__title,
.step:focus-within .step__title {
  font-size: clamp(4rem, 7.5vw, 7.5rem);
  letter-spacing: -0.028em;
  transition: font-size 1s cubic-bezier(0.55, 0, 0.78, 0.36),
              letter-spacing 1s cubic-bezier(0.55, 0, 0.78, 0.36);
}

.step__text {
  margin: 0;
  max-width: 44ch;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(247, 245, 238, 0.92);
  mix-blend-mode: difference;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-quart),
              transform 0.65s var(--ease-quart);
}

.step:hover .step__text,
.step:focus-within .step__text {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s var(--ease-quart) 0.22s,
              transform 0.7s var(--ease-quart) 0.22s;
}

/* =============================================
   CONCEPTION 3D — pinned scene, scroll-scrubbed video,
   monumental italic numerals (01 / 02 / 03).

   Section height ~360vh, .conception__pin sticky 100vh.
   JS pilote :
     --concep-progress (0→1) sur la section
     transform / opacity / filter inline sur les numéros et phases
     data-active="0|1|2" sur .conception__stage
   ============================================= */

.section.conception[data-scroll-section="conception"] {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 360vh;
  background: var(--color-ink);
  color: var(--color-bg);
  isolation: isolate;
  overflow: clip;
}

/* Opt-out du fade-in global .reveal : sinon la section fade depuis le cream
   du body et crée un flash "cream → noir" pendant 0.9s à l'entrée. */
.section.conception.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.conception__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}

/* ---------- Background video ---------- */
.conception__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-ink);
}
.conception__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: brightness(0.82) saturate(0.95);
  will-change: filter;
}
.conception__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 50%,
      rgba(27, 24, 21, 0)    0%,
      rgba(27, 24, 21, 0.40) 60%,
      rgba(27, 24, 21, 0.78) 100%),
    linear-gradient(180deg,
      rgba(27, 24, 21, 0.55) 0%,
      rgba(27, 24, 21, 0.20) 38%,
      rgba(27, 24, 21, 0.55) 100%);
  pointer-events: none;
}
.conception__vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(27, 24, 21, 0.55) 0%,
    rgba(27, 24, 21, 0)    32%,
    rgba(27, 24, 21, 0)    68%,
    rgba(27, 24, 21, 0.55) 100%);
  pointer-events: none;
}

/* ---------- Inner layout : 3 rows (head / stage / chrome) ---------- */
.conception__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 4rem) var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  box-sizing: border-box;
}

/* ---------- Head : title ---------- */
.conception__head {
  display: block;
  /* Reprend l'espace que l'eyebrow "Conception 3D" occupait avant
     pour que numéro + captions restent à leur ancienne position */
  padding-top: clamp(1.5rem, 3vh, 2.75rem);
}
.conception__title {
  margin: 0;
  color: var(--color-bg);
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.95;
}
.conception__title em {
  color: var(--color-sand);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: none;
}

/* ---------- Stage : monumental numerals + bottom-left captions ---------- */
.conception__stage {
  position: relative;
  min-height: 0;
}

.conception__numerals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.conception__numeral {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14rem, 32vw, 30rem);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--color-bg);
  mix-blend-mode: screen;
  opacity: 0;
  white-space: nowrap;
  /* JS écrase ce transform : translate(-50%, calc(-50% + Yvh)) scale() */
  transform: translate3d(-50%, calc(-50% + 30vh), 0) scale(0.94);
  filter: blur(14px);
  text-shadow: 0 0.04em 0.6em rgba(27, 24, 21, 0.45);
  will-change: transform, opacity, filter;
  font-feature-settings: "lnum", "tnum";
}

.conception__phases {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.conception__phase {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  max-width: clamp(22ch, 36vw, 46ch);
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  will-change: transform, opacity;
}
.conception__phase-rule {
  display: block;
  width: clamp(48px, 5vw, 88px);
  height: 1px;
  background: var(--color-gold);
  margin-bottom: var(--space-2);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.55s var(--ease-quart) 0.05s;
}
.conception__phase.is-active .conception__phase-rule {
  transform: scaleX(1);
}
.conception__phase-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-bg);
}
.conception__phase-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.55;
  color: rgba(247, 245, 238, 0.86);
  max-width: 38ch;
}

/* ---------- Progress bar (slim, full-width sous la scène) ---------- */
.conception__progress {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(247, 245, 238, 0.15);
  overflow: hidden;
}
.conception__progress-bar {
  position: absolute;
  inset: 0;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .section.conception[data-scroll-section="conception"] {
    min-height: 300vh;
  }
  .conception__title {
    font-size: clamp(2.25rem, 7vw, 4rem);
  }
  .conception__numeral {
    font-size: clamp(12rem, 40vw, 28rem);
  }
  .conception__phase {
    max-width: clamp(20ch, 50vw, 36ch);
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .section.conception[data-scroll-section="conception"] {
    min-height: 280vh;
  }
  .conception__inner {
    padding: clamp(1.5rem, 4vh, 2.5rem) var(--gutter);
    gap: var(--space-2);
  }
  .conception__title {
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 0.95;
  }
  .conception__numeral {
    /* Mobile : numéro géant centré horizontalement (le JS pilote translateY) */
    top: 42%;
    font-size: clamp(11rem, 58vw, 22rem);
    letter-spacing: -0.05em;
  }
  .conception__phase {
    max-width: 92%;
  }
  .conception__phase-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }
  .conception__phase-text {
    font-size: 0.95rem;
    line-height: 1.55;
  }
  /* Vignette latérale plus douce sur mobile */
  .conception__vignette {
    background: linear-gradient(180deg,
      rgba(27, 24, 21, 0.5) 0%,
      rgba(27, 24, 21, 0)   25%,
      rgba(27, 24, 21, 0)   75%,
      rgba(27, 24, 21, 0.5) 100%);
  }
}

/* ---------- Reduced motion : pas de pin, layout vertical lisible ---------- */
@media (prefers-reduced-motion: reduce) {
  .section.conception[data-scroll-section="conception"] {
    min-height: auto;
    padding: 0;
  }
  .conception__pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
    padding: var(--space-12) 0;
  }
  .conception__video {
    filter: brightness(0.7) saturate(0.95);
  }
  /* Numéros décoratifs masqués (l'animation n'a plus de sens sans scroll-driven) */
  .conception__numerals {
    display: none;
  }
  /* Les 3 phases sont empilées verticalement, toutes visibles */
  .conception__phases {
    position: relative;
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-6);
  }
  .conception__phase {
    position: relative;
    opacity: 1 !important;
    transform: none !important;
    inset: auto;
    max-width: 56ch;
  }
  .conception__phase-rule {
    transform: scaleX(1);
  }
  .conception__progress {
    display: none;
  }
}

/* =============================================
   AVANT / APRÈS  —  scène vivante
   ============================================= */

.section.ba {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink-deep);
  /* full-bleed : on casse le max-width et le padding hérités de .section */
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Pas d'animation d'entrée : la section est déjà en place quand on scrolle dessus */
.section.ba.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.ba .ba__item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
}

/* Le contenu reste dans le container, l'atmosphère couvre toute la largeur */
.ba > .section__num,
.ba > .ba__head,
.ba > .ba__signature,
.ba > .ba__items {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Atmosphère : grain animé + halos dorés + rai de lumière diagonal */
.ba__atmosphere {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ba__grain {
  position: absolute;
  inset: -8%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.106  0 0 0 0 0.094  0 0 0 0 0.082  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  mix-blend-mode: multiply;
  opacity: 0.32;
  will-change: transform;
  animation: ba-grain-drift 9s steps(8) infinite;
}

.ba__halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  will-change: transform, opacity;
}

.ba__halo--1 {
  width: 62vw;
  height: 62vw;
  top: -8%;
  left: -14vw;
  background: radial-gradient(circle at center,
    rgba(201, 168, 106, 0.38) 0%,
    rgba(184, 155, 126, 0.18) 38%,
    rgba(184, 155, 126, 0) 70%);
  animation: ba-halo-drift-1 32s ease-in-out infinite;
}

.ba__halo--2 {
  width: 54vw;
  height: 54vw;
  bottom: -12%;
  right: -12vw;
  background: radial-gradient(circle at center,
    rgba(217, 211, 194, 0.55) 0%,
    rgba(201, 168, 106, 0.18) 38%,
    rgba(217, 211, 194, 0) 72%);
  animation: ba-halo-drift-2 38s ease-in-out infinite;
}

/* Diagonal sunbeam — un rai de lumière qui traverse très lentement */
.ba__sunbeam {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(247, 245, 238, 0.45) 49%,
    rgba(201, 168, 106, 0.18) 51%,
    transparent 62%);
  mix-blend-mode: soft-light;
  opacity: 0.7;
  transform: translateX(-30%);
  animation: ba-sunbeam-sweep 22s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes ba-grain-drift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-2%, 1.5%, 0); }
  50%  { transform: translate3d(1.5%, -2%, 0); }
  75%  { transform: translate3d(-1%, -1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes ba-halo-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.85; }
  50%      { transform: translate3d(6vw, -3vw, 0) scale(1.08); opacity: 1; }
}

@keyframes ba-halo-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);     opacity: 0.7; }
  50%      { transform: translate3d(-5vw, 4vw, 0) scale(1.1); opacity: 1; }
}

@keyframes ba-sunbeam-sweep {
  0%, 100% { transform: translateX(-30%);  opacity: 0; }
  20%      { opacity: 0.7; }
  50%      { transform: translateX(30%);   opacity: 0.9; }
  80%      { opacity: 0.55; }
}

/* Tout le contenu de la section passe au-dessus de l'atmosphère */
.ba > *:not(.ba__atmosphere) {
  position: relative;
  z-index: 1;
}

.ba__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-6);
}

/* Bande typographique : signature de la section */
.ba__signature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-12);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ba__signature-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.ba__signature-item--mark {
  color: var(--color-ink);
  font-weight: 500;
}

.ba__signature-item--cue {
  color: var(--color-accent);
  margin-left: auto;
}

.ba__signature-arrow {
  display: inline-block;
  font-size: 0.95rem;
  letter-spacing: 0;
  animation: ba-arrow-bob 2.6s var(--ease-quart) infinite;
}

@keyframes ba-arrow-bob {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

.ba__signature-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-line);
  flex-shrink: 0;
}

/* Items */
.ba__items {
  display: grid;
  gap: var(--space-24);
}

.ba__item {
  position: relative;
  display: grid;
  gap: var(--space-4);
  isolation: isolate;
  padding-top: var(--space-4);
}

/* Numéros monumentaux 01 / 02 en filigrane (Fraunces italic) */
.ba__numeral {
  position: absolute;
  top: clamp(-4rem, -4vw, -2rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(9rem, 24vw, 24rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(27, 24, 21, 0.07);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
  font-feature-settings: "lnum", "tnum";
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1.6s var(--ease-quart) 0.3s,
    transform 1.8s var(--ease-quart) 0.3s;
}

.ba__numeral span { display: inline-block; }

.ba__item--01 .ba__numeral { right: -2vw; }
.ba__item--02 .ba__numeral { left: -2vw; }

/* Titre superposé top-left sur le compare */
.ba__overlay-title {
  position: absolute;
  top: clamp(2rem, 5vw, 4rem);
  left: clamp(1.5rem, 5vw, 4rem);
  margin: 0;
  z-index: 5;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--color-bg);
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  max-width: 60vw;
}

.reveal--in .ba__numeral {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Compare occupe toute la section : pleine largeur, hauteur viewport */
.ba__compare {
  --ba-pct: 50%;
  position: relative;
  width: 100%;
  height: clamp(560px, 100vh, 1100px);
  overflow: hidden;
  background: var(--color-ink-deep);
  user-select: none;
  cursor: ew-resize;
  touch-action: pan-y;
  z-index: 1;
}

.ba__compare img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ba__after { position: absolute; inset: 0; }

.ba__before-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pct)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--ba-pct)) 0 0);
}

.ba__before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__compare--dragging .ba__before-wrap { transition: none; }

/* Coins viseur — drawn from each corner on reveal */
.ba__frame {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.55s var(--ease-quart),
    transform 0.75s var(--ease-quart);
}

.ba__frame--tl {
  top: 14px;
  left: 14px;
  border-top: 1px solid rgba(247, 245, 238, 0.75);
  border-left: 1px solid rgba(247, 245, 238, 0.75);
  transform-origin: top left;
}
.ba__frame--tr {
  top: 14px;
  right: 14px;
  border-top: 1px solid rgba(247, 245, 238, 0.75);
  border-right: 1px solid rgba(247, 245, 238, 0.75);
  transform-origin: top right;
}
.ba__frame--bl {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid rgba(247, 245, 238, 0.75);
  border-left: 1px solid rgba(247, 245, 238, 0.75);
  transform-origin: bottom left;
}
.ba__frame--br {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid rgba(247, 245, 238, 0.75);
  border-right: 1px solid rgba(247, 245, 238, 0.75);
  transform-origin: bottom right;
}

.reveal--in .ba__frame {
  opacity: 1;
  transform: scale(1);
}

.reveal--in .ba__frame--tl { transition-delay: 0.45s; }
.reveal--in .ba__frame--tr { transition-delay: 0.6s; }
.reveal--in .ba__frame--br { transition-delay: 0.75s; }
.reveal--in .ba__frame--bl { transition-delay: 0.9s; }

/* Handle — positioned along divider */
.ba__handle {
  position: absolute;
  top: 0;
  left: var(--ba-pct);
  height: 100%;
  width: 48px;
  margin-left: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  pointer-events: none;
  z-index: 4;
}

.ba__handle-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  margin-left: -0.5px;
  background:
    linear-gradient(180deg,
      rgba(247, 245, 238, 0.18) 0%,
      rgba(247, 245, 238, 0.85) 20%,
      rgba(247, 245, 238, 0.85) 80%,
      rgba(247, 245, 238, 0.18) 100%);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
}

.ba__handle-dot {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(27, 24, 21, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: ba-pulse 2.8s var(--ease-quart) infinite;
  transition: transform 0.4s var(--ease-quart);
}

@keyframes ba-pulse {
  0%, 100% {
    box-shadow:
      0 6px 24px rgba(0, 0, 0, 0.32),
      0 0 0 0 rgba(247, 245, 238, 0.55),
      0 0 0 1px rgba(27, 24, 21, 0.06);
  }
  60% {
    box-shadow:
      0 6px 24px rgba(0, 0, 0, 0.32),
      0 0 0 14px rgba(247, 245, 238, 0),
      0 0 0 1px rgba(27, 24, 21, 0.06);
  }
}

.ba__compare:hover .ba__handle-dot { transform: scale(1.08); }
.ba__compare--dragging .ba__handle-dot {
  transform: scale(1.04);
  animation: none;
}

.ba__handle-dot span {
  display: block;
  width: 0;
  height: 0;
}

.ba__handle-dot span:nth-child(1) {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid var(--color-ink-deep);
}
.ba__handle-dot span:nth-child(2) {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--color-ink-deep);
}

/* Compteur de % en temps réel — visible pendant le drag */
.ba__handle-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 54px));
  padding: 0.4rem 0.65rem;
  background: rgba(27, 24, 21, 0.92);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.3s var(--ease-quart),
    transform 0.4s var(--ease-quart);
}

.ba__handle-pct::after {
  content: '%';
  margin-left: 0.15em;
  opacity: 0.55;
}

.ba__compare:hover .ba__handle-pct {
  opacity: 0.55;
  transform: translate(-50%, calc(-50% - 60px));
}

.ba__compare--dragging .ba__handle-pct {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 64px));
}

/* Labels Avant / Après — placés en bas pour libérer le top-left au titre */
.ba__label {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-bg);
  padding: 0.5rem 0.85rem;
  background: rgba(27, 24, 21, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-quart) 0.5s,
    transform 0.9s var(--ease-quart) 0.5s;
}

.ba__label--before {
  left: clamp(1rem, 3vw, 2.25rem);
  transform: translateX(-14px);
}
.ba__label--after {
  right: clamp(1rem, 3vw, 2.25rem);
  transform: translateX(14px);
}

.reveal--in .ba__label--before,
.reveal--in .ba__label--after {
  opacity: 1;
  transform: translateX(0);
}

/* Caption enrichie : titre/meta à gauche, fiche technique à droite */
.ba__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-6);
  align-items: start;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
  margin-top: var(--space-2);
}

.ba__caption-main {
  min-width: 0;
}

.ba__caption-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.7vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-ink);
}

.ba__caption-meta {
  margin: 0.45rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.ba__specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0 var(--space-4);
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-4);
}

.ba__specs-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ba__specs dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.ba__specs dd {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}

/* Responsive : tablette */
@media (max-width: 980px) {
  .ba__signature { font-size: 0.62rem; letter-spacing: 0.18em; }
  .ba__signature-item--cue { margin-left: 0; }

  .ba__caption {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .ba__specs {
    border-left: none;
    border-top: 1px solid var(--color-line);
    padding-left: 0;
    padding-top: var(--space-3);
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--space-3);
  }
}

/* Responsive : mobile */
@media (max-width: 700px) {
  .ba { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .ba__items { gap: var(--space-16); }
  .ba__item { padding-top: var(--space-3); }
  .ba__numeral {
    font-size: clamp(6rem, 32vw, 11rem);
    top: -1.5rem;
  }
  .ba__item--01 .ba__numeral { right: -1rem; }
  .ba__item--02 .ba__numeral { left: -1rem; }

  .ba__frame { width: 20px; height: 20px; }
  .ba__frame--tl, .ba__frame--tr { top: 10px; }
  .ba__frame--bl, .ba__frame--br { bottom: 10px; }
  .ba__frame--tl, .ba__frame--bl { left: 10px; }
  .ba__frame--tr, .ba__frame--br { right: 10px; }

  .ba__handle-dot { width: 44px; height: 44px; }
  .ba__handle-pct { font-size: 0.62rem; padding: 0.3rem 0.55rem; }

  .ba__specs {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
  }
  .ba__specs-row:last-child { grid-column: 1 / -1; }
}

/* Reduced motion : on coupe les animations vivantes mais on garde la mise en scène */
@media (prefers-reduced-motion: reduce) {
  .ba__grain,
  .ba__halo,
  .ba__sunbeam,
  .ba__handle-dot,
  .ba__signature-arrow {
    animation: none !important;
  }
  .ba__numeral,
  .ba__frame,
  .ba__label {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================
   GALLERY — "Le sens du détail" (port v4)
   Marquee horizontal, slides en grayscale par défaut.
   Au hover : les voisins ternissent, le slide ciblé se met en relief.
   ============================================= */

.gallery {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--space-12);
  max-width: none;
  overflow: hidden;
}

.gallery__head {
  position: absolute;
  top: clamp(1.25rem, 3.5vw, 2.5rem);
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  pointer-events: none;
}

.gallery__head .section__title {
  color: #fff;
  mix-blend-mode: difference;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

.gallery__viewport {
  position: relative;
  overflow: visible;
  perspective: 1200px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.gallery__track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  animation: gallery-loop 60s linear infinite;
  will-change: transform;
}

/* Pause le marquee UNIQUEMENT si la souris est sur un slide précis
   (pas dans les gaps, ni sur le header / espace vide) */
.gallery__track:has(.gallery__slide:hover),
.gallery--paused .gallery__track {
  animation-play-state: paused;
}

@keyframes gallery-loop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.gallery__slide {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 32vw, 420px);
  overflow: hidden;
  background: var(--color-sand);
  filter: grayscale(0.55) saturate(0.9);
  transform-origin: center bottom;
  transition:
    transform 0.6s var(--ease-quart),
    filter 0.6s var(--ease-quart),
    opacity 0.6s var(--ease-quart);
}

.gallery__slide img {
  width: 100%;
  height: clamp(360px, 42vw, 520px);
  object-fit: cover;
  display: block;
}

/* Slide hovered : pleine couleur, relief, premier plan */
.gallery__slide:hover {
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1.04) translateY(-8px);
  z-index: 3;
}

/* Quand un slide est hovered, tous les AUTRES ternissent et reculent
   uniformément (pas seulement les voisins) */
.gallery__track:has(.gallery__slide:hover) .gallery__slide:not(:hover) {
  filter: grayscale(0.85) saturate(0.7);
  opacity: 0.6;
  transform: scale(0.96);
}

/* Caption : cachée par défaut, paraît au hover slide */
.gallery__caption {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  color: var(--color-bg);
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--ease-quart),
    transform 0.4s var(--ease-quart);
}

.gallery__slide:hover .gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery__caption h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.gallery__caption p {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.88;
}

/* Reduced motion : pas d'anim marquee, slides en couleur */
@media (prefers-reduced-motion: reduce) {
  .gallery__track { animation: none; }
  .gallery__slide { filter: none; }
}

/* =============================================
   ARTISAN + TÉMOIGNAGES
   ============================================= */

.artisan {
  /* Fond sombre — palette inversée localement via CSS vars
     pour que toutes les références existantes basculent en clair */
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  background: var(--color-ink-deep);
  color: var(--color-bg);
  --color-ink: var(--color-bg);
  --color-ink-soft: rgba(247, 245, 238, 0.78);
  --color-muted: rgba(247, 245, 238, 0.52);
  --color-line: rgba(247, 245, 238, 0.14);
  --color-accent: var(--color-gold);
}

/* Opt-out du fade-in global .reveal : sinon la section fade depuis le cream
   du body et crée un flash "cream → noir" pendant 0.9s à l'entrée. */
.section.artisan.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.artisan > .section__num,
.artisan > .artisan__grid {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.artisan > .section__num {
  color: var(--color-muted);
}

.artisan__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  grid-template-areas:
    'photo title'
    'photo body';
  column-gap: var(--space-8);
  row-gap: var(--space-4);
  align-items: start;
}

.artisan__photo { grid-area: photo; }
.artisan__title { grid-area: title; }
.artisan__body  { grid-area: body;  }

.artisan__photo {
  margin: 0;
  position: sticky;
  top: var(--space-12);
}

.artisan__photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.94);
}

.artisan__photo figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.artisan__title em {
  font-style: italic;
  color: var(--color-accent);
}

.artisan__lead {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--color-ink);
  max-width: 30ch;
}

.artisan__text {
  margin: 0 0 var(--space-8);
  max-width: 54ch;
  color: var(--color-ink-soft);
}

.artisan strong { color: var(--color-ink); }

.reviews {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-6);
}

.review {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  row-gap: 0.5rem;
  align-items: start;
}

.review__stars {
  font-family: 'Times New Roman', serif;
  color: var(--color-gold);
  letter-spacing: 0.08em;
  font-size: 1rem;
  line-height: 1;
  margin-top: 0.4rem;
}

.review__text {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 50ch;
}

.review__author {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.reviews__meta {
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.reviews__meta strong {
  color: var(--color-accent);
  font-weight: 500;
}

/* =============================================
   CONTACT
   ============================================= */

.contact__head {
  margin-bottom: var(--space-12);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: end;
}

.contact__intro {
  margin: 0;
  color: var(--color-ink-soft);
  max-width: 36ch;
  font-size: 1.0625rem;
}

.contact__layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.contact__direct {
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-6);
}

.contact__direct-label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact__direct-label--spaced {
  margin-top: var(--space-6);
}

.contact__direct-line {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.contact__direct-line a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-line);
  transition: border-color 0.3s var(--ease-quart);
}

.contact__direct-line a:hover {
  border-color: var(--color-ink);
}

.contact__address {
  margin: 0;
  font-style: normal;
  font-size: 0.98rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.contact__zone {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
  max-width: 32ch;
}

/* Form */
.form {
  max-width: 44rem;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-6);
}

.form__progress {
  margin: 0 0 var(--space-6);
  display: flex;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.form__progress-num { color: var(--color-ink); }

.form__step {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-6);
}

.form__legend {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

.form__choices {
  display: grid;
  gap: var(--space-2);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-quart),
              background 0.3s var(--ease-quart);
}

.choice:hover { border-color: var(--color-accent); }

.choice input {
  margin-top: 0.45rem;
  accent-color: var(--color-accent);
}

.choice__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.choice__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
}

.choice__hint {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.choice:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-bg-alt);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form__field {
  margin-bottom: var(--space-4);
}

.form__row .form__field { margin-bottom: 0; }

.form__field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.form__field input,
.form__field textarea {
  width: 100%;
  padding: 0.65rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.0625rem;
  font-family: var(--font-body);
  transition: border-color 0.3s var(--ease-quart);
}

.form__field input::placeholder,
.form__field textarea::placeholder {
  color: var(--color-muted);
  opacity: 0.7;
}

.form__field input:focus,
.form__field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}

.form__field textarea {
  resize: vertical;
  min-height: 5.5rem;
}

.form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-3);
  padding: 0.85rem 1.5rem;
  background: var(--color-ink-deep);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease-quart),
              gap 0.3s var(--ease-quart);
}

.form__submit:hover {
  background: var(--color-accent);
  gap: 1.25rem;
}

/* =============================================
   FOOTER
   ============================================= */

.footer {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-16) 0 var(--space-6);
}

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-6);
}

.footer__brand { padding-right: var(--space-4); }

.footer__logo {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
}

.footer__tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.footer__label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

.footer__col p {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  color: rgba(247, 245, 238, 0.85);
}

.footer__col a:hover { color: var(--color-bg); text-decoration: underline; text-underline-offset: 4px; }

.footer__social li { margin-bottom: 0.35rem; }
.footer__social a {
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-quart);
}
.footer__social a:hover { border-color: currentColor; text-decoration: none; }

.footer__bottom {
  max-width: var(--container);
  margin: var(--space-12) auto 0;
  padding: var(--space-4) var(--gutter) 0;
  border-top: 1px solid rgba(247, 245, 238, 0.16);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  flex-wrap: wrap;
}

.footer__bottom a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-quart);
}
.footer__bottom a:hover { border-color: currentColor; }

.footer__credit { opacity: 0.6; }
.footer__credit svg { width: 0.8em; height: 0.8em; fill: currentColor; vertical-align: -0.05em; margin: 0 0.1em; }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
  .manifeste__col-text { grid-column: 1 / span 7; }
  .manifeste__col-image { grid-column: 1 / span 12; margin-top: var(--space-6); }
  .manifeste__col-image img { aspect-ratio: 4 / 3; }

  /* Tablette : remet du padding vertical au strip ; header reste sr-only */
  .methode { padding: var(--space-12) 0; }
  .methode::before { height: clamp(60px, 8vh, 110px); }

  /* Volets : 2 colonnes, le 3e prend toute la largeur dessous */
  .methode__steps {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    gap: var(--space-3);
    background: transparent;
  }
  .step {
    flex: 1 1 calc(50% - var(--space-3));
    aspect-ratio: 4 / 5;
    cursor: default;
  }
  .step:last-child {
    flex-basis: 100%;
    aspect-ratio: 16 / 9;
  }
  .methode__steps:hover .step,
  .methode__steps:hover .step:hover,
  .methode__steps:focus-within .step:focus-within { flex-grow: 1; }

  .artisan__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'title'
      'photo'
      'body';
    gap: var(--space-6);
  }
  .artisan__photo {
    position: static;
    max-width: 26rem;
  }
}

/* Mobile : la section EST l'image — tout (titre, intro, avis) en overlay
   sur la photo, pas de fond sombre visible autour. */
@media (max-width: 700px) {
  .section.artisan {
    padding: 0;
  }

  .artisan__grid {
    grid-template-areas: 'photo';
    row-gap: 0;
    position: relative;
  }
  /* Body vide (titre/intro/avis déplacés dans la photo par JS) :
     on le supprime du layout pour éliminer le résidu de fond sombre */
  .artisan__body { display: none; }

  .artisan__photo {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: auto;
    height: 100dvh;
    min-height: 720px;
    overflow: hidden;
    position: relative;
    top: 0; /* reset le top:var(--space-12) hérité de la règle sticky desktop */
    /* Layout : titre haut, intro milieu, avis bas */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(5.5rem, 14vw, 7rem) var(--gutter) clamp(2rem, 6vw, 3rem);
    box-sizing: border-box;
  }
  .artisan__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 130%;
    aspect-ratio: auto;
    object-fit: cover;
    /* Portrait N&B assombri : le texte blanc en overlay reste lisible même
       sur les zones claires (visage). Voir aussi le voile ::before renforcé. */
    filter: brightness(0.6) contrast(1.05) saturate(0.92);
    will-change: transform;
    animation: artisan-parallax-mobile linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .artisan__photo figcaption {
    display: none;
  }

  /* Tous les overlays (titre, intro, avis) sont des flex children de la photo,
     répartis verticalement par justify-content: space-between. */
  .artisan__photo > .artisan__title,
  .artisan__photo > .artisan__intro,
  .artisan__photo > .reviews {
    position: relative;
    z-index: 5;
    color: var(--color-bg);
    /* Triple ombre : un halo serré quasi-opaque (1-2px) donne à chaque lettre
       son propre fond sombre — lisibilité garantie même sur un reflet clair du
       portrait — complété par un halo diffus pour l'assise générale. */
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 2px 16px rgba(0, 0, 0, 0.55),
      0 0 1px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    margin: 0;
    max-width: none;
  }

  /* Titre */
  .artisan__photo > .artisan__title {
    /* hérite font-size de section__title */
  }

  /* Intro */
  .artisan__photo > .artisan__intro .artisan__lead {
    margin: 0 0 var(--space-2);
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: none;
    color: var(--color-bg);
  }
  .artisan__photo > .artisan__intro .artisan__text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: none;
    color: rgba(247, 245, 238, 0.88);
  }
  .artisan__photo > .artisan__intro .artisan__lead strong {
    color: var(--color-gold);
    font-weight: 500;
  }

  /* Avis */
  .artisan__photo > .reviews {
    border-top: 1px solid rgba(247, 245, 238, 0.22);
    padding-top: var(--space-3);
    display: grid;
    gap: var(--space-3);
  }
  .artisan__photo > .reviews .review {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    row-gap: 0.35rem;
  }
  .artisan__photo > .reviews .review__stars {
    color: var(--color-gold);
    margin-top: 0.2rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  }
  .artisan__photo > .reviews .review__text {
    color: var(--color-bg);
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: none;
  }
  .artisan__photo > .reviews .review__author {
    color: rgba(247, 245, 238, 0.65);
  }

  /* Fade noir : voile global pour assurer la lisibilité de tous les
     textes (haut, milieu et bas) sur n'importe quelle image. La bande
     centrale (~48%) est renforcée car c'est là que tombe la bio, par-dessus
     le visage clair du portrait — zone la plus critique pour le contraste. */
  .artisan__photo::before {
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(27, 24, 21, 0.82) 0%,
      rgba(27, 24, 21, 0.56) 26%,
      rgba(27, 24, 21, 0.52) 48%,
      rgba(27, 24, 21, 0.62) 72%,
      rgba(27, 24, 21, 0.88) 100%
    );
  }
}

@keyframes artisan-parallax-mobile {
  from { transform: translateY(0%); }
  to { transform: translateY(-20%); }
}

/* Hero phone — tablette/mobile : laisse le wrap aligner à gauche, ajoute de l'air au-dessus */
@media (max-width: 700px) {
  .hero__phone {
    margin-left: 0;
    margin-top: var(--space-2);
  }
}

/* Hero phone — version mobile compacte */
@media (max-width: 480px) {
  .hero__phone {
    padding: 0.8rem 1.25rem;
    font-size: 0.72rem;
    gap: 0.65rem;
  }
  .hero__phone-label { display: none; }
}

/* Manifeste — version mobile lisible */
@media (max-width: 700px) {
  .manifeste__col-text { grid-column: 1 / span 12; }

  .manifeste__lead {
    font-size: 1.25rem;
    line-height: 1.45;
    margin: var(--space-4) 0 var(--space-3);
    max-width: none;
  }

  .manifeste__body {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--space-4);
    max-width: none;
  }

  .manifeste__col-image { margin-top: var(--space-4); }
  .manifeste__col-image img { aspect-ratio: 5 / 4; }
}

@media (max-width: 960px) {
  .nav__links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--color-ink-deep);
    color: var(--color-bg);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    gap: var(--space-4);
    transform: translateY(-100%);
    transition: transform 0.5s var(--ease-quart);
    will-change: transform;
  }

  .nav__links--open { transform: translateY(0); }

  /* Mobile : on cache le CTA externe et on réactive celui dans l'overlay */
  .nav__cta--desktop    { display: none; }
  .nav__cta-mobile-wrap { display: block; }

  /* CTA mobile : même taille que les autres liens du menu, padding généreux */
  .nav__cta--mobile {
    font-size: inherit;
    padding: 1.4rem 3.5rem;
    letter-spacing: 0.18em;
  }

  .nav__burger {
    display: flex;
    z-index: 102;
    color: inherit;
  }

  .nav__logo {
    position: relative;
    z-index: 102;
  }

  .nav--solid .nav__burger { color: var(--color-ink); }

  .nav:has(.nav__links--open) .nav__logo,
  .nav:has(.nav__links--open) .nav__burger {
    color: var(--color-bg);
  }

  .section__head,
  .methode__head,
  .ba__head,
  .contact__head {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
  }

  /* Volets en mobile : full-bleed, panneaux immersifs empilés.
     Image plein écran sous le texte toujours visible. */
  .methode__steps {
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .step {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 4;
    min-height: 70vh;
    cursor: default;
  }
  .step:last-child { aspect-ratio: 3 / 4; flex-basis: auto; }
  .step__body {
    max-width: min(80vw, 32ch);
    right: clamp(1.25rem, 5vw, 2rem);
    bottom: clamp(1.5rem, 5vw, 2.5rem);
  }
  .step__title { font-size: clamp(2.25rem, 7vw, 3.5rem); }
  .step__text {
    opacity: 1;
    transform: none;
    transition: none;
    font-size: 1rem;
  }

  .ba__compare { aspect-ratio: 4 / 3; }

  .contact__layout {
    grid-template-columns: 1fr;
  }
  .contact__direct {
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding-left: 0;
    padding-top: var(--space-6);
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .hero__title { font-size: clamp(2.25rem, 10.5vw, 3.75rem); letter-spacing: -0.03em; }
  .hero__title-em { margin-left: 0.5rem; }
  .hero__meta { flex-wrap: wrap; gap: 0.75rem; }
  .hero__meta-sep { display: none; }

  .section { padding: var(--space-16) var(--gutter); }
  /* .methode reste full-bleed sans padding pour garder les volets immersifs */
  .methode { padding: 0; }

  /* Mobile : titre superposé compact, positionné en haut à gauche du carrousel */
  .gallery__head {
    top: clamp(5.5rem, 14vw, 7rem);
    padding: 0 var(--gutter);
  }
  .gallery__head .section__title {
    font-size: clamp(1.75rem, 8vw, 2.75rem);
    line-height: 0.95;
  }

  /* Mobile : carrousel swipe-by-swipe (pas d'auto-loop lent) */
  .gallery__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
    perspective: none;
  }
  .gallery__viewport::-webkit-scrollbar { display: none; }

  /* Mobile : section gallery plein écran, slides full viewport */
  .section.gallery {
    padding: 0;
  }

  .gallery__track {
    animation: none;
    width: max-content;
    gap: 0;
  }

  .gallery__slide {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: center;
    /* Pas de grayscale ni de relief en tactile */
    filter: none;
    transform: none;
    transform-origin: center center;
  }

  .gallery__slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Caption toujours visible en mobile (pas de hover sur tactile) */
  .gallery__caption {
    opacity: 1;
    transform: none;
  }

  /* Masquer le 2e set (dupliqué) — utile seulement pour le loop CSS desktop */
  .gallery__slide[aria-hidden="true"] { display: none; }

  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form__row .form__field { margin-bottom: var(--space-4); }

  .ba__compare { aspect-ratio: 3 / 4; }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================
   TYPOGRAPHIE MONUMENTALE
   Backdrop géant + soulignement SVG + chiffres italiques
   ============================================= */

/* Backdrop : mot géant en arrière-plan, italique, ton sable */
.section__backdrop {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.045em;
  color: var(--color-line);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  text-transform: none;
  /* Apparition douce au scroll-in */
  transform: translate3d(-2vw, 0, 0);
  opacity: 0;
  transition: transform 1.6s var(--ease-quart),
              opacity 1.4s var(--ease-quart);
}
.reveal--in .section__backdrop {
  transform: translate3d(0, 0, 0);
  opacity: 0.55;
}

/* Placement par section */
.section__backdrop--manifeste {
  font-size: clamp(8rem, 22vw, 19rem);
  top: 38%;
  left: -2vw;
  transform: translate3d(-2vw, -50%, 0);
}
.reveal--in .section__backdrop--manifeste {
  transform: translate3d(0, -50%, 0);
}

/* Le contenu doit passer au-dessus du backdrop */
.manifeste .section__num,
.manifeste__grid {
  position: relative;
  z-index: 1;
}

/* Wrapper du backdrop : couvre toute la viewport horizontalement (clip
   éditorial sur les bords) tout en restant ABSOLUTE, donc sans créer
   de scroll-container qui casserait le sticky de la col-text. */
.section__backdrop-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* =============================================
   Soulignement SVG dessiné sur "de bâtir"
   ============================================= */
.conception .section__title em {
  position: relative;
  display: inline-block;
}

.title-underline {
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.12em;
  width: calc(100% + 0.08em);
  height: 0.32em;
  overflow: visible;
  stroke: var(--color-accent);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.6s var(--ease-quart) 0.55s;
  pointer-events: none;
}
.conception.reveal--in .title-underline {
  stroke-dashoffset: 0;
}
.conception .title-underline {
  /* Sur fond sombre, on remonte vers le doré pour la lisibilité */
  stroke: var(--color-gold);
}

/* =============================================
   Reduced motion : pas d'animation
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .section__backdrop {
    transform: none !important;
    opacity: 0.55 !important;
    transition: none;
  }
  .title-underline {
    stroke-dashoffset: 0 !important;
    transition: none;
  }
}

/* =============================================
   Responsive : ajustements mobile
   ============================================= */
@media (max-width: 760px) {
  .section__backdrop--manifeste {
    font-size: clamp(6rem, 28vw, 12rem);
    top: 18%;
    opacity: 0.45;
  }
  .reveal--in .section__backdrop--manifeste {
    opacity: 0.45;
  }
  .reveal--in .section__backdrop {
    opacity: 0.45;
  }
}

/* =============================================
   MANIFESTE — pinned, scroll-driven (port v4 + image qui s'élargit en bg)
   Section haute (220vh), contenu pin sticky 100vh.
   Le JS pilote --manif-progress (0→1) et --word-shown (par mot).
   L'image figure passe en position absolute et grandit jusqu'à
   couvrir tout le pin en arrière-plan.
   ============================================= */

.section.manifeste[data-scroll-section="manifeste"] {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 220vh;
}

.manifeste__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--gutter);
  max-width: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Grid intérieur conserve son max-width container */
.manifeste__pin > .manifeste__grid {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}

/* Pile au-dessus du backdrop et de l'image bg */
.manifeste__pin .section__num,
.manifeste__pin .manifeste__col-text {
  position: relative;
  z-index: 2;
}

/* Backdrop : scale dramatique pilotée par scroll */
[data-scroll-section="manifeste"] .section__backdrop--manifeste,
[data-scroll-section="manifeste"].reveal--in .section__backdrop--manifeste {
  transition: none !important;
  transform-origin: 0% 50% !important;
  transform: translate3d(0, -50%, 0)
             scale(calc(0.7 + var(--manif-progress, 0) * 1.3)) !important;
  opacity: calc((0.15 + var(--manif-progress, 0) * 0.55)
                * (1 - var(--manif-progress, 0))) !important;
}

/* Mots du lead : révélés progressivement au scroll */
[data-scroll-section="manifeste"] .manifeste__lead .word,
[data-scroll-section="manifeste"].reveal--in .manifeste__lead .word {
  transition: opacity 0.35s linear,
              filter 0.35s linear,
              transform 0.35s linear !important;
  transition-delay: 0s !important;
  opacity: var(--word-shown, 0) !important;
  filter: blur(calc((1 - var(--word-shown, 0)) * 8px)) !important;
  transform: translateY(calc((1 - var(--word-shown, 0)) * 6px)) !important;
}

/* Image : sortie de la grid, en absolute, grandit pour couvrir le pin */
[data-scroll-section="manifeste"] .manifeste__col-image {
  position: absolute;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  /* inset interpolé : de la colonne droite vers full-bleed */
  top: calc((1 - var(--manif-progress, 0)) * 18%);
  bottom: calc((1 - var(--manif-progress, 0)) * 18%);
  right: calc((1 - var(--manif-progress, 0)) * var(--gutter));
  left: calc((1 - var(--manif-progress, 0)) * 58%);
  transition: none !important;
}

[data-scroll-section="manifeste"] .manifeste__col-image img,
[data-scroll-section="manifeste"].reveal--in .manifeste__col-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  object-fit: cover;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transform: none !important;
  transition: none !important;
}

/* Voile crème côté gauche pour préserver la lisibilité du texte
   quand l'image domine la scène. Apparaît avec le progress. */
[data-scroll-section="manifeste"] .manifeste__col-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(247, 245, 238, 0.92) 0%,
    rgba(247, 245, 238, 0.78) 28%,
    rgba(247, 245, 238, 0.35) 52%,
    rgba(247, 245, 238, 0) 72%);
  opacity: var(--manif-progress, 0);
  pointer-events: none;
  z-index: 1;
}

/* Caption hors layout : reste visible mais avec un fond pour lisibilité
   quand l'image est full-bleed */
[data-scroll-section="manifeste"] .manifeste__col-image figcaption {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-3);
  margin: 0;
  padding: 0.4rem 0.65rem;
  background: rgba(247, 245, 238, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  opacity: var(--manif-progress, 0);
  transition: opacity 0.3s var(--ease-quart);
}

/* Mobile : pas de scrubbing, l'image arrive directement en full-bleed
   avec le texte par-dessus (état final du desktop, mais figé) */
@media (max-width: 900px) {
  .section.manifeste[data-scroll-section="manifeste"] {
    min-height: 100vh;
    padding: 0;
    max-width: none;
    margin: 0;
    position: relative;
  }
  .manifeste__pin {
    position: relative;
    top: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-16) var(--gutter);
    max-width: none;
    margin: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .manifeste__pin > .manifeste__grid {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Mots du lead : animation douce d'entrée (blur fade-in stagger),
     déclenchée par reveal--in via IntersectionObserver */
  [data-scroll-section="manifeste"] .manifeste__lead .word {
    opacity: 0 !important;
    filter: blur(8px) !important;
    transform: translateY(6px) !important;
    transition: opacity 0.85s var(--ease-quart),
                filter 0.85s var(--ease-quart),
                transform 0.85s var(--ease-quart) !important;
    transition-delay: calc(0.55s + var(--word-i, 0) * 0.035s) !important;
  }
  [data-scroll-section="manifeste"].reveal--in .manifeste__lead .word {
    opacity: 1 !important;
    filter: blur(0) !important;
    transform: translateY(0) !important;
  }

  /* Image : full-bleed direct, pas d'animation scroll */
  [data-scroll-section="manifeste"] .manifeste__col-image {
    position: absolute;
    inset: 0;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0;
    pointer-events: none;
    z-index: 0;
  }
  [data-scroll-section="manifeste"] .manifeste__col-image img,
  [data-scroll-section="manifeste"].reveal--in .manifeste__col-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto !important;
    object-fit: cover;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
  }

  /* Tamis crème : même gradient horizontal que sur PC, pour la lisibilité */
  [data-scroll-section="manifeste"] .manifeste__col-image::before {
    display: block;
    opacity: 1 !important;
    background: linear-gradient(90deg,
      rgba(247, 245, 238, 0.95) 0%,
      rgba(247, 245, 238, 0.88) 45%,
      rgba(247, 245, 238, 0.65) 75%,
      rgba(247, 245, 238, 0.35) 100%);
  }

  /* Caption flottante en bas */
  [data-scroll-section="manifeste"] .manifeste__col-image figcaption {
    position: absolute;
    bottom: var(--space-3);
    right: var(--gutter);
    opacity: 1 !important;
    background: rgba(247, 245, 238, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.35rem 0.55rem;
    margin: 0;
    z-index: 2;
  }

  [data-scroll-section="manifeste"] .section__backdrop--manifeste,
  [data-scroll-section="manifeste"].reveal--in .section__backdrop--manifeste {
    transform: translate3d(0, -50%, 0) !important;
    opacity: 0.35 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.manifeste[data-scroll-section="manifeste"] {
    min-height: 0;
    padding: var(--space-12) var(--gutter);
    max-width: var(--container);
    margin: 0 auto;
  }
  .manifeste__pin {
    position: static;
    min-height: 0;
    padding: 0;
    max-width: none;
    margin: 0;
    gap: 0;
    display: block;
    overflow: visible;
  }
  .manifeste__pin > .manifeste__grid {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  [data-scroll-section="manifeste"] .manifeste__lead .word,
  [data-scroll-section="manifeste"].reveal--in .manifeste__lead .word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  [data-scroll-section="manifeste"] .manifeste__col-image {
    position: static;
    inset: auto;
    top: auto; right: auto; bottom: auto; left: auto;
    margin: var(--space-8) 0 0;
    pointer-events: auto;
  }
  [data-scroll-section="manifeste"] .manifeste__col-image img,
  [data-scroll-section="manifeste"].reveal--in .manifeste__col-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover;
    transition: none !important;
  }
  [data-scroll-section="manifeste"] .manifeste__col-image::before {
    display: none;
  }
  [data-scroll-section="manifeste"] .manifeste__col-image figcaption {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    padding: 0;
    margin-top: var(--space-2);
  }
}