---
version: alpha
name: audit-web.ai
description: Contrat de design du site audit-web.ai, studio IA de la SARL Audit-Web. Piste A « Référence ». Étendu par design-md-a11y (clé a11y, format 1.2).
colors:
  background: "#FAFAF7"
  surface: "#F1F1EC"
  tint: "#E3EFEE"
  text: "#1A1A1A"
  text-muted: "#4A4A46"
  rule: "#D9D9D2"
  field-border: "#767670"
  accent: "#0F6E6F"
  accent-hover: "#0A5A5B"
  primary: "{colors.accent}"
  on-accent: "#FFFFFF"
  focus: "#0F6E6F"
  success: "#1E6B34"
  warning: "#8A4B00"
  error: "#B42318"
  background-dark: "#111111"
  surface-dark: "#1B1B1A"
  tint-dark: "#15302F"
  text-dark: "#EDEDE8"
  text-muted-dark: "#B5B5AE"
  rule-dark: "#33332F"
  field-border-dark: "#8A8A84"
  accent-dark: "#5CC2C2"
  accent-hover-dark: "#86D6D6"
  on-accent-dark: "#111111"
  focus-dark: "#5CC2C2"
  success-dark: "#7FD49A"
  warning-dark: "#F5B860"
  error-dark: "#FF8A80"
typography:
  headline-xl:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 4.25rem
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.025em
  headline-xl-mobile:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 2.375rem
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-page:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 3.25rem
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 1.375rem
    fontWeight: 700
    lineHeight: 1.25
  body-lg:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 1.375rem
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Atkinson Hyperlegible Next
    fontSize: 1.125rem
    fontWeight: 700
    lineHeight: 1.2
  code:
    fontFamily: Atkinson Hyperlegible Mono
    fontSize: 0.9375rem
    fontWeight: 400
    lineHeight: 1.6
  meta:
    fontFamily: Atkinson Hyperlegible Mono
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 2px
  md: 4px
spacing:
  xs: 0.25rem
  sm: 0.5rem
  md: 1rem
  lg: 1.5rem
  xl: 2.5rem
  2xl: 4rem
  section: 6rem
  gutter: 2.5rem
  reading-width: 40rem
  page-width: 76rem
components:
  page:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text}"
    typography: "{typography.body-md}"
  page-muted:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-muted}"
  page-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.accent}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0.625rem 1.25rem
    height: 2.75rem
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-accent}"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.accent}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0.625rem 1.25rem
    height: 2.75rem
  button-secondary-hover:
    backgroundColor: "{colors.tint}"
    textColor: "{colors.accent}"
  card-offer-lead:
    backgroundColor: "{colors.tint}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: 2.5rem
  card-offer-lead-link:
    backgroundColor: "{colors.tint}"
    textColor: "{colors.accent}"
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: 1.5rem
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
  panel-muted:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text-muted}"
  panel-link:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.accent}"
  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    typography: "{typography.code}"
    rounded: "{rounded.md}"
    padding: 1rem
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text}"
    borderColor: "{colors.field-border}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    height: 3rem
  input-error-message:
    backgroundColor: "{colors.background}"
    textColor: "{colors.error}"
  status-success:
    backgroundColor: "{colors.background}"
    textColor: "{colors.success}"
  status-warning:
    backgroundColor: "{colors.background}"
    textColor: "{colors.warning}"
  page-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.text-dark}"
  page-muted-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.text-muted-dark}"
  page-link-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.accent-dark}"
  button-primary-dark:
    backgroundColor: "{colors.accent-dark}"
    textColor: "{colors.on-accent-dark}"
  button-primary-hover-dark:
    backgroundColor: "{colors.accent-hover-dark}"
    textColor: "{colors.on-accent-dark}"
  card-offer-lead-dark:
    backgroundColor: "{colors.tint-dark}"
    textColor: "{colors.text-dark}"
  card-offer-lead-link-dark:
    backgroundColor: "{colors.tint-dark}"
    textColor: "{colors.accent-dark}"
  panel-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.text-dark}"
  panel-muted-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.text-muted-dark}"
  input-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.text-dark}"
    borderColor: "{colors.field-border-dark}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    height: 3rem
  input-error-message-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.error-dark}"
  status-success-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.success-dark}"
  status-warning-dark:
    backgroundColor: "{colors.background-dark}"
    textColor: "{colors.warning-dark}"
a11y:
  focus:
    ringColor: "{colors.focus}"
    ringWidth: 3px
    ringOffset: 2px
    style: solid
    scrollMargin: 96px
  target:
    minSize: 24px
    recommendedSize: 44px
  motion:
    respectReducedMotion: true
    maxAnimationDuration: 0.5s
  text:
    spacing:
      lineHeight: 1.5
      paragraphSpacing: 2em
      letterSpacing: 0.12em
      wordSpacing: 0.16em
  reflow:
    minViewportWidth: 320px
  themes:
    dark:
      focus:
        ringColor: "{colors.focus-dark}"
---

# audit-web.ai

## Overview

Le site se lit comme une documentation de référence bien faite. Structure apparente, filets fins, une seule couleur d'accent. L'accessibilité est la signature visuelle : liens soulignés, focus dessiné, cibles généreuses, texte toujours réel.

Une seule chose importante par écran : une offre phare, un appel à l'action principal par section. Aucun décor qui affirme sans preuve.

## Colors

Une seule couleur d'accent : la sarcelle historique, avec une variante éclaircie en mode sombre. Chaque couleur de texte est déclarée avec sa couleur de fond (composants `page-*`, `panel-*`, `card-*`).

| Paire | Clair | Sombre |
| --- | --- | --- |
| Texte sur fond | 16,64:1 | 16,08:1 |
| Texte secondaire sur fond | 8,51:1 | 9,16:1 |
| Accent (liens, focus) sur fond | 5,77:1 | 8,95:1 |
| Accent sur surface | 5,33:1 | 8,17:1 |
| Accent sur teinte (offre phare) | 5,13:1 | 6,65:1 |
| Texte du bouton principal | 6,03:1 | 8,95:1 |
| Bordure de champ sur fond | 4,37:1 | 5,44:1 |
| Bordure de champ sur surface | 4,03:1 | 4,97:1 |
| Erreur sur fond | 6,29:1 | 8,27:1 |
| Succès sur fond | 6,26:1 | 10,60:1 |
| Alerte sur fond | 6,51:1 | 10,71:1 |

Ratios vérifiés par script le 20 octobre 2026. Les couleurs d'état sont toujours doublées d'un mot (« Erreur : », « Bêta privée ») et d'une forme.

Le filet `rule` est décoratif : il ne porte jamais seul une information.

## Typography

Atkinson Hyperlegible Next pour tout le texte, Atkinson Hyperlegible Mono pour le code, les tokens et les noms de fichiers. Licence SIL OFL, auto-hébergées en production.

- Corps de texte : 1,125 rem minimum, interligne 1,55, largeur de ligne de 60 à 75 caractères.
- Le titre 1 varie de 2,375 rem à 4,25 rem selon la largeur (`clamp`).
- Hiérarchie par la taille et la graisse uniquement. Aucune ponctuation décorative, aucune numérotation ornementale.
- Toutes les tailles en `rem`.

## Layout

- Largeur de page 76 rem, gouttières de 1 rem à 2,5 rem.
- Sections de contenu : titre de section dans une colonne de marge (17 rem), contenu à droite. Une seule colonne sous 60 rem.
- Grilles de cartes en `auto-fit` à 1, 2 ou 3 colonnes.
- Hero typographique, sans image de fond.
- L'en-tête reste fixe à partir de 70 rem, largeur où il tient sur une ligne (4,5 rem de haut) ; `scroll-padding-top: 6rem` évite que l'en-tête fixe masque l'élément qui a le focus. Sous 70 rem, il n'est plus fixe. Sous 48 rem, la navigation passe derrière un bouton « Menu » (`aria-expanded`, fermeture par Échap).
- Tableaux : la zone défilante ne devient focusable (`tabindex="0"`, `role="region"`, nom = légende) que si le tableau déborde. Les blocs de code passent à la ligne au lieu de défiler.

## Elevation & Depth

Aucune ombre. La profondeur vient des filets (`rule`), des surfaces (`surface`) et d'une seule zone teintée par page (`tint`).

## Shapes

Rayons de 2 px et 4 px. Pas de pilules, pas de cercles décoratifs. Les icônes sont des SVG au trait de 1,5 à 2 px, masqués aux technologies d'assistance quand ils sont décoratifs.

## Components

- **En-tête** : logo texte, lien d'évitement, navigation (Offres, Produits, Méthode, À propos), bascule de thème, bouton Contact. Identique sur toutes les pages.
- **Boutons** : principal (plein), secondaire (contour), lien-bouton. Hauteur 2,75 rem minimum.
- **Liens** : soulignés dans le texte ; épaisseur doublée au survol. Les liens externes sont annoncés dans leur intitulé (« audit-web.com, le site du cabinet »).
- **Carte cliquable** : un seul lien, posé sur le titre ; zone étendue par un pseudo-élément ; le focus encadre toute la carte.
- **Statut** : texte obligatoire, forme en renfort (plein, demi, pointillé, carré). Quatre valeurs seulement : En production, Bêta privée, En développement, Usage interne.
- **Bloc preuve** : type de document, intitulé du lien, date.
- **Bloc de code** : légende, `pre` défilant horizontalement si besoin.
- **Formulaire** : étiquette visible au-dessus du champ, aide reliée par `aria-describedby`, message d'erreur préfixé « Erreur : » et icône, bordure épaissie en erreur, récapitulatif des erreurs en tête de formulaire.
- **Pied de page** : bloc Contact en premier (téléphone, courriel, formulaire), puis une seule navigation « Pied de page » en trois groupes. Même ordre partout. Le lien « Accessibilité » affiche l'état de conformité.
- **Fil d'Ariane** : page courante en texte (`aria-current="page"`), séparateurs masqués aux technologies d'assistance.
- **Liste de produits** : une ligne par produit (nom et statut, ce qu'il fait, ce qu'il ne fait pas et comment en bénéficier), pour garder des colonnes égales quelle que soit la longueur des textes.
- **Carte de référence** : capture réelle avec alternative textuelle, date de livraison, état de conformité daté, lien vers le site.

## Accessibility

Clé d'extension, hors du schéma de Google : `a11y`. Son linter la signale par un avertissement et ses exports l'ignorent. Elle est contrôlée par les règles de l'extension design-md-a11y. En mode sombre, l'anneau de focus utilise `{colors.focus-dark}`, déclaré dans `a11y.themes.dark` ; en contraste forcé, `Highlight`. Corps de texte de 1,125 rem minimum, toutes les tailles en `rem`, aucune lecture automatique ni parallaxe. Bordures de champ rattachées par `borderColor` aux composants `input` et `input-dark`, 3:1 minimum contre le fond.

Cible : RAWeb 1.1 et RGAA 4.1.2, niveau AA. La conformité au premier n'emporte pas celle au second. Critères WCAG 2.2 anticipés : 2.4.11, 2.5.8, 3.2.6.

Le format DESIGN.md ne traite pas du comportement : focus, clavier, ARIA, ordre de lecture. Le comportement (clavier, ARIA, ordre de lecture) n'est porté ni par le format ni par l'extension : il relève du code, des tests et de la recette.

## Do's and Don'ts

- Faire : lier chaque affirmation à une preuve (déclaration, dépôt, cas client).
- Faire : écrire l'humain comme sujet qui décide ; l'IA est un outil.
- Faire : expliquer un terme technique à sa première occurrence.
- Ne pas faire : carrousels, bandeaux défilants, lecture automatique, parallaxe.
- Ne pas faire : compteurs décoratifs, badges sans preuve, icônes en police de caractères, texte dans les images.
- Ne pas faire : dégradés et verre dépoli, ponctuation décorative (« —— », « ／ », « — 01 »).
- Ne pas faire : overlay d'accessibilité, jamais.