dev-epau.archi.fr/user/themes/epau-antimatter/scss/template/_custom.scss

// Your custom SCSS should be written here...

.grav-lightslider {
    .lSSlideOuter {
        .lSPager.lSpg {
            > li a {
                z-index: 1;
            }
        }
    }
}



#body > script:first-child + .grav-lightslider {
  margin-top: -3rem;
}



#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;
    // float: left;
}


#header #navbar ul.navigation li:after {
  display: inline;
  content: "|";
  padding: 0 .1em;
  vertical-align: top;
}

#header #navbar ul.navigation li a:hover {
  font-weight: 900;
}



  #header.scrolled #navbar  ul.navigation li a {
      color: black !important;
      font-size: 0.95rem;
      transition:0.6s ease-in-out;
  }

#logo {
    display: flex;
    flex-direction: row;
}

#logo img {
  padding: 0.5rem;
}

//tentative animation when in View
// @media () {
//
//   @viewport {
//
//   }
//   rect.after-h1 {
//     animation-duration: 4s;
//     animation-timing-function: linear;
//     animation-timeline: grow-timeline;
//   }
//
//   @scroll-timeline grow-timeline {
//     source: selector(.test);
//     orientation: block;
//     scroll-offsets: 250px, 300px;
//   }
//
//   @keyframes grow {
//     to { transform: translate(300px) }
//   }
//   @k

// @keyframes souligne {
//   0% { width: 0.5%;
//   }
//   100%{
//     width: 50%;
//   }
// }
//
// // selecteur:hover,
// // selecteur:focus,
// selecteur:hover{
//   animation: souligne 2s ease-in-out;
// }






.callout {
  padding-top: 0.5rem;

}

.callout h1, h2, h3, p {
  text-align: left !important;
  }

.callout {
    padding-right: 0rem !important;
    padding-left: 0rem !important;

    // h1 {
    // margin-bottom: 0rem !important;
    // }
    h2 {
      text-transform: capitalize;
      font-weight: 300;
      font-size: 1rem;
    }

}
.titre_nsb {
    display: block;
    margin-right: 52%;

      h1 {
        margin-bottom: 0rem !important;
        text-align: right;
        padding-right: 0rem !important;
      }
}

.titre_bsn {
  display: block;
  margin-left: 40%;
  // padding-right: 15%;

    h1 {
      text-align: left;
      margin-bottom: 0rem !important;
      // padding-bottom: 3rem;
    }

    p {
      padding-right: 15%;
    }
}

@keyframes anim {
  0% {width: 0%;}
  100% {width: 100%}
}

.after-h1 {     // fonctionne mais manque "when in View"
  .test {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: anim 5s 500ms 1 normal ease-in-out forwards;
  }

  &:hover {
    .test {
        opacity: 1;
    }
    // opacity: 1;
    // transition: width 5s ease-in-out;
  }
}



// fond images en grille pour parallax

// #background {
//     background-color: #d5d2d1;
//     display: grid;
//     grid-template-columns: repeat(5, 1fr);
//     grid-template-rows: repeat(8, 5vw);
//     grid-gap: 15px;
// }
//
// #background img {
//     max-width: 100% !important;
//     max-height: 100% !important;
//     // 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;
// }

.programmes {

  display: flex;
  flex-wrap: wrap;

  background:
   url("/user/themes/epau-antimatter/images/14360_default_big.jpg") 0px 0px no-repeat,  /* On top,    like z-index: 4; */
   url("/user/themes/epau-antimatter/images/10361_web_01.jpg") 1200px 300px no-repeat,   /*            like z-index: 3; */
   url("/user/themes/epau-antimatter/images/hyperliens_marseille_.PNG") 0px 700px no-repeat,   /*            like z-index: 2; */
   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%;
  padding-right: 15%;

  padding-top: 8rem;
  padding-bottom: 8rem;
}

.programme {
  max-width: 35%;
  // min-width:
  padding: 1.5rem;
  background-color: white;
  margin: 0.4rem;

    h4 {
      text-transform: uppercase;
      line-height: 1.2;
    }

    img {
      max-height: 15%;
    }

    p {
      font-family: $font-family-default;
      font-weight: 500;
      font-style: italic;
    }
}


.programme:hover {
  background-color: #000;
  transition:0.2s ease-in-out;

  p {
    color: #fff;
  }

  h4 {
    color: #fff;
  }
}

    // .parallax {
    //   display: block;
    // }

//
//     /* .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;



  .equipe {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    // margin-left: 15%;
    // padding-right: 15%;
    width: 54%;

    margin: auto;
    // justify-items: center;

    h3 {
      // display: flex;
      // flex-grow: 1;
      padding-top: 3rem;
      // padding-left: 15%;
      min-width: 100%;
      font-family: "Sarabun";
      font-weight: 800;
      font-size: 1rem;
      line-height: 20px;
      text-align: left;
    }

    .personne {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      // width: 50%;

      padding-right: 0.5rem;
      padding-bottom: 0.5rem;

      .mozaique {
        display: flex;
        flex-direction: row;


        justify-content: flex-end;
        max-width: 30rem;
        min-width: 30rem;

        .photo {
          // min-width: 10rem;
          // min-height: 10rem;

          // max-width:50% !important;
          overflow: hidden;
          width: 15rem !important;
          height: 15rem !important;
          // object-fit: cover;

          img {
              // maxwidth: 15rem !important;
              // height: 15rem !important;
              // background-size: cover;
              width: 100%;

          }

        }

        .info {
          background-color: #fff;
          display:flex;
          flex-direction: column;
          font-family: $font-family-default;
          width: 50%;
          height: 30rem;
          min-width: 15rem;

          h5 {
           font-weight: 900;
           font-size: 1.3rem;
           margin: 0;
           padding-top: 1rem;
           padding-right: 1rem;
           padding-left: 1rem;
         }
         h6 {
           font-weight: 300;
           font-size: 1.1rem;
           font-style: italic;
           margin: 0;
           padding-right: 1rem;
           padding-bottom: 1rem;
           padding-left: 1rem;
         }

         &:hover {
             background-color: #000;
             color: #fff;
             transition:0.2s ease-in-out;
         }
        }
      }
    }
  }

}








// .mozaique :hover {
//   background-color: #000;
//   color: #fff;
// }


// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...








.bouton {
  border: solid;
  background-color: transparent;
  text-transform: uppercase;
  align-self: flex-end;
  margin-right: 2rem;
}
//
// .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: absolute;
	background: white !important;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 50%;
	height: content;
	min-height: 50px;
  border: solid;
  color: black;

  .message{
  	padding: 5% 10% 5% 5%;
  }

  a.close{
  	position: absolute;
  	right: 5%;
  	top:5%;
  	color: black;
  	font-size: 30px;
  }

  a.close:hover{
  	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;
// }