{
  "nom": "Système « Strates »",
  "langue": "fr",
  "page": "https://florianbutour.com/systeme",
  "genere": "2026-10-21T09:55:23.169Z",
  "introduction": [
    "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."
  ],
  "ecritsLies": [
    {
      "titre": "Un design system qui s’arrête au bouton",
      "these": "Les patterns métier prolongent les composants d’un design system en organisant les interactions autour de tâches récurrentes.",
      "url": "https://florianbutour.com/ecrits/un-design-system-qui-s-arrete-au-bouton"
    },
    {
      "titre": "L’IA, deuxième usager du produit",
      "these": "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.",
      "url": "https://florianbutour.com/ecrits/l-ia-deuxieme-usager-du-produit"
    }
  ],
  "niveaux": {
    "jetons": {
      "titre": "Tokens",
      "description": "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."
    },
    "atomes": {
      "titre": "Atomes",
      "description": "Les plus petits éléments d’interface, sans contenu métier. Ils n’utilisent que des tokens."
    },
    "molecules": {
      "titre": "Molécules",
      "description": "Des atomes assemblés en un élément qui a une fonction : une card, un header, un tooltip."
    },
    "organismes": {
      "titre": "Organismes",
      "description": "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."
    },
    "gabarits": {
      "titre": "Templates",
      "description": "Les structures de page. Chaque template sert les deux langues ; les pages ne font que lui passer la langue."
    }
  },
  "jetons": {
    "color": {
      "background": {
        "canvas": {
          "$type": "color",
          "$value": "#ffffff",
          "$description": "Fond de page.",
          "$extensions": {
            "css": "--color-background-canvas"
          }
        },
        "brand": {
          "$type": "color",
          "$value": "#1f2be0",
          "$description": "Colonne du hero, bloc Position, tags On, aplat de hover.",
          "$extensions": {
            "css": "--color-background-brand"
          }
        },
        "inverse": {
          "$type": "color",
          "$value": "#0d0d0d",
          "$description": "Barre d’identité, planche sombre, footer.",
          "$extensions": {
            "css": "--color-background-inverse"
          }
        },
        "subtle": {
          "$type": "color",
          "$value": "#f5f5f5",
          "$description": "Encart, cadre des figures, boîte flottante, hover des cards.",
          "$extensions": {
            "css": "--color-background-subtle"
          }
        },
        "overlay": {
          "$type": "color",
          "$value": "rgb(13 13 13 / 0.4)",
          "$description": "Voile derrière une modal ouverte.",
          "$extensions": {
            "css": "--color-background-overlay"
          }
        }
      },
      "surface": {
        "inactive": {
          "$type": "color",
          "$value": "#e7e7e7",
          "$description": "Tag Off.",
          "$extensions": {
            "css": "--color-surface-inactive"
          }
        },
        "placeholder": {
          "$type": "color",
          "$value": "#d4d4d4",
          "$description": "Emplacement d’un visuel pas encore livré (aperçu seulement).",
          "$extensions": {
            "css": "--color-surface-placeholder"
          }
        }
      },
      "text": {
        "primary": {
          "$type": "color",
          "$value": "#0d0d0d",
          "$description": "Titres et texte courant. 19,4:1 sur canvas.",
          "$extensions": {
            "css": "--color-text-primary"
          }
        },
        "secondary": {
          "$type": "color",
          "$value": "#2a2a2a",
          "$description": "Texte de second plan. 14,4:1 sur canvas.",
          "$extensions": {
            "css": "--color-text-secondary"
          }
        },
        "muted": {
          "$type": "color",
          "$value": "#737373",
          "$description": "Méta, légendes, libellés. 4,7:1 sur canvas.",
          "$extensions": {
            "css": "--color-text-muted"
          }
        },
        "supporting": {
          "$type": "color",
          "$value": "#5c5c59",
          "$description": "Texte d’un tag Off. 5,4:1 sur surface/inactive.",
          "$extensions": {
            "css": "--color-text-supporting"
          }
        },
        "inverse": {
          "$type": "color",
          "$value": "#ffffff",
          "$description": "Texte sur bleu ou sur noir. 8,5:1 sur brand, 19,4:1 sur inverse.",
          "$extensions": {
            "css": "--color-text-inverse"
          }
        },
        "on-brand-secondary": {
          "$type": "color",
          "$value": "#daddff",
          "$description": "Texte secondaire sur bleu. 6,4:1 sur brand.",
          "$extensions": {
            "css": "--color-text-on-brand-secondary"
          }
        },
        "on-brand-muted": {
          "$type": "color",
          "$value": "rgb(255 255 255 / 0.8)",
          "$description": "Texte d’un tag On. 5,9:1 sur brand.",
          "$extensions": {
            "css": "--color-text-on-brand-muted"
          }
        },
        "on-dark-muted": {
          "$type": "color",
          "$value": "#9a9a9a",
          "$description": "Texte secondaire sur noir. 6,9:1 sur inverse.",
          "$extensions": {
            "css": "--color-text-on-dark-muted"
          }
        }
      },
      "border": {
        "default": {
          "$type": "color",
          "$value": "#e7e7e7",
          "$description": "Séparateurs discrets entre lignes et cards. Décoratif.",
          "$extensions": {
            "css": "--color-border-default"
          }
        },
        "ink": {
          "$type": "color",
          "$value": "#0d0d0d",
          "$description": "Filet sous les titres, contour du bouton filet, boîte flottante.",
          "$extensions": {
            "css": "--color-border-ink"
          }
        },
        "white": {
          "$type": "color",
          "$value": "#ffffff",
          "$description": "Contour du bouton sur fond sombre.",
          "$extensions": {
            "css": "--color-border-white"
          }
        },
        "on-dark": {
          "$type": "color",
          "$value": "#333333",
          "$description": "Séparateurs sur noir.",
          "$extensions": {
            "css": "--color-border-on-dark"
          }
        }
      }
    },
    "fontWeight": {
      "regular": {
        "$type": "fontWeight",
        "$value": 400,
        "$description": "Texte courant, Lead, Caption, Label.",
        "$extensions": {
          "css": "--font-weight-regular"
        }
      },
      "medium": {
        "$type": "fontWeight",
        "$value": 500,
        "$description": "UI, Body Strong, mise en valeur (`strong`), titres des boîtes flottantes.",
        "$extensions": {
          "css": "--font-weight-medium"
        }
      },
      "extrabold": {
        "$type": "fontWeight",
        "$value": 800,
        "$description": "Heading/40 et Heading/24.",
        "$extensions": {
          "css": "--font-weight-extrabold"
        }
      },
      "black": {
        "$type": "fontWeight",
        "$value": 900,
        "$description": "Display.",
        "$extensions": {
          "css": "--font-weight-black"
        }
      }
    },
    "typography": {
      "display": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Archivo', 'Arial Black', system-ui, sans-serif",
          "fontWeight": 900,
          "fontSize": "clamp(2.5rem, 1.972rem + 2.254vw, 4rem)",
          "lineHeight": "0.9375",
          "letterSpacing": "-0.06em"
        },
        "$description": "Titre de page, accroche du hero, phrase du bloc Position, adresse e-mail.",
        "$extensions": {
          "css": ".text-display"
        }
      },
      "heading-40": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Archivo', 'Arial Black', system-ui, sans-serif",
          "fontWeight": 800,
          "fontSize": "clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem)",
          "lineHeight": "1",
          "letterSpacing": "-0.035em"
        },
        "$description": "Titres de section et de card L, titres de pilier.",
        "$extensions": {
          "css": ".text-heading-40"
        }
      },
      "heading-24": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Archivo', 'Arial Black', system-ui, sans-serif",
          "fontWeight": 800,
          "fontSize": "clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem)",
          "lineHeight": "1",
          "letterSpacing": "-0.035em"
        },
        "$description": "Titres de card M, intertitres, tag L.",
        "$extensions": {
          "css": ".text-heading-24"
        }
      },
      "lead": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
          "fontWeight": 400,
          "fontSize": "clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem)",
          "lineHeight": "1.3636"
        },
        "$description": "Chapô, encarts, phrase de la colonne bleue.",
        "$extensions": {
          "css": ".text-lead"
        }
      },
      "body": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
          "fontWeight": 400,
          "fontSize": "1.0625rem",
          "lineHeight": "1.5294"
        },
        "$description": "Texte courant.",
        "$extensions": {
          "css": ".text-body"
        }
      },
      "body-strong": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
          "fontWeight": 500,
          "fontSize": "1.0625rem",
          "lineHeight": "1.5294"
        },
        "$description": "Début de phrase appuyé.",
        "$extensions": {
          "css": ".text-body-strong"
        }
      },
      "ui": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
          "fontWeight": 500,
          "fontSize": "0.9375rem",
          "lineHeight": "1.3333"
        },
        "$description": "Navigation, liens de suite, sommaire.",
        "$extensions": {
          "css": ".text-ui"
        }
      },
      "caption": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
          "fontWeight": 400,
          "fontSize": "0.8125rem",
          "lineHeight": "1.5385"
        },
        "$description": "Méta, légendes, tags S.",
        "$extensions": {
          "css": ".text-caption"
        }
      },
      "label": {
        "$type": "typography",
        "$value": {
          "fontFamily": "'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
          "fontWeight": 400,
          "fontSize": "0.75rem",
          "lineHeight": "1.1667",
          "textTransform": "uppercase"
        },
        "$description": "Surtitres et libellés de section, en capitales.",
        "$extensions": {
          "css": ".text-label"
        }
      }
    },
    "spacing": {
      "2": {
        "$type": "dimension",
        "$value": {
          "value": 2,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-2"
        }
      },
      "4": {
        "$type": "dimension",
        "$value": {
          "value": 4,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-4"
        }
      },
      "6": {
        "$type": "dimension",
        "$value": {
          "value": 6,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-6"
        }
      },
      "8": {
        "$type": "dimension",
        "$value": {
          "value": 8,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-8"
        }
      },
      "12": {
        "$type": "dimension",
        "$value": {
          "value": 12,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-12"
        }
      },
      "16": {
        "$type": "dimension",
        "$value": {
          "value": 16,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-16"
        }
      },
      "20": {
        "$type": "dimension",
        "$value": {
          "value": 20,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-20"
        }
      },
      "24": {
        "$type": "dimension",
        "$value": {
          "value": 24,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-24"
        }
      },
      "32": {
        "$type": "dimension",
        "$value": {
          "value": 32,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-32"
        }
      },
      "40": {
        "$type": "dimension",
        "$value": {
          "value": 40,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-40"
        }
      },
      "48": {
        "$type": "dimension",
        "$value": {
          "value": 48,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-48"
        }
      },
      "56": {
        "$type": "dimension",
        "$value": {
          "value": 56,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-56"
        }
      },
      "64": {
        "$type": "dimension",
        "$value": {
          "value": 64,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-64"
        }
      },
      "72": {
        "$type": "dimension",
        "$value": {
          "value": 72,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-72"
        }
      },
      "80": {
        "$type": "dimension",
        "$value": {
          "value": 80,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-80"
        }
      },
      "96": {
        "$type": "dimension",
        "$value": {
          "value": 96,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-96"
        }
      },
      "112": {
        "$type": "dimension",
        "$value": {
          "value": 112,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-112"
        }
      },
      "128": {
        "$type": "dimension",
        "$value": {
          "value": 128,
          "unit": "px"
        },
        "$extensions": {
          "css": "--space-128"
        }
      }
    },
    "layout": {
      "max": {
        "$value": "90rem",
        "$description": "Largeur maximale du contenu (1 440 px).",
        "$extensions": {
          "css": "--layout-max"
        }
      },
      "gutter": {
        "$value": "clamp(1.25rem, 0.458rem + 3.38vw, 3.5rem)",
        "$description": "Marge latérale unique, de 20 à 56 px.",
        "$extensions": {
          "css": "--layout-gutter"
        }
      },
      "nav-height": {
        "$value": "5.375rem",
        "$description": "Hauteur de la navigation (86 px).",
        "$extensions": {
          "css": "--layout-nav-height"
        }
      },
      "offset": {
        "$value": "19rem",
        "$description": "Retrait des cards dans les listes (304 px).",
        "$extensions": {
          "css": "--layout-offset"
        }
      },
      "strates-width": {
        "$value": "16.25rem",
        "$description": "Colonne des groupes de tags verticaux (260 px).",
        "$extensions": {
          "css": "--layout-strates-width"
        }
      },
      "section": {
        "$value": "8.75rem",
        "$description": "Haut des sections de l’accueil et du hero, page 404 (140 px).",
        "$extensions": {
          "css": "--layout-section"
        }
      },
      "ecrit-tete": {
        "$value": "16.5rem",
        "$description": "Haut des pages d’écrit (264 px).",
        "$extensions": {
          "css": "--layout-ecrit-tete"
        }
      },
      "page-tete": {
        "$value": "clamp(5rem, 0.6rem + 18.78vw, 17.5rem)",
        "$description": "Haut des pages intérieures, de 80 à 280 px.",
        "$extensions": {
          "css": "--layout-page-tete"
        }
      }
    },
    "motion": {
      "duration": {
        "$type": "duration",
        "$value": {
          "value": 200,
          "unit": "ms"
        },
        "$description": "Hovers, aplats des boutons et de la navigation (200 ms).",
        "$extensions": {
          "css": "--motion-duration"
        }
      },
      "duration-long": {
        "$type": "duration",
        "$value": {
          "value": 400,
          "unit": "ms"
        },
        "$description": "Balayage des cards, apparitions, figures de la méthode (400 ms).",
        "$extensions": {
          "css": "--motion-duration-long"
        }
      },
      "ease": {
        "$type": "cubicBezier",
        "$value": [
          0.2,
          0,
          0,
          1
        ],
        "$description": "Courbe commune à tous les mouvements.",
        "$extensions": {
          "css": "--motion-ease"
        }
      }
    }
  },
  "regles": {
    "couleurs": [
      "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."
    ],
    "typographie": [
      "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)."
    ],
    "graisses": [
      "Un font weight passe toujours par un token ou par un style de texte.",
      "`strong` est en Medium partout, par une règle globale."
    ],
    "espacements": [
      "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-*`."
    ],
    "miseEnPage": [
      "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": [
      "Les tags ne sont jamais animés.",
      "Les apparitions n’ont lieu qu’une fois, à l’entrée dans l’écran."
    ]
  },
  "composants": [
    {
      "id": "Bouton",
      "nom": "Bouton",
      "niveau": "atomes",
      "fichier": "src/components/atomes/Bouton.astro",
      "figma": [
        "2:493",
        "8:480"
      ],
      "role": "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)."
      ],
      "proprietes": [
        {
          "nom": "variante",
          "type": "'plein' | 'contour' | 'accent' | 'filet'",
          "obligatoire": false,
          "defaut": "'plein'",
          "description": "Apparence du bouton."
        },
        {
          "nom": "taille",
          "type": "'M' | 'S'",
          "obligatoire": false,
          "defaut": "'M'",
          "description": "M par défaut, S dans les boîtes flottantes."
        },
        {
          "nom": "href",
          "type": "string",
          "obligatoire": false,
          "description": "Adresse ; sans elle, le bouton est un élément button."
        }
      ],
      "slots": [
        {
          "nom": "defaut",
          "description": "Libellé."
        }
      ],
      "faire": [
        "Un libellé court qui dit l’action ou la destination.",
        "Sur fond sombre, plein ou contour ; sur fond clair, accent ou filet."
      ],
      "eviter": [
        "Un bouton pour un lien de texte courant : utiliser Lien.",
        "Deux boutons accent côte à côte."
      ],
      "accessibilite": [
        "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)."
      ],
      "composeDe": [],
      "utilisePar": [
        "CopieLienIA",
        "Accueil",
        "Parcours"
      ],
      "exemple": "<Bouton variante=\"plein\" href=\"/travaux\">Voir les travaux ↓</Bouton>\n<Bouton variante=\"accent\" taille=\"S\" type=\"submit\" value=\"copier\">Copier</Bouton>"
    },
    {
      "id": "Encart",
      "nom": "Encart",
      "niveau": "atomes",
      "fichier": "src/components/atomes/Encart.astro",
      "figma": [],
      "role": "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."
      ],
      "proprietes": [],
      "slots": [
        {
          "nom": "defaut",
          "description": "Texte de l’encart."
        }
      ],
      "faire": [
        "Un paragraphe en Lead, placé juste sous un header."
      ],
      "eviter": [
        "Plusieurs encarts à la suite.",
        "Un encart pour une alerte ou un message d’état."
      ],
      "accessibilite": [
        "Le fond est décoratif ; le texte garde ses contrastes (17,8:1 en text/primary)."
      ],
      "composeDe": [],
      "utilisePar": [
        "Accueil",
        "Cas",
        "Ecrit"
      ],
      "exemple": "<Encart><p class=\"text-lead\">Chapô du cas.</p></Encart>"
    },
    {
      "id": "Etiquette",
      "nom": "Tag",
      "niveau": "atomes",
      "fichier": "src/components/atomes/Etiquette.astro",
      "figma": [
        "2:494"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "taille",
          "type": "'S' | 'L'",
          "obligatoire": false,
          "defaut": "'S'",
          "description": "S (bandeau) ou L (titre)."
        },
        {
          "nom": "etat",
          "type": "boolean",
          "obligatoire": false,
          "defaut": "true",
          "description": "On (vrai) ou Off (faux)."
        },
        {
          "nom": "etatTexte",
          "type": "string",
          "obligatoire": false,
          "description": "Texte lu après le libellé, par exemple « touchée »."
        },
        {
          "nom": "balise",
          "type": "'span' | 'h2' | 'h3' | 'h4'",
          "obligatoire": false,
          "defaut": "'span'",
          "description": "Élément rendu ; un niveau de titre quand le tag nomme un bloc."
        }
      ],
      "slots": [
        {
          "nom": "defaut",
          "description": "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."
      ],
      "eviter": [
        "Animer un tag ou le rendre cliquable.",
        "Un tag pour une action."
      ],
      "accessibilite": [
        "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."
      ],
      "composeDe": [],
      "utilisePar": [
        "Carte",
        "GroupeEtiquettes"
      ],
      "exemple": "<Etiquette etat={false} etatTexte=\"non touchée\">modèle</Etiquette>\n<Etiquette taille=\"L\" balise=\"h3\">surfaces</Etiquette>"
    },
    {
      "id": "Lien",
      "nom": "Lien",
      "niveau": "atomes",
      "fichier": "src/components/atomes/Lien.astro",
      "figma": [],
      "role": "Un lien hors du texte courant, sans soulignement au repos, souligné au hover.",
      "variantes": [
        "Le style de texte est libre (UI, Heading/24…)."
      ],
      "proprietes": [
        {
          "nom": "href",
          "type": "string",
          "obligatoire": true,
          "description": "Adresse."
        },
        {
          "nom": "texte",
          "type": "string",
          "obligatoire": false,
          "description": "Classe du style de texte, par exemple « text-ui »."
        }
      ],
      "slots": [
        {
          "nom": "defaut",
          "description": "Libellé."
        }
      ],
      "faire": [
        "Un libellé qui dit la destination, avec une flèche quand il mène à la suite."
      ],
      "eviter": [
        "Un lien dans un paragraphe : le texte courant souligne ses liens."
      ],
      "accessibilite": [
        "Hors du texte courant, sa place et son style suffisent à le reconnaître ; le focus reste visible."
      ],
      "composeDe": [],
      "utilisePar": [
        "PiedDePage",
        "Cas",
        "Ecrit"
      ],
      "exemple": "<Lien texte=\"text-ui\" href=\"/ecrits\">← Tous les écrits</Lien>"
    },
    {
      "id": "Carte",
      "nom": "Card",
      "niveau": "molecules",
      "fichier": "src/components/molecules/Carte.astro",
      "figma": [
        "2:489",
        "9:1600",
        "2:491"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "taille",
          "type": "'L' | 'M'",
          "obligatoire": false,
          "defaut": "'M'",
          "description": "L ou M."
        },
        {
          "nom": "apparence",
          "type": "'ligne' | 'cadre'",
          "obligatoire": false,
          "defaut": "'ligne'",
          "description": "ligne (liste cliquable) ou cadre (bloc encadré)."
        },
        {
          "nom": "titre",
          "type": "string",
          "obligatoire": true,
          "description": "Titre de la card."
        },
        {
          "nom": "texte",
          "type": "string",
          "obligatoire": true,
          "description": "Description ou thèse."
        },
        {
          "nom": "meta",
          "type": "string",
          "obligatoire": false,
          "description": "Ligne de méta en Caption, par exemple « entreprise · domaine »."
        },
        {
          "nom": "href",
          "type": "string",
          "obligatoire": false,
          "description": "Adresse du contenu (apparence ligne)."
        },
        {
          "nom": "visuel",
          "type": "{ src?: ImageMetadata | string; alt: string; largeur?: number; hauteur?: number }",
          "obligatoire": false,
          "description": "Image et son texte alternatif ; sans image, un aplat réserve la place en aperçu."
        },
        {
          "nom": "etiquettes",
          "type": "ItemEtiquette[]",
          "obligatoire": false,
          "description": "Tags du Groupe de tags."
        },
        {
          "nom": "etiquettesLibelle",
          "type": "string",
          "obligatoire": false,
          "description": "Nom de la liste de tags pour les technologies d’assistance."
        },
        {
          "nom": "retrait",
          "type": "boolean",
          "obligatoire": false,
          "description": "Retrait de 304 px sur desktop."
        },
        {
          "nom": "titreEtiquette",
          "type": "boolean",
          "obligatoire": false,
          "defaut": "false",
          "description": "Titre rendu en tag L (apparence cadre)."
        },
        {
          "nom": "niveau",
          "type": "2 | 3 | 4",
          "obligatoire": false,
          "defaut": "3",
          "description": "Niveau du titre."
        },
        {
          "nom": "lang",
          "type": "string",
          "obligatoire": false,
          "description": "Langue du contenu, si elle diffère de celle de la page."
        }
      ],
      "slots": [],
      "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."
      ],
      "eviter": [
        "Un deuxième lien dans une card ligne : toute la card est déjà cliquable.",
        "Une card cadre pour un contenu à ouvrir."
      ],
      "accessibilite": [
        "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`)."
      ],
      "composeDe": [
        "Etiquette",
        "GroupeEtiquettes"
      ],
      "utilisePar": [
        "Accueil",
        "Ecrit",
        "ListeEcrits",
        "ListeTravaux"
      ],
      "exemple": "<Carte taille=\"L\" titre=\"…\" texte=\"…\" meta=\"Entreprise · domaine\" href=\"/travaux/…\"\n  visuel={{ src: image, alt: '…' }} etiquettes={etiquettesStrates(strates, ui)} etiquettesLibelle=\"Strates touchées\" />\n<Carte {...carteDEcrit(ecrit, locale, ui)} retrait={false} />"
    },
    {
      "id": "EnTete",
      "nom": "Header",
      "niveau": "molecules",
      "fichier": "src/components/molecules/EnTete.astro",
      "figma": [
        "2:488"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "titre",
          "type": "string",
          "obligatoire": true,
          "description": "Texte du titre."
        },
        {
          "nom": "niveau",
          "type": "1 | 2",
          "obligatoire": false,
          "defaut": "2",
          "description": "1 en tête de page, 2 dans une section."
        },
        {
          "nom": "id",
          "type": "string",
          "obligatoire": false,
          "description": "Identifiant du titre, pour aria-labelledby et les ancres."
        },
        {
          "nom": "espace",
          "type": "'section' | 'page'",
          "obligatoire": false,
          "defaut": "'section'",
          "description": "section ou page."
        },
        {
          "nom": "filet",
          "type": "boolean",
          "obligatoire": false,
          "defaut": "true",
          "description": "Filet encre sous le titre."
        }
      ],
      "slots": [],
      "faire": [
        "Un seul header de niveau 1 par page."
      ],
      "eviter": [
        "Un header pour un titre de card ou de bloc : utiliser les styles Heading."
      ],
      "accessibilite": [
        "`niveau` fixe h1 ou h2 ; `id` permet de nommer la section qui le contient."
      ],
      "composeDe": [],
      "utilisePar": [
        "Accueil",
        "Cas",
        "Contact",
        "Ecrit",
        "ListeEcrits",
        "ListeTravaux",
        "Parcours"
      ],
      "exemple": "<EnTete titre=\"Travaux\" niveau={1} espace=\"page\" />"
    },
    {
      "id": "Figure",
      "nom": "Figure",
      "niveau": "molecules",
      "fichier": "src/components/molecules/Figure.astro",
      "figma": [
        "119:8515"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "src",
          "type": "string",
          "obligatoire": true,
          "description": "Adresse de l’image, dans public/."
        },
        {
          "nom": "legende",
          "type": "string",
          "obligatoire": true,
          "description": "Légende en Caption."
        },
        {
          "nom": "alt",
          "type": "string",
          "obligatoire": false,
          "defaut": "''",
          "description": "Texte alternatif ; vide si la légende suffit."
        },
        {
          "nom": "ratio",
          "type": "string",
          "obligatoire": false,
          "defaut": "'676 / 578'",
          "description": "Proportions du cadre."
        }
      ],
      "slots": [],
      "faire": [
        "Une légende qui décrit ce que montre la figure."
      ],
      "eviter": [
        "Une légende qui répète le titre voisin."
      ],
      "accessibilite": [
        "Par défaut l’illustration est décorative (alt vide) et la légende la décrit ; un texte alternatif peut être passé."
      ],
      "composeDe": [],
      "utilisePar": [
        "Accueil"
      ],
      "exemple": "<Figure src=\"/images/methode/cadrer.svg\" legende=\"Fig. 04 · Un parcours, ses moments et ses frictions\" />"
    },
    {
      "id": "GroupeEtiquettes",
      "nom": "Groupe de tags",
      "niveau": "molecules",
      "fichier": "src/components/molecules/GroupeEtiquettes.astro",
      "figma": [],
      "role": "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)."
      ],
      "proprietes": [
        {
          "nom": "etiquettes",
          "type": "ItemEtiquette[]",
          "obligatoire": true,
          "description": "Libellé, état et texte d’état de chaque tag."
        },
        {
          "nom": "libelle",
          "type": "string",
          "obligatoire": false,
          "description": "Nom de la liste pour les technologies d’assistance."
        },
        {
          "nom": "orientation",
          "type": "'verticale' | 'horizontale'",
          "obligatoire": false,
          "defaut": "'verticale'",
          "description": "verticale ou horizontale."
        },
        {
          "nom": "replier",
          "type": "'mobile' | 'tablette'",
          "obligatoire": false,
          "description": "Breakpoint sous lequel le groupe passe en ligne."
        }
      ],
      "slots": [],
      "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)."
      ],
      "eviter": [
        "Mélanger des tags de natures différentes dans un groupe."
      ],
      "accessibilite": [
        "Une liste nommée par `libelle` ; chaque état est lu en texte."
      ],
      "composeDe": [
        "Etiquette"
      ],
      "utilisePar": [
        "Carte",
        "PilierDeMethode",
        "Cas",
        "Parcours"
      ],
      "exemple": "<GroupeEtiquettes etiquettes={[{ libelle: 'surfaces', etat: true, etatTexte: 'touchée' }]}\n  libelle=\"Strates touchées\" orientation=\"horizontale\" replier=\"mobile\" />"
    },
    {
      "id": "Infobulle",
      "nom": "Tooltip",
      "niveau": "molecules",
      "fichier": "src/components/molecules/Infobulle.astro",
      "figma": [
        "111:5507"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "id",
          "type": "string",
          "obligatoire": true,
          "description": "Identifiant, pour aria-describedby."
        },
        {
          "nom": "titre",
          "type": "string",
          "obligatoire": true,
          "description": "Titre de la boîte."
        },
        {
          "nom": "alignement",
          "type": "'debut' | 'fin'",
          "obligatoire": false,
          "defaut": "'debut'",
          "description": "Bord de l’hôte auquel elle s’aligne (desktop)."
        }
      ],
      "slots": [
        {
          "nom": "defaut",
          "description": "Texte montré."
        }
      ],
      "faire": [
        "Montrer ce qui va se passer (le texte qui sera copié), pas répéter le libellé."
      ],
      "eviter": [
        "Une information indispensable qu’on ne trouve nulle part ailleurs sur un écran tactile."
      ],
      "accessibilite": [
        "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`)."
      ],
      "composeDe": [],
      "utilisePar": [
        "CopieLienIA"
      ],
      "exemple": "<div data-infobulle-hote style=\"position: relative\">\n  <Bouton aria-describedby=\"apercu\">Copier</Bouton>\n  <Infobulle id=\"apercu\" titre=\"Ce texte sera copié\">…</Infobulle>\n</div>"
    },
    {
      "id": "Modale",
      "nom": "Modal",
      "niveau": "molecules",
      "fichier": "src/components/molecules/Modale.astro",
      "figma": [
        "111:5507"
      ],
      "role": "Une boîte de dialogue qui demande une confirmation.",
      "variantes": [
        "Même boîte que le tooltip ; actions en boutons S, accent puis filet."
      ],
      "proprietes": [
        {
          "nom": "id",
          "type": "string",
          "obligatoire": true,
          "description": "Identifiant ; le titre reçoit `<id>-titre`."
        },
        {
          "nom": "titre",
          "type": "string",
          "obligatoire": true,
          "description": "Titre de la boîte."
        }
      ],
      "slots": [
        {
          "nom": "defaut",
          "description": "Texte montré."
        },
        {
          "nom": "actions",
          "description": "Boutons, dont la valeur devient la valeur de retour de la modal."
        }
      ],
      "faire": [
        "Deux actions au plus, l’action principale en premier."
      ],
      "eviter": [
        "Une modal ouverte sans action de la personne."
      ],
      "accessibilite": [
        "É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."
      ],
      "composeDe": [],
      "utilisePar": [
        "CopieLienIA"
      ],
      "exemple": "<Modale id=\"confirmation\" titre=\"Ce texte sera copié\">\n  …\n  <Fragment slot=\"actions\">\n    <Bouton variante=\"accent\" taille=\"S\" type=\"submit\" value=\"copier\">Copier</Bouton>\n    <Bouton variante=\"filet\" taille=\"S\" type=\"submit\" value=\"annuler\">Annuler</Bouton>\n  </Fragment>\n</Modale>"
    },
    {
      "id": "CopieLienIA",
      "nom": "Copier le lien IA",
      "niveau": "organismes",
      "fichier": "src/components/organismes/CopieLienIA.astro",
      "figma": [],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "libelle",
          "type": "string",
          "obligatoire": true,
          "description": "Libellé du bouton."
        },
        {
          "nom": "confirmation",
          "type": "string",
          "obligatoire": true,
          "description": "Message après la copie."
        },
        {
          "nom": "echec",
          "type": "string",
          "obligatoire": true,
          "description": "Message si la copie échoue."
        },
        {
          "nom": "apercu",
          "type": "string",
          "obligatoire": true,
          "description": "Titre du tooltip et de la modal."
        },
        {
          "nom": "prompt",
          "type": "string",
          "obligatoire": true,
          "description": "Texte copié ; {lien} y devient l’adresse de la version agent."
        },
        {
          "nom": "confirmer",
          "type": "string",
          "obligatoire": true,
          "description": "Action principale de la modal."
        },
        {
          "nom": "annuler",
          "type": "string",
          "obligatoire": true,
          "description": "Action secondaire de la modal."
        },
        {
          "nom": "variante",
          "type": "'plein' | 'contour'",
          "obligatoire": false,
          "defaut": "'plein'",
          "description": "Variante du bouton."
        },
        {
          "nom": "alignement",
          "type": "'debut' | 'fin'",
          "obligatoire": false,
          "defaut": "'debut'",
          "description": "Alignement du tooltip."
        },
        {
          "nom": "emplacement",
          "type": "string",
          "obligatoire": true,
          "description": "Emplacement, transmis à la mesure d’audience."
        }
      ],
      "slots": [],
      "faire": [
        "Toujours montrer le texte avant de le copier."
      ],
      "eviter": [
        "Copier sans confirmation sur un écran tactile."
      ],
      "accessibilite": [
        "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\"."
      ],
      "composeDe": [
        "Bouton",
        "Infobulle",
        "Modale"
      ],
      "utilisePar": [
        "Accueil"
      ],
      "exemple": "<CopieLienIA {...textes} variante=\"contour\" alignement=\"fin\" emplacement=\"hero\" />"
    },
    {
      "id": "EmailCopiable",
      "nom": "E-mail copiable",
      "niveau": "organismes",
      "fichier": "src/components/organismes/EmailCopiable.astro",
      "figma": [],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "locale",
          "type": "Locale",
          "obligatoire": true,
          "description": "Langue des textes."
        }
      ],
      "slots": [],
      "faire": [
        "Une seule adresse en grand par page."
      ],
      "eviter": [
        "L’utiliser sur fond clair : le texte est blanc au repos."
      ],
      "accessibilite": [
        "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."
      ],
      "composeDe": [],
      "utilisePar": [
        "PiedDePage",
        "Contact"
      ],
      "exemple": "<EmailCopiable locale={locale} />"
    },
    {
      "id": "Navigation",
      "nom": "Navigation",
      "niveau": "organismes",
      "fichier": "src/components/organismes/Navigation.astro",
      "figma": [
        "2:487"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "locale",
          "type": "Locale",
          "obligatoire": true,
          "description": "Langue de la page."
        },
        {
          "nom": "alternate",
          "type": "string",
          "obligatoire": false,
          "description": "Adresse de la page équivalente dans l’autre langue."
        }
      ],
      "slots": [],
      "faire": [
        "N’afficher une section qu’une fois un contenu publié."
      ],
      "eviter": [
        "Un lien vers l’autre langue sans page équivalente."
      ],
      "accessibilite": [
        "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."
      ],
      "composeDe": [],
      "utilisePar": [
        "BaseLayout"
      ],
      "exemple": "<Navigation locale={locale} alternate={path('travaux', 'en')} />"
    },
    {
      "id": "PiedDePage",
      "nom": "Footer",
      "niveau": "organismes",
      "fichier": "src/components/organismes/PiedDePage.astro",
      "figma": [
        "2:492"
      ],
      "role": "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à."
      ],
      "proprietes": [
        {
          "nom": "locale",
          "type": "Locale",
          "obligatoire": true,
          "description": "Langue des textes."
        },
        {
          "nom": "avecEmail",
          "type": "boolean",
          "obligatoire": false,
          "defaut": "true",
          "description": "Affiche l’adresse en grand."
        }
      ],
      "slots": [],
      "faire": [
        "Des liens courts, séparés par des points médians."
      ],
      "eviter": [
        "Y répéter la navigation principale."
      ],
      "accessibilite": [
        "Région contentinfo, nommée par un titre masqué."
      ],
      "composeDe": [
        "Lien",
        "EmailCopiable"
      ],
      "utilisePar": [
        "BaseLayout"
      ],
      "exemple": "<PiedDePage locale={locale} avecEmail={false} />"
    },
    {
      "id": "PilierDeMethode",
      "nom": "Pilier de méthode",
      "niveau": "organismes",
      "fichier": "src/components/organismes/PilierDeMethode.astro",
      "figma": [
        "2:490"
      ],
      "role": "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."
      ],
      "proprietes": [
        {
          "nom": "titre",
          "type": "string",
          "obligatoire": true,
          "description": "Nom du pilier."
        },
        {
          "nom": "description",
          "type": "string",
          "obligatoire": true,
          "description": "Phrase du pilier."
        },
        {
          "nom": "pratiques",
          "type": "string[]",
          "obligatoire": true,
          "description": "Pratiques, en tags."
        },
        {
          "nom": "niveau",
          "type": "2 | 3 | 4",
          "obligatoire": false,
          "defaut": "3",
          "description": "Niveau du titre."
        }
      ],
      "slots": [],
      "faire": [
        "Des pratiques courtes, en tags On."
      ],
      "eviter": [
        "Des pratiques en tags Off : elles décrivent ce qui est fait, toutes sont On."
      ],
      "accessibilite": [
        "Réduits, les piliers inactifs gardent leur texte pour les lecteurs d’écran."
      ],
      "composeDe": [
        "GroupeEtiquettes"
      ],
      "utilisePar": [
        "Accueil"
      ],
      "exemple": "<PilierDeMethode titre=\"Cadrer\" description=\"…\" pratiques={['Entretiens', 'Tests d’utilisabilité']} />"
    },
    {
      "id": "Planche",
      "nom": "Planche",
      "niveau": "organismes",
      "fichier": "src/components/organismes/Planche.astro",
      "figma": [
        "27:412"
      ],
      "role": "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)."
      ],
      "proprietes": [
        {
          "nom": "libelle",
          "type": "string",
          "obligatoire": false,
          "description": "Surtitre en Label."
        },
        {
          "nom": "titre",
          "type": "string[]",
          "obligatoire": true,
          "description": "Titre, une ligne par entrée."
        },
        {
          "nom": "texte",
          "type": "string[]",
          "obligatoire": true,
          "description": "Paragraphes en Lead."
        },
        {
          "nom": "sombre",
          "type": "boolean",
          "obligatoire": false,
          "defaut": "false",
          "description": "Variante sombre."
        },
        {
          "nom": "nom",
          "type": "string",
          "obligatoire": false,
          "description": "Nom de la région."
        },
        {
          "nom": "niveau",
          "type": "2 | 3 | 4",
          "obligatoire": false,
          "defaut": "2",
          "description": "Niveau du titre."
        }
      ],
      "slots": [
        {
          "nom": "defaut",
          "description": "Contenu sous le texte (variante sombre)."
        }
      ],
      "faire": [
        "Un titre court, une ligne par idée."
      ],
      "eviter": [
        "Deux planches sur une même page."
      ],
      "accessibilite": [
        "Région nommée par son titre, ou par `nom` si la page en montre plusieurs."
      ],
      "composeDe": [],
      "utilisePar": [
        "Cas",
        "Contact",
        "Ecrit",
        "ListeEcrits",
        "ListeTravaux",
        "Parcours"
      ],
      "exemple": "<Planche libelle={ui.planche.libelle} titre={ui.planche.titre} texte={ui.planche.texte} />\n<Planche titre={…} texte={…} sombre><EmailCopiable locale={locale} /></Planche>"
    }
  ],
  "gabarits": [
    {
      "id": "Accueil",
      "fichier": "src/gabarits/Accueil.astro",
      "description": "Hero, strates, travaux, position, méthode et écrits.",
      "composants": [
        "Bouton",
        "Encart",
        "Carte",
        "EnTete",
        "Figure",
        "CopieLienIA",
        "PilierDeMethode"
      ]
    },
    {
      "id": "Cas",
      "fichier": "src/gabarits/Cas.astro",
      "description": "Une étude de cas, du résumé aux décisions et à leurs règles.",
      "composants": [
        "Encart",
        "Lien",
        "EnTete",
        "GroupeEtiquettes",
        "Planche"
      ]
    },
    {
      "id": "Contact",
      "fichier": "src/gabarits/Contact.astro",
      "description": "Le message et l’adresse copiable, sur une planche sombre.",
      "composants": [
        "EnTete",
        "EmailCopiable",
        "Planche"
      ]
    },
    {
      "id": "Ecrit",
      "fichier": "src/gabarits/Ecrit.astro",
      "description": "Un écrit, sa thèse, ses cas cités et ses écrits liés.",
      "composants": [
        "Encart",
        "Lien",
        "Carte",
        "EnTete",
        "Planche"
      ]
    },
    {
      "id": "ListeEcrits",
      "fichier": "src/gabarits/ListeEcrits.astro",
      "description": "Liste des écrits, en cards M.",
      "composants": [
        "Carte",
        "EnTete",
        "Planche"
      ]
    },
    {
      "id": "ListeTravaux",
      "fichier": "src/gabarits/ListeTravaux.astro",
      "description": "Liste des cas, en cards L avec visuel.",
      "composants": [
        "Carte",
        "EnTete",
        "Planche"
      ]
    },
    {
      "id": "Parcours",
      "fichier": "src/gabarits/Parcours.astro",
      "description": "Expériences et formation.",
      "composants": [
        "Bouton",
        "EnTete",
        "GroupeEtiquettes",
        "Planche"
      ]
    },
    {
      "id": "Systeme",
      "fichier": "src/gabarits/Systeme.astro",
      "description": "Cette page.",
      "composants": [
        "Bouton",
        "Encart",
        "Etiquette",
        "Lien",
        "Carte",
        "EnTete",
        "Figure",
        "GroupeEtiquettes",
        "Infobulle",
        "Modale",
        "CopieLienIA",
        "EmailCopiable",
        "PilierDeMethode",
        "Planche"
      ]
    }
  ]
}