/* M&G — pages publiques. Palette et typographie reprises de design/tokens.json. */
:root {
  --terracotta: #B95524;
  --terracotta-deep: #8E3F1A;
  --canvas: #F6F0E6;
  --raised: #FFFBF3;
  --sunken: #EDE4D6;
  --ink: #241C17;
  --ink-muted: #6B5C50;
  --ink-faint: #9C8C7D;
  --border: #E0D5C3;
  --border-strong: #C4B49D;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

header.site {
  border-bottom: 1px solid var(--border);
  margin-bottom: 48px;
  padding: 28px 0;
}
header.site .inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.brand {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.6rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
}
.tagline {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}
nav.site { margin-left: auto; display: flex; gap: 20px; }
nav.site a { font-size: .88rem; color: var(--ink-muted); text-decoration: none; }
nav.site a:hover, nav.site a:focus-visible { color: var(--terracotta); }

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600; text-wrap: balance; margin: 0;
}
h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; letter-spacing: -.015em; }
h2 { font-size: 1.35rem; line-height: 1.25; margin-top: 48px; }
h3 { font-size: 1.05rem; margin-top: 30px; font-family: "DM Sans", sans-serif; font-weight: 700; }

p { margin: 0 0 16px; }
ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }
a { color: var(--terracotta); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

.lede { font-size: 1.15rem; color: var(--ink-muted); margin-top: 18px; }
.updated {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 12px;
}

.note {
  background: var(--raised);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 18px 20px;
  margin: 28px 0;
}
.note p:last-child { margin-bottom: 0; }
.note .label {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta); display: block; margin-bottom: 8px;
}

.tw { overflow-x: auto; margin: 22px 0 28px; border: 1px solid var(--border); background: var(--raised); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 460px; }
th, td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  background: var(--sunken); font-size: .7rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
tbody tr:last-child td { border-bottom: 0; }

footer.site {
  border-top: 1px solid var(--border);
  margin-top: 64px; padding: 28px 0;
  font-size: .85rem; color: var(--ink-faint);
}
footer.site .inner {
  max-width: 720px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 20px; flex-wrap: wrap;
}
footer.site a { color: var(--ink-muted); text-decoration: none; }