/* ═══════════════════════════════════════════════════════════
   Bâti 972 — feuille de style des pages légales.
   Sous-ensemble de la charte graphique v2.0 (§11).
   index.html reste en fichier unique, conformément à la charte ;
   seules les deux pages légales partagent cette feuille, pour
   qu'un changement de mention ne soit à faire qu'une fois.
   ═══════════════════════════════════════════════════════════ */

/* Work Sans en DEUX tranches, exactement comme index.html. La
   déclaration précédente appelait un fichier work-sans-var.woff2 qui
   n'a jamais existé dans assets/fonts/ : les deux pages légales se
   servaient donc en police de repli depuis le jour de leur écriture.
   Corrigé le 15 septembre 2026. */
@font-face {
  font-family: 'Work Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('fonts/work-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Work Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('fonts/work-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --marine-50:  #F2F5F8;  --marine-100: #E1E8EF;  --marine-700: #1B3A5C;
  --marine-800: #142C46;
  --terracotta: #D97B4A;  --terracotta-action: #B85C2E;  --terra-100: #FAE6D9;
  --terra-700: #944A25;
  --taupe-50: #F7F6F4;  --taupe-100: #EEEBE7;  --taupe-200: #DDD8D1;
  --taupe-300: #BDB5AA;  --taupe-500: #6B6257;  --taupe-650: #4A443C;
  --warning: #9C6316;  --warning-bg: #FBF3E4;

  --font-body: 'Work Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h2: clamp(1.25rem, 2.2vw, 1.5rem);
  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;
  --r-md: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
  color: var(--taupe-650); background: #fff; -webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .container { padding-inline: 32px; } }

h1, h2, h3 { color: var(--marine-700); line-height: 1.2; }
h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -.02em; margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-h2); font-weight: 600; margin: var(--sp-7) 0 var(--sp-3); }
h2::before {
  content: ""; display: block; width: 2px; height: 28px;
  background: var(--terracotta); margin-bottom: var(--sp-3);
}
h3 { font-size: 1.0625rem; font-weight: 600; margin: var(--sp-5) 0 var(--sp-2); }
p, li { max-width: 68ch; }
p { margin: 0 0 var(--sp-4); }
ul { padding-left: 1.25rem; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }
a { color: var(--terracotta-action); }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--marine-700); color: #fff; padding: var(--sp-3) var(--sp-4); }
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

.topbar { border-bottom: 1px solid var(--taupe-100); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 72px; }
.topbar img { height: 44px; width: auto; }
.topbar a { font-size: .9375rem; font-weight: 500; color: var(--marine-700); text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 5px; }

main { padding-block: var(--sp-7) var(--sp-8); }
.lead { font-size: 1.125rem; color: var(--taupe-500); }
.meta { font-size: .8125rem; color: var(--taupe-500); }

table { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-5); font-size: .9375rem; }
th, td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--taupe-200); vertical-align: top; }
th { color: var(--marine-700); font-weight: 600; background: var(--taupe-50); }

.note {
  background: var(--taupe-50); border-left: 3px solid var(--terracotta);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-5);
}
.note p:last-child { margin-bottom: 0; }
.note--strong { background: var(--marine-50); border-left-color: var(--marine-700); }
.todo {
  background: var(--warning-bg); color: var(--warning);
  padding: 1px 6px; border-radius: 3px; font-weight: 600; font-size: .9em;
}

footer {
  background: var(--marine-800); color: var(--taupe-300);
  font-size: 13px; line-height: 1.6; padding-block: var(--sp-6);
}
footer a { color: var(--taupe-100); }
footer p { margin: 0 0 var(--sp-2); max-width: none; }