Improve screen

frontend/src/App.jsx

@@ -211,6 +211,7 @@ function TutorApp({ currentUser, onLogout }) {
   const [programLessons, setProgramLessons] = useState([])
   const [programStatus, setProgramStatus] = useState(null)
   const [studentProgram, setStudentProgram] = useState(null)
+  const [activeAssetIndex, setActiveAssetIndex] = useState(0)
   const [progressPanelOpen, setProgressPanelOpen] = useState(false)
   const [settingsPanelOpen, setSettingsPanelOpen] = useState(false)
   const mediaRecorderRef = useRef(null)
@@ -319,6 +320,10 @@ function TutorApp({ currentUser, onLogout }) {
     }
   }, [selectedVoiceProfileId])
 
+  useEffect(() => {
+    setActiveAssetIndex(0)
+  }, [studentProgram?.id])
+
   useEffect(() => {
     loadVoiceProfiles()
     return () => {
@@ -932,6 +937,8 @@ function TutorApp({ currentUser, onLogout }) {
   const lastAssistantMessage = [...messages].reverse().find((message) => message.role === 'assistant')
   const lastUserMessage = [...messages].reverse().find((message) => message.role === 'user')
   const activeLessonTitle = studentProgram?.title || lessonFocus?.label || 'Cours du jour'
+  const lessonAssets = studentProgram?.assets || []
+  const activeAsset = lessonAssets[activeAssetIndex] || lessonAssets[0] || null
   const lessonSummary = lastAssistantMessage?.content || 'Aucune ancienne séance trouvée pour le moment. Professeur TOP commencera par une reprise courte.'
   const lastStudentWork = lastUserMessage?.content || 'Aucune réponse récente enregistrée.'
   const nextLessonAdvice = studentProgram
@@ -1020,17 +1027,43 @@ function TutorApp({ currentUser, onLogout }) {
             </header>
 
             <section className="lesson-display">
-              <span className="stage-label">Professeur TOP</span>
+              <div className="lesson-display-head">
+                <span className="stage-label">Professeur TOP</span>
+                {activeAsset && (
+                  <span className="asset-counter">
+                    Fiche {activeAssetIndex + 1}/{lessonAssets.length}
+                  </span>
+                )}
+              </div>
               {currentInstruction ? (
-                <p>{currentInstruction}</p>
+                <p className="teacher-transcript">{currentInstruction}</p>
               ) : (
-                <p className="muted">Professeur TOP prépare la suite de la leçon.</p>
+                <p className="muted teacher-transcript">Professeur TOP prépare la suite de la leçon.</p>
               )}
-              {studentProgram?.assets?.length > 0 && (
-                <div className="lesson-assets" aria-label="Fiches de leçon">
-                  {studentProgram.assets.map((asset) => (
-                    <img key={asset.path} src={asset.url} alt={asset.title} />
-                  ))}
+              {activeAsset && (
+                <div className="lesson-asset-view" aria-label="Fiche de leçon active">
+                  <div className="lesson-asset-toolbar">
+                    <strong>{activeAsset.title}</strong>
+                    <div className="lesson-asset-actions">
+                      <button
+                        type="button"
+                        className="secondary-button"
+                        onClick={() => setActiveAssetIndex((index) => Math.max(index - 1, 0))}
+                        disabled={activeAssetIndex === 0}
+                      >
+                        Précédente
+                      </button>
+                      <button
+                        type="button"
+                        className="secondary-button"
+                        onClick={() => setActiveAssetIndex((index) => Math.min(index + 1, lessonAssets.length - 1))}
+                        disabled={activeAssetIndex >= lessonAssets.length - 1}
+                      >
+                        Suivante
+                      </button>
+                    </div>
+                  </div>
+                  <img src={activeAsset.url} alt={activeAsset.title} />
                 </div>
               )}
             </section>

frontend/src/styles.css

@@ -452,7 +452,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.6rem;
   overflow: hidden;
   background: #eef6ff;
   border: 1px solid #cfe4ff;
@@ -461,24 +461,52 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .lesson-display p {
   margin: 0;
-  overflow: auto;
   white-space: pre-wrap;
-  font-size: clamp(1rem, 2.2vw, 1.35rem);
-  line-height: 1.5;
 }
-.lesson-assets {
+.lesson-display-head,
+.lesson-asset-toolbar,
+.lesson-asset-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.asset-counter {
+  color: #64748b;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+.teacher-transcript {
+  max-height: 4.8rem;
+  overflow: auto;
+  color: #14213d;
+  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
+  line-height: 1.45;
+}
+.lesson-asset-view {
   min-height: 0;
   flex: 1 1 auto;
   display: flex;
+  flex-direction: column;
   gap: 0.75rem;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-bottom: 0.25rem;
+  overflow: hidden;
 }
-.lesson-assets img {
-  width: min(100%, 720px);
-  max-height: 100%;
-  flex: 0 0 min(100%, 720px);
+.lesson-asset-toolbar {
+  flex: 0 0 auto;
+}
+.lesson-asset-toolbar strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lesson-asset-actions button {
+  padding: 0.6rem 0.8rem;
+}
+.lesson-asset-view img {
+  width: 100%;
+  min-height: 0;
+  flex: 1 1 auto;
   object-fit: contain;
   border: 1px solid #dbeafe;
   border-radius: 14px;
@@ -717,10 +745,24 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     border-radius: 16px;
   }
 
-  .lesson-display p {
+  .teacher-transcript {
+    max-height: 3.1rem;
     font-size: 1rem;
   }
 
+  .lesson-display-head,
+  .lesson-asset-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .lesson-asset-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+
   .lesson-composer {
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;