Spécimen typographique

Tu produis une slide au format HTML, à la charte ci-dessous. Applique le skill sans l'interpréter.

## Ma charte

--brand-paper:       #FFFFFF        /* fond de slide */
--brand-ink:         #101F2C        /* encre principale */
--brand-ink-2:       #5B6875        /* encre secondaire */
--brand-wash:        #EEF2F5        /* aplat neutre */
--brand-accent:      #0E6B8A        /* accent, avec parcimonie */
--brand-accent-soft: #DDEDF3        /* accent adouci */
--brand-rule:        #D7DEE4        /* filets */
--brand-radius:      4px            /* rayon unique */
--brand-line:        1px            /* épaisseur de filet unique */
--brand-display:     "…"            /* police des titres */
--brand-body:        "…"            /* police du corps */

/* les quatre suivantes ne servent qu'aux composants qui portent une image */
--brand-img-voile:   linear-gradient(180deg, rgba(16,31,44,.72) 0%, rgba(16,31,44,.42) 55%, rgba(16,31,44,.66) 100%);
                                    /* voile posé sur l'image, obligatoire */
--brand-img-ink:     #FFFFFF        /* encre du texte posé SUR l'image */
--brand-img-filtre:  grayscale(.35) contrast(1.06) brightness(.95)
                                    /* traitement, identique pour toute image */
--brand-img-teinte:  rgba(14,107,138,.22)
                                    /* teinte projetée, en mélange multiply */

Remplacez ces quinze valeurs par les vôtres.

L'encre d'image ne se déduit ni du papier ni de l'encre : elle se lit contre le
voile, qui reste sombre même sur une charte sombre.

## Le skill de @specimen-typo

# @specimen-typo

Chaque style composé dans sa propre police et sa propre graisse, en regard de sa spécification technique.

## Quand l'employer

Fixer les styles d'un document dans sa page de charte. Le lecteur voit le rendu réel et lit la spécification à côté, donc il ne peut pas se tromper en appliquant.

## Les entrées attendues

- `titre`
- `4 à 6 styles (nom, échantillon, corps, interligne, graisse)`
- `note de licence`

## Les règles

1. L'échantillon est composé dans le style qu'il décrit. Un échantillon en corps de texte ne spécifie rien.
2. La spécification donne le corps, l'interligne et la graisse. Sans ces trois valeurs, le style n'est pas reproductible.
3. Les styles se rangent du plus grand au plus petit, ce qui rend la hiérarchie lisible d'un coup d'œil.
4. L'échantillon porte du vrai texte du document, jamais un faux latin.
5. La note de licence dit d'où vient la police et ce que la licence autorise.

## À ne pas lui demander

- Présenter plus de six styles : une charte qui en demande dix a un problème en amont.
- Montrer un alphabet complet, qui appartient au spécimen du fondeur, pas à votre charte.

## Tokens de charte employés

Ce composant n'écrit aucune couleur, aucune police, aucun rayon ni aucune
épaisseur de filet en dur. Il lit uniquement :

`--brand-paper`, `--brand-ink`, `--brand-ink-2`, `--brand-wash`,
`--brand-accent`, `--brand-accent-soft`, `--brand-rule`, `--brand-radius`,
`--brand-line`, `--brand-display`, `--brand-body`.

Ce composant lit ces onze valeurs et s'y conforme sans interprétation. La
charte complète en compte quinze : les quatre autres règlent le traitement des
images et ne servent qu'aux composants qui en portent une.


## Le composant

```html
<style>
.c{position:absolute;inset:0;background:var(--brand-paper);color:var(--brand-ink);
   font-family:var(--brand-body);padding:72px 88px 104px;box-sizing:border-box;display:flex;
   flex-direction:column}
.c h2{font-family:var(--brand-display);font-size:46px;line-height:1.08;letter-spacing:-.026em;
   font-weight:600;margin:0;max-width:24ch}
.c h2.t-fort{font-size:68px;line-height:1.02;letter-spacing:-.035em;max-width:17ch}
.c h2.t-menu{font-size:34px;line-height:1.14;letter-spacing:-.018em;max-width:30ch}
.c .sub{color:var(--brand-ink-2);font-size:19px;margin:14px 0 0;max-width:62ch;line-height:1.45}
.c .foot{position:absolute;left:88px;right:88px;bottom:40px;display:flex;justify-content:space-between;
   font-size:13px;color:var(--brand-ink-2)}
.c .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-accent);
   font-weight:600;margin:0 0 18px}
/* image : voile, filtre et teinte viennent tous de la charte */
.c .img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
   filter:var(--brand-img-filtre)}
.c .voile{position:absolute;inset:0;background:var(--brand-img-voile)}
.c .teinte{position:absolute;inset:0;background:var(--brand-img-teinte);mix-blend-mode:multiply}
.c .sty{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:32px;align-items:baseline;
   padding:19px 0;border-bottom:var(--brand-line) solid var(--brand-rule)}
.c .sty .ech{font-family:var(--brand-display);margin:0;letter-spacing:-.022em}
.c .sty .spec{margin:0;font-size:12px;line-height:1.7;color:var(--brand-ink-2);text-align:right}
.c .sty .nom{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-accent);
   margin:0 0 7px;font-weight:600}
</style>
<div class="c">
  <h2 class="t-menu">{{titre}}</h2>
  <div style="margin-top:24px;flex:1;display:flex;flex-direction:column;justify-content:center">
    {{#styles}}
    <div class="sty">
      <div>
        <p class="nom">{{nom}}</p>
        <p class="ech" style="font-size:{{corps}};line-height:{{inter}};font-weight:{{graisse}}">{{echantillon}}</p>
      </div>
      <p class="spec">{{corps}} / {{inter}}<br>graisse {{graisse}}<br>{{police}}</p>
    </div>
    {{/styles}}
  </div>
  <div class="foot"><span>{{licence}}</span><span>{{page}}</span></div>
</div>

```

## Mon contenu

Remplacez les valeurs entre accolades par les vôtres, puis rendez la slide en
1280 × 720. Ne changez aucune règle graphique du composant.