Improve style

backend/app/program_content.py

@@ -25,6 +25,7 @@ def default_content_root() -> Path:
 
 
 CONTENT_ROOT = Path(os.getenv("PROGRAM_CONTENT_ROOT", default_content_root())).resolve()
+LESSON_BACKGROUND = "#f5f7fb"
 
 GRADE_ALIASES = {
     "CM1": "cm1",
@@ -134,6 +135,32 @@ def render_svg_section(path: Path, section_index: int) -> str:
         raise IndexError("Section introuvable")
     x, y, width, height = sections[section_index]["view_box"]
     text = path.read_text(encoding="utf-8", errors="ignore")
+    first_group_index = text.find("<g ")
+    if first_group_index > -1:
+        before_groups = text[:first_group_index]
+        after_groups = text[first_group_index:]
+        before_groups = re.sub(
+            r"\.bg\s*\{[^}]*\}",
+            f".bg {{ fill: {LESSON_BACKGROUND}; }}",
+            before_groups,
+            count=1,
+        )
+        before_groups = re.sub(
+            r"\.panel\s*\{[^}]*\}",
+            (
+                ".panel { fill: #ffffff; stroke: #d5e0dc; stroke-width: 3; "
+                "filter: drop-shadow(0 10px 24px rgba(22, 42, 45, 0.08)); }"
+            ),
+            before_groups,
+            count=1,
+        )
+        before_groups = re.sub(
+            r'(<rect\b(?=[^>]*class="panel")(?=[^>]*/>)[^>]*)/>',
+            rf'\1 style="fill:{LESSON_BACKGROUND};stroke:none;filter:none"/>',
+            before_groups,
+            count=1,
+        )
+        text = before_groups + after_groups
     text = re.sub(r'\swidth="[^"]+"', f' width="{int(width)}"', text, count=1)
     text = re.sub(r'\sheight="[^"]+"', f' height="{int(height)}"', text, count=1)
     text = re.sub(

frontend/src/styles.css

@@ -320,15 +320,16 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   height: 144px;
   border-radius: 0;
   overflow: hidden;
-  background: transparent;
+  background: #f5f7fb;
   box-shadow: none;
 }
 .avatar.speaking { animation: pulse 0.7s infinite alternate; }
 .avatar-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   display: block;
+  mix-blend-mode: multiply;
 }
 .avatar-caption { font-weight: 700; }
 .login-page {
@@ -513,7 +514,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   flex-direction: column;
   gap: 0.4rem;
   padding: 0;
-  background: transparent;
+  background: #f5f7fb;
   color: #14213d;
   border: none;
 }
@@ -523,8 +524,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   flex: 1 1 auto;
   object-fit: contain;
   border: 0;
-  border-radius: 0;
-  background: transparent;
+  border-radius: 30px;
+  background: #f5f7fb;
 }
 .lesson-bubble {
   min-height: 68px;
@@ -791,7 +792,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
     max-height: none;
     border-left: 0;
     border-right: 0;
-    border-radius: 0;
+    border-radius: 24px;
   }
 
   .lesson-composer {