Grille d'images légendées

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 @grille-images

# @grille-images

Trois à quatre visuels de même traitement, chacun avec sa légende. Le filtre de charte s'applique à tous, c'est ce qui tient la cohérence.

## Quand l'employer

Montrer trois à quatre lieux, produits ou terrains d'un seul coup d'œil.

## Les entrées attendues

- `titre`
- `images (visuel, libellé, légende)`

## Les règles

1. Toutes les images de la grille prennent le même filtre et la même teinte de charte. C'est la seule chose qui les rend cohérentes.
2. Un libellé court, puis une légende d'une ligne. Jamais l'inverse.
3. Trois ou quatre cases. À deux, @image-et-texte convient mieux.

## À ne pas lui demander

- Mélanger des photographies et des captures d'écran dans la même grille.
- Laisser une case sans légende.
- Dépasser quatre cases : au-delà, les images deviennent des vignettes illisibles.

## Tokens de charte employés

Ce composant n'écrit aucune couleur, aucune police, aucun rayon, aucune
épaisseur de filet ni aucun traitement d'image 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`, plus les quatre tokens
d'image `--brand-img-voile`, `--brand-img-ink`, `--brand-img-filtre` et
`--brand-img-teinte`.

Ces quatre-là rendent cohérentes des photographies qui ne le sont pas au
départ. Ils se règlent une fois par marque, jamais par slide.


## 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}
</style><div class="c">
  <h2>{{titre}}</h2>
  <div style="margin-top:44px;flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:26px">
    {{#cases}}
    <div style="display:flex;flex-direction:column">
      <div style="position:relative;flex:1;overflow:hidden;border-radius:var(--brand-radius)">
        <img class="img" src="{{img}}" alt="">
        <div class="teinte"></div>
      </div>
      <p style="margin:16px 0 0;font-size:16px;font-weight:600">{{lib}}</p>
      <p style="margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--brand-ink-2)">{{legende}}</p>
    </div>
    {{/cases}}
  </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.