---
tags: Hybridation, Formation
title: Formation eafc Hybridation présentation
author: CHAZEAUX Guillaume
---
<div class="header">
<i class="fa fa-graduation-cap"></i> Formation à l’hybridation pour formateurs EAFC <br>
<small>Session 2025</small>
</div>
<div class="navbar">
<a href="#calendrier"><i class="fa fa-calendar"></i> Calendrier</a>
<a href="#objectif"><i class="fa fa-bullseye"></i> Objectif</a>
<a href="#Time-line"><i class="fa fa-map-marker"></i> Time-line</a>
<a href="#seance1"><i class="fa fa-laptop"></i> Visio 1</a>
<a href="#hybride"><i class="fa fa-random"></i> Hybride</a>
<a href="#seance2"><i class="fa fa-comments"></i> Visio 2</a>
<a href="#accompagnement"><i class="fa fa-handshake-o"></i> Accompagnement</a>
<a href="#competences"><i class="fa fa-certificate"></i> Compétences</a>
</div>
<a id="calendrier"></a>
<h2><i class="fa fa-calendar"></i> Calendrier</h2>
<table>
<tr>
<th>Étape</th>
<th>Date</th>
<th>Modalité</th>
</tr>
<tr>
<td>Séance 1 (Visio)</td>
<td>Mardi 17 juin 2025 (après-midi)</td>
<td>Distanciel synchrone</td>
</tr>
<tr>
<td>Formation hybride (asynchrone sur Magistère 2)</td>
<td>Du 18 juin au 1er juillet 2025</td>
<td>Distanciel asynchrone</td>
</tr>
<tr>
<td>Séance 2 (Visio de retour d'expérience)</td>
<td>Mardi 1er juillet 2025 (après-midi)</td>
<td>Distanciel synchrone</td>
</tr>
</table>
<a id="objectif"></a>
<h2><i class="fa fa-bullseye"></i> Objectif général</h2>
<p>
Accompagner des formateurs expérimentés, mais novices en hybridation numérique, à concevoir et animer des parcours hybrides, tout en développant des compétences numériques et pédagogiques en lien avec les référentiels nationaux et les apports des sciences cognitives.
</p>
<a id="competences"></a>
<h2><i class="fa fa-certificate"></i> Compétences visées</h2>
<ul>
<li><strong>CRCN</strong> : Recherche, création et partage de contenus numériques, collaboration à distance, protection des données.</li>
<li><strong>CRCN Édu</strong> : Intégration du numérique dans la pédagogie, individualisation, éducation à un usage responsable.</li>
<li><strong>Référentiel métiers</strong> : Conception de situations d’enseignement différenciées, culture numérique, analyse réflexive de ses pratiques.</li>
</ul>
<a id="seance1"></a>
<h2><i class="fa fa-laptop"></i> Séance 1 – Visio du 17 juin 2025</h2>
<h3>Apports descendants : Fondements et enjeux de l’hybridation</h3>
<ul>
<li><strong>Objectifs :</strong>
<ul>
<li>Comprendre les fondements, enjeux et modalités de l’hybridation pédagogique.</li>
<li>Identifier les bénéfices, défis et impacts sur la posture professionnelle.</li>
<li>Relier l’hybridation aux compétences professionnelles et aux sciences cognitives.</li>
</ul>
</li>
</ul>
<div class="highlight">
<strong>Déroulé :</strong>
<ul>
<li><strong>Définition et principes de l’hybridation</strong> <br>
L’enseignement hybride combine des activités d’apprentissage en présence, en temps réel (synchrone) et à distance, en mode synchrone ou asynchrone. Il s’agit d’organiser des parcours alternant cours, travaux individuels/collaboratifs et échanges numériques.
</li>
<li><strong>Enjeux et plus-values pédagogiques</strong>
<ul>
<li>Différenciation et personnalisation</li>
<li>Modularité et flexibilité</li>
<li>Activité et engagement de l’apprenant</li>
<li>Continuité pédagogique</li>
</ul>
</li>
<li><strong>Défis et points de vigilance</strong>
<ul>
<li>Scénarisation rigoureuse</li>
<li>Accompagnement et suivi</li>
<li>Gestion du temps et de l’espace</li>
<li>Accessibilité et équité</li>
</ul>
</li>
<li><strong>Compétences professionnelles mobilisées</strong> : CRCN, CRCN Édu, Référentiel métiers</li>
<li><strong>Apports des sciences cognitives</strong>
<ul>
<li>Attention et engagement (variation des modalités)</li>
<li>Feedback et consolidation (retours réguliers, espacement)</li>
<li>Métacognition (verbalisation, retour d’expérience)</li>
</ul>
</li>
</ul>
</div>
<p>
<strong>Méthode :</strong> Exposé interactif, échanges sur les pratiques et représentations, analyse de scénarios hybrides, identification collective des leviers et freins.
</p>
<a id="hybride"></a>
<h2><i class="fa fa-random"></i> Séquence hybride sur Magistère 2 <br><small>Du 18 juin au 1er juillet 2025</small></h2>
<ul>
<li><strong>Objectifs :</strong>
<ul>
<li>Explorer de façon exhaustive les possibilités de la plateforme Magistère 2.</li>
<li>S’approprier les outils numériques pour concevoir une séquence hybride et expérimenter différentes modalités d’apprentissage à distance.</li>
</ul>
</li>
<li><strong>Activités à réaliser :</strong>
<ul>
<li>Visionnage de capsules vidéo de prise en main des outils et fonctionnalités.</li>
<li>Réalisation de quiz et questionnaires pour s’auto-évaluer.</li>
<li>Participation à un forum thématique pour échanger sur les pratiques, poser des questions, partager des ressources.</li>
<li>Création d’une activité (ex : dépôt de devoir, quiz, sondage) pour expérimenter la scénarisation d’un module hybride.</li>
<li>Test d’une classe virtuelle intégrée pour simuler une séance synchrone à distance.</li>
</ul>
</li>
<li><strong>Accompagnement :</strong>
<ul>
<li>Utilisation du salon Tchap et du forum pour poser des questions, demander de l’aide, partager des difficultés ou des réussites.</li>
<li>Disponibilité des formateurs pour répondre et accompagner.</li>
</ul>
</li>
<li><strong>Compétences mobilisées :</strong> CRCN, CRCN Édu, Référentiel métiers</li>
<li><strong>Liens avec les sciences cognitives :</strong> Engagement actif, feedback immédiat, consolidation des acquis par la pratique et l’alternance des modalités.</li>
</ul>
<a id="seance2"></a>
<h2><i class="fa fa-comments"></i> Séance 2 – Visio du 1er juillet 2025</h2>
<h3>Retour d’expérience, échanges et mutualisation</h3>
<ul>
<li><strong>Objectifs :</strong>
<ul>
<li>Partager les expériences vécues lors de l’exploration de la plateforme et de la réalisation des activités.</li>
<li>Identifier collectivement les réussites, difficultés et axes d’amélioration.</li>
<li>Répondre aux questions, mutualiser les bonnes pratiques et co-construire des solutions pour la mise en œuvre de l’hybridation.</li>
</ul>
</li>
</ul>
<div class="highlight">
<strong>Déroulé :</strong>
<ul>
<li>Tour de table : partage d’expériences, réussites, difficultés, questionnements.</li>
<li>Analyse collective des usages possibles de l’hybridation dans différents contextes.</li>
<li>Bonnes pratiques pour maintenir l’engagement et la motivation des apprenants à distance.</li>
<li>Conseils pour l’évaluation et le suivi des apprenants en mode hybride.</li>
<li>Identification des besoins de formation complémentaires et des ressources disponibles.</li>
</ul>
</div>
<ul>
<li><strong>Compétences mobilisées :</strong> CRCN, CRCN Édu, Référentiel métiers</li>
<li><strong>Liens avec les sciences cognitives :</strong> Apprentissage par le retour d’expérience (métacognition), renforcement de la mémorisation par la verbalisation, valorisation de l’erreur comme levier d’apprentissage.</li>
</ul>
<a id="accompagnement"></a>
<h2><i class="fa fa-handshake-o"></i> Dispositifs d’accompagnement complémentaires</h2>
<ul>
<li><strong>Salon Tchap</strong> : Espace d’échange rapide pour questions/réponses entre stagiaires et formateurs durant la phase à distance.</li>
<li><strong>Forum Magistère 2</strong> : Zone de discussion thématique, partage de ressources, retours d’expérience, entraide entre pairs.</li>
</ul>
<div class="info">
<strong>Synthèse</strong><br>
Cette formation permet aux formateurs de :
<ul>
<li>S’approprier l’hybridation pédagogique et numérique.</li>
<li>Développer des compétences essentielles (CRCN, CRCN Édu, référentiel métiers).</li>
<li>S’appuyer sur les sciences cognitives pour maximiser l’efficacité, l’engagement et la réussite des apprenants dans des dispositifs hybrides.</li>
</ul>
</div>
<p>
<strong>Contact formateurs</strong> : [à compléter]<br>
<strong>Lien Magistère 2</strong> : [à compléter]<br>
<strong>Salon Tchap</strong> : [à compléter]
</p>
<!-- Tableau des applications -->
<div class="container">
<h1>Applications Magistère 2 & Modules H5P</h1>
<h2>Tutoriels officiels, exemples et apports pédagogiques</h2>
<table>
<thead>
<tr>
<th>Catégorie</th>
<th>Application / Module</th>
<th>Explication</th>
<th>Exemple</th>
<th>Plus-value</th>
<th>Moins-value</th>
<th>Apport neurosciences</th>
<th>Tutoriel</th>
</tr>
</thead>
<tbody>
<!-- Collaborative -->
<tr>
<td class="collab" rowspan="4">🟦 Collaborative</td>
<td>Forum 💬</td>
<td>Échanges asynchrones, discussions thématiques</td>
<td class="ex">Débat sur une pratique professionnelle</td>
<td class="plus">Favorise la socialisation, trace écrite</td>
<td class="moins">Peut devenir confus, modération nécessaire</td>
<td>Renforcement social, mémoire à long terme</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Forum" target="_blank">Forum Magistère</a></td>
</tr>
<tr>
<td>Etherpad 📝</td>
<td>Écriture collaborative en temps réel</td>
<td class="ex">Co-rédaction d'une synthèse de réunion</td>
<td class="plus">Engagement, co-construction</td>
<td class="moins">Peu de mise en forme, suivi limité</td>
<td>Apprentissage actif, collaboration</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Etherpad" target="_blank">Etherpad Magistère</a></td>
</tr>
<tr>
<td>Sticky Notes 🗒️</td>
<td>Post-it virtuels pour brainstorming</td>
<td class="ex">Collecte d'idées pour une formation</td>
<td class="plus">Expression libre, créativité</td>
<td class="moins">Peu structuré, dispersion</td>
<td>Activation des connaissances, créativité</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Sticky_notes" target="_blank">Sticky Notes Magistère</a></td>
</tr>
<tr>
<td>Wiki 🌐</td>
<td>Production collective de contenus</td>
<td class="ex">Création d’un lexique métier</td>
<td class="plus">Historique, structuration</td>
<td class="moins">Prise en main difficile</td>
<td>Structuration des savoirs</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Wiki" target="_blank">Wiki Magistère</a></td>
</tr>
<!-- Interactive -->
<tr>
<td class="interact" rowspan="11">🟩 Interactive</td>
<td>Quiz ❓</td>
<td>Évaluation rapide, feedback immédiat</td>
<td class="ex">QCM après une vidéo</td>
<td class="plus">Auto-évaluation, mémorisation</td>
<td class="moins">Création longue</td>
<td>Renforcement, mémorisation active</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Quiz" target="_blank">Quiz Magistère</a></td>
</tr>
<tr>
<td>Nuage de mots ☁️</td>
<td>Visualisation des idées principales</td>
<td class="ex">Synthèse de notions clés</td>
<td class="plus">Engagement, synthèse visuelle</td>
<td class="moins">Analyse limitée</td>
<td>Activation des connaissances</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Nuage_de_mots" target="_blank">Nuage de mots Magistère</a></td>
</tr>
<tr>
<td>Jeux/simulations 🎲</td>
<td>Activités ludiques intégrées</td>
<td class="ex">Simulation de situation professionnelle</td>
<td class="plus">Motivation, mémorisation</td>
<td class="moins">Conception technique</td>
<td>Motivation, ancrage mémoriel</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Jeux" target="_blank">Jeux Magistère</a></td>
</tr>
<!-- H5P Interactive Modules -->
<tr>
<td class="h5p">Question Set [H5P]</td>
<td>Séquence de questions variées (QCM, vrai/faux, texte à trous…)</td>
<td class="ex">Mini-quizz de révision en fin de module</td>
<td class="plus">Feedback immédiat, variété, auto-évaluation</td>
<td class="moins">Paramétrage multiple</td>
<td>Mémorisation active, renforcement</td>
<td><a href="https://h5p.org/question-set" target="_blank">Question Set H5P</a></td>
</tr>
<tr>
<td class="h5p">Drag and Drop [H5P]</td>
<td>Glisser-déposer pour associer des éléments</td>
<td class="ex">Associer des mots à des images</td>
<td class="plus">Manipulation, correction immédiate</td>
<td class="moins">Pas adapté à tous les contenus</td>
<td>Apprentissage kinesthésique</td>
<td><a href="https://h5p.org/drag-and-drop" target="_blank">Drag and Drop H5P</a></td>
</tr>
<tr>
<td class="h5p">Drag the Words [H5P]</td>
<td>Texte à trous à compléter par glisser-déposer</td>
<td class="ex">Phrase à compléter dans un contexte métier</td>
<td class="plus">Interactivité, mémorisation</td>
<td class="moins">Peut être répétitif</td>
<td>Renforcement, attention</td>
<td><a href="https://h5p.org/drag-the-words" target="_blank">Drag the Words H5P</a></td>
</tr>
<tr>
<td class="h5p">Mark the Words [H5P]</td>
<td>Surligner des mots corrects dans un texte</td>
<td class="ex">Identifier des termes techniques dans un texte</td>
<td class="plus">Lecture active, feedback rapide</td>
<td class="moins">Limité à certains usages</td>
<td>Attention sélective</td>
<td><a href="https://h5p.org/mark-the-words" target="_blank">Mark the Words H5P</a></td>
</tr>
<tr>
<td class="h5p">Multiple Choice [H5P]</td>
<td>Questions à choix multiples</td>
<td class="ex">Quiz de compréhension après une vidéo</td>
<td class="plus">Simplicité, feedback immédiat</td>
<td class="moins">Peu adapté à l’analyse complexe</td>
<td>Auto-évaluation, mémorisation</td>
<td><a href="https://h5p.org/multiple-choice" target="_blank">Multiple Choice H5P</a></td>
</tr>
<tr>
<td class="h5p">True/False Question [H5P]</td>
<td>Questions vrai/faux</td>
<td class="ex">Vérification rapide de connaissances</td>
<td class="plus">Rapide, efficace</td>
<td class="moins">Superficiel</td>
<td>Renforcement immédiat</td>
<td><a href="https://h5p.org/true-false" target="_blank">True/False H5P</a></td>
</tr>
<tr>
<td class="h5p">Flashcards [H5P]</td>
<td>Cartes mémoire pour réviser</td>
<td class="ex">Révision du vocabulaire métier</td>
<td class="plus">Mémorisation active, ludique</td>
<td class="moins">Pas de suivi détaillé</td>
<td>Répétition espacée</td>
<td><a href="https://h5p.org/flashcards" target="_blank">Flashcards H5P</a></td>
</tr>
<tr>
<td class="h5p">Summary [H5P]</td>
<td>Résumé interactif sous forme de QCM</td>
<td class="ex">Synthèse d’un chapitre</td>
<td class="plus">Validation de compréhension</td>
<td class="moins">Format limité</td>
<td>Consolidation des acquis</td>
<td><a href="https://h5p.org/summary" target="_blank">Summary H5P</a></td>
</tr>
<!--Production-->
<tr>
<td class="prod" rowspan="5">🟨 Production</td>
<td>Devoir 📂</td>
<td>Remise de travaux, correction centralisée</td>
<td class="ex">Dossier à rendre en fin de module</td>
<td class="plus">Centralisation, feedback</td>
<td class="moins">Peu interactif</td>
<td>Feedback, ancrage</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Devoir" target="_blank">Devoir Magistère</a></td>
</tr>
<tr>
<td>Base de données 🗃️</td>
<td>Banque de ressources partagées</td>
<td class="ex">Recueil d’exemples de pratiques</td>
<td class="plus">Organisation, recherche facilitée</td>
<td class="moins">Configuration complexe</td>
<td>Organisation, mémoire sémantique</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Base_de_donnees" target="_blank">Base de données Magistère</a></td>
</tr>
<tr>
<td>Glossaire 📖</td>
<td>Lexique collaboratif</td>
<td class="ex">Définir les termes clés d’un module</td>
<td class="plus">Liens automatiques, collaboration</td>
<td class="moins">Redondant parfois</td>
<td>Mémoire sémantique</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Glossaire" target="_blank">Glossaire Magistère</a></td>
</tr>
<!-- H5P Production -->
<tr>
<td class="h5p">Essay [H5P]</td>
<td>Rédaction de texte avec analyse automatisée</td>
<td class="ex">Argumentaire sur une situation professionnelle</td>
<td class="plus">Production écrite, feedback</td>
<td class="moins">Correction automatisée limitée</td>
<td>Expression, réflexion</td>
<td><a href="https://h5p.org/essay" target="_blank">Essay H5P</a></td>
</tr>
<tr>
<td class="h5p">Dictation [H5P]</td>
<td>Dictée de mots ou phrases avec auto-correction</td>
<td class="ex">Dictée de consignes de sécurité</td>
<td class="plus">Écoute active, auto-correction</td>
<td class="moins">Pas adapté à tous les domaines</td>
<td>Discrimination auditive, mémorisation</td>
<td><a href="https://h5p.org/dictation" target="_blank">Dictation H5P</a></td>
</tr>
<!-- Multimédia -->
<tr>
<td class="media" rowspan="6">🟧 Multimédia</td>
<td>PodEduc/PeerTube 🎥</td>
<td>Diffusion de vidéos/audio internes</td>
<td class="ex">Visionnage d’une capsule vidéo</td>
<td class="plus">Sécurité, multimodalité</td>
<td class="moins">Montage limité</td>
<td>Attention, diversité sensorielle</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/PodEduc" target="_blank">Vidéo Magistère</a></td>
</tr>
<tr>
<td>Sondage/Feedback 📊</td>
<td>Recueil d’avis ou de besoins</td>
<td class="ex">Sondage de satisfaction</td>
<td class="plus">Rapide, adaptation possible</td>
<td class="moins">Questions simples uniquement</td>
<td>Métacognition, adaptation</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Sondage" target="_blank">Sondage Magistère</a></td>
</tr>
<!-- H5P Multimédia -->
<tr>
<td class="h5p">Interactive Video [H5P]</td>
<td>Vidéo enrichie de questions, liens, commentaires</td>
<td class="ex">Capsule vidéo avec quiz intégrés</td>
<td class="plus">Engagement, multimodalité</td>
<td class="moins">Préparation longue</td>
<td>Attention, ancrage, feedback immédiat</td>
<td><a href="https://h5p.org/interactive-video" target="_blank">Interactive Video H5P</a></td>
</tr>
<tr>
<td class="h5p">Image Hotspots [H5P]</td>
<td>Image interactive avec zones cliquables</td>
<td class="ex">Schéma annoté d’un appareil</td>
<td class="plus">Exploration visuelle, contextualisation</td>
<td class="moins">Pas d’évaluation directe</td>
<td>Apprentissage visuel</td>
<td><a href="https://h5p.org/image-hotspots" target="_blank">Image Hotspots H5P</a></td>
</tr>
<tr>
<td class="h5p">Audio Recorder [H5P]</td>
<td>Enregistrement audio par l’apprenant</td>
<td class="ex">Prononciation d’un terme clé</td>
<td class="plus">Expression orale, autonomie</td>
<td class="moins">Pas de correction automatique</td>
<td>Production orale, auto-évaluation</td>
<td><a href="https://h5p.org/audio-recorder" target="_blank">Audio Recorder H5P</a></td>
</tr>
<tr>
<td class="h5p">Course Presentation [H5P]</td>
<td>Présentation interactive (slides, quiz, médias)</td>
<td class="ex">Module de formation avec activités intégrées</td>
<td class="plus">Scénarisation, multimodalité</td>
<td class="moins">Complexité de conception</td>
<td>Multicanalité, engagement</td>
<td><a href="https://h5p.org/course-presentation" target="_blank">Course Presentation H5P</a></td>
</tr>
<!-- Spécialisé -->
<tr>
<td class="spec">🟪 Spécialisé</td>
<td>Jupyter 🧮</td>
<td>Manipulation de code, activités scientifiques</td>
<td class="ex">Exercice Python interactif</td>
<td class="plus">Expérimentation directe</td>
<td class="moins">Public restreint</td>
<td>Expérimentation, transfert</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Jupyter" target="_blank">Jupyter Magistère</a></td>
</tr>
<!-- Structuration -->
<tr>
<td class="struct" rowspan="4">🟫 Structuration</td>
<td>Plugin Programme 🧩</td>
<td>Organisation modulaire des parcours</td>
<td class="ex">Parcours hybride découpé en modules</td>
<td class="plus">Suivi, modularité</td>
<td class="moins">Prise en main initiale</td>
<td>Gestion cognitive, progression</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Programme" target="_blank">Programme Magistère</a></td>
</tr>
<tr>
<td>Étiquettes, pages, livres 🏷️</td>
<td>Structuration, clarté du parcours</td>
<td class="ex">Guide de navigation dans le module</td>
<td class="plus">Organisation, repères</td>
<td class="moins">Visibilité variable</td>
<td>Organisation spatiale</td>
<td><a href="https://moodle-doc.forge.apps.education.fr/magistere/Pages_et_livres" target="_blank">Pages/Livres Magistère</a></td>
</tr>
<!-- H5P Structuration -->
<tr>
<td class="h5p">Column [H5P]</td>
<td>Organisation de plusieurs activités H5P sur une même page (séquence interactive)</td>
<td class="ex">Enchaînement vidéo, quiz, texte à trous</td>
<td class="plus">Scénarisation, parcours personnalisé</td>
<td class="moins">Complexité de paramétrage</td>
<td>Gestion cognitive, progression</td>
<td><a href="https://h5p.org/column" target="_blank">Column H5P</a></td>
</tr>
<tr>
<td class="h5p">Branching Scenario [H5P]</td>
<td>Parcours à embranchements selon les choix de l’apprenant</td>
<td class="ex">Simulation d’entretien avec choix de réponses</td>
<td class="plus">Personnalisation, immersion</td>
<td class="moins">Conception avancée</td>
<td>Engagement, prise de décision, transfert</td>
<td><a href="https://h5p.org/branching-scenario" target="_blank">Branching Scenario H5P</a></td>
</tr>
</tbody>
</table>
<p style="text-align:center; margin-top:24px; color:#4a4e69; font-size:1.08em;">
<b>Astuce :</b> Combinez plusieurs types d’activités pour varier les modalités d’apprentissage et optimiser l’engagement des apprenants !
</p>
<p style="text-align:center; color:#777; font-size:0.95em;">
<a href="https://moodle-doc.forge.apps.education.fr/magistere/" target="_blank">Tous les tutoriels Magistère</a> |
<a href="https://h5p.org/content-types-and-applications" target="_blank">Liste complète des modules H5P</a>
</p>
</div>
<a id="Time-line"></a>
<h2><i class="fa fa-calendar"></i> Time-line</h2>
<div class="zigzag-timeline">
<div class="zigzag-timeline-item left">
<div class="content">
<div class="date">17 juin 2025</div>
<div class="title">🚀 Démarrage</div>
<div class="desc">Lancement de la formation et accueil.</div>
</div>
</div>
<div class="zigzag-timeline-item right">
<div class="content">
<div class="date">17 juin 2025</div>
<div class="title">🖥️ Séance 1 (Visio)</div>
<div class="desc">Apports théoriques sur l’hybridation pédagogique.</div>
</div>
</div>
<div class="zigzag-timeline-item left">
<div class="content">
<div class="date">18 juin 2025</div>
<div class="title">💡 Début phase hybride</div>
<div class="desc">Exploration de Magistère 2, quiz, forum, création d’activités.</div>
</div>
</div>
<div class="zigzag-timeline-item right">
<div class="content">
<div class="date">18 juin – 1er juillet 2025</div>
<div class="title">💬 Accompagnement</div>
<div class="desc">Support via salon Tchap et forum Magistère 2.</div>
</div>
</div>
<div class="zigzag-timeline-item left">
<div class="content">
<div class="date">1er juillet 2025</div>
<div class="title">🏁 Fin phase hybride</div>
<div class="desc">Clôture des activités asynchrones.</div>
</div>
</div>
<div class="zigzag-timeline-item right">
<div class="content">
<div class="date">1er juillet 2025</div>
<div class="title">🤝 Séance 2 (Visio)</div>
<div class="desc">Retour d’expérience et échanges approfondis.</div>
</div>
</div>
<div class="zigzag-timeline-item left">
<div class="content">
<div class="date">1er juillet 2025</div>
<div class="title">🎓 Clôture</div>
<div class="desc">Bilan final et perspectives.</div>
</div>
</div>
</div>
<!-- Style de la timeline-->
<style>
/* Timeline verticale zigzag */
.zigzag-timeline {position: relative;max-width: 700px;margin: 2em auto;padding: 0 0 2em 0;} .zigzag-timeline::before {content: '';position: absolute;left: 50%;top: 0;bottom: 0;width: 4px;background: #228BCC;transform: translateX(-50%);z-index: 0;} .zigzag-timeline-item {position: relative;width: 50%;padding: 1.5em 2em;box-sizing: border-box;} .zigzag-timeline-item .content {background: #fff;padding: 1em 1.3em;border-radius: 8px;box-shadow: 0 2px 8px #0001;position: relative;z-index: 2;} .zigzag-timeline-item .date {font-weight: bold;color: #228BCC;margin-bottom: 0.3em;font-size: 0.95em;} .zigzag-timeline-item .title {font-size: 1.1em;font-weight: 600;color: #2c3e50;margin-bottom: 0.2em;} .zigzag-timeline-item .desc {font-size: 0.92em;color: #555;line-height: 1.3;} .zigzag-timeline-item.left {left: 0;text-align: right;} .zigzag-timeline-item.right {left: 50%;text-align: left;} .zigzag-timeline-item.left .content {margin-right: 30px;} .zigzag-timeline-item.right .content {margin-left: 30px;} .zigzag-timeline-item::after {content: '';position: absolute;top: 40%;width: 24px;height: 24px;background: #228BCC;border-radius: 50%;border: 4px solid #fff;box-shadow: 0 0 0 2px #228BCC;z-index: 3;} .zigzag-timeline-item.left::after {right: -12px;} .zigzag-timeline-item.right::after {left: -12px;}
@media (max-width: 600px) {
.zigzag-timeline-item, .zigzag-timeline-item.left, .zigzag-timeline-item.right {
width: 100%;
left: 0;
text-align: left;
}
.zigzag-timeline-item .content,
.zigzag-timeline-item.left .content,
.zigzag-timeline-item.right .content {
margin: 0 0 0 40px;
}
.zigzag-timeline-item::after,
.zigzag-timeline-item.left::after,
.zigzag-timeline-item.right::after {
left: 0;
right: auto;
}
.zigzag-timeline::before {
left: 16px;
transform: none;
}
}
</style>
<!-- Style du codimd -->
<style>
body {
font-family: "Segoe UI", Arial, sans-serif;
background: #f8f9fa;
color: #222;
margin: 0;
padding: 0 6vw;
width: 99%;
}
.header {
background-color: #228BCC;
color: #fff;
padding: 16px 10px;
text-align: center;
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
border-radius: 0 0 10px 10px;
}
.navbar {
overflow: hidden;
background-color: #515b61;
margin-bottom: 24px;
border-radius: 0 0 10px 10px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1.1em;
}
.navbar a:hover {
background-color: #f0f3f3;
color: #228BCC;
}
h2 {
background-color: #e4e8e9;
color: #464849;
padding: 10px;
border-radius: 5px;
margin-top: 2em;
}
h3 {
color: #228BCC;
margin-top: 1.5em;
}
table {
width: 80%;
border-collapse: collapse;
margin: 1.5em 0;
background: #fff;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 8px #ddd;
}
table {
font-size: 1.5rem;
}
th {
background-color: #228BCC;
color: white;
font-weight: bold;
padding: 10px;
text-align: left;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
ul, ol {
margin-left: 2em;
}
.info, .important, .highlight {
padding: 1em;
margin: 1.5em 0;
border-radius: 5px;
}
.info {
background: #e3f2fd;
border-left: 4px solid #2196f3;
}
.important {
background: #fff3cd;
border-left: 4px solid #ffc107;
}
.highlight {
background: #d1e7dd;
border-left: 4px solid #198754;
}
.return-button {
float: right;
display: inline-block;
padding: 10px 20px;
margin: 0px 0px 0px 15px ;
background-color: #ddd;
color: #228BCC;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
text-decoration: none;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.column1 {
width: 40%;
float: left;
padding: 10px;
}
.column2 {
width: 60%;
float: left;
padding: 10px;
}
@media (max-width: 600px) {
.column1, .column2 {
float: none;
width: 100%;
}
}
</style>
<!-- Style du tableau -->
<style>
/* Couleurs inspirées de CodiMD */
body {
font-family: 'Segoe UI', Arial, sans-serif;
background: #f6f8fa;
color: #1a1a1a;
margin: 0;
padding: 0;
}
h1, h2 {
color: #22223b;
text-align: center;
margin-top: 32px;
margin-bottom: 12px;
letter-spacing: 1px;
}
.container {
max-width: 98vw;
margin: 0 auto 40px auto;
padding: 20px 10px 40px 10px;
}
th, td {
padding: 14px 10px;
border-bottom: 1px solid #e0e3ea;
text-align: left;
vertical-align: top;
}
th {
color: #fff;
font-weight: 600;
letter-spacing: 0.5px;
border-bottom: 2px solid #4a4e69;
}
tr:last-child td {
border-bottom: none;
}
/* Catégories colorées façon CodiMD */
.collab { background: #a9def9; font-weight: bold; }
.interact { background: #d0f4de; font-weight: bold; }
.prod { background: #f6c6ea; font-weight: bold; }
.media { background: #fff3b0; font-weight: bold; }
.spec { background: #b5ead7; font-weight: bold; }
.struct { background: #ffdac1; font-weight: bold; }
/* H5P modules */
.h5p { color: #1976d2; font-weight: bold; }
/* Spécial */
.ex { font-style: italic; color: #555; }
.plus { color: #388e3c; font-weight: bold; }
.moins { color: #d32f2f; font-weight: bold; }
/* Lien style CodiMD */
a {
color: #1976d2;
text-decoration: underline;
transition: color 0.2s;
}
a:hover {
color: #4a4e69;
}
/* Responsive */
@media (max-width: 900px) {
table, thead, tbody, th, td, tr { display: block; }
thead { display: none; }
tr { margin-bottom: 18px; box-shadow: 0 2px 8px #22223b22; border-radius: 8px; background: #fff; }
td { border: none; position: relative; padding-left: 45%; min-height: 38px; }
td:before {
position: absolute;
left: 10px; top: 12px;
width: 40%;
white-space: pre-wrap;
font-weight: bold;
color: #4a4e69;
}
td:nth-of-type(1):before { content: "Catégorie"; }
td:nth-of-type(2):before { content: "Application / Module"; }
td:nth-of-type(3):before { content: "Explication"; }
td:nth-of-type(4):before { content: "Exemple"; }
td:nth-of-type(5):before { content: "Plus-value"; }
td:nth-of-type(6):before { content: "Moins-value"; }
td:nth-of-type(7):before { content: "Apport neurosciences"; }
td:nth-of-type(8):before { content: "Tutoriel"; }
}
/* Effet de survol */
tr:hover { background: #f0f4fc; transition: background 0.2s; }
</style>