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

.after-h1 {     // fonctionne mais manque "when in View"
  transition: width 5s ease-in-out;
  &:hover {
    width: 100%;
    // 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 {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  // margin-left: 15%;
  // padding-right: 15%;
  width: 70%;
  margin: auto;


}


    .mozaique_personnes {
      background-color: #d5d2d1;

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

    }



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



.mozaique {
  // background-color: #fff;
  display: flex;
  flex-direction: row;
  width: 50%;
  // max-width: 35%;
  padding: 0.5rem;
  // align-items: stretch;
  // position: relative;
  // margin-right: 34%;
  // margin-bottom: 6rem;
  // margin-left: 15%;
  // height: auto;


}

// .personne {
//   width: 45%;
//   display: flex;
//   flex-direction: row;
// }

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

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

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

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


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


.portrait {
  // max-width:50% !important;
  background: transparent !important;

  img {
      width: 5rem !important;
  }

}



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