:root {
  --fond: #faf8f4; --texte: #1d1b18; --doux: #6b655c; --trait: #e3ded4; --accent: #a3361f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #171614; --texte: #ebe7df; --doux: #a29b90; --trait: #33302b; --accent: #e07a5f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 18px/1.6 var(--serif); }
.tete, main, .pied, .voisins { max-width: 42rem; margin: 0 auto; padding: 0 16px; }
.tete { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: baseline;
  padding-top: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--trait); font-family: var(--sans); }
.marque { font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: .95rem; color: var(--texte); text-decoration: none; }
.tete nav a { margin-left: 1rem; font-size: .9rem; color: var(--doux); text-decoration: none; }
.tete nav a:first-child { margin-left: 0; }
.tete nav a:hover { color: var(--accent); }
main { padding-top: 2rem; padding-bottom: 3rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: .2rem 0 1.5rem; }
h1 a { color: inherit; text-decoration: none; }
h2 { font-family: var(--sans); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin: 2.5rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
p { margin: 0 0 1rem; }
a { color: var(--accent); }
strong { letter-spacing: .02em; }
.surtitre, .sources, .chapeau, .liste span { font-family: var(--sans); color: var(--doux); font-size: .85rem; }
.surtitre { text-transform: uppercase; letter-spacing: .1em; margin: 0; }
.chapeau { font-size: 1rem; margin-bottom: 2rem; }
.sources { margin-top: 2.5rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
em { color: var(--doux); font-size: .9em; }
.liste { list-style: none; padding: 0; }
.liste li { padding: .6rem 0; border-bottom: 1px solid var(--trait); }
.liste span { display: block; }
.voisins { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--sans); font-size: .9rem; padding-bottom: 2rem; }
.pied { border-top: 1px solid var(--trait); padding-top: 1rem; padding-bottom: 2rem; font-family: var(--sans); font-size: .85rem; color: var(--doux); }
.pied a { color: var(--doux); }
