commit 1146b78b2b2661b8d270567e3cb4aa6cecc3b89d
Author: sebvtl <sebvtl@noreply.localhost>
Date:   Tue May 26 23:39:52 2026 +0000

    Téléverser les fichiers vers "/"

diff --git a/slide_schema_5UF_IA-PRO.html b/slide_schema_5UF_IA-PRO.html
new file mode 100644
index 0000000..156904a
--- /dev/null
+++ b/slide_schema_5UF_IA-PRO.html
@@ -0,0 +1,247 @@
+
+<style>
+  .slide-wrap { font-family: var(--font-sans); max-width: 720px; margin: 0 auto; }
+  .slide-surface {
+    background: var(--color-background-primary);
+    border: 0.5px solid var(--color-border-tertiary);
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+  }
+  .slide-topbar {
+    background: var(--color-background-secondary);
+    border-bottom: 0.5px solid var(--color-border-tertiary);
+    padding: 10px 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .slide-kicker {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    letter-spacing: 0.04em;
+  }
+  .slide-badge {
+    font-size: 11px;
+    font-weight: 500;
+    color: #534AB7;
+    background: #EEEDFE;
+    border: 0.5px solid #AFA9EC;
+    border-radius: 20px;
+    padding: 3px 10px;
+  }
+  .slide-body { padding: 0 4px 4px; }
+  .uf-detail-panel {
+    background: var(--color-background-secondary);
+    border-top: 0.5px solid var(--color-border-tertiary);
+    padding: 14px 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 10px;
+    min-height: 80px;
+    transition: opacity 0.2s;
+  }
+  .dp-col { display: flex; flex-direction: column; gap: 3px; }
+  .dp-label {
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text-tertiary);
+  }
+  .dp-value {
+    font-size: 12.5px;
+    color: var(--color-text-primary);
+    line-height: 1.5;
+  }
+  .dp-tag {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 500;
+    background: #EEEDFE;
+    color: #3C3489;
+    border-radius: 4px;
+    padding: 2px 7px;
+  }
+</style>
+
+<div class="slide-wrap">
+  <h2 style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">Schéma des 5 unités de formation de la formation IA-PRO, avec progression du panorama vers l'éthique</h2>
+  <div class="slide-surface">
+    <div class="slide-topbar">
+      <span class="slide-kicker">Formation IA-PRO — Architecture pédagogique</span>
+      <span class="slide-badge">5 unités de formation</span>
+    </div>
+
+    <div class="slide-body">
+      <svg width="100%" viewBox="0 0 680 310" role="img">
+        <title>Les 5 unités de formation IA-PRO</title>
+        <desc>Progression linéaire de gauche à droite : UF1 Présentation IA générative, UF2 Rédaction et prompt engineering, UF3 Confidentialité, UF4 Contenus inclusifs, UF5 Éthique et impacts sociaux.</desc>
+        <defs>
+          <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+            <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </marker>
+        </defs>
+
+        <!-- Arc de progression haut -->
+        <text class="ts" x="340" y="30" text-anchor="middle" style="fill:var(--color-text-tertiary);font-size:11px;letter-spacing:0.08em;">Du panorama à l'éthique</text>
+        <path d="M 76 44 Q 340 10 604 44" fill="none" stroke="#AFA9EC" stroke-width="0.5" stroke-dasharray="4 3" marker-end="url(#arrow)"/>
+
+        <!-- Ligne de certification en bas -->
+        <text class="ts" x="340" y="290" text-anchor="middle" style="fill:#534AB7;font-size:11px;">Fil rouge certification · C1 à C6 · toutes UF</text>
+        <line x1="76" y1="278" x2="604" y2="278" stroke="#AFA9EC" stroke-width="0.5" stroke-dasharray="3 3"/>
+
+        <!-- UF1 -->
+        <g class="node c-purple" onclick="selectUF(0)" id="uf1-g">
+          <rect x="40" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
+          <text class="th" x="94" y="82" text-anchor="middle" dominant-baseline="central">UF1</text>
+          <text class="ts" x="94" y="105" text-anchor="middle" dominant-baseline="central">Présentation</text>
+          <text class="ts" x="94" y="121" text-anchor="middle" dominant-baseline="central">IA générative</text>
+          <rect x="58" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
+          <text class="ts" x="94" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
+          <rect x="58" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="94" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Classe inversée</text>
+          <rect x="58" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="94" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">TP binômes</text>
+        </g>
+
+        <!-- Flèche 1→2 -->
+        <line x1="151" y1="155" x2="165" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
+
+        <!-- UF2 -->
+        <g class="node c-purple" onclick="selectUF(1)" id="uf2-g">
+          <rect x="167" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
+          <text class="th" x="221" y="82" text-anchor="middle" dominant-baseline="central">UF2</text>
+          <text class="ts" x="221" y="105" text-anchor="middle" dominant-baseline="central">Rédaction &amp;</text>
+          <text class="ts" x="221" y="121" text-anchor="middle" dominant-baseline="central">prompt eng.</text>
+          <rect x="185" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
+          <text class="ts" x="221" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">4 chapitres</text>
+          <rect x="185" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="221" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Démo live</text>
+          <rect x="185" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="221" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Ateliers</text>
+        </g>
+
+        <!-- Flèche 2→3 -->
+        <line x1="278" y1="155" x2="292" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
+
+        <!-- UF3 -->
+        <g class="node c-purple" onclick="selectUF(2)" id="uf3-g">
+          <rect x="294" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
+          <text class="th" x="348" y="82" text-anchor="middle" dominant-baseline="central">UF3</text>
+          <text class="ts" x="348" y="105" text-anchor="middle" dominant-baseline="central">Confidentialité</text>
+          <text class="ts" x="348" y="121" text-anchor="middle" dominant-baseline="central">&amp; sécurité</text>
+          <rect x="312" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
+          <text class="ts" x="348" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
+          <rect x="312" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="348" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">RGPD · IA Act</text>
+          <rect x="312" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="348" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Cas pratiques</text>
+        </g>
+
+        <!-- Flèche 3→4 -->
+        <line x1="405" y1="155" x2="419" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
+
+        <!-- UF4 -->
+        <g class="node c-purple" onclick="selectUF(3)" id="uf4-g">
+          <rect x="421" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
+          <text class="th" x="475" y="82" text-anchor="middle" dominant-baseline="central">UF4</text>
+          <text class="ts" x="475" y="105" text-anchor="middle" dominant-baseline="central">Contenus</text>
+          <text class="ts" x="475" y="121" text-anchor="middle" dominant-baseline="central">inclusifs</text>
+          <rect x="439" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
+          <text class="ts" x="475" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
+          <rect x="439" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="475" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Accessibilité</text>
+          <rect x="439" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="475" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Production IA</text>
+        </g>
+
+        <!-- Flèche 4→5 -->
+        <line x1="532" y1="155" x2="546" y2="155" class="arr" marker-end="url(#arrow)" stroke="#AFA9EC"/>
+
+        <!-- UF5 -->
+        <g class="node c-purple" onclick="selectUF(4)" id="uf5-g">
+          <rect x="548" y="55" width="108" height="200" rx="8" stroke-width="0.5"/>
+          <text class="th" x="602" y="82" text-anchor="middle" dominant-baseline="central">UF5</text>
+          <text class="ts" x="602" y="105" text-anchor="middle" dominant-baseline="central">Éthique &amp;</text>
+          <text class="ts" x="602" y="121" text-anchor="middle" dominant-baseline="central">impacts sociaux</text>
+          <rect x="566" y="145" width="72" height="22" rx="4" fill="#3C3489" opacity="0.25"/>
+          <text class="ts" x="602" y="160" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">2 chapitres</text>
+          <rect x="566" y="174" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="602" y="189" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Études de cas</text>
+          <rect x="566" y="203" width="72" height="22" rx="4" fill="#3C3489" opacity="0.18"/>
+          <text class="ts" x="602" y="218" text-anchor="middle" dominant-baseline="central" style="font-size:11px;">Prise de recul</text>
+        </g>
+
+      </svg>
+    </div>
+
+    <!-- Panneau de détail dynamique -->
+    <div class="uf-detail-panel" id="detail-panel">
+      <div class="dp-col">
+        <span class="dp-label">Intention pédagogique</span>
+        <span class="dp-value" id="dp-intent" style="color:var(--color-text-tertiary);font-style:italic;">Cliquez sur une UF pour voir le détail</span>
+      </div>
+      <div class="dp-col">
+        <span class="dp-label">Méthodes clés</span>
+        <span class="dp-value" id="dp-methods"></span>
+      </div>
+      <div class="dp-col">
+        <span class="dp-label">Compétences visées</span>
+        <span class="dp-value" id="dp-skills"></span>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<script>
+const DATA = [
+  {
+    intent: "Créer le contexte, ancrer l'IA dans le réel professionnel de l'apprenant. Partir de ce qu'il connaît déjà.",
+    methods: "Classe inversée · TP binômes · Analyse de contexte professionnel",
+    skills: "C1 – Identifier les usages IA pertinents pour son métier"
+  },
+  {
+    intent: "Cœur pratique de la formation. Faire expérimenter le prompt engineering et la création de contenu augmenté.",
+    methods: "Démo live · Ateliers guidés · Micro-tâches professionnelles",
+    skills: "C2 – Rédiger des prompts · C3 – Produire du contenu visuel"
+  },
+  {
+    intent: "Poser le cadre légal et éthique sans freiner la pratique. Gérer les risques avec lucidité.",
+    methods: "Études de cas RGPD · Quiz décisionnels · Mise en situation",
+    skills: "C4 – Sécuriser l'usage de l'IA en contexte professionnel"
+  },
+  {
+    intent: "Produire avec l'IA sans exclure. Intégrer l'accessibilité dès la conception du contenu.",
+    methods: "Production commentée · Révision par pairs · Checklist accessibilité",
+    skills: "C5 – Concevoir des contenus IA inclusifs et accessibles"
+  },
+  {
+    intent: "Prendre du recul sur l'IA. Ancrer la pratique dans une réflexion sur les impacts sociaux et les responsabilités.",
+    methods: "Études de cas métier · Débat structuré · Synthèse personnelle",
+    skills: "C6 – Adopter une posture éthique face à l'IA"
+  }
+];
+
+let selected = -1;
+
+function selectUF(idx) {
+  const ids = ['uf1-g','uf2-g','uf3-g','uf4-g','uf5-g'];
+  ids.forEach((id, i) => {
+    const g = document.getElementById(id);
+    const rect = g ? g.querySelector('rect') : null;
+    if (rect) {
+      rect.style.strokeWidth = (i === idx) ? '2' : '0.5';
+    }
+  });
+
+  const d = DATA[idx];
+  document.getElementById('dp-intent').textContent = d.intent;
+  document.getElementById('dp-intent').style.fontStyle = 'normal';
+  document.getElementById('dp-intent').style.color = 'var(--color-text-primary)';
+  document.getElementById('dp-methods').textContent = d.methods;
+  document.getElementById('dp-skills').innerHTML = '<span class="dp-tag">' + d.skills + '</span>';
+  selected = idx;
+}
+</script>