page theme et villes

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

@@ -2829,6 +2829,7 @@ article p, .paragraph p {
 
 .page-node-type-programme article .body_open {
   height: auto;
+  padding: 0 0 3rem 0;
   -webkit-transition: all 250ms ease;
   -moz-transition: all 250ms ease;
   -o-transition: all 250ms ease;
@@ -2851,6 +2852,8 @@ article p, .paragraph p {
     display: grid;
     grid-template-columns: 95% 5%;
     align-content: center; }
+  .page-node-type-programme article .field_textes .paragraph p {
+    margin-top: .5rem; }
   .page-node-type-programme article .field_textes .paragraph .field_titre:after {
     content: '▼';
     -webkit-transition: all 250ms ease;
@@ -3095,30 +3098,6 @@ article p, .paragraph p {
       .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, .page-node-type-projet .block-region-first {
-  visibility: hidden; }
-
-.page-node-type-theme .block-region-third, .page-node-type-projet .block-region-third {
-  margin-top: 30rem; }
-
-.page-node-type-theme #node\:title:before, .page-node-type-projet #node\:title:before {
-  clear: both;
-  display: block;
-  width: 100%;
-  font-size: 0.45rem;
-  text-transform: uppercase;
-  margin-bottom: .8rem; }
-
-.page-node-type-theme .field_programme, .page-node-type-projet .field_programme {
-  display: inline-block;
-  background: gray;
-  margin-bottom: 1rem;
-  color: white;
-  font-weight: 600;
-  padding: .3rem .5rem; }
-  .page-node-type-theme .field_programme a, .page-node-type-projet .field_programme a {
-    text-decoration: none; }
-
 .page-node-type-theme.programme-1 .field_programme, .page-node-type-projet.programme-1 .field_programme {
   background: #4dabc1; }
 
@@ -3140,65 +3119,221 @@ article p, .paragraph p {
 .page-node-type-theme.programme-7 .field_programme, .page-node-type-projet.programme-7 .field_programme {
   background: #28429f; }
 
-.page-node-type-theme #node\:title, .page-node-type-projet #node\:title {
+.page-node-type-theme .block-region-first, .page-node-type-projet .block-region-first {
+  visibility: hidden; }
+
+.page-node-type-theme .block-region-third, .page-node-type-projet .block-region-third {
+  margin-top: 30rem; }
+
+.page-node-type-theme .block-region-second #node\:title:before, .page-node-type-projet .block-region-second #node\:title:before {
+  clear: both;
+  display: block;
+  width: 100%;
+  font-size: 0.45rem;
+  text-transform: uppercase;
+  margin-bottom: .8rem; }
+
+.page-node-type-theme .block-region-second .field_programme, .page-node-type-projet .block-region-second .field_programme {
+  display: inline-block;
+  margin-bottom: 1rem;
+  color: white;
+  font-weight: 600;
+  padding: .3rem .5rem; }
+  .page-node-type-theme .block-region-second .field_programme a, .page-node-type-projet .block-region-second .field_programme a {
+    text-decoration: none; }
+
+.page-node-type-theme .block-region-second #node\:title, .page-node-type-projet .block-region-second #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, .page-node-type-theme .field_diaporama, .page-node-type-projet #node\:field_image, .page-node-type-projet .field_diaporama {
+.page-node-type-theme .block-region-second #node\:field_image, .page-node-type-theme .block-region-second .field_diaporama, .page-node-type-projet .block-region-second #node\:field_image, .page-node-type-projet .block-region-second .field_diaporama {
   width: 150%;
   margin-bottom: 1rem; }
-  .page-node-type-theme #node\:field_image img, .page-node-type-theme .field_diaporama img, .page-node-type-projet #node\:field_image img, .page-node-type-projet .field_diaporama img {
+  .page-node-type-theme .block-region-second #node\:field_image img, .page-node-type-theme .block-region-second .field_diaporama img, .page-node-type-projet .block-region-second #node\:field_image img, .page-node-type-projet .block-region-second .field_diaporama img {
     width: 100%; }
 
+.page-node-type-theme .block-region-second .body, .page-node-type-projet .block-region-second .body {
+  font-size: 0.8rem;
+  height: 15rem;
+  overflow: hidden;
+  position: relative;
+  -webkit-transition: all 250ms ease;
+  -moz-transition: all 250ms ease;
+  -o-transition: all 250ms ease;
+  transition: all 250ms ease; }
+  .page-node-type-theme .block-region-second .body footer, .page-node-type-projet .block-region-second .body footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    text-align: center; }
+    .page-node-type-theme .block-region-second .body footer a, .page-node-type-projet .block-region-second .body footer a {
+      display: inline-block;
+      margin: 0 auto;
+      background: black;
+      color: white;
+      cursor: pointer;
+      font-family: "trueno";
+      font-weight: 500;
+      padding: .3rem .5rem;
+      font-size: 0.45rem;
+      text-decoration: none;
+      text-transform: uppercase; }
+      .page-node-type-theme .block-region-second .body footer a:hover, .page-node-type-projet .block-region-second .body footer a:hover {
+        color: black;
+        background: white; }
+
+.page-node-type-theme .block-region-second .body:after, .page-node-type-projet .block-region-second .body:after {
+  content: "";
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -15px;
+  right: -15px;
+  box-shadow: inset white 0 -4rem 2rem; }
+
+.page-node-type-theme .block-region-second .body_open, .page-node-type-projet .block-region-second .body_open {
+  height: auto;
+  padding: 0 0 3rem 0;
+  -webkit-transition: all 250ms ease;
+  -moz-transition: all 250ms ease;
+  -o-transition: all 250ms ease;
+  transition: all 250ms ease; }
+  .page-node-type-theme .block-region-second .body_open:after, .page-node-type-projet .block-region-second .body_open:after {
+    opacity: 0;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+
+.page-node-type-theme .block-region-second .field_textes .paragraph, .page-node-type-projet .block-region-second .field_textes .paragraph {
+  border-bottom: 3px dotted gray;
+  padding: 1rem 0; }
+  .page-node-type-theme .block-region-second .field_textes .paragraph .field_titre, .page-node-type-projet .block-region-second .field_textes .paragraph .field_titre {
+    font-size: 1rem;
+    font-weight: 600;
+    text-transform: initial;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: 95% 5%;
+    align-content: center; }
+  .page-node-type-theme .block-region-second .field_textes .paragraph .field_titre:after, .page-node-type-projet .block-region-second .field_textes .paragraph .field_titre:after {
+    content: '▼';
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease;
+    align-self: center;
+    justify-self: center; }
+  .page-node-type-theme .block-region-second .field_textes .paragraph .rotate:after, .page-node-type-projet .block-region-second .field_textes .paragraph .rotate:after {
+    transform: rotate(180deg);
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+  .page-node-type-theme .block-region-second .field_textes .paragraph .field_texte, .page-node-type-projet .block-region-second .field_textes .paragraph .field_texte {
+    height: auto;
+    position: relative;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+    .page-node-type-theme .block-region-second .field_textes .paragraph .field_texte h2, .page-node-type-projet .block-region-second .field_textes .paragraph .field_texte h2 {
+      text-transform: inherit; }
+    .page-node-type-theme .block-region-second .field_textes .paragraph .field_texte p, .page-node-type-projet .block-region-second .field_textes .paragraph .field_texte p {
+      margin-top: .5rem; }
+  .page-node-type-theme .block-region-second .field_textes .paragraph .crop, .page-node-type-projet .block-region-second .field_textes .paragraph .crop {
+    height: 0;
+    overflow: hidden;
+    display: none;
+    -webkit-transition: all 250ms ease;
+    -moz-transition: all 250ms ease;
+    -o-transition: all 250ms ease;
+    transition: all 250ms ease; }
+
 .page-node-type-theme .block-region-bottom #node\:field_projets_lies h2, .page-node-type-projet .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, .page-node-type-projet .block-region-bottom #node\:field_projets_lies .field_projets_lies {
+  margin-top: 1rem;
   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, .page-node-type-projet .block-region-bottom #node\:field_projets_lies article .body {
-  display: none; }
+.page-node-type-theme .block-region-bottom #node\:field_projets_lies article, .page-node-type-projet .block-region-bottom #node\:field_projets_lies article {
+  margin-bottom: 1.6rem; }
+  .page-node-type-theme .block-region-bottom #node\:field_projets_lies article .body, .page-node-type-projet .block-region-bottom #node\:field_projets_lies article .body {
+    display: none; }
 
-.page-node-type-theme #node\:field_equipes .field_equipes .paragraph, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph {
-  display: grid; }
-  .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres {
-    grid-row: 2;
-    margin-bottom: 1rem; }
-    .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres > div:first-child {
-      display: none; }
-    .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph {
-      display: block !important;
+.page-node-type-theme #node\:field_equipes, .page-node-type-projet #node\:field_equipes {
+  margin-top: 1rem; }
+  .page-node-type-theme #node\:field_equipes h2, .page-node-type-projet #node\:field_equipes h2 {
+    color: black;
+    text-align: center; }
+  .page-node-type-theme #node\:field_equipes .field_equipes .paragraph, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph {
+    display: grid; }
+    .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres {
+      grid-row: 2;
       margin-bottom: 1rem; }
-      .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom {
-        display: inline-block;
-        width: auto; }
-        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom > div:first-child {
-          display: none; }
-        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom div:nth-of-type(2), .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom div:nth-of-type(2) {
+      .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres > div:first-child {
+        display: none; }
+      .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph {
+        display: block !important;
+        margin-bottom: 1rem; }
+        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom {
           display: inline-block;
           width: auto; }
-      .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom {
-        display: inline-block; }
-        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom > div:first-child {
+          .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom > div:first-child {
+            display: none; }
+          .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom div:nth-of-type(2), .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_nom div:nth-of-type(2) {
+            display: inline-block;
+            width: auto; }
+        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom {
+          display: inline-block; }
+          .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom > div:first-child {
+            display: none; }
+          .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom div:nth-of-type(2), .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom div:nth-of-type(2) {
+            display: inline-block;
+            width: auto; }
+        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_fonction > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_fonction > div:first-child {
           display: none; }
-        .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom div:nth-of-type(2), .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_prenom div:nth-of-type(2) {
-          display: inline-block;
-          width: auto; }
-      .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_fonction > div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_membres .paragraph .field_fonction > div:first-child {
+    .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_type_equipe, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_type_equipe {
+      grid-row: 1;
+      font-weight: 600;
+      font-size: 0.8rem;
+      margin-bottom: .5rem; }
+      .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_type_equipe div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_type_equipe div:first-child {
         display: none; }
-  .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_type_equipe, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_type_equipe {
-    grid-row: 1;
-    font-weight: 600;
-    font-size: 0.8rem;
-    margin-bottom: .5rem; }
-    .page-node-type-theme #node\:field_equipes .field_equipes .paragraph .field_type_equipe div:first-child, .page-node-type-projet #node\:field_equipes .field_equipes .paragraph .field_type_equipe div:first-child {
-      display: none; }
+
+.page-node-type-theme.programme-1 .block-region-second h2, .page-node-type-theme.programme-1 .block-region-second h3, .page-node-type-theme.programme-1 .block-region-second h4, .page-node-type-theme.programme-1 .block-region-second h5, .page-node-type-theme.programme-1 .block-region-second h6, .page-node-type-theme.programme-1 .block-region-second .field_titre, .page-node-type-projet.programme-1 .block-region-second h2, .page-node-type-projet.programme-1 .block-region-second h3, .page-node-type-projet.programme-1 .block-region-second h4, .page-node-type-projet.programme-1 .block-region-second h5, .page-node-type-projet.programme-1 .block-region-second h6, .page-node-type-projet.programme-1 .block-region-second .field_titre {
+  color: #4dabc1; }
+
+.page-node-type-theme.programme-2 .block-region-second h2, .page-node-type-theme.programme-2 .block-region-second h3, .page-node-type-theme.programme-2 .block-region-second h4, .page-node-type-theme.programme-2 .block-region-second h5, .page-node-type-theme.programme-2 .block-region-second h6, .page-node-type-theme.programme-2 .block-region-second .field_titre, .page-node-type-projet.programme-2 .block-region-second h2, .page-node-type-projet.programme-2 .block-region-second h3, .page-node-type-projet.programme-2 .block-region-second h4, .page-node-type-projet.programme-2 .block-region-second h5, .page-node-type-projet.programme-2 .block-region-second h6, .page-node-type-projet.programme-2 .block-region-second .field_titre {
+  color: #61ab32; }
+
+.page-node-type-theme.programme-3 .block-region-second h2, .page-node-type-theme.programme-3 .block-region-second h3, .page-node-type-theme.programme-3 .block-region-second h4, .page-node-type-theme.programme-3 .block-region-second h5, .page-node-type-theme.programme-3 .block-region-second h6, .page-node-type-theme.programme-3 .block-region-second .field_titre, .page-node-type-projet.programme-3 .block-region-second h2, .page-node-type-projet.programme-3 .block-region-second h3, .page-node-type-projet.programme-3 .block-region-second h4, .page-node-type-projet.programme-3 .block-region-second h5, .page-node-type-projet.programme-3 .block-region-second h6, .page-node-type-projet.programme-3 .block-region-second .field_titre {
+  color: #646578; }
+
+.page-node-type-theme.programme-4 .block-region-second h2, .page-node-type-theme.programme-4 .block-region-second h3, .page-node-type-theme.programme-4 .block-region-second h4, .page-node-type-theme.programme-4 .block-region-second h5, .page-node-type-theme.programme-4 .block-region-second h6, .page-node-type-theme.programme-4 .block-region-second .field_titre, .page-node-type-projet.programme-4 .block-region-second h2, .page-node-type-projet.programme-4 .block-region-second h3, .page-node-type-projet.programme-4 .block-region-second h4, .page-node-type-projet.programme-4 .block-region-second h5, .page-node-type-projet.programme-4 .block-region-second h6, .page-node-type-projet.programme-4 .block-region-second .field_titre {
+  color: #28429f; }
+
+.page-node-type-theme.programme-5 .block-region-second h2, .page-node-type-theme.programme-5 .block-region-second h3, .page-node-type-theme.programme-5 .block-region-second h4, .page-node-type-theme.programme-5 .block-region-second h5, .page-node-type-theme.programme-5 .block-region-second h6, .page-node-type-theme.programme-5 .block-region-second .field_titre, .page-node-type-projet.programme-5 .block-region-second h2, .page-node-type-projet.programme-5 .block-region-second h3, .page-node-type-projet.programme-5 .block-region-second h4, .page-node-type-projet.programme-5 .block-region-second h5, .page-node-type-projet.programme-5 .block-region-second h6, .page-node-type-projet.programme-5 .block-region-second .field_titre {
+  color: #ab9569; }
+
+.page-node-type-theme.programme-6 .block-region-second h2, .page-node-type-theme.programme-6 .block-region-second h3, .page-node-type-theme.programme-6 .block-region-second h4, .page-node-type-theme.programme-6 .block-region-second h5, .page-node-type-theme.programme-6 .block-region-second h6, .page-node-type-theme.programme-6 .block-region-second .field_titre, .page-node-type-projet.programme-6 .block-region-second h2, .page-node-type-projet.programme-6 .block-region-second h3, .page-node-type-projet.programme-6 .block-region-second h4, .page-node-type-projet.programme-6 .block-region-second h5, .page-node-type-projet.programme-6 .block-region-second h6, .page-node-type-projet.programme-6 .block-region-second .field_titre {
+  color: #e01a35; }
+
+.page-node-type-theme.programme-7 .block-region-second h2, .page-node-type-theme.programme-7 .block-region-second h3, .page-node-type-theme.programme-7 .block-region-second h4, .page-node-type-theme.programme-7 .block-region-second h5, .page-node-type-theme.programme-7 .block-region-second h6, .page-node-type-theme.programme-7 .block-region-second .field_titre, .page-node-type-projet.programme-7 .block-region-second h2, .page-node-type-projet.programme-7 .block-region-second h3, .page-node-type-projet.programme-7 .block-region-second h4, .page-node-type-projet.programme-7 .block-region-second h5, .page-node-type-projet.programme-7 .block-region-second h6, .page-node-type-projet.programme-7 .block-region-second .field_titre {
+  color: #28429f; }
+
+.page-node-type-theme .computed_projets_references, .page-node-type-theme .computed_themes_references, .page-node-type-theme .field_logo, .page-node-type-projet .computed_projets_references, .page-node-type-projet .computed_themes_references, .page-node-type-projet .field_logo {
+  display: none; }
 
 .page-node-type-projet #node\:title:before {
   content: "ville"; }
@@ -3206,4 +3341,81 @@ article p, .paragraph p {
 .page-node-type-theme #node\:title:before {
   content: "théme"; }
 
+.page-node-type-theme #node\:field_equipes h2 {
+  color: white !important;
+  text-align: left !important; }
+
+.page-node-type-theme .field_projets_lies article {
+  display: grid; }
+  .page-node-type-theme .field_projets_lies article h2 {
+    grid-row: 2;
+    text-align: left !important;
+    text-transform: none !important;
+    line-height: 1.3;
+    margin: .5rem 0 0 0;
+    font-size: 0.6rem;
+    font-weight: 400; }
+    .page-node-type-theme .field_projets_lies article h2 a {
+      text-decoration: none; }
+      .page-node-type-theme .field_projets_lies article h2 a:hover {
+        text-decoration: underline; }
+  .page-node-type-theme .field_projets_lies article .field_diaporama {
+    position: relative;
+    width: 100%;
+    overflow: hidden; }
+    .page-node-type-theme .field_projets_lies article .field_diaporama a {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      object-fit: cover; }
+      .page-node-type-theme .field_projets_lies article .field_diaporama a img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover; }
+  .page-node-type-theme .field_projets_lies article .field_diaporama:after {
+    content: "";
+    display: block;
+    padding-top: 100%; }
+  .page-node-type-theme .field_projets_lies article .field_programme {
+    text-transform: uppercase;
+    display: inline-block;
+    font-weight: 600;
+    padding: .02rem .3rem;
+    grid-column: 1;
+    grid-row: 1;
+    z-index: 1;
+    margin-bottom: -.5rem;
+    margin-left: .2rem;
+    color: white; }
+    .page-node-type-theme .field_projets_lies article .field_programme a {
+      text-decoration: none; }
+  .page-node-type-theme .field_projets_lies article.programme-1 h2 {
+    color: #4dabc1 !important; }
+  .page-node-type-theme .field_projets_lies article.programme-1 .field_programme {
+    background: #4dabc1; }
+  .page-node-type-theme .field_projets_lies article.programme-2 h2 {
+    color: #61ab32 !important; }
+  .page-node-type-theme .field_projets_lies article.programme-2 .field_programme {
+    background: #61ab32; }
+  .page-node-type-theme .field_projets_lies article.programme-3 h2 {
+    color: #646578 !important; }
+  .page-node-type-theme .field_projets_lies article.programme-3 .field_programme {
+    background: #646578; }
+  .page-node-type-theme .field_projets_lies article.programme-4 h2 {
+    color: black; }
+  .page-node-type-theme .field_projets_lies article.programme-4 .field_programme {
+    background: black; }
+  .page-node-type-theme .field_projets_lies article.programme-5 h2 {
+    color: #ab9569 !important; }
+  .page-node-type-theme .field_projets_lies article.programme-5 .field_programme {
+    background: #ab9569; }
+  .page-node-type-theme .field_projets_lies article.programme-6 h2 {
+    color: #e01a35 !important; }
+  .page-node-type-theme .field_projets_lies article.programme-6 .field_programme {
+    background: #e01a35; }
+  .page-node-type-theme .field_projets_lies article.programme-7 h2 {
+    color: #28429f !important; }
+  .page-node-type-theme .field_projets_lies article.programme-7 .field_programme {
+    background: #28429f; }
+
 /*# sourceMappingURL=styles.css.map */

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

@@ -184,7 +184,7 @@ $(function(){
 	
 //// PAGE POPSU ////
 // projets-block_2
-if($(".page-node-type-programme").length > 0){
+if($(".page-node-type-programme").length > 0 || $(".page-node-type-projet").length > 0 || $(".page-node-type-theme").length > 0){
 	$(".body").append('<footer><a class="more">Lire la suite</a></footer>');
 
 	let elem = "<div class='main_logo'></div>"
@@ -210,6 +210,7 @@ if($(".page-node-type-programme").length > 0){
 
 }
 
+
 //page about navigation : 
 if($(".page-node-type-static").length > 0){
 	$(".field_titre").on("click", function(){

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-3">
+      <div id="header-top-left" class="columns small-4">
         {{ page.header_top_left }}
       </div>
-      <div id="header-top-middle" class="columns small-8">
+      <div id="header-top-middle" class="columns small-7">
         {{ page.header_top_middle }}
       </div>
       <div id="header-top-right" class="columns small-1">

web/themes/custom/popsu/popsu.theme

@@ -26,6 +26,14 @@ function popsu_preprocess_html(&$variables) {
   }
 }
 
+function popsu_preprocess_node(&$variables){
+  
+  $node = &$variables['node'];
+  if($node->hasField('field_programme') && $node->get('field_programme')->getString() != ""){
+    $variables['attributes']['class'][] = 'programme-' . $node->get('field_programme')->getString();
+  }
+}
+
 function popsu_preprocess_field(&$variables){
   $element = &$variables['element'];
   if (isset($element['#field_name'])) {

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

@@ -416,6 +416,7 @@
         }
         .body_open{
             height: auto;
+            padding: 0 0 3rem 0;
             &:after{
                 opacity: 0;
                 -webkit-transition: all 250ms ease;
@@ -444,6 +445,9 @@
                     align-content: center;
                     // margin-top: 1rem;
                 }
+                p{
+                    margin-top: .5rem;
+                }
                 .field_titre:after{
                     content: '▼';
                     -webkit-transition: all 250ms ease;

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

@@ -1,3 +1 @@
-.page-node-type-projet{
-    
-}
+//voir theme

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

@@ -1,4 +1,41 @@
 .page-node-type-theme, .page-node-type-projet{
+    &.programme-1{
+        .field_programme{
+            background: $col-1;
+        }
+        
+    }
+    &.programme-2{
+        .field_programme{
+            background: $col-2;
+        }
+    }
+    &.programme-3{
+        
+        .field_programme{
+            background: $col-eur;
+        }
+    }
+    &.programme-4{
+        .field_programme{
+            background: $col-met;
+        }
+    }
+    &.programme-5{
+        .field_programme{
+                background: $col-mond;
+        }
+    }
+    &.programme-6{
+        .field_programme{
+                background: $col-ter;
+        }
+    }
+    &.programme-7{
+        .field_programme{
+                background: $col-met;
+        }
+    }
     //tmp hidden
     .block-region-first{
         visibility: hidden;
@@ -7,77 +44,165 @@
     .block-region-third{
         margin-top: 30rem;
     }
-    #node\:title:before{
-        clear: both;
-        display: block;
-        width: 100%;
-        font-size: $font-small;
-        text-transform: uppercase;
-        margin-bottom: .8rem;
-    }
-    ///
-    .field_programme{
-        display: inline-block;
-        background: gray;
-        margin-bottom: 1rem;
-        color: white;
-        font-weight: 600;
-        padding: .3rem .5rem;
-        a{
-            text-decoration: none;
-        }
-    }
-    &.programme-1{
-		.field_programme{
-			background: $col-1;
-		}
-		
-	}
-	&.programme-2{
-		.field_programme{
-			background: $col-2;
-		}
-	}
-	&.programme-3{
-		
-		.field_programme{
-			background: $col-eur;
-		}
-	}
-	&.programme-4{
-		.field_programme{
-			background: $col-met;
-		}
-	}
-	&.programme-5{
-		.field_programme{
-				background: $col-mond;
-		}
-	}
-	&.programme-6{
-		.field_programme{
-				background: $col-ter;
-		}
-	}
-	&.programme-7{
-		.field_programme{
-				background: $col-met;
-		}
-	}
-
-    ///
-    #node\:title{
-        margin: 0;
-        font-size: $font-large;
-        line-height: 1.3;
-        font-weight: 600;
-        margin-bottom: 1rem;
-    }
-    #node\:field_image,.field_diaporama{
-        width: 150%;
-        margin-bottom: 1rem;
-        img{
+    .block-region-second{
+        #node\:title:before{
+            clear: both;
+            display: block;
             width: 100%;
+            font-size: $font-small;
+            text-transform: uppercase;
+            margin-bottom: .8rem;
+        }
+        ///
+        .field_programme{
+            display: inline-block;
+            // background: gray;
+            margin-bottom: 1rem;
+            color: white;
+            font-weight: 600;
+            padding: .3rem .5rem;
+            a{
+                text-decoration: none;
+            }
+        }
+       
+
+        ///
+        #node\:title{
+            margin: 0;
+            font-size: $font-large;
+            line-height: 1.3;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+        #node\:field_image,.field_diaporama{
+            width: 150%;
+            margin-bottom: 1rem;
+            img{
+                width: 100%;
+            }
+        }
+        .body{
+            font-size: $font-medium;
+            height: 15rem;
+            overflow: hidden;
+            position: relative;
+            -webkit-transition: all 250ms ease;
+            -moz-transition: all 250ms ease;
+            -o-transition: all 250ms ease;
+            transition: all 250ms ease;
+            footer{
+                position:absolute;
+                bottom:0;
+                left:0;
+                z-index: 1;
+    
+                width: 100%;
+                text-align: center;
+    
+                
+                a{
+                    display: inline-block;
+                    margin: 0 auto;
+                    background: black;
+                    color: white;
+                    cursor:pointer;
+    
+                    font-family: "trueno";
+                    font-weight: 500;
+    
+                    padding: .3rem .5rem;
+                    font-size: $font-small;
+                    text-decoration: none;
+                    text-transform: uppercase;
+                    
+    
+                    &:hover{
+                        color:black;
+                        background: white;
+                    }
+                }
+            }
+        }
+        .body:after{
+            content: "";
+            opacity: 1;
+            position: absolute;
+            top: 0; bottom: 0; left: -15px; right: -15px;
+            box-shadow: inset white 0 -4rem 2rem;
+        }
+        .body_open{
+            height: auto;
+            padding: 0 0 3rem 0;
+            &:after{
+                opacity: 0;
+                -webkit-transition: all 250ms ease;
+                -moz-transition: all 250ms ease;
+                -o-transition: all 250ms ease;
+                transition: all 250ms ease;
+            }
+            -webkit-transition: all 250ms ease;
+            -moz-transition: all 250ms ease;
+            -o-transition: all 250ms ease;
+            transition: all 250ms ease;
+        }
+        .field_textes{
+          
+            .paragraph{
+                // border-top: 1px solid black;
+                border-bottom: 3px dotted gray;
+                padding: 1rem 0;
+                .field_titre{
+                    font-size: $font-big;
+                    font-weight: 600;
+                    text-transform: initial;
+                    cursor: pointer;
+                    display: grid;
+                    grid-template-columns: 95% 5%;
+                    align-content: center;
+                    // margin-top: 1rem;
+                }
+                .field_titre:after{
+                    content: '▼';
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                    align-self: center;
+                    justify-self: center;
+                }
+                .rotate:after{
+                    transform: rotate(180deg);
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+                .field_texte{
+                    height: auto;
+                    position: relative;
+                    h2{
+                        text-transform: inherit;
+                    }
+                    p{
+                        margin-top: .5rem;
+                    }
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+                
+                .crop{
+                    height: 0;
+                    overflow: hidden;
+                    display: none;
+                    -webkit-transition: all 250ms ease;
+                    -moz-transition: all 250ms ease;
+                    -o-transition: all 250ms ease;
+                    transition: all 250ms ease;
+                }
+            }
         }
     }
     
@@ -87,12 +212,14 @@
                 text-align: center;
             }
             .field_projets_lies{
+                margin-top: 1rem;
                 display: grid;
                 grid-template-columns: repeat(5, 1fr);
                 column-gap: 1rem;
                 padding: 0 10%;
             }
             article{
+                margin-bottom: 1.6rem;
                 .body{
                     display: none;
                 }
@@ -104,6 +231,11 @@
     //équipe tmp 
 
     #node\:field_equipes{
+        margin-top: 1rem;
+        h2{
+            color: black;
+            text-align: center;
+        }
         .field_equipes{
            .paragraph{
                 display: grid;
@@ -157,9 +289,74 @@
         }
     }
 
+&.programme-1{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-1;
+        }
+    }
+}
+&.programme-2{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-2;
+        }
+    }
+    
 
+}
+&.programme-3{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-eur;
+        }
+    }
+    
+}
+&.programme-4{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-met;
+        }
+    }
+    
+}
+&.programme-5{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-mond;
+        }
+    }
+    
+}
+&.programme-6{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+            color: $col-ter;
+        }
+    }
+           
+}
+&.programme-7{
+    .block-region-second{
+        h2,h3,h4,h5,h6,.field_titre{
+                color: $col-met;
+            }
+    }
+    
+}
+
+    // font-size: $font-small;
+    //temp hidden 
+    .computed_projets_references, .computed_themes_references, .field_logo{
+        display: none;
+    }
+    
+    
+    
 }
 
+
 .page-node-type-projet{
     #node\:title:before{
         content: "ville";
@@ -170,5 +367,140 @@
     #node\:title:before{
         content: "théme";
     }
+    #node\:field_equipes{
+        h2{
+            color: white !important;
+            text-align: left !important;
+            
+        }
+        
+    }
+    .field_projets_lies{
+        article{
+            display: grid;
+            h2{
+                grid-row: 2;
+                text-align: left !important;
+                text-transform: none !important;
+                line-height: 1.3;
+                margin: .5rem 0 0 0;
+                font-size: $font-normal;
+                font-weight: 400;
+                a{
+                    text-decoration: none;
+                    &:hover{
+                        text-decoration: underline;
+                    }
+                }
+            }
+            .field_diaporama {
+                position: relative;
+                width: 100%;
+                overflow: hidden;
+                a{
+                    position: absolute;
+                    height: 100%;
+                    width: 100%;
+                    object-fit: cover;
+                    img{
+                       height: 100% ;
+                       width: 100%;
+                       object-fit: cover;
+                    }
+                }
+            }
+            .field_diaporama:after {
+                content: "";
+                display: block;
+                padding-top: 100%;
+
+            }
+
+            .field_programme{
+                text-transform: uppercase;
+                display: inline-block;
+                font-weight: 600;
+                
+                padding: .02rem .3rem;
+                grid-column: 1;
+                grid-row: 1;
+                z-index: 1;
+                margin-bottom: -.5rem;
+                margin-left: .2rem;
+                
+                color: white;
+                a{
+                    text-decoration: none;
+                }
+            }
+
+        //// prog color
+        &.programme-1{
+            h2{ 
+                color: $col-1 !important;
+            }
+            .field_programme{
+                background: $col-1 ;
+            }
+        }
+        &.programme-2{
+            h2{
+                color: $col-2 !important;
+            }
+            .field_programme{
+                background: $col-2 ;
+            }
+        }
+        &.programme-3{
+
+            h2{
+                color: $col-eur !important;
+            }
+            .field_programme{
+                background: $col-eur ;
+                
+            }
+        }
+        &.programme-4{
+            h2{ 
+                color: black;
+            }
+            .field_programme{
+                background:black ;
+                
+            }
+        }
+        
+        &.programme-5{
+            
+            h2{
+                color: $col-mond !important;
+            }
+            .field_programme{
+                background: $col-mond ;
+            }
+        }
+        &.programme-6{
+
+            h2{
+                color: $col-ter !important;
+            }
+            .field_programme{
+                    background: $col-ter ;
+            }
+
+        }
+        &.programme-7{
+            h2{
+                color: $col-met !important;
+            }
+            .field_programme{
+                    background: $col-met ;                
+            }
+        }
+            
+            
+        }
+    }
 
 }