/* Page d'accueil de la démo : une colonne d'article, la charte du site.
   Noir, blanc, un gris. Aucune couleur, aucun dégradé, aucune ombre. */
:root {
  --ink: #111;
  --paper: #fff;
  --grey: #767676;
  --rule: #d9d9d9;
  --serif: "Bodoni Moda", "Libre Caslon", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #f2f2f2; --paper: #111; --grey: #9a9a9a; --rule: #333; }
}
:root[data-theme="dark"] { --ink: #f2f2f2; --paper: #111; --grey: #9a9a9a; --rule: #333; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; padding: 0 16px; }
.article { max-width: 44rem; margin: 0 auto; padding: 2.5rem 0 3rem; }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.1; margin: .4rem 0 1rem; letter-spacing: -.01em; }
.lead { font-size: 1.1rem; margin: 0 0 1.25rem; }
.label { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: inherit; text-underline-offset: .15em; }
.foot { font-size: .9rem; color: var(--grey); border-top: 1px solid var(--rule); padding-top: .75rem; margin-top: 2rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem; }
.skip:focus { left: 16px; }