Couverture pleine image

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 @couverture-pleine-image

# @couverture-pleine-image

Une photographie plein cadre, un voile et une teinte de charte, le titre posé en bas à gauche. Le voile n'est pas décoratif, il garantit la lisibilité du texte.

## Quand l'employer

Ouvrir un document quand la marque a une banque d'images tenue.

## Les entrées attendues

- `image`
- `titre`
- `sous-titre`
- `émetteur`
- `date`

## Les règles

1. Le voile de charte est obligatoire. Sans lui, le titre devient illisible dès que l'image change.
2. Le filtre et la teinte viennent de la charte, jamais de l'image. C'est ce qui rend deux photographies différentes cohérentes entre elles.
3. Le titre se pose en bas à gauche, toujours au même endroit dans un même document.
4. Le texte posé sur l'image prend `--brand-img-ink`, jamais `--brand-paper`. Le voile reste sombre même quand la charte est sombre, donc une encre déduite du papier disparaîtrait sur une charte sombre.

## À ne pas lui demander

- Poser du texte sur une image sans voile.
- Employer une image dont le sujet occupe la zone de texte.
- Changer de traitement d'image d'une couverture à l'autre.

## 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" style="padding:0;justify-content:flex-end">
  <img class="img" src="{{image}}" alt="">
  <div class="teinte"></div>
  <div class="voile"></div>
  <div style="position:relative;padding:88px;color:var(--brand-img-ink)">
    <p style="font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px;opacity:.85">{{kicker}}</p>
    <h2 style="color:var(--brand-img-ink);font-size:66px;max-width:19ch">{{titre}}</h2>
    <p style="font-size:20px;margin:22px 0 0;max-width:52ch;opacity:.9;line-height:1.4">{{sous_titre}}</p>
    <div style="margin-top:40px;display:flex;gap:26px;font-size:14px;opacity:.8">
      <span>{{emetteur}}</span><span>{{date}}</span>
    </div>
  </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.