/**
 * layout.css
 * Grille, conteneurs et utilitaires de mise en page.
 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold-ink);
}

section {
  position: relative;
}

.section-pad {
  padding-block: var(--space-section);
}

.section-pad-sm {
  padding-block: var(--space-section-sm);
}

.bg-charcoal {
  background: var(--color-charcoal);
  color: var(--color-ivory);
}

/* Passé en ivoire le 2026-09-04 (retour d'usage : doré peu lisible sur
   fond charbon pour une utilisatrice de 65 ans) — voir PROJET-NOTES.md
   et form.css (.form-group__label, même correction). */
.bg-charcoal .eyebrow {
  color: var(--color-ivory);
}

.bg-ivory {
  background: var(--color-ivory);
  color: var(--color-ink);
}

/* Variante légèrement plus foncée de .bg-ivory : un fond très
   légèrement teinté pour faire ressortir les écritures, sans jamais
   devenir un bloc sombre. Ajoutée le 2026-08-24 pour la section
   "Imaginez votre expérience" (également utilisée par la section
   Instants sur mariages.html). */
.bg-ivory-dim {
  background: var(--color-ivory-dim);
  color: var(--color-ink);
}

/* Équivalent sombre de .bg-ivory-dim — un cran plus clair que
   .bg-charcoal, pour faire ressortir un bloc de texte (ex. "Vintage
   Signature comprend") sur fond sombre sans rupture de contraste
   agressive. Ajoutée le 2026-08-24. */
.bg-charcoal-soft {
  background: var(--color-charcoal-soft);
  color: var(--color-ivory);
}

.rule {
  width: 100%;
  height: 1px;
  background: var(--color-line-dark);
  border: none;
}

.bg-charcoal .rule {
  background: var(--color-line);
}

/* ---- Révélation au scroll : discrète, fondu + léger déplacement ---- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-editorial), transform 0.9s var(--ease-editorial);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* ---- Révélation au scroll, variante "chute" haut → bas : logos de
   références et badges Wedding Award, qui arrivent un par un depuis le
   haut au lieu du fondu global bas → haut ci-dessus (2026-08-26). ---- */
.reveal-drop {
  transform: translateY(-22px);
}

.reveal-drop.is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Media : cadre photographique, zoom léger au survol ---- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--color-charcoal-soft);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s var(--ease-editorial);
}

.media--zoom:hover img {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .media img { transition: none; }
  .media--zoom:hover img { transform: none; }
}

.ratio-portrait   { aspect-ratio: 4 / 5; }
.ratio-tall       { aspect-ratio: 3 / 4; }
.ratio-square     { aspect-ratio: 1 / 1; }
.ratio-wide       { aspect-ratio: 16 / 10; }
.ratio-cinema     { aspect-ratio: 21 / 9; }

.visually-hidden-mobile {
  display: none;
}

@media (min-width: 720px) {
  .visually-hidden-mobile {
    display: revert;
  }
}