Interface & design

Guide — Interface, univers visuels et thèmes globaux — V0.6.7

Ligne de base commune

Tous les écrans conservent la même structure Bootstrap, la même navbar, les mêmes cartes, les mêmes conventions de progression et les cinq couleurs pédagogiques.

Les univers visuels indiquent où l'on explore ; les couleurs du cycle indiquent ce que l'on fait. Ces deux codes ne doivent pas être confondus.

Univers visuels

• Science : physique, mathématiques, informatique, astronomie, technologie/ingénierie, chimie, IA & données. Ambiance laboratoire SF, bleu nuit/cyan, grille et signaux discrets.
• Bio : biologie, Terre & environnement. Ambiance vivant, cellules, terrain, vert/turquoise.
• Langues : langues & communication. Ambiance signes, voix, écriture et circulation des mots.
• Humain : histoire, géographie, sciences humaines & sociales, philosophie/citoyenneté. Ambiance cartes, réseaux, chronologie et territoires.
• Arts : arts visuels et musique. Ambiance studio, formes, ondes et gestes.
• Méthodes : méthodes d'apprentissage & projet. Ambiance atelier structuré.

Trois thèmes globaux

🌌 Foncé · cockpit SF

Fond technologique sombre, profondeur spatiale, îlots semi-transparents et traitement multi-écrans. La lisibilité reste prioritaire : les effets décoratifs restent derrière les surfaces de contenu.

☀️ Clair · atelier

Même contenu, mêmes URL, mêmes droits et mêmes actions sur un fond lumineux et neutre, avec cartes blanches et effets réduits.

🌈 Coloré · Spectrum

Fond clair en maillage chromatique, accents par univers et surfaces blanches/translucides. La couleur sert à structurer l'information sans remplacer les cinq couleurs pédagogiques.

Les trois thèmes utilisent le même moteur, la même hiérarchie et le même contenu. Le choix se fait dans Compte → Paramètres → Thème d’affichage ; il est conservé dans le navigateur et ne nécessite aucune modification SQL.

Menus par rôle

Enfant

Apprendre → Routes, Rush & missions, Notions

Explorer → Animaux, Vidéos

Créer → Mes projets

Mon espace → Mon Labo, Discussions

Guides

Parent / Éducateur

Ressources → Routes, Rush & missions, Notions

Accompagner → Suivi, Affectations, Orthographe & expression, création de rush privé

Guides

Compte

Langue FR/NL/GB, affichage Cockpit SF/Clair/Spectrum, compte/mot de passe, administration plateforme si autorisée, déconnexion.

Règles

• Ne pas transformer les univers en thèmes totalement différents : la plateforme doit rester identifiable.
• Ne pas utiliser les couleurs d'univers pour remplacer les couleurs Découvrir/Comprendre/Faire/Vérifier/Terminer.
• Ne pas sacrifier le contraste ou la lisibilité pour l'immersion.
• Les photos et schémas de la médiathèque restent du contenu pédagogique ; le décor d'univers reste léger et générique.

Pages Notion — composition V0.5.5

Les pages Notion servent de référence pour l'équilibre entre immersion et lisibilité.

• en mode Foncé · cockpit SF, ne pas poser un grand panneau gris uniforme sur tout le décor ;
• préférer plusieurs surfaces flottantes cohérentes : bandeau de notion, contenu principal, maîtrise, relations ;
• utiliser l'accent de l'univers pour les bordures, badges et détails, sans remplacer les couleurs pédagogiques ;
• garder les formulaires principalement blancs pour préserver le contraste ;
• une action de validation peut rester verte, mais la carte qui la contient ne doit pas devenir un grand aplat vert sans rapport avec l'univers ;
• quand une notion n'a pas encore de mission, afficher un état vide léger et clairement délimité plutôt qu'une grande zone grise ;
• en mode Clair · atelier, conserver exactement la même hiérarchie, avec fond blanc, bordures simples et ombres réduites.

Pages neutres et couleur standard — V0.5.6

Les pages transversales sans domaine dominant utilisent l'univers neutral comme véritable univers visuel par défaut, et non comme absence de design.

• accent standard : bleu-vert Labo ;
• le décor de fond reste visible entre les cartes en mode Foncé · cockpit SF ;
• les cartes sans couleur sémantique explicite reçoivent une surface blanche très légèrement teintée par le neutre ;
• les cartes déjà porteuses d'un sens (bg-soft-*, univers de domaine, cycle pédagogique, états de progression) conservent leur couleur propre ;
• éviter les grands aplats gris génériques sur les pages transversales ;
• en mode Clair · atelier, le neutre redevient blanc/gris très léger comme le reste de l'interface.

Cette couleur standard s'applique à toute zone non spécifiée. Une couleur de domaine ou une couleur fonctionnelle explicite a toujours priorité.

Navigation personnelle — V0.5.6

Pour l'apprenant, Mon Labo et Discussions sont regroupés sous Mon espace. La cloche de notifications reste séparée dans la zone compte, car elle signale une action en attente plutôt qu'une destination de navigation.