:root {
  
  --sky-horizon: #f7b267;
  --sky-horizon-opposite: #c2a2b0;
  --sky-mid: #f4845f;
  --sky-zenith: #8e9aaf;
  --sky-high: #c8b8db;

  
  --ground: #76914a;
  --ground-deep: #4f6b38;
  --ground-crest: #c9a741;
  --earth: #8e7047;
  --foliage: #4f6b3a;

  
  --stone: #9e9c96;
  --stone-shadow: #77746e;

  
  --accent: #5fd3c0;

  
  --metal: #b87333;
  --metal-light: #d89a5c;
  --wood: #c9a66b;
  --wood-dark: #8b6f47;
  --steel: #b9bcc0;
  --soot: #2a241e;
  --linen: #e4d8c4;
  --honey: #e0a34a;

  
  --sunlight: #ffe3b0;
  --bounce: #8e7550;
  --fog: #e8c79e;
  --window-glow: #ffd9a0;
  --rim: #ffc978;

  
  --ink: #0a0a0a;
  --ink-soft: #2b2724;
  --ink-mute: #6b625a;

  
  --paper: #f0e4ce;
  --paper-warm: #e4d8c4;

  
  --veil: rgba(18, 13, 8, 0.42);
  --veil-bord: rgba(18, 13, 8, 0.2);

  
  --font-display: 'Fraunces Variable', Georgia, serif;
  --font-body: 'Instrument Sans Variable', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.3rem, 1.7rem + 2.8vw, 4.2rem);

  
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: linear;
    --ease-out: linear;
  }
}

@font-face { font-family: 'Fraunces Variable'; src: url('./fraunces.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Instrument Sans Variable'; src: url('./instrument.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
* { box-sizing: border-box; }
html { color: var(--ink-soft); background: var(--paper-warm); font-family: var(--font-body); }
body { max-width: 58rem; margin: auto; background: var(--paper); line-height: 1.7; overflow-wrap: anywhere; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; touch-action: manipulation; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 4px; }
.evitement { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.5rem 1rem; background: var(--paper); transform: translateY(-160%); }
.evitement:focus { transform: none; }
.repere, main, footer { padding-inline: max(clamp(1.5rem, 6vw, 5rem), env(safe-area-inset-left)) max(clamp(1.5rem, 6vw, 5rem), env(safe-area-inset-right)); }
.repere { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: max(1rem, env(safe-area-inset-top)); font-size: 0.875rem; }
.repere a, .liens-projet a, .contact > a, footer a { display: inline-flex; align-items: center; min-height: 44px; gap: 0.5rem; }
main { padding-top: clamp(2rem, 6vw, 4rem); }
h1, h2 { color: var(--ink); font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; font-variation-settings: 'opsz' 36, 'SOFT' 35; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin: 0 0 1.5rem; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 1rem; }
p { margin: 0 0 1.2rem; text-wrap: pretty; }
main p { max-width: 70ch; }
.signature, .reperes, .techniques { color: var(--ink-mute); font-size: 0.875rem; }
.signature { margin-bottom: 1rem; }
.chapeau, .accroche { font-size: var(--step-1); line-height: 1.55; }
.introduction { margin-bottom: 3rem; }
#sommaire { scroll-margin-top: 1.5rem; }
#sommaire h2 { font: 600 1.125rem var(--font-body); letter-spacing: 0; }
.sommaire { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.sommaire li { border-bottom: 1px solid var(--wood-dark); }
.sommaire a { display: flex; flex-direction: column; justify-content: center; min-height: 76px; padding-block: 0.75rem; text-decoration: none; }
.sommaire a:hover span, .sommaire a:focus-visible span { text-decoration: underline; text-underline-offset: 0.25em; }
.sommaire small { color: var(--ink-mute); font-size: 0.875rem; }
article, .contact { margin-top: clamp(3.5rem, 8vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--wood-dark); scroll-margin-top: 1.5rem; }
.reperes { margin-bottom: 0.75rem; }
.reperes-projet { margin: 1.5rem 0; }
.reperes-projet div { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.4rem 0.75rem; align-items: baseline; }
.reperes-projet dd { margin: 0; font-weight: 600; flex-shrink: 0; }
.visuels { margin: 1.5rem 0; }
summary { min-height: 44px; padding-block: 0.5rem; cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; }
.planches { list-style: none; margin: 1rem 0 0; padding: 0; }
.planches li + li { margin-top: 1.5rem; }
.planches a { display: inline-flex; gap: 0.5rem; align-items: center; min-height: 44px; font-weight: 600; }
.planches p { font-size: 0.875rem; }
.liens-projet { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; }
.lien-projet { font-weight: 600; }
.contact > a { display: flex; width: fit-content; }
footer { margin-top: 4rem; padding-top: 2rem; padding-bottom: max(2rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--wood-dark); font-size: 0.875rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
@media (max-width: 30rem) { .sommaire { grid-template-columns: 1fr; } .reperes-projet div { display: block; margin-block: 1rem; } }
@media print {
  html, body { background: white; color: black; }
  .evitement, .repere, .liens-projet, footer nav, .visuels { display: none; }
  main, footer { padding-inline: 0; }
  article, .contact { margin-top: 2rem; }
  h1, h2, .reperes { break-after: avoid; }
  p { orphans: 3; widows: 3; }
}