Improve phone

frontend/src/App.jsx

@@ -212,6 +212,7 @@ function TutorApp({ currentUser, onLogout }) {
   const [programStatus, setProgramStatus] = useState(null)
   const [studentProgram, setStudentProgram] = useState(null)
   const [activeAssetIndex, setActiveAssetIndex] = useState(0)
+  const [assetFullscreenOpen, setAssetFullscreenOpen] = useState(false)
   const [progressPanelOpen, setProgressPanelOpen] = useState(false)
   const [settingsPanelOpen, setSettingsPanelOpen] = useState(false)
   const mediaRecorderRef = useRef(null)
@@ -509,6 +510,7 @@ function TutorApp({ currentUser, onLogout }) {
     stopSpeechPlayback()
     deactivateAutoListening(false)
     setSessionActive(false)
+    setAssetFullscreenOpen(false)
     setProgressPanelOpen(false)
     setSettingsPanelOpen(false)
     setCurrentInstruction('')
@@ -1063,7 +1065,15 @@ function TutorApp({ currentUser, onLogout }) {
                       </button>
                     </div>
                   </div>
-                  <img src={activeAsset.url} alt={activeAsset.title} />
+                  <button
+                    type="button"
+                    className="lesson-asset-open"
+                    onClick={() => setAssetFullscreenOpen(true)}
+                    aria-label="Agrandir la fiche"
+                  >
+                    <img src={activeAsset.url} alt={activeAsset.title} />
+                    <span>Agrandir la fiche</span>
+                  </button>
                 </div>
               )}
             </section>
@@ -1140,6 +1150,38 @@ function TutorApp({ currentUser, onLogout }) {
                 </aside>
               </div>
             )}
+
+            {assetFullscreenOpen && activeAsset && (
+              <div className="asset-fullscreen" role="dialog" aria-label="Fiche agrandie">
+                <div className="asset-fullscreen-bar">
+                  <strong>Fiche {activeAssetIndex + 1}/{lessonAssets.length}</strong>
+                  <button type="button" className="secondary-button" onClick={() => setAssetFullscreenOpen(false)}>
+                    Fermer
+                  </button>
+                </div>
+                <div className="asset-fullscreen-stage">
+                  <img src={activeAsset.url} alt={activeAsset.title} />
+                </div>
+                <div className="asset-fullscreen-controls">
+                  <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>
+            )}
           </main>
         )}
       </div>

frontend/src/styles.css

@@ -503,7 +503,18 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .lesson-asset-actions button {
   padding: 0.6rem 0.8rem;
 }
-.lesson-asset-view img {
+.lesson-asset-open {
+  min-height: 0;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0;
+  background: transparent;
+  color: #14213d;
+  border: none;
+}
+.lesson-asset-open img {
   width: 100%;
   min-height: 0;
   flex: 1 1 auto;
@@ -512,6 +523,43 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   border-radius: 14px;
   background: white;
 }
+.lesson-asset-open span {
+  display: none;
+  color: #2563eb;
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+.asset-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: #f5f7fb;
+}
+.asset-fullscreen-bar,
+.asset-fullscreen-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.asset-fullscreen-stage {
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid #dbeafe;
+  border-radius: 16px;
+  background: white;
+}
+.asset-fullscreen-stage img {
+  display: block;
+  width: max(100%, 980px);
+  height: auto;
+  min-height: 100%;
+  object-fit: contain;
+}
 .lesson-bubble {
   min-height: 68px;
 }
@@ -746,21 +794,50 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   }
 
   .teacher-transcript {
-    max-height: 3.1rem;
-    font-size: 1rem;
+    max-height: 2.7rem;
+    font-size: 0.95rem;
   }
 
   .lesson-display-head,
   .lesson-asset-toolbar {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 0.4rem;
+    align-items: center;
+    flex-direction: row;
+    gap: 0.5rem;
   }
 
   .lesson-asset-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .lesson-asset-actions button {
+    padding: 0.45rem 0.55rem;
+    font-size: 0.86rem;
+  }
+
+  .lesson-asset-toolbar strong {
+    font-size: 0.95rem;
+  }
+
+  .lesson-asset-open span {
+    display: block;
+  }
+
+  .lesson-asset-open img {
+    max-height: 24dvh;
+  }
+
+  .asset-fullscreen {
+    padding: 0.5rem;
+  }
+
+  .asset-fullscreen-stage img {
+    width: max(100%, 1120px);
+  }
+
+  .asset-fullscreen-controls {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0.5rem;
   }
 
   .lesson-composer {