/* Le Temps Jadis — Design Tokens
   Version: ROSE DOMINANT (#DE109A) — navy passe en accent.
   - typo display SANS-SERIF (Manrope)
   - fond BLANC PUR + bandes rose pâle
*/

:root {
  /* ── Texte ─────────────────────────────────────────────── */
  --ink-soft:   #1A1A1A;   /* body text */
  --ink-muted:  #5C5C5C;   /* texte secondaire */
  --ink-line:   #F1D9E8;   /* filet rose pâle */

  /* ── Fonds ─────────────────────────────────────────────── */
  --paper:       #FFFFFF;   /* fond principal */
  --paper-warm:  #FFF5FA;   /* rose très pâle — bandes alternées */
  --paper-deep:  #FCEAF3;   /* rose pâle — zones secondaires */
  --paper-card:  #FFFFFF;

  /* ── Accents chaleureux (inchangés) ────────────────────── */
  --terracotta: #B8593A;
  --brass:      #B8893E;
  --moss:       #4A5D3F;

  /* ── Signature rose (couleur dominante) ────────────────── */
  --brand-rose:        #DE109A;
  --brand-rose-hover:  #B80B7D;
  --brand-rose-soft:   #FCEAF3;

  /* ── Accent navy (secondaire) ──────────────────────────── */
  --accent-navy:        #0F2A3E;
  --accent-navy-hover:  #1B3F5C;

  /* ── Alias legacy (compat avec page-*.css du mockup) ────── */
  --magenta:        var(--brand-rose);
  --magenta-hover:  var(--brand-rose-hover);
  --magenta-soft:   var(--brand-rose-soft);
  --ink-deep:       var(--brand-rose);

  /* ── Fonctionnel ───────────────────────────────────────── */
  --success:  #4A5D3F;
  --warning:  #C68B2C;
  --error:    #A4382E;

  /* ── Type — Manrope (display géométrique grotesk, large) ── */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* ── Échelle ───────────────────────────────────────────── */
  --display-1: clamp(56px, 9vw, 128px);
  --display-2: clamp(40px, 6vw, 88px);
  --display-3: clamp(32px, 4.5vw, 60px);
  --h1: clamp(36px, 4vw, 56px);
  --h2: clamp(28px, 3vw, 44px);
  --h3: clamp(22px, 2vw, 28px);
  --body-lg: 19px;
  --body: 17px;
  --body-sm: 14px;
  --eyebrow: 12px;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ── Radius — ronds revenus ────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 9999px;

  /* ── Élévations (navy en structural) ───────────────────── */
  --shadow-1: 0 1px 2px rgba(15,42,62,0.04), 0 2px 8px rgba(15,42,62,0.04);
  --shadow-2: 0 4px 12px rgba(15,42,62,0.06), 0 8px 24px rgba(15,42,62,0.08);
  --shadow-3: 0 12px 40px rgba(15,42,62,0.12);

  /* ── Easing ────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 220ms var(--ease);
  --t-med: 400ms var(--ease);
  --t-slow: 600ms var(--ease);

  /* ── Layout — full-width ─────────────────────────────────── */
  --max-w: 100%;
  --gutter: 64px;
  --section-y: clamp(72px, 9vw, 128px);
}

@media (max-width: 1024px) {
  :root { --gutter: 32px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
}

/* ─────────────────────────────────────────────────────────
   Base reset + body
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

section[id], [id="top"] { scroll-margin-top: 96px; }
@media (max-width: 640px) { section[id] { scroll-margin-top: 88px; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--brand-rose);
  font-style: normal;
  text-wrap: balance;
}
h1 { font-weight: 800; letter-spacing: -0.035em; }
h2 { font-weight: 800; letter-spacing: -0.03em; }
h3 { font-weight: 700; }

/* « em » dans les titres — accent navy pour contraster avec titre rose */
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--accent-navy);
  font-weight: inherit;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--brand-rose); color: #fff; }

/* ─────────────────────────────────────────────────────────
   Utilitaires
   ───────────────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.eyebrow-mark::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-rose);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────
   Boutons — primary = navy (contraste sur fonds clairs/rose)
   ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  position: relative;
  isolation: isolate;
}
.btn:focus-visible {
  outline: 2px solid var(--brand-rose);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .btn { height: 48px; padding: 0 20px; font-size: 14px; }
}

.btn-primary {
  background: var(--accent-navy);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover {
  background: var(--accent-navy-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.btn-ink {
  background: var(--accent-navy);
  color: var(--paper);
}
.btn-ink:hover {
  background: var(--accent-navy-hover);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--accent-navy);
  border: 1px solid var(--accent-navy);
}
.btn-outline:hover {
  background: var(--accent-navy);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--accent-navy);
  padding: 0;
  height: auto;
  font-weight: 500;
}
.btn-ghost::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 1.5px;
  width: 100%;
  background: var(--brand-rose);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 400ms var(--ease);
}
.btn-ghost:hover::after { transform: scaleX(1); }

/* Round arrow button */
.arrow-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-line);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.arrow-btn:hover {
  background: var(--brand-rose);
  color: #fff;
  border-color: var(--brand-rose);
  transform: translate(2px, -2px) rotate(-15deg);
}
.arrow-btn svg { width: 18px; height: 18px; }

/* ─────────────────────────────────────────────────────────
   Highlight rose (signature animation)
   ───────────────────────────────────────────────────────── */
.highlight {
  background-image: linear-gradient(120deg, var(--brand-rose) 0%, var(--brand-rose) 100%);
  background-repeat: no-repeat;
  background-size: 0% 0.18em;
  background-position: 0 88%;
  padding: 0 0.04em;
  transition: background-size 700ms var(--ease) 200ms;
  color: inherit;
}
.in-view .highlight { background-size: 100% 0.18em; }

/* ─────────────────────────────────────────────────────────
   Fade-up scroll animation
   ───────────────────────────────────────────────────────── */
.fade-up { opacity: 1; transform: none; }
.in-view.fade-up,
.in-view .fade-up {
  animation: fade-up-anim 600ms var(--ease) both;
}
@keyframes fade-up-anim {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────
   Section structure
   ───────────────────────────────────────────────────────── */
section { padding: clamp(72px, 9vw, 128px) 0; position: relative; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: var(--display-3);
  line-height: 1.05;
  max-width: 18ch;
}
.section-head .section-meta {
  max-width: 38ch;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Cursor rose */
body.has-cursor, body.has-cursor * { cursor: none; }
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px;
  height: 10px;
  background: var(--brand-rose);
  border-radius: 999px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: width 300ms var(--ease), height 300ms var(--ease),
              background 300ms var(--ease), opacity 200ms linear;
}
.cursor-dot.expanded {
  width: 56px;
  height: 56px;
  background: rgba(222,16,154,0.18);
}