/**
 * Prototype chrome for legacy /fr pages — extracted from design-standalone.css so we can
 * keep main.min.css (Bootstrap + site) WITHOUT loading the standalone global `*` reset.
 * Requires design-fr-tokens.css before this file.
 *
 * Footer (.footer / .footer__*) — design-standalone.css OR design-fr-footer.css.
 * Top bar (.nav / .mobile-menu) — design-standalone.css OR design-fr-nav.css (section 3b
 * bootstrap bridge duplicated in standalone + tail of design-fr-nav). Do not redefine
 * those blocks here — they would cascade after standalone on hybrid /fr pages.
 */

/* ─── Typography bits used in nav ─── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.eyebrow--ink {
  color: var(--navy);
  opacity: 0.55;
}

.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
}

@media (max-width: 800px) {
  .shell {
    padding: 0 24px;
  }
}

.animate-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.animate-section.is-visible {
  opacity: 1;
  transform: none;
}

.animate-block {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s,
    transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s;
}

.animate-section.is-visible .animate-block {
  opacity: 1;
  transform: translateY(0);
}

.animate-block--delay-1 {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .animate-section,
  .animate-block {
    opacity: 1;
    transform: none;
    transition: none;
  }
}