/* REPLERE — feuille de style du site.
   Reprend les couleurs et les fontes de l'application (Theme.swift) pour que
   le site et l'app se ressemblent : même encre, même terracotta, même papier. */

:root {
  --paper: #EFEDE7;
  --paper-raised: #F5F3EE;
  --white: #FFFFFF;
  --ink: #1A1A17;
  --ink-soft: #5C5849;
  --text-secondary: #5C5849;
  --text-tertiary: #7C7667;
  --text-quaternary: #9A9382;
  --accent: #E2765A;
  --accent-deep: #A8492F;
  --sage: #6F8F5C;
  --hairline: #DEDBD2;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  font-size: 16px;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* En-tête */
header { border-bottom: 1px solid var(--hairline); padding: 22px 0; }
header .wrap { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.logo {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.45rem; letter-spacing: .04em; text-decoration: none; color: var(--ink);
}
nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
nav a { color: var(--text-secondary); text-decoration: none; font-size: .88rem; }
nav a:hover { color: var(--accent-deep); }

/* Contenu */
main { padding: 56px 0 80px; }
h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.4rem; font-weight: 400; line-height: 1.15; letter-spacing: -.01em;
}
h2 {
  font-size: 1.08rem; font-weight: 600; margin: 40px 0 10px;
}
h3 { font-size: .95rem; font-weight: 600; margin: 24px 0 6px; }
p { margin-bottom: 14px; }
.lead { font-size: 1.08rem; color: var(--text-secondary); margin-top: 16px; }
.date { font-size: .8rem; color: var(--text-quaternary); margin-top: 8px; letter-spacing: .06em; text-transform: uppercase; }
a { color: var(--accent-deep); }
ul { margin: 0 0 14px 20px; }
li { margin-bottom: 7px; }
strong { font-weight: 600; }

/* Blocs */
.card {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 14px; padding: 20px 22px; margin: 22px 0;
}
.warn { border-left: 3px solid var(--accent); }
.note { font-size: .86rem; color: var(--text-tertiary); }

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-weight: 600; }
.scroll { overflow-x: auto; }

/* Pied */
footer { border-top: 1px solid var(--hairline); padding: 28px 0 44px; font-size: .85rem; color: var(--text-tertiary); }
footer a { color: var(--text-secondary); }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16161A; --paper-raised: #1E1E22; --white: #1E1E22;
    --ink: #EDEBE4; --ink-soft: #C9C3B5;
    --text-secondary: #B8B2A4; --text-tertiary: #928C7E; --text-quaternary: #7A7466;
    --hairline: #32323A;
  }
  a { color: #F0937B; }
}