diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css
index eb85d1c..a10c18e 100644
--- a/web/themes/custom/eql/css-compiled/styles.css
+++ b/web/themes/custom/eql/css-compiled/styles.css
@@ -1985,13 +1985,13 @@ a {
             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 .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 {
+            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 {
-              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%; } }
+              width: 100%; } }
 
 .page-node-type-offre-de-service {
   background: url("../images/pictos/carre-contour-bleu-offre.svg");
@@ -2028,9 +2028,18 @@ a {
       grid-column: 2 /span 3;
       grid-row: 1;
       text-transform: uppercase;
-      color: #a01a27;
       font-weight: 900;
       font-size: 0.8rem; }
+      .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-protagoniste .type-de-protagoniste-5 {
+        color: #ff000f; }
+      .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-protagoniste .type-de-protagoniste-6 {
+        color: #a01a27; }
+      .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-protagoniste .type-de-protagoniste-7 {
+        color: #c7d74a; }
+      .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-protagoniste .type-de-protagoniste-8 {
+        color: #ff6453; }
+      .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-type-de-protagoniste .type-de-protagoniste-9 {
+        color: #6f6d7d; }
     .page-node-type-offre-de-service .layout__region--top .block-region-top .block-entity-fieldnodefield-prenom {
       background: white;
       width: fit-content;
diff --git a/web/themes/custom/eql/eql.theme b/web/themes/custom/eql/eql.theme
index fdf705f..e3d2861 100644
--- a/web/themes/custom/eql/eql.theme
+++ b/web/themes/custom/eql/eql.theme
@@ -15,7 +15,6 @@ function eql_preprocess_html(&$variables) {
     $variables['attributes']['class'][] = 'node-type-' . $node->bundle();
     $variables['attributes']['class'][] = 'node-id-' . $node->id();
   }
- 
 }
 
 
@@ -33,6 +32,47 @@ function eql_preprocess_node(&$variables){
   
 }
 
+/**
+ * Implements hook_preprocess_field().
+ */
+function eql_preprocess_field(&$variables) {
+  $node = \Drupal::routeMatch()->getParameter('node');
+  if($node) {
+    $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
+    $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
+  }
+}
+
+
+
+// function eql_preprocess_field(&$variables){
+//   $node = &$variables['node'];
+//   $variables['attributes']['class'][] = 'node-type-' . $node->gettype();
+//   if($node->gettype() == "offre_de_service") {
+//     $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
+//     $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
+//   }
+// }
+
+// function MYTHEME_preprocess_field__MYFIELD(&$variables) {
+
+//   if ($variables['element']['#entity_type'] === 'node') {
+//     $node = $variables['element']['#object'];
+//     $nid = $node->id();
+//     $variables['myurl'] = \Drupal::service('path.alias_manager')->getAliasByPath('/node/' . $nid);
+//   }
+// }
+
+// function template_preprocess_block(&$variables) {
+//   $node = &$variables['node'];
+//   $variables['attributes']['class'][] = 'node-type-' . $node->gettype();
+//   if($node->gettype() == "offre_de_service") {
+//     $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
+//     $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
+//   }
+// }
+
+
 
 ///////////////////////////////////////////////////
 
diff --git a/web/themes/custom/eql/scss/pages/_offre.scss b/web/themes/custom/eql/scss/pages/_offre.scss
index 857ffdf..22216e0 100644
--- a/web/themes/custom/eql/scss/pages/_offre.scss
+++ b/web/themes/custom/eql/scss/pages/_offre.scss
@@ -41,11 +41,26 @@
                     grid-column: 2 /span 3;
                     grid-row: 1;
                     text-transform: uppercase;
-                    color: rgb(160, 26, 39);
+                    // color: rgb(160, 26, 39);
                     font-weight: 900;
                     font-size: 0.8rem;
-                
+                    .type-de-protagoniste-5{
+                        color: rgb(255, 0, 15);
+                    }
+                    .type-de-protagoniste-6{
+                        color:rgb(160, 26, 39);
+                    }
+                    .type-de-protagoniste-7{
+                        color: rgb(199, 215, 74);
+                    }
+                    .type-de-protagoniste-8{
+                        color:rgb(255, 100, 83);
+                    }
+                    .type-de-protagoniste-9{
+                        color:rgb(111, 109, 125);
+                    }
                 }
+
                 .block-entity-fieldnodefield-prenom{
                     background: $white;
                     width: fit-content;
@@ -326,4 +341,4 @@
         }
     // }
     
-}
\ No newline at end of file
+}
diff --git a/web/themes/custom/eql/scss/pages/_offresdeservices.scss b/web/themes/custom/eql/scss/pages/_offresdeservices.scss
index 49d9897..4c5a270 100644
--- a/web/themes/custom/eql/scss/pages/_offresdeservices.scss
+++ b/web/themes/custom/eql/scss/pages/_offresdeservices.scss
@@ -207,18 +207,33 @@
                                     }
                                     .type-de-protagoniste-5{
                                         border: 2px solid rgb(255, 0, 15); 
+                                        // .field--name-field-type-de-protagoniste{
+                                        //     color: rgb(255, 0, 15);
+                                        // }
                                     }
                                     .type-de-protagoniste-6{
                                         border: 2px solid rgb(160, 26, 39); 
+                                        // .field--name-field-type-de-protagoniste{
+                                        //     color:rgb(160, 26, 39) ;
+                                        // }
                                     }
                                     .type-de-protagoniste-7{
                                         border: 2px solid rgb(199, 215, 74); 
+                                        // .field--name-field-type-de-protagoniste{
+                                        //     color: rgb(199, 215, 74);
+                                        // }
                                     }
                                     .type-de-protagoniste-8{
                                         border: 2px solid rgb(255, 100, 83); 
-
+                                        // .field--name-field-type-de-protagoniste{
+                                        //     color:rgb(255, 100, 83) ;
+                                        // }
+                                    }
                                     .type-de-protagoniste-9{
-                                        border: 2px solid rgb(111, 109, 125); 
+                                        border: 2px solid rgb(111, 109, 125);
+                                        // .field--name-field-type-de-protagoniste{
+                                        //     color:rgb(111, 109, 125) ;
+                                        // } 
                                     }
                                 }
                                 @media (max-width: 810px){
@@ -235,4 +250,4 @@
         }
     }
 }
-}
+
diff --git a/web/themes/custom/eql/templates/block--entity-field--node--field-type-de-protagoniste.html.twig b/web/themes/custom/eql/templates/block--entity-field--node--field-type-de-protagoniste.html.twig
new file mode 100644
index 0000000..bae1217
--- /dev/null
+++ b/web/themes/custom/eql/templates/block--entity-field--node--field-type-de-protagoniste.html.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * @file
+ * Theme override to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{%
+  set classes = [
+    'block',
+    'block-' ~ configuration.provider|clean_class,
+    'block-' ~ plugin_id|clean_class,
+  ]
+%}
+
+
+
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <span><h2{{ title_attributes }}>{{ label }}</h2></span>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</div>
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
index 28f8951..f854907 100644
--- 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
@@ -45,7 +45,6 @@
     'field--type-' ~ field_type|clean_class,
     'field--label-' ~ label_display,
     label_display == 'inline' ? 'clearfix',
-    'entity--type-' ~ entity_type|clean_class,
     
   ]
 %}
@@ -56,40 +55,35 @@
   ]
 %}
 
-{%
-  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 %}
+{% if label_hidden %}
+	{% if multiple %}
+		<div{{attributes.addClass(classes,'field__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 %}
+			{% for item in items %}
+				<div{{item.attributes.addClass('field__item')}}{{ item.content }}></div>
+			{% endfor %}
+		</div>
+	{% else %}
+		{% for item in items %}
 
 
+			<div {{ attributes.addClass(classes, 'field__item') }}>{{ 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 %}
diff --git a/web/themes/custom/eql/templates/layout/html--node.html.twig b/web/themes/custom/eql/templates/layout/html--node.html.twig
new file mode 100644
index 0000000..47b2c54
--- /dev/null
+++ b/web/themes/custom/eql/templates/layout/html--node.html.twig
@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Theme override for the basic structure of a single Drupal page.
+ *
+ * Variables:
+ * - logged_in: A flag indicating if user is logged in.
+ * - root_path: The root path of the current page (e.g., node, admin, user).
+ * - node_type: The content type for the current node, if the page is a node.
+ * - head_title: List of text elements that make up the head_title variable.
+ *   May contain one or more of the following:
+ *   - title: The title of the page.
+ *   - name: The name of the site.
+ *   - slogan: The slogan of the site.
+ * - page_top: Initial rendered markup. This should be printed before 'page'.
+ * - page: The rendered page markup.
+ * - page_bottom: Closing rendered markup. This variable should be printed after
+ *   'page'.
+ * - db_offline: A flag indicating if the database is offline.
+ * - placeholder_token: The token for generating head, css, js and js-bottom
+ *   placeholders.
+ *
+ * @see template_preprocess_html()
+ */
+#}
+{%
+  set body_classes = [
+    logged_in ? 'user-logged-in',
+    not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
+    node_type ? 'page-node-type-' ~ node_type|clean_class,
+  
+    db_offline ? 'db-offline',
+    'offresdeservices',
+  ]
+%}
+<!DOCTYPE html>
+<html{{ html_attributes }}>
+  <head>
+    <head-placeholder token="{{ placeholder_token }}">
+    <title>{{ head_title|safe_join(' | ') }}</title>
+    <css-placeholder token="{{ placeholder_token }}">
+    <js-placeholder token="{{ placeholder_token }}">
+  </head>
+  <body{{ attributes.addClass(body_classes) }}>
+    {#
+      Keyboard navigation/accessibility link to main content section in
+      page.html.twig.
+    #}
+    <a href="#main-content" class="visually-hidden focusable skip-link">
+      {{ 'Skip to main content'|t }}
+    </a>
+    {{ page_top }}
+    {{ page }}
+    {{ page_bottom }}
+    <js-bottom-placeholder token="{{ placeholder_token }}">
+  </body>
+</html>
\ No newline at end of file
diff --git a/web/themes/custom/eql/templates/layout/html--ressources--offresdeservice.html.twig b/web/themes/custom/eql/templates/layout/html--ressources--offresdeservice.html.twig
index b8ec168..47b2c54 100644
--- a/web/themes/custom/eql/templates/layout/html--ressources--offresdeservice.html.twig
+++ b/web/themes/custom/eql/templates/layout/html--ressources--offresdeservice.html.twig
@@ -28,6 +28,7 @@
     logged_in ? 'user-logged-in',
     not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
     node_type ? 'page-node-type-' ~ node_type|clean_class,
+  
     db_offline ? 'db-offline',
     'offresdeservices',
   ]