Organigramme sur trois niveaux

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 @organigramme

# @organigramme

Une direction, deux à quatre pôles, et leurs équipes. Les traits de liaison prennent l'épaisseur de filet de la charte.

## Quand l'employer

Montrer une structure hiérarchique sur deux ou trois niveaux.

## Les entrées attendues

- `titre`
- `direction`
- `pôles`
- `équipes par pôle`

## Les règles

1. Les traits de liaison prennent l'épaisseur de filet de la charte, jamais une épaisseur propre.
2. Les noms de personnes restent en texte courant. Une case d'organigramme n'est pas une étiquette de rubrique.
3. L'effectif se met sous le libellé du pôle, en encre secondaire.

## À ne pas lui demander

- Dépasser trois niveaux : au-delà, l'organigramme passe en liste indentée.
- Mettre les noms en capitales interlettrées.
- Faire varier la taille des cases selon l'importance perçue d'un pôle.

## 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:52px;flex:1;display:flex;flex-direction:column;align-items:center">
    <div style="background:var(--brand-ink);color:var(--brand-paper);border-radius:var(--brand-radius);
         padding:16px 34px;text-align:center">
      <p style="margin:0;font-size:17px;font-weight:600">{{dir_nom}}</p>
      <p style="margin:3px 0 0;font-size:13px;opacity:.75">{{dir_fonction}}</p>
    </div>
    <div style="width:var(--brand-line);height:34px;background:var(--brand-rule)"></div>
    <div style="width:100%;height:var(--brand-line);background:var(--brand-rule)"></div>
    <div style="width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:26px">
      {{#poles}}
      <div style="display:flex;flex-direction:column;align-items:center">
        <div style="width:var(--brand-line);height:26px;background:var(--brand-rule)"></div>
        <div style="width:100%;background:var(--brand-accent-soft);border-radius:var(--brand-radius);
             padding:13px 16px;text-align:center">
          <p style="margin:0;font-size:15px;font-weight:600;color:var(--brand-ink)">{{lib}}</p>
          <p style="margin:2px 0 0;font-size:12px;color:var(--brand-ink-2)">{{effectif}}</p>
        </div>
        <div style="margin-top:16px;width:100%">
          {{#equipes}}
          <p style="margin:0 0 8px;font-size:13px;color:var(--brand-ink-2);text-align:center;
             padding:7px 10px;border:var(--brand-line) solid var(--brand-rule);border-radius:var(--brand-radius)">{{.}}</p>
          {{/equipes}}
        </div>
      </div>
      {{/poles}}
    </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.