/* ════════════════════════════════════════
   BASE — variables, reset, typographie
   Chargé en premier, utilisé par tous les
   autres fichiers CSS via les custom props.
════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Fonds terreux — ocre et pierre calcaire */
  --d900:   #09080A;
  --d800:   #100F0C;
  --d700:   #181510;
  --d600:   #221E16;
  --d500:   #2E2820;

  /* Accent ambre-terracotta — huile d'olive du Midi */
  --accent:       #C28E26;
  --accent-lt:    #E0B24A;
  --accent-glow:  rgba(200, 120, 28, .14);
  --accent-soft:  rgba(200, 120, 28, .08);

  /* Vert olive — feuillage des oliveraies */
  --olive:        #7A8A48;
  --olive-lt:     #9AAC60;
  --olive-soft:   rgba(122, 138, 72, .10);

  /* Texte */
  --text:         #EDE8D5;
  --text-sub:     #A09880;
  --text-muted:   #5C5640;

  /* Bordures */
  --border:       rgba(200, 120, 28, .14);
  --border-dim:   rgba(255, 255, 255, .06);
  --border-olive: rgba(122, 138, 72, .18);

  /* Typographie */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ombres */
  --shadow-glow: 0 0 40px rgba(200, 120, 28, .18);
  --shadow-card: 0 4px 32px rgba(0, 0, 0, .45);
  --shadow-lg:   0 16px 64px rgba(0, 0, 0, .55);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--d900);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

header {
  position: relative;
  z-index: 10;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
}

img    { display: block; }
a      { text-decoration: none; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--accent); color: #000; }

/* ── Helpers typographiques ────────────────────────────────── */
.section-label {
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-lt);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text);
  margin-top: 0.5rem;
}

.section-header { margin-bottom: 3rem; }

.divider {
  width: 36px;
  height: 1px;
  background: var(--olive);
  margin: 0.8rem 0;
}
.divider--center { margin: 0.8rem auto; }

/* ── Animations de révélation au scroll ────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.reveal.visible  { opacity: 1; transform: translateY(0); }
.reveal-delay-1  { transition-delay: 0.06s; }
.reveal-delay-2  { transition-delay: 0.12s; }
.reveal-delay-3  { transition-delay: 0.18s; }
.reveal-delay-4  { transition-delay: 0.24s; }