Update app.py

app.py

@@ -145,7 +145,7 @@ if is_mobile():
     # Interface mobile
     st.markdown('<div class="header-container">', unsafe_allow_html=True)
     if logo:
-        st.image(logo, width=150, use_column_width=False)
+        st.image(logo, width=120, use_container_width=False)
     st.title("FSC: Culture de Sécurité Alimentaire")
     st.markdown('</div>', unsafe_allow_html=True)
 else:
@@ -225,7 +225,19 @@ if st.session_state.selected_list is not None:
             
             st.markdown('<div class="question-card">', unsafe_allow_html=True)
             st.subheader(f"Question {question_num}")
-            st.markdown(f"<p style='font-size: {'18px' if is_mobile() else '20px'}; font-weight: 500;'>{question['Question']}</p>", unsafe_allow_html=True)
+            st.markdown(f"""
+    <div style='
+        background-color: #f8f9fa;
+        padding: 15px;
+        border-radius: 10px;
+        margin-bottom: 15px;
+        border-left: 5px solid #2398B2;
+        font-size: {'18px' if is_mobile() else '20px'};
+        font-weight: 500;
+    '>
+        {question['Question']}
+    </div>
+    """, unsafe_allow_html=True)
 
             # Mélanger les réponses aléatoirement
             reponses = [
@@ -235,11 +247,35 @@ if st.session_state.selected_list is not None:
             ]
             shuffle(reponses)
 
-            # Utiliser des boutons radio pour les réponses (plus adapté aux appareils mobiles)
+            # Utiliser des boutons radio pour les réponses avec style amélioré
+            st.markdown("<label style='font-weight: 500; margin-bottom: 10px;'>Sélectionnez votre réponse :</label>", unsafe_allow_html=True)
+            
+            # Ajout de style CSS pour les boutons radio
+            st.markdown("""
+            <style>
+            div.row-widget.stRadio > div {
+                flex-direction: column;
+                gap: 10px;
+            }
+            div.row-widget.stRadio > div[role="radiogroup"] > label {
+                background-color: #f0f8ff;
+                padding: 10px 15px;
+                border-radius: 10px;
+                border: 1px solid #e0e0e0;
+                transition: all 0.3s;
+            }
+            div.row-widget.stRadio > div[role="radiogroup"] > label:hover {
+                background-color: #e0f0ff;
+                border-color: #2398B2;
+            }
+            </style>
+            """, unsafe_allow_html=True)
+            
             choix = st.radio(
-                "Sélectionnez votre réponse :",
+                "",  # Label vide car déjà ajouté au-dessus
                 [rep[0] for rep in reponses],
-                key=f"radio_{st.session_state.current_question}"
+                key=f"radio_{st.session_state.current_question}",
+                label_visibility="collapsed"  # Masquer le label par défaut
             )
 
             # Bouton pour confirmer la réponse