Audit complet de mise en forme — Titre/Paragraphe (1er élément du tableau)

Nouveau module partagé document_engine/rendering/box_style.py
(padding/margin/background_color/border_radius/border par côté/height/
min-height/max-height/min-width/box-shadow/opacity/align_self) —
réutilisable tel quel par tous les kinds suivants du tableau d'audit.

Titre/Paragraphe gagnent : barré, police de caractère, taille de
police, hauteur de ligne, espacement des lettres, majuscules/
minuscules/capitales, ombre du texte, et tous les attributs de boîte
partagés ci-dessus. Interface entièrement à base de curseurs/cases à
cocher/listes déroulantes/sélecteurs de couleur natifs — plus aucun
champ de texte libre pour une valeur CSS (retour utilisateur).

Deux bugs transversaux corrigés au passage (concernent tout
l'éditeur) :
- Le panneau Propriétés n'était jamais reconstruit après un clic sur un
  bouton (gras/alignement/segments...) — il fallait recharger la page
  pour voir l'état réel. Corrigé dans forgeDocUpdateAttributes, point
  d'entrée unique de toute mise à jour d'attribut.
- Les cases à cocher et curseurs héritaient à tort le style d'un champ
  de texte (padding/bordure/fond/largeur 100%) via la règle générique
  .docField input.

Ajoute docs/plan/AUDIT_MISE_EN_FORME.md : suivi de l'audit élément par
élément (Titre/Paragraphe traité, Image ensuite).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

docs/plan/AUDIT_MISE_EN_FORME.md

@@ -0,0 +1,108 @@
+# 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.