Feuille de route à couloirs

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 @feuille-de-route

# @feuille-de-route

Plusieurs chantiers menés en parallèle sur une même échelle de temps. Un couloir par chantier, des blocs positionnés à leur période.

## Quand l'employer

Montrer plusieurs chantiers menés en parallèle sur une même échelle de temps.

## Les entrées attendues

- `titre`
- `périodes`
- `couloirs (libellé, blocs)`

## Les règles

1. Un couloir par chantier, et un seul bloc par couloir. Deux blocs dans un couloir signifient deux chantiers.
2. Les blocs se positionnent à leur période réelle, la grille de colonnes fait foi.
3. L'intensité de la teinte marque la charge, pas la priorité.

## À ne pas lui demander

- Dépasser six couloirs.
- Employer la feuille de route pour un chantier unique : le Gantt est plus précis.
- Faire commencer un bloc hors de la grille des périodes affichées.

## 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}
</style>
<div class="c">
  <h2 class="t-menu">{{titre}}</h2>
  <div style="margin-top:46px;flex:1">
    <div style="display:grid;grid-template-columns:190px repeat(4,1fr);gap:0;
         border-bottom:var(--brand-line) solid var(--brand-rule);padding-bottom:11px">
      <div></div>
      {{#periodes}}
      <div style="font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink-2);text-align:center">{{.}}</div>
      {{/periodes}}
    </div>
    {{#couloirs}}
    <div style="display:grid;grid-template-columns:190px repeat(4,1fr);gap:0;align-items:center;
         border-bottom:var(--brand-line) solid var(--brand-rule);min-height:72px">
      <div style="font-size:14.5px;font-weight:600;padding-right:18px">{{lib}}</div>
      <div style="grid-column:{{col}};margin:12px 5px;background:{{bg}};color:{{fg}};
           border-radius:var(--brand-radius);padding:11px 15px;font-size:13.5px">{{bloc}}</div>
    </div>
    {{/couloirs}}
  </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.