/* Design tokens — source de vérité pour palette, typographie, spacing.
   Chargé avant style.css pour que les vars soient disponibles partout. */
:root {
  /* Palette */
  --color-ivory:    #f5f1ea;
  --color-charcoal: #1a1a1a;
  --color-gold:     #c9a66b;

  --color-text-dark:        #1a1a1a;
  --color-text-light:       #f5f1ea;
  --color-text-muted-light: #888;
  --color-text-muted-dark:  #999;

  --color-border-dark:  rgba(26, 26, 26, 0.15);
  --color-border-light: rgba(201, 166, 107, 0.3);

  /* Typographie */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Julius Sans One', 'Futura', 'Helvetica Neue', sans-serif;

  /* Échelle */
  --h1-size: clamp(2.8rem, 8vw, 4.2rem);
  --h2-size: clamp(2rem, 3vw, 2.4rem);
  --h3-size: 1.4rem;
  --body-size: 1.15rem;
  --lead-size: 1.3rem;
  --caption-size: 0.9rem;
  --eyebrow-size: 0.8rem;
  --label-size: 0.55rem;
  --cta-size: 0.7rem;

  /* Espacement */
  --section-py: clamp(80px, 10vw, 140px);
  --container-max: 1100px;
  --gutter: 1.5rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 400ms;
}

/* Reset/base */
body {
  font-family: var(--font-display);
  font-size: var(--body-size);
  line-height: 1.6;
  background-color: var(--color-ivory);
  color: var(--color-text-dark);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: inherit;
}

/* Composants transverses */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: bolder;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}
/* Sur fond ivoire, le gold clair manque de contraste — on fonce. */
.section-light .eyebrow { color: #8a6d3f; }

.rule {
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  margin: 1rem 0 1.25rem;
  border: 0;
}

.cta {
  font-family: var(--font-sans);
  font-size: var(--cta-size);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 0.6rem 1.4rem;
  border: 1px solid currentColor;
  display: inline-block;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  background: transparent;
}

.cta-dark { color: var(--color-text-dark); border-color: var(--color-text-dark); }
.cta-dark:hover { background: var(--color-text-dark); color: var(--color-ivory); }

.cta-gold { color: var(--color-gold); border-color: var(--color-gold); }
.cta-gold:hover { background: var(--color-gold); color: var(--color-charcoal); }

/* Gutter bump once the viewport reaches container-max (spec §3.3:
   1.5rem below 1100px, 2rem above). */
@media (min-width: 1100px) {
  :root { --gutter: 2rem; }
}

/* prefers-reduced-motion — désactive animations/transitions non essentielles */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scroll-reveal primitive — classé .is-visible quand l'élément entre en viewport */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* Page transitions fallback (non-Chromium) — body fades out before nav. */
body.is-transitioning { opacity: 0.4; transition: opacity 180ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  body.is-transitioning { opacity: 1; transition: none; }
}