diff --git a/user/themes/epau-antimatter/css-compiled/nucleus.css b/user/themes/epau-antimatter/css-compiled/nucleus.css
index db9eea4..b2aea99 100644
--- a/user/themes/epau-antimatter/css-compiled/nucleus.css
+++ b/user/themes/epau-antimatter/css-compiled/nucleus.css
@@ -92,7 +92,7 @@ sub {
 
 img {
   border: 0;
-  max-width: 100%; }
+  max-width: 15rem; }
 
 svg:not(:root) {
   overflow: hidden; }
@@ -519,10 +519,10 @@ h1, h2, h3, h4, h5, h6 {
   text-rendering: optimizeLegibility; }
 
 h1 {
-  font-size: 3rem; }
+  font-size: 2.3rem; }
 
 h2 {
-  font-size: 2.3rem; }
+  font-size: 2rem; }
 
 h3 {
   font-size: 2rem; }
diff --git a/user/themes/epau-antimatter/css-compiled/template.css b/user/themes/epau-antimatter/css-compiled/template.css
index ae5cc46..2ac1f23 100644
--- a/user/themes/epau-antimatter/css-compiled/template.css
+++ b/user/themes/epau-antimatter/css-compiled/template.css
@@ -312,7 +312,7 @@ h2, h3, h5, h6 {
   font-family: "Sarabun", sans-serif; }
 
 h1 {
-  font-size: 3rem; }
+  font-size: 2.3rem; }
   @media only all and (max-width: 47.938em) {
     h1 {
       font-size: 2.5rem;
@@ -321,11 +321,11 @@ h1 {
 
 @media only all and (min-width: 48em) and (max-width: 59.938em) {
   h2 {
-    font-size: 1.9rem; } }
+    font-size: 1.6rem; } }
 
 @media only all and (max-width: 47.938em) {
   h2 {
-    font-size: 1.8rem; } }
+    font-size: 1.5rem; } }
 
 @media only all and (min-width: 48em) and (max-width: 59.938em) {
   h3 {
@@ -357,11 +357,11 @@ h3 {
 
 h1 + h2 {
   margin: -2rem 0 2rem 0;
-  font-size: 2rem;
-  line-height: 1;
+  font-size: 1.2rem;
+  line-height: 1.3;
   text-align: center;
   font-family: "Sarabun", sans-serif;
-  font-weight: 300; }
+  font-weight: 100; }
   @media only all and (min-width: 48em) and (max-width: 59.938em) {
     h1 + h2 {
       font-size: 1.6rem; } }
@@ -816,6 +816,161 @@ ul.pagination {
 #body > script:first-child + .grav-lightslider {
   margin-top: -3rem; }
 
+.programme p {
+  font-family: "Sarabun", sans-serif;
+  font-weight: 500;
+  font-style: italic; }
+
+#header #navbar ul.navigation li a {
+  font-family: "Sarabun", sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  font-size: 1rem;
+  display: inline-block;
+  padding: 0.3rem 0.8rem;
+  -webkit-backface-visibility: hidden; }
+
+#header.scrolled #navbar ul.navigation li a {
+  color: black !important;
+  font-size: 0.95rem;
+  transition: 0.6s ease-in-out; }
+
+.callout {
+  padding-top: 0.5rem; }
+
+.callout h1, h2, h3, p {
+  text-align: left !important; }
+
+.callout h1 {
+  padding-bottom: 5rem; }
+
+.titre_bsn {
+  display: block;
+  margin-left: 40%;
+  margin-right: 15%; }
+
+.titre_bsn h1 {
+  text-align: left;
+  padding-bottom: 3rem; }
+
+.programmes {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #d5d2d1;
+  justify-content: center;
+  padding-left: 15%;
+  padding-right: 15%;
+  padding-top: 8rem;
+  padding-bottom: 8rem; }
+
+.programme {
+  max-width: 45%;
+  padding: 1.5rem;
+  background-color: white;
+  margin: 0.4rem; }
+
+.programme h4 {
+  text-transform: uppercase; }
+
+.programme img {
+  max-width: 30%; }
+
+.programmes :hover {
+  background-color: #000;
+  color: #ffffff;
+  transition: 0.2s ease-in-out; }
+
+.gouvernance {
+  background-color: #000;
+  color: #ffffff;
+  text-transform: uppercase;
+  padding-bottom: 6rem;
+  padding-top: 2rem; }
+
+.mozaique_personnes {
+  background-color: #d5d2d1; }
+
+.mozaique_personnes h3 {
+  margin-top: 0px !important;
+  padding-top: 3rem;
+  padding-left: 15%;
+  padding-right: 15%;
+  font-family: "Sarabun";
+  font-weight: 800;
+  font-size: 1rem;
+  line-height: 20px; }
+
+.mozaique {
+  display: flex;
+  justify-items: center;
+  position: relative;
+  margin-right: 10%;
+  margin-left: 10%; }
+
+.info {
+  background-color: #fff;
+  display: flex;
+  flex-direction: column; }
+
+.info:hover {
+  background-color: #000;
+  color: #fff; }
+
+.portrait img {
+  max-width: 15rem !important;
+  background: transparent !important; }
+
+.bouton {
+  margin: 0 30rem;
+  border: solid;
+  background-color: transparent;
+  text-transform: uppercase; }
+
+#modal {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none; }
+
+#modal.open {
+  display: block; }
+
+#modal .mask {
+  background: none !important;
+  opacity: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+#modal .container {
+  position: relative;
+  background: white !important;
+  top: 50%;
+  left: 25%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 50%;
+  height: content;
+  min-height: 50px;
+  border: solid; }
+
+#modal .container .message {
+  padding: 5% 10% 5% 5%; }
+
+#modal .container a.close {
+  position: absolute;
+  right: 5%;
+  top: 5%;
+  color: black;
+  font-size: 30px; }
+
+#modal .container a.close:hover {
+  color: black; }
+
 .modular.header-image #header {
   background-color: rgba(255, 255, 255, 0);
   box-shadow: none; }
@@ -856,12 +1011,14 @@ ul.pagination {
       background: rgba(255, 255, 255, 0.2); }
 
 .modular .features {
-  padding: 6rem 0;
+  padding: 2rem 8rem;
   text-align: center; }
   .modular .features:after {
     content: "";
     display: table;
     clear: both; }
+  .modular .features .titre_nsb h1 {
+    text-transform: uppercase; }
   .modular .features h2 {
     margin: 0;
     line-height: 100%; }
@@ -879,9 +1036,10 @@ ul.pagination {
   .modular .features .feature {
     display: block;
     float: left;
-    width: 25%;
+    width: 20%;
     vertical-align: top;
     margin-top: 2rem;
+    margin-right: 3rem;
     margin-bottom: 1rem; }
     @media only all and (min-width: 30.063em) and (max-width: 47.938em) {
       .modular .features .feature {
@@ -896,11 +1054,15 @@ ul.pagination {
       color: #000; }
     .modular .features .feature h4 {
       margin: 0;
-      font-size: 1.1rem; }
+      font-size: 1.1rem;
+      text-align: left; }
     .modular .features .feature p {
       display: inline-block;
-      font-size: 1rem;
+      font-size: 0.8rem;
       margin: 0.2rem 0 1rem; }
+    .modular .features .feature img {
+      width: 45%;
+      display: block; }
   .modular .features.big {
     text-align: center; }
     .modular .features.big .feature {
@@ -924,8 +1086,9 @@ ul.pagination {
         text-align: left; }
 
 .callout {
-  background: #f6f6f6;
-  padding: 6rem 0.938rem; }
+  background: #000;
+  color: #fff;
+  padding: 4rem 0.938rem; }
   @media only all and (max-width: 59.938em) {
     .callout {
       text-align: center; } }
diff --git a/user/themes/epau-antimatter/css/custom.css b/user/themes/epau-antimatter/css/custom.css
index 96872b5..195eecc 100644
--- a/user/themes/epau-antimatter/css/custom.css
+++ b/user/themes/epau-antimatter/css/custom.css
@@ -1,4 +1,4 @@
-#header #navbar ul.navigation li a {
+/* #header #navbar ul.navigation li a {
     font-family: "Sarabun", sans-serif;
     font-weight: 400;
     text-transform: uppercase;
@@ -86,14 +86,17 @@ h2 {
     .programmes :hover {
       background-color: #000;
       color: #ffffff;
+      transition:0.2s ease-in-out;
     }
 
-    .programme p {
+    /* .titre_nsb {
+      display: block;
+      position: absolute;
+      margin-right: 39%;
+    } */
 
 
-    }
-
-/*.ressources {
+/* .ressources {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -101,32 +104,26 @@ h2 {
     padding-top: 8rem;
     padding-right: 5rem;
     padding-left: 5rem;
-  }
+  } */
 
-    .ressource {
+    /* .ressource {
       max-width: 20%;
       margin-block: 5rem;
       flex-wrap: wrap;
       flex: 0 1 15%;
-    }
-*/
+    } */
 
-.titre_nsb {
-  display: block;
-  position: absolute;
-  margin-right: 39%;
-
-}
 
+/*
 .ressources h1 {
   text-transform: uppercase;
   background-color: #fff;
   color: #000;
   padding-top: 5rem;
   padding-bottom: 6rem;
-}
+} */
 
-.ressources {
+/* .ressources {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 3rem;
@@ -138,16 +135,16 @@ h2 {
   margin-right: 10%;
   margin-bottom: 6rem;
   margin-left: 10%;
-}
+} */
 
-.ressources img {
+/* .ressources img {
   max-width: 50%;
-}
+} */
 
-.ressource h1 h2 h3 h4 {
+/* .ressource h1 h2 h3 h4 {
   margin: 0.2rem;
-}
-
+} */
+/* 
 .gouvernance {
   background-color: #000;
   color: #ffffff;
@@ -176,11 +173,7 @@ h2 {
 
 .personne {
   background-color: #fff;
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-gap: 1rem;
-  grid-auto-rows: auto;
-  background-color: #ffffff;
+  display: flex;
 
   justify-items: center;
   position: relative;
@@ -190,4 +183,4 @@ h2 {
 }
 .portrait {
   max-width: 20%;
-}
+} */ */
diff --git a/user/themes/epau-antimatter/js/antimatter.js b/user/themes/epau-antimatter/js/antimatter.js
index 3b29627..8d18952 100644
--- a/user/themes/epau-antimatter/js/antimatter.js
+++ b/user/themes/epau-antimatter/js/antimatter.js
@@ -36,4 +36,17 @@ jQuery(document).ready(function($){
     });
     // Responsive Menu
 
+
+
+    $(".bouton").click(function(){
+	       $("#modal .message").html();
+	       $("#modal").addClass("open");
+         // $("#body").addClass("grey");
+    });
+
+    $("#modal .mask, #modal a.close").click(function(){
+    	   $("#modal").removeClass("open");
+    	   return false;
+    });
+
 });
diff --git a/user/themes/epau-antimatter/js/script-bio.js b/user/themes/epau-antimatter/js/script-bio.js
new file mode 100644
index 0000000..e005a29
--- /dev/null
+++ b/user/themes/epau-antimatter/js/script-bio.js
@@ -0,0 +1,28 @@
+// $( function() {
+//   $( "#popin" ).dialog({
+//     autoOpen: false,
+//     show: {
+//       effect: "blind",
+//       duration: 1000
+//     },
+//     hide: {
+//       effect: "explode",
+//       duration: 1000
+//     }
+//   });
+//
+//   $( "#opener" ).on( "click", function() {
+//     $( "#popin" ).dialog( "open" );
+//   });
+// } );
+
+
+$(".bouton").click(function(){
+     $("#modal .message").html("Contenu de ma modal");
+     $("#modal").addClass("open");
+});
+
+$("#modal .mask, #modal a.close").click(function(){
+     $("#modal").removeClass("open");
+     return false;
+});
diff --git a/user/themes/epau-antimatter/scss/configuration/nucleus/_typography.scss b/user/themes/epau-antimatter/scss/configuration/nucleus/_typography.scss
index ae4825c..0fc3428 100644
--- a/user/themes/epau-antimatter/scss/configuration/nucleus/_typography.scss
+++ b/user/themes/epau-antimatter/scss/configuration/nucleus/_typography.scss
@@ -3,8 +3,8 @@ $core-font-size:				1rem !default;
 $core-line-height:				1.7 !default;
 
 // Heading Sizes
-$h1-font-size:					$core-font-size + 2.0 !default;
-$h2-font-size:					$core-font-size + 1.30 !default;
+$h1-font-size:					$core-font-size + 1.30 !default;
+$h2-font-size:					$core-font-size + 1.0 !default;
 $h3-font-size:					$core-font-size + 1.0 !default;
 $h4-font-size:					$core-font-size + 0.65 !default;
 $h5-font-size:					$core-font-size + 0.25 !default;
diff --git a/user/themes/epau-antimatter/scss/nucleus/_core.scss b/user/themes/epau-antimatter/scss/nucleus/_core.scss
index 9863bd0..b3cf195 100644
--- a/user/themes/epau-antimatter/scss/nucleus/_core.scss
+++ b/user/themes/epau-antimatter/scss/nucleus/_core.scss
@@ -98,7 +98,7 @@ sub {
 
 img {
 	border: 0;
-	max-width: 100%;
+	max-width: 15rem;
 }
 
 svg:not(:root) {
diff --git a/user/themes/epau-antimatter/scss/template/_custom.scss b/user/themes/epau-antimatter/scss/template/_custom.scss
index 7c6a209..197395c 100644
--- a/user/themes/epau-antimatter/scss/template/_custom.scss
+++ b/user/themes/epau-antimatter/scss/template/_custom.scss
@@ -15,3 +15,279 @@
 #body > script:first-child + .grav-lightslider {
   margin-top: -3rem;
 }
+
+.programme p {
+  font-family: $font-family-default;
+  font-weight: 500;
+  font-style: italic;
+}
+
+#header #navbar ul.navigation li a {
+    font-family: "Sarabun", sans-serif;
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: 1rem;
+    display: inline-block;
+    padding: 0.3rem 0.8rem;
+    -webkit-backface-visibility: hidden;
+
+}
+
+
+  #header.scrolled #navbar  ul.navigation li a {
+      color: black !important;
+      font-size: 0.95rem;
+
+      transition:0.6s ease-in-out;
+
+  }
+
+
+.callout {
+  padding-top: 0.5rem;
+
+}
+
+.callout h1, h2, h3, p {
+  text-align: left !important;
+  }
+
+.callout h1 {
+  padding-bottom: 5rem;
+}
+
+// h2 {
+//   font-size: 30px;
+//   font-weight: lighter;
+//   line-height: 35px;
+// }
+
+.titre_bsn {
+  display: block;
+  margin-left: 40%;
+  margin-right: 15%;
+}
+
+.titre_bsn h1 {
+  text-align: left;
+  padding-bottom: 3rem;
+}
+
+
+
+.programmes {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #d5d2d1;
+  justify-content: center;
+  padding-left: 15%;
+  padding-right: 15%;
+
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+
+
+    .programme {
+      max-width: 45%;
+      padding: 1.5rem;
+      background-color: white;
+      margin: 0.4rem;
+
+    }
+
+    .programme h4 {
+      text-transform: uppercase;
+    }
+
+    .programme img {
+      max-width: 30%;
+    }
+
+    .programmes :hover {
+      background-color: #000;
+      color: #ffffff;
+      transition:0.2s ease-in-out;
+    }
+//
+//     /* .titre_nsb {
+//       display: block;
+//       position: absolute;
+//       margin-right: 39%;
+//     } */
+//
+//
+// /* .ressources {
+//     display: flex;
+//     flex-wrap: wrap;
+//     justify-content: space-between;
+//     background-color: #ffffff;
+//     padding-top: 8rem;
+//     padding-right: 5rem;
+//     padding-left: 5rem;
+//   } */
+//
+//     /* .ressource {
+//       max-width: 20%;
+//       margin-block: 5rem;
+//       flex-wrap: wrap;
+//       flex: 0 1 15%;
+//     } */
+//
+//
+// /*
+// .ressources h1 {
+//   text-transform: uppercase;
+//   background-color: #fff;
+//   color: #000;
+//   padding-top: 5rem;
+//   padding-bottom: 6rem;
+// } */
+//
+// /* .ressources {
+//   display: grid;
+//   grid-template-columns: repeat(4, 1fr);
+//   grid-gap: 3rem;
+//   grid-auto-rows: auto;
+//   background-color: #ffffff;
+//   padding-top: 18rem;
+//   justify-items: center;
+//   position: relative;
+//   margin-right: 10%;
+//   margin-bottom: 6rem;
+//   margin-left: 10%;
+// } */
+//
+// /* .ressources img {
+//   max-width: 50%;
+// } */
+//
+// /* .ressource h1 h2 h3 h4 {
+//   margin: 0.2rem;
+// } */
+
+.gouvernance {
+  background-color: #000;
+  color: #ffffff;
+  text-transform: uppercase;
+  padding-bottom: 6rem;
+  padding-top: 2rem;
+
+}
+
+
+    .mozaique_personnes {
+      background-color: #d5d2d1
+    }
+
+    .mozaique_personnes h3 {
+      margin-top: 0px !important;
+      padding-top: 3rem;
+      padding-left: 15%;
+      padding-right: 15%;
+      font-family: "Sarabun";
+      font-weight: 800;
+      font-size: 1rem;
+      line-height: 20px;
+    }
+
+        .mozaique {
+          // background-color: #fff;
+          display: flex;
+
+          justify-items: center;
+          position: relative;
+          margin-right: 10%;
+          // margin-bottom: 6rem;
+          margin-left: 10%;
+        }
+
+        // .mozaique :hover {
+        //   background-color: #000;
+        //   color: #fff;
+        // }
+
+            .info {
+              background-color: #fff;
+              display:flex;
+              flex-direction: column;
+
+            }
+            .info:hover {
+                background-color: #000;
+                color: #fff;
+            }
+
+            .portrait img {
+              max-width:15rem !important;
+              background: transparent !important;
+            }
+
+.bouton {
+  margin: 0 30rem;
+  border: solid;
+  background-color: transparent;
+  text-transform: uppercase;
+}
+//
+// .bouton :hover {
+//     background-color: #000;
+// }
+
+// pop in biographie
+
+#modal{
+	position: fixed;
+	z-index: 1;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+#modal.open{
+	display: block;
+}
+#modal .mask{
+	background: none !important;
+	opacity: 1;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+
+}
+// #body .grey {
+//   opacity: 0.5;
+// }
+
+#modal .container{
+	position: relative;
+	background: white !important;
+	top: 50%;
+	left: 25%;
+	transform: translateX(-50%) translateY(-50%);
+	width: 50%;
+	height: content;
+	min-height: 50px;
+  border: solid;
+
+}
+
+#modal .container .message{
+	padding: 5% 10% 5% 5%;
+
+}
+
+#modal .container a.close{
+	position: absolute;
+	right: 5%;
+	top:5%;
+	color: black;
+	font-size: 30px;
+}
+#modal .container a.close:hover{
+	color: black;
+}
diff --git a/user/themes/epau-antimatter/scss/template/_typography.scss b/user/themes/epau-antimatter/scss/template/_typography.scss
index efa24ea..a27bc11 100644
--- a/user/themes/epau-antimatter/scss/template/_typography.scss
+++ b/user/themes/epau-antimatter/scss/template/_typography.scss
@@ -72,17 +72,17 @@ h3 {
 
 	h1 + h2 {
 	margin: -2rem 0 2rem 0;
-	font-size: 2rem;
+	font-size: 1.2rem;
 	@include breakpoint(tablet-range) {
 		font-size: 1.6rem;
-}
+	}
 	@include breakpoint(mobile-only) {
 		font-size: 1.5rem;
 	}
-	line-height: 1;
+	line-height: 1.3;
 	text-align: center;
 	font-family: $font-family-default;
-	font-weight: 300;
+	font-weight: 100;
 }
 
 h2 + h3 {
diff --git a/user/themes/epau-antimatter/scss/template/modular/_all.scss b/user/themes/epau-antimatter/scss/template/modular/_all.scss
index a672afd..1d43852 100644
--- a/user/themes/epau-antimatter/scss/template/modular/_all.scss
+++ b/user/themes/epau-antimatter/scss/template/modular/_all.scss
@@ -2,6 +2,7 @@
 @import "features";
 @import "text";
 
+
 .modular {
     .modular-row:last-child {
     	margin-bottom: 2rem;
diff --git a/user/themes/epau-antimatter/scss/template/modular/_features.scss b/user/themes/epau-antimatter/scss/template/modular/_features.scss
index 16db421..f82bfa0 100644
--- a/user/themes/epau-antimatter/scss/template/modular/_features.scss
+++ b/user/themes/epau-antimatter/scss/template/modular/_features.scss
@@ -1,10 +1,17 @@
 // Modular Showcase styling
 .modular {
     .features {
-        padding: 6rem 0;
+
+        padding: 2rem 8rem;
         text-align: center;
+
         @include clearfix;
 
+        .titre_nsb h1 {
+            text-transform: uppercase;
+
+        }
+
         h2 {
             margin: 0;
             line-height: 100%;
@@ -20,6 +27,7 @@
 
         .feature-items {
             margin-top: 2rem;
+
             @supports not (flex-wrap: wrap) {
                 overflow: hidden;
             }
@@ -28,10 +36,12 @@
         .feature {
             display:block;
             float: left;
-            width: 25%;
+            width: 20%;
             vertical-align: top;
             margin-top: 2rem;
+            margin-right: 3rem;
             margin-bottom: 1rem;
+
             @include breakpoint(large-mobile-range) {
                 margin-top: 1rem;
                 width: 50%;
@@ -49,13 +59,20 @@
             h4 {
                 margin: 0;
                 font-size: 1.1rem;
+                text-align: left;
             }
 
             p {
                 display: inline-block;
-                font-size: $core-font-size;
+                font-size: $core-font-size - 0.20;
                 margin: 0.2rem 0 1rem;
             }
+
+            img {
+                width: 45%;
+                display: block;
+
+            }
         }
 
         &.big {
diff --git a/user/themes/epau-antimatter/scss/template/modular/_text.scss b/user/themes/epau-antimatter/scss/template/modular/_text.scss
index 1450bb6..59686b1 100644
--- a/user/themes/epau-antimatter/scss/template/modular/_text.scss
+++ b/user/themes/epau-antimatter/scss/template/modular/_text.scss
@@ -1,12 +1,13 @@
 // variables
-$text-bg:        #f6f6f6;
-$text-padding:   6rem;
+$text-bg:        #000;
+$text-padding:   4rem;
 $image-margin:      2rem;
 
 
 // styling
 .callout {
     background: $text-bg;
+    color: #fff;
     padding: $text-padding $content-padding;
     @include breakpoint(desktop-only) {
         text-align: center;
diff --git a/user/themes/epau-antimatter/templates/modular/personnes.html.twig b/user/themes/epau-antimatter/templates/modular/personnes.html.twig
index a6009dd..18484fb 100644
--- a/user/themes/epau-antimatter/templates/modular/personnes.html.twig
+++ b/user/themes/epau-antimatter/templates/modular/personnes.html.twig
@@ -4,23 +4,42 @@
     {% for personne in page.header.personnes %}
 
       <div class="personne">
-        <div class="portait">
-          {% if personne.portrait %}
-            <img src="{{page.media[personne.portrait].url|e }}" alt="portrait de {{personne.nom}}" />
-          {% endif %}
-        </div>
-            {% if personne.nom %}
-            <h5>{{ personne.nom }}</h5>
-            {% endif %}
-            {% if personne.fonction %}
-            <h6>{{ personne.fonction }}</h6>
-            {% endif %}
-            {% if personne.biographie %}
-            <p>{{ personne.biographie|markdown }}</p>
-            {% endif %}
+        <div class="mozaique">
+            <div class="portait">
+              {% if personne.portrait %}
+                <img src="{{page.media[personne.portrait].url|e }}" alt="portrait de {{personne.nom}}" />
+              {% endif %}
+            </div>
+            <div class="info">
+                {% if personne.nom %}
+                <h5>{{ personne.nom }}</h5>
+                {% endif %}
+                {% if personne.fonction %}
+                <h6>{{ personne.fonction }}</h6>
+                {% endif %}
+                <button class="bouton">Voir biographie</button>
+
+            </div>
+                <div id="modal">
+                	<div class="mask">
+                	<div class="container">
+                		<div class="message">
+                      {% if personne.biographie %}
+                      <p>{{ personne.biographie|markdown }}</p>
+                      {% endif %}
+                    </div>
+                		<a href="#" class="close">&times;</a>
+
+                	</div>
+                  </div>
+                </div>
+
 
         </div>
 
+
+      </div>
+
     {% endfor %}
 
 </div>
diff --git a/user/themes/epau-antimatter/templates/modular/ressources.html.twig b/user/themes/epau-antimatter/templates/modular/ressources.html.twig
index fbe8f5d..abcc1f3 100644
--- a/user/themes/epau-antimatter/templates/modular/ressources.html.twig
+++ b/user/themes/epau-antimatter/templates/modular/ressources.html.twig
@@ -1,11 +1,11 @@
-<div class="ressources {{ page.header.class}}">
+<div class="features {{ page.header.class}}">
     <div class="titre_nsb">
       {{ content|raw }}
     </div>
 
     {% for rapport in page.header.rapports %}
 
-        <div class="ressource">
+        <div class="feature">
 
             {% if rapport.couverture and rapport.pdf %}
             <a href="{{page.media[rapport.pdf].url|e }}" download >
@@ -23,22 +23,3 @@
         </div>
     {% endfor %}
 </div>
-
-
-
-{#  ça, ça montre le pdf sur nouvelle page avec possibilité d'imprimer ou de télécharger (page de dialogue du navigateur)
-{% if rapport.couverture and rapport.pdf %}
-<a href="{{page.media[rapport.pdf].url|e }}" {{rapport.titre_du_rapport}} >
-  <img src="{{page.media[rapport.couverture].url|e }}" alt="couverture du {{rapport.titre_du_rapport}}" />
-</a>
-{% endif %}
-#}
-
-
-{#  ça, ça lance le téléchargement du pdf directement
-{% if rapport.couverture and rapport.pdf %}
-<a href="{{page.media[rapport.pdf].url|e }}" download >
-  <img src="{{page.media[rapport.couverture].url|e }}" alt="couverture du {{rapport.titre_du_rapport}}" />
-</a>
-{% endif %}
-#}
diff --git a/user/themes/epau-antimatter/templates/partials/base.html.twig b/user/themes/epau-antimatter/templates/partials/base.html.twig
index ab2d6e8..70447b2 100644
--- a/user/themes/epau-antimatter/templates/partials/base.html.twig
+++ b/user/themes/epau-antimatter/templates/partials/base.html.twig
@@ -34,6 +34,7 @@
         {% do assets.addJs('theme://js/antimatter.js') %}
         {% do assets.addJs('theme://js/slidebars.min.js') %}
         {% do assets.addJs('theme://js/parallax.min.js') %}
+        {% do assets.addJs('theme://js/script-bio.js') %}
     {% endblock %}
 
     {% block assets deferred %}
@@ -53,46 +54,6 @@
 
               <img src="/user/pages/01.home/Republique-francaise-logo.svg" alt="logo France">
               <img src="user/pages/01.home/EPAU_logo_EPAU_vecto-seul.svg" alt="logo EPAU">
-          
-
-              {# marche pas
-              {% for image in page.header.media_order %}
-                {% if loop.first %}
-                <img src="{{ image.url}}" alt="{{ config.site.title }}"/>
-                {% endif %}
-                {% if loop.last %}
-                <img src="{{ image.url}}" alt="{{ config.site.title }}"/>
-                {% endif %}
-              {% endfor %}
-
-
-              {% if header_image %}
-            {% if header_image_file %}
-                {% set header_image_media = page.media.images[header_image_file] %}
-            {% else %}
-                {% set header_image_media = page.media.images|first %}
-            {% endif %}
-            {{ header_image_media.cropZoom(header_image_width, header_image_height).html }}
-        {% endif %}
-
-
-              #}
-
-                {# {% if page.header.media_order %}
-                <img src="{{ page.header.media_order|first }}" alt="{{ config.site.title }}"/>
-                {% endif %}
-                <img src="{{page.media[programme.logo].url|e }}" alt="logo du programme {{programme.nom_du_programme}}" />
-                #}
-
-                {# ça, ça marche si une seule image dans content de Home. Si 2 images, marche plus.>>>devient un tableau!
-                il faut trouver un moyen de lui dire: tu prends la première puis tu prends la 2e du tableau media_order.
-                J'ai rajouter "array: true" dans default.yaml pour qu'il voi plusieurs images. mais ne sont pas dans header. Elles apparaissent
-                <img src="{{ page.header.media_order }}" alt="{{ config.site.title }}"/>
-                #}
-
-                {#  <img src="EPAU_logo_EPAU_vecto-seul.svg"/>
-                <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
-                #}
 
             </div>