@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jomolhari&family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

@font-face {
    font-family: "Suisse";
    src: url("../fonts/suisseIntl/SuisseEcalIntl-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
  }

@font-face {
font-family: "Suisse";
src: url("../fonts/suisseIntl/SuisseEcalIntl-LightItalic.otf") format("opentype");
font-weight: 300;
font-style: italic;
}

@font-face {
    font-family: "Suisse";
    src: url("../fonts/suisseIntl/SuisseEcalIntl.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "NyghtSerif";
    src: url("../fonts/nyghtSerif/NyghtSerif-Regular.woff2") format("woff2");
}

/* --------------------GENERAL START-------------------- */

body {
    width: 100vw;
    height: 100vh;

    font-family: 'NyghtSerif', serif;

    background-color: black;

}

.container {
    width: calc(100vw - 40px);
    height: 100%;
   
    margin: 0 auto;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    
}




.box {
    background-color: rgba(10, 10, 10,0);
    border-radius: 15px;
    
    width: 100%;
    height: 100%;
    margin-bottom: 20px;

    position: relative;
    height: calc(100vh - 80px);

    overflow: auto;
    overflow-x: hidden; 
   
 
}



p {
    font-family: 'Suisse', serif;
    font-weight: 100;
    line-height: 1.4rem;
}

h5 { /* __________NEW */
    padding-top: 3rem;
    font-family: 'Suisse', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    padding-bottom: 15px;
}

.canvas__cursor {
    z-index: -1000;
    position: absolute;

    margin-bottom: 20px;

}

.canvas__gradient {
    filter: saturate(2.3);
    position: absolute;
    z-index: -2000;
    overflow:auto;
    top: 0 ;
    left: 0;
    border: 0;
}

/* --------------------GENERAL RESPONSIVE-------------------- */



/* --------------------GENERAL END-------------------- */



/* --------------------MENU START-------------------- */

.menu {
    width: 100%;
    height: auto;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;

}

.menu__logo {
    width: 100%;
    position: relative;
    display: flex;
    
    justify-content: center;

}

.menu__logo:first-child {
    justify-content: flex-start;
}

.menu__logo:last-child {
    justify-content: flex-end;
}

.menu__logo > svg {
    position: absolute;
}

.menu__logo button {
    background:none; 
    border:none; 
    padding:0;
    cursor: pointer;
    display: flex;


    
}

.menu__logo svg {
    width: calc(76.68313rem / 15);
    height: calc(45.1175rem / 15);

}

.menu__logo__img {
    fill: black;
    cursor: pointer

}

.menu__logo__img__blur {
    fill: white;
    stroke: white;
    stroke-width: 100px;
    z-index: -1;
    filter: blur(8px);




}

.menu__logo__button:hover + .menu__logo__img__blur {
    filter: blur(8px);
    stroke: white;
    stroke: transparent;
    stroke-width: 250px;
    transition: 1s;

}

.menu__ancres{ /* __________NEW */
    width: 100%;
    padding: 1% 2% 1% 2%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.menu__ancres div {

    position: relative;
}

.menu__ancres h4{ /* __________NEW */
    text-decoration: none;

}

.menu__ancres div{ /* __________NEW */
  cursor: pointer;
}

.menu__ancres div:hover .ancre__txt__blur {

    filter: blur(30px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 800;

    transition:  0.5s;
}

.ancre__txt__normal {
    color: black;

}

.ancre__txt__blur{
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    z-index: -100;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 800;
}





/* --------------------MENU END-------------------- */



.description__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -100;
    text-align: center;
    width: 700px;
    opacity: 0;
}

.description__text p {
    font-size: 1.5rem;
    margin-bottom: 25px;
    line-height: 1.3;
    font-weight: 300;
}


.description__text__content {
    position: relative;
}

.description__text__blur {
    position: absolute;
    top: 0;
    left: 0;
  
    color: white;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 400;
    z-index: -101;
}




/* --------------------signature START-------------------- */

.signature__content {
    position: absolute;
    bottom: 0;
    left: 50%;

    transform: translate(-50%, -22px);

    color: rgba(10, 10, 10,1);
  
    z-index: -100;
}

.signature__content__p  {
    font-family: 'NyghtSerif', serif;
    color: rgba(10, 10, 10,1);
    opacity: 0;
    text-align: center;
}


/* --------------------signature END-------------------- */





/* --------------------MAIN START-------------------- */


.main {
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: relative;
}

.main__video {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    z-index: -100;
}

.main__video__background {
    min-width: 100%; 
    min-height: 100%; 

    width: 100vw;
    height: 100vh;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;


}


.main__content {
    position: relative;
    width: 100%;
    height: 100%;
    
    text-align: center;
    text-transform: uppercase;


}


.main__content__normal, .main__content__blur {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    
}


.main__content__normal {
    z-index: 2;
}


.main__content__blur {
    z-index: 1; 

    color: white;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 700;
}

.main__content__subtitle {

    font-size: 5rem;

}


.main__content__title {

    /* font-size: 14rem; */
    font-size: 14rem;


}


.main__content__paragraph {
    font-weight: 400;
    line-height: 1.2;
    font-size: 1.6rem;
    width: 35%;
    margin: 0 auto;
    padding-top: 30px;
    display: none;


}



/* --------------------MAIN END-------------------- */


/* --------------------HISTORY START-------------------- */


.history {
    background-color: rgba(0, 0, 0,1);
    width: 100%;
    height: 200%;
    color: white;
    
    display: flex;
    flex-direction: column;


}

.history__text {
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    height: 50%;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}


.history__text h4 {
    font-family: 'Suisse', sans-serif;
    font-weight: 100;
    font-size: 1.6rem;
    width: 100%;

    margin-bottom: 10px ;

   
}

.history__text h3 {

    width: 100%;
    font-size: 4.5rem;
}

.history__slider {
    height: 50%;
    width: 100%;
    background-color: black;
    overflow-x: auto;
    overflow-y: hidden; /* Empêche le défilement vertical */
    position: relative;

}

.history__stlide__timeline {
    width: max-content;
    height: 1px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    overflow-x: hidden;
}

.history__slider__wrapper {
    display: flex;
    height: 100%;
    padding: 0 200px;
    width: max-content;
    align-items: center;
    gap: 200px;

}

.history__slider__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.history__slider__slideV {
    background-color: transparent;
    height: 500px;
    width: 500px;
    border-radius: 15px;
    position: relative;
}

.history__slider__slideH {
    background-color: blue;
    height: 500px;
    width: 500px;
    border-radius: 15px;
    position: relative;
}

.history__slider__slide__text {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.history__slider__slide__text__content {
    position: relative;

    z-index: 1000;
    background-color: blue;


}

.history__slider__slide__text p {
    font-family: 'NyghtSerif', serif;  
    font-size: 3rem;
}

.history__slider__slide__text__normal {
    color: #000;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    z-index: 1;
}

.history__slider__slide__text__blur {
    color: #fff;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 0;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 400;
    
}




.history__slider__slideV img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
   
}


.history__slider__slideH img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
 
}



.history__slider__slide__normal {
    position: absolute;
    top: 0;
    z-index: 10;
}

.history__slider__slide__blur {
    height: 500px;
    width: 500px;
    border-radius: 15px;
    background-color: transparent;
    position: absolute;
    top: 0;
  
}

.history__slider__slideV:hover .history__slider__slide__blur {
    filter: blur(20px);
    background-color: white;
    stroke: white;
    stroke-width: 400px;
    transition: 0.5s;

}

.history__slider__slideH:hover .history__slider__slide__blur {
    filter: blur(20px);
    background-color: white;
    stroke: white;
    stroke-width: 400px;
    transition: 0.5s;

}


.full-screen-container {
    position: absolute;
    left: 0;
    top: 60px;

    background-color: rgba(0, 0, 0, 1);

    border-radius: 15px; 

    width: 100%;
    height: calc(100vh - 80px);

    z-index: -9999;
    opacity: 0%;

}

.timeline__text {
    
    position: absolute;
    right: -1000px;
    top: 60px;
    background-color: transparent;
    height: calc(100vh - 80px);
    z-index: -9999;
    opacity: 0%;
    border-radius: 15px; 


}

.timeline__text__content {
    position: relative;
    width: 100%;
    display: none;
 
}

.timeline__text__content__normal {
    position: absolute;
    width: 100%;
}

.timeline__text__content__blur {
    position: absolute;
    color: white;
    width: 100%;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;

    z-index: -10;
}



.timeline__text h3 {
    font-size: 12rem;
}

.timeline__text h4 {
    font-size: 4rem;
    margin-bottom: 25px;
}

.timeline__text p {
    font-size: 1.5rem;

    line-height: 1.3;
    font-weight: 300;

}

.timeline__text__content__blur p {
    font-weight: 300;

}


.full-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
   
}





/* --------------------HISTORY END-------------------- */

/* --------------------JIM JONES START-------------------- */
.jim_jones {
    background-color: transparent;
    width: 100%;
    height: 220%;
    position: relative;

}

.jim_jones__video {
    position: absolute;
    width: 100%;
    height: 50%; 
    overflow: hidden;
    z-index: -100;
}

.jim_jones__video__background {
    /* Make video to at least 100% wide and tall */
    min-width: 100%; 
    min-height: 100%; 

    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: 100vw;
    height: 100vh;

    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
}

.jim_jones__gradient {
    width: 100%;
    height: 114%;
    transform: translateY(-12%);
    background: linear-gradient(rgba(0, 0, 0, 0)45% , rgb(0, 0, 0)55% 90%);
}

.jim_jones__content {
    z-index: 300;
    text-align: center;
    text-transform: uppercase;

}


.jim_jones__content__normal, .jim_jones__content__blur {
    position: absolute;

    width: 100%;
    
}


.jim_jones__content__normal {
    z-index: 200; /* Plus élevé pour être au-dessus */
}


.jim_jones__content__blur {
    z-index: 100; /* Plus bas pour être en dessous */

    color: white;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 700;
}

.jim_jones__content__title {

    font-size: 15rem;
    margin: 100px 0px 100px 0px;
}

.jim_jones p {
    color: white;
    text-transform: none;
    width: 700px;
    margin: 0 auto;
    font-size: 1.5rem;
    margin-bottom: 25px;
    line-height: 1.3;
    font-weight: 300;

}

.jim_jones img {
    width: 500px;
    margin-bottom: 150px;
}

.jim_jones__content__blur img {
    filter: blur(15px);
}




/* --------------------JIM JONES END-------------------- */

/* --------------------TRIP START-------------------- */

.trip {
    background-color: black;
    width: 100%;
    height: 600%;


}

.trip__content {
    width: 90%;
    margin: 0 auto;
    height: 100%;

    background-color: black;
}

.trip__content__intro {
    height: calc(100% / 6);
    width: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}

.trip__content__intro h4 {
    font-family: 'suisse', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 10px ;
    color: #fff;
    text-align: center;


}

.trip__content__intro h3 {
    color: #fff;
    font-size: 4.5rem;
    text-transform: uppercase;
}








.trip__content__presentation {
    height: calc(100% / 6);
    width: 100%;
    display: flex;
    background-color: #000;
    justify-content: center;
    align-items: center;
}


.trip__content__presentation__image{
    width: 50%;
    height: 60%;
  
    border-radius: 15px;
    padding: 10px;
    background-image: url(../res/images/trip/trip1_m2.png); /* __________NEW */
    background-size: cover; /* __________NEW */

}

.trip__content__presentation__texts{
    width: 50%;
    height: 60%;
    padding-left: 15px;
   

    color: #fff;

}

.trip__content__presentation__texts h4{
    font-family: 'suisse', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    padding-bottom: 15px;
    text-transform: uppercase;
}

.trip__content__presentation__texts p{
    padding-bottom: 15px;

}









.trip__content__activities {
    height: calc(100% / 6);
    width: 100%;
    background-color: #000;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

}

.trip__content__activities__slider_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #fff;
}

.trip__content__activities__slider_head__title {
    font-family: 'Suisse', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    padding-bottom: 15px;

    text-transform: uppercase;

}

.trip__content__activities__slider_body {
    width: 100%;

    display: flex;
    justify-content: space-between;
}

.trip__content__activities__slider_body__case {
    width:  calc(25% - 10px);


}

.trip__content__activities__slider_body__case__img {
    width: 100%;
    height: 400px;
    border-radius: 15px;
    background-color: #fff;

}

#activities_01{ /* __________NEW */
    background-image: url(../res/images/trip/ecosystem1_m.png);
    background-position: center;
    background-size: cover;
}

#activities_02{ /* __________NEW */
    background-image: url(../res/images/trip/yoga1_m.png);
    background-position: center;
    background-size: cover;
}

#activities_03{ /* __________NEW */
    background-image: url(../res/images/trip/catamaran1_m.png);
    background-position: center;
    background-size: cover;
}

#activities_04{ /* __________NEW */
    background-image: url(../res/images/trip/dinner2_m.png);
    background-position: center;
    background-size: cover;
}

.trip__content__activities__slider_body__case p {
    text-align: center;
    margin: 0 auto;
    padding-top: 15px;
    width: 60%;
    color: #fff;
}









.trip__content__informations {
    height: calc(100% / 6);
    width: 100%;

    background-color: black;


    display: flex;


    justify-content: center;
    align-items: center;

}


.trip__content__informations {
    height: calc(100% / 6);
    width: 100%;
    display: flex;
    background-color: #000;
    justify-content: center;
    align-items: center;
}


.trip__content__informations__image{
    width: 50%;
    height: 60%;
    background-image: url(../res/images/map.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    padding: 10px;

}


.trip__content__informations__texts{
    width: 50%;
    height: 60%;
    padding-left: 15px;
   

    color: #fff;

}


.trip__content__informations__texts h4{
    font-family: 'Suisse', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    padding-bottom: 15px;
    text-transform: uppercase;
}


.trip__content__informations__texts p{
    padding-bottom: 15px;

}




.trip__content__packages {
 

    background-color: black;
    width: 100%;
    height: calc(100% / 6);

    display: flex;
    flex-direction: column;
    justify-content: center;


}


.trip__content__packages__title h4{
    font-family: 'Suisse', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    padding-bottom: 15px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;

}


.trip__content__packages__body {
    display: flex;


}


.trip__content__packages__body__case {
    width: calc(100% / 3);


}


.trip__content__packages__body__case:nth-child(2) {
    margin: 0 15px 0 15px ;
}


.trip__content__packages__body__case__image {
    background-color: white;
    border-radius: 15px;
    height: 400px;
    width: 100%;

}

#package_01{ /* __________NEW */
    background-image: url(../res/images/trip/cabane1_m.png);
    background-position: center;
    background-size: cover;
}
#package_02{ /* __________NEW */
    background-image: url(../res/images/trip/cabane2_m.png);
    background-position: center;
    background-size: cover;
}
#package_03{ /* __________NEW */
    background-image: url(../res/images/trip/cabane3_m.png);
    background-position: center;
    background-size: cover;
}



.trip__content__packages__body__case__text {
    text-align: center;
    font-family: 'Suisse', sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    width: 60%;
    margin: 0 auto;
    padding-top: 15px;
    color: white;
    
}


.trip__content__packages__body__case__text__price{ /* __________NEW */
    text-align: center;
    font-family: 'Suisse', sans-serif;
    font-weight: 100;
    font-size: 0.9rem;
    width: 60%;
    margin: 0 auto;
    padding-top: 15px;
    color: white;
}




.trip__content__clients {
    width: 100%;
    height: calc(100% / 6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #000;

}


.trip__content__clients__box {
    width: 100%;
    height: 500px;
    background-image: url(../res/images/trip/trip1_m.png);
    background-size: cover;
    background-position: center;
    border-radius: 15px;
}


.trip__content__clients__box__text {
    display: flex;
    position: relative;


    background-color: transparent;

    height: 100%;
    width: 70%;

    margin: 0 auto;

    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.trip__content__clients__box__text__blur {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    position: absolute;



}


.trip__content__clients__box__text__normal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    position: absolute;



    background-color: transparent;

    z-index: 100;
}


.trip__content__clients__box__text__normal p:nth-child(1) {
    color: black;
    font-size: 2.3rem;
    padding-bottom: 25px;
    line-height: 2.3rem;
    font-style: italic;
}


.trip__content__clients__box__text__blur p:nth-child(1) {
 
    font-size: 2.3rem;
    padding-bottom: 25px;

    color: white;

    filter: blur(5px);

    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;

    line-height: 2.3rem;
    font-style: italic;

}

.trip__content__clients__box__text__blur p:nth-child(2) {


    color: white;

    filter: blur(5px); /* __________NEW */

    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;

}

/* SLIDER ---------------*/ /* __________NEW */
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}







/* --------------------TRIP END-------------------- */


/* --------------------DETAILS START-------------------- */


.details {
    background-color: transparent;
    width: 100%;

    position: relative;

}

.details__intro {
    width: 100%;
    height: 100%;
    position: relative;
}

.details__intro__video {
    width: 100%;
    height: 100vh; 
    overflow: hidden;
    z-index: -100;

}

.details__intro__video__background {
    /* Make video to at least 100% wide and tall */
    min-width: 100%; 
    min-height: 100%; 

    /* Setting width & height to auto prevents the browser from stretching or squishing the video */
    width: 100%;
    height: 100%;

    /* Center the video */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
}


.details__intro__content {
    z-index: 300;
    height: 100%;
    width: 90%;

    text-align: center;
    text-transform: uppercase;

    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-12%);
   
    margin: 0 auto;



}


.details__intro__content__blur {
    position: absolute;
    
}


.details__intro__content__normal {
    z-index: 200; /* Plus élevé pour être au-dessus */
}


.details__intro__content__blur {
    z-index: 100; /* Plus bas pour être en dessous */

    color: white;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 700;
}

.details__intro__content__title {
    font-size: 11rem;


}

.details__intro__gradient {
    height: 10%;
    width: 100%;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
    position: absolute;
    bottom: 0;
}


.details__content {
    width: 100%;
    padding: 10% 0 20% 0;
    background-color: black;
    border-radius: 0px 0px 15px 15px;
}

.details__content__container {
    width: 90%;
    height: 100%;
    margin: 0 auto;



    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.details__content__container__row {

    width: 100%;
    height: 300px;

    display: flex;
    justify-content: center;
    margin: 50px 0 50px 0;
    

}

.details__content__container__row__case {
    width: 300px;
    height: 300px;

    margin: 0 50px 0 50px;
    border-radius: 100%;


}



.card {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: relative;
    transition: transform 1.5s; /* Transition douce pour la rotation */
    transform-style: preserve-3d;

  }

  .front#icon_01{/* __________NEW */
    background-image: url(../res/images/details/camera.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
 
}
.front#icon_02{/* __________NEW */
    background-image: url(../res/images/details/computer.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);


}
.front#icon_03{/* __________NEW */
    background-image: url(../res/images/details/food.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

   
}
.front#icon_04{/* __________NEW */
    background-image: url(../res/images/details/animal.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}
.front#icon_05{/* __________NEW */
    background-image: url(../res/images/details/car.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}
.front#icon_06{/* __________NEW */
    background-image: url(../res/images/details/coffee.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}
.front#icon_07{/* __________NEW */
    background-image: url(../res/images/details/rich.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}
.front#icon_08{/* __________NEW */
    background-image: url(../res/images/details/work.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}
.front#icon_09{/* __________NEW */
    background-image: url(../res/images/details/wifi.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}
.front#icon_10{/* __________NEW */
    background-image: url(../res/images/details/smoke.png);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);

    
}

.stop{/* __________NEW */
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../res/images/details/panneau-stop.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 115%;
    height: 100%;
    width: 100%;
    border-radius: 30em;
    backface-visibility: hidden;
}


  
  .front,
  .back {
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: white;
    height: 100%;
    width: 100%;
    font-size: 1.5em;
    border-radius: 50%;
    backface-visibility: hidden;

  }

  .back {
    position: relative;
    transform: rotateY(180deg);
    bottom: 100%;
    background-color: #fea3f6; /* __________NEW */
}

  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }


.card__text {
    position: relative;
    width: 70%;

}

.card__text__normal {
    color: #000;
    position: absolute;
    top: 0;
    width: 100%;
  


}

.card__text__blur {
    color: #fff;
    position: absolute;
    width: 100%;
   

    top: 0;
    z-index: -10;

    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;



}



/* --------------------DETAILS FIN-------------------- */

/* --------------------NEWSLETTER START-------------------- */



.newsletter {
    background-color: rgba(0, 0, 0,0);
    height: 150%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
  
}



.newsletter__content {
    position: relative;
    width: 100%;
    height: 50%;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    z-index: 1111;


}


.newsletter__content__normal, .newsletter__content__blur {
        position: absolute;


        width: 100%;
    
}

.newsletter__content__normal {
    z-index: 2; 
}


.newsletter__content__blur {
    z-index: 1;

    color: white;
    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 700;
}

.newsletter__content__subtitle {
    font-family: 'Suisse', sans-serif;
    font-weight: 300;
    font-size: 1.6rem;

    margin-bottom: 10px ;
}

.newsletter__content__title {
    font-size: 10rem;
    width: 700px;
    margin: 0 auto;
    
}


.newsletter__content__form {
    display: flex;
    margin-top: 5vh;
    justify-content: center;
  
 
}

.newsletter__content__form__field input{
    border-radius: 30px;
    border: none;
    height: 50px;
    width: 700px;
    padding-left: 30px;

    color: rgba(0, 0, 0,1);
    
}

input::placeholder{
    color: rgba(0, 0, 0,1);
    font-size: 1rem ;

    font-family: 'Suisse', sans-serif;
  }

.newsletter__content__form__submit input{
    border-radius: 30px;
    border: none;
    height: 50px;
    width: 200px;
    margin-left: 10px;


    background-color: rgba(0, 0, 0,1);
    color: white;
    font-size: 1rem;
    font-family: 'Suisse', sans-serif;

}

.newsletter__content__blur .newsletter__content__form__submit input {
    background-color: rgba(255, 255, 255,1);
}

/* --------------------NEWSLETTER END-------------------- */

/* --------------------FOOTER START-------------------- */

.footer {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;

}

.footer__content {
    position: relative;
    text-transform: uppercase;
}


.footer__content h3{
    font-size: 15rem;
    width: 1000px;
    text-align: center;
}

.footer__content__text__blur {
    position: absolute;
    top: 0;

    filter: blur(8px);
    text-shadow:
    -5px -5px 0 #fff,  
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px  5px 0 #fff;
    font-weight: 800;
    color: white;
    z-index: -100;
}












/* ------------RESPONSIVE------------ */

@media screen and (max-width: 600px) {

    .menu__ancres {
        display: none;
        width: 0%;
        color: #fea3f6;
    }

    .main__content__subtitle {
        font-size: 1.5rem;
    }
    .main__content__title {
        font-size: 3rem;
    }
    
    

    .history h3 {
        font-size: 3rem;
        width: 90%;

    }

    .history h4 {
        font-size: 1rem;
    }

    .history__slider__slideV {
        width: 300px;
        height: 300px;
    }

    .history__slider__slideH {
        width: 300px;
        height: 300px;
    }
       



    .jim_jones {
        height: 300%;
    }

    .jim_jones__content__title {
        font-size: 3rem;
    }


    .jim_jones__content img {
        width: 300px;
    }

    .jim_jones__content p {
        font-size: 1rem;
        width: 90%;
 
    }




    .trip {
        height: auto;
    }

    .trip__content {
        height: auto;
    }

    .trip__content__intro {
        height: 100vh;
  
    }




    .trip__content__intro h4{
        font-size: 1rem;
    }

    .trip__content__intro h3{
        font-size: 3rem;
        width: 90%;
        text-align: center;
    }

    .trip__content__presentation {
        flex-direction: column;
        height: auto;
        padding-bottom: 500px;
 
    }

    .trip__content__presentation__image {
        width: 100%;
    


    }

    .trip__content__presentation__texts {
        width: 100%;
        text-align: center;
    }


    .trip__content__activities {
        flex-direction: column;
        height: 100vh;
        padding-top: 500px;
    }

    .trip__content__activities__slider_body__case {
        width: 100%;
        margin-bottom: 50px;
    }

    .trip__content__activities__slider_body {
        flex-direction: column;
    }


    .trip__content__informations {
        height: 100vh;
        padding-top: 800px;
        flex-direction: column;
        width: 100%;
    }

    .trip__content__informations__image {
        width: 100%;
        margin-bottom: 20px;
    }

    .trip__content__informations__texts {
        width: 100%;
    }

    .trip__content__packages {
        height: 100vh;
        padding-top: 700px;
        flex-direction: column;
    }

    .trip__content__packages__body {
        flex-direction: column;
    }

    .trip__content__packages__body__case { 
        width: 100%;
        margin-bottom: 40px;
    }

    .trip__content__packages__body__case:nth-child(2) {
        margin: 0;
        margin-bottom: 40px;

    }


    .trip__content__clients {
        height: auto;
        margin-top: 700px;
        padding-bottom: 300px;
    }

    .trip__content__clients__box__text__normal p:nth-child(1) {

        font-size: 1.5rem;
        padding-bottom: 25px;
        line-height: 1.5rem;

    }
    
    
    .trip__content__clients__box__text__blur p:nth-child(1) {
     
        font-size: 1.5rem;
        padding-bottom: 25px;

        line-height: 1.5rem;


    }

    .details {
        height: auto;

    }

    .details__content {
        height: 200%;

    }

    .details__content {
        height: auto;
        padding: 0;
        padding-bottom: 300px;
    }

    .details__content__container {
        height: auto;
    }
    .card {
        width: 200px;
        height: 200px;
    }


    .details__intro__content__title {
        font-size: 3rem;
    }

    .details__content__container__row {
        flex-direction: column;
        margin: 0
    }

    .details__content__container__row__case {
        width: 200px;
        height: 200px;
    }
    
    .newsletter__content__title  {
        font-size: 4rem;
        width: 70%;
    }


    .footer__content h3{
        font-size: 4rem;
        width: 70%;
        margin: 0 auto;
    }

}