/*====================
all
====================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;500;700;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Vina+Sans&display=swap');
/*font-family: 'Poppins', sans-serif;*/

body {
    font-family: 'Poppins', sans-serif;
    background-color: #111111;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

li,
a {
    list-style: none;
    text-decoration: none;
    font-size: 18px;
    color: #ffffff;
}

a:visited {
    color: #835C83;
}

a:hover {
    color: #835C83;
}

section {
    display: flex;
    align-items: center;
    margin: 0px auto;
}

.menu-icon {
    display: none;
}

.pouette {
    position: relative;
    top: -320px;
    left: 170px;
    width: 40px;
    height: 55px;
}

/*header*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 3px #835C83;
    z-index: 1000;
}

.all_header {
    width: 1150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.heros_all::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Couleur du filtre (rouge avec une opacité de 0,5) */
    z-index: 1;
    /* Assurez-vous que le pseudo-élément se superpose à l'arrière-plan */
    pointer-events: none;
    /* Permet aux événements de passer à travers le pseudo-élément */
}

.nav_ul {
    display: flex;
}

.item_01,
.item_02,
.item_03 {
    margin-right: 25px;
}

.logo h1 {
    color: #835C83;
}

#flash,
#presentation,
#galerie {
    margin-top: -200px !important;
    padding-top: 100px !important;
}

p:hover {
    cursor: url('/photo/icons/tattoo-machine.png')5 36, auto;
}

main {
    background-color: #111111;
    max-width: 100%;
}

/*heros*/
.heros_all {
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 100px auto 250px auto;
    width: 100%;
    height: 550px;
    background-image: url(/photo/heros/IMG_6684.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
}

.heros {
    display: flex;
    align-items: center;
    margin: 0px auto 0px auto;
    max-width: 1200px;
    height: 100%;
}

.heros h2 {
    font-size: 48px;
	text-align: center;
    z-index: 2;
	width: 100%;
}

/*presentation*/
#presentation {
    margin-top: 650px !important;
    z-index: 100;
}

.photo_presentation img {
    object-fit: cover;
}

.presentation {
    margin: 0px auto 200px auto !important;
    max-width: 1150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.p_presentation{
    z-index: 100;
	text-align: justify;
}

.h2_presentation {
    margin-left: 49px !important;
    z-index: 100;
}

.text_presentation {
    margin-left: 50px;
    margin-bottom: 0px;
    z-index: 100;
}
/*galerie*/
.photo_galerie-element img.blurred {
    filter: blur(5px);
}

.galerie_1 {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0px auto 50px auto;
}

.flash-margin {
    margin-top: 150px !important;
}

.all-title {
    display: flex;
    flex-direction: column;
    max-width: 1174px;
    margin: 0px auto 0px auto;
}

.title-galerie h2 {
    margin-left: 75px;
}

.border-bottom-title {
    width: 158px;
    height: 3px;
    margin: -30px 0px 25px 0px;
    border-bottom: solid 3px #835C83;
}

.border-bottom-title_presa {
    width: 208px;
    height: 3px;
    margin: -30px 0px 25px 0px;
    border-bottom: solid 3px #835C83;
}

.flash-h1 {
    margin-left: 92px !important;
}

.photo_carre-top,
.photo_rectangle-top {
    margin-bottom: 20px;
}

.photo_galerie-element img:hover {
    filter: none;
    z-index: 200;
}

.photo_galerie-element {
    transition: transform 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.photo_galerie-element:hover {
    transition: transform 0.3s ease-in-out;
    transform: scale(1.1);
}

.photo_galerie-element img{
    transition: filter 0.3s ease-in-out;
    object-fit: cover;
    object-position: center;
}

.photo_galerie-element:hover img {
    filter: none;
    transition: filter 0.3s ease-in-out;
}

.photo_galerie-element:hover .photo_galerie-element.scale {
    transform: scale(1.1);
}

/*contact*/
.contact {
    display: flex;
    align-items: center;
    max-width: 100%;
    height: 550px;
    margin-top: 100px;
    background-image: url(/photo/Illustration25.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
}

.contact_element {
    display: flex;
    flex-direction: column;
    width: 1200px;
    margin: 125px auto 0px auto;
}

.icons_center {
    margin-bottom: 15px;
    margin-left: 25px;
}

.icons_center-last a {
    margin-left: 22px;
    display: flex;
    align-items: center;
    max-width: 300px;
    color: #835C83 !important;
}

.icons_center-last a:hover {
    color: #000000;
}

.icons_center a {
    color: #835C83;
    display: flex;
    align-items: center;
    max-width: 300px;
}

.icons_center a:hover {
    color: #000000 !important;
}

.icons_center a img {
    margin-right: 20px;
}

.icons_center-last a img {
    margin-right: 20px;
}

/*footer*/
footer {
    background-color: #835C83;
    margin-top: 100px;
    
}

.all_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto 0px auto;
    max-width: 1200px;
    height: 50px;
}

.copyright{
    margin-left: 25px;
}

.created {
    display: flex;
    margin-top: 10px;
    margin-right: 25px;
}

.created a {
    margin-left: 10px
}

/*stikers*/

div, p{
    z-index: 100;
}
.stikers_02{
    position: absolute;
    animation: float01 3s ease-in-out infinite;
}
.stikers_02{
    top: 1000;
    left: 550px;
    z-index: 1;
}

.stikers_03{
    position: fixed;
    animation: float04 3s ease-in-out infinite;
}
.stikers_03{
    top: 150px;
    right: 200px;
    z-index: 1;
}
.stikers_03 img{
    rotate: -25deg;
}

.stikers_05{
    position: absolute;
    animation: float03 3s ease-in-out infinite;
}
.stikers_05{
    left: 65%;
}
.stikers_05 img{
    rotate: 10deg;
}

@keyframes float01 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-50px) rotate(0deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}
@keyframes float02 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-40px) rotate(0deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}
@keyframes float03 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(0deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}
@keyframes float04 {
    0% {
        transform: translateY(-40px) rotate(0deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    100% {
        transform: translateY(-40px) rotate(0deg);
    }
}

@media screen and (max-width: 1145px) {
    .galerie_1 {
        max-width: 976px;
        margin: 0px auto 50px auto;
    }
    .stikers_03{
        top: 150px;
        right: 350px;
    }
    .photo_carre,
    .photo_rectangle {
        width: 215px;
    }

    .photo_carre {
        height: 215px;
    }

    .photo_rectangle {
        height: 300px;
    }
    .photo_galerie-element img{
        width: 100%;
        height: 100%;
    }
    .stikers_02{
        left: 175px;
    }
	.stikers_03{
        display: none;
    }
}

@media screen and (max-width: 860px) {
    .stikers_02{
        left: 120px;

    }
    
    /*all*/
    #fallingImage {
        display: none;
    }

    section {
        max-width: 768px;
        display: none;
    }

    /*menu hamburger*/
    .menu-icon {
        display: block;
        margin-right: 50px;
    }

    .logo {
        margin-left: 50px;
    }

    .nav_ul {
        flex-direction: column;
        position: absolute;
        padding: 30px 0px 20px 40px;
        top: 87px;
        left: 0;
        width: 100%;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1001;
        display: none;
    }

    .nav_ul.show {
        display: block;
        text-align: center;
        margin-left: -40px;
    }

    .item_01,
    .item_02,
    .link_03 {
        margin-right: 0px;
    }

    .link_03 {
        margin-left: 25px;
    }

    .item_03 {
        margin-bottom: 20px;
    }

    .pouette {
        top: -355px;
        left: 195px;
    }

    /*header*/
    header {
        max-width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(5px);
        border-bottom: solid 3px #835C83;
    }

    .all_header {
        max-width: 1200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo h1 {
        font-size: 28px;
    }

    .item_01,
    .item_02 {
        margin-right: 0px;
        margin-bottom: 25px;
    }

    /*heros*/
    .heros_all {
        margin: 100px 0px 150px 0px;
    }

    .heros {
        margin: 0px 25px 0px 25px;
    }

    /*presentation*/
    .presentation {
        margin: 150px auto 125px auto;
        flex-direction: column;
    }

    .photo_presentation {
        max-width: 350px;
        height: 450px;
        margin: 25px 50px;
    }

    .photo_presentation img {
        width: 350px;
        height: 450px;
    }

    .text_presentation {
        margin-right: 50px;
    }

    .presa-title {
        margin-left: -50px;
    }

    /*galerie*/
    .photo_carre-top,
    .photo_rectangle-top {
        margin-bottom: 20px;
    }

    .galerie {
        margin: 50px auto 0px auto;
    }

    .galerie_1 {
        margin: 50px auto 25px auto;
        justify-content: center;
        flex-wrap: wrap;
    }

    .photo_rectangle-1,
    .photo_carre-1 {
        margin-bottom: 20px;
    }

    .aur_0001 {
        margin-left: 20px;
    }

    .flash-margin {
        margin-top: 115px !important;
    }

    .photo_005,
    .photo_006 {
        margin-left: 20px;
    }

    .photo_007,
    .photo_008 {
        margin-left: 0px;
    }

    /*contact*/
    .contact {
        margin: 50px 0px 0px 0px;
        background-position: left center;
    }

    .contact_element {
        width: 768px;
        justify-content: center;
        margin-left: 25px;
    }

    .carte {
        display: none;
    }

    /*footer*/
    footer {
        max-width: 100%;
        margin-top: 50px;
        padding: 20px 0px;
    }

    .all_footer {
        display: flex;
        flex-direction: column;
    }
    .copyright, .created{
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 688px) {
    .photo_005,
    .photo_006 {
        margin-left: 20px;

    }
    .photo_007,
    .photo_008 {
        margin-left: 20px;
        margin-right: 20px;
    }
    .stikers_05{
        left: 350px;
    }
}

@media screen and (max-width: 489px) {
    .photo_005,
    .photo_006 {
        margin-left: 18px;

    }
    .photo_007,
    .photo_008 {
        margin-left: 38px;
        margin-right: 20px;
    }
    .stikers_05{
        left: 130px;
        top: 6500px;
    }
    
}

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

    .photo_001,
    .photo_002 {
        margin-left: 18px;
    }

    .photo_005,
    .photo_006 {
        margin-left: 18px;

    }

    .photo_007,
    .photo_008 {
        margin-left: 38px;
        margin-right: 20px;
    }
}