/* La charte commune de valentinthouzeau.fr et de ses sous-domaines (cours., …).
 *
 * Servie à https://valentinthouzeau.fr/charte.css ; chaque site la charge avant sa
 * propre feuille, qui ne définit aucune couleur ni police : elle n'utilise que les
 * variables d'ici. Changer une valeur ici la change partout, au rechargement suivant
 * (Caddy la sert en « no-cache »). Publier : Infra/scripts/deploy.sh caddy
 */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --colonne: 42rem;

  --fond: #fbfaf7;        /* le papier */
  --surface: #ffffff;     /* ce qui se pose dessus : cartes, champs */
  --texte: #1e1e1e;
  --sourd: #6a6a6a;       /* le texte secondaire, les étiquettes */
  --lien: #2f5b8c;        /* la seule couleur : liens, boutons, accents */
  --filet: #e2dfd8;       /* les traits */
  --encre-bouton: #ffffff;
  --code: #f0eee9;
  --ok: #2e6b45;
  --alerte: #9a5a14;
  --erreur: #a33a2c;
  --teinte: color-mix(in srgb, var(--lien) 8%, var(--fond));   /* fond léger aux couleurs du lien */

  /* La coloration du code, aux conventions de Colab et VS Code (thème clair). */
  --code-mot-cle: #af00db;       /* import, def, return, as, in… */
  --code-constante: #0000ff;     /* True, False, None, self */
  --code-chaine: #a31515;        /* 'texte' */
  --code-nombre: #098658;
  --code-commentaire: #008000;
  --code-fonction: #795e26;      /* print(, pd.read_csv( */
  --code-classe: #267f99;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #161615; --surface: #1c1c1a; --texte: #e6e2da; --sourd: #9b978f; --lien: #8db4e2;
    --filet: #33322f; --encre-bouton: #161615; --code: #232321;
    --ok: #7fc39a; --alerte: #e0a55e; --erreur: #ef8f82;
    --code-mot-cle: #c586c0; --code-constante: #569cd6; --code-chaine: #ce9178; --code-nombre: #b5cea8;
    --code-commentaire: #6a9955; --code-fonction: #dcdcaa; --code-classe: #4ec9b0;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--serif); font-size: 17px; line-height: 1.6;
}
main { max-width: var(--colonne); margin: 0 auto; padding: 4.5rem 16px 4rem; }

h1 { font-size: 2rem; font-weight: normal; letter-spacing: .01em; line-height: 1.25; margin: 0 0 .35rem; }
h2 {
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sourd); margin: 0 0 1.1rem;
}
h3 { font-size: 1rem; font-weight: normal; font-style: italic; margin: 1.8rem 0 .6rem; color: var(--sourd); }
p { margin: 0 0 1rem; }
a { color: var(--lien); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--lien) 35%, transparent); }
a:hover { border-bottom-color: var(--lien); }
code, pre, kbd { font-family: var(--mono); font-size: .86em; }

/* Une ligne de liens discrets en petites capitales sans empattement (menus, fil d'Ariane). */
.menu { font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; }
.menu a { color: var(--sourd); text-decoration: none; margin-right: 1.2rem; }
.menu a:hover { color: var(--lien); }

/* Une étiquette : même voix que les titres de section, en plus petit. */
.etiquette { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sourd); }

.sourd { color: var(--sourd); }

footer { margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); color: var(--sourd); font-size: .82rem; }

@media (max-width: 520px) {
  main { padding-top: 3rem; }
  h1 { font-size: 1.7rem; }
}