New prof

frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+import professeurTopImage from './assets/professeur-top.png'
 
 const API_BASE = '/api'
 const AUTO_STOP_SILENCE_MS = 2500
@@ -37,15 +38,13 @@ function Avatar({ speaking }) {
   return (
     <div className="avatar-shell">
       <div className={`avatar ${speaking ? 'speaking' : ''}`}>
-        <div className="face">
-          <div className="eyes">
-            <span />
-            <span />
-          </div>
-          <div className={`mouth ${speaking ? 'mouth-speaking' : ''}`} />
-        </div>
+        <img
+          className="avatar-image"
+          src={professeurTopImage}
+          alt="Professeur TOP"
+        />
       </div>
-      <div className="avatar-caption">ProfAmi</div>
+      <div className="avatar-caption">Professeur TOP</div>
     </div>
   )
 }
@@ -646,7 +645,7 @@ export default function App() {
           {messages.length === 0 && <p className="muted">Le dialogue apparaîtra ici.</p>}
           {messages.map((message) => (
             <div key={message.id} className={`message ${message.role}`}>
-              <strong>{message.role === 'assistant' ? 'ProfAmi' : 'Élève'}</strong>
+              <strong>{message.role === 'assistant' ? 'Professeur TOP' : 'Élève'}</strong>
               <p>{message.content}</p>
             </div>
           ))}

frontend/src/styles.css

@@ -96,37 +96,17 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .avatar {
   width: 144px;
   height: 144px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b);
-  display: grid;
-  place-items: center;
+  border-radius: 28px;
+  overflow: hidden;
+  background: white;
   box-shadow: 0 10px 20px rgba(245, 158, 11, 0.28);
 }
 .avatar.speaking { animation: pulse 0.7s infinite alternate; }
-.face { width: 90px; }
-.eyes {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 1.2rem;
-}
-.eyes span {
-  width: 14px;
-  height: 14px;
-  background: #1f2937;
-  border-radius: 50%;
-}
-.mouth {
-  width: 44px;
-  height: 10px;
-  background: #7c2d12;
-  border-radius: 999px;
-  margin: 0 auto;
-  transition: all 0.15s ease;
-}
-.mouth-speaking {
-  width: 34px;
-  height: 24px;
-  border-radius: 0 0 999px 999px;
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
 .avatar-caption { font-weight: 700; }