flex-table accompanyingcourse-list used in two contexts + wraplist title style

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss

@@ -12,16 +12,18 @@ div.accompanyingcourse-resume {
     }
 }
 
-/// AccompanyingPeriod list
-div.accompanyingcourse-list, div.household-members {
-    .flex-table .item-bloc .item-row {
-        &:nth-child(2) {
-            flex-direction: row;
-        }
-        &:last-child {
-            flex-direction: column;
-        }
+/// AccompanyingPeriod list Page (in person/household context)
+div.accompanyingcourse-list {
+    &.flex-table .item-bloc .item-row {
+        //&:nth-child(2) { flex-direction: row; }
+        //&:last-child { flex-direction: column; }
     }
+    div.title h3 {
+        font-weight: 700;
+        font-size: 100%;
+        font-family: 'Open Sans';
+    }
+    div.list {}
 }
 
 /// Search Page (list_with_period.html.twig)
@@ -40,7 +42,7 @@ div.list-with-period {
                 &.title {
                     width: 34%;
                     @include media-breakpoint-up(md) {
-                        margin-left: 0;
+                        //margin-left: 0;
                     }
                 }
                 &.list {

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/_list.html.twig

@@ -1,5 +1,5 @@
 {% block content %}
-    <div class="flex-table">
+    <div class="flex-table accompanyingcourse-list">
         {% for accompanying_period in accompanying_periods %}
             <div class="item-bloc">
                 <div class="item-row">

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/list.html.twig

@@ -5,7 +5,7 @@
 {% block title %}{{ 'Accompanying period list'|trans }}{% endblock title %}
 
 {% block personcontent %}
-<div class="accompanyingcourse-list">
+<div class="person-accompanyingperiods">
 
     <h1>{{ 'Accompanying period list'|trans }}</h1>