# Portail pédagogique Scratch

import { CycleBadge } from "../src/components/CycleBadge";
import { GettingStartedGuide } from "../src/components/GettingStartedGuide";
import { Mermaid } from "../src/components/Mermaid";
import { TeacherDiagnostic } from "../src/components/TeacherDiagnostic";

Bienvenue sur le portail francophone de ressources et progressions pédagogiques pour enseigner la pensée algorithmique de la maternelle au collège.

<GettingStartedGuide />

<TeacherDiagnostic />

<Mermaid
  title="Continuité Pédagogique de l'Informatique (Cycles 1 à 4)"
  caption="Vue d'ensemble de la progression didactique : du corps à la tablette, puis aux blocs et au code textuel."
  chart={`graph LR
    subgraph C1["🟡 Cycle 1 (Maternelle)"]
      direction TB
      C1_1["1. Motricité & Corps"] --> C1_2["2. Cartes & Quadrillage au sol"] --> C1_3["3. ScratchJr sur Tablette"]
    end
    subgraph C2["🟢 Cycle 2 (Élémentaire)"]
      direction TB
      C2_1["1. ScratchJr (CP-CE1)"] --> C2_2["2. Transition Blocs Verticaux"] --> C2_3["3. Clavier & Événements (CE2)"]
    end
    subgraph C3["🔵 Cycle 3 (Consolidation)"]
      direction TB
      C3_1["1. Repère cartésien (X, Y)"] --> C3_2["2. Variables & Score"] --> C3_3["3. Jeu complet 30s & Stylo"]
    end
    subgraph C4["🟣 Cycle 4 (Collège)"]
      direction TB
      C4_1["1. Logique booléenne & Clones"] --> C4_2["2. Listes & Machines à états"] --> C4_3["3. Passerelle vers Python"]
    end
    C1 --> C2 --> C3 --> C4
  `}
/>

<div
  style={{
    backgroundColor: "var(--sp-obj-bg, #EFF6FF)",
    border: "2px solid var(--sp-obj-border, #3B82F6)",
    borderRadius: "12px",
    padding: "1.25rem",
    margin: "1.5rem 0",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    flexWrap: "wrap",
    gap: "1rem",
  }}
>
  <div>
    <h3
      style={{
        margin: 0,
        color: "var(--sp-obj-title, #1E40AF)",
        fontSize: "1.25rem",
        fontWeight: 800,
      }}
    >
      🚀 Espace Élèves & Activités
    </h3>
    <p
      style={{ margin: "0.25rem 0 0 0", color: "var(--sp-obj-text, #1E3A8A)", fontSize: "0.95rem" }}
    >
      Découvre les <strong>24 activités interactives prêtes à démarrer</strong> avec projets déjà
      préparés et corrigés masqués.
    </p>
  </div>
  <a
    href="/activites"
    style={{
      backgroundColor: "#2563EB",
      color: "#FFFFFF",
      padding: "0.65rem 1.25rem",
      borderRadius: "8px",
      textDecoration: "none",
      fontWeight: 800,
      fontSize: "0.95rem",
      boxShadow: "0 2px 4px rgba(37, 99, 235, 0.2)",
    }}
  >
    Explorer les activités →
  </a>
</div>

---

## 🎯 Choisir un cycle

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

<div
  style={{
    border: "1px solid var(--sp-card-border, #E5E7EB)",
    borderRadius: "8px",
    padding: "1.25rem",
    backgroundColor: "var(--sp-card-bg, #FFFDF5)",
    boxShadow: "var(--sp-card-shadow, 0 1px 3px rgba(0,0,0,0.05))",
  }}
>
  <h3>
    <CycleBadge cycle="1" /> Maternelle
  </h3>
  <p>
    <strong>PS, MS, GS (3 à 6 ans)</strong>
  </p>
  <p>
    Activités corporelles, motrices et débranchées sans écran, puis découverte accompagnée de
    ScratchJr en Grande Section.
  </p>
  <a href="/cycle-1" style={{ color: "var(--sp-tip-title, #D97706)", fontWeight: 600 }}>
    Découvrir le Cycle 1 →
  </a>
</div>

<div
  style={{
    border: "1px solid var(--sp-card-border, #E5E7EB)",
    borderRadius: "8px",
    padding: "1.25rem",
    backgroundColor: "var(--sp-card-bg, #F6FEF6)",
    boxShadow: "var(--sp-card-shadow, 0 1px 3px rgba(0,0,0,0.05))",
  }}
>
  <h3>
    <CycleBadge cycle="2" /> Élémentaire
  </h3>
  <p>
    <strong>CP, CE1, CE2 (6 à 9 ans)</strong>
  </p>
  <p>Progression avec ScratchJr puis transition progressive vers Scratch en CE2.</p>
  <a href="/cycle-2" style={{ color: "var(--sp-tryit-title, #15803D)", fontWeight: 600 }}>
    Découvrir le Cycle 2 →
  </a>
</div>

<div
  style={{
    border: "1px solid var(--sp-card-border, #E5E7EB)",
    borderRadius: "8px",
    padding: "1.25rem",
    backgroundColor: "var(--sp-card-bg, #F0F7FF)",
    boxShadow: "var(--sp-card-shadow, 0 1px 3px rgba(0,0,0,0.05))",
  }}
>
  <h3>
    <CycleBadge cycle="3" /> Consolidation
  </h3>
  <p>
    <strong>CM1, CM2, 6e (9 à 12 ans)</strong>
  </p>
  <p>
    Scratch et pensée algorithmique structurée : boucles, conditions, variables et projet jeu de
    collecte.
  </p>
  <a href="/cycle-3" style={{ color: "var(--sp-obj-title, #1D4ED8)", fontWeight: 600 }}>
    Découvrir le Cycle 3 →
  </a>
</div>

<div
  style={{
    border: "1px solid var(--sp-card-border, #E5E7EB)",
    borderRadius: "8px",
    padding: "1.25rem",
    backgroundColor: "var(--sp-card-bg, #FAF5FF)",
    boxShadow: "var(--sp-card-shadow, 0 1px 3px rgba(0,0,0,0.05))",
  }}
>
  <h3>
    <CycleBadge cycle="4" /> Approfondissement
  </h3>
  <p>
    <strong>5e, 4e, 3e (12 à 15 ans)</strong>
  </p>
  <p>Scratch avancé : listes, clones, modélisation/simulation et transition vers Python.</p>
  <a href="/cycle-4" style={{ color: "var(--sp-bonus-title, #7E22CE)", fontWeight: 600 }}>
    Découvrir le Cycle 4 →
  </a>
</div>

</div>

---

## ⚡ Accès direct

- 📦 [**Guide d'installation**](/installation) : Installer ScratchJr et Scratch sans compte élève.
- 🎓 **Formations Enseignants** : Guides d'animation et conducteurs pour [Cycle 1 (Maternelle - PS, MS, GS)](/formation-cycle-1), [Cycle 2 (Élémentaire - CP, CE1, CE2)](/formation-cycle-2), [Cycle 3 (Consolidation - CM1, CM2, 6e)](/formation-cycle-3) et [Cycle 4 (Collège - 5e, 4e, 3e)](/formation-cycle-4).
- 🧩 [**Référentiel des 24 notions**](/notions) : Définitions, analogies et exemples de code.

---

> _Note : Ce portail est une ressource pédagogique indépendante. Scratch est un projet du Scratch Foundation et du MIT Media Lab._