# Charte graphique - Professeur Top

Date de creation : 2026-04-23  
Dossier : `references_charte_graphique/`

## Role de ce dossier

Ce dossier conserve les references visuelles du projet. Elles doivent guider la production des futurs contenus pedagogiques, en particulier les images originales destinees au cycle 3.

Les images de reference ne sont pas des contenus a recopier a l'identique : elles servent de charte de style, de direction artistique et de reference pour le personnage du professeur.

## Images de reference

| Fichier | Usage principal |
| --- | --- |
| `Designer.png` | Exemple de slide pedagogique avec professeur, grande carte claire, schema mathematique et texte explicatif. |
| `fractions.png` | Exemple de mise en page pedagogique sans personnage : cartes, pictogrammes de fractions, couleurs par notion. |
| `nb_relatifs.png` | Exemple de slide pedagogique avec professeur, droite graduee, encadres explicatifs et code couleur positif/negatif. |
| `top.png` | Reference principale du personnage Professeur Top : apparence, proportions, poses, accessoires, expressions. |
| `fiches_reference/fiche_reference_math_cm1_nombres_entiers.svg` | Premiere fiche SVG validee : reference de composition sans professeur, cartes espacees, controles anti-overlap appliques. |

## Personnage Professeur Top

Le personnage de reference est un petit professeur animalier de type taupe, au rendu 3D doux et expressif.

Caracteristiques a conserver :

- Silhouette courte, ronde, rassurante et sympathique.
- Pelage gris fonce, texture douce et legerement detaillee.
- Gros nez rose/rouge, dents visibles, grands yeux expressifs.
- Grandes lunettes rondes noires.
- Veste marron de professeur, chemise blanche, cravate verte, pull ou gilet marron.
- Accessoires recurrents : baguette/pointeur, livres, tableau, cahier, parchemin ou support de cours.
- Attitude bienveillante, enthousiaste, professorale, jamais intimidante.
- Poses possibles : pointer un schema, lire, expliquer, lever le doigt, ecrire, accompagner une consigne.

## Direction artistique

Style general :

- Rendu propre, lumineux, moderne et pedagogique.
- Illustration 3D douce pour le personnage, avec ombres legeres.
- Supports didactiques en 2D claire : schemas, pictogrammes, cartes, lignes, encadres.
- Ambiance chaleureuse et scolaire, mais non enfantine a l'exces.
- Composition aeree, lisible, adaptee a des eleves de cycle 3.

Mise en page :

- Grands titres centres ou tres visibles.
- Fonds blanc casse ou gris tres clair.
- Cartes blanches avec coins arrondis et ombres discretes.
- Encadres explicatifs simples, souvent translucides ou tres legerement colores.
- Place importante donnee aux schemas visuels.
- Texte limite, formule comme une aide memoire ou une explication courte.
- Le professeur peut etre place sur un cote pour guider sans masquer le contenu.

## Palette visuelle

Couleurs dominantes observees :

- Vert petrole fonce pour les titres et notions principales.
- Bleu pour les elements negatifs, reperes ou informations froides.
- Rouge pour les elements positifs ou alertes conceptuelles.
- Orange pour mettre en avant une fraction, une zone ou une notion.
- Vert moyen pour les elements valides, entiers ou exemples simples.
- Blanc casse / gris tres clair pour les fonds.
- Marron, vert et gris pour le professeur.

Recommandation : garder une palette sobre et stable, avec peu de couleurs par image. Chaque couleur doit porter du sens pedagogique.

## Typographie et texte

Les references utilisent une typographie ronde, epaisse, moderne et tres lisible.

Principes :

- Titres grands, arrondis, en vert petrole fonce.
- Corps de texte lisible, sombre, avec interlignage confortable.
- Peu de texte par visuel.
- Formulations courtes, explicites, orientees comprehension.
- Eviter les longs paragraphes lorsque l'image peut expliquer par le schema.

## Regles pour les futures generations d'images

- S'appuyer sur cette charte pour maintenir une identite visuelle coherente.
- Ne pas copier exactement les images de reference ; produire des contenus originaux.
- Garder le professeur reconnaissable : lunettes rondes, nez rouge, veste marron, cravate verte, posture de guide.
- Toujours utiliser le personnage des images de reference comme modele direct, en priorite `top.png`. Le personnage ne doit pas devenir une taupe generique : conserver la tete ronde, le pelage gris texture, le museau rose/rouge, les grandes lunettes noires, les dents visibles, la veste marron, le gilet sombre et la cravate verte.
- Utiliser le personnage pour soutenir l'explication, pas pour decorer gratuitement.
- Ne pas reutiliser directement une planche de poses du professeur dans une fiche finale.
- Si une reference contient plusieurs poses du professeur, l'utiliser seulement comme reference de style ou isoler proprement une seule pose.
- Toujours relier l'image a un objectif pedagogique clair.
- Preferer des schemas simples, nets et directement comprehensibles.
- Verifier la lisibilite des textes et symboles mathematiques.
- Verifier qu'aucun texte ne chevauche un autre texte, un schema ou le personnage.
- Ajouter un controle anti-overlap specifique pour les droites graduees : les graduations, la ligne, les points, les fleches et les etiquettes de nombres doivent avoir une zone de respiration visible. Aucune etiquette (`0`, `500`, `1000`, etc.) ne doit toucher ou etre traversee par la droite, une graduation ou un autre element.
- Ajouter aussi un controle de coherence mathematique pour les droites graduees : un point doit etre place proportionnellement aux graduations visibles. Si la graduation est trop grossiere pour placer un nombre precis, choisir un exemple plus rond ou ajouter des graduations intermediaires.
- Pour les badges, pastilles, cartes internes et etiquettes courtes, verifier que le texte descriptif ne passe jamais sous ou sur les objets graphiques. Un libelle comme `Diviseurs simples` doit etre place dans sa propre zone, avec un ecart visible avec les badges `2`, `5`, `10`.
- Verifier que tous les textes restent dans leur carte, avec une marge de securite a gauche, a droite et en bas. Si un libelle long risque de sortir, le raccourcir, le centrer differemment ou agrandir la carte.
- Pour les libelles places sous des blocs, schemas ou cartes internes, verifier aussi la marge basse : aucun libelle ne doit toucher ou depasser le bord inferieur de la carte parente.
- Le professeur Top est une ressource de l'application et ne doit pas etre ajoute directement dans les fiches SVG, sauf demande explicite. Si le professeur est demande dans une fiche, reserver une zone propre avant de placer les cartes : il ne doit jamais chevaucher un encadre, un texte, une etiquette ou un schema.
- Privilegier une fiche par sous-theme precis plutot qu'une fiche trop generale.
- Adapter la complexite au cycle 3.

## Fiche SVG de reference

La fiche `fiches_reference/fiche_reference_math_cm1_nombres_entiers.svg` sert de modele visuel valide pour les prochaines fiches :

- pas de professeur integre dans la fiche ;
- six cartes aerées dans une grande planche blanche ;
- textes courts, marges internes larges et libelles contenus dans leur carte ;
- schemas et badges separes de leurs etiquettes ;
- controle anti-overlap applique aux droites graduees, badges, textes bas et elements proches des bords.

## Prompt-type a reutiliser

```text
Image pedagogique originale pour des eleves de cycle 3, dans la charte Professeur Top : fond blanc casse lumineux, grande carte blanche a coins arrondis, titre en vert petrole fonce avec typographie ronde et lisible, schema didactique clair avec code couleur pedagogique, personnage Professeur Top en rendu 3D doux sur le cote, petite taupe professeur avec lunettes rondes noires, nez rouge, veste marron, chemise blanche, cravate verte, tenant une baguette ou des livres. Composition aeree, moderne, chaleureuse, lisible, sans surcharge.
```
