From e16e6924a34696d4ea2655a8271ba423b3ad2a24 Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Wed, 23 Sep 2026 18:39:15 +0200
Subject: [PATCH 1/3] fix(microlearning): responsive cards, consistent
 navigation and clearer activity step

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../microlearning/AutoEvaluationEnd.vue       |  58 ++++---
 .../microlearning/AutoEvaluationStart.vue     |  54 +++---
 .../microlearning/BriefingScreen.vue          |  40 +----
 .../microlearning/CompleteScreen.vue          |  83 +++++++++
 src/components/microlearning/LikertScale.vue  |  27 ++-
 .../microlearning/QuestionComponent.vue       |  19 ++-
 src/components/microlearning/TrailHeader.vue  |  11 +-
 .../microlearning/TrailNavigation.vue         |  57 +++++--
 src/components/microlearning/TrailScreen.vue  |  67 +++++---
 .../microlearning/YesMaybeNotScale.vue        |  24 +--
 .../microlearning/steps/ActivityCards.vue     | 107 ++++++------
 .../microlearning/steps/FlipCard.vue          |  34 ++--
 .../microlearning/steps/FlipCards.vue         |  39 ++---
 .../microlearning/steps/ReflectionStep.vue    |  86 ++++++++--
 src/composables/useMicrolearning.ts           | 158 ++++++++++++++++--
 src/localisation/en.ts                        |   4 +-
 src/localisation/fr.ts                        |   4 +-
 src/localisation/microLearning/en.ts          |  19 ++-
 src/localisation/microLearning/fr.ts          |  19 ++-
 src/types/microlearning/index.ts              |   5 +
 src/views/MicrolearningModule.vue             |  16 +-
 21 files changed, 652 insertions(+), 279 deletions(-)

diff --git a/src/components/microlearning/AutoEvaluationEnd.vue b/src/components/microlearning/AutoEvaluationEnd.vue
index a2ceef7..30a8112 100644
--- a/src/components/microlearning/AutoEvaluationEnd.vue
+++ b/src/components/microlearning/AutoEvaluationEnd.vue
@@ -6,30 +6,51 @@
       {{ $t('autoEvaluation.end.subtitle') }}
     </p>
     <QuestionComponent
+      v-model="answers.link"
       type="likert"
       :question="$t('autoEvaluation.firstQuestion', { discipline: discipline })"
     />
-    <QuestionComponent type="likert" :question="$t('autoEvaluation.secondQuestion')" />
-    <QuestionComponent type="yesMaybeNot" :question="$t('autoEvaluation.willUse')" />
-    <QuestionComponent type="openDialogue" :question="$t('autoEvaluation.feedback')" />
-    <div class="buttons">
-      <button class="btn-primary" @click="$emit('start')">
-        {{ $t('finish') }}
-      </button>
-      <a @click="$emit('start')">{{ $t('skip') }}</a>
-    </div>
+    <QuestionComponent
+      v-model="answers.confidence"
+      type="likert"
+      :question="$t('autoEvaluation.secondQuestion')"
+    />
+    <QuestionComponent
+      v-model="answers.willUse"
+      type="yesMaybeNot"
+      :question="$t('autoEvaluation.willUse')"
+    />
+    <QuestionComponent
+      v-model="answers.feedback"
+      type="openDialogue"
+      :question="$t('autoEvaluation.feedback')"
+    />
+    <TrailNavigation
+      class="nav"
+      next-label="finish"
+      skippable
+      @back="$emit('back')"
+      @next="$emit('start')"
+      @skip="$emit('start')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import QuestionComponent from '@/components/microlearning/QuestionComponent.vue';
+import TrailNavigation from '@/components/microlearning/TrailNavigation.vue';
+import type { EvalAnswers } from '@/composables/useMicrolearning';
 
 defineProps<{
   discipline?: string;
 }>();
 
+// reactive object owned by useMicrolearning, fields are filled in place
+const answers = defineModel<EvalAnswers>('answers', { required: true });
+
 defineEmits<{
   (e: 'start'): void;
+  (e: 'back'): void;
 }>();
 </script>
 
@@ -45,21 +66,14 @@ defineEmits<{
   width: 100%;
 }
 
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.subtitle {
+  max-width: 560px;
+  text-align: center;
 }
 
-.btn-primary {
-  padding: 0.9rem;
-  border: none;
-  border-radius: 10px;
-  background: var(--primary-hover);
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-bottom: 1rem;
+.nav {
+  width: 100%;
+  max-width: 560px;
 }
 
 .abadge {
diff --git a/src/components/microlearning/AutoEvaluationStart.vue b/src/components/microlearning/AutoEvaluationStart.vue
index b8ea687..c85e5c2 100644
--- a/src/components/microlearning/AutoEvaluationStart.vue
+++ b/src/components/microlearning/AutoEvaluationStart.vue
@@ -3,28 +3,45 @@
     <p class="abadge">{{ $t('autoEvaluation.start.badge') }}</p>
     <p class="title is-4">{{ $t('autoEvaluation.start.title') }}</p>
     <p class="subtitle is-6">
-      {{ $t('autoEvaluation.start.subtitle') }}
+      {{ locked ? $t('autoEvaluation.start.lockedNotice') : $t('autoEvaluation.start.subtitle') }}
     </p>
-    <QuestionComponent :question="$t('autoEvaluation.firstQuestion', { discipline: discipline })" />
-    <QuestionComponent :question="$t('autoEvaluation.secondQuestion')" />
-    <div class="buttons">
-      <button class="btn-primary" @click="$emit('start')">
-        {{ $t('microLearning.briefingScreen.primaryButton') }}
-      </button>
-      <a @click="$emit('start')">{{ $t('skip') }}</a>
-    </div>
+    <QuestionComponent
+      v-model="answers.link"
+      :disabled="locked"
+      :question="$t('autoEvaluation.firstQuestion', { discipline: discipline })"
+    />
+    <QuestionComponent
+      v-model="answers.confidence"
+      :disabled="locked"
+      :question="$t('autoEvaluation.secondQuestion')"
+    />
+    <TrailNavigation
+      class="nav"
+      :next-label="locked ? 'next' : 'microLearning.briefingScreen.primaryButton'"
+      :skippable="!locked"
+      @back="$emit('back')"
+      @next="$emit('start')"
+      @skip="$emit('start')"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import QuestionComponent from '@/components/microlearning/QuestionComponent.vue';
+import TrailNavigation from '@/components/microlearning/TrailNavigation.vue';
+import type { EvalAnswers } from '@/composables/useMicrolearning';
 
 defineProps<{
   discipline?: string;
+  locked: boolean;
 }>();
 
+// reactive object owned by useMicrolearning, fields are filled in place
+const answers = defineModel<EvalAnswers>('answers', { required: true });
+
 defineEmits<{
   (e: 'start'): void;
+  (e: 'back'): void;
 }>();
 </script>
 
@@ -40,21 +57,14 @@ defineEmits<{
   width: 100%;
 }
 
-.buttons {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.subtitle {
+  max-width: 560px;
+  text-align: center;
 }
 
-.btn-primary {
-  padding: 0.9rem;
-  border: none;
-  border-radius: 10px;
-  background: var(--primary-hover);
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-bottom: 1rem;
+.nav {
+  width: 100%;
+  max-width: 560px;
 }
 
 .abadge {
diff --git a/src/components/microlearning/BriefingScreen.vue b/src/components/microlearning/BriefingScreen.vue
index 7be64be..d5d43ec 100644
--- a/src/components/microlearning/BriefingScreen.vue
+++ b/src/components/microlearning/BriefingScreen.vue
@@ -29,19 +29,18 @@
         {{ $t('microLearning.hint') }}
       </div>
 
-      <button class="btn-primary" @click="$emit('start')">
-        {{ $t('microLearning.briefingScreen.primaryButton') }}
-      </button>
-
-      <button class="btn-ghost" @click="$emit('back')">
-        {{ $t('microLearning.briefingScreen.ghostButton') }}
-      </button>
+      <TrailNavigation
+        next-label="microLearning.briefingScreen.primaryButton"
+        @back="$emit('back')"
+        @next="$emit('start')"
+      />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import type { DisciplineMeta } from '@/types/microlearning';
+import TrailNavigation from './TrailNavigation.vue';
 
 const obj = ['understand', 'identify', 'discover'];
 defineProps<{
@@ -130,31 +129,4 @@ h2 {
   font-size: 0.85rem;
   margin-bottom: 1rem;
 }
-
-.btn-primary {
-  width: 100%;
-  padding: 0.9rem;
-  border: none;
-  border-radius: 10px;
-  background: var(--primary-hover);
-  color: white;
-  cursor: pointer;
-  font-size: 1rem;
-  margin-bottom: 1rem;
-}
-
-.btn-primary:hover {
-  background: var(--primary-dark);
-}
-
-.btn-ghost {
-  border: none;
-  background: transparent;
-  color: var(--neutral-80);
-  cursor: pointer;
-}
-
-.btn-ghost:hover {
-  color: var(--neutral-100);
-}
 </style>
diff --git a/src/components/microlearning/CompleteScreen.vue b/src/components/microlearning/CompleteScreen.vue
index a30089d..79b5328 100644
--- a/src/components/microlearning/CompleteScreen.vue
+++ b/src/components/microlearning/CompleteScreen.vue
@@ -13,6 +13,23 @@
         {{ $t('microLearning.completeScreen.description') }}
       </p>
 
+      <div class="takeaways">
+        <article v-if="chosenActivity" class="takeaway">
+          <span class="takeaway-label">{{ $t('microLearning.reflection.yourPick') }}</span>
+          <h3>{{ chosenActivity.title }}</h3>
+          <p>{{ chosenActivity.desc }}</p>
+        </article>
+
+        <article v-if="resource" class="takeaway resource">
+          <span class="takeaway-label">📚 {{ resource.label }}</span>
+          <h3>{{ resource.title }}</h3>
+          <p>{{ $t('microLearning.reflection.resourceSubtitle') }}</p>
+          <a :href="resource.href" target="_blank" rel="noopener noreferrer">
+            {{ $t('microLearning.reflection.ctaSource') }}
+          </a>
+        </article>
+      </div>
+
       <div class="actions">
         <router-link class="btn-primary" to="/tutor">
           {{ $t('microLearning.completeScreen.primaryButton') }}</router-link
@@ -26,6 +43,20 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import type { Activity, Discipline, VotretourStep } from '@/types/microlearning';
+
+const props = defineProps<{
+  discipline: Discipline;
+  chosenActivity: Activity | null;
+}>();
+
+const resource = computed(
+  () =>
+    (props.discipline.steps.find((s) => s.type === 'votretour') as VotretourStep | undefined)
+      ?.resource
+);
+
 defineEmits<{
   (e: 'restart'): void;
 }>();
@@ -69,6 +100,58 @@ defineEmits<{
   margin-bottom: 2rem;
 }
 
+.takeaways {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  text-align: left;
+}
+
+.takeaway {
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--primary);
+  border-radius: 12px;
+  background: var(--neutral-0);
+}
+
+.takeaway.resource {
+  border-color: transparent;
+  background: var(--primary-lighter);
+}
+
+.takeaway-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--primary-dark);
+}
+
+.takeaway h3 {
+  margin: 0.35rem 0;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+.takeaway p {
+  margin: 0;
+  color: var(--neutral-80);
+  line-height: 1.6;
+}
+
+.takeaway a {
+  display: inline-block;
+  margin-top: 0.5rem;
+  color: var(--primary-dark);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.takeaway a:hover {
+  text-decoration: underline;
+}
+
 .actions {
   display: flex;
   flex-direction: column;
diff --git a/src/components/microlearning/LikertScale.vue b/src/components/microlearning/LikertScale.vue
index d411d99..fffb90d 100644
--- a/src/components/microlearning/LikertScale.vue
+++ b/src/components/microlearning/LikertScale.vue
@@ -1,9 +1,15 @@
 <template>
   <div class="scaleWrapper">
     <div class="scaleLevel" :key="value" v-for="value in scale">
-      <div class="scaleValue" :class="{ selected: selected === value }" @click="selectValue(value)">
+      <button
+        type="button"
+        class="scaleValue"
+        :class="{ selected: selected === value }"
+        :disabled="disabled"
+        @click="selected = value"
+      >
         {{ value }}
-      </div>
+      </button>
       <span class="levelLegend" v-if="value === 1 || value == 5">{{
         value === 1 ? $t('autoEvaluation.notAtAll') : $t('autoEvaluation.tottally')
       }}</span>
@@ -12,13 +18,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref } from 'vue';
 const scale = [1, 2, 3, 4, 5];
-const selected: Ref<number | undefined> = ref(undefined);
-
-const selectValue = (val: number) => {
-  selected.value = val;
-};
+const selected = defineModel<number>();
+defineProps<{ disabled?: boolean }>();
 </script>
 
 <style lang="css" scoped>
@@ -36,9 +38,16 @@ const selectValue = (val: number) => {
   margin-top: 0.5rem;
   cursor: pointer;
   border: 1px solid var(--neutral-50);
+  font: inherit;
+  color: inherit;
+  width: 100%;
+}
+
+.scaleValue:disabled {
+  cursor: default;
 }
 
-.scaleValue:hover {
+.scaleValue:hover:not(:disabled) {
   border-color: var(--primary-hover);
   color: var(--primary-hover);
 }
diff --git a/src/components/microlearning/QuestionComponent.vue b/src/components/microlearning/QuestionComponent.vue
index c4fc454..5e9d9c4 100644
--- a/src/components/microlearning/QuestionComponent.vue
+++ b/src/components/microlearning/QuestionComponent.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="questionAndScale">
     <p class="question">{{ question }}</p>
-    <YesMaybeNotScale v-if="type === 'yesMaybeNot'" />
-    <input
-      class="input"
-      tyoe="textarea"
+    <YesMaybeNotScale v-if="type === 'yesMaybeNot'" v-model="model" :disabled="disabled" />
+    <textarea
+      class="textarea"
+      rows="2"
       v-else-if="type === 'openDialogue'"
+      v-model="model"
+      :disabled="disabled"
       :placeholder="$t('typeHere')"
     />
-    <LikertScale v-else />
+    <LikertScale v-else v-model="model" :disabled="disabled" />
   </div>
 </template>
 
@@ -19,7 +21,11 @@ import YesMaybeNotScale from '@/components/microlearning/YesMaybeNotScale.vue';
 defineProps<{
   question: string;
   type?: 'likert' | 'yesMaybeNot' | 'openDialogue';
+  disabled?: boolean;
 }>();
+
+// Likert answers are numbers, the other types are strings
+const model = defineModel<any>(); // eslint-disable-line @typescript-eslint/no-explicit-any
 </script>
 
 <style lang="css" scoped>
@@ -28,7 +34,8 @@ defineProps<{
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 30%;
+  width: 100%;
+  max-width: 560px;
 }
 
 .question {
diff --git a/src/components/microlearning/TrailHeader.vue b/src/components/microlearning/TrailHeader.vue
index 50f4cd6..bf3db20 100644
--- a/src/components/microlearning/TrailHeader.vue
+++ b/src/components/microlearning/TrailHeader.vue
@@ -1,8 +1,8 @@
 <template>
   <header class="trail-header">
     <div class="left">
-      <button class="back-button" @click="$emit('restart')">
-        <span class="'is-flex'">← </span>{{ $t('microLearning.restart') }}
+      <button class="back-button" @click="confirmRestart">
+        {{ $t('microLearning.briefingScreen.ghostButton') }}
       </button>
     </div>
 
@@ -25,6 +25,7 @@
 
 <script setup lang="ts">
 import type { DisciplineMeta } from '@/types/microlearning';
+import i18n from '@/localisation/i18n';
 
 defineProps<{
   discipline: DisciplineMeta | null;
@@ -32,9 +33,13 @@ defineProps<{
   totalSteps: number;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'restart'): void;
 }>();
+
+function confirmRestart() {
+  if (window.confirm(i18n.global.t('microLearning.restartConfirm'))) emit('restart');
+}
 </script>
 
 <style scoped lang="css">
diff --git a/src/components/microlearning/TrailNavigation.vue b/src/components/microlearning/TrailNavigation.vue
index 39f02e0..8b175a8 100644
--- a/src/components/microlearning/TrailNavigation.vue
+++ b/src/components/microlearning/TrailNavigation.vue
@@ -6,35 +6,39 @@
 
     <div class="spacer" />
 
-    <button class="btn btn-primary" @click="$emit('next')">
-      {{ $t(nextLabel) }}
-    </button>
+    <div class="next-group">
+      <button class="btn btn-primary" :disabled="!canNext" @click="$emit('next')">
+        {{ $t(nextLabel) }}
+      </button>
+      <p v-if="!canNext && hint" class="next-hint">{{ $t(hint) }}</p>
+      <a v-if="skippable" class="skip-link" @click="$emit('skip')">{{ $t('skip') }}</a>
+    </div>
   </footer>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  showBack: boolean;
-  canNext: boolean;
-  isLast: boolean;
-}>();
+withDefaults(
+  defineProps<{
+    showBack?: boolean;
+    canNext?: boolean;
+    nextLabel?: string;
+    hint?: string;
+    skippable?: boolean;
+  }>(),
+  { showBack: true, canNext: true, nextLabel: 'next' }
+);
 
 defineEmits<{
   (e: 'back'): void;
   (e: 'next'): void;
+  (e: 'skip'): void;
 }>();
-
-const nextLabel = computed(() => {
-  return props.isLast ? 'finish' : 'next';
-});
 </script>
 
 <style scoped>
 .trail-navigation {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 1rem;
   margin-top: 2rem;
   padding: 1.5rem 0.5rem;
@@ -45,6 +49,24 @@ const nextLabel = computed(() => {
   flex: 1;
 }
 
+.next-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.next-hint {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--neutral-80);
+}
+
+.skip-link {
+  font-size: 0.85rem;
+  color: var(--neutral-80);
+}
+
 .btn {
   min-width: 140px;
   padding: 0.5rem;
@@ -91,5 +113,10 @@ const nextLabel = computed(() => {
   .btn {
     width: 100%;
   }
+
+  .next-group {
+    align-items: stretch;
+    text-align: center;
+  }
 }
 </style>
diff --git a/src/components/microlearning/TrailScreen.vue b/src/components/microlearning/TrailScreen.vue
index f564835..32d2359 100644
--- a/src/components/microlearning/TrailScreen.vue
+++ b/src/components/microlearning/TrailScreen.vue
@@ -16,14 +16,17 @@
             :is="currentComponent"
             :key="currentStepIndex"
             :step="currentStep"
-            @completed="stepCompleted = true"
+            v-bind="stepProps"
+            @toggle="$emit('toggleCard', $event as number)"
+            @selected="$emit('chooseActivity', $event as ActivityRef | null)"
+            @change-activity="previous"
           />
         </Transition>
 
         <TrailNavigation
-          :show-back="currentStepIndex > 0"
-          :is-last="isLastStep"
-          :can-next="stepCompleted"
+          :next-label="isLastStep ? 'finish' : 'next'"
+          :can-next="canNext"
+          :hint="hint"
           @back="previous"
           @next="next"
         />
@@ -33,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 
 import TrailHeader from './TrailHeader.vue';
 import ProgressBar from './ProgressBar.vue';
@@ -44,13 +47,23 @@ import CompetenceCards from './steps/CompetenceCards.vue';
 import ActivityCards from './steps/ActivityCards.vue';
 import ReflectionStep from './steps/ReflectionStep.vue';
 
-import type { Discipline, DisciplineMeta, Step } from '@/types/microlearning';
+import type {
+  Activity,
+  ActivityRef,
+  Discipline,
+  DisciplineMeta,
+  Step
+} from '@/types/microlearning';
 import { scrollToAnchor } from '@/utils/navigation.js';
 
 const props = defineProps<{
   disciplineMeta: DisciplineMeta | null;
   discipline: Discipline;
   step: number;
+  flipDone: boolean;
+  flippedCards: number[];
+  chosenActivity: Activity | null;
+  reflectionAnswers: string[];
 }>();
 
 const emit = defineEmits<{
@@ -58,23 +71,40 @@ const emit = defineEmits<{
   (e: 'previous'): void;
   (e: 'finish'): void;
   (e: 'restart'): void;
+  (e: 'toggleCard', index: number): void;
+  (e: 'chooseActivity', activity: ActivityRef | null): void;
 }>();
 const currentStepIndex = computed(() => props.step);
 
-const stepCompleted = ref(false);
 const currentStep = computed<Step>(() => {
   return props.discipline.steps[currentStepIndex.value];
 });
 
-const requiresInteraction = ['flip', 'activities'];
+// Steps that need an action before moving on, with the hint shown under the disabled button
+const canNext = computed(() => {
+  if (currentStep.value.type === 'flip') return props.flipDone;
+  if (currentStep.value.type === 'activities') return !!props.chosenActivity;
+  return true;
+});
 
-watch(
-  () => props.step,
-  () => {
-    stepCompleted.value = !requiresInteraction.includes(currentStep.value.type);
-  },
-  { immediate: true }
-);
+const hint = computed(() => {
+  if (currentStep.value.type === 'flip') return 'microLearning.flipCards.nextHint';
+  if (currentStep.value.type === 'activities') return 'microLearning.activities.nextHint';
+  return undefined;
+});
+
+const stepProps = computed(() => {
+  switch (currentStep.value.type) {
+    case 'flip':
+      return { flipped: props.flippedCards };
+    case 'activities':
+      return { selected: props.chosenActivity };
+    case 'votretour':
+      return { chosenActivity: props.chosenActivity, answers: props.reflectionAnswers };
+    default:
+      return {};
+  }
+});
 
 const isLastStep = computed(() => {
   return currentStepIndex.value === props.discipline.steps.length - 1;
@@ -104,9 +134,7 @@ function previous() {
 }
 
 function next() {
-  if (!stepCompleted.value) {
-    return;
-  }
+  if (!canNext.value) return;
 
   emit('next');
   scrollToAnchor('steps-focus');
@@ -122,7 +150,8 @@ function next() {
 
 .trail-body {
   flex: 1;
-  width: 50%;
+  width: 100%;
+  max-width: 960px;
   margin: 0 auto;
   padding: 0rem 1.5rem;
 }
diff --git a/src/components/microlearning/YesMaybeNotScale.vue b/src/components/microlearning/YesMaybeNotScale.vue
index dbb0e0f..4b96432 100644
--- a/src/components/microlearning/YesMaybeNotScale.vue
+++ b/src/components/microlearning/YesMaybeNotScale.vue
@@ -1,25 +1,23 @@
 <template>
   <div class="scaleWrapper">
-    <div
+    <button
+      type="button"
       class="scaleValue"
       :key="value"
       v-for="value in scale"
       :class="{ selected: selected === value }"
-      @click="selectValue(value)"
+      :disabled="disabled"
+      @click="selected = value"
     >
       {{ $t(value) }}
-    </div>
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, type Ref } from 'vue';
 const scale = ['yes', 'maybe', 'notForNow'];
-const selected: Ref<string | undefined> = ref(undefined);
-
-const selectValue = (val: string) => {
-  selected.value = val;
-};
+const selected = defineModel<string>();
+defineProps<{ disabled?: boolean }>();
 </script>
 
 <style lang="css" scoped>
@@ -38,9 +36,15 @@ const selectValue = (val: string) => {
   margin-top: 0.5rem;
   cursor: pointer;
   border: 1px solid var(--neutral-50);
+  font: inherit;
+  color: inherit;
+}
+
+.scaleValue:disabled {
+  cursor: default;
 }
 
-.scaleValue:hover {
+.scaleValue:hover:not(:disabled) {
   border-color: var(--primary-hover);
   color: var(--primary-hover);
 }
diff --git a/src/components/microlearning/steps/ActivityCards.vue b/src/components/microlearning/steps/ActivityCards.vue
index 484099f..d9a1192 100644
--- a/src/components/microlearning/steps/ActivityCards.vue
+++ b/src/components/microlearning/steps/ActivityCards.vue
@@ -1,10 +1,13 @@
 <template>
   <section class="activity-step">
-    <p class="step-intro">
-      {{ step.intro }}
-    </p>
-
-    <section v-for="apport in step.apports" :key="apport.label" class="apport">
+    <header class="step-header">
+      <p class="step-intro">
+        {{ step.intro }}
+      </p>
+      <p class="step-instruction">{{ $t('microLearning.activities.instruction') }}</p>
+    </header>
+
+    <section v-for="(apport, apportIndex) in step.apports" :key="apport.label" class="apport">
       <header class="apport-header">
         <span class="apport-badge" :class="apport.color">
           {{ apport.label }}
@@ -12,15 +15,26 @@
       </header>
 
       <div class="activity-grid">
-        <article
-          v-for="activity in apport.acts"
+        <label
+          v-for="(activity, actIndex) in apport.acts"
           :key="activity.title"
           class="activity-card"
           :class="{ selected: isSelected(activity) }"
-          @click="choose(activity)"
         >
+          <input
+            type="radio"
+            name="activity"
+            class="visually-hidden"
+            :checked="isSelected(activity)"
+            @click="
+              $emit(
+                'selected',
+                isSelected(activity) ? null : { apport: apportIndex, act: actIndex }
+              )
+            "
+          />
           <div class="activity-select">
-            <div class="radio" :class="{ checked: isSelected(activity) }">✓</div>
+            <div class="radio" aria-hidden="true">✓</div>
 
             <div>
               <h3>
@@ -32,57 +46,26 @@
               </p>
             </div>
           </div>
-        </article>
+        </label>
       </div>
     </section>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-interface Activity {
-  title: string;
-
-  desc: string;
-}
-
-interface Apport {
-  label: string;
-
-  color: string;
-
-  acts: Activity[];
-}
-
-interface ActivityStep {
-  intro: string;
+import type { Activity, ActivitiesStep, ActivityRef } from '@/types/microlearning';
 
-  apports: Apport[];
-}
-
-defineProps<{
-  step: ActivityStep;
+const props = defineProps<{
+  step: ActivitiesStep;
+  selected: Activity | null;
 }>();
 
-const selected = ref<Activity | null>(null);
-
 function isSelected(activity: Activity) {
-  return selected.value?.title === activity.title;
-}
-
-function choose(activity: Activity) {
-  selected.value = activity;
-
-  emit('selected', activity);
-
-  emit('completed');
+  return props.selected?.title === activity.title;
 }
 
-const emit = defineEmits<{
-  (e: 'completed'): void;
-
-  (e: 'selected', activity: Activity): void;
+defineEmits<{
+  (e: 'selected', activity: ActivityRef | null): void;
 }>();
 </script>
 
@@ -93,14 +76,35 @@ const emit = defineEmits<{
   gap: 2rem;
 }
 
-.step-intro {
-  color: var(--text-secondary);
-  line-height: 1.7;
+.step-header {
   text-align: center;
   max-width: 720px;
   margin: 0 auto;
 }
 
+.step-intro {
+  color: var(--text-secondary);
+  line-height: 1.7;
+  margin: 0 0 1rem;
+}
+
+.step-instruction {
+  margin: 0;
+  font-weight: 600;
+  color: var(--neutral-100);
+}
+
+.visually-hidden {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.activity-card:focus-within {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
 /* -------------------------------------------------------------------------- */
 /* APPORT                                                                      */
 /* -------------------------------------------------------------------------- */
@@ -225,6 +229,7 @@ const emit = defineEmits<{
 }
 
 .activity-card {
+  position: relative;
   cursor: pointer;
 }
 
diff --git a/src/components/microlearning/steps/FlipCard.vue b/src/components/microlearning/steps/FlipCard.vue
index 22b5fb3..a1f71f3 100644
--- a/src/components/microlearning/steps/FlipCard.vue
+++ b/src/components/microlearning/steps/FlipCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flip-card" :class="{ flipped, [card.color]: card.color }" @click="flip">
+  <div class="flip-card" :class="{ flipped, [card.color]: card.color }" @click="$emit('toggle')">
     <div class="inner">
       <div class="front">
         <h3>
@@ -24,39 +24,31 @@
 
 <script setup lang="ts">
 import type { FlipCard } from '@/types/microlearning';
-import { ref } from 'vue';
 
 defineProps<{
   card: FlipCard;
+  flipped: boolean;
 }>();
 
-const emit = defineEmits<{
-  (e: 'flip'): void;
+defineEmits<{
+  (e: 'toggle'): void;
 }>();
-
-const flipped = ref(false);
-
-function flip() {
-  if (flipped.value) return;
-
-  flipped.value = true;
-  emit('flip');
-}
 </script>
 
 <style scoped>
 .flip-card {
   cursor: pointer;
-  height: 18rem;
+  display: grid;
+  min-height: 18rem;
   perspective: 1000px;
   border-radius: 16px;
   background-color: var(--primary-hover);
   color: var(--neutral-0);
 }
 
+/* Both faces share one grid cell: the card grows to fit the longest face, no overflow */
 .inner {
-  position: relative;
-  height: 100%;
+  display: grid;
   transition: transform 0.6s;
   transform-style: preserve-3d;
 }
@@ -93,8 +85,7 @@ function flip() {
 .front,
 .back {
   opacity: 1;
-  position: absolute;
-  inset: 0;
+  grid-area: 1 / 1;
   backface-visibility: hidden;
   border-radius: 16px;
   padding: 1.5rem;
@@ -117,11 +108,6 @@ function flip() {
 
 h3 {
   margin-bottom: 0.5rem;
-}
-
-@media (max-width: 1400px) {
-  .flip-card .back {
-    font-size: 0.8em;
-  }
+  font-weight: 700;
 }
 </style>
diff --git a/src/components/microlearning/steps/FlipCards.vue b/src/components/microlearning/steps/FlipCards.vue
index 8419a4f..85ba167 100644
--- a/src/components/microlearning/steps/FlipCards.vue
+++ b/src/components/microlearning/steps/FlipCards.vue
@@ -9,7 +9,8 @@
         v-for="(card, index) in step.cards"
         :key="index"
         :card="card"
-        @flip="markFlipped(index)"
+        :flipped="flipped.includes(index)"
+        @toggle="$emit('toggle', index)"
       />
     </div>
 
@@ -24,39 +25,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import FlipCard from './FlipCard.vue';
 import type { FlipStep } from '@/types/microlearning/index.js';
 
 const props = defineProps<{
   step: FlipStep;
   stepNumber?: number;
+  flipped: number[];
 }>();
 
-const emit = defineEmits<{
-  (e: 'completed'): void;
+defineEmits<{
+  (e: 'toggle', index: number): void;
 }>();
 
-const flipped = ref<Set<number>>(new Set());
-
-watch(
-  () => props.step,
-  () => {
-    flipped.value.clear();
-  }
-);
-
-const completed = computed(() => flipped.value.size === props.step.cards.length);
-
-watch(completed, (value) => {
-  if (value) {
-    emit('completed');
-  }
-});
-
-function markFlipped(id: number) {
-  flipped.value.add(id);
-}
+const completed = computed(() => props.flipped.length === props.step.cards.length);
 </script>
 
 <style scoped>
@@ -86,10 +69,16 @@ function markFlipped(id: number) {
   display: grid;
 
   grid-template-columns: 1fr 1fr;
-
+  grid-auto-rows: 1fr; /* every card as tall as the tallest one */
   gap: 1.5rem;
 }
 
+@media (max-width: 640px) {
+  .cards {
+    grid-template-columns: 1fr;
+  }
+}
+
 .success {
   padding: 1.5rem;
   background: #eef9f4;
diff --git a/src/components/microlearning/steps/ReflectionStep.vue b/src/components/microlearning/steps/ReflectionStep.vue
index 5fefcf2..676db42 100644
--- a/src/components/microlearning/steps/ReflectionStep.vue
+++ b/src/components/microlearning/steps/ReflectionStep.vue
@@ -10,6 +10,17 @@
       </p>
     </header>
 
+    <div v-if="chosenActivity" class="chosen-activity">
+      <div>
+        <span class="chosen-label">{{ $t('microLearning.reflection.yourPick') }}</span>
+        <p class="chosen-title">{{ chosenActivity.title }}</p>
+        <p class="chosen-hint">{{ $t('microLearning.reflection.yourPickHint') }}</p>
+      </div>
+      <button type="button" class="change-link" @click="$emit('changeActivity')">
+        {{ $t('microLearning.reflection.changePick') }}
+      </button>
+    </div>
+
     <div v-for="(prompt, index) in step.prompts" :key="index" class="reflection-card">
       <label :for="`reflection-${index}`">
         {{ prompt.q }}
@@ -18,7 +29,7 @@
       <textarea
         :id="`reflection-${index}`"
         v-model="answers[index]"
-        :placeholder="prompt.placeholder"
+        :placeholder="placeholderFor(index, prompt.placeholder)"
         rows="5"
       />
     </div>
@@ -45,7 +56,8 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch } from 'vue';
+import type { Activity } from '@/types/microlearning';
+import i18n from '@/localisation/i18n';
 
 interface Prompt {
   q: string;
@@ -65,25 +77,25 @@ interface ReflectionStep {
   resource: Resource;
 }
 
-defineProps<{
+const props = defineProps<{
   step: ReflectionStep;
+  chosenActivity: Activity | null;
 }>();
 
-const emit = defineEmits<{
-  (e: 'completed'): void;
-  (e: 'answers', value: string[]): void;
-}>();
+// reactive array owned by useMicrolearning so answers survive going back
+const answers = defineModel<string[]>('answers', { required: true });
 
-const answers = reactive<string[]>([]);
+defineEmits<{
+  (e: 'changeActivity'): void;
+}>();
 
-watch(
-  answers,
-  () => {
-    emit('answers', [...answers]);
-    emit('completed');
-  },
-  { deep: true }
-);
+// The last prompt asks how to bring it into class: point the example at the chosen activity
+function placeholderFor(index: number, fallback: string) {
+  if (!props.chosenActivity || index !== props.step.prompts.length - 1) return fallback;
+  return i18n.global.t('microLearning.reflection.activityPlaceholder', {
+    activity: props.chosenActivity.title
+  });
+}
 </script>
 
 <style scoped>
@@ -113,6 +125,48 @@ watch(
   color: var(--neutral-80);
 }
 
+.chosen-activity {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  margin: 0.5rem 1.5rem;
+  padding: 1rem;
+  border: 1px solid var(--primary);
+  border-radius: 8px;
+  background: var(--primary-lighter);
+}
+
+.chosen-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--primary-dark);
+}
+
+.chosen-title {
+  margin: 0.25rem 0;
+  font-weight: 600;
+}
+
+.chosen-hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--neutral-80);
+}
+
+.change-link {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  color: var(--primary-dark);
+  font: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 .reflection-card {
   display: flex;
   flex-direction: column;
diff --git a/src/composables/useMicrolearning.ts b/src/composables/useMicrolearning.ts
index 1b58184..438ac3a 100644
--- a/src/composables/useMicrolearning.ts
+++ b/src/composables/useMicrolearning.ts
@@ -1,10 +1,28 @@
-import { ref, computed, type ComputedRef } from 'vue';
-import type { DiscValue, Discipline, DisciplineMeta } from '@/types/microlearning';
+import { ref, reactive, computed, watch, type ComputedRef } from 'vue';
+import { useRoute, useRouter, type LocationQuery } from 'vue-router';
+import type {
+  ActivitiesStep,
+  ActivityRef,
+  DiscValue,
+  Discipline,
+  DisciplineMeta,
+  FlipStep
+} from '@/types/microlearning';
 import { ScreensEnum } from '@/types/microlearning';
 import { DATA } from '@/stores/microlearning/data';
 import i18n from '@/localisation/i18n';
 
+export interface EvalAnswers {
+  link?: number;
+  confidence?: number;
+  willUse?: string;
+  feedback?: string;
+}
+
 export function useMicrolearning() {
+  const route = useRoute();
+  const router = useRouter();
+
   // =====================
   // STATE GLOBAL
   // =====================
@@ -13,7 +31,17 @@ export function useMicrolearning() {
   const disc = ref<DiscValue | null>(null);
   const current_disc = ref<DisciplineMeta | null>(null);
   const step = ref(0);
-  const actChoice = ref<string | null>(null);
+
+  // Progress kept while navigating back and forth
+  const flippedCards = ref<number[]>([]);
+  // Store the position, not the text, so the activity follows language switches
+  const actChoice = ref<ActivityRef | null>(null);
+  const reflectionAnswers = reactive<string[]>([]);
+
+  // Self-evaluation (research data): "before" answers lock once the trail starts
+  const preAnswers = reactive<EvalAnswers>({});
+  const postAnswers = reactive<EvalAnswers>({});
+  const preLocked = ref(false);
 
   const DISC_META: Record<string, DisciplineMeta> = {
     math: { id: 'math', name: 'Mathématiques', icon: '📐' },
@@ -45,6 +73,19 @@ export function useMicrolearning() {
     return currentData.value?.steps?.[step.value] ?? null;
   });
 
+  const chosenActivity = computed(() => {
+    if (!actChoice.value) return null;
+    const activities = currentData.value?.steps.find((s) => s.type === 'activities') as
+      | ActivitiesStep
+      | undefined;
+    return activities?.apports[actChoice.value.apport]?.acts[actChoice.value.act] ?? null;
+  });
+
+  const flipDone = computed(() => {
+    const flip = currentData.value?.steps.find((s) => s.type === 'flip') as FlipStep | undefined;
+    return !!flip && flippedCards.value.length === flip.cards.length;
+  });
+
   const currentMeta = computed(() => {
     if (!disc.value) return null;
     return DISC_META[disc.value];
@@ -63,9 +104,25 @@ export function useMicrolearning() {
   // ACTIONS
   // =====================
 
-  function selectDiscipline(key: string) {
+  function resetProgress() {
+    step.value = 0;
+    flippedCards.value = [];
+    actChoice.value = null;
+    reflectionAnswers.splice(0);
+    for (const answers of [preAnswers, postAnswers]) {
+      for (const key of Object.keys(answers)) delete answers[key as keyof EvalAnswers];
+    }
+    preLocked.value = false;
+  }
+
+  function setDiscipline(key: string) {
+    if (key !== disc.value) resetProgress();
     disc.value = key as DiscValue;
-    current_disc.value = DISC_META[disc.value];
+    current_disc.value = DISC_META[key];
+  }
+
+  function selectDiscipline(key: string) {
+    setDiscipline(key);
     goToBriefing();
   }
 
@@ -79,7 +136,6 @@ export function useMicrolearning() {
 
   function startTrail() {
     step.value = 0;
-    actChoice.value = null;
     screen.value = ScreensEnum.trail;
   }
 
@@ -90,7 +146,6 @@ export function useMicrolearning() {
       screen.value = ScreensEnum.autoEvalEnd;
     } else {
       step.value++;
-      actChoice.value = null;
     }
   }
 
@@ -100,19 +155,91 @@ export function useMicrolearning() {
 
   function prevStep() {
     if (step.value > 0) step.value--;
+    else goToautoEvalStart();
+  }
+
+  function backToTrail() {
+    screen.value = ScreensEnum.trail;
   }
 
   function restart() {
     screen.value = ScreensEnum.welcome;
     disc.value = null;
-    step.value = 0;
-    actChoice.value = null;
+    current_disc.value = null;
+    resetProgress();
+  }
+
+  function toggleCard(index: number) {
+    const i = flippedCards.value.indexOf(index);
+    if (i === -1) flippedCards.value.push(index);
+    else flippedCards.value.splice(i, 1);
   }
 
-  function chooseActivity(choice: string) {
+  function chooseActivity(choice: ActivityRef | null) {
     actChoice.value = choice;
   }
 
+  // Once the user has seen trail content, "before" answers no longer reflect a baseline
+  watch(screen, (s) => {
+    if (s === ScreensEnum.trail) preLocked.value = true;
+  });
+
+  // =====================
+  // URL SYNC (browser back/forward follow our navigation)
+  // =====================
+  const QUERY_KEYS = ['disc', 'screen', 'step'] as const;
+
+  function toQuery(): Record<string, string> {
+    if (screen.value === ScreensEnum.welcome || !disc.value) return {};
+    const query: Record<string, string> = { disc: disc.value, screen: screen.value };
+    if (screen.value === ScreensEnum.trail) query.step = String(step.value);
+    return query;
+  }
+
+  function sameAsRoute(query: Record<string, string>) {
+    return QUERY_KEYS.every((k) => query[k] === route.query[k]);
+  }
+
+  function applyQuery(query: LocationQuery) {
+    const d = query.disc as string | undefined;
+    const s = query.screen as ScreensEnum | undefined;
+    if (
+      !d ||
+      !DATA[i18n.global.locale.value][d as DiscValue] ||
+      !s ||
+      !Object.values(ScreensEnum).includes(s)
+    ) {
+      screen.value = ScreensEnum.welcome;
+      return;
+    }
+    setDiscipline(d);
+    const maxStep = (currentData.value?.steps.length ?? 1) - 1;
+    step.value = Math.min(Math.max(Number(query.step) || 0, 0), maxStep);
+    screen.value = s;
+  }
+
+  // Keep unrelated params (e.g. ?lang=) untouched
+  function withOtherParams(query: Record<string, string>) {
+    const others = { ...route.query };
+    QUERY_KEYS.forEach((k) => delete others[k]);
+    return { ...others, ...query };
+  }
+
+  watch([screen, step, disc], () => {
+    const query = toQuery();
+    if (!sameAsRoute(query)) router.push({ query: withOtherParams(query) });
+  });
+
+  watch(
+    () => route.query,
+    (query) => {
+      if (!sameAsRoute(toQuery())) applyQuery(query);
+    }
+  );
+
+  // ponytail: answers live in memory only, so a page refresh starts over from the welcome screen
+  if (!sameAsRoute({})) router.replace({ query: withOtherParams({}) });
+
   // =====================
   // RETURN API
   // =====================
@@ -125,10 +252,17 @@ export function useMicrolearning() {
     DISC_LIST,
     step,
     actChoice,
+    flippedCards,
+    flipDone,
+    reflectionAnswers,
+    preAnswers,
+    postAnswers,
+    preLocked,
 
     // derived
     currentData,
     currentStep,
+    chosenActivity,
     currentMeta,
     progress,
     isLastStep,
@@ -140,8 +274,10 @@ export function useMicrolearning() {
     goToautoEvalStart,
     nextStep,
     prevStep,
+    backToTrail,
     goToComplete,
     restart,
-    chooseActivity
+    chooseActivity,
+    toggleCard
   };
 }
diff --git a/src/localisation/en.ts b/src/localisation/en.ts
index 39dcf99..a05d9a5 100644
--- a/src/localisation/en.ts
+++ b/src/localisation/en.ts
@@ -452,7 +452,9 @@ export const en = {
       badge: 'Before you begin',
       title: 'Two quick questions',
       subtitle:
-        'This takes 30 seconds and helps us measure the educational impact of this learning journey.'
+        'This takes 30 seconds and helps us measure the educational impact of this learning journey.',
+      lockedNotice:
+        "You've started the journey, so these answers are now locked. They record where you started, which is how we measure what changed."
     },
     end: {
       badge: 'Before you go',
diff --git a/src/localisation/fr.ts b/src/localisation/fr.ts
index 29807da..0d3f19b 100644
--- a/src/localisation/fr.ts
+++ b/src/localisation/fr.ts
@@ -456,7 +456,9 @@ export const fr = {
     start: {
       badge: 'Avant de commencer',
       title: 'Deux petites questions',
-      subtitle: "30 secondes pour nous aider à mesurer l'apport pédagogique de ce parcours."
+      subtitle: "30 secondes pour nous aider à mesurer l'apport pédagogique de ce parcours.",
+      lockedNotice:
+        'Vous avez commencé le parcours : ces réponses sont donc verrouillées. Elles indiquent votre point de départ, ce qui nous permet de mesurer ce qui a changé.'
     },
     end: {
       badge: 'Avant de partir',
diff --git a/src/localisation/microLearning/en.ts b/src/localisation/microLearning/en.ts
index b1eb4f5..0b89030 100644
--- a/src/localisation/microLearning/en.ts
+++ b/src/localisation/microLearning/en.ts
@@ -35,6 +35,7 @@ export const microLearning = {
     }
   },
   restart: 'Start over',
+  restartConfirm: 'Change discipline? Your progress on this journey will be lost.',
   step: 'Step',
   progressBarLabels: {
     contribution: 'Contributions',
@@ -44,13 +45,19 @@ export const microLearning = {
   },
   flipCards: {
     bravo: '✓ Well done!',
-    completed: "You've explored everything this discipline contributes.",
-    clickToDiscover: 'Click to flip'
+    completed: "You've explored some of the key ways this discipline contributes.",
+    clickToDiscover: 'Click to flip',
+    nextHint: 'Flip all the cards to continue'
   },
   contributions: {
     title: 'What your discipline contributes',
     subtitle: 'By teaching this discipline, you are already contributing to sustainability.'
   },
+  activities: {
+    instruction:
+      "Which of these activities would you most like to try with your students? Pick one, you'll build on it in the next step.",
+    nextHint: 'Choose an activity to continue'
+  },
   competence: {
     title: 'Skills your students develop',
     concretely: 'In practice',
@@ -58,13 +65,17 @@ export const microLearning = {
   },
   reflection: {
     ctaSource: 'View the resource →',
-    resourceSubtitle: 'Mutual contributions and impacts'
+    resourceSubtitle: 'Mutual contributions and impacts',
+    yourPick: 'The activity you picked',
+    yourPickHint: 'Keep it in mind as you answer the questions below.',
+    changePick: 'Change',
+    activityPlaceholder: 'For example: running "{activity}" in my next session on…'
   },
   completeScreen: {
     title: 'Journey complete!',
     subtitle: "You've explored how your discipline connects to sustainability.",
     description:
-      'Next, bring it into your classroom: pick an activity, adapt an example, or read the suggested resource to go further.',
+      "Next, bring it into your classroom. Here's the activity you picked and a resource to go further.",
     primaryButton: 'Create a syllabus with WeLearn',
     secondaryButton: 'Explore another discipline'
   }
diff --git a/src/localisation/microLearning/fr.ts b/src/localisation/microLearning/fr.ts
index 42e0d26..5429a86 100644
--- a/src/localisation/microLearning/fr.ts
+++ b/src/localisation/microLearning/fr.ts
@@ -36,6 +36,7 @@ export const microLearning = {
     }
   },
   restart: 'Recommencer',
+  restartConfirm: 'Changer de discipline ? Votre progression sur ce parcours sera perdue.',
   step: 'Étape',
   progressBarLabels: {
     contribution: 'Les apports',
@@ -45,13 +46,19 @@ export const microLearning = {
   },
   flipCards: {
     bravo: '✓ Bravo !',
-    completed: 'Vous avez découvert tous les apports de cette discipline.',
-    clickToDiscover: 'Cliquez pour découvrir'
+    completed: 'Vous avez découvert quelques-uns des apports clés de cette discipline.',
+    clickToDiscover: 'Cliquez pour découvrir',
+    nextHint: 'Retournez toutes les cartes pour continuer'
   },
   contributions: {
     title: 'Les apports de votre discipline',
     subtitle: 'En enseignant cette discipline, vous contribuez déjà à la transition écologique.'
   },
+  activities: {
+    instruction:
+      "Laquelle de ces activités aimeriez-vous le plus essayer avec vos étudiant·es ? Choisissez-en une, vous la retrouverez à l'étape suivante.",
+    nextHint: 'Choisissez une activité pour continuer'
+  },
   competence: {
     title: 'Les compétences que vos étudiant·es développent',
     concretely: 'Concrètement',
@@ -59,13 +66,17 @@ export const microLearning = {
   },
   reflection: {
     ctaSource: 'Consulter la ressource →',
-    resourceSubtitle: 'Apports croisés et impacts'
+    resourceSubtitle: 'Apports croisés et impacts',
+    yourPick: "L'activité que vous avez choisie",
+    yourPickHint: 'Gardez-la en tête pour répondre aux questions ci-dessous.',
+    changePick: 'Modifier',
+    activityPlaceholder: 'Par exemple : proposer « {activity} » lors de ma prochaine séance sur…'
   },
   completeScreen: {
     title: 'Parcours terminé !',
     subtitle: 'Vous avez exploré les liens entre votre discipline et la transition écologique.',
     description:
-      'La prochaine étape se passe dans votre salle de cours. Choisissez une activité, adaptez un exemple ou consultez la ressource proposée pour aller plus loin.',
+      "La prochaine étape se passe dans votre salle de cours. Voici l'activité que vous avez choisie et une ressource pour aller plus loin.",
     primaryButton: 'Créer un syllabus avec WeLearn',
     secondaryButton: 'Explorer une autre discipline'
   }
diff --git a/src/types/microlearning/index.ts b/src/types/microlearning/index.ts
index 9ca15c4..0c2300f 100644
--- a/src/types/microlearning/index.ts
+++ b/src/types/microlearning/index.ts
@@ -41,6 +41,11 @@ export interface Activity {
   desc: string;
 }
 
+export interface ActivityRef {
+  apport: number;
+  act: number;
+}
+
 export interface Apport {
   label: string;
   color: string;
diff --git a/src/views/MicrolearningModule.vue b/src/views/MicrolearningModule.vue
index 70ce3f8..dbcb49e 100644
--- a/src/views/MicrolearningModule.vue
+++ b/src/views/MicrolearningModule.vue
@@ -14,27 +14,39 @@
       />
       <AutoEvaluationStart
         v-else-if="ml.screen.value == ScreensEnum.autoEvalStart"
+        :answers="ml.preAnswers"
+        :locked="ml.preLocked.value"
+        @back="ml.goToBriefing"
         @start="ml.startTrail"
-        :discipline="$t(`microLearning.disciplineNames.${$t(ml?.current_disc?.value?.id || '')}`)"
+        :discipline="$t(`microLearning.disciplineNames.${ml.disc.value}`)"
       />
       <TrailScreen
         v-else-if="ml.screen.value === ScreensEnum.trail && ml.currentData.value"
         :discipline="ml.currentData.value"
         :step="ml.step.value"
         :disciplineMeta="ml.current_disc.value"
+        :flip-done="ml.flipDone.value"
+        :chosen-activity="ml.chosenActivity.value"
+        :reflection-answers="ml.reflectionAnswers"
+        :flipped-cards="ml.flippedCards.value"
+        @toggle-card="ml.toggleCard"
+        @choose-activity="ml.chooseActivity"
         @previous="ml.prevStep"
         @next="ml.nextStep"
         @restart="ml.restart"
       />
       <AutoEvaluationEnd
         v-else-if="ml.screen.value == ScreensEnum.autoEvalEnd"
+        :answers="ml.postAnswers"
+        @back="ml.backToTrail"
         @start="ml.goToComplete"
-        :discipline="$t(`microLearning.disciplineNames.${$t(ml?.current_disc?.value?.id || '')}`)"
+        :discipline="$t(`microLearning.disciplineNames.${ml.disc.value}`)"
       />
 
       <CompleteScreen
         v-else-if="ml.screen.value === ScreensEnum.complete && ml.currentData.value"
         :discipline="ml.currentData.value"
+        :chosen-activity="ml.chosenActivity.value"
         @restart="ml.restart"
       />
     </Transition>

From 3a368c373a8197164bbdaf41e5d17b420b379bcf Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Mon, 28 Sep 2026 16:04:10 +0200
Subject: [PATCH 2/3] fix(microlearning): make flip cards one-way

Flipped cards stay revealed: clicking a revealed card no longer flips it
back, so its text can be selected and copied, and step completion can no
longer be undone. Renames the toggle event to flip.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/microlearning/TrailScreen.vue     | 4 ++--
 src/components/microlearning/steps/FlipCard.vue  | 8 ++++++--
 src/components/microlearning/steps/FlipCards.vue | 4 ++--
 src/composables/useMicrolearning.ts              | 9 ++++-----
 src/views/MicrolearningModule.vue                | 2 +-
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/microlearning/TrailScreen.vue b/src/components/microlearning/TrailScreen.vue
index 32d2359..52c7a03 100644
--- a/src/components/microlearning/TrailScreen.vue
+++ b/src/components/microlearning/TrailScreen.vue
@@ -17,7 +17,7 @@
             :key="currentStepIndex"
             :step="currentStep"
             v-bind="stepProps"
-            @toggle="$emit('toggleCard', $event as number)"
+            @flip="$emit('flipCard', $event as number)"
             @selected="$emit('chooseActivity', $event as ActivityRef | null)"
             @change-activity="previous"
           />
@@ -71,7 +71,7 @@ const emit = defineEmits<{
   (e: 'previous'): void;
   (e: 'finish'): void;
   (e: 'restart'): void;
-  (e: 'toggleCard', index: number): void;
+  (e: 'flipCard', index: number): void;
   (e: 'chooseActivity', activity: ActivityRef | null): void;
 }>();
 const currentStepIndex = computed(() => props.step);
diff --git a/src/components/microlearning/steps/FlipCard.vue b/src/components/microlearning/steps/FlipCard.vue
index a1f71f3..37e289b 100644
--- a/src/components/microlearning/steps/FlipCard.vue
+++ b/src/components/microlearning/steps/FlipCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flip-card" :class="{ flipped, [card.color]: card.color }" @click="$emit('toggle')">
+  <div class="flip-card" :class="{ flipped, [card.color]: card.color }" @click="!flipped && $emit('flip')">
     <div class="inner">
       <div class="front">
         <h3>
@@ -31,7 +31,7 @@ defineProps<{
 }>();
 
 defineEmits<{
-  (e: 'toggle'): void;
+  (e: 'flip'): void;
 }>();
 </script>
 
@@ -53,6 +53,10 @@ defineEmits<{
   transform-style: preserve-3d;
 }
 
+.flip-card.flipped {
+  cursor: auto;
+}
+
 .flipped .inner {
   transform: rotateY(180deg);
 }
diff --git a/src/components/microlearning/steps/FlipCards.vue b/src/components/microlearning/steps/FlipCards.vue
index 85ba167..a19bbcf 100644
--- a/src/components/microlearning/steps/FlipCards.vue
+++ b/src/components/microlearning/steps/FlipCards.vue
@@ -10,7 +10,7 @@
         :key="index"
         :card="card"
         :flipped="flipped.includes(index)"
-        @toggle="$emit('toggle', index)"
+        @flip="$emit('flip', index)"
       />
     </div>
 
@@ -36,7 +36,7 @@ const props = defineProps<{
 }>();
 
 defineEmits<{
-  (e: 'toggle', index: number): void;
+  (e: 'flip', index: number): void;
 }>();
 
 const completed = computed(() => props.flipped.length === props.step.cards.length);
diff --git a/src/composables/useMicrolearning.ts b/src/composables/useMicrolearning.ts
index 438ac3a..2fb1720 100644
--- a/src/composables/useMicrolearning.ts
+++ b/src/composables/useMicrolearning.ts
@@ -169,10 +169,9 @@ export function useMicrolearning() {
     resetProgress();
   }
 
-  function toggleCard(index: number) {
-    const i = flippedCards.value.indexOf(index);
-    if (i === -1) flippedCards.value.push(index);
-    else flippedCards.value.splice(i, 1);
+  // One-way: cards stay revealed so text can be selected and progress is never undone
+  function flipCard(index: number) {
+    if (!flippedCards.value.includes(index)) flippedCards.value.push(index);
   }
 
   function chooseActivity(choice: ActivityRef | null) {
@@ -278,6 +277,6 @@ export function useMicrolearning() {
     goToComplete,
     restart,
     chooseActivity,
-    toggleCard
+    flipCard
   };
 }
diff --git a/src/views/MicrolearningModule.vue b/src/views/MicrolearningModule.vue
index dbcb49e..0353ccd 100644
--- a/src/views/MicrolearningModule.vue
+++ b/src/views/MicrolearningModule.vue
@@ -29,7 +29,7 @@
         :chosen-activity="ml.chosenActivity.value"
         :reflection-answers="ml.reflectionAnswers"
         :flipped-cards="ml.flippedCards.value"
-        @toggle-card="ml.toggleCard"
+        @flip-card="ml.flipCard"
         @choose-activity="ml.chooseActivity"
         @previous="ml.prevStep"
         @next="ml.nextStep"

From a35ab98d53d750eee8b651f1162e9bc611a9f937 Mon Sep 17 00:00:00 2001
From: Noor A <Noor@MacBook-Pro-de-CRI.local>
Date: Mon, 28 Sep 2026 16:06:53 +0200
Subject: [PATCH 3/3] style(microlearning): prettier format FlipCard

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/microlearning/steps/FlipCard.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/microlearning/steps/FlipCard.vue b/src/components/microlearning/steps/FlipCard.vue
index 37e289b..903a042 100644
--- a/src/components/microlearning/steps/FlipCard.vue
+++ b/src/components/microlearning/steps/FlipCard.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="flip-card" :class="{ flipped, [card.color]: card.color }" @click="!flipped && $emit('flip')">
+  <div
+    class="flip-card"
+    :class="{ flipped, [card.color]: card.color }"
+    @click="!flipped && $emit('flip')"
+  >
     <div class="inner">
       <div class="front">
         <h3>