# Design system · Système « Strates »

Le système de ce site, du token au template de page. Trois couleurs portent la page : le blanc pour lire, le bleu pour affirmer, le noir pour identifier. Deux familles de caractères : Archivo pour les titres, Schibsted Grotesk pour tout le reste.

Il est organisé en cinq niveaux, chacun construit avec le précédent. Les composants sont génériques : une card, un bouton, un tag, avec leurs variantes. Leur usage dans le site est décrit au niveau des organismes et des templates.

## Pour les agents

Chaque token et chaque composant de cette page existe aussi en Markdown et en JSON. Les tokens y suivent le format du W3C Design Tokens Community Group ; chaque composant y porte son niveau, son fichier, ses propriétés, ses règles d’usage et un exemple de code.

Valeurs et propriétés sont lues dans le code au moment de la publication. La documentation ne peut donc pas décrire un composant qui n’existe plus, ni omettre une propriété.

- [Tokens et composants en JSON](https://florianbutour.com/systeme.json)

Écrits liés :

- [Un design system qui s’arrête au bouton](https://florianbutour.com/ecrits/un-design-system-qui-s-arrete-au-bouton) : Les patterns métier prolongent les composants d’un design system en organisant les interactions autour de tâches récurrentes.
- [L’IA, deuxième usager du produit](https://florianbutour.com/ecrits/l-ia-deuxieme-usager-du-produit) : Lorsqu’un agent agit au nom d’une personne, concevoir le produit implique de définir ce qu’elle peut lui déléguer, comment elle garde la main et comment elle comprend ce qui a été fait.

## 1. Tokens

Les décisions de base, nommées par rôle et jamais par valeur. Aucun composant n’utilise une couleur, une taille ou un spacing qui n’est pas un token.

### Couleurs

Un seul mode, sans mode sombre : les sections noires jouent ce rôle dans la page. Les contrastes sont calculés selon WCAG 2.1.

| Token | Valeur | Usage |
| --- | --- | --- |
| `--color-background-canvas` | #ffffff | Fond de page. |
| `--color-background-brand` | #1f2be0 | Colonne du hero, bloc Position, tags On, aplat de hover. |
| `--color-background-inverse` | #0d0d0d | Barre d’identité, planche sombre, footer. |
| `--color-background-subtle` | #f5f5f5 | Encart, cadre des figures, boîte flottante, hover des cards. |
| `--color-background-overlay` | rgb(13 13 13 / 0.4) | Voile derrière une modal ouverte. |
| `--color-surface-inactive` | #e7e7e7 | Tag Off. |
| `--color-surface-placeholder` | #d4d4d4 | Emplacement d’un visuel pas encore livré (aperçu seulement). |
| `--color-text-primary` | #0d0d0d | Titres et texte courant. 19,4:1 sur canvas. |
| `--color-text-secondary` | #2a2a2a | Texte de second plan. 14,4:1 sur canvas. |
| `--color-text-muted` | #737373 | Méta, légendes, libellés. 4,7:1 sur canvas. |
| `--color-text-supporting` | #5c5c59 | Texte d’un tag Off. 5,4:1 sur surface/inactive. |
| `--color-text-inverse` | #ffffff | Texte sur bleu ou sur noir. 8,5:1 sur brand, 19,4:1 sur inverse. |
| `--color-text-on-brand-secondary` | #daddff | Texte secondaire sur bleu. 6,4:1 sur brand. |
| `--color-text-on-brand-muted` | rgb(255 255 255 / 0.8) | Texte d’un tag On. 5,9:1 sur brand. |
| `--color-text-on-dark-muted` | #9a9a9a | Texte secondaire sur noir. 6,9:1 sur inverse. |
| `--color-border-default` | #e7e7e7 | Séparateurs discrets entre lignes et cards. Décoratif. |
| `--color-border-ink` | #0d0d0d | Filet sous les titres, contour du bouton filet, boîte flottante. |
| `--color-border-white` | #ffffff | Contour du bouton sur fond sombre. |
| `--color-border-on-dark` | #333333 | Séparateurs sur noir. |

Règles :

- Un seul accent, le bleu, toujours en aplat.
- Sur le bleu, le texte passe par text/inverse, text/on-brand-secondary ou text/on-brand-muted, jamais par text/muted.
- Le noir encadre l’identité (barre sous le hero, footer). Pas de troisième fond.
- text/muted (4,7:1) sert à la méta et aux légendes, à partir de 12 px, jamais à une phrase qu’on doit lire. Il reste sur canvas : sur background/subtle, il tombe à 4,3:1, sous le seuil AA.
- Un composant n’utilise que ces rôles (`--color-<groupe>-<nom>`), jamais une valeur en dur.

### Styles de texte

Neuf styles, mêmes noms que dans Figma. Les tailles sont fluides entre 375 et 1 440 px de large ; Body, UI, Caption et Label ne descendent jamais sous leur taille.

| Classe | Taille et interligne | Rôle |
| --- | --- | --- |
| `.text-display` | clamp(2.5rem, 1.972rem + 2.254vw, 4rem) / 0.9375 | Titre de page, accroche du hero, phrase du bloc Position, adresse e-mail. |
| `.text-heading-40` | clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem) / 1 | Titres de section et de card L, titres de pilier. |
| `.text-heading-24` | clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem) / 1 | Titres de card M, intertitres, tag L. |
| `.text-lead` | clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem) / 1.3636 | Chapô, encarts, phrase de la colonne bleue. |
| `.text-body` | 1.0625rem / 1.5294 | Texte courant. |
| `.text-body-strong` | 1.0625rem / 1.5294 | Début de phrase appuyé. |
| `.text-ui` | 0.9375rem / 1.3333 | Navigation, liens de suite, sommaire. |
| `.text-caption` | 0.8125rem / 1.5385 | Méta, légendes, tags S. |
| `.text-label` | 0.75rem / 1.1667 | Surtitres et libellés de section, en capitales. |

Règles :

- Archivo ne sert qu’aux titres, jamais à une phrase de plus de trois lignes.
- Les capitales passent par Label, jamais par le texte saisi.
- Un début de phrase appuyé passe par Body Strong ou par `strong`, jamais par un font weight appliqué à la main.
- Chaque style fixe son font weight, quel que soit l’élément qui le porte (un titre h3 en Label reste en Regular).

### Font weights

Quatre font weights seulement. Le gras à 700 n’existe pas dans le système.

| Token | Valeur | Usage |
| --- | --- | --- |
| `--font-weight-regular` | 400 | Texte courant, Lead, Caption, Label. |
| `--font-weight-medium` | 500 | UI, Body Strong, mise en valeur (`strong`), titres des boîtes flottantes. |
| `--font-weight-extrabold` | 800 | Heading/40 et Heading/24. |
| `--font-weight-black` | 900 | Display. |

Règles :

- Un font weight passe toujours par un token ou par un style de texte.
- `strong` est en Medium partout, par une règle globale.

### Spacing

Une seule échelle, nommée en pixels, sur une base de 4 px. Les paliers de 2 et 6 px servent aux réglages fins, comme le bandeau des tags.

| Token | Valeur |
| --- | --- |
| `--space-2` | 0.125rem |
| `--space-4` | 0.25rem |
| `--space-6` | 0.375rem |
| `--space-8` | 0.5rem |
| `--space-12` | 0.75rem |
| `--space-16` | 1rem |
| `--space-20` | 1.25rem |
| `--space-24` | 1.5rem |
| `--space-32` | 2rem |
| `--space-40` | 2.5rem |
| `--space-48` | 3rem |
| `--space-56` | 3.5rem |
| `--space-64` | 4rem |
| `--space-72` | 4.5rem |
| `--space-80` | 5rem |
| `--space-96` | 6rem |
| `--space-112` | 7rem |
| `--space-128` | 8rem |

Règles :

- Marges, retraits, écarts et positions n’utilisent que l’échelle `--space-<px>`.
- Toutes les dimensions en pixels sont paires.
- Les grandes mesures de layout passent par les tokens `--layout-*`.

### Layout

Les mesures qui structurent les pages.

| Token | Valeur | Usage |
| --- | --- | --- |
| `--layout-max` | 90rem | Largeur maximale du contenu (1 440 px). |
| `--layout-gutter` | clamp(1.25rem, 0.458rem + 3.38vw, 3.5rem) | Marge latérale unique, de 20 à 56 px. |
| `--layout-nav-height` | 5.375rem | Hauteur de la navigation (86 px). |
| `--layout-offset` | 19rem | Retrait des cards dans les listes (304 px). |
| `--layout-strates-width` | 16.25rem | Colonne des groupes de tags verticaux (260 px). |
| `--layout-section` | 8.75rem | Haut des sections de l’accueil et du hero, page 404 (140 px). |
| `--layout-ecrit-tete` | 16.5rem | Haut des pages d’écrit (264 px). |
| `--layout-page-tete` | clamp(5rem, 0.6rem + 18.78vw, 17.5rem) | Haut des pages intérieures, de 80 à 280 px. |

Règles :

- Une seule marge latérale, `--layout-gutter`, 56 px sur desktop, 20 px sur mobile.
- Breakpoints : mobile sous 40rem, tablette de 40 à 64rem, desktop au-delà.

### Mouvement

Le mouvement n’existe que s’il révèle une structure. Avec prefers-reduced-motion, les durées passent à zéro et tout s’affiche dans son état final.

| Token | Valeur | Usage |
| --- | --- | --- |
| `--motion-duration` | 200ms | Hovers, aplats des boutons et de la navigation (200 ms). |
| `--motion-duration-long` | 400ms | Balayage des cards, apparitions, figures de la méthode (400 ms). |
| `--motion-ease` | cubic-bezier(0.2, 0, 0, 1) | Courbe commune à tous les mouvements. |

Règles :

- Les tags ne sont jamais animés.
- Les apparitions n’ont lieu qu’une fois, à l’entrée dans l’écran.

## 2. Atomes

Les plus petits éléments d’interface, sans contenu métier. Ils n’utilisent que des tokens.

### Bouton (`Bouton`)

Fichier : `src/components/atomes/Bouton.astro` · Figma : 2:493, 8:480

Déclenche une action ou mène à une page. Rendu en lien s’il a une adresse, en bouton sinon.

Variantes :

- plein : fond clair ; au hover, un aplat bleu balaie le bouton depuis son bord gauche.
- contour : filet blanc, pour les surfaces sombres ; au hover, un aplat blanc.
- accent : aplat bleu, texte blanc. Action principale sur fond clair.
- filet : filet encre sur fond blanc. Action secondaire sur fond clair.
- Tailles M (16 × 24 px) et S (12 × 20 px).
- Indisponible : si l’adresse vaut encore « À compléter », le bouton devient un texte neutre (aperçu seulement).

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `variante` | `'plein' \| 'contour' \| 'accent' \| 'filet'` | `'plein'` | Apparence du bouton. |
| `taille` | `'M' \| 'S'` | `'M'` | M par défaut, S dans les boîtes flottantes. |
| `href` | `string` |  | Adresse ; sans elle, le bouton est un élément button. |

Contenu (slots) :

- principal : Libellé.

À faire :

- Un libellé court qui dit l’action ou la destination.
- Sur fond sombre, plein ou contour ; sur fond clair, accent ou filet.

À éviter :

- Un bouton pour un lien de texte courant : utiliser Lien.
- Deux boutons accent côte à côte.

Accessibilité :

- Focus visible : contour de 2 px en couleur du texte.
- Hors d’un formulaire, `type` vaut « button » ; il peut être remplacé (« submit » dans une modal).

Utilisé par : CopieLienIA, Accueil, Parcours

```astro
<Bouton variante="plein" href="/travaux">Voir les travaux ↓</Bouton>
<Bouton variante="accent" taille="S" type="submit" value="copier">Copier</Bouton>
```

### Encart (`Encart`)

Fichier : `src/components/atomes/Encart.astro`

Isole un texte d’introduction sur un fond gris léger.

Variantes :

- Une seule apparence. La marge intérieure passe de 24 × 32 à 20 px sur mobile.

Contenu (slots) :

- principal : Texte de l’encart.

À faire :

- Un paragraphe en Lead, placé juste sous un header.

À éviter :

- Plusieurs encarts à la suite.
- Un encart pour une alerte ou un message d’état.

Accessibilité :

- Le fond est décoratif ; le texte garde ses contrastes (17,8:1 en text/primary).

Utilisé par : Accueil, Cas, Ecrit

```astro
<Encart><p class="text-lead">Chapô du cas.</p></Encart>
```

### Tag (`Etiquette`)

Fichier : `src/components/atomes/Etiquette.astro` · Figma : 2:494

Un bandeau de texte qui qualifie un contenu, par exemple une strate touchée ou une pratique.

Variantes :

- Taille S : Caption sur un bandeau de 28 px. On en bleu, Off en gris.
- Taille L : Heading/24 sur aplat bleu, texte blanc. Sert de titre.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `taille` | `'S' \| 'L'` | `'S'` | S (bandeau) ou L (titre). |
| `etat` | `boolean` | `true` | On (vrai) ou Off (faux). |
| `etatTexte` | `string` |  | Texte lu après le libellé, par exemple « touchée ». |
| `balise` | `'span' \| 'h2' \| 'h3' \| 'h4'` | `'span'` | Élément rendu ; un niveau de titre quand le tag nomme un bloc. |

Contenu (slots) :

- principal : Libellé.

À faire :

- Donner l’état en texte avec `etatTexte` quand On et Off ont un sens.
- Regrouper les tags d’un même contenu dans un Groupe de tags.

À éviter :

- Animer un tag ou le rendre cliquable.
- Un tag pour une action.

Accessibilité :

- L’état n’est jamais porté par la couleur seule : `etatTexte` est lu après le libellé.
- Off : text/supporting sur surface/inactive, 5,4:1.

Utilisé par : Carte, GroupeEtiquettes

```astro
<Etiquette etat={false} etatTexte="non touchée">modèle</Etiquette>
<Etiquette taille="L" balise="h3">surfaces</Etiquette>
```

### Lien (`Lien`)

Fichier : `src/components/atomes/Lien.astro`

Un lien hors du texte courant, sans soulignement au repos, souligné au hover.

Variantes :

- Le style de texte est libre (UI, Heading/24…).

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `href` | `string` | obligatoire | Adresse. |
| `texte` | `string` |  | Classe du style de texte, par exemple « text-ui ». |

Contenu (slots) :

- principal : Libellé.

À faire :

- Un libellé qui dit la destination, avec une flèche quand il mène à la suite.

À éviter :

- Un lien dans un paragraphe : le texte courant souligne ses liens.

Accessibilité :

- Hors du texte courant, sa place et son style suffisent à le reconnaître ; le focus reste visible.

Utilisé par : PiedDePage, Cas, Ecrit

```astro
<Lien texte="text-ui" href="/ecrits">← Tous les écrits</Lien>
```

## 3. Molécules

Des atomes assemblés en un élément qui a une fonction : une card, un header, un tooltip.

### Card (`Carte`)

Fichier : `src/components/molecules/Carte.astro` · Figma : 2:489, 9:1600, 2:491

Présente un contenu en résumé, avec ou sans visuel, et mène à lui.

Variantes :

- Apparence ligne, taille L : titre Heading/40, texte et méta. Sans visuel, tags en colonne à droite ; avec visuel (400 × 300, à gauche), tags sous le texte.
- Apparence ligne, taille M : titre Heading/24, tags en ligne sous le texte.
- Apparence cadre : bordure, visuel en haut, pas de lien ; le titre peut être un tag L.
- Retrait de 304 px sur desktop : par défaut en taille M et en taille L sans visuel.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `taille` | `'L' \| 'M'` | `'M'` | L ou M. |
| `apparence` | `'ligne' \| 'cadre'` | `'ligne'` | ligne (liste cliquable) ou cadre (bloc encadré). |
| `titre` | `string` | obligatoire | Titre de la card. |
| `texte` | `string` | obligatoire | Description ou thèse. |
| `meta` | `string` |  | Ligne de méta en Caption, par exemple « entreprise · domaine ». |
| `href` | `string` |  | Adresse du contenu (apparence ligne). |
| `visuel` | `{ src?: ImageMetadata \| string; alt: string; largeur?: number; hauteur?: number }` |  | Image et son texte alternatif ; sans image, un aplat réserve la place en aperçu. |
| `etiquettes` | `ItemEtiquette[]` |  | Tags du Groupe de tags. |
| `etiquettesLibelle` | `string` |  | Nom de la liste de tags pour les technologies d’assistance. |
| `retrait` | `boolean` |  | Retrait de 304 px sur desktop. |
| `titreEtiquette` | `boolean` | `false` | Titre rendu en tag L (apparence cadre). |
| `niveau` | `2 \| 3 \| 4` | `3` | Niveau du titre. |
| `lang` | `string` |  | Langue du contenu, si elle diffère de celle de la page. |

À faire :

- Empiler les cards ligne en liste, séparées par leur filet.
- Garder la même taille dans une même liste : L pour les cas, M pour les écrits.

À éviter :

- Un deuxième lien dans une card ligne : toute la card est déjà cliquable.
- Une card cadre pour un contenu à ouvrir.

Accessibilité :

- Le lien est porté par le titre et s’étend à toute la card ; il n’y a qu’un arrêt de tabulation.
- Au focus clavier, le fond balaie la card comme au hover.
- Le niveau du titre suit la hiérarchie de la page (`niveau`).

Composé de : Etiquette, GroupeEtiquettes

Utilisé par : Accueil, Ecrit, ListeEcrits, ListeTravaux

```astro
<Carte taille="L" titre="…" texte="…" meta="Entreprise · domaine" href="/travaux/…"
  visuel={{ src: image, alt: '…' }} etiquettes={etiquettesStrates(strates, ui)} etiquettesLibelle="Strates touchées" />
<Carte {...carteDEcrit(ecrit, locale, ui)} retrait={false} />
```

### Header (`EnTete`)

Fichier : `src/components/molecules/EnTete.astro` · Figma : 2:488

Ouvre une page ou une section par un titre en Display.

Variantes :

- Section : 20 px sous le titre, posé sur un filet encre de 3 px.
- Page : 72 px sous le titre (40 px sur mobile), avec ou sans filet.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `titre` | `string` | obligatoire | Texte du titre. |
| `niveau` | `1 \| 2` | `2` | 1 en tête de page, 2 dans une section. |
| `id` | `string` |  | Identifiant du titre, pour aria-labelledby et les ancres. |
| `espace` | `'section' \| 'page'` | `'section'` | section ou page. |
| `filet` | `boolean` | `true` | Filet encre sous le titre. |

À faire :

- Un seul header de niveau 1 par page.

À éviter :

- Un header pour un titre de card ou de bloc : utiliser les styles Heading.

Accessibilité :

- `niveau` fixe h1 ou h2 ; `id` permet de nommer la section qui le contient.

Utilisé par : Accueil, Cas, Contact, Ecrit, ListeEcrits, ListeTravaux, Parcours

```astro
<EnTete titre="Travaux" niveau={1} espace="page" />
```

### Figure (`Figure`)

Fichier : `src/components/molecules/Figure.astro` · Figma : 119:8515

Une illustration sur fond gris et sa légende, dans un cadre aux proportions fixes.

Variantes :

- Le cadre garde ses proportions (`ratio`) ; des figures de même rang se remplacent sans que la page bouge.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `src` | `string` | obligatoire | Adresse de l’image, dans public/. |
| `legende` | `string` | obligatoire | Légende en Caption. |
| `alt` | `string` | `''` | Texte alternatif ; vide si la légende suffit. |
| `ratio` | `string` | `'676 / 578'` | Proportions du cadre. |

À faire :

- Une légende qui décrit ce que montre la figure.

À éviter :

- Une légende qui répète le titre voisin.

Accessibilité :

- Par défaut l’illustration est décorative (alt vide) et la légende la décrit ; un texte alternatif peut être passé.

Utilisé par : Accueil

```astro
<Figure src="/images/methode/cadrer.svg" legende="Fig. 04 · Un parcours, ses moments et ses frictions" />
```

### Groupe de tags (`GroupeEtiquettes`)

Fichier : `src/components/molecules/GroupeEtiquettes.astro`

Une liste de tags S, chacun On ou Off.

Variantes :

- Verticale : colonne de 260 px. Horizontale : bandeaux de 140 px.
- Repli sous un breakpoint : en ligne, avec des tags étirés (mobile) ou à leur largeur (tablette).

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `etiquettes` | `ItemEtiquette[]` | obligatoire | Libellé, état et texte d’état de chaque tag. |
| `libelle` | `string` |  | Nom de la liste pour les technologies d’assistance. |
| `orientation` | `'verticale' \| 'horizontale'` | `'verticale'` | verticale ou horizontale. |
| `replier` | `'mobile' \| 'tablette'` |  | Breakpoint sous lequel le groupe passe en ligne. |

À faire :

- Les mêmes tags dans le même ordre pour un même type de contenu (les trois strates, toujours dans l’ordre surfaces, design system, modèle).

À éviter :

- Mélanger des tags de natures différentes dans un groupe.

Accessibilité :

- Une liste nommée par `libelle` ; chaque état est lu en texte.

Composé de : Etiquette

Utilisé par : Carte, PilierDeMethode, Cas, Parcours

```astro
<GroupeEtiquettes etiquettes={[{ libelle: 'surfaces', etat: true, etatTexte: 'touchée' }]}
  libelle="Strates touchées" orientation="horizontale" replier="mobile" />
```

### Tooltip (`Infobulle`)

Fichier : `src/components/molecules/Infobulle.astro` · Figma : 111:5507

Montre un texte avant une action, au hover et au focus clavier de son hôte.

Variantes :

- Sous l’hôte, ou au-dessus quand la place manque ; alignée au début ou à la fin de l’hôte.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `id` | `string` | obligatoire | Identifiant, pour aria-describedby. |
| `titre` | `string` | obligatoire | Titre de la boîte. |
| `alignement` | `'debut' \| 'fin'` | `'debut'` | Bord de l’hôte auquel elle s’aligne (desktop). |

Contenu (slots) :

- principal : Texte montré.

À faire :

- Montrer ce qui va se passer (le texte qui sera copié), pas répéter le libellé.

À éviter :

- Une information indispensable qu’on ne trouve nulle part ailleurs sur un écran tactile.

Accessibilité :

- WCAG 1.4.13 : elle reste ouverte sous le pointeur, se referme par Échap et ne masque rien de façon durable.
- Liée au déclencheur par aria-describedby (`id`).

Utilisé par : CopieLienIA

```astro
<div data-infobulle-hote style="position: relative">
  <Bouton aria-describedby="apercu">Copier</Bouton>
  <Infobulle id="apercu" titre="Ce texte sera copié">…</Infobulle>
</div>
```

### Modal (`Modale`)

Fichier : `src/components/molecules/Modale.astro` · Figma : 111:5507

Une boîte de dialogue qui demande une confirmation.

Variantes :

- Même boîte que le tooltip ; actions en boutons S, accent puis filet.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `id` | `string` | obligatoire | Identifiant ; le titre reçoit `<id>-titre`. |
| `titre` | `string` | obligatoire | Titre de la boîte. |

Contenu (slots) :

- principal : Texte montré.
- actions : Boutons, dont la valeur devient la valeur de retour de la modal.

À faire :

- Deux actions au plus, l’action principale en premier.

À éviter :

- Une modal ouverte sans action de la personne.

Accessibilité :

- Élément dialog natif ouvert par showModal() ; le focus y est piégé et Échap la ferme.
- Un clic hors de la boîte la ferme.

Utilisé par : CopieLienIA

```astro
<Modale id="confirmation" titre="Ce texte sera copié">
  …
  <Fragment slot="actions">
    <Bouton variante="accent" taille="S" type="submit" value="copier">Copier</Bouton>
    <Bouton variante="filet" taille="S" type="submit" value="annuler">Annuler</Bouton>
  </Fragment>
</Modale>
```

## 4. Organismes

Des molécules et des atomes assemblés pour une tâche du site : copier un lien, présenter un pilier de méthode, naviguer.

### Copier le lien IA (`CopieLienIA`)

Fichier : `src/components/organismes/CopieLienIA.astro`

Copie un prompt prêt à coller dans un assistant IA, avec l’adresse de la version agent du site.

Variantes :

- Avec hover : le tooltip montre le texte, le clic copie.
- Écran tactile : la modal montre le texte et demande confirmation.
- Si le navigateur refuse la copie, la modal s’ouvre avec le texte à copier à la main.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `libelle` | `string` | obligatoire | Libellé du bouton. |
| `confirmation` | `string` | obligatoire | Message après la copie. |
| `echec` | `string` | obligatoire | Message si la copie échoue. |
| `apercu` | `string` | obligatoire | Titre du tooltip et de la modal. |
| `prompt` | `string` | obligatoire | Texte copié ; {lien} y devient l’adresse de la version agent. |
| `confirmer` | `string` | obligatoire | Action principale de la modal. |
| `annuler` | `string` | obligatoire | Action secondaire de la modal. |
| `variante` | `'plein' \| 'contour'` | `'plein'` | Variante du bouton. |
| `alignement` | `'debut' \| 'fin'` | `'debut'` | Alignement du tooltip. |
| `emplacement` | `string` | obligatoire | Emplacement, transmis à la mesure d’audience. |

À faire :

- Toujours montrer le texte avant de le copier.

À éviter :

- Copier sans confirmation sur un écran tactile.

Accessibilité :

- Absent sans JavaScript ou sans presse-papiers ; le lien vers la version agent suffit alors.
- Le résultat est annoncé dans une zone role="status".

Composé de : Bouton, Infobulle, Modale

Utilisé par : Accueil

```astro
<CopieLienIA {...textes} variante="contour" alignement="fin" emplacement="hero" />
```

### E-mail copiable (`EmailCopiable`)

Fichier : `src/components/organismes/EmailCopiable.astro`

L’adresse e-mail en grand, copiée en un clic.

Variantes :

- Au hover et au focus, le texte passe en bleu de gauche à droite.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `locale` | `Locale` | obligatoire | Langue des textes. |

À faire :

- Une seule adresse en grand par page.

À éviter :

- L’utiliser sur fond clair : le texte est blanc au repos.

Accessibilité :

- Sans JavaScript ou sans presse-papiers, l’adresse reste un lien mailto.
- Le bouton annonce l’adresse et l’action ; le résultat est annoncé dans une zone role="status".
- En mode de contraste forcé, le texte revient à une couleur pleine.

Utilisé par : PiedDePage, Contact

```astro
<EmailCopiable locale={locale} />
```

### Navigation (`Navigation`)

Fichier : `src/components/organismes/Navigation.astro` · Figma : 2:487

Le logo, les sections du site et le lien vers l’autre langue.

Variantes :

- États d’un lien : repos, hover (aplat bleu), page active (barre de 8 px).
- Mobile : menu plein écran sur l’API Popover native.
- Collée en haut, retirée à la descente, de retour à la remontée.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `locale` | `Locale` | obligatoire | Langue de la page. |
| `alternate` | `string` |  | Adresse de la page équivalente dans l’autre langue. |

À faire :

- N’afficher une section qu’une fois un contenu publié.

À éviter :

- Un lien vers l’autre langue sans page équivalente.

Accessibilité :

- aria-current vaut « page » sur la page exacte, « true » sur une sous-page.
- Le menu mobile s’ouvre et se ferme sans JavaScript, et par Échap.
- Le focus clavier fait toujours revenir la navigation.

Utilisé par : BaseLayout

```astro
<Navigation locale={locale} alternate={path('travaux', 'en')} />
```

### Footer (`PiedDePage`)

Fichier : `src/components/organismes/PiedDePage.astro` · Figma : 2:492

L’adresse e-mail en grand, la signature, les liens utiles et la localisation.

Variantes :

- Sans l’adresse en grand sur la page Contact, qui la porte déjà.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `locale` | `Locale` | obligatoire | Langue des textes. |
| `avecEmail` | `boolean` | `true` | Affiche l’adresse en grand. |

À faire :

- Des liens courts, séparés par des points médians.

À éviter :

- Y répéter la navigation principale.

Accessibilité :

- Région contentinfo, nommée par un titre masqué.

Composé de : Lien, EmailCopiable

Utilisé par : BaseLayout

```astro
<PiedDePage locale={locale} avecEmail={false} />
```

### Pilier de méthode (`PilierDeMethode`)

Fichier : `src/components/organismes/PilierDeMethode.astro` · Figma : 2:490

Un temps de la méthode, sa phrase et ses pratiques.

Variantes :

- Sur l’accueil (desktop, avec JavaScript), le pilier actif est complet et les autres se réduisent à leur titre.

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `titre` | `string` | obligatoire | Nom du pilier. |
| `description` | `string` | obligatoire | Phrase du pilier. |
| `pratiques` | `string[]` | obligatoire | Pratiques, en tags. |
| `niveau` | `2 \| 3 \| 4` | `3` | Niveau du titre. |

À faire :

- Des pratiques courtes, en tags On.

À éviter :

- Des pratiques en tags Off : elles décrivent ce qui est fait, toutes sont On.

Accessibilité :

- Réduits, les piliers inactifs gardent leur texte pour les lecteurs d’écran.

Composé de : GroupeEtiquettes

Utilisé par : Accueil

```astro
<PilierDeMethode titre="Cadrer" description="…" pratiques={['Entretiens', 'Tests d’utilisabilité']} />
```

### Planche (`Planche`)

Fichier : `src/components/organismes/Planche.astro` · Figma : 27:412

Un message de fin de page, un titre sur plusieurs lignes et des paragraphes.

Variantes :

- Claire, avant le footer.
- Sombre, suivie d’un contenu passé en slot ; elle rejoint le footer (page Contact).

| Propriété | Type | Défaut | Description |
| --- | --- | --- | --- |
| `libelle` | `string` |  | Surtitre en Label. |
| `titre` | `string[]` | obligatoire | Titre, une ligne par entrée. |
| `texte` | `string[]` | obligatoire | Paragraphes en Lead. |
| `sombre` | `boolean` | `false` | Variante sombre. |
| `nom` | `string` |  | Nom de la région. |
| `niveau` | `2 \| 3 \| 4` | `2` | Niveau du titre. |

Contenu (slots) :

- principal : Contenu sous le texte (variante sombre).

À faire :

- Un titre court, une ligne par idée.

À éviter :

- Deux planches sur une même page.

Accessibilité :

- Région nommée par son titre, ou par `nom` si la page en montre plusieurs.

Utilisé par : Cas, Contact, Ecrit, ListeEcrits, ListeTravaux, Parcours

```astro
<Planche libelle={ui.planche.libelle} titre={ui.planche.titre} texte={ui.planche.texte} />
<Planche titre={…} texte={…} sombre><EmailCopiable locale={locale} /></Planche>
```

## 5. Templates

Les structures de page. Chaque template sert les deux langues ; les pages ne font que lui passer la langue.

| Page | Description | Composé de |
| --- | --- | --- |
| `src/gabarits/Accueil.astro` | Hero, strates, travaux, position, méthode et écrits. | Bouton, Encart, Carte, EnTete, Figure, CopieLienIA, PilierDeMethode |
| `src/gabarits/Cas.astro` | Une étude de cas, du résumé aux décisions et à leurs règles. | Encart, Lien, EnTete, GroupeEtiquettes, Planche |
| `src/gabarits/Contact.astro` | Le message et l’adresse copiable, sur une planche sombre. | EnTete, EmailCopiable, Planche |
| `src/gabarits/Ecrit.astro` | Un écrit, sa thèse, ses cas cités et ses écrits liés. | Encart, Lien, Carte, EnTete, Planche |
| `src/gabarits/ListeEcrits.astro` | Liste des écrits, en cards M. | Carte, EnTete, Planche |
| `src/gabarits/ListeTravaux.astro` | Liste des cas, en cards L avec visuel. | Carte, EnTete, Planche |
| `src/gabarits/Parcours.astro` | Expériences et formation. | Bouton, EnTete, GroupeEtiquettes, Planche |
| `src/gabarits/Systeme.astro` | Cette page. | Bouton, Encart, Etiquette, Lien, Carte, EnTete, Figure, GroupeEtiquettes, Infobulle, Modale, CopieLienIA, EmailCopiable, PilierDeMethode, Planche |