/* =====================================================================
   Fotova Creation — page d'accueil.
   Une photographie ouvre la page, les dernières pièces suivent, le
   récit vient après : on sait ce qui est fait ici avant de lire pourquoi.
   ===================================================================== */

/* --- Ouverture ----------------------------------------------------------- */

.hero { position: relative; }

.hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: calc(100dvh - var(--header-h));
  overflow: hidden;
  background: var(--c-cream);
}

@media (min-width: 48rem) {
  .hero__frame { aspect-ratio: 16 / 9; }
}

@media (min-width: 75rem) {
  .hero__frame { aspect-ratio: 21 / 9; }
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Voile sombre sous le texte : c'est lui qui garantit le contraste,
   quelle que soit la photographie posée en bandeau. Mesuré sur la
   bannière en cachemire écru, la plus pâle qu'on puisse poser là : le
   surtitre tombait à 3,13:1, sous les 4,5:1 exigés pour du petit texte.
   Le voile a donc été renforcé là où il est le plus faible — à mi-
   hauteur, où se lisent le surtitre et le titre. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(16, 14, 13, 0.70) 0%,
              rgba(16, 14, 13, 0.40) 40%,
              rgba(16, 14, 13, 0) 72%);
}

.hero__content {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: var(--gutter);
  padding-bottom: clamp(var(--sp-6), 4vw, var(--sp-12));
  color: var(--c-surface);
}

.hero__eyebrow {
  color: var(--c-surface);
  /* Le surtitre n'est plus atténué : à 11 pixels, le moindre retrait
     le fait passer sous le seuil de lisibilité sur une photographie
     claire. Sa discrétion tient à son corps, pas à sa transparence. */
  margin-bottom: var(--sp-3);
}

.hero__title {
  color: var(--c-surface);
  font-size: var(--fs-display);
  max-width: 16ch;
}

.hero__link {
  display: inline-flex;
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid currentColor;
  color: var(--c-surface);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}

/* --- En-têtes de section -------------------------------------------------- */

.section { padding-block: var(--section-y) 0; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--edge) var(--sp-6);
}

/* Le titre de section ne rivalise pas avec les photographies : il les
   annonce, en petites capitales. */
.section__title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink);
}

.section__link {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--c-sand);
  padding-bottom: 2px;
}
.section__link:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }

/* Sur l'accueil, la grille est suivie d'une autre section : elle n'a pas
   à réserver l'espace du pied de page. */
.section .pieces { padding-bottom: 0; }

/* --- Bande atelier -------------------------------------------------------- */

/* La photographie accompagne le récit, elle ne le domine plus. En grille
   1fr 1fr sur toute la page elle atteignait 885 px de large pour 1106 de
   haut, quand le texte à côté n'en faisait que 269 : la colonne de droite
   flottait au milieu du vide. Le bloc est désormais ramené à une mesure
   lisible et centré, et la photographie prend la largeur d'une vignette du
   catalogue — les deux hauteurs se répondent enfin. */
.story {
  --story-photo: 23rem;
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--section-y);
  margin-inline: auto;
  max-width: 68rem;
  padding: 0 var(--edge);
  align-items: center;
}

/* Sur une colonne unique, la photo est plafonnée puis centrée : pleine
   largeur, elle faisait le double d'une vignette, qui n'occupe là qu'une
   demi-largeur sur deux colonnes. */
.story__frame {
  aspect-ratio: 4 / 5;
  /* La largeur est explicite : une marge automatique empêche un élément de
     grille de s'étirer, et le cadre retombait alors à zéro. */
  width: 100%;
  max-width: 20rem;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-image);
  background: var(--c-cream);
}
.story__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Ce bloc suit la règle de base : à spécificité égale c'est l'ordre du
   fichier qui tranche, et un plafond levé avant d'être posé ne lèverait
   rien. */
@media (min-width: 60rem) {
  .story {
    grid-template-columns: var(--story-photo) minmax(0, 1fr);
    gap: clamp(var(--sp-8), 5vw, var(--sp-24));
  }
  /* La colonne dicte la largeur : le plafond du mobile ne s'y applique plus. */
  .story__frame { max-width: none; }
}

.story__title {
  font-size: var(--fs-h2);
  margin-top: var(--sp-3);
}

.story__rule { margin-block: var(--sp-6); }

.story__text p { color: var(--c-ink-muted); max-width: var(--measure); }

.story__cta { margin-top: var(--sp-8); }

/* --- Bande contact -------------------------------------------------------- */

.pledge {
  margin-top: var(--section-y);
  padding: clamp(var(--sp-12), 8vw, var(--sp-24)) var(--gutter);
  background: var(--c-surface-warm);
  text-align: center;
}

.pledge__title {
  font-size: var(--fs-h2);
  max-width: 22ch;
  margin-inline: auto;
}

.pledge__text {
  margin: var(--sp-6) auto 0;
  max-width: 40ch;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

.pledge__cta { margin-top: var(--sp-8); }