diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index cee10d6..eb85d1c 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -1909,7 +1909,6 @@ a {
         .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row {
           width: 50%; }
           .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .node-type-offre_de_service {
-            border: 2px solid #009ee3;
             padding: 1rem;
             height: fit-content;
             margin-bottom: 1rem;
@@ -1978,11 +1977,21 @@ a {
                 .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .node-type-offre_de_service div:first-of-type .field--name-field-date-de-proposition::after {
                   content: url("../images/pictos/noun_Arrow_3771902.svg");
                   align-self: flex-end; }
-        @media (max-width: 810px) {
-          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content {
-            flex-direction: column; }
+          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .type-de-protagoniste-5 {
+            border: 2px solid #ff000f; }
+          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .type-de-protagoniste-6 {
+            border: 2px solid #a01a27; }
+          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .type-de-protagoniste-7 {
+            border: 2px solid #c7d74a; }
+          .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .type-de-protagoniste-8 {
+            border: 2px solid #ff6453; }
+            .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .type-de-protagoniste-8 .type-de-protagoniste-9 {
+              border: 2px solid #6f6d7d; }
+          @media (max-width: 810px) {
             .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row {
-              width: 100%; } }
+              flex-direction: column; }
+              .offresdeservices .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockoffres-de--block-1 .view-content .views-row .views-row {
+                width: 100%; } }
 
 .page-node-type-offre-de-service {
   background: url("../images/pictos/carre-contour-bleu-offre.svg");
@@ -2844,16 +2853,20 @@ a {
         display: flex;
         flex-direction: column;
         display: none;
+        min-width: 100px;
+        justify-content: space-between;
         background: white; }
         #header-top .region-header-top-left ul ul .is-active {
           color: #009ee3; }
       #header-top .region-header-top-left ul li {
         display: flex;
         flex-direction: column;
+        justify-content: space-between;
         background-color: white;
         padding-bottom: 0.8rem;
-        min-width: 30%;
-        align-items: center; }
+        max-width: inherit;
+        align-items: center;
+        padding-left: 0; }
         #header-top .region-header-top-left ul li .menuOpen {
           display: flex; }
         #header-top .region-header-top-left ul li a {
diff --git a/web/themes/custom/eql/eql.theme b/web/themes/custom/eql/eql.theme
index b348e53..fdf705f 100644
--- a/web/themes/custom/eql/eql.theme
+++ b/web/themes/custom/eql/eql.theme
@@ -15,8 +15,10 @@ function eql_preprocess_html(&$variables) {
     $variables['attributes']['class'][] = 'node-type-' . $node->bundle();
     $variables['attributes']['class'][] = 'node-id-' . $node->id();
   }
+ 
 }
 
+
 function eql_preprocess_node(&$variables){
   $node = &$variables['node'];
   $variables['attributes']['class'][] = 'node-type-' . $node->gettype();
@@ -24,11 +26,21 @@ function eql_preprocess_node(&$variables){
     $actu_type = $node->get('field_actu_type')->getString();
     $variables['attributes']['class'][] = 'actu-type-' . $actu_type;
   }
+  if($node->gettype() == "offre_de_service") {
+    $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
+    $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
+  }
+  
 }
 
+
 ///////////////////////////////////////////////////
 
 
+
+
+///////////////////////////////////////////////////
+
 // counter pour id
 
             // function eql_preprocess_field(&$variables) {
diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js
index ea894a8..34d705b 100644
--- a/web/themes/custom/eql/scripts/main.js
+++ b/web/themes/custom/eql/scripts/main.js
@@ -129,7 +129,41 @@ jQuery(function($) {
  });
 
 
+ ///////////////////////////////////////////
+ // border box change color when protagoniste change
 
+// var protagoniste = document.getElementsByClassName("type-de-protagoniste-7");
+// console.log(protagoniste);
+// ressource.classList.add('opened');
+
+
+
+/**
+ * Return the term id for a given term name.
+ */
+
+//  function _get_tid_from_term_name($term_name) {
+//   $vocabulary = 'Type de protagoniste';
+//   $arr_terms = taxonomy_get_term_by_name($term_name, $vocabulary);
+//   if (!empty($arr_terms)) {
+//     $arr_terms = array_values($arr_terms);
+//     $tid = $arr_terms[0]->tid;
+//   }
+//   else {
+//     $vobj = taxonomy_vocabulary_machine_name_load($vocabulary);
+//     $term = new stdClass();
+//     $term->name = $term_name;
+//     $term->vid = $vobj->vid;
+//     taxonomy_term_save($term);
+//     $tid = $term->tid;
+//   }
+//   return $tid;
+// }
+
+// function getVal() {
+//   const val = document. querySelector('input').value;
+//   log(val);
+// }
 // /////////////////
 //// ancre dans texte
 // document.querySelector('.paragraph--view-mode--textes-toc').click( function() {
diff --git a/web/themes/custom/eql/scss/pages/_offresdeservices.scss b/web/themes/custom/eql/scss/pages/_offresdeservices.scss
index 9c0b35c..49d9897 100644
--- a/web/themes/custom/eql/scss/pages/_offresdeservices.scss
+++ b/web/themes/custom/eql/scss/pages/_offresdeservices.scss
@@ -107,16 +107,18 @@
                                 .views-row{
                                     width: 50%;
                                     .node-type-offre_de_service{
-                                        // display: flex;
+                                         // display: flex;
                                         // flex-direction: column;
-                                       
-                                        border: 2px solid $blue-light;
+                                        // border: 2px solid rgb(199, 215, 74); 
+
+                                        // border: 2px solid $blue-light;
                                         padding: 1rem;
                                         height: fit-content;
                                         margin-bottom: 1rem;
                                         background-color: $white;
                                         margin-right: 1rem;
                                         // height: 200px;
+                                       
                                         div:first-of-type{
                                             display: grid;
                                             grid-template-columns: 1fr 1fr 1fr;
@@ -202,8 +204,21 @@
 
                                             }
                                         }
-                                        
-                                        
+                                    }
+                                    .type-de-protagoniste-5{
+                                        border: 2px solid rgb(255, 0, 15); 
+                                    }
+                                    .type-de-protagoniste-6{
+                                        border: 2px solid rgb(160, 26, 39); 
+                                    }
+                                    .type-de-protagoniste-7{
+                                        border: 2px solid rgb(199, 215, 74); 
+                                    }
+                                    .type-de-protagoniste-8{
+                                        border: 2px solid rgb(255, 100, 83); 
+
+                                    .type-de-protagoniste-9{
+                                        border: 2px solid rgb(111, 109, 125); 
                                     }
                                 }
                                 @media (max-width: 810px){
@@ -214,15 +229,10 @@
                                 }
                             }
                         }
-                     
-                            
-                        
-
-
                     }
-
                 }
             }
         }
     }
 }
+}
diff --git a/web/themes/custom/eql/scss/partials/_header.scss b/web/themes/custom/eql/scss/partials/_header.scss
index ba17478..845a93b 100644
--- a/web/themes/custom/eql/scss/partials/_header.scss
+++ b/web/themes/custom/eql/scss/partials/_header.scss
@@ -75,19 +75,21 @@
             display: flex;
             flex-direction: row;
             justify-content: space-between;
+            // margin-right: 20px;
             width: 100%;
             padding: 1rem;
-
             .is-active{
                 color:$blue-light;
             }
             ul{
-
                 display: flex;
                 flex-direction: column;
                 display: none;
+                min-width: 100px;
+                justify-content: space-between;
                 background:$white;
-                
+                // padding-inline-start: 0;
+            
                 .is-active{
                     color:$blue-light;
                 }
@@ -95,10 +97,12 @@
             li{
                 display: flex;
                 flex-direction: column;
+                justify-content: space-between;
                 background-color: $white;
                 padding-bottom: 0.8rem;
-                min-width: 30%;
+                max-width: inherit;
                 align-items: center;
+                padding-left: 0;
                 .menuOpen{
                     display: flex;
                 }
diff --git a/web/themes/custom/eql/templates/field--field-type-de-protagoniste.html.twig b/web/themes/custom/eql/templates/field--field-type-de-protagoniste.html.twig
new file mode 100644
index 0000000..28f8951
--- /dev/null
+++ b/web/themes/custom/eql/templates/field--field-type-de-protagoniste.html.twig
@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+    'entity--type-' ~ entity_type|clean_class,
+    
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{%
+  set protagoniste = 'protagoniste-id--' ~ taxonomy_term.id()
+%}
+
+  {% if label_hidden %}
+    {% if multiple %}
+      <div{{ attributes.addClass(classes, 'field__items')}}>
+        
+        {% for item in items %}
+          <div{{ item.attributes.addClass('field__item', protagoniste) }}>{{ item.content }}</div>
+        {% endfor %}
+      </div>
+    {% else %}
+      {% for item in items %}
+
+
+        <div {{ attributes.addClass(classes, 'field__item', protagoniste) }}>{{ item.content }}</div>
+
+      {% endfor %}
+    {% endif %}
+  {% else %}
+    <div{{ attributes.addClass(classes) }}>
+      <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+      {% if multiple %}
+        <div class="field__items">
+      {% endif %}
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+      {% if multiple %}
+        </div>
+      {% endif %}
+    </div>
+  {% endif %}
+
+
+