/* h0nK — feuille de style minimale (sobre, lisible, mode sombre automatique) */
:root { --fond: #fafaf8; --texte: #1d1d1b; --discret: #6b6b66; --lien: #3d5a80; }
@media (prefers-color-scheme: dark) {
  :root { --fond: #161616; --texte: #e8e6e1; --discret: #9a978f; --lien: #8fb3e0; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte);
       font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
       min-height: 100vh; display: flex; flex-direction: column; }
.entete { width: 100%; max-width: 1000px; margin: 0 auto; padding: 1rem; border-bottom: 1px solid var(--discret); }
.entete a { color: var(--texte); text-decoration: none; font-weight: 700; letter-spacing: .05em; }
main { width: 100%; max-width: 1000px; margin: 0 auto; padding: 1rem; flex: 1; }
a { color: var(--lien); }
img { max-width: 100%; height: auto; }

/* Pied de page double : surpied (radio) puis souspied (crédits) */
.pied { border-top: 1px solid var(--discret); font-size: .875rem; color: var(--discret);
        position: sticky; bottom: 0; background: var(--fond); z-index: 10; }   /* toujours visible en bas de l'écran */
.surpied, .souspied { max-width: 1000px; margin: 0 auto; padding: .5rem 1rem; }
.surpied { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.souspied { border-top: 1px dotted var(--discret); text-align: center; }
.pied a { color: var(--discret); }
.pied a:hover { color: var(--lien); }
.radio-bouton { width: 1.9rem; height: 1.9rem; border: 1px solid var(--discret); border-radius: 50%;
                background: transparent; color: var(--texte); font-size: .7rem; line-height: 1; cursor: pointer; }
.radio-bouton:hover { border-color: var(--lien); color: var(--lien); }
.radio-nom { font-weight: 600; text-decoration: none; }
.radio-titre { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }