:root { --marine: #001533; --rouge: #b20000; --blanc: #ffffff; --gris: #5b6572; --fond: #f6f7f9; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--marine); background: var(--blanc); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--rouge); text-decoration: none; }
a:hover { text-decoration: underline; }
main { flex: 1; }
.accueil { max-width: 720px; margin: 0 auto; padding: 56px 20px 40px; text-align: center; }
.logo { width: min(320px, 70vw); height: auto; display: block; margin: 0 auto 8px; }
h1 { font-size: 2.2rem; letter-spacing: .02em; margin: 0 0 12px; text-transform: uppercase; }
.accroche { font-size: 1.25rem; margin: 0 0 28px; }
.boutons { margin: 0 0 28px; }
.bouton { display: inline-block; background: var(--rouge); color: var(--blanc); padding: 14px 28px; border-radius: 6px; font-weight: 700; letter-spacing: .02em; }
.bouton:hover { background: #8e0000; text-decoration: none; }
.note, .contact { color: var(--gris); font-size: .98rem; margin: 10px auto; max-width: 560px; }
.entete { padding: 20px; }
.texte { max-width: 720px; margin: 0 auto; padding: 0 20px 48px; }
.texte h1 { font-size: 1.9rem; text-transform: none; }
.texte h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.texte p { text-align: justify; hyphens: auto; margin: 0 0 12px; }
.date { color: var(--gris); font-size: .95rem; }
footer { text-align: center; color: var(--gris); font-size: .92rem; padding: 20px; border-top: 1px solid #e6e8ec; }
footer a { color: var(--gris); }
@media (prefers-color-scheme: dark) {
  :root { --marine: #e9edf3; --blanc: #0b1322; --gris: #9aa5b5; }
  .bouton { color: #fff; }
  footer { border-color: #1d2838; }
}