/* Hallmark · theme: studied-DNA (source: https://www.tresmarescapital.com)
 * paper #ffffff · ink #2b2b2b · accent #e41613 (rouge vif, footprint strict)
 * display: Chivo · mono/labels: JetBrains Mono
 * axes: light / grotesque-industrielle / warm-red
 * studied: yes · DNA-source: url (référence publique validée par RoiNiel)
 */
:root {
  --bg: #ffffff;
  --paper-1: #f7f7f7;
  --paper-2: #f2f2f2;
  --paper-3: #e5e5e5;
  --paper-4: #d5d5d5;
  --gris: #aaaaaa;
  --ink: #2b2b2b;
  --noir: #000000;
  --accent: #e41613;
  --overlay: #18181a;
  --hint: rgba(43, 43, 43, 0.8);
  --border: rgba(44, 42, 43, 0.35);
  --border-soft: rgba(44, 42, 43, 0.16);

  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-chiffres: "Bodoni Moda", Didot, "Bodoni MT", serif;

  --text-display: clamp(2.6rem, 6.2vw, 5.6rem);
  --text-display-s: clamp(2rem, 4.2vw, 3.6rem);
  --text-xl: clamp(1.35rem, 2.2vw, 2rem);
  --text-lg: clamp(1.15rem, 1.5vw, 1.4rem);
  --text-md: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.75rem;
  --text-num: clamp(4rem, 8.5vw, 8rem);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.7s;

  --rule: 1px solid var(--border-soft);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }

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

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.u-link {
  display: inline-block;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.15em;
  font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.u-link:hover { color: var(--accent); border-color: var(--accent); }
.u-link:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* fond fixe : arbre + grain */
.fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fond svg.arbre { position: absolute; height: 100%; }
.fond .grain {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain 0.9s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* placeholders assets (règle atelier : gris, labellisé, bon ratio) */
.placeholder {
  background: var(--paper-2);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--hint);
  padding: var(--space-sm);
}
.placeholder.r-916 { aspect-ratio: 9 / 16; }
.placeholder.r-169 { aspect-ratio: 16 / 9; }

.mot { display: inline-block; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .mot { clip-path: none !important; transform: none !important; opacity: 1 !important; }
}