/* The Tall Guy : du HTML nu, fait main, assume. */
:root { color-scheme: light; --papier: #f3efe4; --encre: #111; --lien: #0a2fd6; --vu: #6a1b9a; --trait: #111; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 900px; padding: 16px; background: var(--papier); color: var(--encre);
  font: 18px/1.5 Georgia, "Times New Roman", serif; }
header { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; align-items: baseline;
  border-bottom: 3px solid var(--trait); padding-bottom: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.nom { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; color: var(--encre); text-decoration: none; }
.nom img { width: 56px; height: 56px; }
.nom:hover { background: none; }
.logo-flottant { display: none !important; } /* le gabarit porte deja le logo */
a { color: var(--lien); } a:visited { color: var(--vu); } a:hover { background: #ffeb3b; }
h1, h2, h3, h4, h5 { font-family: ui-monospace, Menlo, Consolas, monospace; line-height: 1.2; overflow-wrap: anywhere; }
h1 { font-size: 30px; margin: 24px 0 16px; }
h2 { font-size: 22px; margin-top: 36px; border-bottom: 1px solid var(--trait); }
h5 { font-size: 17px; }
img, video { display: block; max-width: 100%; height: auto; }
video { width: 100%; background: #000; }
iframe { display: block; width: 100%; max-width: 100%; border: 2px solid var(--trait); min-height: 600px; }
figure { margin: 0 0 16px; }
figcaption { font: 14px ui-monospace, Menlo, Consolas, monospace; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 15px/1.5 ui-monospace, Menlo, Consolas, monospace; }
table { display: block; overflow-x: auto; border-collapse: collapse; }
td, th { border: 1px solid var(--trait); padding: 4px 8px; }
blockquote { margin: 12px 0; padding-left: 12px; border-left: 3px solid var(--trait); font-style: italic; }
.galerie { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0 0 16px; }
.galerie figure { margin: 0; } .galerie img { width: 100%; }
.colonnes { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.colonnes > * { flex: 1 1 280px; min-width: 0; }
.tete { display: flex; gap: 16px; align-items: center; }
.tete img { width: 120px; height: 120px; flex: none; }
.liste { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; padding-left: 20px; }
footer { margin-top: 48px; border-top: 3px solid var(--trait); padding-top: 8px; font: 14px ui-monospace, Menlo, Consolas, monospace; }