Règle et applications

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 @regle-et-exemples

# @regle-et-exemples

La règle énoncée dans une colonne étroite, ses applications réelles en regard. L'appariement se voit sans légende.

## Quand l'employer

Énoncer une règle de charte et la montrer appliquée dans le même regard. Le lecteur n'a pas à imaginer le résultat, il le voit.

## Les entrées attendues

- `titre`
- `énoncé de la règle`
- `2 à 4 applications (libellé, démonstration)`
- `note`

## Les règles

1. Une règle par page. Deux règles sur une page produisent deux pages mal faites.
2. L'énoncé tient en une phrase, à l'impératif ou à l'indicatif présent. Il se cite tel quel dans une revue.
3. Chaque application montre le rendu, pas sa description. La vignette porte le cas réel.
4. Les applications gardent la même largeur et le même cadre : c'est l'appariement qui fait la démonstration.
5. La note de bas de page porte l'exception, quand il y en a une. Sans exception, la note reste vide.

## À ne pas lui demander

- Mêler une règle et son contre-exemple ici : les fautes se montrent avec @contre-exemples.
- Illustrer une règle par une capture d'un autre document que le vôtre.

## 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 .app{border:var(--brand-line) solid var(--brand-rule);border-radius:var(--brand-radius);
   padding:22px 24px;display:flex;flex-direction:column;gap:14px;background:var(--brand-paper)}
.c .app b{font-family:var(--brand-display);font-size:14px;font-weight:600;letter-spacing:-.01em}
.c .demo{background:var(--brand-wash);border-radius:var(--brand-radius);padding:20px 22px;flex:1;
   display:flex;align-items:center}
</style>
<div class="c">
  <div style="display:grid;grid-template-columns:300px minmax(0,1fr);gap:60px;flex:1">
    <div style="display:flex;flex-direction:column;justify-content:center;
         border-right:var(--brand-line) solid var(--brand-rule);padding-right:44px">
      <p class="kicker">{{kicker}}</p>
      <h2 class="t-menu" style="font-size:30px">{{titre}}</h2>
      <p style="margin:22px 0 0;font-size:16px;line-height:1.5;color:var(--brand-ink-2);
         border-left:3px solid var(--brand-accent);padding-left:16px">{{regle}}</p>
    </div>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-content:center">
      {{#applications}}
      <div class="app">
        <b>{{lib}}</b>
        <div class="demo">
          <p style="margin:0;font-size:15px;line-height:1.45;color:var(--brand-ink)">{{demo}}</p>
        </div>
      </div>
      {{/applications}}
    </div>
  </div>
  <div class="foot"><span>{{note}}</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.