# Référentiel des 24 notions transversales

import { CycleBadge } from "../src/components/CycleBadge";
import { Mermaid } from "../src/components/Mermaid";
import { TeacherTip } from "../src/components/TeacherTip";
import { WatchOut } from "../src/components/WatchOut";

Ce référentiel fournit pour chaque concept informatique clé : la définition pour l'enseignant, la formulation adaptée aux élèves, une analogie du quotidien, des exemples et les liens directs vers les séances associées dans les 4 cycles.

<Mermaid
  title="Arborescence Pédagogique des 24 Notions Transversales"
  caption="Organisation conceptuelle des 24 notions par famille d'apprentissage informatique."
  chart={`graph TD
    Root["🧩 24 Notions Transversales"] --> F1["1. Fondations Algorithmiques"]
    Root --> F2["2. Contrôle du Flux"]
    Root --> F3["3. Données & Variables"]
    Root --> F4["4. Espace & Interaction"]
    Root --> F5["5. Ingénierie & Méthode"]

    F1 --> N1["Instruction • Algorithme • Programme • Séquence"]
    F2 --> N2["Événement • Parallélisme • Boucle définie / infinie • Condition"]
    F3 --> N3["Booléen • Variable • Liste • Aléatoire"]
    F4 --> N4["Coordonnées • Orientation • Message • Collision"]
    F5 --> N5["Procédure • Paramètre • Clone • État • Test • Débogage • Décomposition"]

`}
/>

---

## 📑 Sommaire des 24 notions

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '0.5rem', margin: '1rem 0' }}>

- [1. Instruction](#1-instruction)
- [2. Algorithme](#2-algorithme)
- [3. Programme](#3-programme)
- [4. Séquence](#4-séquence)
- [5. Événement](#5-événement)
- [6. Parallélisme](#6-parallélisme)
- [7. Boucle définie](#7-boucle-définie)
- [8. Boucle infinie](#8-boucle-infinie)
- [9. Condition](#9-condition)
- [10. Booléen](#10-booléen)
- [11. Variable](#11-variable)
- [12. Liste](#12-liste)
- [13. Coordonnées](#13-coordonnées)
- [14. Orientation](#14-orientation)
- [15. Message](#15-message)
- [16. Collision](#16-collision)
- [17. Aléatoire](#17-aléatoire)
- [18. Clone](#18-clone)
- [19. Procédure / Bloc personnalisé](#19-procédure--bloc-personnalisé)
- [20. Paramètre](#20-paramètre)
- [21. État](#21-état)
- [22. Test](#22-test)
- [23. Débogage](#23-débogage)
- [24. Décomposition & Modélisation](#24-décomposition--modélisation)

</div>

---

## 1. Instruction

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Ordre élémentaire unitaire et non ambigu exécutable par un automate ou un processeur.
- **Formulation élève :** _« C'est un ordre simple et précis que le robot comprend et exécute sans hésiter. »_
- **Analogie quotidienne :** Une étape élémentaire d'une recette de cuisine (_« verser le lait »_ ou _« allumer la lumière »_).
- **Séances associées :** [C1-S01 (Donner une instruction)](/cycle-1/c1-s01-donner-une-instruction), [C2-S01](/cycle-2/c2-s01-algorithme-et-sequence), [C3-S01](/cycle-3/c3-s01-interface-et-premier-programme).

---

## 2. Algorithme

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Suite finie, ordonnée et déterministe d'instructions permettant de résoudre un problème ou d'obtenir un résultat précis.
- **Formulation élève :** _« C'est la liste ordonnée de toutes les étapes à suivre pour réussir une mission du début à la fin. »_
- **Analogie quotidienne :** La notice de montage d'un meuble ou l'itinéraire routier pour aller à l'école.
- **Séances associées :** [C1-S03 (Programmer un parcours)](/cycle-1/c1-s03-programmer-un-parcours), [C2-S01 (Algorithme et séquence)](/cycle-2/c2-s01-algorithme-et-sequence), [C4-S01](/cycle-4/c4-s01-diagnostic-et-consolidation).

---

## 3. Programme

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Traduction concrète d'un algorithme dans un langage informatique exécutable par une machine.
- **Formulation élève :** _« C'est l'algorithme écrit avec des blocs (ou du texte) pour que l'ordinateur l'exécute automatiquement. »_
- **Analogie quotidienne :** La partition de musique lue et jouée par un instrument mécanique.
- **Séances associées :** [C1-S06 (Première animation)](/cycle-1/c1-s06-premiere-animation-scratchjr), [C3-S01 (Premier script)](/cycle-3/c3-s01-interface-et-premier-programme).

---

## 4. Séquence

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Structure linéaire dans laquelle les instructions sont exécutées successivement dans l'ordre chronologique de leur disposition.
- **Formulation élève :** _« Les actions s'exécutent les unes après les autres, de haut en bas (ou de gauche à droite). »_
- **Analogie quotidienne :** S'habiller le matin : mettre ses chaussettes _avant_ de mettre ses chaussures.
- **Séances associées :** [C1-S02 (Mettre dans l'ordre)](/cycle-1/c1-s02-mettre-les-actions-dans-lordre), [C2-S01 (Séquence ordonnée)](/cycle-2/c2-s01-algorithme-et-sequence).

---

## 5. Événement

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Signal asynchrone (clic, touche clavier, contact, message, chronomètre) qui déclenche l'exécution d'un bloc d'instructions.
- **Formulation élève :** _« C'est le signal de départ : "Quand ceci arrive, alors fais cela". »_
- **Analogie quotidienne :** La sonnerie de récréation qui déclenche la sortie dans la cour.
- **Séances associées :** [C2-S02 (Événements de départ)](/cycle-2/c2-s02-evenement-de-depart), [C3-S01](/cycle-3/c3-s01-interface-et-premier-programme), [C3-S08](/cycle-3/c3-s08-messages-et-scenes).

---

## 6. Parallélisme

- **Cycles :** <CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Exécution simultanée ou pseudo-simultanée de plusieurs flux d'instructions au sein d'un même programme.
- **Formulation élève :** _« Plusieurs scripts tournent en même temps (un pour bouger les jambes, un pour avancer, un pour faire de la musique). »_
- **Analogie quotidienne :** Les musiciens d'un orchestre qui jouent chacun leur partition en même temps.
- **Séances associées :** [C3-S02 (Animation et parallélisme)](/cycle-3/c3-s02-animation-et-parallelisme), [C4-S03](/cycle-4/c4-s03-etats-dun-programme).

---

## 7. Boucle définie

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Structure itérative bornée qui répète un bloc d'instructions un nombre de fois déterminé à l'avance (`répéter N fois`).
- **Formulation élève :** _« Répéter exactement N fois une suite de mouvements. »_
- **Analogie quotidienne :** Faire 4 tours de piste de course ou répéter un refrain 3 fois dans une chanson.
- **Séances associées :** [C1-S05 (Répéter)](/cycle-1/c1-s05-repeter), [C2-S05 (Répétition)](/cycle-2/c2-s05-repetition), [C3-S03 (Boucles)](/cycle-3/c3-s03-boucles).

---

## 8. Boucle infinie

- **Cycles :** <CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Structure itérative non bornée qui s'exécute continuellement jusqu'à l'interruption du programme ou le déclenchement d'un événement d'arrêt.
- **Formulation élève :** _« Une répétition sans fin qui surveille le jeu ou anime un personnage pendant toute la partie. »_
- **Analogie quotidienne :** Les aiguilles d'une montre qui tournent en continu ou le battement du cœur.
- **Séances associées :** [C3-S03 (Répéter indéfiniment)](/cycle-3/c3-s03-boucles), [C3-S05 (Surveillance de collision)](/cycle-3/c3-s05-conditions-et-capteurs).

---

## 9. Condition

- **Cycles :** <CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Structure de contrôle alternative qui n'exécute un bloc d'instructions que si une condition logique est évaluée à VRAI (`si / alors / sinon`).
- **Formulation élève :** _« Si la condition est vraie, je fais l'action A, sinon je fais l'action B. »_
- **Analogie quotidienne :** _« S'il pleut, je prends mon parapluie, sinon je mets mes lunettes de soleil. »_
- **Séances associées :** [C2-S09 (Quiz et condition)](/cycle-2/c2-s09-quiz-ou-jeu-simple), [C3-S05 (Conditions et capteurs)](/cycle-3/c3-s05-conditions-et-capteurs).

---

## 10. Booléen

- **Cycles :** <CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Type de données élémentaire ne pouvant prendre que deux valeurs distinctes : `VRAI` (True) ou `FAUX` (False).
- **Formulation élève :** _« Une question à laquelle on ne peut répondre que par OUI ou par NON. »_
- **Analogie quotidienne :** Un interrupteur : allumé ou éteint.
- **Séances associées :** [C4-S02 (Logique booléenne ET, OU, NON)](/cycle-4/c4-s02-logique-booleenne).

---

## 11. Variable

- **Cycles :** <CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Emplacement mémoire nommé permettant de stocker, lire et modifier une valeur (numérique, texte ou booléenne) au cours de l'exécution.
- **Formulation élève :** _« C'est une boîte étiquetée qui garde en mémoire un nombre qui peut changer (comme le score ou les vies). »_
- **Analogie quotidienne :** Le tableau d'affichage des scores d'un match de basket.
- **Séances associées :** [C3-S06 (Variables et score)](/cycle-3/c3-s06-variables), [C4-S04 (Portée locale/globale)](/cycle-4/c4-s04-variables-locales-et-globales).

---

## 12. Liste

- **Cycles :** <CycleBadge cycle="4" />
- **Définition adulte :** Structure de données ordonnée (tableau 1D) stockant une séquence dynamique d'éléments accessibles par leur index numérique.
- **Formulation élève :** _« Un carnet de notes ou un tableau numéroté de 1 à N contenant plusieurs informations dans une seule variable. »_
- **Analogie quotidienne :** La liste des courses ou le classement des joueurs.
- **Séances associées :** [C4-S05 (Listes et tableaux)](/cycle-4/c4-s05-listes), [C4-S06 (Recherche et statistiques)](/cycle-4/c4-s06-recherche-et-statistiques).

---

## 13. Coordonnées

- **Cycles :** <CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Couple de valeurs numériques (X, Y) définissant la position spatiale exacte d'un point ou d'un sprite dans un repère cartésien orthogonal.
- **Formulation élève :** _« L'adresse exacte du personnage sur la scène : X pour la position horizontale (gauche/droite) et Y pour la hauteur (bas/haut). »_
- **Analogie quotidienne :** Le jeu de la bataille navale (ex: case B4) ou l'adresse GPS d'une maison.
- **Séances associées :** [C2-S03 (Quadrillage)](/cycle-2/c2-s03-mouvement-et-orientation), [C3-S04 (Axes X-Y)](/cycle-3/c3-s04-coordonnees).

<div style={{ textAlign: "center", margin: "1rem 0" }}>
  <img
    src="/images/c3-xy-grid-repere.svg"
    alt="Repère cartésien Scratch 480x360"
    style={{
      maxWidth: "100%",
      maxHeight: "280px",
      borderRadius: "8px",
      border: "1px solid #e2e8f0",
    }}
  />
</div>

---

## 14. Orientation

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Direction angulaire vers laquelle pointe un sprite, exprimée en degrés (0° haut, 90° droite, 180° bas, -90° gauche).
- **Formulation élève :** _« Le regard du personnage : vers où il est tourné avant d'avancer. »_
- **Analogie quotidienne :** L'aiguille d'une boussole qui pointe vers le Nord, le Sud, l'Est ou l'Ouest.
- **Séances associées :** [C2-S03 (Orientation)](/cycle-2/c2-s03-mouvement-et-orientation), [C3-S10 (Géométrie et angles)](/cycle-3/c3-s10-geometrie-avec-le-stylo).

---

## 15. Message

- **Cycles :** <CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Mécanisme de communication inter-processus permettant à un lutin de diffuser un signal nommé reçu par tous les autres.
- **Formulation élève :** _« Un appel par talkie-walkie : un personnage crie un message et tous ceux qui écoutent ce message réagissent ensemble. »_
- **Analogie quotidienne :** Le starter au départ d'une course : le coup de pistolet donne le départ à tous les coureurs.
- **Séances associées :** [C2-S06 (Messages et synchronisation)](/cycle-2/c2-s06-messages-et-synchronisation), [C3-S08 (Messages et scènes)](/cycle-3/c3-s08-messages-et-scenes).

---

## 16. Collision

- **Cycles :** <CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Détection géométrique de contact ou de chevauchement entre la boîte englobante de deux sprites ou avec une couleur spécifique.
- **Formulation élève :** _« Le moment où deux personnages se touchent ou quand le joueur cogne un mur. »_
- **Analogie quotidienne :** Les autos-tamponneuses ou la balle qui touche la raquette au tennis de table.
- **Séances associées :** [C3-S05 (Capteurs de contact)](/cycle-3/c3-s05-conditions-et-capteurs), [C3-S12 (Collecte)](/cycle-3/c3-s12-projet-final).

---

## 17. Aléatoire

- **Cycles :** <CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Génération pseudo-aléatoire d'un nombre au sein d'un intervalle numérique [Min; Max] pour introduire l'indéterminisme.
- **Formulation élève :** _« Le hasard : l'ordinateur tire un nombre au sort entre deux limites. »_
- **Analogie quotidienne :** Tirer une carte au hasard dans un jeu ou lancer un dé à 6 faces.
- **Séances associées :** [C3-S09 (Nombres aléatoires)](/cycle-3/c3-s09-aleatoire), [C4-S09 (Simulation)](/cycle-4/c4-s09-simulation-et-aleatoire).

---

## 18. Clone

- **Cycles :** <CycleBadge cycle="4" />
- **Définition adulte :** Instanciation dynamique en mémoire d'une copie temporaire d'un sprite prototype partageant ses scripts mais possédant ses propres variables locales.
- **Formulation élève :** _« Une copie jumelle créée pendant la partie qui vit sa vie et disparaît dès qu'elle a fini sa mission. »_
- **Analogie quotidienne :** Fabriquer des biscuits avec le même emporte-pièce : chaque biscuit est identique au départ mais se déplace indépendamment sur la plaque.
- **Séances associées :** [C4-S08 (Clones et particules)](/cycle-4/c4-s08-clones), [C4-S09](/cycle-4/c4-s09-simulation-et-aleatoire).

<div style={{ textAlign: "center", margin: "1rem 0" }}>
  <img
    src="/images/c4-clones-cycle-vie.svg"
    alt="Cycle de vie des clones dans Scratch"
    style={{
      maxWidth: "100%",
      maxHeight: "280px",
      borderRadius: "8px",
      border: "1px solid #e2e8f0",
    }}
  />
</div>

---

## 19. Procédure / Bloc personnalisé

- **Cycles :** <CycleBadge cycle="4" />
- **Définition adulte :** Sous-programme nommé et réutilisable encapsulant une séquence d'instructions pour décomposer la complexité et factoriser le code.
- **Formulation élève :** _« Créer son propre bloc d'action pour ne pas réécrire plusieurs fois la même chose. »_
- **Analogie quotidienne :** Une recette abrégée : au lieu de répéter les 10 étapes de la pâte brisée, la recette indique simplement _« Préparer une pâte brisée »_.
- **Séances associées :** [C4-S07 (Blocs personnalisés)](/cycle-4/c4-s07-blocs-personnalises).

---

## 20. Paramètre

- **Cycles :** <CycleBadge cycle="4" />
- **Définition adulte :** Donnée d'entrée variable transmise à une procédure lors de son appel pour adapter dynamiquement son comportement interne.
- **Formulation élève :** _« L'ingrédient qu'on donne au bloc personnalisé pour qu'il s'adapte (ex : la taille du saut ou la couleur du dessin). »_
- **Analogie quotidienne :** Régler le thermostat d'un four : la fonction reste « chauffer », mais on lui donne la température voulue en paramètre.
- **Séances associées :** [C4-S07 (Blocs personnalisés et paramètres)](/cycle-4/c4-s07-blocs-personnalises).

---

## 21. État

- **Cycles :** <CycleBadge cycle="4" />
- **Définition adulte :** Configuration instantanée des variables et modes de fonctionnement d'un automate (machine à états finis) déterminant les actions autorisées.
- **Formulation élève :** _« La phase dans laquelle se trouve le jeu à un moment précis (dans le menu, en train de jouer, en pause, ou en écran de fin). »_
- **Analogie quotidienne :** Les feux tricolores : un feu est soit Vert, soit Orange, soit Rouge.
- **Séances associées :** [C4-S03 (Machine à états)](/cycle-4/c4-s03-etats-dun-programme), [C4-S12](/cycle-4/c4-s12-projet-final-et-soutenance).

<div style={{ textAlign: "center", margin: "1rem 0" }}>
  <img
    src="/images/c4-machine-etats-schema.svg"
    alt="Machine à états finis dans Scratch"
    style={{
      maxWidth: "100%",
      maxHeight: "280px",
      borderRadius: "8px",
      border: "1px solid #e2e8f0",
    }}
  />
</div>

---

## 22. Test

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Processus méthodique d'exécution d'un programme avec des jeux de données d'entrée contrôlés pour valider la conformité aux spécifications.
- **Formulation élève :** _« Essayer le programme pour vérifier s'il fait exactement ce qu'on voulait et trouver s'il y a des pièges. »_
- **Analogie quotidienne :** Le contrôle technique d'une voiture ou l'essayage d'un vêtement en cabine.
- **Séances associées :** [C2-S08](/cycle-2/c2-s08-debogage-guide), [C3-S11](/cycle-3/c3-s11-debogage-methodique), [C4-S10 (Plan de tests et recette)](/cycle-4/c4-s10-tests).

---

## 23. Débogage

- **Cycles :** <CycleBadge cycle="1" /><CycleBadge cycle="2" /><CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Démarche d'analyse et d'investigation consistant à identifier, localiser, isoler et corriger une anomalie (bug) dans un algorithme ou son implémentation.
- **Formulation élève :** _« Devenir le dépanneur de son propre programme : trouver pourquoi ça coince et réparer sans tout casser. »_
- **Analogie quotidienne :** Le médecin qui pose un diagnostic en observant les symptômes avant de prescrire le remède ciblé.
- **Séances associées :** [C1-S04 (Corriger une erreur)](/cycle-1/c1-s04-reperer-et-corriger-une-erreur), [C2-S08 (Débogage guidé)](/cycle-2/c2-s08-debogage-guide), [C3-S11 (Débogage méthodique)](/cycle-3/c3-s11-debogage-methodique).

---

## 24. Décomposition & Modélisation

- **Cycles :** <CycleBadge cycle="3" /><CycleBadge cycle="4" />
- **Définition adulte :** Capacité de pensée computationnelle consistant à diviser un problème complexe en sous-problèmes élémentaires indépendants et à en concevoir un modèle simplifié.
- **Formulation élève :** _« Découper un grand projet difficile en plusieurs petites tâches faciles à réaliser l'une après l'autre. »_
- **Analogie quotidienne :** Organiser une grande fête : séparer la musique, le gâteau, les invitations et la décoration.
- **Séances associées :** [C4-S09 (Simulation)](/cycle-4/c4-s09-simulation-et-aleatoire), [C4-S11 (Conception collaborative)](/cycle-4/c4-s11-conception-collaborative), [C4-S12 (Projet final)](/cycle-4/c4-s12-projet-final-et-soutenance).