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/01.secretaire-dedition-et-de-redaction/item.md

@@ -1,5 +0,0 @@
----
-title: 'Secrétaire d''édition et de rédaction'
----
-
-L’image de votre structure passe par la qualité de vos supports de communication ! Quel que soit votre projet PRINT et son avancée, je vous accompagne tout au long de sa réalisation. Je comprends vos besoins et suis là pour y répondre. Je vous fais gagner un temps précieux et respecte vos délais. Je coordonne tout avec professionnalisme et exigence : graphistes, illustrateurs, photographes, imprimeurs… Devis et factures, là aussi, je veille à tout et vous explique tout, à chaque étape.

user/pages/02.nouvelle-section-1/01.secretaire-dedition-et-de-redaction/items.md

@@ -0,0 +1,5 @@
+---
+title: ' Secrétaire d''édition et de rédaction'
+---
+
+L’image de votre structure passe par la qualité de vos supports de communication ! Quel que soit votre projet PRINT et son avancée, je vous accompagne tout au long de sa réalisation. Je comprends vos besoins et suis là pour y répondre. Je vous fais gagner un temps précieux et respecte vos délais. Je coordonne tout avec professionnalisme et exigence : graphistes, illustrateurs, photographes, imprimeurs… Devis et factures, là aussi, je veille à tout et vous explique tout, à chaque étape.

user/pages/02.nouvelle-section-1/02.chef-de-projet-print/item.md → user/pages/02.nouvelle-section-1/02.chef-de-projet-print/items.md

@@ -2,4 +2,4 @@
 title: 'Chef de projet "PRINT"'
 ---
 
-Riche d’une expérience de plus de 26 ans dans le domaine des Industries graphiques, je connais parfaitement la chaîne graphique et m’inscris dans la famille des graphistes, illustrateurs, photographes, imprimeurs... Par deux fois rédacteur en chef de magazines, je veille également au texte et à sa qualité. Je le structure et le corrige. Lorsque votre projet le nécessite, je fais appel à "mon" équipe de prestataires extérieurs, vrais professionnels, éthiques, responsables et engagés. Ma formation en droit à l’image et la pratique de la photographie enrichissent ma vision artistique et technique de l’ensemble des composantes d’un document imprimé.
+Riche d’une expérience de plus de 26 ans dans le domaine des Industries graphiques, je connais parfaitement la chaîne graphique et m’inscris dans la famille des graphistes, illustrateurs, photographes, imprimeurs... Par deux fois rédacteur en chef de magazines, je veille également au texte et à sa qualité. Je le structure et le corrige. Lorsque votre projet le nécessite, je fais appel à "mon" équipe de prestataires extérieurs, vrais professionnels, éthiques, responsables et engagés. Ma formation en droit à l’image et la pratique de la photographie enrichissent ma vision artistique et technique de l’ensemble des composantes d’un document imprimé.

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>