/* ==========================================================================
   Page Accueil — héro + section « Pourquoi fabriquer… »
   Cotes issues de la maquette Figma D - Home (1440px)
   ========================================================================== */

/* ---- Héro -------------------------------------------------------------- */

/* Le héro se réduit de façon homothétique : --hero-px vaut 1px à 1440 de
   large et rétrécit avec la fenêtre. Toutes les cotes de la maquette sont
   exprimées dans cette unité, si bien que le titre garde exactement la même
   place sur la photo (zone sombre) à toutes les tailles de fenêtre. */
.hero {
  --hero-px: min(calc(100vw / 1440), 1px);
  position: relative;
  padding-top: calc(180 * var(--hero-px)); /* espace noir entre le menu et la photo */
}

.hero-photo {
  width: 100%;
  aspect-ratio: 1440 / 873;
  object-fit: cover;
}

/* Bloc titre superposé, calé à droite du rail (bord droit à 316px du rail).
   top est mesuré depuis le bas du menu (127 au-dessus du haut de la photo) :
   le sous-titre ne touche jamais la tête de la flûte. */
.hero-title {
  position: absolute;
  top: calc(53 * var(--hero-px));
  left: 0;
  right: 0;
}

.hero-title-block {
  width: calc(456 * var(--hero-px));
  max-width: 100%;
  margin-left: auto;
  margin-right: clamp(0px, 22.5%, 316px);
  text-align: right;
}

.hero-title h1 {
  font-size: calc(38 * var(--hero-px));
  font-weight: 700;
  letter-spacing: calc(1.52 * var(--hero-px));
  line-height: calc(57 * var(--hero-px)); /* 48px de ligne + 9px d'interligne maquette */
  color: var(--color-accent);
}

.hero-title .hero-tagline {
  margin-top: calc(18 * var(--hero-px));
  font-size: calc(22 * var(--hero-px));
  line-height: calc(28 * var(--hero-px));
  color: var(--color-text);
}

/* ---- Section « Pourquoi fabriquer… » ----------------------------------- */

/* Le filet chevauche le bas (noir) de la photo dans la maquette */
.why {
  position: relative;
  margin-top: -44px;
}

.why .why-heading {
  font-size: var(--text-heading-size);
  font-weight: 400;
  line-height: var(--text-heading-line);
  color: var(--color-text);
  max-width: calc(772px + 157px);
  margin: 72px 0;
  padding-left: min(157px, 11%);
}

.why-grid {
  display: grid;
  grid-template-columns: minmax(320px, 456px) minmax(0, 772px);
  justify-content: space-between;
  padding-left: min(157px, 11%);
}

.why-text {
  padding-top: 72px;
}

.why-text p + p {
  margin-top: var(--text-body-line); /* ligne vide entre paragraphes */
}

.why-figure img {
  width: 100%;
  height: auto;
}