/* =========================================================================
   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)); }

.pd__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  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; } }

.pd__media {
  position: sticky;
  top: calc(var(--space-8) + var(--header-h)); /* below the sticky header */
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-inset);
}
@media (max-width: 900px) { .pd__media { position: static; } }
.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 { 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__description p {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 58ch;
}

.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;
  }
}