/* ==========================================================================
   Poucet · Design system v1 (tokens). Source canonique partagée par la landing (copie inline) et la web app.
   Référence : product/design-system.md. Toute modification se fait ici ET dans la landing ;
   un test (app/test/tokens.test.ts) vérifie que les deux restent identiques.
   ========================================================================== */
:root {
  /* Couleur : un papier, une encre, un accent. Le rouge est réservé au cadeau. */
  --paper:      #f3ecdf;
  --paper-2:    #ebe1cf;
  --paper-3:    #e0d3bb;
  --sheet:      #fbf7ef;
  --ink:        #1b1713;
  --ink-2:      #4a4038;
  --ink-3:      #675c51;
  --accent:     #8a4f0f;
  --accent-2:   #b8761e;
  --rouge:      #6f1d18;
  --rule:       rgba(27, 23, 19, 0.16);
  --rule-strong:#1b1713;

  /* Typographie */
  --f-display: 'Fraunces', 'Times New Roman', serif;
  --f-accent:  'Instrument Serif', 'Times New Roman', serif;
  --f-text:    'Inter Tight', system-ui, sans-serif;
  --f-book:    'EB Garamond', Georgia, serif;

  --t-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
  --t-h2:      clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem);
  --t-h3:      clamp(1.3rem, 1.15rem + .5vw, 1.6rem);
  --t-lede:    clamp(1.08rem, 1rem + .3vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-micro:   .6875rem;

  /* Espace : échelle de 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --section: clamp(72px, 6vw + 40px, 144px);
  --measure: 34rem;
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Pages légales : mentions légales, confidentialité. Même système que la landing.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--f-text);
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
a { color: inherit; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { width: min(1200px, 100% - 2 * clamp(20px, 4vw, 48px)); margin-inline: auto; }
.micro { font: 500 var(--t-micro)/1.4 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.nav { padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.35rem/1 var(--f-display); letter-spacing: -.01em; }
.logo svg { width: 26px; height: 26px; }

.doc { display: grid; grid-template-columns: 11rem minmax(0, 44rem); gap: var(--s-6); padding-block: clamp(56px, 6vw, 112px); }
.doc .folio { padding-top: .8rem; }
.doc h1 { font: 400 var(--t-h2)/1.02 var(--f-display); letter-spacing: -.014em; font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 0; margin-bottom: var(--s-4); }
.doc .updated { margin-bottom: var(--s-7); }
.doc h2 { font: 500 1.25rem/1.3 var(--f-display); margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p, .doc ul + p { margin-top: var(--s-3); }
.doc ul { margin: var(--s-3) 0 0 1.1rem; }
.doc li + li { margin-top: var(--s-2); }
.doc dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-5); }
.doc dt { color: var(--ink-3); }
.doc dd { color: var(--ink); }
@media (max-width: 820px) { .doc { grid-template-columns: 1fr; gap: var(--s-4); } .doc dl { grid-template-columns: 1fr; gap: 0; } .doc dd { margin-bottom: var(--s-3); } }

.footer { border-top: 3px double var(--rule-strong); padding-block: var(--s-7); font-size: var(--t-small); color: var(--ink-2); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-5); }
.footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer a { text-decoration: none; }