modif template+ css

.htaccess

@@ -9,7 +9,7 @@ RewriteEngine On
 # along the lines of: RewriteBase /<your_sub_folder>
 ##
 
-# RewriteBase /
+RewriteBase /
 
 ## End - RewriteBase
 

user/pages/02.nouvelle-section-1/03.etape-1/item-etapes.md

@@ -0,0 +1,15 @@
+---
+title: 'étape 1'
+media_order: etape1.png
+---
+
+Quel public ?
+Quel style ?
+Quel format ?
+Combien de pages ?
+Quel type de papier ou autre support ?
+Combien de couleurs ?
+Quels délais ?
+Quel graphiste ?
+Quel imprimeur ?
+Quel prix ?

user/pages/02.nouvelle-section-1/03.etape-1/item.md

@@ -1,16 +0,0 @@
----
-title: 'étape 1'
-media_order: etape1.png
----
-
-Définir/préciser le projet ensemble
-Quel public ?
-Quel style ?
-Quel format ?
-Combien de pages ?
-Quel type de papier ou autre support ?
-Combien de couleurs ?
-Quels délais ?
-Quel graphiste ?
-Quel imprimeur ?
-Quel prix ?

user/pages/02.nouvelle-section-1/04.etape-2/item-etapes.md

@@ -0,0 +1,15 @@
+---
+title: 'Étape 2'
+media_order: etape2.png
+---
+
+Secrétariat de rédaction :
+* Relecture, vérification, uniformisation des textes
+* Correction orthographique, typographique,
+* grammaticale des textes Iconographie
+* Vérification des mentions légales
+
+Direction artistique :
+* Mise en page, PAO
+* Corrections maquettes, ajustements, chromie,
+* Validation, bon à graver (BAG)

user/pages/02.nouvelle-section-1/04.etape-2/item.md

@@ -1,15 +0,0 @@
----
-title: 'étape 2'
-media_order: etape2.png
----
-
-Le mettre en forme
-Secrétariat de rédaction :
-    • Relecture, vérification, uniformisation des textes
-    • Correction orthographique, typographique, grammaticale des textes
-Iconographie
-Vérification des mentions légales
-Direction artistique :
-    • Mise en page, PAO
-    • Corrections maquettes, ajustements, chromie
-Validation, bon à graver (BAG)

user/pages/02.nouvelle-section-1/05.etape-3/item.md → user/pages/02.nouvelle-section-1/05.etape-3/item-etapes.md

@@ -3,7 +3,6 @@ title: 'étape 3'
 media_order: etape3.png
 ---
 
-L’imprimer, le fabriquer
 Demande de Bon à tirer (BAT)
 Contrôle qualité
 Impression, finition

user/pages/02.nouvelle-section-1/06.etape-4/item.md → user/pages/02.nouvelle-section-1/06.etape-4/item-etapes.md

@@ -1,9 +1,10 @@
 ---
 title: 'étape 4'
 media_order: etape4.png
+hero_classes: ''
+hero_image: ''
 ---
 
-Le réceptionner
 Délais initiaux respectés
 Budget tenu
 Document de qualité

user/pages/02.nouvelle-section-1/blog.md

@@ -10,5 +10,6 @@ content:
     pagination: true
     url_taxonomy_filters: true
 ---
+
     
-### FIABILITÉ - ÉCOUTE - ENGAGEMENT
+### FIABILITÉ - ÉCOUTE - ENGAGEMENT

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-2/item.md

@@ -1,7 +0,0 @@
----
-title: 'projet n°2'
-media_order: LivretA5_ouvgroupe_EXE_HD3-1.jpg
----
-
-Livret A5 32 pages réalisé pour les Scouts et Guides de France.
-Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-2/items.md

@@ -0,0 +1,9 @@
+---
+title: 'Livret A5 32 pages'
+media_order: LivretA5_ouvgroupe_EXE_HD3-1.jpg
+hero_classes: ''
+hero_image: ''
+---
+
+ Réalisé pour les Scouts et Guides de France.
+Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-3/item.md

@@ -1,7 +1,7 @@
 ---
-title: 'projet n°3'
+title: 'Affiche 60 x 80 cm'
 media_order: affiche_AFS_cartedumonde_v13.jpg
 ---
 
-Affiche 60 x 80 cm réalisée pour AFS Vivre sans frontière.
+ Réalisée pour AFS Vivre sans frontière.
 Conception, secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-4/item.md

@@ -1,7 +1,7 @@
 ---
-title: 'projet n°4'
+title: 'Livret A5, 36 pages'
 media_order: 'RA SC Paris 2017_V6-1.jpg'
 ---
 
-Livret A5, 36 pages, réalisé pour le Secours Catholique de Paris.
+Réalisé pour le Secours Catholique de Paris.
 Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-5/item.md

@@ -1,7 +1,7 @@
 ---
-title: 'projet n°5'
+title: 'Rapport d''activité A4'
 media_order: Formations_SC_Paris2018_HD-1.jpg
 ---
 
-Rapport d'activité A4, 52 pages, réalisé pour le Secours Catholique de Paris.
+52 pages, réalisé pour le Secours Catholique de Paris.
 Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-6/item.md

@@ -1,7 +1,7 @@
 ---
-title: 'projet n°6'
+title: 'Dépliant 4-pages A4'
 media_order: SIGNAL_HD-1.jpg
 ---
 
-Dépliant 4-pages A4 réalisé pour le Secours Catholique Paris.
+Réalisé pour le Secours Catholique Paris.
 Secrétariat d'édition et de rédaction + fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projet-n-7/item.md

@@ -1,7 +1,7 @@
 ---
-title: 'projet n°7'
+title: 'Brochure A4'
 media_order: RA_Solifap2018.jpg
 ---
 
-Brochure A4, 20 pages, réalisée pour SOLIFAP.
+20 pages, réalisée pour SOLIFAP.
 Secrétariat de rédaction, secrétariat d'édition, fabrication : www.lestyledelours.fr

user/pages/03.nouvelle-section-2/01.sous-section-2-1/projetn-1/item.md

@@ -1,7 +1,7 @@
 ---
-title: ProjetN°1
+title: 'Plaquette 3-volets A4'
 media_order: depliant-v12_IMP_HD-1.jpg
 ---
 
-Plaquette 3-volets A4 réalisée pour l'école Massillon à Paris.
-Secrétariat de rédaction, secrétariat d'édition et fabrication : www.lestyledelours.fr
+Réalisée pour l'école Massillon à Paris.
+Secrétariat de rédaction, secrétariat d'édition et fabrication.

user/pages/03.nouvelle-section-2/02.recommandations/reco-n-1/item.md

@@ -1,8 +1,8 @@
 ---
-title: 'reco n°1'
+title: 'Ludovic, Signal Expertise'
 media_order: facebook.svg
 ---
 
-![](facebook.svg)
-Ludovic, Signal Expertise
+[![](facebook.svg)](https://www.facebook.com)
+
 « Parfait ! Merci Emmanuel pour ton travail réalisé dans les délais. »

user/pages/03.nouvelle-section-2/02.recommandations/reco-n-2/item.md → user/pages/03.nouvelle-section-2/02.recommandations/reco-n-2/items.md

@@ -1,9 +1,8 @@
 ---
-title: 'reco n°2'
+title: 'Antoine, Secours Catholique'
 media_order: linkedin.svg
 ---
 
 ![](linkedin.svg)
-**Antoine, Secours Catholique**
 
 « Je travaille régulièrement avec Emmanuel sur l'édition de documents pour l’association. J'apprécie son regard et sa capacité à traduire nos messages. Emmanuel est un conseil précieux pour améliorer la qualité de nos publications, dans le fond comme dans la forme. »

user/pages/03.nouvelle-section-2/02.recommandations/reco-n-3/item.md

@@ -1,9 +1,8 @@
 ---
-title: 'reco n°3'
+title: 'Antoine, CCFD-Terre Solidaire'
 media_order: mail.svg
 ---
 
-![](mail.svg)
-**Antoine, CCFD-Terre Solidaire**
+[![](mail.svg)](https://www.facebook.com)
 
 « J'ai travaillé avec Emmanuel lorsque j'étais DG du CCFD-Terre Solidaire. J'ai apprécié son grand professionnalisme et son souci à toujours trouver la bonne réponse à mes demandes en matière d'édition de documents. »

user/pages/03.nouvelle-section-2/02.recommandations/reco-n-4/item.md

@@ -1,9 +1,8 @@
 ---
-title: 'reco n°4'
+title: 'Philippe, fondation Terre Solidaire'
 media_order: malt.svg
 ---
 
-![](malt.svg)
-**Philippe, fondation Terre Solidaire**
+[![](malt.svg)](https://www.facebook.com)
 
 « Ce fut un très grand plaisir de travailler avec Emmanuel. J’ai fortement apprécié ses capacités à conseiller, écouter, préciser et enrichir mes demandes de productions. Il faut souligner son respect des délais, la rigueur et la précision de son travail qui met en confiance et rassure. »

user/pages/03.nouvelle-section-2/02.recommandations/reco-n-5/item.md

@@ -1,9 +1,8 @@
 ---
-title: 'reco n°5'
+title: 'Philippe, CCFD-Terre Solidaire'
 media_order: oral.svg
 ---
 
-![](oral.svg)
-**Philippe, CCFD-Terre Solidaire**
+[![](oral.svg)](https://www.facebook.com)
 
 « J'ai collaboré avec Emmanuel lorsque j'étais directeur. Je n'ai eu qu'à m'en féliciter : réactivité, inventivité, clarté des suggestions, fiabilité des budgets, maîtrise technique. Et, derrière l'homme discret, une belle expérience humaine et une passion pour son métier. »

user/pages/04.contact/blog.md

@@ -4,7 +4,7 @@ media_order: EC_BD_modif.png
 content:
     items:
         - '@self.children'
-    limit: 5
+    limit: 0
     order:
         by: date
         dir: desc
@@ -12,31 +12,3 @@ content:
     url_taxonomy_filters: true
 ---
 
-![](EC_BD_modif.png)
-**LE STYLE DE L’OURS**
-Emmanuel CAUCHOIS
-10, rue Georges-Guynemer
-78300 POISSY
-Tél. : 06 03 23 08 42
-Email : lestyledelours@sfr.fr
-
-**NOM DU FICHIER :** 
-Emmanuel Cauchois
-**FORMAT :** 
-à la française (47 ans x 182 cm)
-**ASSEMBLAGE :** 
-marié / papa d’un petit garçon de 9 ans
-NOMBRE DE PAGES : 
-Rouen / Evreux / Lille / Poissy
-**FAÇONNAGE :** 
-BTS Industries graphiques
-NATIFS : 
-photograveur / opérateur PAO / animation / éducation / édition / fabrication
-**FILIGRANE :** 
-scoutisme+++ / théâtre+ / photo++
-**PELLICULAGE :** 
-emmanuelcauchois.fr
-**RÉSOLUTION :**
-mettre mon expérience au service de la qualité de vos projets.
-**DÉPÔT LÉGAL :** 
-Mai 2018

user/pages/04.contact/profil-2/items.md

@@ -0,0 +1,24 @@
+---
+title: detail
+---
+
+**NOM DU FICHIER :**
+Emmanuel Cauchois
+**FORMAT :**
+à la française (47 ans x 182 cm)
+**ASSEMBLAGE :**
+marié / papa d’un petit garçon de 9 ans
+NOMBRE DE PAGES :
+Rouen / Evreux / Lille / Poissy
+**FAÇONNAGE :**
+BTS Industries graphiques
+NATIFS :
+photograveur / opérateur PAO / animation / éducation / édition / fabrication
+**FILIGRANE :**
+scoutisme+++ / théâtre+ / photo++
+**PELLICULAGE :**
+emmanuelcauchois.fr
+**RÉSOLUTION :**
+mettre mon expérience au service de la qualité de vos projets.
+**DÉPÔT LÉGAL :**
+Mai 2018

user/pages/04.contact/profil/items.md

@@ -0,0 +1,11 @@
+---
+title: profil
+media_order: EC_BD_modif.png
+---
+
+**LE STYLE DE L’OURS**
+Emmanuel CAUCHOIS
+10, rue Georges-Guynemer
+78300 POISSY
+Tél. : 06 03 23 08 42
+Email : lestyledelours@sfr.fr

user/themes/le_style_de_lours_modif/scss/theme.scss

@@ -1,7 +1,7 @@
-// @import 'theme/mixins';
-@import 'theme/reset';
 @import 'theme/fonts';
 @import 'theme/variables';
+@import 'theme/mixins';
+@import 'theme/reset';
 
 @import 'theme/typography';
 @import 'theme/animation';
@@ -9,6 +9,7 @@
 @import 'theme/start';
 @import 'theme/footer';
 @import 'theme/carousel';
+@import 'theme/media-quieries';
 // @import 'theme/mobile';
 //
 // @import 'theme/header';

user/themes/le_style_de_lours_modif/scss/theme/_carousel.scss

@@ -51,6 +51,7 @@
   display: block!important;
 }
 
+
 #recommandations{
   .owl-carousel{
     .owl-stage-outer{
@@ -62,25 +63,38 @@
     .content{
       width: 300px!important;
       background: white;
+      padding: 0 20px;
+      position: relative;
+      h5{
+        padding-top: 10px;
+        padding-right: 10px;
+      }
       p{
         text-align: left!important;
-        padding: 0 20px;
-        margin: 0;
+        a{
+          position: absolute;
+          width: 20px;
+          top: 10px;
+          right: 10px;
+        }
+        & > img{
+          position: absolute;
+          width: 20px;
+          height: auto;
+          top: 10px;
+          right: 10px;
+        }
         &:last-child{
           padding-bottom: 20px;
         }
-        strong{
-          width: 230px;
-          display: block;
-        }
-      }
-      img{
-        position: absolute;
-        top: 15px;
-        right: 20px;
-        width: 25px;
-        height: auto;
       }
+      // img{
+      //   position: absolute;
+      //   top: 10px;
+      //   right: 20px;
+      //   width: 25px;
+      //   height: auto;
+      // }
     }
   }
 }

user/themes/le_style_de_lours_modif/scss/theme/_footer.scss

@@ -1,4 +1,6 @@
 footer{
+  margin: 0 50px 0px 50px;
+  padding-bottom: 20px;
   ul{
     display: inline-flex;
     justify-content: flex-end;
@@ -9,7 +11,41 @@ footer{
   }
   section{
     width: 50%;
-    margin:auto;
+  }
+
+}
+
+
+.background-footer{
+  z-index: -1;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  display: inline-flex;
+  & > div {
+    width: 55%;
+    display: inline-block;
+    position: relative;
+    padding-bottom: 100%;
+    vertical-align: middle;
+  }
+  .fond-g{
+    svg{
+      width: 110%;
+      display: inline-block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+  .fond-d{
+    svg{
+      width: 110%;
+      display: inline-block;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
   }
 }
- 

user/themes/le_style_de_lours_modif/scss/theme/_header.scss

@@ -31,43 +31,11 @@
   }
 }
 
-.background-footer{
-  z-index: -1;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  left: 0;
-  display: inline-flex;
-  & > div {
-    width: 55%;
-    display: inline-block;
-    position: relative;
-    padding-bottom: 100%;
-    vertical-align: middle;
-  }
-  .fond-g{
-    svg{
-      width: 110%;
-      display: inline-block;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-    }
-  }
-  .fond-d{
-    svg{
-      width: 110%;
-      display: inline-block;
-      position: absolute;
-      bottom: 0;
-      right: 0;
-    }
-  }
-}
 
 header{
   z-index: 999;
   position: relative;
+  margin-bottom: 100px;
   nav{
     z-index: 999;
     position: fixed;

user/themes/le_style_de_lours_modif/scss/theme/_media-quieries.scss

@@ -0,0 +1,223 @@
+@media screen and (max-width: 980px) {
+  #start{
+    .section{
+      &:not(:nth-last-child(1)){
+        margin-bottom: 100px;
+      }
+      &:not(#home){
+        .section-content{
+          h3, p{
+            margin: 100px auto 30px auto;
+          }
+
+        }
+        & > .sous-section{
+          &>section{
+            margin: 30px 0;
+            &:nth-last-child(1){
+              margin-bottom: 60px;
+            }
+          }
+          .no-gal{
+            &:not(#clients){
+              min-width: 70%;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 900px) {
+  Header{
+    .title{
+      height: 110px;
+      padding-top: 0;
+    }
+    .navbar{
+      top: 60px;
+      left: 50px;
+      right: 50px;
+      ul{
+        text-align: center;
+      }
+    }
+    .logo{
+      flex-direction: column-reverse;
+      .why_lsdo {
+        display: none;
+      }
+      #user{
+        margin-top: 50px;
+        margin-left: 0;
+        &>div{
+          text-align: center;
+        }
+      }
+    }
+  }
+  #home{
+    min-width: 100%!important;
+  }
+  #start{
+    .section{
+      &:not(#home){
+        & > .sous-section{
+          .no-gal{
+            &:not(#clients){
+              min-width: 90%;
+            }
+          }
+        }
+        .section-content{
+          p{
+            min-width: 90%;
+          }
+        }
+      }
+    }
+  }
+  footer{
+    section{
+      width: 90%
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  body{
+    padding: 0 10px;
+  }
+  header{
+    .title{
+      padding: 0 0 0 0;
+      h1{
+        a{
+          font-size: $font40;
+        }
+      }
+    }
+  }
+
+
+  #start{
+    .section:not(#home) {
+      & > .sous-section{
+        .no-gal:not(#clients):nth-of-type(n+3) {
+          .title{
+            top: -50px;
+            left: -50px;
+            border: 50px solid #0f265c;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            h3{
+              top:-40px!important;
+              left:-40px!important;
+            }
+          }
+          .content{
+            p,ul{
+              width: 65%;
+            }
+          }
+        }
+      }
+    }
+    section{
+      .section-content{
+        &> p{
+          min-width: 100%;
+          margin-bottom: 50px;
+        }
+      }
+    }
+    .section{
+      margin-bottom: 20px;
+      .sous-section{
+        &> section{
+          margin-bottom: 20px;
+        }
+      }
+    }
+    h2{
+      font-size: $font32;
+    }
+    h3{
+      font-size: $h3;
+      white-space: normal!important;
+    }
+    #m-tier{
+      section{
+        &:nth-of-type(n+3){
+          h3{
+            font-size: 1rem;
+            white-space: nowrap!important;
+            top: -50px!important;
+          }
+        }
+      }
+    }
+    #r-f-rences{
+      h3{
+        margin-bottom: 60px;
+      }
+      #clients{
+        .images{
+          img{
+            margin:10px 10px;
+            min-width: 70%;
+          }
+        }
+      }
+    }
+    #recommandations{
+      .owl-carousel{
+        .owl-stage-outer{
+          height: 350px!important;
+        }
+        .content{
+          width: 250px!important;
+          img{
+            bottom: 20px!important;
+            top: auto!important;
+          }
+        }
+      }
+    }
+    #contact{
+      & > div{
+        p{
+          min-width: 90%!important;
+          text-align: center!important;
+          &:not(:nth-of-type(1)){
+            margin-top: 20px!important;
+          }
+        }
+      }
+    }
+  }
+  footer{
+    & > section{
+      &:last-child{
+        p:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+    h3{
+      font-size: 1.5rem;
+      white-space: normal;
+    }
+    ul{
+      justify-content: space-evenly;
+      li{
+        margin-left: 0;
+        a{
+          font-size: 1rem;
+        }
+      }
+    }
+  }
+}

user/themes/le_style_de_lours_modif/scss/theme/_mixins.scss

@@ -1,77 +1,82 @@
-@mixin breakpoint($point) {
-  @if $point == 2x {
-    @media (min-width:$size-2x) {
-      @content;
-    }
-  } @else if $point == xl {
-    @media (max-width: $size-xl) {
-      @content;
-    }
-
-  } @else if $point == lg {
-    @media (max-width: $size-lg) {
-      @content;
-    }
-  } @else if $point == md {
-    @media (max-width: $size-md) {
-      @content;
-    }
-  } @else if $point == sm {
-    @media (max-width: $size-sm) {
-      @content;
-    }
-  } @else if $point == xs {
-    @media (max-width: $size-xs) {
-      @content;
-    }
-  }  @else {
-    @warn "Breakpoint mixin supports: xs, sm, md, lg, xl, 2x";
+@mixin filet{
+  width: 100%;
+  text-align: center;
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  &::after{
+    right: 0;
+    content: " ";
+    width: 50%;
+    height: 0px;
+    border: $border-red;
+    margin-left: 20px;
+  }
+  &::before{
+    left: 0;
+    content: " ";
+    width: 50%;
+    height: 0px;
+    border: $border-red;
+    margin-right: 20px;
   }
 }
 
-@mixin vertical-align($position: relative) {
-  position: $position;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-@mixin button-primary() {
-  background: $primary-color;
-  border-color: $primary-color-dark;
-  color: $light-color;
-  &:focus,
-  &:hover {
-    background: darken($primary-color-dark, 2%);
-    border-color: darken($primary-color-dark, 5%);
-    color: $light-color;
+@mixin filet-b{
+  width: 100%;
+  text-align: center;
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  &::after{
+    right: 0;
+    content: " ";
+    width: 50%;
+    height: 0px;
+    border: $border-blue;
+    margin-left: 20px;
   }
-  &:active,
-  &.active {
-    background: darken($primary-color-dark, 4%);
-    border-color: darken($primary-color-dark, 7%);
-    color: $light-color;
+  &::before{
+    left: 0;
+    content: " ";
+    width: 50%;
+    height: 0px;
+    border: $border-blue;
+    margin-right: 20px;
   }
 }
 
-@function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
+@mixin triangle{
+  position: absolute;
+  z-index: 1;
+  transform: rotate(-135deg);
+  width: 0;
+  height: 0;
+  top: -70px;
+  left: -70px;
+  border: 70px solid $blue;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
 }
 
-@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
-  $u1: unit($min-vw);
-  $u2: unit($max-vw);
-  $u3: unit($min-font-size);
-  $u4: unit($max-font-size);
+@mixin rotateH{
+  transform: rotate(90deg);
+  position: absolute;
+  top: -8px;
+  left: -90px;
+}
 
-  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
-    & {
-      font-size: $min-font-size;
-      @media screen and (min-width: $min-vw) {
-        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
-      }
-      @media screen and (min-width: $max-vw) {
-        font-size: $max-font-size;
-      }
-    }
-  }
+@mixin arrow{
+  width: 0!important;
+  height: 0;
+  top: 35px;
+  left: 50%;
+  right: 50%;
+  border: 50px solid white;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  position: absolute;
+  transform: translateX(-50%);
 }

user/themes/le_style_de_lours_modif/scss/theme/_reset.scss

@@ -1,3 +1,6 @@
+*{
+  box-sizing : border-box;
+}
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
@@ -24,7 +27,7 @@ html {
 
 body {
   margin: 0;
-  padding: 0 50px 0 50px;
+  padding: 0;
 }
 
 /**
@@ -45,6 +48,10 @@ h1 {
   margin:0;
 }
 
+h1,h2,h3,h4,h5,p,em,strong,ul,li,a{
+  margin:0;
+  padding:0;
+}
 /* Grouping content
    ========================================================================== */
 

user/themes/le_style_de_lours_modif/scss/theme/_start.scss

@@ -1,263 +1,192 @@
-body{
-  position:relative;
+body {
+    position: relative;
 }
 
-.arrow{
-  width: 0!important;
-  height: 0;
-  top: 35px;
-  left: 50%;
-  right: 50%;
-  border: 50px solid white;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  position: absolute;
-  transform: translateX(-50%);
+#home {
+    width: 40%;
+    min-width: 700px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
-.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
-  background-color: #964587!important;
+.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
+    background-color: #964587!important;
 }
-.mCSB_scrollTools .mCSB_draggerRail{
-  background-color: $bkg-d!important;
+
+.mCSB_scrollTools .mCSB_draggerRail {
+    background-color: $bkg-d!important;
 }
 
-#start{
-  .section{
-    margin-bottom: 150px;
+.section-content {
+  p{
+    text-align: center;
   }
-  .sous-section{
-    section{
-      margin-bottom: 100px;
-    }
-  }
-  section{
-    position: relative;
-    h2{
-      text-align: center;
-      z-index: 1;
-      margin-top: -35px;
-      display: inline-flex;
+    .block{
       width: 100%;
-      align-items: center;
-      &::after{
-        right: 0;
-        content: " ";
-        width: 50%;
-        height: 0px;
-        border: 1px solid $blue;
-        margin-left: 20px;
-      }
-      &::before{
-        left: 0;
-        content: " ";
-        width: 50%;
-        height: 0px;
-        border: 1px solid $blue;
-        margin-right: 20px;
-      }
     }
-    h3{
-      width: 100%;
-      text-align: center;
-      display: inline-flex;
-      width: 100%;
-      align-items: center;
-      white-space:nowrap;
-      &::after{
-        right: 0;
-        content: " ";
+    .content {
         width: 50%;
-        height: 0px;
-        border: 2px dashed #8d2815;
-        margin-left: 20px;
+        margin: 70px auto;
+    }
+}
+
+.sous-section {
+    width: 100%;
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    h3 {
+        @include filet;
+    }
+    & > section{
+      .title{
+        margin-bottom: 70px;
       }
-      &::before{
-        left: 0;
-        content: " ";
-        width: 50%;
-        height: 0px;
-        border: 2px dashed #8d2815;
-        margin-right: 20px;
+    }
+    .item{
+      p{
+        text-align: justify;
       }
     }
-    .section-content{
-      & > h3{
-        margin: 50px auto;
-        &::before{
-          border: 0px!important;
+}
+
+.blocks {
+  width: 35%;
+  margin-bottom: 50px;
+  .title{
+    margin-bottom: 10px;
+  }
+}
+
+.item-etapes {
+    position: relative;
+
+    .title {
+        @include triangle;
+        pointer-events: none;
+    }
+
+    h4 {
+        @include rotateH;
+    }
+
+    .content {
+        .txt {
+            display: none;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            background: $blue;
         }
-        &::after{
-          border: 0px!important;
+    }
+
+    &:hover {
+        .txt {
+            display: inline-flex;
+            justify-content: center;
+            align-items: left;
+            flex-direction: column;
         }
-      }
-      & > p{
-        margin: 20px;
-        width: 50%;
-        text-align: center;
-        min-width: 600px;
-        margin: 50px auto 100px auto;
+    }
+}
 
-      }
+.arrow {
+    @include arrow;
+}
+
+.no-gal {
+    .section_n2 {
+        display: inline-flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
     }
-  }
+}
 
-  #home{
-    width: 40%;
-    min-width: 700px;
-    margin-left: auto;
-    margin-right: auto;
+.galerie{
+  h5{
+    margin-bottom: 0;
   }
-  .section:not(#home){
-    background:$section;
-    & > .sous-section{
-      display: inline-flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      width: 100%;
-      & > .no-gal:nth-of-type(odd){
-        margin-right: 50px;
+}
+
+#start {
+  margin: 0 50px;
+    & > section{
+      position: relative;
+      margin-bottom: 150px;
+      &:not(:first-child){
+        margin-bottom:150px;
       }
-      & > .no-gal:nth-of-type(even){
-        margin-left: 50px;
+      &:last-child{
+        margin-bottom: 0px!important;
       }
-      .no-gal:not(#clients){
-        width: 35%;
-        min-width: 350px;
-        &:nth-of-type(n+3){
-          position: relative;
-          .title{
-            position: absolute;
-            z-index: 1;
-            transform: rotate(-135deg);
-            width: 0;
-            height: 0;
-            top: -70px;
-            left: -120px;
-            border: 70px solid #0f265c;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-bottom-color: transparent;
-            h3{
-              transform: rotate(90deg);
-              position: absolute;
-              top: -75px;
-              left: -50px;
-              &:before{
-                margin-right: 7px;
-              }
-              &:after{
-                margin-left: 0px;
-              }
-            }
-          }
-          & > .content{
-            display: none;
-          }
-          .images{
-            height: auto;
-            position: relative;
-            .content{
-              position: absolute;
-              top: 0;
-              left: 0;
-              display: none;
-              height: 100%;
-              width: 100%;
-              background: #0f265c;
-              p,ul,li{
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translateY(-55%) translateX(-50%);
-                color: white;
-              }
-            }
-            &:hover{
-              .content{
-                display: block;
-              }
-            }
-          }
-        }
-        .content{
-          p{
-            text-align: justify;
-          }
+      h2 {
+        @include filet-b;
+      }
+      .sous-section{
+        & > section{
+          padding: 0 50px;
         }
       }
-      section{
-        width: 100%;
-        .title{
-          margin: 0 50px;
+      #clients{
+        .images {
+            display: inline-flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: space-evenly;
+            img {
+                width: 15%;
+                min-width: 150px;
+                height: 100%;
+            }
         }
       }
     }
-  }
 
-  #m-tier{
-    h3{
-      &::before{
-        border: 0px!important;
-      }
-      &::after{
-        border: 0px!important;
-      }
-    }
-  }
-  #r-f-rences{
-    h3{
-      margin-bottom: 100px;
-    }
-    #clients{
-      .images{
-        display: inline-flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-        img{
-          margin: 0 20px;
-          width: 15%;
-          min-width: 150px;
-          height: 100%;
+    .section:not(#home) {
+        background: $section;
+
+        & > .sous-section {
+            section {
+                width: 100%;
+            }
         }
-      }
     }
-  }
 
-  #contact{
-    background: transparent!important;
-    margin-bottom: 0!important;
-    h2{
-      background: transparent!important;
-    }
-    & > div {
-      display: inline-flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-        p{
-          width: 40%;
+
+    #contact {
+        background: transparent!important;
+        .blocks{
+          display: inline-flex;
+          flex-direction: column-reverse;
+          justify-content: center;
           &:nth-of-type(1){
-            text-align: right;
-            margin-right: 50px;
+            align-items: flex-end;
+            p{
+              text-align: right!important;
+            }
           }
           &:nth-of-type(2){
-            text-align: left;
+            align-items: flex-start;
+          }
+          .title{
+            display: none;
+          }
+          .content{
+            margin-top: 20px;
+          }
+          .images {
+              width: 10%;
+              min-width: 180px;
+              height: auto;
+              img{
+              border-radius: 150px;
+              }
           }
-        img{
-          margin-bottom: 20px;
-          border-radius: 150px;
-          width: 10%;
-          min-width: 180px;
-          height: auto;
         }
-      }
-      section{
-        width: 50%
-      }
+        h2 {
+            background: transparent!important;
+        }
     }
-  }
 }

user/themes/le_style_de_lours_modif/scss/theme/_typography.scss

@@ -1,208 +1,218 @@
-html,body{
-  font-size: 16px;
-  line-height: 22px;
+body,
+html {
+    font-size: 16px;
+    line-height: 22px;
 }
 
-h1, h2, h3{
-  font-family: $Regular-L;
-  font-weight: normal;
-  text-transform: uppercase;
+h1,
+h2,
+h3 {
+    font-family: $Regular-L;
+    font-weight: normal;
+    text-transform: uppercase;
+    margin: 0;
+    padding: 0;
 }
 
-h1,h2{
-  letter-spacing: $letterI1;
+h1,
+h2 {
+    letter-spacing: $letterI1;
 }
 
-h3{
-  letter-spacing: 0.2rem;
-  white-space: nowrap;
+h1 {
+    font-size: $fontH1;
+    line-height: $lineH96;
+
+    a {
+        color: $blue!important;
+        font-family: $Regular-L;
+        font-size: $fontH1;
+        line-height: $lineH96;
+    }
 }
 
-ul,li,a,p,del{
-  font-family: $Roboto-R;
-  font-weight: normal;
-  font-size: $fontp;
+h2 {
+    font-size: $fonth2;
+    line-height: $lineH30;
+    color: $blue!important;
+    background: white;
 }
 
-em{
-  font-family: $Roboto-I;
-  font-weight: normal;
+h3 {
+    letter-spacing: 0.2rem;
+    font-size: $font32;
 }
 
-strong{
-  font-family: $Roboto-B;
-  font-weight: normal;
+h5 {
+    font-family: $Roboto-B;
+    font-weight: normal;
+    font-size: $fontH5;
+    margin: 10px 0;
 }
 
-h1{
-  font-size: $fontH1;
-  line-height: $lineH96;
-  a{
-    color: $blue!important;
-    font-family: $Regular-L;
-    font-size: $fontH1;
-    line-height: $lineH96;
-  }
+a,
+del,
+li,
+p,
+ul {
+    font-family: $Roboto-R;
+    font-weight: normal;
+    font-size: $fontp;
+    line-height: 1.5rem;
+    margin: 0;
+    padding: 0;
 }
 
-h2{
-  font-size: $fonth2;
-  line-height: $lineH30;
-  color: $blue!important;
-  background: white;
+em {
+    font-family: $Roboto-I;
+    font-weight: normal;
 }
 
-h3{
-  font-size: $font32;
+strong {
+    font-family: $Roboto-B;
+    font-weight: normal;
 }
 
-header{
-  nav{
-    ul{
-      li{
-        a{
-          font-family: $Regular-L;
-          font-size: $fontnav;
-          line-height: $lineH40;
-          letter-spacing: $letterI1;
-          color: $blue!important;
+header {
+    nav {
+        ul {
+            li {
+                a {
+                    font-family: $Regular-L;
+                    font-size: $fontnav;
+                    line-height: $lineH40;
+                    letter-spacing: $letterI1;
+                    color: $blue!important;
+                }
+            }
         }
-      }
-    }
-  }
-  .logo{
-    #user{
-      p{
-        font-size: $font32;
-        font-family: $Regular-L;
-        line-height: $lineH32;
-        letter-spacing: $letterI1;
-      }
     }
-    .why_lsdo{
-      h3{
-        font-size: $h3;
-        letter-spacing: $letterI1;
-        &:hover{
-          text-decoration: underline;
+
+    .logo {
+        #user {
+            p {
+                font-size: $font32;
+                font-family: $Regular-L;
+                line-height: $lineH32;
+                letter-spacing: $letterI1;
+            }
+        }
+
+        .why_lsdo {
+            h3 {
+                font-size: $h3;
+                letter-spacing: $letterI1;
+
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
         }
-      }
     }
-  }
 }
 
-#start{
-  &> section > div > h3{
-    // margin-top: 120px;
-  }
-  &> section > div > p{
-    // padding-top: 120px!important;
-    // padding-bottom: 100px;
-  }
+#home {
+    & > p {
+        font-family: $Roboto-L;
+        text-align: center;
+        font-size: $fontPi;
+        line-height: $lineH24;
+    }
+}
 
-  section{
-    .block{
-       h3{
+.grav-youtube {
+    margin-top: 20px;
+}
+
+.section-content {
+    h3 {
+        font-family: $Regular-L;
         text-align: center;
-        color: #8d2815ff;
+        color: black!important;
         text-transform: inherit;
-        font-family: $Roboto-R;
-        letter-spacing: 0;
-      }
-      .content{
-        text-align: justify;
-      }
+        letter-spacing: 0.1rem!important;
+        white-space: nowrap;
     }
-  }
-  #home{
-    & > p{
-      font-family: $Roboto-L;
-      text-align: center;
-      font-size: $fontPi;
-      line-height: $lineH24;
-    }
-  }
-  #m-tier{
-    section{
-      &:nth-of-type(n+3){
-        h3{
-        font-size: 1.5rem;
-        color: white;
-        }
-      }
-      &:nth-of-type(-n+2){
-        h3{
-          text-transform: capitalize;
-          text-align: center;
-          color:$h3-color;
-          text-transform: inherit;
-          font-family: $Roboto-B;
-          letter-spacing: 0;
-          font-size: 1.5rem;
-        }
-      }
+}
+
+.sous-section {
+    h3 {
+        font-family: $Regular-L;
+        text-align: center;
+        color: $h3-color;
+        background-color: $section;
+        white-space: nowrap;
     }
-  }
+}
 
-  #r-f-rences{
-    & > p{
-      text-align: center;
-      font-size: 1.2rem;
-      line-height: 1.7rem;
+.galerie {
+    p {
+        font-size: 0.8rem;
+        line-height: 1.2rem;
     }
-    .title{
-      // margin: 0 50px;
+}
+
+.item {
+    h4 {
+        font-family: $Roboto-B;
+        text-transform: none;
+        font-size: $h3;
+        text-align: center;
+        color: $red;
+        letter-spacing: normal!important;
+        font-weight: normal;
     }
-    h3{
-      font-family: $Regular-L;
-      text-align: center;
-      color: $h3-color;
-      margin: auto;
-      background-color: $section;
+}
+
+.item-etapes {
+    h4 {
+        font-size: $h3;
+        color: white;
     }
-    #travaux_r-alis-s{
-      .galerie{
-        p{
-          font-size: 0.8rem;
-          line-height: 1.2rem;
+
+    .txt {
+        & > * {
+            color: white;
         }
-      }
     }
-    #recommandations{
-      .owl-carousel{
-        .content{
-          p:first-of-type{
-            text-align: center;
-          }
+}
+
+#contact {
+    p {
+        strong {
+            font-family: $Regular-L;
+            font-weight: normal;
+            font-size: $h3;
+            letter-spacing: $letterI1;
+            color: $blue;
         }
-      }
     }
-  }
 }
 
-#contact{
-  p{
-    strong{
-    font-family: $Regular-L;
-    font-weight: normal;
-    font-size: $h3;
-    letter-spacing: $letterI1;
-    color: $blue;
+footer {
+    h3 {
+        margin: 20px auto;
+    }
+
+    section {
+        margin: auto;
+        text-align: center;
 
+        p:last-child {
+            padding-bottom: 15px;
+        }
     }
-  }
-}
-footer{
-  ul{
-    li{
-      text-transform: uppercase;
-      letter-spacing: $letterI1;
-      a{
-        font-family: $Regular-L;
-        font-size: $fontnav;
-        color: $blue;
 
-      }
+    ul {
+        li {
+            text-transform: uppercase;
+            letter-spacing: $letterI1;
+
+            a {
+                font-family: $Regular-L;
+                font-size: $fontnav;
+                color: $blue;
+            }
+        }
     }
-  }
 }

user/themes/le_style_de_lours_modif/scss/theme/_variables.scss

@@ -9,9 +9,18 @@
 
 
 // font-size
-$fontp: 1rem;
+
 $fontnav: 1.15rem;
 $fontPi: 1.15rem;
+
+$fzh1: 4rem;
+$fzh2: 3rem;
+$fzh3: 2rem;
+$fzh4: 1.5rem;
+$fontp: 1rem;
+$fontH5: 0.9rem;
+
+
 $h3: 1.5rem;
 $font32: 2rem;
 $fonth2: 3rem;
@@ -21,9 +30,16 @@ $font56: 4rem;
 $fontH1: 4rem;
 
 // interline
+
+$lh1: 4.5rem;
+$lh2: 3.5rem;
+$lh3: 2.5rem;
+$lh4: 1.5rem;
+$lp: 1.2rem;
+
+
 $lineH24: 2rem;
 $lineH30: 2.5rem;
-
 $lineH32: 3rem;
 $lineH40: 4rem;
 $lineH96:6rem;
@@ -31,7 +47,6 @@ $lineH96:6rem;
 //interlettre
 $letterI1: 0.1rem;
 
-
 // color
 $section: rgb(255, 250, 229);
 $h3-color: #8d2815ff;
@@ -40,3 +55,8 @@ $bkg-g: rgb(255, 250, 229);
 $bkg-d: rgb(243,150,85);
 
 $blue: #0f265c;
+$red: #8d2815ff;
+
+// filet
+$border-red: 2px dashed $red;
+$border-blue: 1px solid $blue;

user/themes/le_style_de_lours_modif/templates/item-etapes.html.twig

@@ -0,0 +1,17 @@
+<div class="item-etapes blocks">
+
+  <div class="content">
+    {% for images in child.media.images %}
+    <div class="img">
+      {{ images.html }}
+    </div>
+    {% endfor %}
+
+    {% if child.content %}
+    <div class="txt">
+      {{ child.content }}
+    </div>
+    {% endif %}
+  </div>
+
+</div>

user/themes/le_style_de_lours_modif/templates/item.html.twig

@@ -35,7 +35,6 @@
                 {% include 'partials/sidebar.html.twig' %}
             {% endblock %}
         {% endembed %}
-
     </section>
 </section>
 {% endblock %}

user/themes/le_style_de_lours_modif/templates/items.html.twig

@@ -0,0 +1,21 @@
+<div class="item blocks">
+
+  {% if child.title %}
+    <div class="title">
+      <h4>{{ child.title }}</h4>
+    </div>
+  {% endif %}
+
+  {% if child.content %}
+    <div class="content">
+      {{ child.content }}
+    </div>
+  {% endif %}
+
+  {% for images in child.media.images %}
+    <div class="images">
+      {{ images.html }}
+    </div>
+  {% endfor %}
+
+</div>

user/themes/le_style_de_lours_modif/templates/modular.html.twig

@@ -46,32 +46,52 @@
 {% endblock %}
 
 {% block body %}
+
   <section id="{{ macro.pageLinkName(page.menu) }}" class="section">
-    {{page.content}}
+    <div class="content section-content">
+      {{page.content}}
+    </div>
   </section>
 
   {% for module in page.collection() if module.template == 'blog' %}
 
     <section id="{{ macro.pageLinkName(module.menu)|hyphenize }}" class="section">
       <div class="content section-content">
-        <h2>{{ module.title }}</h2>
-        <div class="arrow"></div>
-        {{ module.content|raw }}
+        <div class="block">
+          <h2>{{ module.title }}</h2>
+          <div class="arrow"></div>
+            <div class="content">
+              {{ module.content|raw }}
+          </div>
+        </div>
       </div>
 
       <div class="sous-section">
-        {% for child in module.collection %}
+
+        {% for child in module.collection if child.template == 'items' %}
+            {% include 'items.html.twig' %}
+        {% endfor %}
+
+        {% for child in module.collection if child.template == 'item-etapes' %}
+            {% include 'item-etapes.html.twig' %}
+        {% endfor %}
+
+        {% for child in module.collection if child.template == 'blog' %}
           {% set gal = child.header.blog.config %}
 
           {% if gal %}
-            {% include 'partials/blog/sous-gal.html.twig' %}
+
+            {% include 'partials/sous-gal.html.twig' %}
           {% else %}
-            {% include 'partials/blog/no-gal.html.twig' %}
+            {% include 'partials/no-gal.html.twig' %}
           {% endif %}
+
         {% endfor %}
+
       </div>
 
-      </section>
+    </section>
 
   {% endfor %}
+
 {% endblock %}

user/themes/le_style_de_lours_modif/templates/partials/base.html.twig

@@ -59,9 +59,9 @@
       </svg>
     </div>
   </div>
-    {% block header %}
-    <header>
 
+  {% block header %}
+    <header>
       <nav class="navbar">
         {% block header_navigation %}
           {% include 'partials/navigation.html.twig' %}
@@ -72,8 +72,7 @@
         <h1><a href="{{ home_url }}">{{site.title}}</a></h1>
       </div>
 
-      <section class="logo">
-
+      <div class="logo">
         <div id="user">
           <div id="name">
             <p>{{ theme_config.profile.name | default(site.author.name) }}</p>
@@ -87,66 +86,67 @@
 
         {% for module in page.find('/home').children.order('date', 'desc') %}
           <section class="why_lsdo ">
-              <h3>{{module.title}}</h3>
+            <h3>{{module.title}}</h3>
             {{module.content}}
-           <svg>
+            <svg>
               <path id='' d="M 0,0 100,0 0,20 0,20 Z" style="fill:#964587" />
             </svg>
           </section>
         {% endfor %}
-      </header>
-    {% endblock %}
+
+      </div>
+    </header>
+  {% endblock %}
 
     {% block hero %}{% endblock %}
 
-        <section id="start">
-          {% block body %}
-                {% block content %}{% endblock %}
-          {% endblock %}
-        </section>
+  <section id="start">
+    {% block body %}
+      {% block content %}{% endblock %}
+    {% endblock %}
+  </section>
 
     {% block footer %}
+      <footer>
+        <ul>
+          {% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
+            <li>
+              <a href="#{{ macro.pageLinkName(module.menu)|hyphenize }}">{{module.title}}</a>
+            </li>
+          {% endfor %}
+        </ul>
+
+          {% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
+            <section id="{{ macro.pageLinkName(module.menu)|hyphenize }}">
+              <h3>{{module.title}}</h3>
+              {{module.content}}
+            </section>
+          {% endfor %}
+    </footer>
+  {% endblock %}
 
-    <footer>
-      <ul>
-        {% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
-          <li>
-            <a href="#{{ macro.pageLinkName(module.menu)|hyphenize }}">{{module.title}}</a>
-          </li>
-        {% endfor %}
-      </ul>
-
-        {% for module in page.find('/pied-de-page').children.order('date', 'desc') %}
-          <section id="{{ macro.pageLinkName(module.menu)|hyphenize }}">
-            <h3>{{module.title}}</h3>
-            {{module.content}}
-          </section>
-        {% endfor %}
-
-      <div class="background-footer">
-        <div class="fond-g">
-          <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
-            <path
-               sodipodi:nodetypes="cccc"
-               inkscape:connector-curvature="0"
-               id="path3336"
-               d="M 500,500 0,0 0,500 Z"
-               style="fill:#fff59b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
-          </svg>
-        </div>
-        <div class="fond-d">
-          <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
-            <path
-               sodipodi:nodetypes="cccc"
-               inkscape:connector-curvature="0"
-               id="path3336"
-               d="M 500,500 0,500 500,0 Z"
-               style="fill:#f39655;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
-          </svg>
-        </div>
-      </div>
-  </footer>
-    {% endblock %}
+  <div class="background-footer">
+    <div class="fond-g">
+      <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
+        <path
+        sodipodi:nodetypes="cccc"
+        inkscape:connector-curvature="0"
+        id="path3336"
+        d="M 500,500 0,0 0,500 Z"
+        style="fill:#fff59b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
+      </svg>
+    </div>
+    <div class="fond-d">
+      <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
+        <path
+        sodipodi:nodetypes="cccc"
+        inkscape:connector-curvature="0"
+        id="path3336"
+        d="M 500,500 0,500 500,0 Z"
+        style="fill:#f39655;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3.22091293px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;enable-background:new" />
+      </svg>
+    </div>
+  </div>
 
 {% block bottom %}
     {{ assets.js('bottom')|raw }}

user/themes/le_style_de_lours_modif/templates/partials/blog/no-gal.html.twig

@@ -1,38 +0,0 @@
-<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="no-gal">
-
-    {% if child.title %}
-      <div class="title">
-        <h3>{{ child.title }}</h3>
-      </div>
-    {% endif %}
-
-    {% if child.content %}
-      <div class="content">
-        {{ child.content }}
-      </div>
-    {% endif %}
-
-    <div class="images">
-      {% for images in child.media.images %}
-        {% if images.html %}
-          {{ images.html }}
-          {% if child.content %}
-            <div class="content">
-              {{ child.content }}
-            </div>
-          {% endif %}
-        {% endif %}
-      {% endfor %}
-    </div>
-
-  {% for item in child.collection %}
-    <h4>{{ item.title }}</h4>
-    {{ item.content }}
-    <div class="images">
-    {% for images in item.media.images %}
-        {{ images.html }}
-    {% endfor %}
-  </div>
-  {% endfor %}
-
-</section>

user/themes/le_style_de_lours_modif/templates/partials/no-gal.html.twig

@@ -0,0 +1,43 @@
+<section id="{{ macro.pageLinkName(child.menu)|hyphenize }}" class="no-gal">
+<!-- si item-text va chercher ce template -->
+
+  {% if child.title %}
+    <div class="title">
+      <h3>{{ child.title }}</h3>
+    </div>
+  {% endif %}
+
+  {% if child.content %}
+    <div class="content">
+      {{ child.content }}
+    </div>
+  {% endif %}
+
+  <div class="images">
+    {% for images in child.media.images %}
+    {% if images %}{% endif %}
+      {{ images.html }}
+      <div class="content">
+        {{ child.content }}
+      </div>
+    {% endfor %}
+  </div>
+
+  <div class="section_n2">
+    {% for item in child.collection %}
+
+      <div class="items blocks">
+
+      {% for images in item.media.images %}
+        <div class="images">
+          {{ images.html }}
+        </div>
+      {% endfor %}
+        <div class="content">
+          {{ item.content }}
+        </div>
+      </div>
+
+    {% endfor %}
+  </div>
+</section>

user/themes/le_style_de_lours_modif/templates/partials/blog/sous-gal.html.twig → user/themes/le_style_de_lours_modif/templates/partials/sous-gal.html.twig

@@ -24,12 +24,16 @@
   <div class="owl-carousel">
     {% for item in child.collection %}
       <div class="galerie">
+
         {% for images in item.media.images %}
           <div class="images">
             {{ images.html }}
           </div>
         {% endfor %}
         <div class="content">
+          {% if item.title %}
+          <h5>{{ item.title}}</h5>
+          {% endif %}
           {{ item.content }}
         </div>
       </div>