/* ─── pages.css — pages secondaires de l'Observatoire ──────────────────────
   Mentions légales, données personnelles, page 404. Palette de
   l'Observatoire des Bureaux Opérés (sauge et terracotta, DEC-5) ; en-tête et
   fil d'Ariane communs dans et-famille.css.
──────────────────────────────────────────────────────────────────────────── */
:root {
  --navy:       #2D4028;
  --navy-deep:  #1C2818;
  --gold-dark:  #A04E3A;
  --gold-light: #EDD3CB;
  --cream:      #F5F0E8;
  --cream-dark: #EDE5D8;
  --ink:        #3D3835;
  --muted:      #6B645D;
  --white:      #FFFFFF;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--cream); color: var(--ink); line-height: 1.7; }
.page-main { max-width: 760px; margin: 48px auto 72px; padding: 0 24px; }
.page-main h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; color: var(--navy); line-height: 1.25; margin-bottom: 8px; }
.page-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 36px; padding-bottom: 20px; border-bottom: 2px solid var(--gold-dark); }
.page-main h2 { font-size: 15px; font-weight: 700; color: var(--navy); margin: 32px 0 10px; text-transform: uppercase; letter-spacing: .04em; }
.page-main p, .page-main li { font-size: 15px; color: var(--ink); margin-bottom: 8px; }
.page-main ul { padding-left: 20px; margin-bottom: 8px; }
.page-main a { color: var(--gold-dark); }
.page-main strong { color: var(--navy); }
.page-note { font-size: 13px !important; color: var(--muted) !important; margin-top: 32px; }
.page-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.page-btn { display: inline-block; background: var(--gold-dark); color: var(--white) !important; text-decoration: none; padding: 11px 22px; border-radius: 6px; font-weight: 600; font-size: 14px; }
.page-btn:hover { background: #86402F; }
.page-btn--ghost { background: transparent; color: var(--navy) !important; border: 1px solid var(--navy); }
.page-btn--ghost:hover { background: var(--white); }
.page-footer { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 28px 24px; }
.page-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.page-footer a { color: rgba(255,255,255,.85); }
.page-footer a:hover { color: var(--white); }
.page-footer small { font-size: 12px; color: rgba(255,255,255,.68); }
@media (max-width: 600px) { .page-main { margin-top: 32px; } .page-main h1 { font-size: 25px; } }