:root {
    --Font-Color-Sombre: rgb(255, 255, 255);
    --Font-Color-Clair: rgb(0, 0, 0);
    --couleuer-fond-sombre: #051B1B;
    --font-size-Titre-Geant:7.625rem;
    --font-size-Titre2: 2.250rem;
    --padding: 10px;

    --couleuer-rect-titre2: #DBF0D4;/* Couleurs rectangle */
}
    


body{
    margin: 0;
    font-family: 'Montserrat', sans-serif, bold;
}

/* Pour cacher la barre laterale de scroll */
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}
/* header{
    background-color: white;
    opacity:6%; 
} */

header nav{
    width: 90%;
    margin-left: 5%;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    position: fixed;
    z-index: 1000;
    filter:drop-shadow(2px 4px 6px black);
}

.filtreNavBar{
    position: fixed;
    width: 96vw;
    height: 40px;
    border-radius: 10px;
    z-index: 99;

    margin-left: 2%;
    margin-top: 29px;

    background-color: white;
    opacity: 6%;
}


.imgLogo a img{
    width: 8%;
    min-width: 58px;
    min-height: 27px;
}
.imgLogo a{
    text-decoration: none;
    color: var(--Font-Color-Sombre);
}
.liensNav{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.liensNav a{
    text-decoration:  none;
    color: var(--Font-Color-Sombre);
}

.liensNav a:hover{
    color: violet;
    margin-bottom: 1px;
}

.liensNav p{
    margin-left: 15px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

.vagHaut {
    display: flex;
    position: absolute;
     width: 2722px;
     height: 199px;
     left: -501px;
   margin-top:-20px;
     z-index: 50;

}


/* ------------------------------------- Partie animation cigarrette-------------------------------------------- */
#falling-container{
    position: fixed;
    width: 1vw;       
    height: 120vh;
    z-index: 1;
    right: 0;
}

.cigarette{
    position: absolute;
    top: 50px;
    right: 0;
    width: 50px;
    height: 100px;
    background: url('/media/cigarette2.png') no-repeat center center / contain; 
    animation: fall 5s linear infinite, rotate 5s linear infinite, vanish 5s;
    z-index: 1;
}

@keyframes fall {
    0% {
        top: -200px;
    }
    100% {  
        top: 100vh;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes vanish {
    0% {
        opacity: 100;
    }

    60%{
        opacity: 100;
    }

    100% {
        opacity: 0;
    }
}

/* ------------------------------------------------------------ */







/* ----------------- Contenu Accueil -----------------  */

/* Section 1 */
.container1{
    height: 115vh;
    width: 100vw;
    /* background-image: url(/media/baniere1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; */
    background-color:var(--couleuer-fond-sombre);
    color: var(--Font-Color-Sombre);
}
.baniere{
    position:relative;
    width: 100vw;
}

.pourTitreGeant {
    position: absolute;
    z-index: 5;
    width: 100%;
    top:71%;
    text-align: center;
    font-size: calc( 7.365rem + 3vw); /* Adjusts the font size based on the viewport width */
   
}

#faisTon {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    white-space: nowrap;
}

#choix {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.baniere p{
    position: absolute;
    left: 150px;
    bottom: 0;
}
#baniereDeFond{
    width: 100vw;
    /* position: relative;
    z-index: 0; */
}
#paneauxImg{
    width: 100vw;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
}

#ptiteBarreSousText{
    position: absolute;
    height: 1px;
    width: 71px;
    left: 221px;
    bottom: 16px;
    background: white;
}



.pt2{
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    right: 200px;
    bottom: -70px;
}
.pt2 div{
    margin-left: 20px;
    width: 150px;
}
.infosPt2 img{
    width: 100%;
}

/* Section 2 */
.container2{
    position: relative;
    height: 120vh;
    background-color:var(--couleuer-fond-clair);
    /* background-image: url(/media/fondBlancGranuleux.png); */
    z-index: 1;
    overflow: hidden;

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

.vageHaut{
    position: absolute;
    width: 2722px;
    height: 199px;
    left: -201px;
    top:-135px ;
    z-index: 1;
}

.sectTitreCont2{
    display: flex;
    align-items: center;
    margin-top: 50px;
}

.rectAvTitreCont2_01{
    height: 59px;
    width: 10px;
    background-color: var(--couleuer-rect-titre2);
    margin-left:93px ;
    margin-right: 15px;
}

/* Pour un rectangle du carroussel           --------- HAUT */


/* Partie carroussel */

.contCarroussel{
    width: 90vw;
    height: 700px;
    gap: 3vw;
    margin-right: auto;
    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-x: scroll;

    /* background-color: #4ca9a9; */
    color: var(--Font-Color-Sombre);
}

.contCarroussel::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.rectCarroussel{
    height: 623px;
    width: 30vw;
    min-width: 382px;
    border-radius: 25px;
    box-sizing: content-box;
    transition: 1s ease-in;
    /* background: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #051B1B 70.9%); */
}

/* .rectCarroussel:hover{
    transform: translateX(-20px);
} */

/* Pour gérér la hauteur de chaque carré */

.rectCarroussel:nth-child(odd) {
    transform: translateY(-20px);
   
}

.rectCarroussel:nth-child(even) {
    transform: translateY(+20px);
}

.ImageCarroussel{
    height: 623px;
    width: 380px;
    border-radius: 25px;
    position: absolute;
    z-index: -1;
}

.degradeeCarroussel{
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff00 40%, #051B1B 78.9%); 
    border-radius: 25px;

    transition: transform 0.5s ease-in-out;

    position: relative;
    z-index: 2;
}

.TitreTextBouton{
    /* position: relative; */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 559px;
    padding-left: 40px;
    padding-right: 40px;
    /* z-index: 2; */
}
 
.TitreTextBouton h2{
    margin: 0;
    font-size: var(--font-size-Titre2);

}

.TitreTextBouton p{
    margin-top: 10px;
}

.TitreTextBouton a{
    text-decoration: none;
    color: var(--Font-Color-Sombre);
}

.boutonCarroussel{

    width: 301px;
    height: 29px;
    border-radius: 17px;
    margin-top: 2px;
    padding: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: transparent;
    border: 1.5px solid white;
    color: var(--Font-Color-Sombre);
    transition: transform 0.3s ;
    
}

.DivBouton{
    display: flex;
    justify-content: center;
    align-items: center;
}


button.prev, button.next {
    position: absolute;
    height: 50px;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
}

button.prev {
    left: 10px;
}

button.next {
    right: 10px;
}

button.prev:hover, button.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


.boutonCarroussel:hover{
    background-color: #232929;
    transform: translateY(-2.3px);
}


.boutonsChangementRect{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center ;
    height: 20px;
}
.miniBoutons{
    width: 10px;
    width: 10px;
    margin: 3px;
}
.minicercle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #b8b8b8   ;
}
.minicercle:active{
    border: 3px solid black;
    width: 7px;
    height: 7px;
}
.minicercle::after{
    border: 3px solid black;
    width: 7px;
    height: 7px;
}



.vageBas{
    position: absolute;
    width: 2722px;
    height: 199px;
    left: -1001px;
    bottom:-135px ;
    z-index: 1;
   
   
}


/* Section 2 */
.container3{
    height: 160vh;
    width: 100vw;
    background-image: url(/media/FormePlusGrandeStats.svg);
    background-repeat: no-repeat;
    background-size:cover;

    /* background-color:var(--couleuer-fond-sombre); */
    color: var(--Font-Color-Sombre); /* Couleur de la fonte sur fond sombre*/
    z-index: 2;
    /* box-sizing: content-box; */
}

.cont2DansCont3{
    position: relative;

    top: 34%;
    transform: translateY(-50%);

    width: 100vw;
    height: auto;
    z-index: 100;
}


#formeFondStat{
    position: absolute;
    width: 100vw;
    z-index: -1;
}

.sectTitre{
    display: flex;
    align-items: center;
}

.rectAvTitre{
    height: 59px;
    width: 10px;
    background-color: var(--couleuer-rect-titre2);
    /* margin-left:67px ; */
    margin-right: 15px;
}
.gigantTitle{
    font-size: var(--font-size-Titre-Geant);
    margin: 0;
    margin-left: 104px;
    z-index: 5;
}

#partStats02{
    position: relative;
    text-align: end;
    right: 100px;
    top:140px;
}

.sectTitre{
    position: relative;
    width: 500px;
    top: 160px;
    left: 30%;
    transform: translateX(-40%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ensemblerectT{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
}
 
#imageGraphe{
    position: relative;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: 65%;
}
.mainPtiTitre h2{
    font-size: var(--font-size-Titre2);
}

.textClarif table td{
    padding: 3px;
    padding-right: 15px;
    margin-right: 23px;
}



.DivFleches{
    position: relative;
    z-index: 2;
}

#fg{
    position: absolute;
    bottom:20px;
    left: 5%;
    transform: rotateX(180deg);
    rotate: 260deg;

    z-index: 2;
}

#fd{
    position: absolute;
    bottom:-168px;
    left: 50%;
    rotate: 349deg;
    
    z-index: 2;
}

/* Section video */

.cont4{
    height: 80vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}





/* ------------------------- Partie footer ------------------------- */
footer{
    position: relative;
    height: 60vh;

    background-image: url(/media/footermegots.png);
    background-size: cover;
    /* box-sizing: content-box;     */

    /* z-index: 1000; */
}

.mainFooter{
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    display: flex;
}
.mainFooter div{
    width: 20vw;
    margin-right: 20px;
}

.fCampagne ul{
    list-style: none;
    padding-left: 0;
}
.fCampagne ul li a{
    text-decoration: none;
    color: black;
}
.fCampagne ul li a:hover{
    color: rgb(0, 114, 114);
}

/* .mainFooter div:first-child{
    width: 20vw;
    margin-right: 0px;
} */
.mainFooter div h2{
    margin-top: 0;
    /* text-align: start; */
}

.fLogo img{
    width: 60%;
}

/* ----------------------------------- media querry pour telephone -----------------------------------*/

/* Media Query for mobile devices */
@media (max-width: 768px) {
    /* Adjust the navigation bar */
    header nav {
        flex-direction: row;
        padding-top: 20px;
        width: 100%;
        margin-left: 0;
        position: absolute;
        font-size:0.5rem ;
    }

    .filtreNavBar {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        position: absolute;
    }

    .liensNav {
        flex-direction: row;
        align-items: flex-start;
    }

    .imgLogo a img{
        min-width: 32px;
        min-height: 15px;
    }
    .liensNav p {
        margin-left: 0;
        padding: 5px;
    }

    /* Adjust the banner section */
    .baniere {
        height: auto;
        text-align: center;
    }

    .pourTitreGeant {
        font-size: calc(2rem + 2vw);
        top: 50%;
        transform: translateY(-50%);
    }

    #faisTon,
    #choix {
        position: static;
        transform: none;
    }

    .baniere p {
        left: 50%;
        transform: translateX(-50%);
    }

    #paneauxImg {
        display: none; /* Hide the large image for smaller screens */
    }

    .pt2 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        right: 0;
        /* transform: translate(10px, -1px); */
        text-align: center;
        height: 100%;
    }

    .pt2 div {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .gigantTitle{
        font-size: 5rem ;
        margin-left: 15px;
    }

    /* Adjust the carrousel section */
    .contCarroussel {
        flex-direction: row;
        gap: 10px;
        padding: 27px;
        /* overflow-x: auto; */
    }

    .rectCarroussel:nth-child(odd) {
        transform: translateY(0);
       
    }
    
    .rectCarroussel:nth-child(even) {
        transform: translateY(0);
    }


    /* Footer adjustments */
    footer {
        height: auto;
        padding: 20px 0;
    }

    .mainFooter {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .mainFooter div {
        width: 90%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}