page ressource && participant

web/sites/development.services.yml

@@ -5,7 +5,7 @@
 parameters:
   http.response.debug_cacheability_headers: true
   twig.config:
-    debug: false
+    debug: true
     auto_reload: true
 services:
   cache.backend.null:

web/themes/custom/popsu_colloque/css-compiled/typography.min.css

@@ -1 +1 @@
-main #block-views-block-slide-programme-block-1 .thumbnails a{color:#000}
+main h2{text-transform:uppercase}main h3{margin:2rem 0;text-transform:uppercase}.more_link span{padding-left:.5rem}

web/themes/custom/popsu_colloque/css/components/forms/filter.scss

@@ -0,0 +1,22 @@
+#views-exposed-form-publications-page-1,
+#views-exposed-form-bibliographie-page-1{
+  margin: 2rem 0;
+  display: flex;
+  & > div{
+    margin-right: 2rem;
+    select{
+      border: 1px solid $color2;
+      background: white;
+      padding: 0.2rem 0.5rem;
+      outline: none;
+      &:focus{
+        border: 2px solid $color2;
+        outline: none;
+      }
+      option{
+        padding: 0.2rem 0.5rem;
+        min-height: 2rem;
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/components/header/sub_menu.scss

@@ -0,0 +1,21 @@
+#block-popsu-colloque-submenu{
+  ul{
+    display: flex;
+    li{
+      margin-right: 1rem;
+      a{
+        display: block;
+        padding: 1rem 1rem;
+        border: 1px solid $color2;
+        color: $color2;
+        background: white;
+        transition: color 0.3s ease, background 0.3s ease;
+        &:hover{
+          color: white;
+          background: blue;
+          transition: all 0.3s ease;
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/components/hero.scss

@@ -1,14 +1,67 @@
 .__img-hero{
   height: 400px;
-  // width: 100vw;
-  // position: relative;
-  // left: 50%;
-  // right: 50%;
-  // margin-left: -50vw;
-  // margin-right: -50vw;
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
     img{
       width:100%;
       height: 100%;
       object-fit: cover;
     }
 }
+
+
+.participant_full{
+  .hero{
+    figure{
+      width:100%;
+      .__img{
+        &> div{
+          margin: auto;
+          width: 300px;
+          height: 300px;
+        }
+        img{
+          border-radius: 100%;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      figcaption {
+        align-self: center;
+        text-align: center;
+        margin: 2rem 0;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .participant_full{
+    .hero{
+      figure{
+        width:100%;
+        .__img{
+          margin-right: 2rem;
+          &> div{
+            width: 300px;
+            height: 300px;
+          }
+          img{
+            border-radius: 100%;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+        figcaption {
+          align-self: center;
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/components/layout.scss

@@ -15,15 +15,6 @@ img{
    }
  }
 
-.programme{
-  .views{
-    section{
-      margin: 0 0 5rem 0;
-    }
-  }
-}
-
-
 #block-views-block-slide-programme-block-1,
 #block-views-block-dernieres-publications-block-1{
   .views{
@@ -37,7 +28,41 @@ article{
   .__title{
     @include croix_or;
   }
+  .__head{
+    div{
+      & > div{
+        margin: 0rem 0.5rem;
+      }
+    }
+  }
 }
 h4{
   @include croix_or;
 }
+
+blockquote{
+  font-size: 2rem;
+  line-height: 1;
+  margin: 2rem;
+  color: $lightgrey;
+  @include croix_or_B;
+}
+
+.container{
+  &.programme{
+    .views{
+      section{
+        &:not(:last-child){
+          @include croix_or;
+          margin: 0 0 2rem 0;
+          & > .d-flex{
+            padding: 0 0 2rem 0;
+          }
+        }
+        &:last-child{
+          margin-bottom: 5rem ;
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/components/sidebar/role_inter.scss

@@ -0,0 +1,4 @@
+.___title_inter{
+  border-bottom: 1px solid black;
+  margin-bottom: 2rem;
+}

web/themes/custom/popsu_colloque/css/components/thumbnails.scss

@@ -1,123 +0,0 @@
-/**
- * @file
- * Presentational styles for Drupal stark theme layout.
- *
- * It is left empty for testing purposes.
- *
- * @see https://www.drupal.org/project/drupal/issues/2349711
- */
-
- .thumbnails{
-   margin: 1rem 0rem;
-   // max-width: 300px;
-   min-width: 250px;
-   height: auto;
-   width: calc(100% / 4 );
-   background: white;
-   transform: scale(1);
-   @include shadow;
-   a{
-     display: block;
-     height: 100%;
-   }
-    & > .__wrap{
-       padding: 1rem;
-   }
-   .__media{
-     margin-right: 1rem;
-     figure{
-       height: 100%;
-       img{
-         width: 100%;
-         height: 100%;
-         object-fit: cover;
-       }
-     }
-   }
-  .d-flex{
-     padding: 1rem;
-   }
- }
-
- .thumbnails{
-   figure{
-     height: 100px;
-     img{
-       width: 100%;
-       height: 100%;
-       object-fit: cover;
-     }
-   }
- }
-
-.programme{
-  .row{
-    margin: 0;
-  }
-  .thumbnails{
-    width: 100%;
-    margin: 0;
-    figure{
-      height: 250px;
-    }
-  }
-}
-@media screen and (min-width: 992px) {
-  .programme{
-    .row{
-      margin: $gutter1 calc(-#{$gutter1});
-    }
-    .thumbnails{
-      width: calc( 50% - #{$gutter1} * 2);
-      margin: 0 $gutter1;
-      figure{
-        height: 250px;
-      }
-    }
-  }
-}
-
-
-article{
-  .__publications{
-    & > div{
-      article{
-        width: 100%;
-        @include shadow;
-        figure{
-          padding: 1rem;
-          .__media{
-            margin-right: 1rem;
-          }
-          figcaption {
-            width: 80%;
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 992px) {
-  article{
-    .__publications{
-      & > div{
-        margin: 0 calc(-#{$gutter1});
-        article{
-          width: calc( 50% - #{$gutter1} * 2);
-          margin: 0 $gutter1;
-          @include shadow;
-          figure{
-            padding: 1rem;
-            .__media{
-              margin-right: 1rem;
-            }
-            figcaption {
-              width: 80%;
-            }
-          }
-        }
-      }
-    }
-  }
-}

web/themes/custom/popsu_colloque/css/components/thumbnails/thumbnails.scss

@@ -0,0 +1,245 @@
+ .thumbnails{
+   margin: 1rem 0rem;
+   // max-width: 300px;
+   min-width: 250px;
+   height: auto;
+   width: calc(100% / 4 );
+   background: white;
+   transform: scale(1);
+   @include shadow;
+   a{
+     display: block;
+     height: 100%;
+   }
+    & > .__wrap{
+       padding: 1rem;
+   }
+   .__media{
+     margin-right: 1rem;
+     figure{
+       height: 100%;
+       img{
+         width: 100%;
+         height: 100%;
+         object-fit: cover;
+       }
+     }
+   }
+  .d-flex{
+     padding: 1rem;
+   }
+ }
+
+ .thumbnails{
+   figure{
+     height: 100px;
+     img{
+       width: 100%;
+       height: 100%;
+       object-fit: cover;
+     }
+   }
+ }
+
+.programme{
+  .row{
+    margin: 0;
+  }
+  .thumbnails{
+    width: 100%;
+    margin: 0;
+    figure{
+      height: 250px;
+    }
+  }
+}
+@media screen and (min-width: 992px) {
+  .programme{
+    .row{
+      margin: $gutter1 calc(-#{$gutter1});
+    }
+    .thumbnails{
+      width: calc( 50% - #{$gutter1} * 2);
+      margin: 0 $gutter1;
+      figure{
+        height: 250px;
+      }
+    }
+  }
+}
+
+.thumbnails_participants{
+  figure{
+    & > div{
+      width: 100px;
+      height: 100px;
+      margin-left: 0.5rem;
+
+      img{
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    figcaption{
+      &.__info{
+          padding: 4rem 0.5rem 0.5rem 0.5rem;
+          margin-top: -3rem;
+          background: white;
+          .__name{
+            text-transform: uppercase;
+          }
+          .__qualite{
+
+          }
+      }
+    }
+  }
+}
+
+article{
+  .__publications{
+    & > div{
+      article{
+        width: 100%;
+        @include shadow;
+        figure{
+          padding: 1rem;
+          .__media{
+            margin-right: 1rem;
+          }
+          figcaption {
+            width: 80%;
+          }
+        }
+      }
+    }
+  }
+  .__bibliographie{
+    & > div{
+      article{
+        width: 100%;
+        a{
+          & > div {
+            p, span, div{
+              display: inline;
+              background: white;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.container {
+  &.publications{
+    section{
+      article{
+        width: 100%;
+        @include shadow;
+        figure{
+          padding: 1rem;
+          .__media{
+            margin-right: 1rem;
+          }
+          figcaption {
+            width: 80%;
+          }
+        }
+      }
+    }
+  }
+  &.bilbiographie{
+    article{
+      width: 100%;
+      a{
+        & > div {
+          p, span, div{
+            display: inline;
+            background: white;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  article{
+    .__publications{
+      & > div{
+        margin: 0 calc(-#{$gutter1});
+        article{
+          width: calc( 50% - #{$gutter1} * 2);
+          margin: 0 $gutter1;
+          @include shadow;
+          figure{
+            padding: 1rem;
+            .__media{
+              margin-right: 1rem;
+            }
+            figcaption {
+              width: 80%;
+            }
+          }
+        }
+      }
+    }
+    .__bibliographie{
+      & > div{
+        margin: 0 calc(-#{$gutter1});
+        article{
+          width: calc( 100% / 3 - #{$gutter1} * 3);
+          margin: 0 $gutter1;
+          figure{
+            padding: 1rem;
+            .__media{
+              margin-right: 1rem;
+            }
+            figcaption {
+              width: 80%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .container {
+    &.publications{
+      section{
+        article{
+          width: calc( 50% - #{$gutter1} * 2);
+          margin: 0 $gutter1;
+          @include shadow;
+          figure{
+            padding: 1rem;
+            .__media{
+              margin-right: 1rem;
+            }
+            figcaption {
+              width: 80%;
+            }
+          }
+        }
+      }
+    }
+    &.bibliographie{
+      article{
+        width: calc( 100% / 3 - #{$gutter1} * 3);
+        margin: 0 $gutter1;
+        figure{
+          padding: 1rem;
+          .__media{
+            margin-right: 1rem;
+          }
+          figcaption {
+            width: 80%;
+          }
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/index.scss

@@ -31,12 +31,16 @@ h1,h2,h3,h4{
   padding: 0;
 }
 
-@import "components/header.scss";
+@import "components/header/header.scss";
+@import "components/header/sub_menu.scss";
+@import "components/forms/filter.scss";
 @import "components/hero.scss";
 @import "components/layout.scss";
 @import "components/sidebar/rs.scss";
+@import "components/sidebar/role_inter.scss";
 @import "components/slides/flickity.scss";
 @import "components/slides/slides.scss";
+@import "components/thumbnails/thumbnails.scss";
 
 main{
   // margin-top: $margin-hero;
@@ -66,4 +70,4 @@ article img,
 }
 
 
-@import "components/thumbnails.scss";
+// @import "components/thumbnails.scss";

web/themes/custom/popsu_colloque/css/mixins/mixin.scss

@@ -1,6 +1,5 @@
 @mixin croix_or {
   &:after{
-    // width: 100%;
     height: 2rem;
     margin-top: 0.5rem;
     content: " ";
@@ -11,11 +10,24 @@
   }
 }
 
+@mixin croix_or_B {
+  &:before{
+    width: 100px;
+    height: 1rem;
+    margin-top: 0.5rem;
+    content: " ";
+    display: block;
+    background: url($croix_or);
+    background-repeat: repeat-x;
+    background-size: auto auto;
+  }
+}
+
 
 @mixin shadow{
   box-shadow: none;
   transition: 0.3s transform ease, 0.3s box-shadow ease;
-  &:hover{    
+  &:hover{
     transform: scale(1.05);
     transition: 0.3s all ease;
     box-shadow: 0px 0px 13px 0px $color2;

web/themes/custom/popsu_colloque/css/typography.scss

@@ -1,15 +1,21 @@
 main{
+  h2{
+    text-transform: uppercase;
+  }
   h2, a{
-    color: $color2;
+    // color: $color2;
+  }
+  h3{
+    text-transform: uppercase;
+    margin: 2rem 0;
   }
-
   .blue, #txt_present{
-    color: $color2;
+    // color: $color2;
   }
 
   #block-views-block-slide-programme-block-1{
     .thumbnails a{
-      color: $col_black;
+      // color: $col_black;
     }
   }
 }

web/themes/custom/popsu_colloque/css/variables/var.scss

@@ -1,6 +1,7 @@
 $color1: red;
 $color2: #1d378eff;
 $col_black: black;
+$lightgrey: grey;
 
 $gutter1 : 1rem;
 

web/themes/custom/popsu_colloque/template/fields/field--node--field-bibliographie.html.twig

@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Default theme implementation 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()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+<h4>{{ label }}</h4>
+<div class="d-lg-flex d-block">
+  {% for item in items %}
+    {{ item.content }}
+  {% endfor %}
+</div>

web/themes/custom/popsu_colloque/template/fields/field--node--field-publications-participants.html.twig

@@ -0,0 +1,52 @@
+{#
+/**
+ * @file
+ * Default theme implementation 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()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+<h4>{{ label }}</h4>
+<div class="d-lg-flex d-block">
+  {% for item in items %}
+    {{ item.content }}
+  {% endfor %}
+</div>

web/themes/custom/popsu_colloque/template/node/node--moments.html.twig

@@ -72,44 +72,46 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }}>
+<article{{ attributes }} class="d-flex flex-wrap">
+  <div class="__wrapper col-sm-12 col-md-9">
+    <div class="__img-hero">
+      {{content.field_image}}
+    </div>
 
-  <div class="__img-hero">
-    {{content.field_image}}
-  </div>
+    <div class="__wrapper row">
+      <div class="__title col-12 mt-3">
+        <h2>{{label}}</h2>
+      </div>
 
-  <div class="__wrapper row">
-    <div class="__title col-12 mt-3">
-      <h2>{{label}}</h2>
-    </div>
+      <div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
+        {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
+      </div>
 
-    <div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
-      {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
-    </div>
+      <div class="__wrap_content col-sm-12 col-md-11 px-0 my-3">
+        <div class="__head mb-5">
+          <div class="d-flex">
+            {{ content.field_date_du_programme }} |
+            {{ content.field_heure_du_moment }} |
+            {{ content.field_type_de_moment }}
+          </div>
+        </div>
 
-    <div class="__wrap_content col-sm-12 col-md-11 px-0 my-3">
-      <div class="__head mb-2">
-        <div class="d-flex">
-          {{ content.field_date_du_programme }}
-          {{ content.field_heure_du_moment }}
-          {{ content.field_type_de_moment }}
+        <div class="__content">
+          {{content.body}}
         </div>
       </div>
+    </div>
 
-      <div class="__content">
-        {{content.body}}
+    <div class="__ressources">
+      <div class="__publications">
+        {{content.field_publications}}
+      </div>
+      <div class="__bibliographie">
+        {{content.field_bibliographie}}
       </div>
     </div>
-
   </div>
-
-  <div class="__ressources">
-    <div class="__publications">
-      {{content.field_publications}}
-    </div>
-    <div class="__bibliographie">
-      {{content.field_bibliographie}}
-    </div>
+  <div class="__wrap_side col-sm-12 col-md-3">
+  {{content.field_role_de_l_intervenant}}
   </div>
-
 </article>

web/themes/custom/popsu_colloque/template/node/node--participants--full.html.twig

@@ -0,0 +1,113 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node 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.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+<article{{ attributes }} class="participant_full">
+  <div class="hero">
+    <figure class="d-md-flex d-block">
+      <div class="__img">
+        {{content.field_portrait}}
+      </div>
+      <figcaption>
+        <div class="__auteur">
+          <h2>{{label}}</h2>
+        </div>
+        <div class="status">
+          {{content.field_qualite}}
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+
+  <div class="__wrap_content col-sm-12 col-md-9 mx-auto">
+    <div class="content">
+      {{content.body}}
+    </div>
+  </div>
+
+<div class="__ressources">
+
+
+  {% if content.field_publications_participants %}
+    <div class="__publications">
+      {{content.field_publications_participants}}
+    </div>
+  {% endif %}
+
+  {% if content.field_bibliographie %}
+    <div class="__bibliographie">
+      {{content.field_bibliographie}}
+    </div>
+  {% endif %}
+</div>
+</article>

web/themes/custom/popsu_colloque/template/node/node--presentation.html.twig

@@ -77,15 +77,18 @@
 </div>
 <article{{ attributes }} id="presentation">
   <div class="__wrapper row">
-    <div class="__title col-12">
+    <div class="__title col-12 mt-3">
       <h2>{{label}}</h2>
     </div>
-    <div class="__wrap_side col-sm-12 col-md-2">
+    <div class="__wrap_side col-sm-12 col-md-1 p-0 mt-0 mb-3">
       {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     </div>
-    <div class="__wrap_content col-sm-12 col-md-8">
+    <div class="__wrap_content col-sm-12 col-md-9 ">
       {{content.body}}
       {{content.field_les_notes}}
     </div>
+    <div class="__wrap_side col-sm-12 col-md-2">
+      {{content.field_add_participant}}
+    </div>
   </div>
 </article>

web/themes/custom/popsu_colloque/template/node/node--publications--full.html.twig

@@ -73,27 +73,34 @@
  */
 #}
 <article class="d-flex">
-  <div class="__wrap_side">
+  <div class="__wrap_side col-sm-12 col-md-1 px-0 mt-3">
     {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     {{content.field_telecharger_la_ressource}}
   </div>
-  <div>
-  {% if content.field_ajouter_un_media[0]['#paragraph'].field_video %}
-    <div class="__hero">
-      {{content.field_ajouter_un_media}}
-    </div>
-  {% endif %}
-    <div class="__wrapper d-flex">
+
+  <div class="__wrapper col-sm-12 col-md-11 px-0 my-3">
+    {% if content.field_ajouter_un_media[0]['#paragraph'].field_video %}
+      <div class="__hero">
+        {{content.field_ajouter_un_media}}
+      </div>
+    {% endif %}
+    <div class="__wrap_content d-flex">
       {% if content.field_ajouter_un_media[0]['#paragraph'].field_image %}
-        <div class="__hero col-6">
+        <div class="__hero">
           {{content.field_ajouter_un_media}}
         </div>
       {% endif %}
-      <div class="__wrap_content  col-6">
+      <div>
         <div class="__head">
-          {{content.field_auteur}}
-          {{label}}
-          {{content.field_complement_d_info}}
+          <div class="__auteur">
+            {{content.field_auteur}}
+          </div>
+          <div>
+            {{label}}
+          </div>
+          <div class="my-3">
+            {{content.field_complement_d_info}}
+          </div>
         </div>
         <div class="__content">
           {{content.body}}

web/themes/custom/popsu_colloque/template/node/node--thumbnails-bilbiographie.html.twig

@@ -73,7 +73,18 @@
  */
 #}
 <article{{ attributes }}>
-  {{content.field_auteur}}
-  {{ label }}
-  {{ content|without('field_auteur') }}
+<div>
+  <a href="{{url}}">
+  <div>
+    {{content.field_auteur}}
+  </div>
+  <div>
+    {{ label }}
+  </div>
+  <div>
+    {{ content|without('field_auteur') }}
+  </div>
+
+  </a>
+</div>
 </article>

web/themes/custom/popsu_colloque/template/node/node--thumbnails-participants.html.twig

@@ -73,11 +73,13 @@
  */
 #}
 <article class="thumbnails_participants">
-    {{content.field_portrait}}
-    <div class="__info">
-      <a href="{{ url }}">
-        <div class="__name">{{ label }}</div>
-        <div class="__qualite">{{ content.field_qualite }}</div>
-      </a>
-    </div>
+  <a href="{{ url }}">
+    <figure>
+      {{content.field_portrait}}
+      <figcaption class="__info">
+          <div class="__name">{{ label }}</div>
+          <div class="__qualite">{{ content.field_qualite }}</div>
+      </figcaption>
+      </figure>
+  </a>
 </article>

web/themes/custom/popsu_colloque/template/paragraph/paragraph--role-de-l-intervenant--default.html.twig

@@ -0,0 +1,60 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph.
+ *
+ * Available variables:
+ * - paragraph: Full paragraph entity.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - paragraph.getCreatedTime() will return the paragraph creation timestamp.
+ *   - paragraph.id(): The paragraph ID.
+ *   - paragraph.bundle(): The type of the paragraph, for example, "image" or "text".
+ *   - paragraph.getOwnerId(): The user ID of the paragraph author.
+ *   See Drupal\paragraphs\Entity\Paragraph for a full list of public properties
+ *   and methods for the paragraph object.
+ * - content: All paragraph items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - paragraphs: The current template type (also known as a "theming hook").
+ *   - paragraphs--type-[type]: The current paragraphs type. For example, if the paragraph is an
+ *     "Image" it would result in "paragraphs--type--image". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - paragraphs--view-mode--[view_mode]: The View Mode of the paragraph; for example, a
+ *     preview would result in: "paragraphs--view-mode--preview", and
+ *     default: "paragraphs--view-mode--default".
+ * - view_mode: View mode; for example, "preview" or "full".
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_paragraph()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'paragraph',
+    'paragraph--type--' ~ paragraph.bundle|clean_class,
+    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
+    not paragraph.isPublished() ? 'paragraph--unpublished'
+  ]
+%}
+{% block paragraph %}
+  <div{{ attributes.addClass(classes) }}>
+    {% block content %}
+    <div class="___title_inter">
+      {{content.field_role}}
+    </div>
+    <div class="__wrap_content">
+      {{content.field_intervenants}}
+    </div>
+    {% endblock %}
+  </div>
+{% endblock paragraph %}

web/themes/custom/popsu_colloque/template/views/lists/views-view-unformatted--bibliographie.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+    ]
+  %}
+    {{- row.content -}}
+{% endfor %}

web/themes/custom/popsu_colloque/template/views/lists/views-view-unformatted--programme.html.twig

@@ -17,11 +17,20 @@
  * @ingroup themeable
  */
 #}
+
+
 <section>
   {% if title %}
     <h3>{{ title }}</h3>
   {% endif %}
-  <div class="row">
+  <div class="row justify-content-end">
+  {% if rows[0] %}
+    <div class="__wrap_side col-sm-12 col-md-1 p-0 mt-0 mb-3">
+    {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
+    </div>
+  {% endif %}
+
+  <div class="col-sm-12 col-md-11 d-flex ">
     {% for row in rows %}
       {%
         set row_classes = [

web/themes/custom/popsu_colloque/template/views/lists/views-view-unformatted--publications.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+{% for row in rows %}
+  {%
+    set row_classes = [
+      default_row_class ? 'views-row',
+    ]
+  %}
+    {{- row.content -}}
+{% endfor %}

web/themes/custom/popsu_colloque/template/views/views-view--bibliographie.html.twig

@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+
+
+<div class="views __publications">
+
+  {{ title_prefix }}
+  {{ title }}
+  {{ title_suffix }}
+
+  {{ exposed }}
+  {{ attachment_before }}
+
+  {% if rows -%}
+    <section class="d-lg-flex flex-wrap d-block" >
+      {{ rows }}
+    </section>
+  {% elseif empty -%}
+    {{ empty }}
+  {% endif %}
+  {{ pager }}
+
+  {{ attachment_after }}
+
+  {% if footer %}
+    <footer>
+      {{ footer }}
+    </footer>
+  {% endif %}
+
+  {{ feed_icons }}
+</div>

web/themes/custom/popsu_colloque/template/views/views-view--programme.html.twig

@@ -49,9 +49,7 @@
   {{ attachment_before }}
 
   {% if rows -%}
-    <section>
       {{ rows }}
-    </section>
   {% elseif empty -%}
     {{ empty }}
   {% endif %}

web/themes/custom/popsu_colloque/template/views/views-view--publications.html.twig

@@ -0,0 +1,64 @@
+{#
+/**
+ * @file
+ * Default theme implementation for main view template.
+ *
+ * Available variables:
+ * - attributes: Remaining HTML attributes for the element.
+ * - css_name: A CSS-safe version of the view name.
+ * - css_class: The user-specified classes names, if any.
+ * - header: The optional header.
+ * - footer: The optional footer.
+ * - rows: The results of the view query, if any.
+ * - empty: The content to display if there are no rows.
+ * - pager: The optional pager next/prev links to display.
+ * - exposed: Exposed widget form/info to display.
+ * - feed_icons: Optional feed icons to display.
+ * - more: An optional link to the next page of results.
+ * - title: Title of the view, only used when displaying in the admin preview.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the view title.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the view title.
+ * - attachment_before: An optional attachment view to be displayed before the
+ *   view content.
+ * - attachment_after: An optional attachment view to be displayed after the
+ *   view content.
+ * - dom_id: Unique id for every view being printed to give unique class for
+ *   Javascript.
+ *
+ * @see template_preprocess_views_view()
+ *
+ * @ingroup themeable
+ */
+#}
+
+
+<div class="views __publications">
+
+  {{ title_prefix }}
+  {{ title }}
+  {{ title_suffix }}
+
+  {{ exposed }}
+  {{ attachment_before }}
+
+  {% if rows -%}
+    <section class="d-lg-flex flew-wrap d-block" >
+      {{ rows }}
+    </section>
+  {% elseif empty -%}
+    {{ empty }}
+  {% endif %}
+  {{ pager }}
+
+  {{ attachment_after }}
+
+  {% if footer %}
+    <footer>
+      {{ footer }}
+    </footer>
+  {% endif %}
+
+  {{ feed_icons }}
+</div>