:root {
  --fond: #f4f6f8; --carte: #ffffff; --texte: #1c2733; --discret: #5b6875; --accent: #0b6e4f;
  --accent-texte: #ffffff; --bord: #d9e0e6; --alerte: #b3261e; --ok: #0b6e4f;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #11161b; --carte: #1b232b; --texte: #e6ebef; --discret: #9aa7b3; --accent: #3fb58a;
          --accent-texte: #0b1410; --bord: #2c3742; --alerte: #ff8a80; --ok: #3fb58a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.entete { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
          padding: .75rem 1rem; background: var(--carte); border-bottom: 1px solid var(--bord); }
.marque { font-weight: 700; text-decoration: none; color: var(--texte); }
.marque span { color: var(--accent); }
.sortie { display: flex; gap: .5rem; align-items: center; margin: 0; }
.qui { color: var(--discret); font-size: .9rem; overflow-wrap: anywhere; }
.page { max-width: 760px; margin: 0 auto; padding: 1rem; }
.pied { text-align: center; color: var(--discret); font-size: .85rem; padding: 2rem 1rem; }
.carte { display: block; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
         padding: 1rem; margin: 0 0 1rem; }
.etroite { max-width: 420px; margin: 2rem auto; }
.lien-carte { text-decoration: none; color: var(--texte); display: grid; gap: .25rem; }
.lien-carte:hover, .lien-carte:focus { border-color: var(--accent); }
.liste, .simple { list-style: none; padding: 0; margin: 0; }
.simple li { padding: .5rem 0; border-bottom: 1px solid var(--bord); display: grid; }
.simple li:last-child { border-bottom: 0; }
.discret { color: var(--discret); font-size: .9rem; }
.etiquette { justify-self: start; font-size: .8rem; padding: .1rem .5rem; border-radius: 999px;
             border: 1px solid var(--bord); color: var(--discret); }
.etiquette.ok { border-color: var(--ok); color: var(--ok); }
.formulaire { display: grid; gap: .5rem; }
input { font: inherit; padding: .65rem .75rem; border: 1px solid var(--bord); border-radius: 8px;
        background: var(--fond); color: var(--texte); width: 100%; }
button { font: inherit; padding: .65rem 1rem; border: 0; border-radius: 8px; background: var(--accent);
         color: var(--accent-texte); cursor: pointer; }
button.lien { background: none; color: var(--accent); padding: 0; text-decoration: underline; }
.recherche { display: flex; gap: .5rem; margin-bottom: .5rem; }
.alerte { color: var(--alerte); font-weight: 600; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1rem 0; }
.bandeau-vue { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
               padding: .6rem 1rem; background: #fff4d6; color: #5a4300; border-bottom: 1px solid #e8d49a; }
.bandeau-vue form { margin: 0; }
.boutons { display: flex; flex-wrap: wrap; gap: .5rem; }
.boutons form { margin: 0; }
button.secondaire { background: var(--carte); color: var(--accent); border: 1px solid var(--accent); }
@media (prefers-color-scheme: dark) {
  .bandeau-vue { background: #3a3014; color: #f3e2a9; border-color: #5c4b1d; }
}