pop in pour biographies

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; } }