@font-face {
    font-family: "Insolente";
    src: url(font/Insolente-Regular.ttf);
}


@font-face {
    font-family:"PoppinsIT" ;
    src: url(font/BBBPoppinsTN-DisplayBlackItalic.otf);
}

@font-face {
    font-family: "PoppinsTXT";
    src: url(font/BBBPoppinsTN-TextBold.otf);
}

@font-face {
    font-family: "PoppinsTTL";
    src: url(font/BBBPoppinsTN-DisplayBlackItalic.otf);
}

/* available OT features: aalt calt ccmp dnom locl numr salt sinf ss01 ss02 ss03 ss11 ss12 subs sups */

/* available OT features: aalt calt ccmp dnom locl numr salt sinf ss01 ss02 ss03 ss11 ss12 subs sups */


body {

    background-color: rgb(2, 0, 143);
    background-image: url(accessoires/FondEdenFloue.png);
    background-repeat: no-repeat;
    background-size: cover;
}


#tete {

    max-width: 45%;
    
    display: inline-block;

}

.intro{

    font-size: 1.5vw;
    color: rgb(255, 255, 255);
    display: inline-block;
    max-width: 20%;
    padding:0.5%;
    font-family: PoppinsTXT;
    /*backdrop-filter: blur(5px) saturate(85%);*/
    margin-top: 1%;
    

}

.introanglais{

    font-size: 1.5vw;
    color: rgb(255, 255, 255);
    display: inline-block;
    max-width: 10%;
    margin-left: 2%;
    padding:0.5%;
    font-family: PoppinsTXT;
    /*backdrop-filter: blur(5px) saturate(85%);*/

}


#sticky {

position: sticky;
  top: 0;

}

#tri {

    font-family: PoppinsIT;
    background-color: rgb(255, 255, 255);
    color: rgb(31, 25, 60);
    font-size:40px; 
    padding-top: 13px;
    padding-bottom: 5px;
position: sticky;
  top: 67px;
  display: flex;
  justify-content: space-between;

}


.liens{

    color:rgb(255, 255, 255);
    font-size:40px;
    text-decoration: none;
    font-family: PoppinsIT;
    
}




.carousel {
    margin: 0 auto;
    max-width:fit-content;
    overflow: hidden;
    display: flex;

    &:hover .group {
      animation-play-state: paused;
    }


  }

  .card {
    color: white;
    justify-content: center;
    align-items: center;
    background-color: rgb(220, 20, 37);
    width: 40vw;
    margin-bottom: 2%;
    padding-top: 13px;
    padding-bottom: 5px;


  }

  .group {
    display: flex;

    will-change: transform; /* Nous devons être sympas avec le navigateur - lui indiquer ce que nous allons animer. */
    animation: scrolling 10s linear infinite;
  }

 @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }


.titre {

    font-family:PoppinsTTL ;
    color: rgb(255, 255, 255);
    font-size: 6vw;

}

.gallery-container{

    margin-top: 5%;

}

.scroll-gallery {
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 10px;
  margin-top: 1%;
  scrollbar-width: none; 

  display: none;
  border-bottom: solid rgb(255, 255, 255) 4px;

}

.scroll-gallery img {
  display: block;
  height: 500px;
  width: auto; 
  object-fit: cover;
  display: inline-block;
}

.scroll-gallery::-webkit-scrollbar {
      height: 8px;
        display: none; 
}

.image-box {
      flex: 0 0 auto;
      scroll-snap-align: start;
      overflow: hidden;    
}

.infos {
     display: flex;
 
    font-size: 3vw;
    color: rgb(255, 255, 255);
    font-family: PoppinsTTL;
padding-left: 5%;
  justify-content: space-between;
  border-bottom: solid rgb(255, 255, 255) 4px;
}


.affichage{

display: none;

}

.collumn{

max-width: 30%;
display: inline-block;
margin: 1.5%;
top: 0;
align-items: top;
vertical-align: top;

}

.collumn img {

  width: 100%;

}



.carousel {

    margin: 0 auto;
    max-width: 700px;
    overflow: hidden;
    display: flex;
    > * {
      flex: 0 0 100%;
    }

}

.Line01{

    background-color: crimson;
    padding: 2%;
    margin-left: 5%;
    margin-top: 5%;
    display:flex;
    outline-color: rgb(255, 255, 255);
    outline-width: 1%;
    width: 120%

}



/* SMARTPHONE MODE PORTRAIT */
@media screen and (orientation: portrait) {



.intro{

    font-size: 20px;
    color: rgb(255, 255, 255);
    display: inline-block;
    max-width: 70%;
    font-family: PoppinsTXT;
    margin-top: 10%;
    margin-left:20%;

}

.introanglais{

    font-size: 20px;
    color: rgb(255, 255, 255);
    display: inline-block;
    max-width: 49%;
    margin-left: 10%;
    font-family: PoppinsTXT;
    margin-top: 10%;
    margin-bottom: 20%;

}



#tri {

    font-family: PoppinsIT;
    background-color: rgb(255, 255, 255);
    color: rgb(31, 25, 60);
    font-size:20px;
position: sticky;
  top: 48px;
  padding-top: 6px;
  padding-bottom: 2px;
  padding-left: 2px;
  display: block;

}



.liens{

    color:rgb(255, 255, 255);
    font-size:20px;
    text-decoration: none;
    font-family: PoppinsIT;
    max-width: 100%%;


}

.scroll-gallery img {
  display: block;
  height: 150px;
  width: auto; 
  object-fit: cover;
}



.collumn{

max-width: 100%;
margin: 1.5%;
top: 0;

}

 .card {
    color: white;
    justify-content: center;
    align-items: center;
    background-color: rgb(220, 20, 37);
    width: 40vw;
    margin-bottom: 2%;
    padding-top: 5px;
    padding-bottom: px;


  }


#tete {

    max-width: 45%;
    vertical-align: top;
    margin-top: 10%;
    display: inline-block;

}


.titres{

display: block;
max-width: 100%;

  padding-left: 2px;

}


}


   
/*
#un {

    position: absolute;
    max-width: 20%;
    margin-left:73% ;
    margin-top:-30%

}
#deux {

    position: absolute;
    max-width: 15%;
    margin-left:57% ;
    margin-top:-13% ;

}

#trois {

    position: absolute;
    max-width: 17%;
    margin-left:47%;
    margin-top:-43% ;


}

#quatre {

    position: absolute;
    max-width: 15%;
    margin-left:60%;
    margin-top:-49% ;


}
*/