cooperator diagram and text added

members_space/static/css/members-space-my-info.css

@@ -46,6 +46,14 @@
     word-break: break-all;
 }
 
+.my_info_line_middle {
+    width: 70%;
+    max-width: 100%;
+    word-break: normal;
+    text-align: center;
+    margin: 3rem 0;
+}
+
 #my_info #member_status_action,
 #my_info .member_shift_name_area,
 #my_info .member_coop_number_area {
@@ -121,3 +129,10 @@
         align-items: flex-start;
     }   
 }
+
+
+.status_info_image {
+  display: block;
+  margin: 5rem auto 5rem auto;
+  width: 50%;
+}

templates/members_space/my_info.html

@@ -90,17 +90,29 @@
         <div class="tile full_width_tile" id="attached_info_area">
             <div class="tile_title">
                 Mon Binôme
-              </div>
+            </div>
             <div class="tile_content" id="attached_info">
-                <div class="my_info_line attached_partne_name_line">
+                <div class="my_info_line attached_partner_name_line">
                     <div class="my_info_line_left">
                         Je suis en binôme avec :
                     </div>
-                    <div class="my_info_line_right attached_partne_name_area">
+                    <div class="my_info_line_right attached_partner_name_area">
                         <span class="attached_partner_name member_info"></span>
                     </div>
                 </div>
             </div>
         </div>
+        <div class="tile full_width_tile">
+            <div class="tile_title">
+                Comprendre mon statut
+            </div>
+            <div class="my_info_line_middle">
+                Il existe différents statuts à La Cagette donnant ou non le droit de faire ses courses. Voici un schéma explicatif expliquant le passage d'un statut à un autre. Pour toute question relative aux statuts, rendez&#x2011;vous dans la rubrique <a href='faq'>Problèmes&nbsp;&&nbsp;Demandes</a>.
+            </div>
+            <a href="/static/img/diagramme_etat_statut_cooperateurs.png" target=”_blank”>
+                <img class="status_info_image" src="/static/img/diagramme_etat_statut_cooperateurs.png" alt="diagramme_etat_statut_cooperateurs"/>
+            </a>
+
+        </div>
     </div>
 </div>