/* ==========================================================================
   YEM'S — Homepage : sections
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* Plein écran plafonné : sur un grand moniteur, 100svh donnait un hero de
   1100 px que personne ne voit en entier. Le plafond garde la vidéo ample
   sans repousser le reste de la page hors de vue. */
.hero {
  position: relative;
  min-height: min(92svh, 820px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
  overflow: hidden;
  isolation: isolate;
}

/* Placeholder vidéo : dégradé animé « cuir » — remplacer par <video> */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at 78% 18%, rgba(176, 141, 87, 0.30) 0%, transparent 60%),
    radial-gradient(70% 60% at 12% 88%, rgba(140, 90, 60, 0.26) 0%, transparent 62%),
    linear-gradient(168deg, var(--espresso-700) 0%, var(--espresso-900) 62%);
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Deux voiles superposés : l'un assombrit la gauche pour que le texte tienne,
   l'autre le bas pour asseoir la section. La droite reste claire — c'est là que
   se joue la composition de la vidéo.

   Le palier à 0,80 court jusqu'à 52 %, soit la largeur maximale du bloc de
   texte : en dessous, le texte secondaire passerait sous 4,5:1 sur les plans
   les plus clairs de la vidéo. La chute commence là où le texte s'arrête. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to right,
      rgba(20, 16, 13, 0.93) 0%,
      rgba(20, 16, 13, 0.87) 30%,
      rgba(20, 16, 13, 0.80) 52%,
      rgba(20, 16, 13, 0.44) 76%,
      rgba(20, 16, 13, 0.26) 100%
    ),
    linear-gradient(
      to top,
      rgba(20, 16, 13, 0.80) 0%,
      rgba(20, 16, 13, 0.22) 48%,
      rgba(20, 16, 13, 0.38) 100%
    );
}

/* Fil de sellier en filigrane, façon couture d'empeigne */
.hero__stitching {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
}

/* Une seule colonne : la vidéo porte la section, le texte se pose dessus.
   Le max-width empêche les lignes de courir sur toute la largeur en grand écran. */
.hero__inner {
  position: relative;
  display: grid;
  align-items: end;
  width: 100%;
}

.hero__inner > div { max-width: 50ch; }

.hero h1 { margin-block: var(--sp-4) var(--sp-4); max-width: 15ch; }

.hero__pay {
  margin-top: var(--sp-5);
  max-width: 46ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

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

.hero__stats {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--brass-300);
  line-height: 1.1;
}

.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: var(--sp-1);
}

/* Dans le hero, le fond n'est plus l'espresso plein mais la vidéo voilée, plus
   claire. Ce petit texte a donc besoin d'un peu plus d'opacité pour tenir AA
   jusqu'au bord droit du bloc — 0,52 y tomberait à 3,7:1. */
.hero .stat__label,
.hero .scroll-hint { color: rgba(244, 237, 226, 0.72); }

.scroll-hint {
  position: absolute;
  bottom: var(--sp-5);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.scroll-hint__line {
  width: 46px;
  height: 1px;
  background: linear-gradient(to right, var(--brass-400), transparent);
  animation: hint 2.4s var(--ease) infinite;
}

@keyframes hint {
  0%, 100% { transform: scaleX(0.35); transform-origin: left; opacity: 0.5; }
  50%      { transform: scaleX(1);    transform-origin: left; opacity: 1; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .scroll-hint { display: none; }
}

/* --------------------------------------------------------------------------
   RÉCIT — les trois couches de problème
   -------------------------------------------------------------------------- */
.story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.story__lead {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-5);
}

.story p + p { margin-top: var(--sp-4); }

.story__turn {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border-left: 2px solid var(--brass-500);
  background: rgba(122, 94, 51, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.story__turn p { font-size: var(--fs-md); }

/* --------------------------------------------------------------------------
   OBJECTIONS / FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-2); max-width: 720px; margin-inline: auto; }

.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}

.faq details[open] { border-color: rgba(201, 164, 106, 0.42); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: none;
  border-right: 1.5px solid var(--brass-400);
  border-bottom: 1.5px solid var(--brass-400);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 380ms var(--ease);
}

.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.faq__body {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 62ch;
}

.faq__body p + p { margin-top: var(--sp-3); }
.faq__body strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   LISTE DES PREUVES — les 4 détails de fabrication, sous le récit
   -------------------------------------------------------------------------- */
.detail-list { display: flex; flex-direction: column; }

.detail-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-bottom: 1px solid rgba(28, 22, 19, 0.12);
}

.detail-list__item:first-child { border-top: 1px solid rgba(28, 22, 19, 0.12); }

.detail-list__idx {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--brass-600);
  padding-top: 4px;
}

.detail-list__item h3 { margin-bottom: var(--sp-2); }

.detail-list__item p {
  font-size: var(--fs-sm);
  color: var(--text-inverse-muted);
}

/* --------------------------------------------------------------------------
   COLLECTIONS
   -------------------------------------------------------------------------- */
/* Accueil : quatre pièces de front sur grand écran, deux sur tablette, une
   sur téléphone — sans point de rupture à maintenir. Photos carrées : la
   grille perd un cinquième de sa hauteur sans rien perdre en lisibilité. */
.collections__grid {
  --shot-ratio: 1 / 1;
  display: grid;
  gap: var(--sp-5) var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Pages catégorie : trois par rangée, format portrait. On y vient pour
   comparer les pièces, pas pour traverser la page. */
.shop-grid {
  --shot-ratio: 4 / 5;
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* --------------------------------------------------------------------------
   SUR-MESURE (bloc configurateur)
   -------------------------------------------------------------------------- */
.bespoke {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 88% 12%, rgba(176, 141, 87, 0.20) 0%, transparent 58%),
    var(--espresso-800);
}

.bespoke__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.steps { display: flex; flex-direction: column; gap: var(--sp-4); }

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(20, 16, 13, 0.5);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.step:hover {
  border-color: rgba(201, 164, 106, 0.45);
  background: rgba(20, 16, 13, 0.75);
}

.step__num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 164, 106, 0.45);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--brass-300);
  flex: none;
}

.step h4 { margin-bottom: var(--sp-1); }
.step p  { font-size: var(--fs-sm); color: var(--text-muted); }

.bespoke__panel {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--espresso-600), var(--espresso-900));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px dashed rgba(233, 222, 203, 0.14);
  font-size: var(--fs-sm);
}

.spec-row:last-of-type { border-bottom: 0; }
.spec-row dt { color: var(--text-subtle); }
.spec-row dd { color: var(--text); font-weight: 500; text-align: right; }

.swatches { display: flex; gap: var(--sp-2); }

.swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(233, 222, 203, 0.28);
}

.swatch--espresso { background: #3B2F29; }
.swatch--cognac   { background: #8C5A3C; }
.swatch--noir     { background: #1A1614; }
.swatch--sable    { background: #C4B195; }

.swatch.is-active { box-shadow: 0 0 0 2px var(--espresso-900), 0 0 0 3.5px var(--brass-400); }

/* --------------------------------------------------------------------------
   OFFRES
   -------------------------------------------------------------------------- */
.offers { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.offer:hover { transform: translateY(-6px); border-color: var(--border-strong); }

.offer--featured {
  border-color: rgba(201, 164, 106, 0.5);
  background: linear-gradient(165deg, rgba(176, 141, 87, 0.14), var(--espresso-700) 55%);
}

.offer__flag {
  position: absolute;
  top: -11px;
  left: var(--sp-6);
  padding: 0.25rem 0.75rem;
  background: var(--brass-400);
  color: var(--espresso-900);
  border-radius: var(--radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.offer__name { font-family: var(--font-display); font-size: var(--fs-xl); }

.offer__price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--brass-300);
  line-height: 1.1;
}

.offer__price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: var(--sp-1);
}

.offer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block: var(--sp-2) auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.offer__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.offer__list svg {
  width: 15px;
  height: 15px;
  color: var(--brass-400);
  margin-top: 5px;
  flex: none;
}

/* --------------------------------------------------------------------------
   GARANTIE + CARTE D'AUTHENTICITÉ
   -------------------------------------------------------------------------- */
.assurance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.auth-card {
  position: relative;
  aspect-ratio: 1.6 / 1;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--espresso-600) 0%, var(--espresso-900) 100%);
  border: 1px solid rgba(201, 164, 106, 0.35);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transform: rotate(-2deg);
  transition: transform 700ms var(--ease-out-expo);
}

.auth-card:hover { transform: rotate(0deg) translateY(-6px); }

.auth-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(201, 164, 106, 0.4);
  border-radius: var(--radius);
  pointer-events: none;
}

.auth-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  position: relative;
}

.auth-card__label {
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-subtle);
}

.auth-card__serial {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  color: var(--brass-300);
  letter-spacing: 0.04em;
}

.auth-card__foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.guarantee-list { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-5); }

.guarantee-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}

.guarantee-list svg { width: 20px; height: 20px; color: var(--brass-400); margin-top: 3px; flex: none; }
.guarantee-list strong { display: block; font-weight: 600; margin-bottom: 2px; }
.guarantee-list p { font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 900px) {
  .auth-card { transform: none; }
}

/* --------------------------------------------------------------------------
   TÉMOIGNAGES
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   CTA FINAL
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(176, 141, 87, 0.22) 0%, transparent 62%),
    var(--espresso-900);
}

.cta h2 { max-width: 18ch; margin-inline: auto; }

.cta__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   ZONE PLACEHOLDER — signale au client ce qui reste à fournir
   -------------------------------------------------------------------------- */
.todo-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem 0.65rem;
  border: 1px dashed rgba(201, 164, 106, 0.45);
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-300);
  background: rgba(176, 141, 87, 0.08);
}

.section--light .todo-note {
  color: var(--brass-600);
  border-color: rgba(122, 94, 51, 0.55);
}