System Requirements Document for pollution-plan-te

1. Introduction

pollution-plan-te est un site éducatif interactif en français destiné à présenter, en contexte scolaire, le thème de la pollution et de la protection de notre planète. Il transforme le projet initial de film éducatif de 10 minutes en un parcours interactif composé de neuf chapitres, reprenant la progression pédagogique et les repères temporels prévus pour le film.

Le site s’adresse aux élèves, aux enseignants et aux présentateurs scolaires. Il doit permettre de découvrir ou de présenter un exposé clair, touchant, sérieux lorsque nécessaire, puis optimiste et encourageant à la fin. La narration est écrite à la première personne comme si une petite fille d’environ 10 ans s’adressait directement aux élèves.

Objectifs de réussite

Le produit est réussi lorsque :

• les neuf chapitres sont accessibles dans leur ordre pédagogique et peuvent être consultés individuellement ;
• les élèves comprennent les principales formes de pollution, leurs causes, leurs conséquences et les gestes concrets de protection ;
• les contenus restent adaptés aux enfants, sans exagération ni images choquantes ;
• les textes de narration sont lisibles sur écran et vidéoprojecteur ;
• les enseignants peuvent utiliser le site comme support de présentation scolaire ;
• la conclusion conduit clairement à un message positif de protection de la Terre.

2. System Overview

pollution-plan-te est une application web éducative interactive avec une interface React, un backend FastAPI partagé et une base de données MariaDB provisionnée pour les données applicatives qui seraient nécessaires à l’exécution future du produit.

La version actuelle du produit est publique et anonyme : aucun compte, authentification, profil, permission différenciée ou espace personnel n’est requis. Les visiteurs peuvent accéder librement à l’accueil, à la vue d’ensemble des chapitres et à chaque chapitre.

Le produit présente neuf parties pédagogiques issues du projet scolaire initial :

1. Introduction — 0:00–1:00
2. Pollution de l’air — 1:00–2:15
3. Pollution de l’eau — 2:15–3:30
4. Pollution des sols — 3:30–4:30
5. Pollution sonore et visuelle — 4:30–5:15
6. Causes et conséquences — 5:15–6:30
7. Solutions — 6:30–8:30
8. Rôle des enfants et de l’école — 8:30–9:15
9. Conclusion et appel à l’action — 9:15–10:00

Chaque chapitre associe une narration écrite en français, des sous-titres toujours lisibles, des illustrations pédagogiques, des photographies documentaires réalistes et des animations visuelles adaptées aux enfants.

Removed from scope

• Génération de vidéo (also: film éducatif de 10 minutes, Full HD 1920 × 1080)
• Génération de voix off (also: voix française de la petite fille)
• Génération de musique et d’effets sonores (also: musique instrumentale, chant des oiseaux, bruit de l’eau, vent dans les arbres)
• Montage film (also: transitions de montage, synchronisation audiovisuelle)

2a. Product Interpretation and Delivery Boundary

Le projet initial demandait un film éducatif scolaire de 10 minutes. La livraison actuelle remplace explicitement ce film par un site éducatif interactif présentant les neuf parties sous forme de chapitres navigables.

Le site conserve l’intention pédagogique du projet : une petite fille fictive d’environ 10 ans guide les élèves à travers un exposé écrit en français, avec un ton chaleureux et rassurant. Sa narration est affichée sous forme de texte et de sous-titres lisibles ; elle n’est pas générée ni lue par une voix de synthèse ou un enregistrement.

Les contenus visuels comprennent des illustrations, schémas, photographies documentaires et animations pédagogiques. Ils ne constituent pas une vidéo montée, ne produisent pas de bande sonore et ne nécessitent pas de lecture audiovisuelle synchronisée.

Les trois pages du site sont publiques, sans compte utilisateur :

• Accueil : entrée du projet et démarrage du parcours ;
• Chapitres : sélection et reprise parmi les neuf chapitres ;
• Chapitre : consultation détaillée d’un chapitre et passage au chapitre précédent ou suivant.

2c. Page Content and Component Coverage

Accueil

• Informations et état principal

  • Présente le projet scolaire « La pollution et la protection de notre planète ».
  • Introduit la planète, sa nature, ses animaux et ses océans.
  • Pose la question centrale : « Pourquoi notre planète est-elle de plus en plus polluée ? »
  • Présente le parcours éducatif comme une exploration de neuf chapitres.
  • Reste accessible publiquement, sans authentification.

• Actions principales

  • Démarrer le parcours avec le bouton « Commencer le parcours ».
  • Accéder à la page Chapitres.
  • Ouvrir directement le premier chapitre, « Introduction ».

• Actions de soutien

  • Consulter les repères temporels du parcours.
  • Comprendre que le site est adapté à une présentation scolaire sur écran ou vidéoprojecteur.

• Entités et contenus présentés

  • Projet scolaire.
  • Planète Terre.
  • Nature, océans, animaux, villes et environnement humain.
  • Narratrice illustrée tenant un carnet vert.
  • Frise des neuf chapitres.

• Responsabilités des composants

  • Hero en double page de carnet documentaire.
  • Titre monumental « NOTRE PLANÈTE ».
  • Globe illustré avec textures de feuilles, eau et terre.
  • Vignettes documentaires de forêt, océan et ville.
  • Bandeau orange posant la question centrale.
  • Bouton d’entrée vert forêt.
  • Sous-titres de narration persistants dans la zone basse sécurisée.

• États

  • Chargement : afficher une composition de carnet et des zones de contenu non bloquantes.
  • Succès : le visiteur voit le projet et peut démarrer le parcours.
  • Erreur : si une illustration ne se charge pas, afficher une alternative visuelle cohérente ou un texte descriptif sans empêcher la navigation.
  • Récupération : le visiteur peut ouvrir la page Chapitres même si certains médias décoratifs sont indisponibles.

Chapitres

• Informations et état principal

  • Présente les neuf chapitres dans l’ordre chronologique obligatoire.
  • Affiche pour chaque chapitre un titre court en français et sa durée indicative.
  • Sert de point de reprise pour une présentation scolaire.
  • Reste accessible publiquement, sans authentification.

• Actions principales

  • Sélectionner l’un des neuf chapitres.
  • Reprendre une présentation à partir d’un chapitre choisi.
  • Revenir à l’accueil.

• Actions de soutien

  • Parcourir la frise des chapitres.
  • Identifier le chapitre sélectionné ou en cours de consultation.
  • Utiliser la navigation au clavier sur les chapitres.

• Entités et contenus présentés

  • Les neuf chapitres.
  • Repères horaires : 0:00, 1:00, 2:15, 3:30, 4:30, 5:15, 6:30, 8:30 et 9:15.
  • Titre, durée et bref thème de chaque chapitre.

• Responsabilités des composants

  • Frise en ruban de papier perforé.
  • Colonne de repères horaires fixe à gauche sur écran large.
  • Rail horizontal défilable en haut sur mobile.
  • Marqueur de chapitre actif sous forme de petite feuille orange.
  • Liens de navigation accessibles au clavier.
  • Cartes ou repères présentant chaque chapitre sans grille répétitive uniforme.

• États

  • Chargement : les intitulés, durées et structure de la frise restent visibles avant le chargement des images.
  • État vide : non applicable, car les neuf chapitres sont des contenus obligatoires et préconfigurés.
  • Succès : chaque chapitre peut être ouvert.
  • Erreur : si une miniature est indisponible, le titre et la durée restent disponibles.
  • Récupération : l’utilisateur peut sélectionner un autre chapitre ou revenir à l’accueil.

Chapitre

• Informations et état principal

  • Affiche un chapitre éducatif à la fois.
  • Montre le titre court du chapitre, sa plage temporelle indicative et son contenu narratif.
  • Présente la narration écrite à la première personne par une petite fille d’environ 10 ans.
  • Affiche des sous-titres français lisibles dans la partie basse de l’écran.
  • Associe illustrations, photographies documentaires, schémas et animations pédagogiques.
  • Reste accessible publiquement, sans authentification.

• Actions principales

  • Lire le contenu du chapitre.
  • Passer au chapitre suivant.
  • Revenir au chapitre précédent lorsque celui-ci existe.
  • Revenir à la liste des chapitres.

• Actions de soutien

  • Parcourir les annotations pédagogiques.
  • Consulter les cartes « Le savais-tu ? » lorsque leur contenu est prévu pour le chapitre.
  • Utiliser les contrôles de navigation au clavier.
  • Sélectionner une couche visuelle du globe pédagogique lorsque cette interaction est utilisée pour révéler une courte scène et son schéma associé.

• Entités et contenus présentés

  • Chapitre.
  • Durée indicative.
  • Narration française.
  • Sous-titres.
  • Illustrations et photographies.
  • Gestes écologiques.
  • Causes, conséquences et solutions.
  • Globe pédagogique avec couches air, eau, sols et bruit.
  • Cartes « Le savais-tu ? ».

• Responsabilités des composants

  • Grande scène documentaire au format visuel 16:9.
  • Carte de narration lisible.
  • Annotation illustrée.
  • Bandeau de sous-titres permanent.
  • Navigation précédent/suivant.
  • Frise de progression entre les chapitres.
  • Illustrations de la petite narratrice sans recouvrement des sous-titres.
  • Séquence de solutions sous forme de pièces de puzzle vertes assemblant les gestes positifs.

• États
  • Chargement : afficher le titre du chapitre, les contrôles de navigation et un emplacement réservé pour les illustrations.
  • Succès : la narration, les sous-titres, les illustrations et les éléments pédagogiques sont visibles.
  • Erreur : une image ou animation indisponible ne doit pas masquer le texte pédagogique ni empêcher la navigation.
  • Récupération : continuer vers le chapitre précédent, suivant ou vers la page Chapitres.
  • Dernier chapitre : afficher la phrase finale obligatoire et un accès clair à la liste des chapitres ou à l’accueil.
  • Version à mouvement réduit : fournir une composition statique entièrement lisible, sans animation obligatoire.

3. Functional Requirements

FR-01 — Accéder au projet scolaire

En tant qu’ élève présentateur / présentatrice, enseignant / encadrant scolaire ou élève spectateur,
je dois pouvoir accéder publiquement à l’accueil de pollution-plan-te,
afin de découvrir le projet scolaire sur la pollution et commencer le parcours éducatif.

• Provenance : required_inference.
• Accès : public et anonyme.
• Déclencheur : ouverture du site.
• Résultat observable : l’accueil présente le projet, la planète, la question centrale et un moyen de commencer le parcours.
• Échec et récupération : si un média décoratif est indisponible, le texte et le bouton de démarrage restent accessibles.
• Continuation : l’utilisateur peut ouvrir la page Chapitres ou le chapitre Introduction.

FR-02 — Présenter les neuf chapitres dans l’ordre obligatoire

En tant qu’ élève présentateur / présentatrice, enseignant / encadrant scolaire ou élève spectateur,
je dois pouvoir consulter les neuf chapitres du projet dans leur ordre chronologique,
afin de suivre ou préparer la progression pédagogique prévue.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : ouverture de la page Chapitres.
• Résultat observable : les neuf titres et plages temporelles suivantes sont visibles :
  1. Introduction — 0:00–1:00
  2. Pollution de l’air — 1:00–2:15
  3. Pollution de l’eau — 2:15–3:30
  4. Pollution des sols — 3:30–4:30
  5. Pollution sonore et visuelle — 4:30–5:15
  6. Causes et conséquences — 5:15–6:30
  7. Solutions — 6:30–8:30
  8. Rôle des enfants et de l’école — 8:30–9:15
  9. Conclusion et appel à l’action — 9:15–10:00
• Échec et récupération : si une illustration de chapitre échoue, le titre, la durée et le lien du chapitre restent visibles.
• Continuation : l’utilisateur sélectionne le chapitre de son choix.

FR-03 — Consulter le chapitre Introduction

En tant qu’ élève spectateur,
je dois pouvoir consulter le chapitre Introduction,
afin de découvrir la planète, sa nature, ses animaux et ses océans avant d’aborder la pollution.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre Introduction.
• Résultat observable : le chapitre présente la beauté de la planète et pose la question : « Pourquoi notre planète est-elle de plus en plus polluée ? »
• Échec et récupération : si une scène illustrée ne se charge pas, la narration écrite et les sous-titres restent disponibles.
• Continuation : l’utilisateur peut ouvrir « Pollution de l’air ».

FR-04 — Expliquer la pollution de l’air

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre expliquant la pollution de l’air,
afin de comprendre les fumées des usines, les gaz des voitures, la poussière et leurs effets.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Pollution de l’air ».
• Résultat observable : le contenu explique les fumées industrielles, les gaz des voitures, la poussière et leurs effets sur la santé et l’environnement.
• Échec et récupération : les explications textuelles restent lisibles si un support illustratif est indisponible.
• Continuation : l’utilisateur peut poursuivre vers « Pollution de l’eau » ou revenir au chapitre précédent.

FR-05 — Expliquer la pollution de l’eau

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre expliquant la pollution de l’eau,
afin de comprendre les dangers des déchets et des eaux usées pour les êtres vivants.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Pollution de l’eau ».
• Résultat observable : le contenu montre les déchets jetés dans les rivières et les mers, les eaux usées et les dangers pour les poissons, les animaux marins et les humains.
• Échec et récupération : les légendes et la narration restent disponibles lorsque les médias visuels sont réduits ou absents.
• Continuation : l’utilisateur peut poursuivre vers « Pollution des sols ».

FR-06 — Expliquer la pollution des sols

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre expliquant la pollution des sols,
afin de comprendre les effets des déchets et produits chimiques sur les terres agricoles.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Pollution des sols ».
• Résultat observable : le chapitre présente les sacs en plastique, les déchets ménagers, les produits chimiques et leurs conséquences sur les terres agricoles.
• Échec et récupération : le texte pédagogique demeure disponible sans dépendre exclusivement des illustrations.
• Continuation : l’utilisateur peut poursuivre vers « Pollution sonore et visuelle ».

FR-07 — Expliquer la pollution sonore et visuelle

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre expliquant la pollution sonore et visuelle,
afin de comprendre les nuisances produites par les bruits excessifs et les déchets publics.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Pollution sonore et visuelle ».
• Résultat observable : le chapitre explique les bruits excessifs des véhicules et des machines ainsi que l’accumulation des déchets dans les espaces publics.
• Échec et récupération : l’utilisateur conserve l’accès au texte, aux sous-titres et aux commandes de navigation.
• Continuation : l’utilisateur peut poursuivre vers « Causes et conséquences ».

FR-08 — Présenter les causes et conséquences

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre sur les causes et conséquences de la pollution,
afin de comprendre le lien entre les comportements humains et les effets sur la planète.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Causes et conséquences ».
• Résultat observable : le chapitre explique les comportements humains responsables de la pollution, les maladies, la disparition de certaines espèces et le changement climatique.
• Contrainte de contenu : le traitement ne doit comporter ni exagération ni images choquantes.
• Échec et récupération : les informations sont présentées avec des visuels modérés et adaptés aux enfants ; l’utilisateur peut continuer ou revenir en arrière.
• Continuation : l’utilisateur peut ouvrir le chapitre « Solutions ».

FR-09 — Présenter les solutions concrètes

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre de solutions,
afin de identifier les gestes concrets qui protègent la planète.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Solutions ».
• Résultat observable : le contenu montre :
  • le tri des déchets ;
  • le recyclage ;
  • la réduction du plastique ;
  • l’utilisation des transports en commun ;
  • la plantation d’arbres ;
  • l’économie d’eau ;
  • l’économie d’électricité ;
  • le nettoyage des quartiers ;
  • le nettoyage des plages.
• Échec et récupération : les gestes restent compréhensibles au moyen du texte et des illustrations statiques si les animations sont désactivées.
• Continuation : l’utilisateur peut poursuivre vers « Rôle des enfants et de l’école ».

FR-10 — Présenter le rôle des enfants et de l’école

En tant qu’ élève spectateur,
je dois pouvoir consulter un chapitre sur les actions des enfants et de l’école,
afin de comprendre les gestes réalisables dans la vie scolaire.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Rôle des enfants et de l’école ».
• Résultat observable : le chapitre montre des élèves qui nettoient leur cour, plantent des fleurs, utilisent les poubelles et sensibilisent leurs camarades.
• Échec et récupération : les gestes décrits restent accessibles dans la narration écrite.
• Continuation : l’utilisateur peut ouvrir la conclusion.

FR-11 — Afficher la conclusion et l’appel à l’action

En tant qu’ élève présentateur / présentatrice ou enseignant / encadrant scolaire,
je dois pouvoir présenter une conclusion positive et mobilisatrice,
afin de terminer l’exposé par un appel clair à protéger la Terre.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : sélection du chapitre « Conclusion et appel à l’action ».
• Résultat observable : le chapitre montre une planète propre, des enfants heureux et des arbres verts.
• Phrase finale obligatoire :
  « La Terre est notre maison à tous. Protégeons-la aujourd’hui pour offrir un avenir meilleur aux générations de demain. Chaque petit geste compte. Ensemble, nous pouvons faire la différence ! »
• Échec et récupération : la phrase finale reste disponible comme texte même si les éléments illustrés ne peuvent pas être affichés.
• Continuation : l’utilisateur peut revenir à la page Chapitres ou à l’accueil.

FR-12 — Fournir une narration écrite en français

En tant qu’ élève spectateur,
je dois pouvoir lire une narration française écrite à la première personne,
afin de suivre l’exposé comme si une petite fille d’environ 10 ans s’adressait directement à moi.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : consultation d’un chapitre.
• Résultat observable : la narration emploie un ton touchant, sérieux lorsque le sujet l’exige, puis optimiste et encourageant à la fin.
• Contrainte : le site ne génère pas de voix off ; la narration est présentée sous forme de contenu écrit.
• Échec et récupération : les contenus textuels doivent rester disponibles indépendamment des animations et illustrations.
• Continuation : l’utilisateur poursuit la lecture, consulte un autre chapitre ou revient à la frise.

FR-13 — Afficher des sous-titres français lisibles

En tant qu’ élève spectateur,
je dois pouvoir lire des sous-titres français visibles pendant la consultation des chapitres,
afin de suivre facilement le contenu pédagogique sur écran ou vidéoprojecteur.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : affichage d’un chapitre.
• Résultat observable : les sous-titres apparaissent dans une zone de sécurité en bas de l’écran, sans coupure sur les bords.
• Contraintes visuelles :
  • police claire et de grande taille ;
  • texte blanc ;
  • contour noir ou ombre discrète ;
  • fond légèrement transparent si nécessaire ;
  • orthographe et grammaire corrigées ;
  • phrases évitant une longueur excessive ;
  • deux lignes maximum dans la direction visuelle retenue.
• Contrainte de livraison : les sous-titres ne sont pas synchronisés à une voix générée, car le produit ne génère pas de voix off ou de vidéo.
• Échec et récupération : les sous-titres restent affichés même en mode à mouvement réduit.
• Continuation : l’utilisateur peut continuer la lecture ou naviguer vers un autre chapitre.

FR-14 — Permettre la navigation entre les chapitres

En tant qu’ élève présentateur / présentatrice ou enseignant / encadrant scolaire,
je dois pouvoir passer au chapitre précédent ou suivant et sélectionner un chapitre depuis la frise,
afin de mener une présentation scolaire fluide.

• Provenance : required_inference.
• Accès : public et anonyme.
• Déclencheur : activation des contrôles précédent, suivant ou de la frise.
• Résultat observable : le chapitre demandé s’ouvre avec son titre, sa durée, sa narration et ses contenus pédagogiques.
• Échec et récupération : aux extrémités du parcours, les contrôles indisponibles ne doivent pas provoquer de navigation invalide ; l’utilisateur peut revenir à la page Chapitres.
• Continuation : l’utilisateur poursuit le parcours, reprend un chapitre ou termine sur la conclusion.

FR-15 — Proposer des illustrations et animations adaptées aux enfants

En tant qu’ élève spectateur,
je dois pouvoir observer des contenus visuels pédagogiques adaptés à chaque chapitre,
afin de mieux comprendre les explications sur la pollution et les solutions.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : consultation des chapitres.
• Résultat observable : le site utilise, selon les besoins du chapitre, des représentations de nature, villes, usines, véhicules, rivières polluées, plages couvertes de déchets, forêts détruites, animaux menacés, paysages propres et verdoyants, scènes de vie quotidienne et solutions concrètes.
• Contrainte : les visuels conservent un niveau professionnel, cohérent et adapté aux enfants ; ils ne sont ni graphiques, ni effrayants, ni culpabilisants.
• Échec et récupération : une alternative textuelle ou illustrative statique maintient l’intelligibilité du contenu.
• Continuation : l’utilisateur poursuit la lecture du chapitre ou navigue vers un autre thème.

FR-16 — Fournir une expérience adaptée aux écrans de présentation

En tant qu’ enseignant / encadrant scolaire,
je dois pouvoir utiliser le site sur un écran ou un vidéoprojecteur,
afin de présenter les contenus à une classe.

• Provenance : explicit.
• Accès : public et anonyme.
• Déclencheur : utilisation du site sur un écran de présentation.
• Résultat observable : l’interface privilégie une composition horizontale 16:9, des titres courts et du texte lisible.
• Échec et récupération : lorsque l’affichage devient étroit, les panneaux passent en une colonne, les titres se replient sans recouvrement et la frise devient défilable horizontalement.
• Continuation : l’enseignant peut ouvrir un autre chapitre, reprendre le parcours ou revenir à l’accueil.

4. User Personas

Élève présentateur / présentatrice

L’élève présentateur ou présentatrice est un enfant d’environ 10 ans qui utilise pollution-plan-te pour mener un exposé scolaire sur la pollution devant sa classe. Son rôle est de faire défiler les chapitres, lire ou s’appuyer sur la narration affichée et conduire le groupe jusqu’à l’appel final à protéger la Terre.

Son objectif principal est de présenter un parcours pédagogique fluide, clair et rassurant. Il ou elle a besoin de titres courts, de repères temporels visibles, d’une navigation simple entre les chapitres et de sous-titres suffisamment grands pour être lus en présentation.

Ses responsabilités distinctes sont :

• démarrer le parcours depuis l’accueil ;
• parcourir les neuf chapitres dans l’ordre ou en sélectionner un ;
• utiliser les commandes précédent et suivant ;
• s’appuyer sur les sous-titres et les illustrations pour présenter les notions ;
• conclure avec la phrase finale obligatoire.

Le succès est observable lorsque l’élève mène l’exposé sans perdre le fil du parcours et termine avec un message positif de protection de la planète.

Enseignant / encadrant scolaire

L’enseignant ou encadrant scolaire prépare, accompagne ou présente le contenu devant une classe. Son rôle est différent de celui de l’élève présentateur : il vérifie que le contenu est adapté aux enfants, choisit éventuellement un chapitre précis et soutient la compréhension collective.

Son objectif principal est de proposer une sensibilisation environnementale claire, adaptée à l’âge des élèves et sans images choquantes. Il doit pouvoir utiliser le site sur écran ou vidéoprojecteur et reprendre la présentation à partir d’un chapitre pertinent.

Ses responsabilités distinctes sont :

• ouvrir le site et préparer le support de présentation ;
• consulter la frise complète des neuf chapitres ;
• sélectionner un chapitre selon le déroulement pédagogique souhaité ;
• faire défiler les contenus ;
• vérifier la lisibilité des sous-titres et la pertinence des visuels ;
• favoriser la discussion autour des gestes concrets proposés.

Le succès est observable lorsque les élèves suivent un contenu cohérent, compréhensible et mobilisateur.

Élève spectateur

L’élève spectateur suit la présentation en classe ou consulte le site pour apprendre. Il ou elle n’a pas besoin de gérer le déroulement de la présentation ; son rôle consiste à observer les illustrations, lire les sous-titres et comprendre les liens entre pollution, conséquences et solutions.

Son objectif principal est de comprendre les causes et conséquences de la pollution et de retenir les gestes qu’il ou elle peut appliquer au quotidien.

Ses interactions principales sont :

• observer les scènes documentaires et illustrations ;
• lire la narration et les sous-titres ;
• découvrir les exemples liés à l’air, à l’eau, aux sols, au bruit et aux déchets ;
• identifier les gestes de tri, recyclage, réduction du plastique, transport collectif, plantation, économie d’eau et d’électricité, ainsi que nettoyage ;
• recevoir le message final d’encouragement.

Le succès est observable lorsque l’élève peut expliquer au moins les grands thèmes du parcours et reconnaître des actions concrètes de protection de la planète.

5. Core User Flows

Flux 1 — Démarrer une présentation scolaire depuis l’accueil

1. L’élève présentateur / présentatrice ou l’enseignant ouvre la page Accueil.
2. Le site affiche le projet scolaire, la planète, la nature, les animaux, les océans et la question centrale sur la pollution.
3. La personne consulte le bouton « Commencer le parcours ».
4. Elle active le bouton.
5. Le site ouvre la page Chapitres.
6. La frise des neuf chapitres, leurs titres et leurs durées indicatives apparaissent.
7. La personne sélectionne « Introduction » pour commencer le parcours.
8. Le site ouvre la page Chapitre avec le contenu Introduction.
9. Les élèves spectateurs lisent les sous-titres et observent les illustrations.
10. La présentation peut continuer vers le chapitre suivant.

Récupération : si une image ne s’affiche pas, le titre, la narration écrite, les sous-titres et la navigation restent utilisables.

Flux 2 — Reprendre une présentation à partir d’un chapitre

1. L’enseignant ouvre la page Chapitres.
2. Il consulte la frise contenant les neuf chapitres dans l’ordre prévu.
3. Il identifie le chapitre correspondant au sujet souhaité, par exemple « Solutions ».
4. Il sélectionne ce chapitre.
5. Le site ouvre la page Chapitre avec le titre, la durée indicative, la narration, les sous-titres et les contenus pédagogiques associés.
6. Les élèves spectateurs découvrent les gestes concrets présentés.
7. L’enseignant peut passer au chapitre suivant ou revenir à la liste des chapitres.

Récupération : si une miniature est indisponible, le lien textuel du chapitre reste disponible.

Flux 3 — Suivre les types de pollution dans l’ordre

1. L’élève présentateur ouvre le chapitre « Pollution de l’air ».
2. Il présente les fumées des usines, les gaz des voitures, la poussière et leurs effets sur la santé et l’environnement.
3. Les élèves spectateurs lisent les sous-titres et observent les visuels modérés.
4. Le présentateur utilise la commande suivante.
5. Le site ouvre « Pollution de l’eau ».
6. Les élèves découvrent les déchets dans les rivières et les mers, les eaux usées et les dangers pour les poissons, animaux marins et humains.
7. Le présentateur continue vers « Pollution des sols ».
8. Le site présente les sacs en plastique, déchets ménagers, produits chimiques et conséquences sur les terres agricoles.
9. Le présentateur poursuit vers « Pollution sonore et visuelle ».
10. Le site explique les bruits excessifs des véhicules et machines ainsi que les déchets dans les espaces publics.

Récupération : si une animation est désactivée ou indisponible, les illustrations statiques et le texte gardent le contenu compréhensible.

Flux 4 — Comprendre les causes, conséquences et solutions

1. L’enseignant ou l’élève présentateur ouvre le chapitre « Causes et conséquences ».
2. Le site présente les comportements humains responsables de la pollution.
3. Les élèves spectateurs découvrent les maladies, la disparition de certaines espèces et le changement climatique.
4. Les contenus restent mesurés, adaptés aux enfants et exempts d’images choquantes.
5. Le présentateur active la navigation vers le chapitre « Solutions ».
6. Le site présente le tri, le recyclage, la réduction du plastique, les transports en commun, la plantation d’arbres, les économies d’eau et d’électricité, ainsi que le nettoyage des quartiers et des plages.
7. Les gestes sont représentés comme des pièces de puzzle vertes qui s’assemblent progressivement dans les modes animés compatibles.
8. En mode à mouvement réduit, les mêmes gestes sont présentés dans une composition statique lisible.
9. Les élèves identifient des actions réalisables dans leur vie quotidienne.

Flux 5 — Découvrir le rôle des enfants et terminer l’exposé

1. L’élève présentateur ouvre le chapitre « Rôle des enfants et de l’école ».
2. Le site montre des élèves nettoyant leur cour, plantant des fleurs, utilisant les poubelles et sensibilisant leurs camarades.
3. Les élèves spectateurs relient ces actions à leur propre école.
4. Le présentateur passe au chapitre « Conclusion et appel à l’action ».
5. Le site affiche une planète propre, des enfants heureux et des arbres verts.
6. Le présentateur lit ou montre la phrase finale obligatoire : « La Terre est notre maison à tous. Protégeons-la aujourd’hui pour offrir un avenir meilleur aux générations de demain. Chaque petit geste compte. Ensemble, nous pouvons faire la différence ! »
7. Les élèves reçoivent un message optimiste et encourageant.
8. Le présentateur peut revenir à la page Chapitres ou à l’accueil.

Flux 6 — Consultation par un élève spectateur

1. L’élève spectateur suit l’enseignant ou le présentateur sur la page Chapitre.
2. Il observe la scène documentaire, l’illustration et les annotations.
3. Il lit les sous-titres affichés dans la zone basse sécurisée.
4. Il découvre les explications simples et les exemples concrets.
5. Il suit le passage au chapitre suivant lorsque le présentateur ou l’enseignant l’active.
6. Il retient les gestes utiles proposés dans le chapitre Solutions et dans le chapitre sur le rôle des enfants.

6. Visuals Colors and Theme

Muse et intention visuelle

Muse : Pablo Stanley

Headline : Un carnet de classe vivant pour défendre la Terre

La direction visuelle combine le sérieux d’un documentaire environnemental réaliste avec l’énergie chaleureuse d’un carnet scolaire illustré. Les contenus doivent rester compréhensibles, rassurants et mobilisateurs pour les enfants, sans banaliser la pollution ni présenter d’images choquantes.

Palette de couleurs

Le projet ne doit pas utiliser un modèle SaaS générique bleu indigo sur fond blanc.

Typographie

• Titres : Bricolage Grotesque.
• Texte courant : DM Sans.
• Sous-titres : DM Sans SemiBold blanc, avec ombre noire douce et cartouche anthracite translucide.
• Affichage principal : clamp(52px, 8vw, 112px).
• H1 : de 52 px sur mobile à 112 px sur grand écran.
• Titres de chapitre : 32–58 px.
• Intertitres : 24–32 px.
• Texte courant : 17–20 px.
• Sous-titres : minimum 20 px à 375 px et 28 px à 1280 px.
• Les mots-clés tels que « AIR », « EAU » et « AGIR » peuvent être accentués par la couleur, sans recourir à des blocs entièrement en majuscules.

Formes et surfaces

• Grands aplats organiques inspirés des pages d’un cahier créatif.
• Cadres arrondis de 24 px.
• Étiquettes autocollantes, flèches manuscrites et pictogrammes à contour épais.
• Éléments négatifs rendus avec des silhouettes légèrement froissées, désaturées ou barrées.
• Éléments liés aux solutions rendus avec des formes vertes nettes qui s’assemblent.
• Pas de cartes répétitives identiques ni de survol uniforme appliqué à toutes les surfaces.

Mise en page

• Le parcours reprend la logique d’une frise de film transformée en navigation verticale.
• Sur écran large, une colonne de repères horaires est fixée à gauche.
• Sur mobile, la frise devient un rail horizontal défilable.
• Chaque chapitre alterne :
  • une grande scène documentaire 16:9 ;
  • une annotation illustrée ;
  • une carte de narration.
• Les contenus lisibles restent dans une zone centrale maximale de 88 %.
• À 375 px, les panneaux passent sur une colonne et les titres se replient sans recouvrement.
• Les textes, libellés, chiffres et contrôles doivent rester entièrement visibles à 375 px, 768 px et 1280 px.

Imagerie

• Photographies documentaires réalistes de nature lumineuse, forêts, mer, animaux, rues, usines, transports et gestes quotidiens.
• Illustrations vectorielles chaleureuses servant à expliquer et annoter les scènes.
• Ville et industrie représentées de manière modérée, sans catastrophisme.
• Petite narratrice illustrée récurrente avec un carnet vert.
• La narratrice ne doit jamais masquer les sous-titres.
• Les photographies, illustrations et textures peuvent être recadrées ou dépasser un bord uniquement si elles ne recouvrent aucun texte lisible ni contrôle.

7. Signature Design Concept

La double page « Notre planète »

L’accueil est conçu comme une grande double page de carnet documentaire.

À gauche, le titre monumental « NOTRE PLANÈTE » occupe environ 55 % de l’espace disponible. Le mot « planète » est composé de lettres remplies de textures de feuilles, d’eau et de terre. À droite, un globe terrestre illustré flotte sur un grand aplat organique vert forêt #276749.

Autour du globe, trois vignettes documentaires rectangulaires sont épinglées comme des preuves d’exposé : une forêt, un océan et une ville. La petite narratrice illustrée apparaît en bas à droite avec son carnet ouvert. Une bande orange terre cuite pose la question : « Pourquoi notre planète est-elle de plus en plus polluée ? ».

Le bouton « Commencer le parcours » est un grand autocollant vert sombre, visible, accessible et distinct des boutons bleus génériques.

Cette composition ne crée pas de fonctionnalité supplémentaire : elle recompose l’introduction, la question centrale et l’entrée existante dans le parcours des chapitres.

8. Interaction Model & Motion Direction

Interaction Model: Animated
Motion Tempo: expressive
Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Sujet focal : le globe terrestre illustré, les vignettes documentaires de forêt, océan et ville, ainsi que la narratrice enfant tenant son carnet vert.
• Thèse entrée → transformation → résultat : le visiteur arrive face à une planète riche en nature, eau et vie ; les éléments documentaires et annotations révèlent progressivement la question de la pollution ; le bouton « Commencer le parcours » conduit vers les neuf chapitres et leurs solutions concrètes.
• Vocabulaire de mouvement :
  • feuilles de carnet qui se tournent ;
  • flèches manuscrites qui se dessinent ;
  • vignettes qui glissent doucement à leur emplacement ;
  • globe et annotations légèrement animés en couches 2D ;
  • désaturation légère pour les thèmes de pollution ;
  • retour progressif de la couleur dans les chapitres de solutions ;
  • compteurs et repères horaires changeant par paliers.
• Premier écran composé : le titre « NOTRE PLANÈTE », le globe vert, les vignettes documentaires, la narratrice, la question orange et le bouton sont déjà entièrement lisibles avant le déclenchement des animations.
• Mouvement et lisibilité : les animations sont expressives mais lentes, pédagogiques et silencieuses. Elles ne doivent pas clignoter, surprendre ou concurrencer la lecture des sous-titres.
• État prefers-reduced-motion : toutes les animations deviennent facultatives. Le site fournit une composition statique, des illustrations assemblées, une frise horizontalement défilable si nécessaire, et aucune interaction ne dépend d’une animation pour être comprise ou utilisable.

9. Non-Functional Requirements

NFR-01 — Langue française

Tous les contenus de narration, titres, sous-titres et explications pédagogiques doivent être en français.

• Provenance : explicit.
• Rationale : le projet est un support scolaire francophone.

NFR-02 — Absence de génération audiovisuelle

Le produit ne doit générer ni vidéo, ni voix off, ni musique, ni effets sonores, ni montage film.

• Provenance : explicit.
• Rationale : le projet initial de film de 10 minutes est remplacé par un site éducatif interactif.

NFR-03 — Lisibilité des sous-titres

Les sous-titres doivent rester visibles, lisibles et non coupés sur les bords de l’écran.

• Provenance : explicit.
• Exigences :
  • police claire et de grande taille ;
  • texte blanc ;
  • contour noir ou ombre discrète ;
  • fond légèrement transparent si nécessaire ;
  • zone de sécurité basse ;
  • deux lignes maximum selon la direction créative ;
  • aucun élément décoratif ou personnage ne recouvre cette zone.

NFR-04 — Adaptation aux enfants

Le contenu doit rester adapté aux enfants et aux élèves.

• Provenance : explicit.
• Exigences :
  • aucune image choquante ;
  • aucune représentation graphique, effrayante ou culpabilisante ;
  • aucune exagération des conséquences de la pollution ;
  • ton touchant et sérieux lorsque nécessaire ;
  • conclusion optimiste et encourageante.

NFR-05 — Cohérence visuelle et de ton

L’identité visuelle, le ton narratif, le niveau de langage et les principes de représentation doivent être cohérents dans les neuf chapitres.

• Provenance : explicit.
• Rationale : le projet doit former un exposé scolaire homogène.

NFR-06 — Compatibilité de présentation

L’interface doit être adaptée à une présentation scolaire sur écran ou vidéoprojecteur.

• Provenance : explicit.
• Exigences :
  • composition privilégiant un format horizontal 16:9 ;
  • texte lisible à distance ;
  • titres courts ;
  • navigation simple ;
  • structure utilisable sur des écrans étroits grâce à des colonnes repliées et à une frise défilable.

NFR-07 — Accessibilité de navigation

Les éléments interactifs de navigation, y compris le chapitre actif de la frise, doivent rester accessibles au clavier.

• Provenance : required_inference.
• Rationale : la frise est un élément de navigation central et doit rester utilisable lors d’une présentation.

NFR-08 — Respect de la réduction de mouvement

Le site doit proposer une expérience utilisable avec prefers-reduced-motion.

• Provenance : explicit dans la direction créative.
• Exigences :
  • aucune animation obligatoire ;
  • illustrations statiques disponibles ;
  • contenu et contrôles lisibles ;
  • frise rendue accessible par défilement horizontal ou disposition adaptée.

NFR-09 — Responsivité et prévention du recouvrement

À 375 px, 768 px et 1280 px, aucun texte lisible, chiffre, carte ou contrôle ne doit être coupé, sortir de son conteneur ou être recouvert.

• Provenance : explicit dans la direction créative.
• Exception : les images, décorations et éléments en mouvement peuvent dépasser visuellement un bord lorsque cela ne masque aucun texte ou contrôle et que les éléments défilables peuvent devenir entièrement lisibles.

10. Tech Stack

Frontend

• React
  • Interface utilisateur de pollution-plan-te.
  • Rendu de l’accueil, de la liste des chapitres et de la page de chapitre.
  • Gestion de la navigation publique entre les neuf chapitres.
  • Gestion des états responsives et prefers-reduced-motion.

Backend

• Python / FastAPI
  • Backend partagé pour les API applicatives et les modules de domaine.
  • Réutilisation du processus backend existant pour les fonctionnalités nécessaires au site.
  • Aucun service séparé n’est requis pour les chapitres, la narration ou les contenus pédagogiques dans le périmètre actuel.

Base de données

• MariaDB
  • Service provisionné pour les données applicatives persistantes si elles deviennent nécessaires.
  • La présence de MariaDB ne crée pas d’exigence de comptes utilisateurs, d’authentification, de profils ou de données personnelles.

Services exécutables

Le fichier docker-compose.yml doit inventorier les services exécutables suivants :

• frontend — application React ;
• backend — processus FastAPI partagé ;
• database — service MariaDB.

Déploiement

• Docker / docker-compose
  • Utilisés pour exécuter l’inventaire de services provisionné.
• Kubernetes
  • Non requis pour le périmètre actuel, car aucun besoin de déploiement distribué ou de montée en charge spécifique n’est établi.

11. Assumptions and Constraints

Contraintes confirmées

• Le projet est un site éducatif interactif et non un générateur de film.
• La génération de vidéo, voix off, musique, effets sonores et montage est hors périmètre actuel.
• Les neuf chapitres sont obligatoires et doivent conserver leur ordre et leurs durées indicatives.
• Les pages actuelles sont exactement :
  • Accueil ;
  • Chapitres ;
  • Chapitre.
• Les trois pages sont accessibles publiquement sans authentification.
• Aucun rôle, permission ou accès différencié n’est établi.
• Le contenu est rédigé en français.
• Les contenus doivent rester adaptés aux enfants, sans exagération ni images choquantes.
• La conclusion doit contenir exactement la phrase finale obligatoire.
• L’interface doit conserver une cohérence de ton et de représentation entre les chapitres.
• L’affichage doit être adapté à une présentation horizontale 16:9 sur écran ou vidéoprojecteur.

Hypothèses limitées

• [Required inference] Les commandes précédent et suivant sont nécessaires sur la page Chapitre pour permettre la continuité du parcours pédagogique et la présentation fluide des neuf chapitres.
• [Required inference] La frise de chapitres est utilisable comme point de reprise afin que l’enseignant ou le présentateur puisse sélectionner un chapitre sans devoir parcourir obligatoirement tous les précédents.
• [Default — not specified by user] Les contenus pédagogiques peuvent être fournis depuis des données statiques ou administrées côté application tant que cela n’ajoute pas de fonctionnalité utilisateur non demandée.
• [Default — not specified by user] Les médias affichés doivent disposer de textes alternatifs appropriés lorsque leur absence empêcherait la compréhension du contenu.

Hors périmètre actuel

• Comptes utilisateurs, inscription, connexion, mots de passe ou récupération de compte.
• Profils d’élèves, d’enseignants ou de classes.
• Téléversement de contenus par les utilisateurs.
• Génération de vidéo, de voix, de musique ou d’effets sonores.
• Montage audiovisuel.
• Suivi individuel des progrès scolaires.
• Quiz, scores, badges, gamification ou devoirs.
• Partage social, commentaires ou messagerie.
• Création de pages supplémentaires au-delà de Accueil, Chapitres et Chapitre.

12. Glossary

• Chapitre : unité pédagogique du parcours consacrée à un thème précis lié à la pollution ou à la protection de la planète.
• Frise de chapitres : navigation chronologique qui affiche les neuf chapitres et leurs repères horaires.
• Narration : texte pédagogique en français écrit à la première personne comme s’il était présenté par une petite fille d’environ 10 ans.
• Sous-titres : version visible et lisible de la narration affichée dans une zone de sécurité basse.
• Zone de sécurité : espace visuel garantissant que les sous-titres et autres contenus essentiels ne sont pas coupés par les bords de l’écran.
• Mode à mouvement réduit : version de l’interface qui désactive les animations non essentielles pour respecter la préférence prefers-reduced-motion.
• Repère temporel : durée indicative héritée du scénario initial de film, utilisée pour structurer les neuf chapitres du site.
• Illustration pédagogique : élément visuel explicatif, tel qu’un schéma, une annotation, une carte « Le savais-tu ? » ou une scène illustrée.