:root {
  --fond: #fbfaf8; --texte: #1c1a17; --attenue: #55504a; --trait: #e0dbd3;
  --accent: #1f5d50; --carte: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #16181a; --texte: #ecebe8; --attenue: #a6a29c; --trait: #2e3236;
    --accent: #6fb3a2; --carte: #1d2023;
  }
}
:root[data-theme="dark"] {
  --fond: #16181a; --texte: #ecebe8; --attenue: #a6a29c; --trait: #2e3236;
  --accent: #6fb3a2; --carte: #1d2023;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 3.5rem 16px 4rem; background: var(--fond); color: var(--texte);
  font: 1rem/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; justify-content: center;
  -webkit-text-size-adjust: 100%;
}
main { width: 100%; max-width: 36rem; }
.marque {
  display: inline-block; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
  margin-bottom: 1.25rem; text-decoration: none;
}
a.marque:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 1.25rem; }
h2 { font-size: 1rem; margin: 2.25rem 0 .75rem; }
p { margin: 0 0 1rem; color: var(--attenue); }
ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--attenue); }
li { margin-bottom: .35rem; }
.communes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.communes li { margin: 0; }
.commune {
  display: block; padding: 1rem 1.15rem; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 10px;
  text-decoration: none; color: inherit;
}
.commune:hover, .commune:focus-visible { border-color: var(--accent); }
.commune strong { display: block; font-size: 1.0625rem; margin-bottom: .15rem; }
.commune span { color: var(--attenue); font-size: .9375rem; }
.lien-ville {
  display: inline-block; margin-bottom: 1rem; color: var(--accent);
  font-weight: 500; text-underline-offset: 3px;
}
a:focus-visible, .commune:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
footer {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--trait);
  font-size: .875rem; color: var(--attenue);
}
footer a { color: var(--accent); }