gabarit page themes

web/themes/custom/popsu/css/styles.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*popsu*/
 /*foundation*/
 /**
@@ -1152,8 +1153,7 @@ body {
   font-family: "trueno";
   font-size: 0.6rem;
   font-weight: 300;
-  line-height: 1.5;
-  background: #eff2f9; }
+  line-height: 1.5; }
   body.path-node.programme-1 #node\:title, body.path-node.programme-1 .field_sous_titre, body.path-node.programme-1 .field_intro {
     color: #4dabc1; }
   body.path-node.programme-1 article h2, body.path-node.programme-1 article h3, body.path-node.programme-1 article h4, body.path-node.programme-1 article h5, body.path-node.programme-1 article h6, body.path-node.programme-1 article .field_titre {
@@ -1315,7 +1315,12 @@ iframe {
 .header_top_left_container {
   height: 100%;
   display: grid;
-  grid-template-columns: 1fr 1fr; }
+  grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
+  text-align: center;
+  column-gap: 10px; }
+  .header_top_left_container > div[id=''] {
+    height: 100%; }
   .header_top_left_container a[rel~='home'] {
     height: 100%;
     display: block;
@@ -1387,7 +1392,7 @@ iframe {
   display: none;
   grid-template-columns: 10% 25% 25% 30% 10%;
   padding: 1rem 0;
-  z-index: 100;
+  z-index: 140;
   line-height: 2; }
   #header-top-right .header_top_right_container nav {
     grid-column-start: 2; }
@@ -1409,7 +1414,8 @@ iframe {
     width: 100%; }
 
 footer {
-  background: white; }
+  background: white;
+  margin-top: 3rem; }
 
 #footer-bottom {
   padding: 2rem 0;
@@ -1426,13 +1432,13 @@ footer {
       height: 100%;
       display: grid; }
   #footer-bottom .logo-gouv {
-    height: 70%;
+    height: 50%;
     display: block;
     color: transparent;
     font-size: 0;
     background: left/contain no-repeat url(../images/gouv.svg); }
   #footer-bottom .logo-puca {
-    height: 70%;
+    height: 50%;
     display: block;
     color: transparent;
     font-size: 0;
@@ -1503,25 +1509,25 @@ footer {
   .last-news .views-row a, .last-ressources .views-row a {
     text-decoration: none; }
 
-.last-news .programme-1 .views-field {
+.last-news .programme-1 .views-field:not(.views-field-field-image) {
   background: #4dabc1 !important; }
 
-.last-news .programme-2 .views-field {
+.last-news .programme-2 .views-field:not(.views-field-field-image) {
   background: #61ab32 !important; }
 
-.last-news .programme-3 .views-field {
+.last-news .programme-3 .views-field:not(.views-field-field-image) {
   background: #646578 !important; }
 
-.last-news .programme-4 .views-field {
+.last-news .programme-4 .views-field:not(.views-field-field-image) {
   background: black; }
 
-.last-news .programme-5 .views-field {
+.last-news .programme-5 .views-field:not(.views-field-field-image) {
   background: #ab9569 !important; }
 
-.last-news .programme-6 .views-field {
+.last-news .programme-6 .views-field:not(.views-field-field-image) {
   background: #e01a35 !important; }
 
-.last-news .programme-7 .views-field {
+.last-news .programme-7 .views-field:not(.views-field-field-image) {
   background: #28429f !important; }
 
 .last-news {
@@ -1640,10 +1646,10 @@ footer {
   height: 7rem;
   position: relative;
   background: center/contain no-repeat url(../images/popsu-home-logo.png);
-  margin: -5rem 0 3rem 0; }
+  margin: -9% 0 3rem 0 !important; }
 
 .about {
-  box-shadow: inset 0 17rem 18rem #eff2f9;
+  box-shadow: inset 0 17rem 18rem white;
   background: url(../images/motif_croix.svg);
   font-size: 0.8rem;
   text-align: center;
@@ -1746,51 +1752,67 @@ footer {
   grid-template-columns: repeat(3, 1fr);
   align-items: center;
   justify-items: center;
-  margin-top: 1rem; }
+  margin-top: 0; }
   #home_prog_container .views-row {
     background-clip: content-box;
-    height: 13rem;
+    min-height: 7rem;
     width: 100%;
     display: grid;
     align-items: center;
     padding: 1rem; }
-    #home_prog_container .views-row .views-field-title {
+    #home_prog_container .views-row .views-field:not(.views-field-field-logo) {
       font-size: 0.8rem;
       font-weight: 600;
       display: none; }
-    #home_prog_container .views-row:hover .views-field-title {
+    #home_prog_container .views-row .views-field-title {
+      margin-bottom: 1rem; }
+    #home_prog_container .views-row:hover .views-field:not(.views-field-field-logo) {
       font-weight: 600;
       display: block;
       color: white;
       text-align: center; }
-      #home_prog_container .views-row:hover .views-field-title a {
+      #home_prog_container .views-row:hover .views-field:not(.views-field-field-logo) a {
         text-decoration: none; }
+    #home_prog_container .views-row .views-field-field-logo {
+      text-align: center; }
   #home_prog_container .views-field-field-diaporama {
     display: none; }
-  #home_prog_container .programme-1 {
-    background: center/60% no-repeat url(../images/POPSU_1.svg) white; }
-    #home_prog_container .programme-1:hover {
-      background: #4dabc1; }
-  #home_prog_container .programme-2 {
-    background: center/60% no-repeat url(../images/POPSU_2.svg) white; }
-    #home_prog_container .programme-2:hover {
-      background: #61ab32; }
-  #home_prog_container .programme-3 {
-    background: center/50% no-repeat url(../images/POPSU_Europe.svg) white; }
-    #home_prog_container .programme-3:hover {
-      background: #646578; }
-  #home_prog_container .programme-5 {
-    background: center/45% no-repeat url(../images/POPSU_monde.svg) white; }
-    #home_prog_container .programme-5:hover {
-      background: #ab9569; }
-  #home_prog_container .programme-6 {
-    background: center/60% no-repeat url(../images/POPSU_territoires.svg) white; }
-    #home_prog_container .programme-6:hover {
-      background: #e01a35; }
-  #home_prog_container .programme-7 {
-    background: center/60% no-repeat url(../images/POPSU_metropoles.svg) white; }
-    #home_prog_container .programme-7:hover {
-      background: #28429f; }
+  #home_prog_container .programme-1 img {
+    width: 50%; }
+  #home_prog_container .programme-1:hover {
+    background: #4dabc1; }
+    #home_prog_container .programme-1:hover img {
+      display: none; }
+  #home_prog_container .programme-2 img {
+    width: 60%; }
+  #home_prog_container .programme-2:hover {
+    background: #61ab32; }
+    #home_prog_container .programme-2:hover img {
+      display: none; }
+  #home_prog_container .programme-3 img {
+    width: 50%; }
+  #home_prog_container .programme-3:hover {
+    background: #646578; }
+    #home_prog_container .programme-3:hover img {
+      display: none; }
+  #home_prog_container .programme-5 img {
+    width: 45%; }
+  #home_prog_container .programme-5:hover {
+    background: #ab9569; }
+    #home_prog_container .programme-5:hover img {
+      display: none; }
+  #home_prog_container .programme-6 img {
+    width: 60%; }
+  #home_prog_container .programme-6:hover {
+    background: #e01a35; }
+    #home_prog_container .programme-6:hover img {
+      display: none; }
+  #home_prog_container .programme-7 img {
+    width: 60%; }
+  #home_prog_container .programme-7:hover {
+    background: #28429f; }
+    #home_prog_container .programme-7:hover img {
+      display: none; }
 
 #home_theme_container .slick-slide {
   margin: 0 1rem; }
@@ -1813,10 +1835,14 @@ footer {
 #home_theme_container .views-row {
   background-clip: content-box;
   background-color: grey;
-  height: 10rem;
-  width: 10rem !important;
+  width: 100% !important;
   position: relative; }
 
+#home_theme_container .views-row:after {
+  content: "";
+  display: block;
+  padding-bottom: 100%; }
+
 #home_theme_container .views-field-title {
   display: grid;
   top: 0;
@@ -1835,6 +1861,15 @@ footer {
     margin-top: -.5rem;
     text-decoration: none; }
 
+#home_theme_container .views-field-field-image:before {
+  content: "";
+  display: block;
+  position: absolute;
+  background: black;
+  opacity: .4;
+  width: 100%;
+  height: 100%; }
+
 #home_theme_container .views-field-field-image {
   top: 0;
   left: 0;
@@ -2174,23 +2209,23 @@ article h2, article h3, article h4, article h5, article h6, .paragraph h2, .para
 article p, .paragraph p {
   margin-bottom: .5rem; }
 
-.block-region-third h2 {
+.block-region-first h2, .block-region-third h2 {
   font-size: 1rem;
   background-color: black;
   color: white;
   padding: .3rem 1rem; }
 
-.block-region-third .views-field-field-intro {
+.block-region-first .views-field-field-intro, .block-region-third .views-field-field-intro {
   display: none; }
 
 .block-region-first {
   background-color: black;
-  color: white; }
+  color: white;
+  z-index: 120; }
   .block-region-first #node\:title {
     text-transform: uppercase;
     font-family: 'duke';
     font-size: 1rem;
-    padding: .3rem .5rem;
     text-decoration: none; }
     .block-region-first #node\:title:hover {
       text-decoration: underline; }
@@ -2202,7 +2237,7 @@ article p, .paragraph p {
   width: 100vw;
   height: 40vh;
   background: url(../images/motif_croix.svg);
-  box-shadow: inset 0 -5rem 8rem #eff2f9;
+  box-shadow: inset 0 -5rem 8rem white;
   z-index: -1; }
 
 .page-node-type-actualite .block-region-first, .page-node-type-evenement .block-region-first {
@@ -2602,7 +2637,6 @@ article p, .paragraph p {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 10;
   width: 25%;
   padding: 1rem 1.5rem; }
   .page-node-type-programme .block-region-first .prog-ressources-link {
@@ -2699,7 +2733,7 @@ article p, .paragraph p {
   bottom: 0;
   left: -15px;
   right: -15px;
-  box-shadow: inset #eff2f9 0 -4rem 2rem; }
+  box-shadow: inset white 0 -4rem 2rem; }
 
 .page-node-type-programme article .field_textes .paragraph .crop {
   max-height: 7rem;
@@ -2813,4 +2847,115 @@ article p, .paragraph p {
       text-decoration: none;
       color: white; }
 
+.page-node-type-evenement.programme-1 .field_programme, .page-node-type-actualite.programme-1 .field_programme {
+  background-color: #4dabc1; }
+
+.page-node-type-evenement.programme-2 .field_programme, .page-node-type-actualite.programme-2 .field_programme {
+  background-color: #61ab32; }
+
+.page-node-type-evenement.programme-3 .field_programme, .page-node-type-actualite.programme-3 .field_programme {
+  background-color: #646578; }
+
+.page-node-type-evenement.programme-4 .field_programme, .page-node-type-actualite.programme-4 .field_programme {
+  background-color: #28429f; }
+
+.page-node-type-evenement.programme-5 .field_programme, .page-node-type-actualite.programme-5 .field_programme {
+  background-color: #ab9569; }
+
+.page-node-type-evenement.programme-6 .field_programme, .page-node-type-actualite.programme-6 .field_programme {
+  background-color: #e01a35; }
+
+.page-node-type-evenement.programme-7 .field_programme, .page-node-type-actualite.programme-7 .field_programme {
+  background-color: #28429f; }
+
+.page-node-type-evenement .block-region-second, .page-node-type-actualite .block-region-second {
+  display: grid; }
+  .page-node-type-evenement .block-region-second #node\:title, .page-node-type-actualite .block-region-second #node\:title {
+    margin: 0;
+    font-size: 1.6rem;
+    line-height: 1.3; }
+  .page-node-type-evenement .block-region-second #node\:field_programme, .page-node-type-actualite .block-region-second #node\:field_programme {
+    grid-row: 1;
+    margin-bottom: 1rem; }
+    .page-node-type-evenement .block-region-second #node\:field_programme .field_programme, .page-node-type-actualite .block-region-second #node\:field_programme .field_programme {
+      display: inline-block;
+      width: auto;
+      padding: .3rem .5rem;
+      color: white;
+      font-weight: 600; }
+  .page-node-type-evenement .block-region-second #node\:field_date, .page-node-type-actualite .block-region-second #node\:field_date {
+    font-size: 0.8rem;
+    grid-row: 2; }
+    .page-node-type-evenement .block-region-second #node\:field_date .field_date div, .page-node-type-actualite .block-region-second #node\:field_date .field_date div {
+      float: left;
+      margin-right: 1rem; }
+  .page-node-type-evenement .block-region-second #node\:field_sous_titre, .page-node-type-actualite .block-region-second #node\:field_sous_titre {
+    text-transform: uppercase; }
+  .page-node-type-evenement .block-region-second #node\:field_intro, .page-node-type-actualite .block-region-second #node\:field_intro {
+    font-size: 0.8rem; }
+  .page-node-type-evenement .block-region-second #node\:field_image, .page-node-type-actualite .block-region-second #node\:field_image {
+    grid-row: 5;
+    width: 100%;
+    margin: 1rem 0; }
+    .page-node-type-evenement .block-region-second #node\:field_image img, .page-node-type-actualite .block-region-second #node\:field_image img {
+      width: 100%; }
+
+.page-node-type-evenement .block-region-first, .page-node-type-actualite .block-region-first {
+  padding: 1rem 0 .5rem 0; }
+  .page-node-type-evenement .block-region-first > div, .page-node-type-actualite .block-region-first > div {
+    padding: 0 0 .5rem 0; }
+  .page-node-type-evenement .block-region-first a, .page-node-type-actualite .block-region-first a {
+    padding: 0 0 0 1rem; }
+
+.page-node-type-evenement .block-region-third, .page-node-type-actualite .block-region-third {
+  position: sticky;
+  top: 4rem; }
+  .page-node-type-evenement .block-region-third .field_fichier, .page-node-type-evenement .block-region-third .field_ressources_liees, .page-node-type-actualite .block-region-third .field_fichier, .page-node-type-actualite .block-region-third .field_ressources_liees {
+    margin: .5rem 0;
+    padding-right: 1.3rem; }
+    .page-node-type-evenement .block-region-third .field_fichier a, .page-node-type-evenement .block-region-third .field_ressources_liees a, .page-node-type-actualite .block-region-third .field_fichier a, .page-node-type-actualite .block-region-third .field_ressources_liees a {
+      font-weight: 600;
+      text-decoration: none; }
+      .page-node-type-evenement .block-region-third .field_fichier a:hover, .page-node-type-evenement .block-region-third .field_ressources_liees a:hover, .page-node-type-actualite .block-region-third .field_fichier a:hover, .page-node-type-actualite .block-region-third .field_ressources_liees a:hover {
+        text-decoration: underline; }
+
+.page-node-type-theme .block-region-first {
+  visibility: hidden; }
+
+.page-node-type-theme .block-region-third {
+  margin-top: 30rem; }
+
+.page-node-type-theme #node\:title:before {
+  content: "théme";
+  clear: both;
+  display: block;
+  width: 100%;
+  font-size: 0.45rem;
+  text-transform: uppercase;
+  margin-bottom: .8rem; }
+
+.page-node-type-theme #node\:title {
+  margin: 0;
+  font-size: 1.6rem;
+  line-height: 1.3;
+  font-weight: 600;
+  margin-bottom: 1rem; }
+
+.page-node-type-theme #node\:field_image {
+  width: 150%; }
+  .page-node-type-theme #node\:field_image img {
+    width: 100%; }
+
+.page-node-type-theme .block-region-bottom #node\:field_projets_lies h2 {
+  text-align: center; }
+
+.page-node-type-theme .block-region-bottom #node\:field_projets_lies .field_projets_lies {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  column-gap: 1rem;
+  padding: 0 10%; }
+
+.page-node-type-theme .block-region-bottom #node\:field_projets_lies article .body {
+  display: none; }
+
 /*# sourceMappingURL=styles.css.map */

web/themes/custom/popsu/lib/script.js

@@ -7,7 +7,7 @@ $(function(){
 			slidesToShow: 1,
 			slidesToScroll: 1,
 			centerMode: true,
-			centerPadding: '200px',
+			centerPadding: '300px',
 		});
 		$('.last-ressources').slick({
 			slidesToShow: 3,

web/themes/custom/popsu/partials/header.html.twig

@@ -1,9 +1,9 @@
 <header role="banner" class="columns small-12">
     <section id="header-top" class="row align-middle">
-      <div id="header-top-left" class="columns small-2">
+      <div id="header-top-left" class="columns small-3">
         {{ page.header_top_left }}
       </div>
-      <div id="header-top-middle" class="columns small-9">
+      <div id="header-top-middle" class="columns small-8">
         {{ page.header_top_middle }}
       </div>
       <div id="header-top-right" class="columns small-1">

web/themes/custom/popsu/sass/pages/_default.scss

@@ -12,7 +12,7 @@ article, .paragraph{
         margin-bottom: .5rem;
     }
 }
-.block-region-third{
+.block-region-first,.block-region-third{
     h2{
         font-size: $font-big;
         background-color: black;
@@ -27,11 +27,11 @@ article, .paragraph{
 .block-region-first{
     background-color: black;
     color: white;
+    z-index: 120;
     #node\:title{
         text-transform: uppercase;
         font-family: 'duke';
         font-size: $font-big;
-        padding: .3rem .5rem;
         text-decoration: none;
         &:hover{
             text-decoration: underline;
@@ -48,7 +48,7 @@ article, .paragraph{
         width: 100vw;
         height: 40vh;
         background: $trame;
-        box-shadow: inset 0 -5rem 8rem $bck-col;
+        box-shadow: inset 0 -5rem 8rem white;
         z-index: -1;
     }
 }

web/themes/custom/popsu/sass/pages/_home.scss

@@ -46,38 +46,38 @@
 	}
 }
 .last-news .programme-1{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: $col-1 !important;
 	}
 }
 .last-news .programme-2{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: $col-2 !important;
 	}
 }
 .last-news .programme-3{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: $col-eur !important;
 	}
 }
 .last-news .programme-4{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: black;
 	}
 }
 
 .last-news .programme-5{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: $col-mond !important;
 	}
 }
 .last-news .programme-6{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: $col-ter !important;
 	}
 }
 .last-news .programme-7{
-	.views-field{
+	.views-field:not(.views-field-field-image){
 		background: $col-met !important;
 	}
 }
@@ -271,10 +271,10 @@
 	position: relative;
 	// background: red;
 	background: center / contain no-repeat url(../images/popsu-home-logo.png);
-	margin: -5rem 0 3rem 0;
+	margin: -9% 0 3rem 0 !important;
 }
 .about{
-	box-shadow: inset 0 17rem 18rem $bck-col;
+	box-shadow: inset 0 17rem 18rem white;
 	background: $trame;
 	font-size: $font-medium;
 	text-align: center;	
@@ -412,22 +412,25 @@
 	grid-template-columns: repeat( 3, 1fr);
 	align-items: center;
 	justify-items: center;
-	margin-top: 1rem;
+	margin-top: 0;
 	.views-row{
 		background-clip: content-box;
-		height: 13rem;
+		min-height: 7rem;
 		width: 100%;
 		display: grid;
 		align-items: center;
 		padding: 1rem;
-		.views-field-title{
+		.views-field:not(.views-field-field-logo){
 			font-size: $font-medium;
 			font-weight: 600;
 			display: none;
 			
 		}
+		.views-field-title{
+			margin-bottom: 1rem;
+		}
 		&:hover{
-			.views-field-title{
+			.views-field:not(.views-field-field-logo){
 				font-weight: 600;
 				display: block;
 				color: white;
@@ -437,7 +440,11 @@
 					text-decoration: none;
 				}
 				
+			}
 		}
+		.views-field-field-logo{
+			text-align: center;
+
 		}
 	}
 
@@ -449,43 +456,77 @@
 
 
 	.programme-1{
-		background: center / 60% no-repeat url(../images/POPSU_1.svg) white;
-		
+		// background: center / 60% no-repeat url(../images/POPSU_1.svg) white;
+		img{
+			width: 50%;
+		}
 		&:hover{
 			background: $col-1;
+			img{
+				display: none;
+			}
 		}
 		
 	}
 	.programme-2{
-		background: center / 60% no-repeat url(../images/POPSU_2.svg) white;
+		// background: center / 60% no-repeat url(../images/POPSU_2.svg) white;
+		img{
+			width: 60%;
+		}
+		
 		&:hover{
 			background: $col-2;
+			img{
+				display: none;
+			}
 		}
 	}
 	.programme-3{
-		background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white;
+		// background: center / 50% no-repeat url(../images/POPSU_Europe.svg) white;
+		img{
+			width: 50%;
+		}
 		&:hover{
 			background: $col-eur;
+			img{
+				display: none;
+			}
 		}
 	}
 	.programme-5{
-		background: center / 45% no-repeat url(../images/POPSU_monde.svg) white;
+		// background: center / 45% no-repeat url(../images/POPSU_monde.svg) white;
+		img{
+			width: 45%;
+		}
 		&:hover{
 			background: $col-mond;
+			img{
+				display: none;
+			}
 		}
 	}
 	.programme-6{
-		background: center / 60% no-repeat url(../images/POPSU_territoires.svg) white;
-
+		// background: center / 60% no-repeat url(../images/POPSU_territoires.svg) white;
+		img{
+			width: 60%;
+		}
 		&:hover{
 			background: $col-ter;
+			img{
+				display: none;
+			}
 		}
 	}
 	.programme-7{
-		background: center / 60% no-repeat url(../images/POPSU_metropoles.svg) white;
-
+		// background: center / 60% no-repeat url(../images/POPSU_metropoles.svg) white;
+		img{
+			width: 60%;
+		}
 		&:hover{
 			background: $col-met;
+			img{
+				display: none;
+			}
 		}
 
 	}
@@ -514,12 +555,17 @@
 	.views-row{
 		background-clip: content-box;
 		background-color: grey;
-		height: 10rem;
-		width: 10rem !important;
+		// height: 10rem;
+		width: 100% !important;
 		position: relative;
-		
-		
 	}
+	
+	.views-row:after{
+		content: "";
+		display: block;
+		padding-bottom: 100%;
+	}
+	
 	.views-field-title{
 		display: grid;
 		top: 0;
@@ -540,6 +586,15 @@
 		}
 
 	}
+	.views-field-field-image:before{
+		content: "";
+		display: block;
+		position: absolute;
+		background: black;
+		opacity: .4;
+		width: 100%;
+		height: 100%;
+	}
 	.views-field-field-image{
 		
 		top: 0;
@@ -563,9 +618,6 @@
 				max-width: none;
 			}
 
-		// 	}
-		// 	&:hover{
-		// 		opacity: .6;
 		// 	}
 		}
 		

web/themes/custom/popsu/sass/pages/_node-evenement.scss

@@ -0,0 +1,110 @@
+.page-node-type-evenement, .page-node-type-actualite{
+	&.programme-1{
+		.field_programme{
+			background-color: $col-1;
+		}
+    }
+    &.programme-2{
+		.field_programme{
+			background-color: $col-2;
+		}
+    }
+    &.programme-3{
+		.field_programme{
+			background-color: $col-eur;
+		}
+    }
+    &.programme-4{
+		.field_programme{
+			background-color: $col-met;
+		}
+    }
+    &.programme-5{
+		.field_programme{
+			background-color: $col-mond;
+		}
+    }
+    &.programme-6{
+		.field_programme{
+			background-color: $col-ter;
+		}
+    }
+    &.programme-7{
+		.field_programme{
+			background-color: $col-met;
+		}
+    }
+	.block-region-second{
+		display:grid;
+		#node\:title{
+			margin: 0;
+			font-size: $font-large;
+			line-height: 1.3;
+		}
+		#node\:field_programme{
+			grid-row: 1;
+			.field_programme{
+				display: inline-block;
+				width: auto;
+				padding: .3rem .5rem;
+				color: white;
+				font-weight: 600;
+
+			}
+			margin-bottom: 1rem;
+		}
+		#node\:field_date{
+			font-size: $font-medium;
+			grid-row: 2;
+			.field_date{
+				div{
+					float: left;
+					margin-right: 1rem;
+				}
+			}
+		}
+		#node\:field_sous_titre{
+			text-transform: uppercase;
+		}
+		#node\:field_intro{
+			font-size: $font-medium;
+		}
+		#node\:field_image{
+			grid-row: 5;
+			width: 100%;
+			margin: 1rem 0;
+			img{
+				width: 100%;
+			}
+		}
+		#node\:body{
+
+		}
+ 	}
+	 .block-region-first{
+		 padding: 1rem 0 .5rem 0;
+		 &>div{
+			 padding: 0 0 .5rem 0;
+		 }
+		 a{
+			padding: 0 0 0 1rem;
+		 }
+	 }
+	.block-region-third{
+		position: sticky;
+		top: 4rem;
+		.field_fichier, .field_ressources_liees{
+			margin: .5rem 0;	
+			padding-right: 1.3rem;
+			a{
+				font-weight: 600;
+				text-decoration: none;
+				&:hover{
+					text-decoration: underline;
+				}
+			}
+			
+
+		}
+	}
+}

web/themes/custom/popsu/sass/pages/_programme.scss

@@ -235,7 +235,6 @@
         
         top: 0;
         left: 0;
-        z-index: 10;
         width: 25%;
         padding: 1rem 1.5rem ;
         .prog-ressources-link{
@@ -383,7 +382,7 @@
                     content: "";
                     position: absolute;
                      top: 0; bottom: 0; left: -15px; right: -15px;
-                    box-shadow: inset $bck-col 0 -4rem 2rem;
+                    box-shadow: inset white 0 -4rem 2rem;
                     
                 }
                 .crop{

web/themes/custom/popsu/sass/pages/_themes.scss

@@ -0,0 +1,52 @@
+.page-node-type-theme{
+    //tmp hidden
+    .block-region-first{
+        visibility: hidden;
+    }
+    .block-region-third{
+        margin-top: 30rem;
+    }
+    #node\:title:before{
+        content: "théme";
+        clear: both;
+        display: block;
+        width: 100%;
+        font-size: $font-small;
+        text-transform: uppercase;
+        margin-bottom: .8rem;
+    }
+    #node\:title{
+        margin: 0;
+        font-size: $font-large;
+        line-height: 1.3;
+        font-weight: 600;
+        margin-bottom: 1rem;
+    }
+    #node\:field_image{
+        width: 150%;
+        img{
+            width: 100%;
+        }
+    }
+    
+    .block-region-bottom{
+        #node\:field_projets_lies{
+            h2{
+                text-align: center;
+            }
+            .field_projets_lies{
+                display: grid;
+                grid-template-columns: repeat(5, 1fr);
+                column-gap: 1rem;
+                padding: 0 10%;
+            }
+            article{
+                .body{
+                    display: none;
+                }
+            }
+        }
+    }
+
+
+}

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -139,10 +139,13 @@
 .header_top_left_container{
 	height: 100%;
 	display: grid;
-	grid-template-columns: 1fr 1fr;
-	// &>div:first-child{
-	// 	// height: 100%;
-	// }
+	grid-template-columns: 1fr 1fr 1fr;
+	align-items: center;
+	text-align: center;
+	column-gap: 10px;
+	&>div[id='']{
+		height: 100%;
+	}
 	a[rel~='home']{
 		height: 100%;
 		display: block;
@@ -237,7 +240,7 @@
 		display: none;
 		grid-template-columns: 10% 25% 25% 30% 10%;
 		padding: 1rem 0;
-		z-index: 100;
+		z-index: 140;
 		line-height: 2;
 		nav{
 			grid-column-start: 2;
@@ -276,6 +279,7 @@
 
 footer{
     background: white;
+	margin-top: 3rem;
    
 }
 #footer-bottom{
@@ -298,14 +302,14 @@ footer{
         }
     }
     .logo-gouv{
-        height: 70%;
+        height: 50%;
 		display: block;
 		color: transparent;
         font-size: 0;
 		background: left / contain no-repeat url(../images/gouv.svg);
     }
     .logo-puca{
-        height: 70%;
+        height: 50%;
 		display: block;
 		color: transparent;
         font-size: 0;

web/themes/custom/popsu/sass/setup/_globals.scss

@@ -3,7 +3,7 @@ body{
 	font-size: $font-normal ;
 	font-weight: 300;
 	line-height: 1.5;
-	background: $bck-col;
+	// background: $bck-col;
 	&.path-node{
 		&.programme-1{
 			#node\:title,.field_sous_titre,.field_intro{

web/themes/custom/popsu/sass/styles.scss

@@ -32,4 +32,6 @@
 @import "pages/actu";
 @import "pages/programme";
 @import "pages/archives";
+@import "pages/node-evenement";
+@import "pages/themes";