# Audit des options de mise en forme — état des lieux et suivi

Document de travail (retour utilisateur du 26/09/2026) : liste tout ce
qui manque en CSS, élément par élément, et sert de suivi pendant
l'implémentation (un élément à la fois, dans l'ordre du tableau —
implémentation → test utilisateur → validation → audit final → commit →
élément suivant).

## Méthode de travail (rappel)

1. Un élément du tableau à la fois, dans l'ordre.
2. J'implémente tout ce qui manque pour cet élément.
3. Je préviens l'utilisateur, qui teste et valide/invalide.
4. Dernier audit sur l'élément pour vérifier que rien n'est oublié.
5. Si tout est ok : commit, puis élément suivant.

Règle transversale (retour utilisateur) : **jamais de champ de texte
libre** pour une valeur CSS — uniquement des boutons, des curseurs, des
listes déroulantes, des sélecteurs de couleur natifs. Les valeurs
numériques optionnelles utilisent un curseur + une case "activer"
(un `<input type="range">` ne peut pas représenter "aucune valeur").

## Tableau d'audit (état au 26/09/2026, avant implémentation)

| Élément | Mise en forme possible aujourd'hui | Ce qui manque (audit CSS complet) |
|---|---|---|
| **Titre / Paragraphe** (`titre`/`paragraphe`) | Gras, italique, souligné, couleur du texte, alignement horizontal du texte, largeur maximale | **Typo** : barré, surligné (overline), police de caractère, taille de police (actuellement figée par le style titre1/titre2/paragraphe/légende), espacement des lettres/mots, hauteur de ligne, transformation (majuscules/minuscules/capitales), indentation de la 1ʳᵉ ligne, ombre portée du texte, retour à la ligne (`white-space`), troncature avec "…" (`text-overflow`), sens d'écriture (RTL)<br>**Boîte** : padding, margin (y compris négatif/auto pour centrer), hauteur, min/max-height, min-width<br>**Bordure/ombre** : style (pointillé/tireté/double…), épaisseur, couleur, par côté, arrondi par coin, ombre portée du bloc (`box-shadow`)<br>**Fond** : couleur de fond, dégradé, image de fond, opacité du bloc<br>**Position/affichage** : position du bloc dans son conteneur (pas juste le texte dedans), `overflow`, `z-index`<br>**Effets** : transition/animation au survol, curseur, filtre (flou, contraste…)<br>**Responsive** : aucune valeur ne peut différer entre Bureau/Tablette/Mobile |
| **Image** (`image`) | URL, texte alternatif, SVG inline | **Dimensionnement** : largeur/hauteur explicites, min/max, ratio (`aspect-ratio`), `object-fit` (cover/contain/fill), `object-position`<br>**Bordure/ombre** : style/couleur/épaisseur/par côté, arrondi par coin (actuellement fixe à 10px, non réglable), ombre portée<br>**Effets** : filtre CSS (niveaux de gris, sépia, luminosité, flou), `mix-blend-mode`, découpe (`clip-path`, ex. cercle/hexagone), overlay couleur/dégradé au survol<br>**Comportement** : lien cliquable, ouverture en plein écran/lightbox au clic, chargement différé (`loading=lazy`), légende (caption) affichée sous l'image<br>**Position** : alignement horizontal dans son conteneur, `margin`, `padding` autour<br>**Responsive** : image différente ou recadrage différent par taille d'écran |
| **Bouton** (`bouton`) | Texte, cible (URL/ancre), fichier joint | **Typo** : police, taille, gras/italique, transformation (majuscules), espacement des lettres<br>**Boîte** : padding, margin, largeur/hauteur, alignement du bloc<br>**Bordure/ombre** : style/couleur/épaisseur/par côté, arrondi par coin, ombre portée<br>**Fond** : couleur, dégradé, image<br>**États interactifs** : styles distincts survol/actif/désactivé (aucune notion d'état n'existe)<br>**Icône** : aucune icône à côté du texte du bouton (contrairement au badge)<br>**Effets** : transition au survol, curseur |
| **Liste à puces / numérotée** (`liste_puces`/`liste_numerotee`) | Contenu des éléments uniquement | **Typo** : tout (police, taille, gras/italique/souligné, couleur, interligne)<br>**Puces/numéros** : style de puce (`list-style-type`), image de puce personnalisée, position (intérieure/extérieure), couleur/taille des puces indépendante du texte<br>**Boîte** : padding/margin globaux ET par élément de liste, espacement entre éléments réglable, indentation<br>**Bordure/fond** : par élément de liste ou sur la liste entière<br>**Listes imbriquées** : aucune notion de sous-liste |
| **Étiquette** (`badge`) | Icône SVG, largeur, arrondi (uniforme), gras, majuscules | **Typo** : italique, souligné, barré, police, taille de police, couleur du texte, espacement des lettres<br>**Boîte** : hauteur, padding, margin, min/max-width<br>**Bordure** : style (actuellement toujours plein), couleur, épaisseur, **par côté** (demandé explicitement), arrondi **par coin** (actuellement un seul rayon pour les 4 coins)<br>**Fond** : couleur (actuellement figée par le thème), dégradé<br>**Ombre** : `box-shadow`<br>**Position de l'icône** : avant/après le texte, taille de l'icône réglable |
| **Carte** (`carte`) | Contenu uniquement (repère/titre/description) | Tout : typo, boîte, bordure, fond, ombre, dimensionnement — rien n'est réglable |
| **Rangée** (`row`, conteneur flex) | `gap`, `justify-content`, `align-items` | **Boîte** : padding, margin, largeur/hauteur explicites avec poignées de redimensionnement<br>**Bordure/fond/ombre** : rien<br>**Flex avancé** : `flex-wrap` (retour à la ligne), `flex-direction` (actuellement toujours en ligne, jamais en colonne), `align-content`, ordre des enfants, `flex-grow`/`flex-basis` par enfant (chacun a la même part aujourd'hui)<br>**Position** : `overflow`, `position` (sticky/absolute), `z-index`<br>**Responsive** : passage automatique en colonne sous un seuil de largeur |
| **Mini-jeux** (`quiz`/`association`/`memory`/`mots`/`scenario`/`zones`) | `theme_color` (accent) + contenu propre à chaque jeu | Tout le reste : bordure, fond, dimensions, police, espacement, ombre — entièrement figés par le CSS du thème, aucun réglage par instance |

**Catégories transversales oubliées, valables pour tous les éléments** :
`opacity` (transparence du bloc), `cursor`, transitions/animations CSS,
styles conditionnels par état (survol/focus/actif/désactivé), et le
**responsive** (aucun réglage ne peut varier entre Bureau/Tablette/Mobile
alors que ce sélecteur existe déjà dans l'éditeur).

## Suivi par élément

### 1. Titre / Paragraphe — ✅ audité et validé (commité)

Implémenté : gras/italique/souligné/**barré**, majuscules/minuscules/
capitales, police (liste déroulante de polices web-safe), taille de
police, hauteur de ligne, espacement des lettres, ombre du texte (3
préréglages), couleur du texte (sélecteur natif), largeur maximale,
padding, margin, couleur de fond (+ bouton "Transparent"), arrondi des
bords, hauteur/hauteur min/hauteur max/largeur min, ombre portée du
bloc (3 préréglages), opacité, position du bloc (gauche/centré/droite/
pleine largeur), bordure par côté (style/épaisseur/couleur,
indépendants sur les 4 côtés).

Mécanisme partagé créé pour l'occasion : `document_engine/rendering/
box_style.py` (`render_box_style`, `default_border`, `BOX_DEFAULTS`) —
réutilisé tel quel par tous les éléments suivants du tableau.

Volontairement laissé de côté (rarement utile pour du contenu de
formation, à ajouter si besoin) : surlignage (overline), indentation de
1ʳᵉ ligne, `white-space`/troncature "…", sens d'écriture RTL, dégradé/
image de fond, `overflow`/`z-index`/position absolue, transitions au
survol, réglages différents par taille d'écran (responsive), arrondi
par coin (un seul rayon pour les 4 coins, comme l'étiquette).

Bugs transversaux trouvés et corrigés pendant ce chantier (concernent
TOUT l'éditeur, pas seulement Titre/Paragraphe) :
- Panneau Propriétés jamais reconstruit après un clic (boutons/segments
  ne reflétaient leur nouvel état qu'après rechargement de la page) —
  corrigé dans `forgeDocUpdateAttributes`, point d'entrée unique de
  toute mise à jour d'attribut.
- Champs `.docField input` (padding/bordure/fond/largeur 100%) hérités
  à tort par les cases à cocher et curseurs, cassant leur apparence
  native.

### 2. Image — à faire (prochain élément)

### 3. Bouton — à faire

### 4. Liste à puces / numérotée — à faire

### 5. Étiquette (badge) — à compléter

Déjà fait (session précédente) : icône SVG, largeur, arrondi uniforme,
gras, majuscules. Restant selon le tableau ci-dessus : italique,
souligné, barré, police, taille de police, couleur du texte, espacement
des lettres, hauteur, padding, margin, bordure par côté, ombre portée,
position de l'icône. Pourra réutiliser directement `box_style.py`.

### 6. Carte — à faire

### 7. Rangée (row) — à faire

### 8. Mini-jeux — à faire

## Décisions transversales actées pendant ce chantier

- Un seul rayon d'arrondi pour les 4 coins (pas par coin) — cohérent
  avec l'étiquette déjà en place, à revoir si demandé explicitement.
- Padding/margin : une valeur UNIFORME sur les 4 côtés (curseur unique),
  pas par côté — la bordure, elle, reste par côté (demande explicite).
- Ombres (texte et bloc) : 3 préréglages (Aucune/Légère/Marquée) plutôt
  que des curseurs séparés offset/flou/couleur — reste simple à
  utiliser, ajustable si besoin de plus de finesse plus tard.
- Polices : liste fermée de polices web-safe (aucun chargement dynamique
  de Google Fonts depuis l'éditeur) — évite d'introduire un mécanisme de
  chargement de police, hors périmètre de cet audit.