*{
    padding: 15 0 0 15;
    
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;1,6..12,800&display=swap');


body{
    /*margin-left: 50px;
    margin-right: 50px;*/
    background-color: rgb(17, 13, 42);
}

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    column-gap: 20px;
    row-gap: 50px;
}







/**********************HEADER************************/

header{
    width: 100%;
    height: 90px;
    background-color: rgb(17, 13, 42);
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.logo{

    flex-basis: 10%;
    justify-content: flex-start;
    max-width: 200px;
    padding: 10px;
    filter: invert(23%) sepia(84%) saturate(5192%) hue-rotate(352deg) brightness(100%) contrast(134%);
}

.cat{
    filter: invert(23%) sepia(84%) saturate(5192%) hue-rotate(352deg) brightness(100%) contrast(134%);
    width: 10%;
}

.fa-solid.fa-bars{
    display: none;
}

.menu{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: auto;
    flex-grow: 2;
}

ul, a{
    list-style-type: none;
    text-decoration: none;
    color: red;
    padding: 20px;
    /*font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;*/
    font-family: Bebas Neue, sans-serif;
    font-size: 16pt;

}

a:hover{
    color: rgb(255, 255, 255); 
}

/*******************END HEADER************************/

.btn{
    width: 50px;
    height: 50px;
    border: solid 3px white;
    position: fixed;
    z-index: 3;
    bottom: 52px;
    right: 48px;
    border-radius: 30px;
    background-color: black;
    cursor: pointer;
    
}

.btn i{
    font-size: 30pt;
    color: #ffffff;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 3;
    text-align: center;
}

.titre1{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;    
    align-content: space-between;
    position: relative;
    margin-top: -70px;

}


.titre-mobile{
    display: none;
}

h1{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
    font-family: 'Berkshire Swash', serif;
    font-size: 5em;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.232);
    margin-right: 10px;
    
}


.quat{
    display: flex;
    transform: translate(-50%, -48%) scale(1, 1.2);
    position: relative;
    top: 33px;
    margin-left: 30px;

}

.zero, .zero1{
    display: flex;
    transform: translate(-50%, -50%) scale(1, 1.3);
    position: relative;
    top: 42px;
}

.random-change{
    height: 100vh;
    width: 100%;
    display: flex;
    object-fit: cover;
    align-items: center;
    justify-content: space-around;
    margin-top: -50px;   
}

.bio{
    /*font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;*/
    font-family: 'Nunito Sans', sans-serif;
    font-style: italic;
    z-index: 2;
    position: absolute;
    font-size: 2em;
    top: 700px;
    background-color: rgba(0, 0, 0, 0.232);
    border: 0px;
}



/******************RESEAUX SOCIAUX****************/

.social{
    width: 100%;
    background-color: #AF1917;
    display: flex;
    justify-content: center;
    align-content: space-between;
    padding: 10px;
    object-fit: contain;
}

i{
    font-size: 30pt;
    padding: 10px;
    color: rgb(0, 0, 0);
}

i:hover{
    font-size: 30pt;
    padding: 10px;
    color: rgb(255, 255, 255);
}

/***************END RESEAUX SOCIAUX***********************/

#cat-mobile{
    display: none;
}


.sous-titre{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 3%;
}

.sous-titre img{
    width: 4%;
    filter: invert(100%) sepia(8%) saturate(262%) hue-rotate(243deg) brightness(113%) contrast(100%);

}


.sous-titre :nth-child(n + 5){
    transform:scaleX(-1);
}



h2{
    font-family: 'Berkshire Swash', serif;
    /*font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;*/
    text-align: center;
    color: white;
    font-size: 42pt;
    padding-left:60px;
    padding-right:60px;
    text-decoration: underline red;
}



/*h3{
    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    color: rgb(93, 29, 29);
    font-size: 20pt;
}*/

.croquette{
    font-size: 3em;
    font-family: 'Berkshire Swash', serif;
}

p{
    /*font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;*/
    font-family: 'Nunito Sans', sans-serif;
    text-align: center;
    color: white;
    font-size: 16pt;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 5%;
    margin-right: 5%;
}

.groupe{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    object-fit: contain;
    max-width: 100%;
    gap: 0px;
    justify-content: center;
}

.groupe figure > img{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    object-fit: contain;
    max-width: 70%;
}

figure{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 24%;
    margin: 0px;
}

/*figure:hover{
    background-image: 
           url("./images/yann-le-ligeour/format-webp/DSC_0008-©YannLeLigeour.webp");
}*/

figcaption{
    text-align: center;
    font-family:  'Nunito Sans', sans-serif;
}


/*.nom{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: solid 1px red;
    column-gap: 2.5%;
    text-align: center;
    justify-content: space-around;
}*/

.groupe b{
    display: flex;
    color: #ffffff;
    font-size: 11pt;

}

.videos{
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 60%;

    object-fit: contain;
}





.photo{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}


.galerie{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    object-fit: contain;
    width: 100%;
    justify-content: space-around;
}

.link-galerie{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    object-fit: contain;
    max-width: 15%;
    
}

.link-galerie img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
 
}

#lightbox{
    z-index: 6;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

#lightbox img{
    width: 80%;
    object-fit: contain;
    height: 80%;
}

#lightbox.active{
    display: flex;
}

.exit i{ /*corriger l'erreur fontawesome*/
    color: #ffffff;
    z-index: 6;
    position: absolute;
    top: 5%;
    right: 5%;

}


.slider{
    display: none;
}


.contact{
    width: 100%;
    align-content: center;
    position: relative;
    top: -80px;
}



.mail{
    display: flex;
    justify-content: center;
    text-align: center;
}


p.bottom {
    margin-bottom: 100px;
}


footer{
    width: 100%;
    height: 20px;
}

footer p{
    font-size: 11pt;
}

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

    .titre-mobile, h1{
        display: flex;
        width: 100%;
        font-size: 4rem ;
        position: relative;
        margin-top: -50px;
    }

    #cat-mobile{
        display: flex;
        width: 70%;
        position: relative;
        margin-top: -50px;
    }

    .random-change {
      height: 20vh;
      width: 100%;
      display: flex;
      object-fit: cover;
      align-items: center;
      justify-content: space-around;
      margin-top: -50px;
    }


    #socialtop{
        display: none;
    }

    .titre1 h1{
        display: none;
    }

    .bio{

        display: none;
    }

    .menu{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        z-index: 3;
        margin-left: -200%;
        transition: all ease 0.5s;
        height: 100vh; 
    }

    body{
        margin: 0px;
    }

    .menu a{
        display: flex;
        align-content: center;
        justify-content: center;
       font-size: 2em;
    }
    
    .menu.mobile-menu{
        margin: 0;
        background-color: rgb(17, 13, 42);
        width: 100%;
        margin: 0px;
        height: 100vh;
        z-index: 3;
    }

    .fa-solid.fa-bars{
        color: red;
        display: flex;
        position: absolute;
        top: 20px;
        right: 50px;
        justify-content: flex-end;
        align-items: center;
        margin-left: 20px;
        width: 100%;
        z-index: 4;
    }

    .cat{
        display: none;
    }


    .logo{
        position: absolute;
        top: 20px;
        left: 30px;
    }

    .sous-titre img{
        display: none;
    }

    figure{

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 50%;
        margin: 0px;
    }


    .galerie{
        display: none;
    }



    .precedent{
        left: 1rem;
    }
    
    .suivant{
        right: 1rem;
    }

   .slider{
    display: block;
        border: solid 1px red;
        height: 50vh;
        width: 100%;
        position: relative;
        box-sizing: border-box;

    }

    .slider img{

        height: 100%;
        max-width: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .5s;
    }

    .slider img.active{
        opacity: 1;

    }

    .groupe b{
        display: flex;
        color: #ffffff;
        font-size: 8pt;
    
    }

    .videos{
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: contain;
        width: 100%;
    }

    .videos iframe{
        width: 100%;
    }
    
.ulule{

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        object-fit: contain;
        width: 100%;
    
}

.ulule p{
    margin-bottom: 5%;
}

.ulule button{
    border-radius: 15px;
    min-width: 50%;
    
}

.ulule img{
    display:flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    width: 100%;
    
}

}


#lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#lightbox.active { display: flex; }

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    padding: 20px;
}
#prevBtn { left: 20px; }
#nextBtn { right: 20px; }


#caption {
    margin-top: 12px;
    color: white;
    font-size: 1rem;
    font-family: roboto;
}

.ulule{

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        object-fit: contain;
        width: 100%;
    
}

.ulule p{
    margin-bottom: 5%;
}

.ulule button{
    border-radius: 15px;
    max-width: 15%;
    
}

.ulule img{
    display:flex;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    width: 100%;
    
}

.ulule button:hover {
  transition: transform .2s;
  transform: scale(1.2);
}