Bons et mauvais usages

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 @contre-exemples

# @contre-exemples

Une rangée de cas marqués corrects ou fautifs, avec la raison écrite sous chaque vignette.

## Quand l'employer

Couper court aux discussions sur une règle déjà écrite. Montrer la faute à côté de l'usage correct fait plus qu'une règle énoncée seule.

## Les entrées attendues

- `titre`
- `4 cas (statut, cas, raison)`
- `note`

## Les règles

1. Chaque vignette porte son statut en clair, en mot et en marque visuelle. La couleur seule ne suffit pas.
2. La raison est écrite sous chaque cas. Un cas barré sans raison ne s'applique pas, il s'obéit ou se conteste.
3. Autant de cas corrects que de cas fautifs : une page qui n'énumère que des interdits ne se retient pas.
4. Les fautes montrées sont des fautes vues, pas des fautes imaginées.
5. Le rouge de l'erreur, s'il existe dans la charte, ne sert qu'ici. Ailleurs, il redevient une couleur ordinaire.

## À ne pas lui demander

- Illustrer une faute avec le document d'un concurrent ou d'un confrère.
- Empiler plus de quatre cas : la page devient un procès-verbal.

## 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 .cas{border-radius:var(--brand-radius);overflow:hidden;display:flex;flex-direction:column;
   border:var(--brand-line) solid var(--brand-rule)}
.c .cas .bandeau{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:11.5px;
   letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.c .cas.ok .bandeau{background:var(--brand-accent-soft);color:var(--brand-accent)}
.c .cas.ko .bandeau{background:var(--brand-wash);color:var(--brand-ink-2)}
.c .cas .vue{flex:1;padding:22px 20px;display:flex;align-items:center;min-height:118px}
.c .cas.ko .vue{opacity:.55}
.c .cas .vue p{margin:0;font-size:14.5px;line-height:1.45}
.c .cas .pourquoi{margin:0;padding:14px 20px 18px;font-size:12.5px;line-height:1.45;
   color:var(--brand-ink-2);border-top:var(--brand-line) solid var(--brand-rule)}
</style>
<div class="c">
  <h2 class="t-menu">{{titre}}</h2>
  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px;flex:1;align-content:center">
    {{#cas}}
    <div class="cas {{statut}}">
      <div class="bandeau"><span>{{marque}}</span><span>{{libelle}}</span></div>
      <div class="vue"><p>{{cas}}</p></div>
      <p class="pourquoi">{{raison}}</p>
    </div>
    {{/cas}}
  </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.