/* =========================================================
   Accueil — Antoine Gérard
   Styles spécifiques de la page d'accueil.
   Réutilise massivement page.css + about.css (painting,
   section__head, miroir, stats-big, newsletter, appearances…)
   ========================================================= */


/* ============================================================
   1. HERO — fond Dark
   Identité + accroche + CTA newsletter dès l'arrivée.
   ============================================================ */
.section--home-hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: clamp(120px, 14vw, 200px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.section--home-hero .container { position: relative; z-index: 2; }

.section--home-hero .painting--home-hero {
  top: 4%; right: -5%;
  width: clamp(240px, 32vw, 460px);
  height: clamp(320px, 42vw, 600px);
}
.section--home-hero .painting--home-hero-2 {
  bottom: -6%; left: -4%;
  width: clamp(160px, 18vw, 280px);
  height: clamp(220px, 24vw, 360px);
  opacity: 0.4;
}

.home-hero__signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 72px);
  color: var(--color-stone);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
}
.home-hero__signature::before {
  content: "";
  display: block;
  width: 32px; height: 1px;
  background: var(--color-velvet);
}
.home-hero__signature strong {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-velvet);
  margin-right: 12px;
}

.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 8.8vw, 140px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 clamp(28px, 3vw, 44px);
  max-width: 18ch;
  text-wrap: balance;
  color: var(--color-cream);
}
.home-hero__title em { color: var(--color-velvet); font-style: italic; }
.home-hero__title [data-variant] { display: block; }
.home-hero__title [data-variant][hidden] { display: none; }

.home-hero__sub {
  max-width: 56ch;
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.5;
  color: var(--color-stone);
  margin: 0 0 clamp(36px, 4vw, 56px);
}
.home-hero__sub em { color: var(--color-cream); font-style: italic; }
.home-hero__sub strong { color: var(--color-cream); font-weight: 600; }

.home-hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.home-hero__cta-secondary {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-stone);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 4px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.home-hero__cta-secondary:hover {
  color: var(--color-cream);
  border-color: var(--color-cream);
}

.home-hero__mention {
  font-size: 13px;
  color: var(--color-stone);
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 48ch;
}
.home-hero__mention strong { color: var(--color-cream); font-weight: 600; }

.home-hero__scroll {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: 32px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--color-stone);
  text-decoration: none;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.home-hero__scroll-line {
  display: block;
  width: 56px; height: 1px;
  background: var(--color-stone);
}


/* ============================================================
   1bis. HERO — variante PHOTO (Accueil v2)
   Portrait Antoine en fond plein cadre. Scrim cinématique
   focalisé sur la moitié supérieure gauche : titre + CTA
   restent lisibles, le personnage reste visible côté droit.
   ============================================================ */
/* ============================================================
   HERO — variante rayures (fond motif diagonal signature)
   ============================================================ */
.section--home-hero-stripes {
  background: var(--color-abyss);
}
.home-hero__stripes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(219, 197, 183, 0.06) 0 8px,
      transparent 8px 20px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(116, 5, 29, 0.16) 0 8px,
      transparent 8px 20px
    );
  mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, rgba(0,0,0,1), transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, rgba(0,0,0,1), transparent 85%);
}

.section--home-hero-photo {
  /* baseline : on conserve la hauteur héritée de .section--home-hero
     mais on met la photo en couche 1, le contenu en couche 2 */
  background: var(--color-abyss);
  min-height: 100vh;
  padding-top: clamp(140px, 16vw, 220px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

.home-hero-photo__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.home-hero-photo__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  /* Zoom ancré à gauche : on masque ~18% sur la droite et on pousse
     Antoine plus à droite du cadre, sans le rapprocher du texte. */
  transform: scale(1.22);
  transform-origin: 0% 50%;
  filter: saturate(1.05) contrast(1.02);
}

/* Scrim principal : dégradé diagonal qui s'éteint vite vers la droite
   pour laisser Antoine clairement visible, tout en gardant la zone
   texte (haut-gauche) lisible. */
.home-hero-photo__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(18, 1, 6, 0.92) 0%,
      rgba(18, 1, 6, 0.78) 20%,
      rgba(18, 1, 6, 0.42) 36%,
      rgba(18, 1, 6, 0.12) 50%,
      rgba(18, 1, 6, 0)    62%
    ),
    linear-gradient(
      to bottom,
      rgba(18, 1, 6, 0.48) 0%,
      rgba(18, 1, 6, 0.18) 30%,
      rgba(18, 1, 6, 0)    55%
    );
}

/* Vignette discrète pour rattacher les bords au reste du site */
.home-hero-photo__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 90% at 50% 100%,
      rgba(18, 1, 6, 0.6) 0%,
      rgba(18, 1, 6, 0) 50%
    );
  mix-blend-mode: multiply;
}

/* On laisse le contenu prendre le dessus */
.section--home-hero-photo > .container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
}

/* Texte cantonné à la moitié supérieure-gauche pour respecter
   le cadrage de la photo (le personnage occupe le bas-droit). */
.section--home-hero-photo .home-hero__title {
  max-width: 14ch;
  font-size: clamp(44px, 7.4vw, 116px);
  text-shadow: 0 2px 28px rgba(18, 1, 6, 0.55);
}
.section--home-hero-photo .home-hero__sub {
  max-width: 42ch;
  color: var(--color-cream);
  opacity: 0.92;
  text-shadow: 0 1px 14px rgba(18, 1, 6, 0.6);
}
.section--home-hero-photo .home-hero__sub em { color: var(--color-stone); }
.section--home-hero-photo .home-hero__mention {
  max-width: 44ch;
  color: var(--color-stone);
  text-shadow: 0 1px 10px rgba(18, 1, 6, 0.6);
}

/* Signature : on remonte un peu pour laisser respirer */
.section--home-hero-photo .home-hero__signature {
  margin-bottom: clamp(32px, 4.5vw, 60px);
  color: var(--color-stone);
}

/* Scroll indicator : on l'aligne sur la photo, fond léger pour lisibilité */
.section--home-hero-photo .home-hero__scroll {
  bottom: 28px;
  z-index: 3;
  padding: 10px 16px 10px 0;
}

/* Bandeau de crédit photo discret — bas-droite, sur la zone claire */
.section--home-hero-photo::after {
  content: "📷  bibliothèque · 2025";
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  bottom: 28px;
  z-index: 3;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone);
  opacity: 0.55;
  pointer-events: none;
}

/* Responsive — passe à un scrim vertical et photo cadrée en bas */
@media (max-width: 820px) {
  .home-hero-photo__media img {
    object-position: 60% 30%;
    /* on relâche le zoom-gauche en mobile : la photo se cadre déjà
       verticalement, inutile d'enfoncer Antoine hors-cadre */
    transform: scale(1.08);
    transform-origin: 50% 50%;
  }
  .home-hero-photo__scrim {
    background:
      linear-gradient(
        to bottom,
        rgba(18, 1, 6, 0.92) 0%,
        rgba(18, 1, 6, 0.78) 30%,
        rgba(18, 1, 6, 0.55) 50%,
        rgba(18, 1, 6, 0.25) 75%,
        rgba(18, 1, 6, 0)    100%
      );
  }
  .section--home-hero-photo .home-hero__title { max-width: 100%; }
  .section--home-hero-photo .home-hero__sub   { max-width: 100%; }
  .section--home-hero-photo::after { display: none; }
}


/* ============================================================
   2. POUR QUI — fond Medium
   Question + 4 situations. On reprend l'esprit du miroir
   de ddc.html mais en plus aéré.
   ============================================================ */
.section--home-pourqui { position: relative; overflow: hidden; }
.section--home-pourqui .painting--pourqui {
  top: 8%; right: -3%;
  width: clamp(180px, 22vw, 340px);
  height: clamp(260px, 30vw, 460px);
  opacity: 0.5;
}

.section--home-pourqui .section__head {
  max-width: 720px;
}
.section--home-pourqui .section__title {
  font-size: clamp(40px, 6vw, 88px);
}

.home-mirror {
  display: grid;
  gap: 0;
  max-width: 980px;
  position: relative;
  z-index: 1;
}
.home-mirror__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-md);
  padding: clamp(28px, 3.5vw, 44px) 0;
  border-top: 1px solid var(--border-soft);
  align-items: baseline;
}
.home-mirror__item:last-child { border-bottom: 1px solid var(--border-soft); }

.home-mirror__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--color-velvet);
  line-height: 1;
}
.home-mirror__copy {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1.22;
  color: var(--color-cream);
  margin: 0;
  text-wrap: pretty;
  max-width: 32ch;
}
.home-mirror__copy em { color: var(--color-stone); font-style: italic; }
.home-mirror__copy strong { color: var(--color-velvet); font-weight: 400; font-style: italic; }

@media (max-width: 640px) {
  .home-mirror__item { grid-template-columns: 56px 1fr; }
}


/* ============================================================
   3. CE QUE JE FAIS — fond Dark
   3 blocs : Stratégie / Copywriting / Personal Branding
   ============================================================ */
.section--triptyque { position: relative; overflow: hidden; }
.section--triptyque .painting--tri {
  bottom: 6%; left: -4%;
  width: clamp(180px, 20vw, 320px);
  height: clamp(240px, 26vw, 400px);
  opacity: 0.35;
}

.triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: clamp(56px, 7vw, 96px);
}
.triptyque__card {
  position: relative;
  padding: clamp(28px, 3.5vw, 48px);
  background: var(--color-medium);
  border: 1px solid var(--border-soft);
  border-top: 2px solid var(--color-rich);
  display: grid;
  gap: var(--space-md);
  align-content: start;
  transition: border-color var(--dur-medium), background var(--dur-medium);
}
.triptyque__card:hover {
  border-top-color: var(--color-velvet);
  background: rgba(81, 2, 20, 0.85);
}
.triptyque__num {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-soft);
}
.triptyque__num-big {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  color: var(--color-velvet);
  letter-spacing: -0.02em;
}
.triptyque__num-label {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-stone);
  text-align: right;
}
.triptyque__name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-cream);
  margin: 0;
  text-transform: none;
  letter-spacing: -0.01em;
}
.triptyque__copy {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.55;
  color: var(--color-stone);
  margin: 0;
}
.triptyque__copy em { color: var(--color-cream); font-style: italic; }
.triptyque__copy strong { color: var(--color-cream); font-weight: 600; }

@media (max-width: 960px) {
  .triptyque { grid-template-columns: 1fr; gap: var(--space-sm); }
}


/* ============================================================
   4. MASTERCLASS PHARE — fond Cream (rupture)
   Le point de bascule.
   ============================================================ */
.section--masterclass {
  position: relative;
  overflow: hidden;
  background: var(--color-parchment);
  color: var(--color-dark);
}
.section--masterclass .painting--mc {
  top: 6%; right: -4%;
  width: clamp(200px, 24vw, 380px);
  height: clamp(280px, 32vw, 500px);
}
.section--masterclass .painting--mc-2 {
  bottom: 4%; left: -3%;
  width: clamp(140px, 16vw, 240px);
  height: clamp(180px, 20vw, 300px);
  opacity: 0.35;
}

.masterclass {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.masterclass__copy { display: grid; gap: var(--space-md); }
.masterclass__kicker {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-deep-rose);
  margin: 0;
}
.masterclass__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  color: var(--color-dark);
  text-wrap: balance;
  max-width: 14ch;
}
.masterclass__title em { color: var(--color-carmine); font-style: italic; }

.masterclass__desc {
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
  color: var(--color-dark);
  opacity: 0.82;
  margin: 0;
  max-width: 52ch;
}
.masterclass__desc em { font-style: italic; color: var(--color-deep-rose); opacity: 1; }
.masterclass__desc strong { font-weight: 600; }

.masterclass__cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.masterclass__secondary {
  font-size: 13px;
  color: var(--color-dark);
  opacity: 0.7;
  text-decoration: none;
  border-bottom: 1px solid rgba(48, 3, 14, 0.3);
  padding-bottom: 3px;
}
.masterclass__secondary:hover { opacity: 1; border-color: var(--color-dark); }

/* Right column — product card */
.masterclass__card {
  padding: clamp(32px, 4vw, 48px);
  background: var(--color-dark);
  color: var(--color-cream);
  border-top: 3px solid var(--color-velvet);
  display: grid;
  gap: var(--space-md);
  align-content: start;
  position: relative;
}
.masterclass__card-label {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-velvet);
}
.masterclass__card-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0;
}
/* La carte est sur fond sombre dans une section à fond clair : on neutralise
   la règle générique `.section[data-bg="light"] h3` qui rendrait le titre
   illisible (foncé sur foncé). Sélecteur volontairement spécifique pour primer. */
.section[data-bg="light"] .masterclass__card-name {
  color: var(--color-parchment);
}
.masterclass__card-list {
  display: grid;
  gap: 8px;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
}
.masterclass__card-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  font-size: 14px;
  color: var(--color-stone);
  line-height: 1.45;
}
.masterclass__card-list li::before {
  content: "→";
  color: var(--color-velvet);
  font-family: var(--font-display);
  font-style: italic;
}
.masterclass__card-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
}
.masterclass__card-price-amount {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--color-velvet);
  letter-spacing: -0.02em;
}
.masterclass__card-price-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-stone);
  text-align: right;
}

@media (max-width: 880px) {
  .masterclass { grid-template-columns: 1fr; gap: var(--space-lg); }
  .masterclass__title { max-width: 100%; }
}


/* ============================================================
   5. PREUVE SOCIALE — fond Dark
   Chiffres + apparitions publiques. Réutilise stats-big.
   ============================================================ */
.section--home-preuve { position: relative; overflow: hidden; }
.section--home-preuve .painting--preuve {
  top: 8%; left: -3%;
  width: clamp(160px, 18vw, 280px);
  height: clamp(220px, 24vw, 360px);
  opacity: 0.35;
}
.section--home-preuve .painting--preuve-2 {
  bottom: 6%; right: -4%;
  width: clamp(180px, 22vw, 320px);
  height: clamp(240px, 28vw, 420px);
  opacity: 0.4;
}


/* ============================================================
   6. NEWSLETTER (Hero 2) — fond Abyss
   Section dédiée, plus profonde, intime.
   ============================================================ */
.section--newsletter-hero {
  position: relative;
  overflow: hidden;
}
.section--newsletter-hero .painting--ns-1 {
  top: -4%; right: -5%;
  width: clamp(280px, 36vw, 520px);
  height: clamp(360px, 44vw, 660px);
  opacity: 0.5;
}
.section--newsletter-hero .painting--ns-2 {
  bottom: -3%; left: -4%;
  width: clamp(180px, 22vw, 320px);
  height: clamp(240px, 28vw, 420px);
  opacity: 0.35;
}

.newsletter-hero {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-hero__kicker {
  font-family: 'Courier New', monospace;
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-velvet);
  margin: 0 0 var(--space-md);
}
.newsletter-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 400;
  margin: 0 auto clamp(36px, 4vw, 56px);
  max-width: 16ch;
  text-wrap: balance;
}
.newsletter-hero__title em { color: var(--color-velvet); font-style: italic; }

.newsletter-hero__desc {
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--color-stone);
  margin: 0 auto clamp(40px, 5vw, 64px);
  max-width: 54ch;
}
.newsletter-hero__desc em { color: var(--color-cream); font-style: italic; }
.newsletter-hero__desc strong { color: var(--color-cream); font-weight: 600; }

.newsletter-hero__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 auto var(--space-md);
  max-width: 520px;
  border: 1px solid var(--color-rich);
  background: var(--color-dark);
  transition: border-color var(--dur-fast);
  text-align: left;
}
.newsletter-hero__form:focus-within { border-color: var(--color-velvet); }
.newsletter-hero__form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.newsletter-hero__form input {
  background: transparent;
  border: 0;
  padding: 20px 22px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cream);
  outline: none;
  text-align: left;
}
.newsletter-hero__form > input { border-bottom: 1px solid var(--color-rich); }
.newsletter-hero__form input::placeholder { color: var(--color-stone); opacity: 0.6; }
.newsletter-hero__form button {
  border: 0;
  background: var(--color-velvet);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 0 28px;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--dur-fast);
}
.newsletter-hero__form button:hover { background: var(--color-carmine); }
.newsletter-hero__form button .btn__arrow { transition: transform var(--dur-fast); }
.newsletter-hero__form button:hover .btn__arrow { transform: translateX(4px); }

.newsletter-hero__mention {
  font-size: 13px;
  color: var(--color-stone);
  opacity: 0.7;
  margin: 0 auto;
  max-width: 48ch;
}

@media (max-width: 600px) {
  .newsletter-hero__form-row { grid-template-columns: 1fr; }
  .newsletter-hero__form-row input { border-bottom: 1px solid var(--color-rich); }
  .newsletter-hero__form button { padding: 18px 22px; justify-content: center; }
}


/* ============================================================
   7. À PROPOS — APERÇU — fond Medium
   Photo + 3-4 lignes + lien.
   ============================================================ */
.section--about-teaser { position: relative; overflow: hidden; }
.section--about-teaser .painting--about-teaser {
  bottom: -4%; right: -4%;
  width: clamp(200px, 24vw, 360px);
  height: clamp(280px, 32vw, 480px);
  opacity: 0.35;
}

.about-teaser {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.about-teaser__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(219, 197, 183, 0.10) 0 10px,
      transparent 10px 22px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(116, 5, 29, 0.18) 0 10px,
      transparent 10px 22px
    ),
    var(--color-abyss);
  border: 1px solid var(--border-soft);
  display: grid;
  place-items: center;
}
.about-teaser__photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(219, 197, 183, 0.18);
  pointer-events: none;
}
.about-teaser__photo--filled {
  background: var(--color-abyss);
}
.about-teaser__photo--filled::after { display: none; }
.about-teaser__photo--filled img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-teaser__photo-label {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(219, 197, 183, 0.65);
  text-align: center;
  padding: 10px 16px;
  background: rgba(18, 1, 6, 0.7);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.about-teaser__copy { display: grid; gap: var(--space-md); align-content: center; }
.about-teaser__kicker {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-velvet);
}
.about-teaser__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.about-teaser__title em { color: var(--color-velvet); font-style: italic; }
.about-teaser__body {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--color-stone);
  margin: 0;
  max-width: 52ch;
}
.about-teaser__body em { color: var(--color-cream); font-style: italic; }
.about-teaser__body strong { color: var(--color-cream); font-weight: 600; }
.about-teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-velvet);
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding-top: var(--space-sm);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--border-soft);
  justify-self: start;
  font-weight: 600;
}
.about-teaser__link .btn__arrow { transition: transform var(--dur-fast); }
.about-teaser__link:hover .btn__arrow { transform: translateX(4px); }

@media (max-width: 820px) {
  .about-teaser { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about-teaser__photo { max-width: 360px; margin: 0 auto; aspect-ratio: 4/5; width: 100%; }
}


/* ============================================================
   8. CATALOGUE — APERÇU — fond Dark
   3 mini-cartes preview produits.
   ============================================================ */
.section--catalogue-teaser { position: relative; overflow: hidden; }
.section--catalogue-teaser .painting--cat {
  top: 8%; right: -3%;
  width: clamp(160px, 18vw, 280px);
  height: clamp(220px, 24vw, 360px);
  opacity: 0.35;
}

.section--catalogue-teaser .section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  max-width: 1100px;
}
.section--catalogue-teaser .section__title { max-width: 14ch; }
.cat-teaser__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--color-stone);
  margin: 0;
  max-width: 46ch;
  padding-bottom: 8px;
}
.cat-teaser__lead em { color: var(--color-cream); font-style: italic; }

.cat-teaser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.cat-teaser__card {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  background: var(--color-medium);
  border: 1px solid var(--border-soft);
  text-decoration: none;
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  transition: border-color var(--dur-medium), transform var(--dur-medium);
  min-height: 280px;
}
.cat-teaser__card:hover {
  border-color: var(--color-velvet);
  transform: translateY(-2px);
}
.cat-teaser__cat {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-velvet);
}
.cat-teaser__name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-cream);
  margin: 0;
  text-transform: none;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.cat-teaser__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-stone);
  margin: 0;
}
.cat-teaser__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
}
.cat-teaser__price {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  color: var(--color-cream);
  letter-spacing: -0.01em;
}
.cat-teaser__price-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-stone);
}
.cat-teaser__arrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-velvet);
  font-size: 18px;
  transition: transform var(--dur-fast);
}
.cat-teaser__card:hover .cat-teaser__arrow { transform: translateX(4px); }

.cat-teaser__cta {
  display: flex;
  justify-content: center;
}

@media (max-width: 880px) {
  .cat-teaser__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   9. CTA FINAL — fond Abyss
   Dernière phrase qui claque + un seul bouton.
   ============================================================ */
.section--cta-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: clamp(120px, 16vw, 240px);
  padding-bottom: clamp(120px, 16vw, 240px);
}
.section--cta-final .painting--final {
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(380px, 50vw, 720px);
  height: clamp(420px, 56vw, 820px);
  opacity: 0.32;
  mix-blend-mode: screen;
}
.section--cta-final .painting--final-2 {
  bottom: 4%; right: -4%;
  width: clamp(160px, 20vw, 280px);
  height: clamp(220px, 26vw, 380px);
  opacity: 0.32;
}

.cta-final {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.cta-final__kicker {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--color-velvet);
  display: inline-block;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.cta-final__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.5vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 auto clamp(48px, 6vw, 80px);
  max-width: 14ch;
  text-wrap: balance;
}
.cta-final__title em { color: var(--color-velvet); font-style: italic; }

.cta-final__btn {
  font-size: 16px;
  padding: 22px 38px;
}
.cta-final__signoff {
  margin: clamp(48px, 6vw, 80px) auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--color-stone);
  letter-spacing: 0.02em;
  max-width: 48ch;
}


/* ============================================================
   NAV — Variant pour la page d'accueil (label discret)
   ============================================================ */
.nav__home-label {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--color-stone);
}
@media (max-width: 800px) {
  .nav__home-label { display: none; }
}