/* pierremenoux.ch — LE CANON. Tokens, remise à zéro, socle typographique, raster.
 *
 * Ce fichier existe parce que le canon avait été RECOPIÉ au lieu d'être partagé :
 * admin.css redéclarait --texte à #1a1a1a quand pmx.css disait #111111, --meta à
 * #6f6f6f contre #6f6d6d, --filet à #e6e6e6 contre #e4e2e2. Trois écarts d'un
 * cheveu, invisibles côte à côte, mais qui font qu'un écran d'administration ne
 * ressemble jamais tout à fait au site qu'il administre.
 *
 * Ce qui vit ici est ce que TOUTES les pages partagent. Ce qui n'appartient qu'au
 * portfolio reste dans pmx.css, ce qui n'appartient qu'à l'administration reste
 * dans admin.css. La photothèque (photo.css) ne suit pas ce canon : elle est
 * sombre, autonome, et le revendique.
 *
 * ═══ LE RASTER À HOMOTHÉTIE BORNÉE ═══════════════════════════════════════════
 *
 * Le raster de Müller-Brockmann suppose un format connu d'avance : la composition
 * et le support se décident ensemble. À l'écran, le format arrive après. Il faut
 * donc choisir ce qui reste invariant, et ce n'est ici ni le module ni le nombre
 * de colonnes — c'est LE RAPPORT.
 *
 *   ┌─ une colonne vaut TOUJOURS quatre modules, à toute largeur d'écran
 *   ├─ le module respire entre 16 et 32 px, et rien d'autre ne respire
 *   └─ quand il sortirait de ses bornes, c'est le NOMBRE de colonnes qui change
 *
 * Le module se déduit de la largeur de l'écran, marges comprises — les marges
 * valent deux modules de chaque côté, elles font partie du raster :
 *
 *   12 colonnes → 12×4 + 11 gouttières + 4 de marges = 63 modules
 *    8 colonnes → 43 modules      6 colonnes → 33      4 colonnes → 23
 *
 * D'où les bascules, là où le module atteindrait 24 : 552, 792, 1032 px. Au-delà
 * de 2016 px il plafonne à 32 et la composition se centre : on cesse d'agrandir,
 * comme on cesse d'agrandir une affiche.
 *
 * LA TYPOGRAPHIE NE SUIT PAS L'HOMOTHÉTIE. C'est la seule entorse, et elle est
 * volontaire : un corps homothétique tomberait à 8 px sur un téléphone. Le corps
 * reste fixe, mais l'INTERLIGNE vaut le module — le texte reste donc posé sur le
 * raster à toute largeur tout en restant lisible. Clair à l'extrême passe avant
 * la pureté.
 *
 * Avant ce raster, la gouttière était bloquée à 24 px pendant que les colonnes
 * s'étiraient : le rapport colonne/gouttière passait de 1,43 à 768 px à 3,43 à
 * 1440. Ce n'était pas un raster qui respire, c'était un accordéon.
 *
 * UNE SEULE FAMILLE. Le contraste vient de la graisse et du corps, jamais d'un
 * changement de police (Ruder). Helvetica est native sur macOS et iOS, Arial la
 * remplace ailleurs — c'est son clone métrique, dessiné d'après elle.
 *
 * UNE SEULE ÉCHELLE. Six crans, chacun valant le précédent × 1,3 : 11 · 13 · 17 ·
 * 22 · 29 · 38.
 *
 * UN SEUL ÉCART DE COULEUR. Noir, blanc, et un rouge qui ne sert qu'à signaler.
 * L'image porte toute la couleur de la page (Hofmann).
 */
:root {
  --texte: #111111;
  --meta: #6f6d6d;
  --filet: #e4e2e2;
  --champ: #f2f0f0;
  --signal: #d5001c;

  --titrage: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --chiffre: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Le palier le plus large. Les media queries plus bas ne changent que ces deux
     lignes et le mappage des colonnes — tout le reste du site en dérive. */
  --colonnes: 12;
  --module: clamp(16px, calc(100vw / 63), 32px);

  /* La gouttière EST le module : c'est ce qui fait tenir le rapport. Le nom reste
     pour les feuilles qui s'y appuient déjà. */
  --gouttiere: var(--module);
  --marge: calc(var(--module) * 2);

  --t-micro: 11px;
  --t-corps: 13px;
  --t-medium: 17px;
  --t-grand: 22px;
  --t-fort: 29px;
  --t-titre: 38px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #fff;
  color: var(--texte);
  /* Corps fixe, interligne au module : lisible ET posé sur le raster. */
  font: var(--t-corps)/var(--module) var(--titrage);
  padding: 0 var(--marge);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

/* ---- Le raster ---------------------------------------------------------- */
.grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
}
/* Les classes gardent leur nom du palier à douze colonnes — c'est là qu'elles ont
   été dessinées, et le site entier les écrit ainsi. Chaque palier plus étroit les
   REMAPPE proportionnellement, si bien qu'un `c4-12` reste « l'image large » quel
   que soit le nombre de colonnes réel. */
.c1-3  { grid-column: 1 / 4; }
.c1-4  { grid-column: 1 / 5; }
.c4-7  { grid-column: 4 / 8; }
.c4-9  { grid-column: 4 / 10; }
.c4-10 { grid-column: 4 / 11; }
.c4-12 { grid-column: 4 / 13; }
.c9-12 { grid-column: 9 / 13; }

/* ── 8 colonnes ── 1032 px et moins. Tout est ramené aux deux tiers. */
@media (max-width: 1031px) {
  :root { --colonnes: 8; --module: clamp(16px, calc(100vw / 43), 32px); }
  .c1-3  { grid-column: 1 / 3; }
  .c1-4  { grid-column: 1 / 4; }
  .c4-7  { grid-column: 3 / 6; }
  .c4-9  { grid-column: 3 / 7; }
  .c4-10 { grid-column: 3 / 8; }
  .c4-12 { grid-column: 3 / 9; }
  .c9-12 { grid-column: 6 / 9; }
}

/* ── 6 colonnes ── 792 px et moins. La méta tient sur deux colonnes, l'image sur
   quatre : c'est le dernier palier où les deux peuvent cohabiter côte à côte. */
@media (max-width: 791px) {
  :root { --colonnes: 6; --module: clamp(16px, calc(100vw / 33), 32px); }
  .c1-3, .c1-4 { grid-column: 1 / 3; }
  .c4-7  { grid-column: 3 / 5; }
  .c4-9  { grid-column: 3 / 6; }
  .c4-10, .c4-12 { grid-column: 3 / 7; }
  .c9-12 { grid-column: 5 / 7; }
}

/* ── 4 colonnes ── 552 px et moins. Plus rien ne cohabite latéralement : chaque
   bloc prend la largeur entière et l'ordre de lecture redevient vertical. C'est
   `1 / -1` et non `1 / 5` : la règle doit survivre à un changement de palier. */
@media (max-width: 551px) {
  :root { --colonnes: 4; --module: clamp(16px, calc(100vw / 23), 32px); }
  .grille > * { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}