/* ==========================================================================
   EPEF — Base : polices, couleurs (clair / sombre), reset, typographie
   ========================================================================== */

/* Police « Now » (textes et sous-titres).
   Si les fichiers sont déposés dans assets/fonts/, décommentez les lignes url().
   En attendant, « Outfit » (Google Fonts, très proche) prend le relais. */
@font-face {
  font-family: "Now";
  font-weight: 400;
  font-display: swap;
  src: local("Now Regular"), local("Now-Regular") /*, url("../fonts/Now-Regular.woff2") format("woff2") */;
}
@font-face {
  font-family: "Now";
  font-weight: 700;
  font-display: swap;
  src: local("Now Bold"), local("Now-Bold") /*, url("../fonts/Now-Bold.woff2") format("woff2") */;
}

/* ---------- Palette & tokens (mode clair) ---------- */
:root {
  /* Couleurs dominantes de la charte */
  --c-bordeaux: #A0444F;
  --c-jaune: #F0BF59;
  --c-orange: #D07B4A;
  --c-bleu: #3A7CA5;
  --c-vert: #3C615C;
  --c-creme: #FFFBF6;
  --c-anthracite: #2F2F2F;

  /* Rôles */
  --bg: var(--c-creme);
  --bg-alt: #F6EEE3;
  --surface: #FFFFFF;
  --surface-2: #FBF5EC;
  --ink: var(--c-anthracite);
  --ink-soft: #5E5852;
  --ink-mute: #8A827A;
  --line: rgba(47, 47, 47, .12);
  --line-strong: rgba(47, 47, 47, .22);

  --accent: var(--c-orange);
  --accent-ink: #A9552A;          /* orange assombri : lisible sur fond clair */
  --kicker: var(--c-bordeaux);
  --link: var(--c-bordeaux);

  --hero-bg: var(--c-vert);
  --hero-ink: var(--c-creme);
  --hero-accent: var(--c-jaune);
  --strip-bg: var(--c-anthracite);

  --header-bg: rgba(255, 251, 246, .86);
  --shadow-sm: 0 1px 2px rgba(47, 47, 47, .06), 0 2px 8px rgba(47, 47, 47, .05);
  --shadow: 0 10px 30px -12px rgba(47, 47, 47, .22);
  --shadow-lg: 0 30px 60px -25px rgba(47, 47, 47, .35);

  /* Typo */
  --font-title: "Ovo", Georgia, "Times New Roman", serif;
  --font-text: "Now", "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mise en page */
  --container: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 128px);
  --header-h: 78px;
  --radius-lg: 28px;
  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

/* ---------- Mode sombre ---------- */
[data-theme="dark"] {
  --bg: #232322;
  --bg-alt: #2A2A29;
  --surface: #2F2F2F;
  --surface-2: #343433;
  --ink: var(--c-creme);
  --ink-soft: #CFC7BC;
  --ink-mute: #9C958C;
  --line: rgba(255, 251, 246, .10);
  --line-strong: rgba(255, 251, 246, .2);

  --accent-ink: #E7A077;
  --kicker: var(--c-jaune);
  --link: #E7A077;

  --hero-bg: #2B4744;
  --strip-bg: #1A1A1A;

  --header-bg: rgba(35, 35, 34, .82);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -25px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--c-jaune); color: var(--c-anthracite); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Typographie ---------- */
h1, h2, h3, .serif {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }

/* Sous-titres : Now gras */
h4, h5, .subtitle {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.35;
  margin: 0 0 .4em;
}

/* Mot mis en valeur dans un titre (Ovo n'a pas d'italique : on joue sur la couleur) */
.accent { color: var(--accent-ink); }
[data-theme="dark"] .accent { color: var(--c-orange); }

p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 700; }
small { font-size: .85em; }

.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-soft); line-height: 1.6; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kicker);
  margin-bottom: 18px;
}
.kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.kicker.no-line::before { display: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Icônes SVG injectées par layout.js (<i data-icon="...">) */
.icon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.2em; }
i[data-icon] { display: inline-flex; font-style: normal; }

/* Apparition au défilement (uniquement si JS actif) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }