/* =========================================================================
   Pages — hero, page-head variants, and the thank-you confirm layout.
   Anything only used by a single page lives here.
   ========================================================================= */

/* ---- Home hero --------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--space-9), 12vw, calc(var(--space-10) * 1.4));
  background:
    radial-gradient(60% 60% at 15% 20%, rgba(200,155,74,0.13), transparent 70%),
    radial-gradient(50% 50% at 85% 80%, rgba(126,47,36,0.20), transparent 70%),
    linear-gradient(180deg, #0f0d0a 0%, var(--bg) 60%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  /* subtle top hairline glow */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bronze-deep), transparent);
  opacity: 0.6;
}

/* Video-backed hero: <video> covers the section, a scrim keeps text legible. */
.hero--video { min-height: 82vh; display: flex; align-items: center; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.85) contrast(1.05) brightness(0.75);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 70% at 20% 30%, rgba(12,11,9,0.55), transparent 70%),
    linear-gradient(180deg, rgba(12,11,9,0.55) 0%, rgba(12,11,9,0.35) 40%, rgba(12,11,9,0.85) 100%);
}
/* Poster twin of the video (same cover + grade) painted beneath it. With JS
   the video stays transparent until `playing` fires, then crossfades in over
   this still — so the WebKit ▶ glyph can never flash, and a refused autoplay
   (Low Power Mode) just leaves the still. Without JS the video renders as
   before. */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.85) contrast(1.05) brightness(0.75);
}
.js .hero__video { opacity: 0; transition: opacity 0.9s var(--ease); }
.js .hero__video.is-playing { opacity: 1; }
/* Belt and braces: WebKit paints a big ▶ on inline videos that haven't
   started — never wanted on decorative autoplay backgrounds. */
.hero__video::-webkit-media-controls-start-playback-button,
.source-film video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.hero--video .hero__inner { position: relative; z-index: 2; }

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 820px;
}

.hero__title {
  font-size: var(--step-5);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
}

.hero__title-em {
  font-style: italic;
  color: var(--gold);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
  max-width: 58ch;
  margin-top: var(--space-2);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.hero__proof {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  list-style: none;
  padding: var(--space-5) 0 0;
  margin-top: var(--space-7);
  border-top: 1px solid var(--line);
}
.hero__proof li {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-left: 1px solid var(--line);
}
.hero__proof li:first-child { border-left: 0; padding-left: 0; }
/* Stacked on phones: the desktop VERTICAL separators (left border + inset)
   become horizontal rules, every item flush with the left edge. */
@media (max-width: 640px) {
  .hero__proof { flex-direction: column; }
  .hero__proof li {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: var(--space-4) 0;
  }
  .hero__proof li:first-child { border-top: 0; padding-top: 0; }
}
.hero__proof strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hero__proof span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Page head (about / shop / newsletter) ----------------------------- */
.page-head__title {
  margin-top: var(--space-3);
  max-width: 22ch;
}
.page-head__lede {
  margin-top: var(--space-4);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---- Thank-you / confirmation ------------------------------------------ */
.confirm {
  padding-block: clamp(var(--space-9), 12vw, var(--space-10));
  text-align: center;
}
.confirm__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.confirm__heading {
  font-size: var(--step-4);
  max-width: 20ch;
}
.confirm__lede {
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}
.confirm__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-4);
}

/* ---- "The source" editorial strip (home) ------------------------------- */
.source-section { background: var(--bg-inset); border-block: 1px solid var(--line); }

.source-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 900px) { .source-strip { grid-template-columns: repeat(2, 1fr); } }

.source-tile {
  position: relative;
  /* Landscape tiles: six of them at 3-up — portrait made each one huge. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
/* Phones keep the ORIGINAL portrait tiles (this override must sit AFTER the
   base rule — equal specificity, last one wins). */
@media (max-width: 900px) {
  .source-tile { aspect-ratio: 3 / 4; }
}
.source-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05) brightness(0.85);
  transition: transform 600ms var(--ease), filter var(--dur) var(--ease);
}
.source-tile:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.05) brightness(0.95); }
.source-tile figcaption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.35em 0.65em;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.source-film {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.source-film video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-strong);
  background: #000;
}
.source-film__caption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
}
@media (max-width: 800px) {
  .source-film { grid-template-columns: 1fr; }
}

/* ---- Product detail (Oscar override) ---------------------------------- */
.pd { padding-block: clamp(var(--space-8), 8vw, var(--space-10)); }

/* Desktop: photos then description down the left, buy box on the right.
   The 1fr second row keeps the buy box's height out of the photo row, so the
   description starts right under the gallery. Phone: photos → buy box →
   description, the CTA never pushed below a long text. */
.pd__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "media body" "story body";
  column-gap: clamp(var(--space-6), 5vw, var(--space-9));
  row-gap: var(--space-8);
  align-items: start;
}
/* Grid blowout guard: a child's min-content (long button, wide table) must
   shrink with the track, never widen the page. */
.pd__grid > * { min-width: 0; }
@media (max-width: 900px) {
  .pd__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "media" "body" "story";
    row-gap: var(--space-7);
  }
}

/* No longer sticky: the description now sits under the gallery. */
.pd__media {
  grid-area: media;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-inset);
}
.pd__story { grid-area: story; display: flex; flex-direction: column; gap: var(--space-6); }
.pd__story-part + .pd__story-part {
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}
.pd__story-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0;
  margin: 0 0 var(--space-4);
}
.pd__story .prose p,
.pd__story .prose li {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 62ch;
}
.pd__hero-img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.95) contrast(1.05);
}
.pd__hero-mark {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(226, 189, 111, 0.10), transparent 60%),
    linear-gradient(180deg, #1c1810, #0f0d09);
  font-family: var(--font-display);
}
/* Faint monogram backdrop + big high-contrast "Photo à venir". */
.pd__hero-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  color: color-mix(in oklab, var(--bronze) 18%, transparent);
}
.pd__hero-soon {
  position: relative;
  z-index: 1;
  padding-inline: var(--space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #efe8da;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.pd__body { grid-area: body; display: flex; flex-direction: column; gap: var(--space-5); }

.pd__body .eyebrow a { color: inherit; }
.pd__body .eyebrow a:hover { color: var(--gold); }

.pd__title {
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}

.pd__price {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  margin-top: var(--space-2);
}
.pd__price-amount {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--gold);
  font-weight: 600;
}
.pd__price-unit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

.pd__delivery-from {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze);
}

.pd__badge {
  display: inline-block;
  padding: 0.35em 0.8em;
  background: var(--oxblood);
  color: var(--oxblood-ink);   /* bone on oxblood — readable */
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.pd__badge--unavail {
  background: var(--bg-inset);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}

.pd__reserve {
  padding: var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-card) 90%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pd__reserve-lede {
  color: var(--ink-soft);
  max-width: 52ch;
}
.pd__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.pd__reserve-note {
  font-size: var(--step--1);
  max-width: 58ch;
}

.pd__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  margin: 0;
}
.pd__facts > div { display: flex; flex-direction: column; gap: 0.25em; }
.pd__facts dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pd__facts dd { margin: 0; color: var(--ink); font-size: var(--step-0); }

/* ---- Client invoice (account « Factures » detail) ----------------------- */
/* The sheet is deliberately ivory on screen AND on paper — it is a document
   standing on the dark page, and it prints as-is. */
.invoice-wrap { max-width: 820px; }
.invoice-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.invoice-sheet {
  background: #f6f1e7;
  color: #1c1810;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-9));
  box-shadow: var(--shadow-2);
}
.invoice-sheet p { margin: 0; }
.invoice-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(28, 24, 16, 0.2);
}
.invoice-brand {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.invoice-id { text-align: right; }
.invoice-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #7a6a4f;
}
.invoice-number {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 600;
}
.invoice-mut { color: #5d5343; font-size: var(--step--1); }
.invoice-client { margin-top: var(--space-5); }
.invoice-lines {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-6);
}
.invoice-lines th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: #7a6a4f;
  text-align: left;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid rgba(28, 24, 16, 0.35);
}
.invoice-lines td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid rgba(28, 24, 16, 0.12);
  vertical-align: top;
}
.invoice-num { text-align: right; white-space: nowrap; }
.invoice-note { display: block; font-size: var(--step--1); color: #5d5343; }
.invoice-totals {
  margin-top: var(--space-5);
  margin-left: auto;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.invoice-total-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--step--1);
  color: #5d5343;
}
.invoice-total-main {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: #1c1810;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(28, 24, 16, 0.35);
}
.invoice-vat { margin-top: var(--space-6); font-size: var(--step--1); color: #5d5343; }

@media print {
  .site-header, .site-footer, .invoice-actions { display: none !important; }
  body { background: #fff; }
  .section { padding: 0; }
  .invoice-wrap { max-width: none; }
  .invoice-sheet {
    background: #fff;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}