bouton togle présentation équipe

web/themes/custom/quartiers_de_demain/dist/assets/bundle.js

@@ -949,6 +949,42 @@ $(document).ready(function () {
 ////////////////// end class à view-rows-wrapper ////////////////
 
 
+////////////// toggle page node projet //////////////////
+document.addEventListener('DOMContentLoaded', function () {
+
+  const photo = document.querySelector('.field_field_equipe_photo');
+  const pres  = document.querySelector('.field_field_equipe_presentation');
+
+  if (!pres) return;
+
+  // Création du bouton
+  const btn = document.createElement('button');
+  btn.className = 'btn-equipe-toggle';
+  btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
+  btn.setAttribute('aria-expanded', false);
+
+  // Insertion du bouton juste après le bloc présentation
+  pres.insertAdjacentElement('afterend', btn);
+
+  // 3. Ajout de la ligne après le bouton
+const separator = document.createElement('div');
+separator.className = 'equipe-separator';
+btn.insertAdjacentElement('afterend', separator);
+
+  // Toggle
+  btn.addEventListener('click', function () {
+    const isOpen = pres.classList.toggle('is-open');
+
+    if (photo) photo.classList.toggle('is-open');
+
+    btn.textContent = isOpen
+      ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
+      : "EN SAVOIR PLUS SUR L'ÉQUIPE";
+
+    btn.setAttribute('aria-expanded', isOpen);
+  });
+
+});
 
 
 })(jQuery, window);

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -4306,6 +4306,7 @@ body {
   margin-top: 1rem;
   display: flex;
   flex-direction: column;
+  /* Quand ouvert */
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_laureats ::before {
   content: "";
@@ -4328,14 +4329,13 @@ body {
   padding-bottom: 0.5rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos {
-  display: flex;
+  column-count: 3; /* 3 colonnes */
-  flex-direction: column;
+  column-gap: 1.5rem; /* espace entre les colonnes */
-  flex-wrap: wrap;
-  height: 400px;
-  border-bottom: solid black 1px;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet {
-  width: 25%;
+  break-inside: avoid; /* évite qu’un bloc soit coupé entre deux colonnes */
+  margin-bottom: 1rem; /* petit espace entre les blocs */
+  margin: 0;
   margin-bottom: 1rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_infos .infos-projet h4 {
@@ -4359,6 +4359,45 @@ body {
   font-family: "gilroy-light";
   font-size: 0.6rem;
 }
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo,
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 1s ease, opacity 0.8s ease;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo.is-open,
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation.is-open {
+  max-height: 1000px; /* assez grand pour contenir le contenu */
+  opacity: 1;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  text-transform: uppercase;
+  font-size: 0.5rem;
+  background-color: black;
+  padding-left: 0.5rem;
+  margin: auto;
+  display: flex;
+  margin-bottom: 1rem;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg {
+  display: none;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle::after {
+  display: inline-flex;
+  content: url("../img/noun-arrow-to-right.svg");
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+  height: 25px;
+}
+.node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .equipe-separator {
+  border-bottom: 1px solid black;
+  margin: 20px 0;
+  width: 100%;
+}
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_parties_projet {
   margin-top: 2rem;
   width: 100%;

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -891,6 +891,42 @@ $(document).ready(function () {
 ////////////////// end class à view-rows-wrapper ////////////////
 
 
+////////////// toggle page node projet //////////////////
+document.addEventListener('DOMContentLoaded', function () {
+
+  const photo = document.querySelector('.field_field_equipe_photo');
+  const pres  = document.querySelector('.field_field_equipe_presentation');
+
+  if (!pres) return;
+
+  // Création du bouton
+  const btn = document.createElement('button');
+  btn.className = 'btn-equipe-toggle';
+  btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
+  btn.setAttribute('aria-expanded', false);
+
+  // Insertion du bouton juste après le bloc présentation
+  pres.insertAdjacentElement('afterend', btn);
+
+  // 3. Ajout de la ligne après le bouton
+const separator = document.createElement('div');
+separator.className = 'equipe-separator';
+btn.insertAdjacentElement('afterend', separator);
+
+  // Toggle
+  btn.addEventListener('click', function () {
+    const isOpen = pres.classList.toggle('is-open');
+
+    if (photo) photo.classList.toggle('is-open');
+
+    btn.textContent = isOpen
+      ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
+      : "EN SAVOIR PLUS SUR L'ÉQUIPE";
+
+    btn.setAttribute('aria-expanded', isOpen);
+  });
+
+});
 
 
 })(jQuery, window);

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss

@@ -128,14 +128,12 @@
                     padding-bottom: 0.5rem;
                 }
                 .field_field_infos{
-                    display: flex;
+                    column-count: 3;      /* 3 colonnes */
-                    flex-direction: column;
+                    column-gap: 1.5rem;   /* espace entre les colonnes */
-                    flex-wrap: wrap;
-                    height: 400px;
-                    border-bottom: solid black 1px;
-
                     .infos-projet{
-                        width: 25%;
+                        break-inside: avoid;  /* évite qu’un bloc soit coupé entre deux colonnes */
+                        margin-bottom: 1rem;  /* petit espace entre les blocs */
+                        margin: 0;
                         margin-bottom: 1rem;
                         h4{
                             margin: 0;
@@ -156,10 +154,58 @@
                         height: 16rem;
                     }
                 }
-                .field_field_equipe_presentation p{
+                .field_field_equipe_presentation {
-                    font-family: "gilroy-light";
+                    p{
-                    font-size: 0.6rem;
+                        font-family: "gilroy-light";
+                        font-size: 0.6rem;
+                    }
                 }
+                .field_field_equipe_photo,
+                .field_field_equipe_presentation {
+                  overflow: hidden;
+                  max-height: 0;
+                  opacity: 0;
+                  transition:
+                    max-height 1s ease,
+                    opacity 0.8s ease;
+                }
+                
+                /* Quand ouvert */
+                .field_field_equipe_photo.is-open,
+                .field_field_equipe_presentation.is-open {
+                  max-height: 1000px; /* assez grand pour contenir le contenu */
+                  opacity: 1;
+                }
+                
+                .btn-equipe-toggle{
+                    justify-content: space-between;
+                    align-items: center;
+                    color: white;
+                    text-transform: uppercase;
+                    font-size: 0.5rem;
+                    background-color: black;
+                    padding-left: 0.5rem;
+                    margin: auto;
+                    display: flex;
+                    svg{
+                        display: none;
+                    }
+                    &::after{
+                        display: inline-flex;
+                        content: url("../img/noun-arrow-to-right.svg");
+                        padding-right: 0.2rem;
+                        padding-left: 0.2rem;
+                        // padding-bottom: 0.2rem;
+                        height: 25px;
+                    }
+                    margin-bottom: 1rem;
+                   
+                }
+                .equipe-separator {
+                    border-bottom: 1px solid black;
+                    margin: 20px 0;
+                    width: 100%;
+                  }
 
                 .field_field_parties_projet{
                     margin-top: 2rem;