/* ==========================================================================
   TYPOGRAPHIE — classes sémantiques .t-*
   Une classe = taille + graisse + couleur + casse. Autoportante.
   On pose la classe, elle dit ce que l'élément EST.

   Règle : la classe .t-* porte la TYPO. La classe d'origine ne garde que
   la STRUCTURE (marges, flex, position). Un élément cumule les deux.
   (CADRAGE §7.1 bis A)
   ========================================================================== */

/* — Display (Outfit) ———————————————————————————————————————————————————— */

/* ⚠️ La graisse est DÉCLARÉE, pas laissée au défaut. Outfit est variable
   (100→900) : sans `font-weight`, elle tomberait en 400 par hasard.

   ⚠️ **300, et non plus 900** (31/07/2026). Le §6 justifiait un poids franc
   par « la voix des brouillons 003/004 » — décision revue à l'écran : à
   `--fs-hero` (jusqu'à 110px), une display lourde écrase la page au lieu de
   la tenir. Le light laisse la TAILLE porter le titre, ce qui est plus
   proche du registre austère du §2 que d'un poids affirmé.

   Interlignage : New Amsterdam était CONDENSÉE, un `line-height` de 0.9 y
   tenait. Outfit est une géométrique plus large — à 0.9 les lignes se
   touchent.                                                               */
/* ⚠️ PAS de capitales : ce sont les natures, sous le titre, qui les
   portent. Deux blocs en capitales l'un sur l'autre s'annulent — la
   distinction se fait par la casse autant que par la taille.             */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  color: var(--ink);
  line-height: 1;
}

/* ⚠️ PAS DE CAPITALES. Elles étaient posées ici, alors que la casse est une
   décision par emploi et non par palier : le titre de fiche est en casse
   normale (§4.3), et un bloc en capitales sous un autre s'annule. Un titre
   qui les veut pose `.is-upper`, le modifieur existe pour ça.            */
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  color: var(--ink);
  line-height: 1.05;
}

/* La display en petit — natures d'une fiche, titres du pas à pas.

   ⚠️ Ce palier existait DEUX FOIS dans `main.css`, écrit à la main :
   `.project__natures` et `.project__step-title` déclaraient les mêmes cinq
   propriétés (display, `--fw-mid`, `letter-spacing`, casse), à la taille
   près. Un palier typo non nommé finit toujours recopié — c'est ce que le
   §7.1 bis A décrit.

   ⚠️ La TAILLE n'est pas dans la classe : les deux emplois n'ont pas la
   même (`--fs-title` pour les natures, `--fs-value` pour le pas à pas), et
   c'est la seule chose qui les distingue. Elle reste donc à la charge de la
   règle de structure — la classe porte la voix, pas l'échelle.           */
.t-meta {
  font-family: var(--font-display);
  font-weight: var(--fw-mid);
  color: var(--ink);
  letter-spacing: 0.04em;
}

/* — Texte (Roboto) ——————————————————————————————————————————————————————— */

.t-title {
  font-family: var(--font-text);
  font-size: var(--fs-title);
  font-weight: var(--fw-light);
  color: var(--ink);
  line-height: 1.25;
}

.t-value {
  font-family: var(--font-text);
  font-size: var(--fs-value);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: 1.3;
}

.t-body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--ink);
  line-height: 1.55;
}

.t-label {
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--ink-soft);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* — Modifieurs — à combiner, jamais à dupliquer ————————————————————————— */

.is-soft    { color: var(--ink-soft); }
.is-ink     { color: var(--ink); }
/* ⚠️ `.is-accent` SURLIGNE, il ne teinte plus. Depuis que l'accent est le
   vert lemon, un texte de cette couleur donne 1,23:1 sur blanc — invisible.
   Le modifieur remplit donc le fond et passe la lettre en noir, comme
   `.mark` au survol. Même couleur, même règle de lisibilité.             */
.is-accent  { background: var(--accent); color: var(--block); }
.is-invert  { color: var(--ink-invert); }
.is-light   { font-weight: var(--fw-light); }
.is-bold    { font-weight: var(--fw-bold); }
.is-upper   { text-transform: uppercase; }
.is-normal  { text-transform: none; }