: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;
    --font-size-Titre3 : 5.062rem;
    --padding: 10px;

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

body{
    margin: 0;
    font-family: 'Montserrat', sans-serif, bold;
    width: 100vw;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

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

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

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

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


.imgLogo a img{
    width: 20%;
}
.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;
    top: 0;
    margin-top:-35px;
    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;
    }
}
/* ------------------------------------------------------------------------ */



main{
    width: 100%;
    height: auto;
    margin-top: 195px;
    overflow: hidden;    
}

.container1Main{

    position: relative;
    z-index: 10;
    height: 100vh;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    /* background-color:var(--couleuer-fond-clair); */
    color: var(--Font-Color-Clair);
}

.contUnArticle{
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

.titreCont1 h1{
    margin-top: 100px;
    font-size:var(--font-size-Titre3) ;
}

.contArt{
    height: 487px;

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

.contImg{
    width: 40%;
    min-width: 487px;
    height: 508px;
    
    display: flex;
    justify-content: center;

    border-radius: 15px;
    overflow: hidden;
}


.contImg img {
    width: 70%;
    height: 100%;

    border-radius: 15px;
    object-fit: cover;
}


.ContInfoArt {
    display: flex;
    height: 487px;
    /* margin-left: 20px; */
    width: 60%;
}


.rectArt {
    background-color: #DBF0D4;
    width: 5px;
    height: 100%;
    /* margin-bottom: 10px; */
}

.infArt {
    width: 80%;
    margin-left: 10px;
    font-size: calc(0.2rem + 1vw);
}

.infArt p{
    margin-top: 0;
    margin-bottom: 20px;
    padding: 1px;
}



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

.vagBas{
    position: absolute;
    width: 2522px;
    height: 199px;
    left: -591px;
    z-index: -1;
    margin-top: -78px;
}

.a_venir{
    position: relative;
    background-color: #051B1B;
    margin-top: 200px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.titre3{
    display: flex;
    width: 100%;
    margin-top: -30px;
    font-family: 'Montserrat', sans-serif, bold;
    color: white;
    align-items: center;
    text-align: center;
    justify-content: center;

}
#th3{
    display: flex;
    font-size: 5.062rem;
}

.sous_titre{
    display: flex;
    width: 100%;
    margin-top: -60px;
    font-family: 'Montserrat', sans-serif, bold;
    color: white;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.vignettes{
    display: flex;
    width: 100%;
    margin-top: 90px;
    align-items: center;
    justify-content: center;
}

.container3{
    display: flex;
 

}
 h5{
    font-family: 'Montserrat', sans-serif, bold;
    font-size: 2.062rem;
    margin-top: -5px;
    white-space: nowrap;
 }
.bloc1{
    display: flex;
    
}
.info1{
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
  color: white;
  width: 253px;
  height: 250px;
  padding: 15px;
}


  

.trait_text{
    display: flex;
    margin-top: -35px;
}
.trait{
    display: flex;
    width: 25px;
    height: 112px;
    background-color: white;
    margin-right: 10px;
}

.img_bloc1{
    width: 239px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img_bloc1 img{
    object-fit: contain;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
}


.bloc2{
    display: flex;
    margin-left: 5%;
  
}
.img_bloc2{
    width: 239px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img_bloc2 img{
    object-fit: contain;
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.info2{
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    color: white;
    width: 253px;
  height: 250px;
  padding: 15px;
}

.boutonCarroussel{

    width: 201px;
    height: 29px;
    border-radius: 17px;
    margin-top: 18px;
    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 ;
    
}

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

.vagS{
    display: flex;
    z-index: -5;
    margin-top: -10px;
    width: 100%;
    margin-bottom: 50px;
}


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

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

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