/* ══════════════════════════════════════════════════════════════════
   The Peace Missile — pages de contenu (mentions légales)
   ══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-black-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: 'Archivo Black';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/archivo-black-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;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('fonts/space-grotesk-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: 'Space Grotesk';
  font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('fonts/space-grotesk-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 {
  --night: #060A16;
  --cream: #EDE6D6;
  --gold: #E3AC46;
  --gold-lite: #FBE49A;
  --red: #C8231E;
  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--night); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(200,35,30,.16) 0%, rgba(20,48,94,.10) 42%, rgba(6,10,22,0) 70%),
    var(--night);
  background-attachment: fixed;
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word; /* adresses e-mail et URL longues */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(227,172,70,.3); transition: color .25s ease, border-color .25s ease; }
a:hover { color: var(--gold-lite); border-color: rgba(251,228,154,.7); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

.wrap {
  width: min(740px, 100% - 2.5rem);
  margin-inline: auto;
  padding: clamp(28px, 6vh, 64px) 0 clamp(48px, 10vh, 96px);
}

/* ── En-tête ─────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: clamp(26px, 5vh, 44px);
  border-bottom: 1px solid rgba(237,230,214,.1);
}
.masthead img { width: 54px; height: 54px; flex: none; border-radius: 10px; }
.masthead__name {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #F1D18A;
  border: 0;
}
.masthead__name:hover { color: var(--gold-lite); }
.masthead__sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(237,230,214,.35);
}

h1 {
  margin: clamp(34px, 7vh, 56px) 0 10px;
  font-family: var(--display);
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #F4EEE0;
}
.updated {
  margin: 0 0 clamp(28px, 5vh, 44px);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(237,230,214,.35);
}

h2 {
  margin: clamp(34px, 6vh, 52px) 0 12px;
  font-family: var(--display);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
h2 .num {
  display: inline-block;
  min-width: 1.9em;
  color: rgba(227,172,70,.45);
}

p { margin: 0 0 14px; color: rgba(237,230,214,.82); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 14px; padding-left: 1.15em; color: rgba(237,230,214,.82); }
li { margin-bottom: 7px; }
li::marker { color: rgba(227,172,70,.55); }

strong { color: var(--cream); font-weight: 500; }

/* ── Fiche d'identité ────────────────────────────────────────────── */
.card {
  margin: 0 0 18px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(237,230,214,.12);
  border-left: 2px solid rgba(227,172,70,.55);
  border-radius: 4px;
  background: rgba(255,255,255,.022);
}
.card dl { margin: 0; display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 9px 22px; }
.card dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(237,230,214,.4); }
.card dd { margin: 0; color: var(--cream); }

@media (max-width: 560px) {
  .card dl { grid-template-columns: 1fr; gap: 2px; }
  .card dd { margin-bottom: 12px; }
  .card dd:last-child { margin-bottom: 0; }
}

/* ── Marqueur « à compléter » ────────────────────────────────────── */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed rgba(200,35,30,.75);
  border-radius: 3px;
  background: rgba(200,35,30,.13);
  color: #FFB4A8;
  font-size: .88em;
  letter-spacing: .06em;
}

.notice {
  margin: clamp(28px, 5vh, 40px) 0;
  padding: clamp(16px, 3vw, 22px);
  border: 1px dashed rgba(200,35,30,.5);
  border-radius: 4px;
  background: rgba(200,35,30,.07);
  font-size: 14px;
}
.notice p { color: rgba(237,230,214,.78); }
.notice strong { color: #FFC9BF; }

/* ── Pied de page ────────────────────────────────────────────────── */
.pagefoot {
  margin-top: clamp(48px, 9vh, 80px);
  padding-top: 24px;
  border-top: 1px solid rgba(237,230,214,.1);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(237,230,214,.3);
}
.pagefoot a { color: rgba(237,230,214,.5); border: 0; }
.pagefoot a:hover { color: var(--gold); }

@media print {
  body { background: #fff; color: #000; }
  a { color: #000; }
  .notice, .todo { border-color: #000; background: none; color: #000; }
}