responsive

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

@@ -0,0 +1 @@
+#txt_present{margin:2rem 0}#txt_present>div{margin:2rem auto}#txt_present .more_link{padding:0 1rem .2rem 1rem;background:#fff}

web/themes/custom/popsu_colloque/css/components/btn/all_btn.scss

@@ -1,5 +1,16 @@
 .more_link{
   @include shadow;
+  padding: 0rem 1rem 0.2rem 1rem;
+  background: white;
+  border-radius: 0;
+  a{
+    font-family: 'truenoregular';
+    font-size: 0.6rem;
+    color: $color2;
+    span{
+      padding-left: 0.5rem;
+    }
+  }
 }
 
 #block-views-block-slide-programme-block-1,

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

@@ -2,11 +2,12 @@ footer{
   background: white;
   width: 100%;
   height: auto;
-  padding: 2rem 0;
+  padding: 2rem 0 0 0;
   margin-top:2rem;
   h2{
-    font-size: 1rem;
+    font-size: 1.5rem;
     text-transform: uppercase;
+    line-height: 1rem;
   }
   a{
     color: black;
@@ -14,6 +15,37 @@ footer{
       color: black;
     }
   }
+  & > .row{
+    & > div{
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  #block-renderedsitesettingsblock-5{
+    .site_setting_entity{
+      & > div{
+        display: flex;
+        flex-wrap: nowrap;
+        @media screen and (min-width: 992px) {
+          display:block;
+        }
+        & > div{
+          width: calc((100% / 3) - #{$gutter});
+          max-width: 100px;
+
+          @media screen and (min-width: 992px) {
+            width: calc((100% / 2) - #{$gutter});
+            max-width: 200px;
+            margin-bottom: 2rem;
+          }
+          &:first-child{
+            margin-right: $gutter;
+          }
+        }
+      }
+    }
+  }
+
   #block-renderedsitesettingsblock-4{
     .site_setting_entity{
       & > div{
@@ -29,7 +61,6 @@ footer{
           }
         }
       }
-
       .sub-title{
         font-size: 1rem;
       }

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

@@ -4,44 +4,100 @@
   display: flex;
   flex-wrap: wrap;
   & > div{
-    margin-right: 2rem;
+    width: 100%;
+    @media screen and (min-width: 768px) {
+      width: calc((100% / 2) - ( #{$gutter} * 2);
+    }
+    @media screen and (min-width: 992px) {
+      width: auto;
+    }
+    @media screen and (min-width: 992px) {
+      margin-right: 2rem;
+    }
     &:not(:last-child){
       margin-bottom: 1rem;
+      @media screen and (min-width: 768px) {
+        margin-right: calc(#{$gutter} * 2);
+      }
       @media screen and (min-width: 992px) {
         margin-bottom: 0rem;
       }
     }
-    select{
-      border: 1px solid $color2;
-      background: white;
-      padding: 0.2rem 0.5rem;
-      outline: none;
-      &:focus{
-        border: 2px solid $color2;
-        outline: none;
+    label{
+      min-width: max-content;
+    }
+    .select-selected{
+      width: 100%;
+      min-width: 150px;
+      background-color: white;
+      color: $color2!important;
+      &::after{
+        position: absolute;
+        content: "";
+        top: 14px;
+        right: 10px;
+        width: 0;
+        height: 0;
+        border: 6px solid transparent;
+        border-color: $color2 transparent transparent transparent;
       }
-      option{
-        padding: 0.2rem 0.5rem;
-        min-height: 2rem;
+      &.select-arrow-active{
+        &:after{
+          transform: rotate(180deg);
+          top: 7px;
+        }
       }
     }
+    .select-items {
+      position: absolute;
+      background-color: $color2;
+      top: 100%;
+      right: 0;
+      z-index: 99;
+      min-width: 150px;
+      width: 100%;
+    }
   }
-}
-.views-exposed-form{
-  input{
-    height: auto;
-    background: $color2;
-    color: white;
-    border: none;
-    outline: none;
-    margin-right: 1rem;
-    padding: 0.5rem 1rem;
-    &:focus{
+  #edit-actions{
+    @media screen and (min-width: 768px) {
+      display: flex;
+      flex-wrap: nowrap;
+      width: 100%;
+    }
+    @media screen and (min-width: 992px) {
+      width: auto;
+    }
+    input{
+      width: 100%;
+      height: auto;
+      background: $color2;
+      color: white;
       border: none;
       outline: none;
+      margin-top: 1rem;
+      padding: 0.5rem 1rem;
+      @media screen and (min-width: 768px) {
+        max-width: 50%;
+        margin-right: 1rem;
+      }
+      @media screen and (min-width: 992px) {
+        max-width: 100%;
+        margin-right: 0;
+        margin-top: 0;
+      }
+      &:focus{
+        border: none;
+        outline: none;
+      }
+      &#edit-submit-publications{
+        @media screen and (min-width: 768px) {
+          margin-right: calc(#{$gutter} * 2);
+        }
+      }
     }
   }
 }
+
 .js-form-type-select {
   position: relative;
   font-family: Arial;
@@ -50,39 +106,17 @@
   label{
     margin-right: 1rem;
   }
-  .select-selected{
-    min-width: 150px;
-  }
 }
 
 .js-form-type-select select {
-  display: none; /*hide original SELECT element: */
-}
-
-.select-selected {
-  background-color: white;
-  color: $color2!important;
-}
-
-/* Style the arrow inside the select element: */
-.select-selected:after {
-  position: absolute;
-  content: "";
-  top: 14px;
-  right: 10px;
-  width: 0;
-  height: 0;
-  border: 6px solid transparent;
-  border-color: $color2 transparent transparent transparent;
+  display: none;
 }
 
-/* Point the arrow upwards when the select box is open (active): */
 .select-selected.select-arrow-active:after {
   border-color: transparent transparent $color2 transparent;
   top: 7px;
 }
 
-/* style the items (options), including the selected item: */
 .select-items div,.select-selected {
   color: #ffffff;
   padding: 8px 30px 8px 16px;
@@ -91,17 +125,6 @@
   cursor: pointer;
 }
 
-/* Style items (options): */
-.select-items {
-  position: absolute;
-  background-color: $color2;
-  top: 100%;
-  right: 0;
-  z-index: 99;
-  min-width: 150px;
-}
-
-/* Hide the items when the select box is closed: */
 .select-hide {
   display: none;
 }

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

@@ -67,7 +67,7 @@ header{
       }
     }
     #block-mainnavigation{
-      max-width: max-content;
+      // max-width: max-content;
       width: max-content;
       .burger{
         padding-top: 0.25rem;
@@ -182,3 +182,21 @@ header.front{
     display: none;
   }
 }
+
+
+#block-mainnavigation{
+  ul{
+    li{
+      font-size: 0.8rem;
+      a{
+        color: black;
+        font-family: 'truenoregular';
+        &:hover{
+          color: black;
+          text-decoration: none;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}

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

@@ -1,10 +1,10 @@
 #block-popsu-colloque-submenu{
+  margin: 1rem auto;
   ul{
     display: flex;
     padding: 0;
     margin: 0;
     li{
-      // margin-right: 1rem;
       width: 100%;
       text-align: center;
       @media screen and (min-width: 576px) {
@@ -20,6 +20,10 @@
         color: $color2;
         background: white;
         transition: color 0.3s ease, background 0.3s ease;
+        font-size: 1.7rem;
+        font-family: 'dukefill';
+        letter-spacing: 0.05rem;
+        text-transform: uppercase;
         @media screen and (min-width: 576px) {
           // padding: 1rem 1rem;
         }

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

@@ -30,14 +30,19 @@ body{
 }
 
 .participant_full{
+  flex-direction: column;
+  margin-top: 2rem;
+  @media screen and (min-width: 992px) {
+    margin-top: 0rem;
+  }
   .hero{
     figure{
       width:100%;
       .__img{
         &> div{
           margin: auto;
-          width: 300px;
-          height: 300px;
+          width: 250px;
+          height: 250px;
         }
         img{
           border-radius: 100%;

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

@@ -1,140 +0,0 @@
-html,body{
-  background: $fond;
-}
-
-button{
-  outline:0;
-  border: 0;
-  &:focus{
-    outline:0;
-    border: 0;
-  }
-}
-
-header{
-  background: white;
-}
-
-main{
-  min-height: calc(100vh - 150px);
-}
-
-main:not(.home){
-  padding-top: 2rem;
-  @media screen and (min-width: 768px) {
-    padding: 5rem 0!important;
-  }
-}
-
-
-img{
-  width:100%;
-  height: 100%;
-  object-fit: cover;
-}
-
- #txt_present{
-   margin: 5rem 0;
-   & * {
-     color: $color2;
-   }
-   & > div{
-     margin: 2rem auto;
-   }
-   .more_link{
-     padding: 0rem 1rem 0.2rem 1rem;
-     background: white;
-   }
- }
-
- .more_link{
-   padding: 0rem 1rem 0.2rem 1rem;
-   background: white;
-   border-radius: 0;
-   a{
-     color: $color2;
-   }
- }
-#block-popsu-colloque-page-title{
-  padding: 0 15px;
-  margin: 0 auto 2rem auto;
-  @include croix_or;
-}
-#block-views-block-slide-programme-block-1,
-#block-views-block-dernieres-publications-block-1{
-  margin: 5rem 0;
-  .views{
-    section.wrap_head{
-      @include croix_or;
-    }
-  }
-}
-
-article{
-  .__title{
-    @include croix_or;
-  }
-  .__head{
-    div{
-      & > div{
-        padding: 0 0.5rem;
-      }
-    }
-  }
-}
-h4{
-  @include croix_or;
-}
-
-blockquote{
-  margin: 2rem 1rem 2rem 1rem;
-  color: $lightgrey;
-  @include croix_or_B;
-  p{
-    margin-top: 0.5rem;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  blockquote{
-    margin: 3.5rem 2rem 4rem 2rem;
-    p{
-      margin-top: 1rem;
-    }
-  }
-}
-
-// page programme
-.container{
-  &.programme{
-    padding-top: 3rem;
-    h3{
-      margin: 0.5rem 0;
-    }
-    .views{
-      section{
-        margin: 1rem 0;
-        .row{
-          padding: 2rem 0;
-        }
-        &:not(:last-child){
-          @include croix_or;
-          & > .d-flex{
-            padding: 0 0 2rem 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-// page moment
-.container{
-  .__ressources{
-    section{
-      .row{
-        padding: 0rem 0rem 2rem 0rem;
-      }
-    }
-  }
-}

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

@@ -0,0 +1,22 @@
+.__ressources{
+  h4{
+    text-transform: uppercase;
+    margin: 1rem 0;
+    font-family: 'dukefill';
+    font-size: 2rem;
+    letter-spacing: $letter_spacingH;
+    color: $color2
+  }
+  & > section{
+    &> div{
+      @media screen and (min-width: 768px) {
+        margin: 0 calc(0rem - #{$gutter})!important;
+      }
+    }
+  }
+  section{
+    .row{
+      padding: 0rem 0rem 2rem 0rem;
+    }
+  }
+}

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

@@ -1,42 +1,43 @@
-@media screen and (min-width: 576px) {
-  #block-views-block-slide-programme-block-1,
-  #block-views-block-dernieres-publications-block-1{
-    .views{
-      section{
-        .head{
-          display: flex!important;
-          width: 100%;
-          justify-content: space-between;
-          align-items: center;
-        }
-      }
-    }
+.flickity-button {
+  background: transparent;
+  &:hover{
+    background: transparent;
   }
 }
 
+.flickity-button-icon {
+  fill: $col_black;
+}
+
+.flickity-button:disabled {
+  display: none;
+}
+
 #block-views-block-slide-programme-block-1{
-  .date{
-    font-size: 1.5rem;
-    font-family: 'truenoregular';
-    text-transform: uppercase;
-  }
   .__slide{
-    .flickity-viewport{
-      overflow: initial;
-    }
-    a{
-      height: 100%;
-      background: white;
-      @include shadow;
-    }
     article{
+      width: calc(100% - 30px);
       height: 325px;
       background: none;
       display: flex;
-      margin-top: 3rem;
-      margin-bottom: 1.5rem;
-      &.__wrap{
+      margin: 3rem $gutter 1.5rem $gutter;
+      @media screen and (min-width: 768px) {
+        width: calc(100% / 2 - #{$gutter} * 2);
+      }
+      @media screen and (min-width: 992px) {
+        width: calc(100% / 3 - #{$gutter} * 2);
+      }
+      @media screen and (min-width: 1200px) {
+        width: calc(100% / 4 - #{$gutter} * 2);
+      }
+      a{
+        width: 100%;
+        height: 100%;
         background: white;
+        @include shadow;
+        .__wrap{
+          background: white;
+        }
       }
       &.last::after{
         display: inline-block;
@@ -54,7 +55,8 @@
           position: absolute;
           top: -2.5rem;
           width: max-content;
-          font-size: 1.5rem;
+          font-size: 1.2rem;
+          line-height: 1.2;
           font-family: 'truenoregular';
         }
       }
@@ -68,18 +70,27 @@
     margin: 1rem 0;
   }
   .views{
-    section{
+    section.wrap_head{
+      @include croix_or;
       .head{
         display: block;
       }
-      .flickity-slider{
-        // margin-left: 1rem;
+    }
+  }
+  @media screen and (min-width: 576px) {
+    .views{
+      section{
+        .head{
+          display: flex!important;
+          width: 100%;
+          justify-content: space-between;
+          align-items: center;
+        }
       }
     }
   }
 }
 
-
 .paragraph--type--role-de-l-intervenant{
   margin-bottom: 2rem;
   .__slide{
@@ -91,7 +102,7 @@
       }
     }
     .flickity-viewport{
-      overflow: initial;
+      // overflow: initial;
     }
     .flickity-slider > div{
       width: 70%;
@@ -102,18 +113,3 @@
     }
   }
 }
-
-.flickity-button {
-  background: transparent;
-  &:hover{
-    background: transparent;
-  }
-}
-
-.flickity-button-icon {
-  fill: $col_black;
-}
-
-.flickity-button:disabled {
-  display: none;
-}

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

@@ -11,7 +11,10 @@ section{
   width: 100%;
   height: auto;
   background: white;
-  margin: $gutter1;
+  margin: calc(#{$gutter}) 0;
+  @media screen and (min-width: 768px) {
+    margin: calc(#{$gutter});
+  }
   &:not(.bibliographie):not(.programme){
     @include shadow;
   }
@@ -21,6 +24,11 @@ section{
   }
   .__wrap{
     padding: 1rem;
+    time, .type_moment{
+      font-family: 'truenoregular';
+      font-size: 0.8rem;
+      text-transform: uppercase;
+    }
     & > .d-flex{
       margin-bottom: 0.5rem;
     }
@@ -29,13 +37,13 @@ section{
   // thumbnails publications
   &.publications{
     @media screen and (min-width: 768px) {
-      width: calc(100% / 2 - #{$gutter1} * 2);
+      width: calc(100% / 2 - #{$gutter} * 2);
     }
     @media screen and (min-width: 992px) {
-      width: calc(100% / 3 - #{$gutter1} * 2);
+      width: calc(100% / 3 - #{$gutter} * 2);
     }
     @media screen and (min-width: 1200px) {
-      width: calc(100% / 4 - #{$gutter1} * 2);
+      width: calc(100% / 4 - #{$gutter} * 2);
     }
     .__media{
       padding: 0.5rem 0 0.5rem 0.5rem;
@@ -52,13 +60,13 @@ section{
       @include shadow;
     }
     @media screen and (min-width: 768px) {
-      width: calc(100% / 2 - #{$gutter1} * 2);
+      width: calc(100% / 2 - #{$gutter} * 2);
     }
     @media screen and (min-width: 992px) {
-      width: calc(100% / 3 - #{$gutter1} * 2);
+      width: calc(100% / 3 - #{$gutter} * 2);
     }
     @media screen and (min-width: 1200px) {
-      width: calc(100% / 4 - #{$gutter1} * 2);
+      width: calc(100% / 4 - #{$gutter} * 2);
     }
     & > div  * {
       color: $col_black;
@@ -76,40 +84,17 @@ section{
   }
 }
 
-// thumbnails slides
-.__slide{
-  .thumbnails{
-    // max-width: 380px;
-    width: calc(100% - 30px);
-    a{
-      width: calc(100%);
-    }
-    @media screen and (min-width: 768px) {
-      width: calc(100% / 2 - #{$gutter1} * 2);
-    }
-    @media screen and (min-width: 992px) {
-      width: calc(100% / 3 - #{$gutter1} * 2);
-    }
-    @media screen and (min-width: 1200px) {
-      width: calc(100% / 4 - #{$gutter1} * 2);
-    }
-  }
-}
-
 // Page programme
 .container{
   &.programme{
     .thumbnails{
       @media screen and (min-width: 768px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
         margin: 0.5rem;
       }
       @media screen and (min-width: 992px) {
-        width: calc(100% / 3 - #{$gutter1} * 2);
+        width: calc(100% / 3 - #{$gutter} * 2);
       }
-      // @media screen and (min-width: 1200px) {
-      //   width: calc(100% / 4 - #{$gutter1} * 2);
-      // }
     }
   }
 }
@@ -117,7 +102,7 @@ section{
 .__ressources{
   .__publications{
     .publications{
-      // margin: $gutter1;
+      // margin: $gutter;
 
       .__media{
         padding: 0.5rem 0 0.5rem 0.5rem;
@@ -126,13 +111,13 @@ section{
         padding: 0.5rem;
       }
       @media screen and (min-width: 768px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
       }
       @media screen and (min-width: 992px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
       }
       @media screen and (min-width: 1200px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
       }
     }
   }
@@ -148,13 +133,13 @@ section{
         }
       }
       @media screen and (min-width: 768px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
       }
       @media screen and (min-width: 992px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
       }
       @media screen and (min-width: 1200px) {
-        width: calc(100% / 2 - #{$gutter1} * 2);
+        width: calc(100% / 2 - #{$gutter} * 2);
       }
 
     }

web/themes/custom/popsu_colloque/css/configs/global.scss

@@ -0,0 +1,98 @@
+body,html{
+  font-size: 16px;
+  line-height: 1.2;
+  background: $fond;
+  .is-active{
+    overflow: hidden;
+  }
+}
+
+main{
+  min-height: calc(100vh - 150px);
+}
+
+header{
+  background: white;
+}
+
+ul,li,ol{
+  list-style: none;
+}
+
+h1,h2,h3,h4{
+  margin: 0;
+  padding: 0;
+}
+
+h2{
+  font-family: 'dukefill';
+  font-size: 2.5rem;
+  line-height: 2.5rem;
+  a{
+    color: $color2;
+  }
+}
+
+h3{
+  margin: 1rem 0;
+  font-family: 'dukefill';
+  font-size: 2rem;
+  color: $lightgrey;
+}
+
+p {
+  + h3 {
+     margin: 0.5rem 0 1.5rem 0;
+  }
+}
+
+p{
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-family: 'truenoregular';
+}
+
+a{
+  color: black;
+  text-decoration: none;
+  &:hover{
+    color: black;
+    text-decoration: none;
+  }
+}
+
+blockquote{
+   margin: 2rem 1rem 2rem 1rem;
+  color: $lightgrey;
+  @include croix_or_B;
+  @media screen and (min-width: 768px) {
+    margin: 3.5rem 2rem 4rem 2rem;
+    p{
+      margin-top: 1rem;
+    }
+  }
+  p{
+    font-family: 'cormorantBold';
+    font-size: 2rem;
+    line-height: 2.5rem;
+    font-weight: lighter;
+    margin-top: 0.5rem;
+  }
+}
+
+img{
+  width:100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+
+
+button{
+  outline:0;
+  border: 0;
+  &:focus{
+    outline:0;
+    border: 0;
+  }
+}

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

@@ -0,0 +1,158 @@
+@font-face {
+    font-family: 'dukefill';
+    src: url('../fonts/duke_fill-webfont.woff2') format('woff2'),
+         url('../fonts/duke_fill-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'cormorantBold';
+    src: url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'cormorantBoldItalic';
+    src: url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
+    font-weight: lighter;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'truenoregular';
+    src: url('../fonts/truenorg-webfont.woff2') format('woff2'),
+         url('../fonts/truenorg-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+#block-renderedsitesettingsblock-2{
+  .site_setting_entity{
+    h1{
+      font-family: 'dukefill';
+      font-size: 2rem;
+      line-height: 2rem;
+      text-transform: uppercase;
+      text-align: right;
+      align-self: stretch;
+      margin: auto;
+    }
+    .__info_colloque{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      & > div{
+        height: auto;
+        &:first-child{
+          font-family: 'truenoregular';
+          color: $color1;
+          font-size: 0.9rem;
+          padding-bottom: 0.4rem;
+          margin-bottom: 0.6rem;
+        }
+        &:last-child{
+          color: $color2;
+          font-family: 'truenoregular';
+          font-weight: bold;
+          font-size: 0.7rem;
+          line-height: 1;
+          width: min-content;
+        }
+      }
+    }
+  }
+}
+
+main{
+// page publication
+.thumbnails{
+  &.programme{
+    .__content{
+      font-family: 'truenoregular';
+      font-weight: bold;
+      font-size: 1rem;
+      text-transform: uppercase;
+    }
+  }
+  &.publications{
+    .__content{
+      div{
+        font-family: 'cormorantBold';
+        font-size: 1.2rem;
+      }
+      span{
+        font-family: 'cormorantBoldItalic';
+        font-size: 1.2rem;
+      }
+    }
+  }
+  &.bibliographie{
+    background: transparent;
+    div,p{
+      font-family: 'cormorantBold';
+      font-size: 1.2rem;
+    }
+    span{
+      font-family: 'cormorantBoldItalic';
+      font-size: 1.2rem;
+    }
+  }
+}
+
+// page shadow_participants
+article{
+  &.participant_full{
+    .__auteur{
+      h2{
+        font-family: 'truenoregular';
+        font-size: 2rem;
+        letter-spacing: normal;
+      }
+    }
+    .status{
+      div{
+        font-family: 'truenoregular';
+        font-style: italic;
+        font-size: 0.8rem;
+        text-align: center;
+        @media screen and (min-width: 768px) {
+          text-align: left;
+        }
+      }
+    }
+  }
+}
+
+
+// thumbnails_participants
+.thumbnails_participants{
+  @include shadow_participants;
+  *{
+    color: $color2;
+  }
+  .__name{
+    font-family: 'truenoregular';
+    font-size: 1rem;
+  }
+  .__qualite{
+    font-family: 'truenoregular';
+    font-size: 0.8rem;
+    font-style: italic;
+  }
+}
+
+.paragraph--type--role-de-l-intervenant{
+  .___title_inter{
+    div{
+      font-family: 'truenoregular';
+      font-weight: bold;
+      font-size: 0.8rem;
+      text-transform: uppercase;
+    }
+  }
+}
+
+}

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

@@ -5,6 +5,7 @@ $lightgrey: #6f6d7dff;
 $fond: #1d378e0d;
 $underline:#d2d2ebff;
 
+$gutter: 0.5rem;
 $gutter1 : 0.5rem;
 
 $croix_or: '../images/croix_filetsable.svg';

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

@@ -7,52 +7,42 @@
  * @see https://www.drupal.org/project/drupal/issues/2349711
  */
 
-@import "variables/var.scss";
-@import "mixins/mixin.scss";
-@import "typography.scss";
-@import "components/admin/edit.scss";
-@import "components/admin/toolbar.scss";
-@import "hamburgers/hamburgers.scss";
-
-*{
- box-sizing: border-box;
-}
-
-body,html{
-  font-size: 16px;
-  line-height: 1.2;
-  .is-active{
-    overflow: hidden;
-  }
-}
+// configs
+@import "configs/var.scss";
+@import "configs/mixin.scss";
+@import "configs/typography.scss";
+@import "configs/global.scss";
 
-ul,li,ol{
-  list-style: none;
-}
+// Lib Js
+@import "hamburgers/hamburgers.scss";
 
-h1,h2,h3,h4{
-  margin: 0;
-  padding: 0;
-}
+// Pages
+@import "pages/layout.scss";
+@import "pages/front.scss";
+@import "pages/presentation.scss";
+@import "pages/programme.scss";
+@import "pages/ressources.scss";
+@import "pages/informations.scss";
+@import "pages/moments.scss";
+@import "pages/publications.scss";
 
+// components
+@import "components/admin/edit.scss";
+@import "components/admin/toolbar.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";
+@import "components/ressources.scss";
 @import "components/btn/all_btn.scss";
 @import "components/footer/footer.scss";
 @import "components/leaflet/custom_leaflet.scss";
 
-main{
-  // margin-top: $margin-hero;
-}
-
 article img,
 .side_notes img{
   width: 100%;
@@ -60,9 +50,6 @@ article img,
   object-fit: cover;
 }
 
-/* .layout-content > div{
-  display: flex;
-} */
 .side_notes{
   position: relative;
 }
@@ -75,6 +62,3 @@ article img,
 .side_notes .d-flex {
   flex-direction: column;
 }
-
-
-// @import "components/thumbnails.scss";

web/themes/custom/popsu_colloque/css/pages/front.scss

@@ -0,0 +1,71 @@
+#txt_present{
+ margin: 3rem 0;
+ @media screen and (min-width: 992px) {
+   margin: 5rem 0;
+ }
+ & * {
+   color: $color2;
+ }
+ & > div{
+   margin: 2rem auto;
+ }
+ .__title-present{
+   h2{
+     font-size: 1.5rem;
+     letter-spacing: $letter_spacingH;
+     font-family: 'truenoregular';
+     line-height: normal;
+   }
+ }
+ .__sub-title-present{
+   p{
+     font-family: 'truenoregular';
+     font-style: italic;
+     font-size: 0.8rem;
+     line-height: 1rem;
+   }
+ }
+ .__body-present{
+   p{
+     font-family: 'truenoregular';
+     font-weight: lighter;
+     font-size: 1rem;
+     line-height: 1.5rem;
+   }
+ }
+
+ .more_link{
+   padding: 0rem 1rem 0.2rem 1rem;
+   background: white;
+   a{
+     font-size: 0.7rem
+   }
+ }
+}
+
+#block-views-block-dernieres-publications-block-1{
+  .views{
+    section:not(.wrap_head){
+      margin: 1rem 0;
+      @media screen and (min-width: 768px) {
+        margin: 1rem calc( 0rem - #{$gutter});
+      }
+    }
+  }
+}
+
+#block-views-block-slide-programme-block-1,
+#block-views-block-dernieres-publications-block-1{
+  margin: 2rem 0;
+  @media screen and (min-width: 992px) {
+    margin: 5rem 0;
+  }
+  h3{
+    text-transform: uppercase;
+    margin: 0;
+    font-family: 'dukefill';
+    font-size: 2rem;
+    letter-spacing: $letter_spacingH;
+    color: $color2
+  }
+}

web/themes/custom/popsu_colloque/css/pages/informations.scss

@@ -0,0 +1,13 @@
+#block-popsu-colloque-page-title{
+  margin:1.5rem auto;
+  @include croix_or;
+  @media screen and (min-width: 768px) {
+  margin: 0 auto 1.5rem auto;  
+  }
+}
+.geolocation-map-wrapper{
+  height: 400px;
+  .geolocation-map-container{
+    height: inherit!important;
+  }
+}

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

@@ -0,0 +1,30 @@
+main:not(.home){
+  @media screen and (min-width: 768px) {
+    padding: 1.5rem 0!important;
+  }
+  @media screen and (min-width: 992px) {
+    padding: 4rem 0!important;
+  }
+}
+
+article{
+  .__title{
+    @include croix_or;
+  }
+  &.publications{
+    margin-top: 1rem;
+    .paragraph--type--images{
+      img{
+        max-height: 400px;
+        object-fit: contain;
+        width: auto;
+        @media screen and (min-width: 992px) {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+h4{
+  @include croix_or;
+}

web/themes/custom/popsu_colloque/css/pages/moments.scss

@@ -0,0 +1,25 @@
+#moments{
+  .__wrapper{
+    .__title{
+      margin: 0.5rem 0;
+    }
+  }
+  .__wrap_side{
+    margin-top: 0.5rem;
+  }
+  .__wrap_content{
+    .__head{
+      margin: 0.5rem 0;
+      div{
+        & > div{
+          font-family: 'truenoregular';
+          font-size: 0.8rem;
+          padding-right: 0.5rem;
+          &:not(:first-child){
+            padding-left: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/pages/presentation.scss

@@ -0,0 +1,14 @@
+#presentation{
+  margin-top: 0.5rem;
+  .__title{
+    @media screen and (min-width: 768px) {
+      margin: 1rem 0;
+    }
+    @media screen and (min-width: 992px) {
+      margin: 2rem 0;
+    }
+  }
+  .__wrapper{
+    margin-top: 1rem;
+  }
+}

web/themes/custom/popsu_colloque/css/pages/programme.scss

@@ -0,0 +1,37 @@
+.container{
+  &.programme{
+    padding-top: 1.5rem;
+    @media screen and (min-width: 768px) {
+      padding-top: 0rem;
+    }
+    h3{
+      font-size: 1.5rem;
+      font-family: 'truenoregular';
+      color: $col_black;
+    }
+    .views{
+      section{
+        .row{
+          .__wrap_side{
+            margin: 0 0 1rem 0;
+            @media screen and (min-width: 768px) {
+              margin: 0.5rem 0 0rem 0;
+            }
+          }
+          & > div:not(.__wrap_side){
+            @media screen and (min-width: 768px) {
+              padding-left: 0;
+              margin: 0 calc(0rem - #{$gutter});
+            }
+          }
+        }
+        &:not(:last-child){
+          @include croix_or;
+          & > .d-flex{
+            padding: 0 0 2rem 0;
+          }
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/pages/publications.scss

@@ -0,0 +1,30 @@
+article{
+  &.publications{
+    .__wrap_content{
+      .__head{
+        & *{
+          color: $color2;
+        }
+        .__auteur{
+          div{
+            font-family: 'cormorantBold';
+            font-size: 1.5rem;
+          }
+        }
+        .__titre{
+          span{
+            font-family: 'cormorantBoldItalic';
+            font-size: 1.5rem;
+          }
+        }
+        .__info{
+          margin: 1rem 0;
+          div{
+            font-family: 'cormorantBold';
+            font-size: 1rem;
+          }
+        }
+      }
+    }
+  }
+}

web/themes/custom/popsu_colloque/css/pages/ressources.scss

@@ -0,0 +1,9 @@
+.publications, .bibliographie{
+  .views{
+    section{
+      @media screen and (min-width: 768px) {
+        margin: 0 calc(0rem - #{$gutter});
+      }
+    }
+  }
+}

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

@@ -1,370 +0,0 @@
-@font-face {
-    font-family: 'dukefill';
-    src: url('../fonts/duke_fill-webfont.woff2') format('woff2'),
-         url('../fonts/duke_fill-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'cormorantBold';
-    src: url('../fonts/Cormorant-Bold-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'cormorantBoldItalic';
-    src: url('../fonts/Cormorant-BoldItalic-webfont.woff') format('woff');
-    font-weight: lighter;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'truenoregular';
-    src: url('../fonts/truenorg-webfont.woff2') format('woff2'),
-         url('../fonts/truenorg-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-#block-renderedsitesettingsblock-2{
-  .site_setting_entity{
-    h1{
-      font-family: 'dukefill';
-      font-size: 2rem;
-      line-height: 2rem;
-      text-transform: uppercase;
-      text-align: right;
-      align-self: stretch;
-      margin: auto;
-    }
-    .__info_colloque{
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      & > div{
-        height: auto;
-        &:first-child{
-          font-family: 'truenoregular';
-          color: $color1;
-          font-size: 0.9rem;
-          padding-bottom: 0.4rem;
-          margin-bottom: 0.6rem;
-        }
-        &:last-child{
-          color: $color2;
-          font-family: 'truenoregular';
-          font-weight: bold;
-          font-size: 0.7rem;
-          line-height: 1;
-          width: min-content;
-        }
-      }
-    }
-  }
-}
-
-#block-mainnavigation{
-  ul{
-    li{
-      font-size: 0.8rem;
-      a{
-        color: black;
-        font-family: 'truenoregular';
-        &:hover{
-          color: black;
-          text-decoration: none;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-a{
-  &:hover{
-    text-decoration: none;
-  }
-}
-main{
-  h2{
-    font-family: 'dukefill';
-    font-size: 3.5rem;
-    line-height: 3rem;
-    letter-spacing: $letter_spacingH;
-  }
-  h2, a{
-    color: $color2;
-  }
-  &.home{
-    h2{
-      font-size: 2rem;
-      font-family: 'truenoregular';
-      line-height: normal;
-    }
-  }
-
- #txt_present{
-   .__sub-title-present{
-     p{
-       font-family: 'truenoregular';
-       font-style: italic;
-       font-size: 0.9rem;
-       line-height: 1.2rem;
-     }
-   }
-   .__body-present{
-     p{
-       font-family: 'truenoregular';
-       font-weight: lighter;
-       font-size: 1.2rem;
-       line-height: 1.8rem;
-     }
-   }
-   .more_link{
-     a{
-       font-size: 0.7rem
-     }
-   }
- }
-
-.more_link{
-  a{
-    font-family: 'truenoregular';
-    font-size: 0.6rem;
-  }
-}
-
-  h3{
-    text-transform: uppercase;
-    margin: 2rem 0;
-    font-family: 'dukefill';
-    font-size: 3rem;
-    letter-spacing: $letter_spacingH;
-    color: $lightgrey;
-  }
-
-  .__ressources{
-    h4{
-      text-transform: uppercase;
-      margin: 2rem 0;
-      font-family: 'dukefill';
-      font-size: 2rem;
-      letter-spacing: $letter_spacingH;
-      color: $color2
-    }
-  }
-
-blockquote{
-  p{
-    font-family: 'cormorantBold';
-    font-size: 2.5rem;
-    line-height: 3rem;
-    font-weight: lighter;
-    @media screen and (min-width: 768px) {
-      font-size: 3rem;
-      line-height: 3.5rem;
-    }
-  }
-}
-
-p{
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-family: 'truenoregular';
-}
-
-a{
-  color: black;
-  &:hover{
-    color: black;
-  }
-}
-.__wrap_content{
-  p{
-    a{
-      display: inline;
-      background: $underline;
-    }
-  }
-}
-
-
-
-// Page programme
-.container{
-  &.programme{
-    h3{
-      font-size: 1.5rem;
-      font-family: 'truenoregular';
-      color: $col_black;
-    }
-  }
-}
-
-// page publication
-article{
-  &.publications{
-    .__wrap_content{
-      .__head{
-        & *{
-          color: $color2;
-        }
-        .__auteur{
-          div{
-            font-family: 'cormorantBold';
-            font-size: 1.5rem;
-          }
-        }
-        .__titre{
-          span{
-            font-family: 'cormorantBoldItalic';
-            font-size: 1.5rem;
-          }
-        }
-        .__info{
-          margin: 1rem 0;
-          div{
-            font-family: 'cormorantBold';
-            font-size: 1rem;
-          }
-        }
-      }
-    }
-  }
-}
-.thumbnails{
-  time, .type_moment{
-    font-family: 'truenoregular';
-    font-size: 0.9rem;
-    text-transform: uppercase;
-  }
-  &.programme{
-    .__content{
-      font-family: 'truenoregular';
-      font-weight: bold;
-      font-size: 1rem;
-      text-transform: uppercase;
-    }
-  }
-  &.publications{
-    .__content{
-      div{
-        font-family: 'cormorantBold';
-        font-size: 1.2rem;
-      }
-      span{
-        font-family: 'cormorantBoldItalic';
-        font-size: 1.2rem;
-      }
-    }
-  }
-  &.bibliographie{
-    background: transparent;
-    div,p{
-      font-family: 'cormorantBold';
-      font-size: 1.2rem;
-    }
-    span{
-      font-family: 'cormorantBoldItalic';
-      font-size: 1.2rem;
-    }
-  }
-}
-
-// page shadow_participants
-article{
-  &.participant_full{
-    .__auteur{
-      h2{
-        font-family: 'truenoregular';
-        font-size: 2rem;
-        letter-spacing: normal;
-      }
-    }
-    .status{
-      div{
-        font-family: 'truenoregular';
-        font-style: italic;
-        font-size: 0.8rem;
-        text-align: center;
-        @media screen and (min-width: 768px) {
-          text-align: left;
-        }
-      }
-    }
-  }
-}
-
-
-// thumbnails_participants
-.thumbnails_participants{
-  @include shadow_participants;
-  *{
-    color: $color2;
-  }
-  .__name{
-    font-family: 'truenoregular';
-    font-size: 1rem;
-  }
-  .__qualite{
-    font-family: 'truenoregular';
-    font-size: 0.8rem;
-    font-style: italic;
-  }
-}
-
-.paragraph--type--role-de-l-intervenant{
-  .___title_inter{
-    div{
-      font-family: 'truenoregular';
-      font-weight: bold;
-      font-size: 0.8rem;
-      text-transform: uppercase;
-    }
-  }
-}
-
-  article{
-    .__head{
-     div{
-       font-family: 'truenoregular';
-       font-size: 1rem;
-       // text-transform: uppercase;
-     }
-    }
-  }
-
-  #block-views-block-slide-programme-block-1,
-  #block-views-block-dernieres-publications-block-1{
-    h3{
-      text-transform: uppercase;
-      margin: 0;
-      font-family: 'dukefill';
-      font-size: 2rem;
-      letter-spacing: $letter_spacingH;
-      color: $color2
-    }
-  }
-
-}
-
-#block-popsu-colloque-submenu{
-  ul{
-    li{
-      a{
-        font-size: 2rem;
-        font-family: 'dukefill';
-        letter-spacing: 0.05rem;
-        text-transform: uppercase;
-      }
-    }
-  }
-}
-
-
-.more_link{
-  span{
-    padding-left: 0.5rem;
-  }
-}

web/themes/custom/popsu_colloque/template/block/block--mainpagecontent.html.twig

@@ -28,14 +28,22 @@
  */
 #}
 
-{% set id = [elements][0].content['#view_id'] %}
-<div class="container {{id}}">
-{% if id == 'programme' %}
+{% set class = [elements][0].content['#view_id'] %}
+
+{% if class == 'programme' or class == 'publications' or class == 'bibliographie'  %}
+  {% set addClass = 'container' %}
+{% endif %}
+
+
+<div class="{{class}} {{addClass}}">
+
+{% if class == 'programme' %}
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>
   {% endif %}
 {% endif %}
+
   {{ title_suffix }}
   {% block content %}
     {{ content }}

web/themes/custom/popsu_colloque/template/block/block--renderedsitesettingsblock-3.html.twig

@@ -27,7 +27,7 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
+<div{{ attributes }} class="col-12 col-md-6 px-0 col-lg-12">
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>

web/themes/custom/popsu_colloque/template/block/block--renderedsitesettingsblock-4.html.twig

@@ -27,7 +27,7 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }} class="col-3">
+<div{{ attributes }} class="col-12 col-md-6 col-lg-4">
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>

web/themes/custom/popsu_colloque/template/block/block--renderedsitesettingsblock-5.html.twig

@@ -29,7 +29,7 @@
 #}
 
 
-<div{{ attributes }} class="col-3">
+<div{{ attributes }} class="col-12 col-md-6 col-lg-4">
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>

web/themes/custom/popsu_colloque/template/block/block--renderedsitesettingsblock.html.twig

@@ -27,10 +27,10 @@
  * @ingroup themeable
  */
 #}
-<div class="col-6">
+<div class="col-12 d-md-flex d-lg-block col-lg-4">
 
 
-<div{{ attributes }}>
+<div{{ attributes }} class="col-12 col-md-6 col-lg-12 px-0">
   {{ title_prefix }}
   {% if label %}
     <h2{{ title_attributes }}>{{ label }}</h2>

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

@@ -45,7 +45,7 @@
 %}
 
 <h4>{{ label }}</h4>
-<div class="row flex-wrap pb-4 col-12 px-0 mx-auto">
+<div class="row flex-wrap mx-0">
   {% for item in items %}
     {{ item.content }}
   {% endfor %}

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

@@ -72,7 +72,7 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }} class="col-12 col-md-10 mb-5">
+<article{{ attributes }} class="col-12 col-md-10 mb-5 px-0">
   {{ title_prefix }}
   {% if label and not page %}
     <h2{{ title_attributes }}>

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

@@ -73,26 +73,23 @@
  */
 
 #}
-
-
-
-<article{{ attributes }} class="row">
-  <div class="__wrapper col-sm-12 col-md-9 px-0">
+<article{{ attributes }} class="row" id="moments">
+  <div class="__wrapper col-sm-12 col-md-9">
     <div class="__img-hero">
-      {{content.field_image}}
+    {{content.field_image}}
     </div>
 
-    <div class="__wrapper row">
-      <div class="__title col-12 my-3 my-lg-5">
-        <h2>{{label}}</h2>
-      </div>
+    <div class="__title col-12 px-0">
+      <h2>{{label}}</h2>
+    </div>
 
+    <div class="__wrapper row">
       <div class="__wrap_side col-md-12 col-lg-1 mt-3">
         {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'moments' } %}
       </div>
 
       <div class="__wrap_content col-12 col-lg-11 my-3">
-        <div class="__head mb-5">
+        <div class="__head">
           <div class="d-flex flex-wrap">
             {{ content.field_date_du_programme }} |
             {{ content.field_heure_du_moment }} |

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

@@ -72,8 +72,8 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes }} class="participant_full">
-  <div class="hero">
+<article{{ attributes }} class="participant_full row">
+  <div class="hero col">
     <figure class="d-md-flex d-block">
       <div class="__img">
         {{content.field_portrait}}
@@ -95,19 +95,19 @@
     </div>
   </div>
 
-<div class="__ressources">
+<div class="__ressources col">
 
 
   {% if content.field_publications_participants %}
-    <div class="__publications">
+    <section class="__publications">
       {{content.field_publications_participants}}
-    </div>
+    </section>
   {% endif %}
 
   {% if content.field_bibliographie %}
-    <div class="__bibliographie">
+    <section class="__bibliographie">
       {{content.field_bibliographie}}
-    </div>
+    </section>
   {% endif %}
 </div>
 </article>

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

@@ -75,11 +75,11 @@
 <div class="__img-hero">
 {{content.field_image}}
 </div>
-<article{{ attributes }} class="mt-4" id="presentation">
+<article{{ attributes }} id="presentation">
   <div class="__title col-12 px-0">
     <h2>{{label}}</h2>
   </div>
-  <div class="__wrapper row mt-5">
+  <div class="__wrapper row">
     <div class="__wrap_side col-sm-12 col-md-1 pr-0 mt-0 mb-3">
       {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' with { page : 'presentation' }  %}
     </div>

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

@@ -72,7 +72,7 @@
  * @ingroup themeable
  */
 #}
-<article class="d-sm-flex flex-wrap d-block publications">
+<article class="row d-sm-flex flex-wrap d-block publications">
   <div class="__wrap_side col-sm-12 col-md-12 col-lg-1">
     {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     {{content.field_telecharger_la_ressource}}

web/themes/custom/popsu_colloque/template/page--front.html.twig

@@ -74,7 +74,7 @@
   </main>
 
   {% if page.footer %}
-    <footer role="contentinfo">
+    <footer role="contentinfo" class="container-fluid">
       {{ page.footer }}
     </footer>
   {% endif %}

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

@@ -46,7 +46,7 @@
  */
 #}
 <div class="layout-container">
-  <header role="banner">
+  <header role="banner" class="container-fluid">
     {{ page.header }}
   </header>
 
@@ -74,7 +74,7 @@
   </main>
 
   {% if page.footer %}
-    <footer role="contentinfo">
+    <footer role="contentinfo" class="container-fluid">
       {{ page.footer }}
     </footer>
   {% endif %}

web/themes/custom/popsu_colloque/template/page.html.twig

@@ -46,7 +46,7 @@
  */
 #}
 <div class="layout-container">
-  <header role="banner">
+  <header role="banner" class="container-fluid">
     {{ page.header }}
   </header>
 
@@ -88,7 +88,7 @@
   </main>
 
   {% if page.footer %}
-    <footer role="contentinfo">
+    <footer role="contentinfo" class="container-fluid">
       {{ page.footer }}
     </footer>
   {% endif %}

web/themes/custom/popsu_colloque/template/regions/region--footer.html.twig

@@ -15,7 +15,7 @@
  */
 #}
 {% if content %}
-  <div{{ attributes }} class="container">
+  <div{{ attributes }} class="d-flex container">
     {{ content }}
   </div>
 {% endif %}

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

@@ -20,7 +20,7 @@
 {% if title %}
   <h3>{{ title }}</h3>
 {% endif %}
-<div class="row flex-wrap">
+<div class="d-flex flex-wrap">
   {% for row in rows %}
     {%
       set row_classes = [

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

@@ -25,7 +25,7 @@
   {% endif %}
   <div class="row justify-content-end">
   {% if rows[0] %}
-    <div class="__wrap_side col-sm-12 col-md-1 my-3 my-sm-2">
+    <div class="__wrap_side col-sm-12 col-md-1">
     {% include 'themes/custom/popsu_colloque/template/components/share_rs.html.twig' %}
     </div>
   {% endif %}

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

@@ -34,7 +34,7 @@
 #}
 
 
-<div class="views col px-0">
+<div class="views">
 
   {{ title_prefix }}
   {{ title }}

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

@@ -34,7 +34,7 @@
 #}
 
 
-<div class="views col px-0">
+<div class="views">
 
   {{ title_prefix }}
   {{ title }}