diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fc3cd50..22f815c 100644
--- a/frontend/src/App.jsx
+++ b/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 }) {
-
+
)}
@@ -1140,6 +1150,38 @@ function TutorApp({ currentUser, onLogout }) {
)}
+
+ {assetFullscreenOpen && activeAsset && (
+
+
+ Fiche {activeAssetIndex + 1}/{lessonAssets.length}
+
+
+
+

+
+
+
+
+
+
+ )}
)}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index f2fca2f..b0b4020 100644
--- a/frontend/src/styles.css
+++ b/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 {