Forge-Engine/docs/plan/AUDIT_MISE_EN_FORME.md

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) Boîte : padding, margin (y compris négatif/auto pour centrer), hauteur, min/max-height, min-width Bordure/ombre : style (pointillé/tireté/double…), épaisseur, couleur, par côté, arrondi par coin, ombre portée du bloc (box-shadow) Fond : couleur de fond, dégradé, image de fond, opacité du bloc Position/affichage : position du bloc dans son conteneur (pas juste le texte dedans), overflow, z-index Effets : transition/animation au survol, curseur, filtre (flou, contraste…) 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 Bordure/ombre : style/couleur/épaisseur/par côté, arrondi par coin (actuellement fixe à 10px, non réglable), ombre portée 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 Comportement : lien cliquable, ouverture en plein écran/lightbox au clic, chargement différé (loading=lazy), légende (caption) affichée sous l'image Position : alignement horizontal dans son conteneur, margin, padding autour 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 Boîte : padding, margin, largeur/hauteur, alignement du bloc Bordure/ombre : style/couleur/épaisseur/par côté, arrondi par coin, ombre portée Fond : couleur, dégradé, image États interactifs : styles distincts survol/actif/désactivé (aucune notion d'état n'existe) Icône : aucune icône à côté du texte du bouton (contrairement au badge) 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) 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 Boîte : padding/margin globaux ET par élément de liste, espacement entre éléments réglable, indentation Bordure/fond : par élément de liste ou sur la liste entière 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 Boîte : hauteur, padding, margin, min/max-width Bordure : style (actuellement toujours plein), couleur, épaisseur, par côté (demandé explicitement), arrondi par coin (actuellement un seul rayon pour les 4 coins) Fond : couleur (actuellement figée par le thème), dégradé Ombre : box-shadow 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 Bordure/fond/ombre : rien 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) Position : overflow, position (sticky/absolute), z-index 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.