popin biographie

user/themes/epau-antimatter/css-compiled/template.css

@@ -842,50 +842,15 @@ ul.pagination {
   display: block;
   margin-left: 40%;
   margin-right: 15%; }
-
-.titre_bsn h1 {
-  text-align: left;
-  padding-bottom: 3rem; }
-
-#background {
-  background-color: #d5d2d1;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  grid-template-rows: repeat(8, 5vw);
-  grid-gap: 15px; }
-
-#background img {
-  width: 100% !important;
-  height: 100%;
-  object-fit: cover; }
-
-.item-1 {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 5; }
-
-.item-2 {
-  grid-column-start: 3;
-  grid-column-end: 5;
-  grid-row-start: 1;
-  grid-row-end: 5; }
-
-.item-3 {
-  grid-column-start: 5;
-  grid-column-end: 1;
-  grid-row-start: 9;
-  grid-row-end: 6; }
-
-.item-4 {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 3; }
+  .titre_bsn h1 {
+    text-align: left;
+    padding-bottom: 3rem; }
 
 .programmes {
   display: flex;
   flex-wrap: wrap;
+  background: url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat, url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat, url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat, url("/user/themes/epau-antimatter/images/jeux-olypiques-paris-2024-village-athle-lot-e2.jpg") right no-repeat;
+  /* On bottom, like z-index: 1; */
   background-color: #d5d2d1;
   justify-content: center;
   padding-left: 15%;
@@ -898,23 +863,23 @@ ul.pagination {
   padding: 1.5rem;
   background-color: white;
   margin: 0.4rem; }
+  .programme h4 {
+    text-transform: uppercase;
+    line-height: 1.2; }
+  .programme img {
+    max-height: 15%; }
+  .programme p {
+    font-family: "Sarabun", sans-serif;
+    font-weight: 500;
+    font-style: italic; }
 
-.programme h4 {
-  text-transform: uppercase;
-  line-height: 1.2; }
-
-.programme img {
-  max-height: 15%; }
-
-.programme p {
-  font-family: "Sarabun", sans-serif;
-  font-weight: 500;
-  font-style: italic; }
-
-.programmes :hover {
+.programme:hover {
   background-color: #000;
-  color: #ffffff;
   transition: 0.2s ease-in-out; }
+  .programme:hover p {
+    color: #fff; }
+  .programme:hover h4 {
+    color: #fff; }
 
 .gouvernance {
   background-color: #000;
@@ -932,16 +897,15 @@ ul.pagination {
 
 .mozaique_personnes {
   background-color: #d5d2d1; }
-
-.mozaique_personnes h3 {
-  padding-top: 3rem;
-  padding-left: 15%;
-  padding-right: 15%;
-  font-family: "Sarabun";
-  font-weight: 800;
-  font-size: 1rem;
-  line-height: 20px;
-  text-align: left; }
+  .mozaique_personnes h3 {
+    padding-top: 3rem;
+    padding-left: 15%;
+    padding-right: 15%;
+    font-family: "Sarabun";
+    font-weight: 800;
+    font-size: 1rem;
+    line-height: 20px;
+    text-align: left; }
 
 .mozaique {
   display: flex;
@@ -956,35 +920,29 @@ ul.pagination {
   font-family: "Sarabun", sans-serif;
   width: 30rem;
   height: 30rem; }
+  .info h5 {
+    font-weight: 900;
+    font-size: 1.3rem;
+    margin: 0;
+    padding-top: 1rem;
+    padding-left: 1rem; }
+  .info h6 {
+    font-weight: 300;
+    font-size: 1.1rem;
+    font-style: italic;
+    margin: 0;
+    padding-left: 1rem;
+    padding-bottom: 1rem; }
 
 .info:hover {
   background-color: #000;
   color: #fff;
   transition: 0.2s ease-in-out; }
 
-.info h5 {
-  font-weight: 900;
-  font-size: 1.3rem;
-  margin: 0;
-  padding-top: 1rem;
-  padding-left: 1rem; }
-
-.info h6 {
-  font-weight: 300;
-  font-size: 1.1rem;
-  font-style: italic;
-  margin: 0;
-  padding-left: 1rem;
-  padding-bottom: 1rem; }
-
 .portrait {
   background: transparent !important; }
-
-.portrait img {
-  max-width: 15rem !important; }
-
-img.portrait {
-  width: 20%; }
+  .portrait img {
+    width: 5rem !important; }
 
 .bouton {
   border: solid;
@@ -993,7 +951,7 @@ img.portrait {
   align-self: flex-end;
   margin-right: 2rem; }
 
-#modal {
+.modal {
   position: fixed;
   z-index: 1;
   top: 0;
@@ -1002,41 +960,30 @@ img.portrait {
   left: 0;
   display: none; }
 
-#modal.open {
+.modal.open {
   display: block; }
 
-#modal .mask {
-  background: none !important;
-  opacity: 1;
+.modal .container {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0; }
-
-#modal .container {
-  position: relative;
   background: white !important;
   top: 50%;
-  left: 25%;
+  left: 50%;
   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 {
+  border: solid;
   color: black; }
+  .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);